/* Halyard. The design system's palette, type and rules, set on the structure of
   a consulting firm's site: a two-tier header with menu panels, navy fields
   that carry the hierarchy, photographs at full width, ruled rows rather than
   boxes. One navy, one accent blue (Atlantic), brass only for work the system
   does. Jost for every line in capitals, Figtree for everything in sentence
   case; headlines Bold, nothing else above 600. Square edges, 2 px panels,
   circles for markers, 4:5 portraits. Cards lift on a shadow; the accent runs
   along a card's top or under a photograph; brass marks where the work stands
   and nothing else. No middle dots. Every module reads its colours from the
   surface it sits on. */

@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("/assets/fonts/Figtree-400.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-display: swap; src: url("/assets/fonts/Figtree-500.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("/assets/fonts/Figtree-600.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url("/assets/fonts/Figtree-700.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-display: swap; src: url("/assets/fonts/Jost-500.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 600; font-display: swap; src: url("/assets/fonts/Jost-600.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 700; font-display: swap; src: url("/assets/fonts/Jost-700.woff2") format("woff2"); }

:root {
  --navy: #002248;
  --navy-deep: #011a39;
  --navy-bright: #042f66;
  --navy-panel: #0b2c55;
  --navy-rule: #2c4570;
  --navy-rule-strong: #3d5888;
  --navy-text: #e2e9f2;
  --navy-muted: #a9b9d0;
  --atlantic: #3e6898;
  --atlantic-light: #759bc7;
  --brass: #9a7638;
  --brass-light: #c9a861;
  --surface: #f8fafb;
  --raised: #ffffff;
  --panel: #eef2f6;
  --ink: #002248;
  --text: #405368;
  --muted: #506173;
  --rule: #d7e0e8;
  --rule-strong: #b8c8d8;
  --sans: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --display: "Jost", Futura, "Century Gothic", sans-serif;
  --col: 1240px;
  --gutter: 20px;
  --band: 76px;
  --util-h: 0px;
  --bar-h: 74px;
  --hdr-h: var(--bar-h);
  --panel-r: 2px;
  --lift: 0 18px 44px rgba(1, 26, 57, 0.16);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ground: linear-gradient(150deg, var(--navy-deep) 0%, var(--navy) 48%, var(--navy-bright) 100%);
  /* what a module reads; each surface sets them again */
  --fg: var(--ink);
  --fg-2: var(--text);
  --fg-3: var(--muted);
  --line: var(--rule);
  --line-strong: var(--rule-strong);
  --accent: var(--atlantic);
  --lab: var(--atlantic);
  --sys: var(--brass);
  --tile: var(--panel);
  --field: var(--surface);
  color-scheme: light;
}
@media (min-width: 768px) { :root { --gutter: 40px; --band: 100px; } }
@media (min-width: 1024px) { :root { --gutter: 56px; --band: 116px; --util-h: 38px; --bar-h: 92px; } }
@media (min-width: 1280px) { :root { --gutter: 72px; --band: 128px; } }
@media (min-width: 1440px) { :root { --gutter: 100px; } }
html.hdr-full, html:not(.js) { --hdr-h: calc(var(--bar-h) + var(--util-h)); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; background: var(--surface); scroll-padding-top: calc(var(--bar-h) + var(--util-h) + 64px); }
html.is-rm { scroll-behavior: auto; }
html.is-locked { overflow: hidden; }
body { margin: 0; background: var(--surface); color: var(--fg-2); font-family: var(--sans); font-size: 1.0625rem; font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--atlantic); outline-offset: 3px; }
::selection { background: var(--navy); color: #fff; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--navy); color: #fff; padding: 12px 18px; font-weight: 600; font-size: 1rem; }
.skip:focus { top: 12px; }

h1, h2, h3, h4 { margin: 0; color: var(--fg); text-wrap: balance; }
h1, h2 { font-weight: 700; letter-spacing: -0.008em; }
h1 { font-size: clamp(2.375rem, 1.3rem + 2.9vw, 3.5rem); line-height: 1.08; }
h2 { font-size: clamp(1.875rem, 1.35rem + 1.5vw, 2.5rem); line-height: 1.14; }
h3 { font-size: 1.3125rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.004em; }
h4 { font-size: 1.0625rem; line-height: 1.35; font-weight: 600; }
.lede { font-size: clamp(1.125rem, 1.02rem + 0.4vw, 1.3125rem); line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }

/* Labels: Jost, always in capitals. Parts sit side by side, divided by a short hairline, never by a dot. */
.label, p.label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; font-family: var(--display); font-size: 0.8125rem; line-height: 1.4; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lab); }
/* the division follows the first part, so a line that wraps never begins with one */
.label span:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: 0.95em; margin: 0 0.85em; vertical-align: -0.12em; background: currentColor; opacity: 0.45; }
.label--span { display: flex; }

.ico { width: 18px; height: 18px; flex: none; }
.ico--inline { display: inline-block; width: 0.85em; height: 0.85em; margin-left: 0.2em; vertical-align: -0.05em; }
/* Buttons, as the reference site sets them: the arrow in the accent, moving 4 px as the pointer arrives. The primary
   button is the navy on paper and the accent on navy; the ghost is outlined in the surface's ink. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; min-height: 52px; padding: 0 26px; font-family: var(--sans); font-size: 1rem; font-weight: 700; line-height: 1; white-space: nowrap; border-radius: 4px; border: 2px solid var(--navy); background: var(--navy); color: #fff; cursor: pointer; transition: background 200ms ease, color 200ms ease, border-color 200ms ease; }
.btn .ico { width: 20px; height: 20px; stroke-width: 2; color: var(--atlantic-light); transition: transform 260ms var(--ease-out), color 200ms ease; }
.btn:hover { background: var(--navy-bright); border-color: var(--navy-bright); }
.btn:hover .ico { transform: translateX(4px); }
.btn:hover .ico--up-right { transform: translate(2px, -2px); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn--ghost .ico { color: var(--accent); }
.btn--ghost:hover { background: var(--fg); border-color: var(--fg); color: var(--ghost-ink, var(--surface)); }
.btn--ghost:hover .ico { color: var(--ghost-mark, var(--atlantic-light)); }
.btn--accent, .btn--light, .band--navy .btn:not(.btn--ghost), .phero .btn:not(.btn--ghost), .close .btn:not(.btn--ghost), .svc__panel .btn:not(.btn--ghost), .menu__intro .btn:not(.btn--ghost), .hero__top .btn:not(.btn--ghost), .stories__card .btn:not(.btn--ghost) { background: #fff; border-color: #fff; color: var(--navy); }
.btn--accent .ico, .btn--light .ico, .band--navy .btn:not(.btn--ghost) .ico, .phero .btn:not(.btn--ghost) .ico, .close .btn:not(.btn--ghost) .ico, .svc__panel .btn:not(.btn--ghost) .ico, .menu__intro .btn:not(.btn--ghost) .ico, .hero__top .btn:not(.btn--ghost) .ico, .stories__card .btn:not(.btn--ghost) .ico { color: var(--atlantic); }
.btn--accent:hover, .btn--light:hover, .band--navy .btn:not(.btn--ghost):hover, .phero .btn:not(.btn--ghost):hover, .close .btn:not(.btn--ghost):hover, .svc__panel .btn:not(.btn--ghost):hover, .menu__intro .btn:not(.btn--ghost):hover, .hero__top .btn:not(.btn--ghost):hover, .stories__card .btn:not(.btn--ghost):hover { background: var(--panel); border-color: var(--panel); color: var(--navy); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 0.9375rem; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.arrow-link { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 700; color: var(--fg); padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 320ms var(--ease-out), color 200ms ease; }
.arrow-link .ico { color: var(--accent); transition: transform 260ms var(--ease-out); }
a:hover > .arrow-link, a.arrow-link:hover { background-size: 100% 2px; }
a:hover > .arrow-link .ico, a.arrow-link:hover .ico { transform: translateX(4px); }
a:hover > .arrow-link .ico--up-right, a.arrow-link:hover .ico--up-right { transform: translate(2px, -2px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }

/* Surfaces ------------------------------------------------------------------ */

.frame { width: min(100% - 2 * var(--gutter), var(--col)); margin-inline: auto; }
.band { position: relative; background: var(--surface); color: var(--fg-2); }
.band > .frame { padding-block: var(--band); }
.band--panel { background: var(--panel); --tile: var(--raised); --field: var(--panel); --line: #d2dce6; }
.band--raised { background: var(--raised); --field: var(--raised); }
.band--navy, .phero, .hero__top, .close, .ftr, .menu__intro, .svc, .stories__card, .journey, .hdr__util, .ifeature, .brief--navy, .plate--navy {
  --fg: #ffffff; --fg-2: var(--navy-text); --fg-3: var(--navy-muted); --line: var(--navy-rule); --line-strong: var(--navy-rule-strong);
  --accent: var(--atlantic-light); --lab: var(--atlantic-light); --sys: var(--brass-light); --tile: var(--navy-panel); --field: var(--navy);
  --ghost-ink: var(--navy); --ghost-mark: var(--atlantic);
  color: var(--fg-2); color-scheme: dark;
}
.band--navy :focus-visible, .plate--navy :focus-visible, .phero :focus-visible, .hero__top :focus-visible, .close :focus-visible, .ftr :focus-visible, .menu__intro :focus-visible, .svc__panel :focus-visible, .hdr__util :focus-visible { outline-color: #fff; }
.band--navy { background: var(--navy); }
.band + .band:not(.band--navy):not(.band--panel) { border-top: 1px solid var(--rule); }
.band--panel + .band--panel { border-top: 1px solid #d2dce6; }

/* A section's head: the heading at left, its lede at right, the section's label as a running head on the rule above it */
.shead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 14px; align-items: start; margin-bottom: 56px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.shead__label { grid-column: 1 / -1; grid-row: 1; justify-self: end; margin: -2px -0.16em 6px 0; }
.shead__title { grid-column: 1 / span 8; grid-row: 2; }
.shead__side { grid-column: 1 / span 7; grid-row: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 4px; }
.shead__side:empty { display: none; }
.shead__lede { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--fg-2); }
.shead__link { margin-top: 2px; }
.split .shead { grid-column: 1 / span 5; display: flex; flex-direction: column; margin: 0; }
.split .shead__label, .faq .shead__label, .assure .shead__label { order: 2; justify-content: flex-start; margin: 12px 0 0; }
.split .shead__title, .faq .shead__title, .assure .shead__title { order: 1; }
.split .shead__side, .faq .shead__side, .assure .shead__side { order: 3; }
.split .shead__title { margin-bottom: 0; }
.split .shead__side { padding-top: 22px; }
/* the home page's section heads, as the reference site sets them: the heading at the left, the lede at the right */
.mhead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 16px; align-items: start; margin-bottom: 56px; }
.mhead h2 { grid-column: 1 / span 6; }
.mhead__side { grid-column: 8 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 0.55em; }
.mhead__lede { margin: 0; font-size: 1.125rem; line-height: 1.58; font-weight: 500; color: var(--fg-2); }

/* Header -------------------------------------------------------------------- */

.hdr { position: sticky; top: 0; z-index: 60; transition: transform 340ms var(--ease-out); }
html.hdr-condensed .hdr { transform: translateY(calc(-1 * var(--util-h))); }
.hdr__util { display: none; background: var(--navy); color: var(--navy-text); height: var(--util-h); font-size: 0.875rem; line-height: 1; }
.hdr__util-in { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.hdr__place { margin: 0; font-family: var(--display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--atlantic-light); }
.hdr__util-links { display: flex; align-items: center; gap: 26px; }
.hdr__util-links a, .hdr__search { display: inline-flex; align-items: center; gap: 8px; color: var(--navy-text); font-weight: 500; transition: color 160ms ease; }
.hdr__util-links .ico { width: 16px; height: 16px; }
.hdr__util-links a:hover, .hdr__search:hover { color: #fff; }
/* a search button waits hidden for the script that opens the search; where scripting runs (the head script marks the
   page .js before it is drawn) it is shown from the first frame, so it does not appear late and push the links
   beside it (Simon, 28 October: the top links blinked on every move between pages) */
html.js [data-search-open][hidden] { display: inline-flex !important; }
.hdr__search { background: none; border: 0; padding: 0; cursor: pointer; }
.hdr__main { position: relative; background: var(--raised); height: var(--bar-h); border-bottom: 1px solid var(--rule); }
.hdr__main-in { display: flex; align-items: center; height: 100%; }
.brand { display: inline-flex; align-items: center; }
.brand__logo { height: 42px; width: auto; }
.nav { display: none; margin-left: 48px; }
.nav__list { display: flex; }
.nav__link { position: relative; display: inline-flex; align-items: center; height: var(--bar-h); padding: 0 18px; font-size: 1rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.nav__link::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; background: var(--atlantic); transform: scaleX(0); transform-origin: 0 50%; transition: transform 320ms var(--ease-out); }
.nav__link:hover::after, .nav__link[aria-expanded="true"]::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-expanded="true"] { color: var(--atlantic); }
.hdr__cta { display: none; margin-left: auto; }
.hdr__burger { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 2px; font-size: 1rem; font-weight: 600; color: var(--ink); }
.hdr__burger-box { position: relative; width: 22px; height: 14px; }
.hdr__burger-box span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 300ms var(--ease-out), opacity 200ms ease; }
.hdr__burger-box span:nth-child(1) { top: 0; }
.hdr__burger-box span:nth-child(2) { top: 6px; }
.hdr__burger-box span:nth-child(3) { top: 12px; right: 7px; }
.hdr__burger[aria-expanded="true"] .hdr__burger-box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] .hdr__burger-box span:nth-child(2) { opacity: 0; }
.hdr__burger[aria-expanded="true"] .hdr__burger-box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); right: 0; }
@media (min-width: 1024px) {
  .hdr__util { display: block; }
  .nav { display: block; }
  .hdr__cta { display: inline-flex; }
  .hdr__burger { display: none; }
  .brand__logo { height: 52px; }
}
@media (min-width: 1024px) and (max-width: 1180px) { .nav { margin-left: 24px; } .nav__link { padding: 0 13px; } .nav__link::after { left: 13px; right: 13px; } }
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(1, 26, 57, 0.55); opacity: 0; transition: opacity 280ms ease; }
.scrim.is-on { opacity: 1; }

/* Menu panels */
.menu { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--util-h) - var(--bar-h)); overflow-y: auto; overscroll-behavior: contain; clip-path: inset(0 -80px 100% -80px); transition: clip-path 360ms var(--ease-out); }
@media (max-height: 820px) { .menu__desc { display: none; } }
.menu.is-open { clip-path: inset(0 -80px -120px -80px); }
.menu__in { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; background: var(--raised); }
.menu__intro { background: var(--navy); color: var(--navy-text); padding: 40px 36px 38px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.menu__title { margin: 0; font-size: 1.875rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.008em; color: #fff; }
.menu__text { margin: 0 0 8px; font-size: 1rem; line-height: 1.6; }
.menu__intro .arrow-link { margin-top: auto; color: #fff; }
.menu__cols { display: flex; gap: 40px; padding: 38px 44px 40px; }
.menu__col { flex: 1.3 1 0; min-width: 0; }
.menu__col--wide { flex: 2 1 0; }
/* two equal columns at the Industries menu's measure (its list sets two columns 36px apart) */
.menu__col--half { flex: 1 1 0; }
.menu__cols:has(> .menu__col--half) { column-gap: 36px; }
.menu__head { margin: 0 0 12px; font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--atlantic); }
.menu__links--2 { columns: 2 200px; column-gap: 36px; }
.menu__links li { break-inside: avoid; }
.menu__links a { display: block; margin-inline: -14px; padding: 10px 14px 11px; transition: background 200ms ease; }
.menu__links a:hover { background: var(--panel); }
.menu__name { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.menu__links a:hover .menu__name { color: var(--atlantic); }
.menu__desc { display: block; margin-top: 3px; font-size: 0.9375rem; line-height: 1.45; color: var(--muted); }
.menu__feature { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 270px; padding: 28px 30px; background: var(--navy-panel); color: #fff; overflow: hidden; --fg-3: var(--navy-muted); --lab: var(--atlantic-light); }
.menu__feature-img { position: absolute; inset: 0; }
.menu__feature-img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transform: scale(var(--zoom, 1)); transform-origin: 100% 50%; transition: transform 900ms var(--ease-out); }
.menu__feature-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1, 26, 57, 0.12) 0%, rgba(1, 26, 57, 0.72) 46%, rgba(1, 26, 57, 0.97) 100%); }
.menu__feature:hover .menu__feature-img img { transform: scale(calc(var(--zoom, 1) * 1.04)); }
.menu__feature-title { position: relative; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; color: #fff; }
.menu__feature-text { position: relative; font-size: 0.9375rem; line-height: 1.5; color: var(--navy-text); }
.menu__feature .label { position: relative; }
.menu__feature--text { justify-content: center; background: var(--ground); }
.menu__feature:focus-visible { outline: none; }
.menu__feature:focus-visible::after { content: ""; position: absolute; inset: 6px; z-index: 3; border: 2px solid #fff; pointer-events: none; }
.menu__close { position: absolute; right: 10px; top: 10px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--muted); }
.menu__close:hover { color: var(--ink); }
.menu__close { right: 0; top: 0; width: 46px; height: 46px; background: var(--navy); color: #fff; }
.menu__close:hover { color: #fff; background: var(--navy-bright); }
.menu__close:focus-visible { outline-color: #fff; outline-offset: -5px; }
@media (max-width: 1365px) { .menu__in { grid-template-columns: 260px minmax(0, 1fr) 260px; } }
@media (max-width: 1239px) { .menu__in { grid-template-columns: 260px minmax(0, 1fr); } .menu__feature { display: none; } }
html.js:not(.is-rm) .menu .menu__col, html.js:not(.is-rm) .menu .menu__feature > *, html.js:not(.is-rm) .menu .menu__intro > * { opacity: 0; transform: translateY(-6px); transition: opacity 320ms ease, transform 440ms var(--ease-out); }
html.js:not(.is-rm) .menu.is-open .menu__col, html.js:not(.is-rm) .menu.is-open .menu__feature > *, html.js:not(.is-rm) .menu.is-open .menu__intro > * { opacity: 1; transform: none; transition-delay: 80ms; }
html.js:not(.is-rm) .menu.is-open .menu__col:nth-child(2) { transition-delay: 140ms; }
html.js:not(.is-rm) .menu.is-open .menu__feature > * { transition-delay: 200ms; }

/* Drawer (phones and tablets) */
.drawer { position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - var(--bar-h)); height: calc(100dvh - var(--bar-h)); background: var(--raised); overflow: hidden; border-top: 1px solid var(--rule); }
.drawer__root, .drawer__panel { position: absolute; inset: 0; overflow-y: auto; padding: 0 0 40px; background: var(--raised); transition: transform 320ms var(--ease-out); }
.drawer__panel { transform: translateX(100%); }
.drawer__panel.is-open { transform: none; }
.drawer.has-panel .drawer__root { transform: translateX(-24%); }
.drawer__search { display: flex; align-items: center; gap: 12px; width: 100%; padding: 20px var(--gutter); background: var(--panel); border: 0; font-size: 1.0625rem; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.drawer__search .ico { color: var(--atlantic); }
.drawer__list { padding: 10px var(--gutter); }
.drawer__item { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.008em; color: var(--ink); }
.drawer__item .ico { color: var(--atlantic); }
.drawer__util { margin-top: 10px; }
.drawer__util a { display: block; padding: 14px var(--gutter); font-size: 1rem; font-weight: 500; color: var(--text); }
.drawer__cta { margin: 20px var(--gutter) 0; }
.drawer__back { display: flex; align-items: center; gap: 10px; width: 100%; padding: 18px var(--gutter); background: var(--navy); border: 0; font-size: 1rem; font-weight: 600; color: #fff; cursor: pointer; text-align: left; }
.drawer__title { margin: 0; padding: 26px var(--gutter) 8px; font-size: 1.75rem; font-weight: 700; color: var(--ink); }
.drawer__links { padding: 0 var(--gutter); }
.drawer__links a { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
@media (min-width: 1024px) { .drawer { display: none !important; } }

/* Search */
.search { position: fixed; inset: 0 0 auto 0; z-index: 90; width: 100%; max-width: none; max-height: 100vh; margin: 0; padding: 0; border: 0; background: var(--raised); color: var(--text); border-bottom: 1px solid var(--rule); }
.search::backdrop { background: rgba(1, 26, 57, 0.55); animation: hy-dim 420ms ease; transition: opacity 320ms ease; }
.search.is-closing::backdrop { opacity: 0; }
html.is-rm .search::backdrop { animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .search::backdrop { animation: none; transition: none; } }
@keyframes hy-dim { from { opacity: 0; } }
.search__form { margin: 0; background: var(--navy); }
.search__in { display: flex; align-items: center; gap: 18px; height: 92px; }
.search__label { color: var(--atlantic-light); }
.search__label .ico { width: 24px; height: 24px; }
.search__input { flex: 1; min-width: 0; height: 60px; border: 0; background: none; font: 600 clamp(1.125rem, 1rem + 0.9vw, 1.5rem)/1.2 var(--sans); color: #fff; }
.search__input:focus-visible { outline: none; }
.search__in:focus-within { background: linear-gradient(var(--atlantic-light), var(--atlantic-light)) 0 100% / 100% 2px no-repeat; }
.search__input::placeholder { color: var(--navy-muted); font-weight: 500; }
.search__input::-webkit-search-cancel-button { display: none; }
.search__close { width: 46px; height: 46px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: #fff; }
.search__close:focus-visible { outline-color: #fff; }
.search__results { width: min(100% - 2 * var(--gutter) + 32px, var(--col) + 32px); padding-inline: 16px; max-height: calc(100vh - 150px); overflow-y: auto; overflow-x: hidden; }
.search__results:empty { display: none; }
.search__note { margin: 0; padding: 24px 0; font-size: 1.0625rem; color: var(--muted); }
.search__hit { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 4px 28px; align-items: baseline; padding: 18px 16px; margin-inline: -16px; border-bottom: 1px solid var(--rule); transition: background 200ms ease; }
.search__hit:hover, .search__hit:focus-visible { background: var(--panel); }
.search__hit:focus-visible { outline-offset: -3px; }
.search__hit .label { grid-column: 1; grid-row: 1; }
.search__hit-title { grid-column: 2; grid-row: 1; font-size: 1.125rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.search__hit-text { grid-column: 2; grid-row: 2; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.search__hit .ico { grid-row: 1; grid-column: 3; align-self: center; color: var(--atlantic); }
@media (max-width: 767px) {
  .search__hit { grid-template-columns: minmax(0, 1fr) auto; }
  .search__hit-title, .search__hit-text { grid-column: 1; }
  .search__hit .label { grid-column: 1; grid-row: 3; margin-top: 4px; }
  .search__hit .ico { grid-column: 2; }
  .search__in { height: 72px; }
}

/* The home hero -------------------------------------------------------------- */

/* The words at the left on the navy; at the right the tower, lit, coming out of the navy as the page opens: its
   drawing first, line by line, then the photograph beneath it. The photograph and the drawing share one box
   (.hero__shift) with the photograph's own shape; both cover it from its right edge, so the lines lie on the building
   at every size of window. The box stands at the foot of the hero, overhanging it above and below, and is the
   smallest of three heights: the hero's own, and the two at which the building would reach the headline or the
   lede (--clear-high and --clear-low, measured by the tracer; --shift is how much of the photograph is carried past
   the window's right edge, where it is night). The sky is already the navy; sheets of navy in the svg take the left
   and the top of the photograph into the field. Beneath the hero the cards stand across its foot. */
.hero { position: relative; background: var(--panel); --over: 92px; --copy-w: 42rem; --lede-w: 30rem; --hero-h: 700px; }
.hero__top { position: relative; overflow: clip; background: var(--navy); color: var(--navy-text); }
.hero__plate { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__in { position: relative; display: flex; align-items: center; min-height: var(--hero-h); padding-block: 96px 176px; }
.hero__copy { max-width: var(--copy-w); }
.hero h1 { margin: 0; font-size: clamp(2.75rem, 1rem + 4.6vw, 4.75rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.034em; color: #fff; text-wrap: balance; }
.hero .lede { margin: 1.8rem 0 2.4rem; max-width: var(--lede-w); font-size: 1.125rem; line-height: 1.55; font-weight: 400; color: var(--navy-text); }
@media (min-width: 1181px) and (max-width: 1365px) { .hero { --copy-w: 37rem; --lede-w: 30rem; } .hero h1 { font-size: 3.75rem; } }
.hero { --left: max(var(--gutter), calc((100vw - var(--col)) / 2)); --anchor: max(0px, calc((100vw - var(--col)) / 2 - 140px));
  --room-high: calc(100vw - var(--anchor) - var(--left) - var(--copy-w) - 40px); --room-low: calc(100vw - var(--anchor) - var(--left) - var(--lede-w) - 40px); }
/* the photograph and its drawing: anchored to the window's right edge, or on a wide window 140 px beyond the column
   of words; the part carried past the anchor (--shift) fades into the navy, since the building runs out of the
   photograph on its right */
.hero__shift { position: absolute; right: var(--anchor); bottom: -44px; aspect-ratio: var(--ratio, 1.5); transform-origin: 62% 70%;
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 calc(var(--shift, 0) * 100% + 8%)); mask-image: linear-gradient(270deg, transparent 0, #000 calc(var(--shift, 0) * 100% + 8%));
  height: min(calc(100% + 88px), calc(var(--room-high) / (1 - var(--shift, 0) - var(--clear-high, 0.3)) / var(--ratio, 1.5)), calc(var(--room-low) / (1 - var(--shift, 0) - var(--clear-low, 0.2)) / var(--ratio, 1.5)));
  transform: translate(calc(var(--shift, 0) * 100%), var(--py, 0px)); }
.hero__plate .survey__photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 100% 50%; }
svg.survey { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
svg.survey .survey__stop { stop-color: var(--navy); }
svg.survey .sv { fill: none; stroke-linecap: round; }
svg.survey .sv--a { stroke: var(--atlantic-light); stroke-opacity: 1; stroke-width: 4; }
svg.survey .sv--b { stroke-opacity: 0.6; stroke-width: 2.8; }
svg.survey .sv--c { stroke-opacity: 0.36; stroke-width: 2.4; }
svg.survey .sv--r { stroke-opacity: 0.3; stroke-width: 2.2; }
svg.survey .sv--m { stroke: var(--atlantic-light); stroke-opacity: 1; stroke-width: 5; }
html.js:not(.is-rm) svg.survey:not(.is-static) .sv { stroke-dasharray: calc(var(--len) + 6); stroke-dashoffset: calc(var(--len) + 6); }
html.js:not(.is-rm) svg.survey.is-live .sv { animation: draw 1000ms var(--ease-inout) calc(var(--d, 0ms) * 0.7) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes photo-in { to { opacity: 1; } }
@keyframes settle { to { scale: 1; } }
html.js:not(.is-rm) [data-hero="survey"] .survey__photo { opacity: 0; animation: photo-in 1800ms var(--ease-out) 900ms forwards; }
html.js:not(.is-rm) [data-hero="survey"] .hero__shift { scale: 1.045; animation: settle 3400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms forwards; }
html.is-trace .hero__shift { scale: 1 !important; animation: none !important; }
html.is-trace svg.survey .survey__fade { display: none; }
html.is-trace .hero__plate .survey__photo { opacity: 1 !important; transform: none !important; animation: none !important; }
html.is-trace svg.survey .sv { stroke: #ff3b30 !important; stroke-opacity: 1 !important; stroke-width: 3.4; stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; }
/* the tower's leading lines are drawn from the foot to the crown, each in one stroke */
html.js:not(.is-rm) svg.survey.is-live .sv { animation-duration: var(--t, 1000ms); }
html.js:not(.is-rm) svg.survey.is-live .sv--ray { animation-timing-function: cubic-bezier(0.4, 0, 0.08, 1); }
svg.survey .sv--a { stroke-width: 3.4; }
svg.survey .sv--b { stroke-opacity: 0.7; stroke-width: 3; }
svg.survey .sv--c { stroke-opacity: 0.45; stroke-width: 2.6; }
.hero__top .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.72); }
.hero__top .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--navy); }
/* beneath the hero, three cards stand across its foot, the first places to go */
.hero__foot { position: relative; z-index: 2; margin-top: calc(-1 * var(--over)); background: linear-gradient(180deg, transparent 0, transparent var(--over), var(--panel) var(--over)); }
.rail { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rail a { --fg: var(--ink); --lab: var(--atlantic); --accent: var(--atlantic); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-content: start; height: 100%; min-height: 148px; padding: 30px 30px 28px; background: var(--raised); color: var(--text); border-top: 4px solid var(--atlantic); border-radius: var(--panel-r); box-shadow: var(--lift); transition: transform 320ms var(--ease-out), box-shadow 320ms ease; }
.rail a:hover { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(1, 26, 57, 0.22); }
.rail a:focus-visible { outline-offset: -5px; }
.rail__title { grid-column: 1; font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.016em; color: var(--ink); }
.rail__desc { grid-column: 1; margin-top: -2px; font-size: 0.9375rem; line-height: 1.45; color: var(--muted); }
.rail__meta { grid-column: 1; align-self: end; margin: 4px 0 0; }
.rail .ico { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 24px; height: 24px; color: var(--atlantic); transition: transform 260ms var(--ease-out); }
.rail a:hover .ico { transform: translateX(4px); }

/* Inner pages: the head -------------------------------------------------------- */

.phero { position: relative; overflow: hidden; background: var(--ground); color: var(--navy-text); }
.phero__in { position: relative; z-index: 1; padding-block: 34px 72px; }
.phero__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 44px; border-bottom: 1px solid var(--navy-rule); }
.phero__label { margin-right: -0.16em; }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 64px; align-items: start; }
.phero--split .phero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.phero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 46rem; }
.phero__copy h1 { color: #fff; }
.phero__copy .lede { margin: 0; color: var(--navy-text); }
.phero__copy .actions { margin-top: 10px; }
.phero__copy .arrow-link { color: #fff; }
.phero__hook { margin: 0; font-size: 1.375rem; line-height: 1.4; font-weight: 600; color: #fff; }
.phero__specialism { margin-top: -6px; }
/* the oversized sail bleeds off the bottom right, as on the title slide */
.phero__sail { position: absolute; right: -2%; bottom: -14%; width: min(30vw, 420px); aspect-ratio: 1133 / 1246; background: url("/assets/logos/halyard-mark-white.svg") no-repeat 100% 100% / contain; opacity: 0.07; pointer-events: none; }
.phero--split .phero__sail { opacity: 0.05; }
/* a landing page's photograph lies behind its header, under a navy veil that holds the words on the left */
.phero__media { position: absolute; inset: 0; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 70% 50%); }
/* film grain over the photograph, under the veil: one tile pixel to one screen pixel at every density, so it stays fine
   however far the photograph is enlarged (tools/make_grain.py; Simon, 28 October) */
.phero__grain { position: absolute; inset: 0; pointer-events: none; background: url(/assets/grain.webp) 0 0 / 512px 512px repeat; mix-blend-mode: soft-light; opacity: var(--grain, 0.55); }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) { .phero__grain { background-size: 341.333px 341.333px; } }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .phero__grain { background-size: 256px 256px; } }
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) { .phero__grain { background-size: 170.667px 170.667px; } }
@media print { .phero__grain { display: none; } }
/* on a phone's dense screen one grain per screen pixel is finer than the eye can resolve, so the tile (134 KB) is not
   fetched there (the speed pass, 28 October); the head preloads it everywhere else */
@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 767px) and (min-resolution: 2dppx) { .phero__grain { display: none; } }
.phero__media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(0, 34, 72, 0.97) 0%, rgba(0, 34, 72, 0.9) 34%, rgba(0, 34, 72, 0.62) 62%, rgba(0, 34, 72, 0.42) 100%),
  linear-gradient(0deg, rgba(0, 34, 72, 0.6) 0%, rgba(0, 34, 72, 0) 40%); }
.phero--media .focus, .phero--media .note { background: rgba(0, 34, 72, 0.64); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
.phero--media .phero__label { color: var(--navy-text); }
.phero--media .phero__media::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 150px; z-index: 1; background: linear-gradient(180deg, rgba(0, 34, 72, 0.85), rgba(0, 34, 72, 0)); }
.crumbs { max-width: 100%; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; font-size: 0.9375rem; font-weight: 500; line-height: 1.4; color: var(--navy-muted); }
.crumbs li:not(:last-child)::after { content: ""; flex: none; width: 6px; height: 6px; margin: 0 12px 0 9px; border-top: 1.5px solid var(--atlantic-light); border-right: 1.5px solid var(--atlantic-light); transform: rotate(45deg); }
.crumbs a { padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 300ms var(--ease-out), color 160ms ease; }
.crumbs a:hover { color: #fff; background-size: 100% 1px; }
.crumbs [aria-current="page"] { color: #fff; }
.crumbs [aria-current="page"] span { display: block; overflow-wrap: anywhere; }
/* areas of focus, beside the heading */
.focus { align-self: stretch; display: flex; flex-direction: column; gap: 18px; padding: 30px 32px 32px; background: rgba(11, 44, 85, 0.72); border-radius: var(--panel-r); }
.focus__list { display: grid; gap: 0; }
.focus__list li { display: grid; gap: 4px; padding: 16px 0 17px; border-top: 1px solid var(--navy-rule); }
.focus__list li:first-child { border-top: 0; padding-top: 4px; }
.focus__name { font-size: 1.1875rem; line-height: 1.3; font-weight: 600; letter-spacing: 0; color: #fff; }
.focus__list p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--navy-text); }
/* the careers note: a short flow from platforms to everyday use */
.note { align-self: stretch; padding: 30px 32px 32px; background: rgba(11, 44, 85, 0.72); border-radius: var(--panel-r); display: flex; flex-direction: column; gap: 16px; }
.note__title { font-size: 1.5rem; line-height: 1.2; color: #fff; }
.note .note__label { margin-top: -8px; }
.flow { position: relative; display: grid; gap: 18px; padding-left: 26px; }
.flow::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--navy-rule-strong); }
.flow li { position: relative; font-size: 1.0625rem; font-weight: 600; color: #fff; }
.flow__dot { position: absolute; left: -26px; top: 0.42em; width: 11px; height: 11px; border-radius: 50%; border: 1.75px solid var(--atlantic-light); background: var(--navy); }
.flow__dot--system { border: 0; background: var(--brass-light); }
.note__caption { margin: 0; font-size: 0.9375rem; color: var(--navy-muted); }
.terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; margin: 56px 0 0; padding-top: 24px; border-top: 1px solid var(--navy-rule); }
.terms dt { margin-bottom: 6px; font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--atlantic-light); }
.terms dd { margin: 0; font-size: 1.0625rem; color: #fff; }
/* a head with a figure: the about page's photograph */
.phero__figure { margin: 0; align-self: stretch; }
.phero__figure img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: var(--focus, 50% 50%); }
.phero__figure figcaption { margin-top: 12px; font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--atlantic-light); }
/* an article's head as it was before 28 October (the photograph beside the words, dissolving into the navy); no page
   uses phero--photo now: an article's photograph stands behind its head in navy monochrome (.phero--art) */
.phero--photo .phero__in { padding-bottom: 80px; }
.phero--photo .phero__copy { max-width: min(46rem, 54%); }
.phero--photo .phero__bar { max-width: 50%; }
.phero__meta { margin-top: -2px; }
.phero__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
.phero__photo img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 22%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 22%, #000 55%); }
.phero__portrait { position: absolute; right: max(var(--gutter), calc((100% - var(--col)) / 2)); bottom: 64px; z-index: 1; width: 200px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid var(--atlantic-light); }
.phero__portrait img { width: 100%; height: 100%; object-fit: cover; }
.phero--person .phero__copy { max-width: min(46rem, calc(100% - 260px)); }
.byline { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; margin-top: 6px; }
.byline__img { grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid var(--atlantic-light); }
.byline__img img { width: 100%; height: 100%; object-fit: cover; }
.byline__by { margin: 0; font-size: 1rem; color: var(--navy-text); }
.byline__by a { color: #fff; font-weight: 600; }
.byline__meta { display: flex; flex-wrap: wrap; margin: 0; font-size: 0.9375rem; color: var(--navy-muted); }
.byline__meta span:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: 0.9em; margin: 0 0.75em; vertical-align: -0.1em; background: currentColor; opacity: 0.5; }

/* On this page */
.subnav { position: sticky; top: var(--hdr-h); z-index: 30; background: var(--raised); border-bottom: 1px solid var(--rule); transition: top 340ms var(--ease-out); }
.subnav__in { display: flex; align-items: center; gap: 28px; }
.subnav__label { flex: none; margin: 0; font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--atlantic); }
.subnav ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: block; padding: 0 14px; line-height: 58px; background: linear-gradient(var(--atlantic), var(--atlantic)) 14px 100% / 0 3px no-repeat; font-size: 0.9375rem; font-weight: 600; white-space: nowrap; color: var(--muted); transition: color 200ms ease, background-size 320ms var(--ease-out); }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="true"] { color: var(--ink); background-size: calc(100% - 28px) 3px; }
.subnav a:focus-visible { outline-offset: -5px; }
html:not(.js) .subnav { position: static; }
@media (max-width: 767px) { .subnav__label { display: none; } }

/* Reading layouts ---------------------------------------------------------------- */

.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 26px; }
.split__body { grid-column: 7 / span 6; min-width: 0; }
.prose { font-size: 1.0625rem; line-height: 1.7; color: var(--fg-2); }
.prose > * { max-width: 44rem; }
.prose p { margin: 0 0 1.1em; }
.prose .lead, .prose p.lead { font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem); line-height: 1.5; color: var(--fg); }
.prose h2 { margin: 2.2em 0 0.65em; font-size: clamp(1.625rem, 1.25rem + 1vw, 2.125rem); line-height: 1.18; }
.prose > h2:first-child, .prose section:first-child > h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.8em 0 0.5em; font-size: 1.25rem; }
.prose h4 { margin: 1.6em 0 0.4em; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a:not(.btn):not(.arrow-link) { color: var(--accent); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); transition: text-decoration-color 200ms ease; }
.prose a:not(.btn):not(.arrow-link):hover { text-decoration-color: currentColor; }
.prose ul:not([class]), .prose ol:not([class]) { margin: 0 0 1.2em; padding-left: 1.25em; }
.prose ul:not([class]) { list-style: disc; }
.prose ol:not([class]) { list-style: decimal; }
.prose ul:not([class]) li, .prose ol:not([class]) li { margin-bottom: 0.45em; padding-left: 0.2em; }
.prose ul:not([class]) li::marker, .prose ol:not([class]) li::marker { color: var(--accent); }
.prose blockquote { margin: 2em 0; padding: 0; font-size: 1.375rem; line-height: 1.4; font-weight: 600; color: var(--fg); }
.prose section + section { margin-top: 0.4em; }
.prose table { width: 100%; border-collapse: collapse; margin: 0.6em 0 1.4em; font-size: 1rem; line-height: 1.5; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 14px 18px 15px 0; border-bottom: 1px solid var(--line); }
.prose thead th { font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lab); border-bottom: 1px solid var(--line-strong); }
.prose tbody th { width: 12rem; font-weight: 600; color: var(--fg); }
.prose--page { max-width: 46rem; }

/* columns divided by hairlines, never boxed */
.cols { display: grid; margin-top: 64px; padding-top: 30px; border-top: 1px solid var(--line); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col .label { margin: -2px 0 12px; }
.sec-cols .cols { margin-top: 0; }
.sec-rows .rowlist li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.sec-caps .caps ~ p { max-width: 46rem; margin: 22px 0 0; font-size: 1.0625rem; line-height: 1.6; }
.sec-caps .caps ~ p + p { margin-top: 12px; }
.col { padding-right: 32px; }
.col + .col { padding-left: 32px; border-left: 1px solid var(--line); }
.col h3 { margin-bottom: 10px; font-size: 1.1875rem; }
.col p { margin: 0; font-size: 1rem; line-height: 1.6; }

/* How we help: each capability is a row; where the row runs task, our work, your role, it is a process track:
   brass is what the system prepares, the ring is what a person decides (the design system's markers) */
.caps { border-top: 1px solid var(--line-strong); }
.cap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; padding: 40px 0 42px; border-bottom: 1px solid var(--line); }
.cap__head h3 { font-size: 1.375rem; line-height: 1.28; }
.cap__head p { margin-top: 12px; font-size: 1rem; }
.cap__track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.cap--track .cap__track { padding-top: 30px; }
.cap__line { position: absolute; left: 6px; right: 0; top: 6px; height: 1px; background: var(--line-strong); transform-origin: 0 50%; }
.station { position: relative; min-width: 0; }
.station p { margin: 6px 0 0; font-size: 1rem; line-height: 1.6; }
.station__label { margin: 0; font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lab); }
.mk { position: absolute; left: 0; top: -30px; width: 13px; height: 13px; border-radius: 50%; background: var(--field); }
.mk--start { border: 1.5px solid var(--line-strong); }
.mk--system { background: var(--sys); }
.mk--person { border: 2px solid var(--accent); }
.cap:not(.cap--track) .cap__track { column-gap: 0; }
.cap:not(.cap--track) .station { padding-right: 28px; }
.cap:not(.cap--track) .station + .station { padding-left: 28px; border-left: 1px solid var(--line); }

/* the approach: a stepper of rings joined by one line */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; padding-top: 34px; }
.steps__line { position: absolute; left: 8px; right: 8px; top: 8px; height: 1px; background: var(--line-strong); transform-origin: 0 50%; }
.step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.step__ring { position: absolute; left: 0; top: -34px; width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--accent); background: var(--field); }
.step h3 { font-size: 1.375rem; }
.step > p { margin: 0; font-size: 1rem; line-height: 1.65; }
.step__out { align-self: stretch; margin-top: auto; padding: 13px 12px 14px; background: var(--tile); border-radius: var(--panel-r); }
.step__out .label { margin-bottom: 6px; }
.step__out p { margin: 0; font-size: 0.78rem; line-height: 1.45; font-weight: 500; color: var(--fg); white-space: nowrap; }
/* the ring a node sends out once, as the line reaches it */
.step__halo { position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; pointer-events: none; }
.stage__mk .step__halo { border-color: var(--atlantic-light); }

/* in practice: three stages across the navy band */
.sec-flow { background: var(--ground); }
.stages { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; padding-top: 34px; }
.stages__line { position: absolute; left: 7px; right: 7px; top: 7px; height: 1px; background: var(--navy-rule-strong); transform-origin: 0 50%; }
.stage { position: relative; }
.stage__mk { position: absolute; left: 0; top: -34px; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--navy-rule-strong); background: var(--navy); }
.stage__mk--system { border: 0; background: var(--brass-light); }
.stage__mk--person { border: 2px solid var(--atlantic-light); }
.stage h3 { margin-bottom: 10px; font-size: 1.3125rem; color: #fff; }
.stage p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--navy-text); }
.sec-flow__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--navy-rule); }
.sec-flow__foot .sp-example-note { flex: 1 1 28rem; margin: 0; max-width: 46rem; font-size: 0.9375rem; color: var(--navy-muted); }
.sec-flow .arrow-link { color: #fff; }

/* control and responsibility, and the measures */
.assure { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; row-gap: 64px; }
.assure .shead { display: flex; flex-direction: column; margin-bottom: 36px; }
.assure .shead__side { padding-top: 14px; }
.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin-bottom: 30px; border-top: 1px solid var(--line); }
.controls li { padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.controls li:nth-child(odd) { padding-right: 16px; }
.controls h3 { margin-bottom: 8px; font-size: 1.125rem; }
.controls p { margin: 0; font-size: 1rem; line-height: 1.6; }
.assure__part--measures { align-self: start; padding: 34px 36px 36px; background: var(--panel); border-radius: var(--panel-r); --line: #d2dce6; }
.assure__part--measures .shead { border-top: 0; padding-top: 0; }
.rows { margin: 0 0 26px; border-top: 1px solid var(--line-strong); }
.rows > div { padding: 15px 0 16px; border-bottom: 1px solid var(--line); }
.rows dt { font-weight: 600; color: var(--fg); }
.rows dd { margin: 3px 0 0; font-size: 1rem; line-height: 1.55; }

/* getting started */
.start { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; row-gap: 36px; align-items: start; }
.start__head { margin: 0 0 14px; font-size: 1.1875rem; }
.ticks { margin: 0 0 28px; border-top: 1px solid var(--line); }
.ticks li { position: relative; padding: 13px 0 14px 32px; border-bottom: 1px solid var(--line); font-size: 1.0625rem; line-height: 1.5; color: var(--fg); }
.ticks li::before { content: ""; position: absolute; left: 3px; top: 1.2em; width: 12px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.brief { position: sticky; top: calc(var(--hdr-h) + 84px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 34px 34px 36px; background: var(--navy); color: var(--navy-text); border-radius: var(--panel-r); --fg: #fff; --accent: var(--atlantic-light); }
.brief h3 { font-size: 1.5rem; color: #fff; }
.brief p { margin: 0; }
.brief .btn { margin-top: 8px; background: #fff; border-color: #fff; color: var(--navy); }
.brief :focus-visible { outline-color: #fff; }

/* accordions */
.acc { border-bottom: 1px solid var(--line); }
.acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 2px 21px 0; cursor: pointer; list-style: none; font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: var(--fg); transition: color 200ms ease; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { color: var(--accent); }
.acc__icon { position: relative; flex: none; width: 16px; height: 16px; }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--accent); transition: transform 320ms var(--ease-out); }
.acc__icon::after { transform: rotate(90deg); }
.acc[open] .acc__icon::after { transform: rotate(0deg); }
.acc__in { padding: 0 0 22px; max-width: 44rem; }
.acc__in p { font-size: 1rem; line-height: 1.65; }
.acc__in h4 { margin: 1.1em 0 0.3em; }
.start .acc:first-of-type { border-top: 1px solid var(--line); }

/* questions */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; row-gap: 30px; align-items: start; }
.faq .shead { display: flex; flex-direction: column; margin: 0; }
.faq__list { border-top: 1px solid var(--line-strong); }
.refs { margin-top: 48px; }
.refs .acc { border-top: 1px solid var(--line); }
.refs .acc__in li { margin-bottom: 16px; }
.refs .acc__in li a { font-weight: 600; color: var(--fg); }
.refs .acc__in li p { margin: 4px 0 0; font-size: 0.9375rem; color: var(--fg-3); }

/* cards: the photograph, then the label, title and line beneath it */
.cards { display: grid; gap: 40px 32px; }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { min-width: 0; }
.card > a { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; height: 100%; }
.card__img { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 8px; background: var(--navy-panel); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease-out); }
.card > a:hover .card__img img { transform: scale(1.035); }
.card h3 { font-size: 1.25rem; line-height: 1.3; transition: color 200ms ease; }
.cards--3 .card h3 { min-height: 2.6em; }
.card .card__meta { margin-top: -4px; }
.card > a:hover h3 { color: var(--accent); }
.card p { margin: 0; font-size: 1rem; line-height: 1.6; }
.card .arrow-link { margin-top: auto; padding-top: 8px; }
.card.is-out { display: none; }
.reslinks { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); }
.reslinks--cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 0; padding-top: 0; border-top: 0; }
.reslinks--cards li { border-bottom: 1px solid var(--line); }
.reslinks--cards li + li { border-left: 1px solid var(--line); }
.reslinks--cards .arrow-link { display: flex; justify-content: space-between; width: 100%; padding: 24px 24px 24px 0; background: none; font-size: 1.0625rem; }
.reslinks--cards li + li .arrow-link { padding-left: 24px; }
.reslinks--cards .arrow-link:hover { color: var(--accent); }

/* people, on the About page: a row for each, the portrait at the left (4:5, the accent along its foot), the words at the right */
.bios { display: grid; gap: 20px; }
.bio { display: grid; grid-template-columns: 208px minmax(0, 1fr); column-gap: 56px; padding: 48px 52px 50px 48px; background: var(--tile); border-radius: var(--panel-r); }
.bio__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--panel); border-bottom: 4px solid var(--atlantic); }
.bio__img img { width: 100%; height: 100%; object-fit: cover; }
.bio__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 46rem; }
.bio__body h3 { font-size: 1.75rem; line-height: 1.2; font-weight: 700; }
.bio__body p:not(.label) { margin: 6px 0 0; font-size: 1.125rem; line-height: 1.65; }
.bio__body .actions { margin-top: 14px; gap: 1rem 1.8rem; }

/* the careers page's rows and the application */
.rowlist { border-top: 1px solid var(--line-strong); }
.rowlist li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; padding: 26px 0 28px; border-bottom: 1px solid var(--line); }
.rowlist h3 { font-size: 1.1875rem; }
.rowlist p { margin: 0; font-size: 1.0625rem; }
.split--prose { margin-top: 72px; }
.split--prose:first-child { margin-top: 0; }
.apply { max-width: 52rem; }
.apply form { display: grid; gap: 24px; padding: 40px 44px 44px; background: var(--raised); border-radius: var(--panel-r); }
.career-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.career-field { display: grid; gap: 8px; align-content: start; }
.career-wide { grid-column: 1 / -1; }
.career-field label, .apply legend { font-size: 1rem; font-weight: 600; color: var(--ink); }
.career-field small { font-size: 0.9375rem; color: var(--muted); }
.career-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.career-check { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; }
.career-status { margin: 0; font-weight: 600; color: var(--ink); }
input:not([type="radio"]):not([type="checkbox"]), select, textarea { width: 100%; min-height: 52px; padding: 12px 15px; border: 1.5px solid #8ea2b8; border-radius: 0; background: var(--raised); font: 400 1.0625rem/1.45 var(--sans); color: var(--ink); transition: border-color 160ms ease, outline-color 160ms ease; }
textarea { min-height: 140px; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 22px) 23px, calc(100% - 16px) 23px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
input:hover, select:hover, textarea:hover { border-color: var(--navy); }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(62, 104, 152, 0.25); outline-offset: 0; border-color: var(--atlantic); }
input[type="radio"], input[type="checkbox"] { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--navy); flex: none; }
input[type="file"] { padding: 12px; background: var(--panel); }
/* a question with a few short answers: the answers shown at once, as choices the width of the form (contact, careers) */
.career-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.career-choices legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; font-size: 1rem; font-weight: 600; color: var(--ink); }
.career-choice-row { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.career-choice { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; border: 1.5px solid #8ea2b8; background: var(--raised); font-size: 1.0625rem; line-height: 1.35; color: var(--ink); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.career-choice:hover { border-color: var(--navy); }
.career-choice input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid #8ea2b8; border-radius: 50%; background: var(--raised); flex: none; cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease; }
.career-choice input:focus { outline: none; }
.career-choice input:checked { border-color: var(--navy); box-shadow: inset 0 0 0 4px var(--raised), inset 0 0 0 9px var(--navy); }
.career-choice:has(input:checked) { border-color: var(--navy); background: var(--panel); box-shadow: inset 0 0 0 1px var(--navy); }
.career-choice:has(input:focus-visible) { outline: 3px solid rgba(62, 104, 152, 0.25); outline-offset: 0; border-color: var(--atlantic); }
@media (max-width: 599px) { .career-choice-row { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
/* the enquiry's two answers differ too much in length to stand side by side on one line each at every width: a list */
#contact-topic .career-choice-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* the CV: a place to drop the file or choose one, the whole of it the file input (laid over it, unseen), so a click
   anywhere opens the chooser and a file dropped on it is taken without scripting; once chosen it names the file */
.career-drop { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 18px; row-gap: 2px; align-items: center; min-height: 104px; padding: 22px 24px; border: 1.5px dashed #8ea2b8; background: var(--surface); transition: border-color 160ms ease, background-color 160ms ease; }
.career-drop__ico { grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--panel); color: var(--atlantic); stroke-width: 1.5; transition: background-color 160ms ease, color 160ms ease; }
.career-drop__ico.ico--file { display: none; }
.career-drop-text { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.career-drop-link { color: var(--atlantic); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.career-drop small { grid-column: 2; grid-row: 2; align-self: start; }
.career-drop__remove { grid-column: 3; grid-row: 1 / span 2; position: relative; z-index: 2; padding: 8px 2px; border: 0; background: none; font: 600 0.9375rem/1.2 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--atlantic); text-underline-offset: 3px; cursor: pointer; }
.career-drop__remove:hover { color: var(--atlantic); }
html.js .career-drop input[type="file"] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
html:not(.js) .career-drop { display: block; }
html:not(.js) .career-drop__ico, html:not(.js) .career-drop-text { display: none; }
.career-drop:hover, .career-drop.is-over { border-color: var(--atlantic); background: var(--panel); }
.career-drop:hover .career-drop__ico, .career-drop.is-over .career-drop__ico { background: var(--raised); }
.career-drop.is-over { border-style: solid; }
.career-drop:focus-within { outline: 3px solid rgba(62, 104, 152, 0.25); outline-offset: 0; border-color: var(--atlantic); }
.career-drop.is-chosen { border-style: solid; border-color: var(--navy); background: var(--raised); }
.career-drop.is-chosen .ico--upload { display: none; }
.career-drop.is-chosen .ico--file { display: block; background: var(--navy); color: #fff; }
.career-drop.is-error { border-color: #a3301f; }
.career-drop.is-error small { color: #a3301f; }
@media (max-width: 599px) { .career-drop { padding: 18px; column-gap: 14px; } .career-drop__ico { width: 40px; height: 40px; padding: 9px; } }

/* articles ------------------------------------------------------------------------ */

.progress { position: sticky; top: var(--hdr-h); z-index: 61; height: 0; transition: top 340ms var(--ease-out); }
.progress span { display: block; height: 3px; width: 100%; background: var(--brass); transform: scaleX(var(--read, 0)); transform-origin: 0 50%; }
html:not(.js) .progress, html.is-rm .progress { display: none; }
.railed { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 80px; align-items: start; }
.railed__rail { position: sticky; top: calc(var(--hdr-h) + 40px); display: flex; flex-direction: column; align-items: flex-start; gap: 28px; transition: top 340ms var(--ease-out); }
.toc { width: 100%; }
.toc__head { margin: 0 0 12px; font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--atlantic); }
.toc li a { display: block; padding: 9px 14px 10px; border-left: 2px solid var(--rule); font-size: 0.9375rem; line-height: 1.4; font-weight: 500; color: var(--muted); transition: color 200ms ease, border-color 300ms ease; }
.toc li a:hover { color: var(--ink); }
.toc li a[aria-current="true"] { border-left-color: var(--atlantic); color: var(--ink); font-weight: 600; }
.railed__body { min-width: 0; }
.summary { margin-bottom: 2.4em; padding: 26px 30px 28px; background: var(--panel); border-radius: var(--panel-r); }
.summary__label { margin-bottom: 10px; }
.summary p { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--fg); }
.numbered { margin: 0.6em 0 2em; border-top: 1px solid var(--line-strong); }
.numbered__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.numbered__n { font-family: var(--display); font-size: 1rem; font-weight: 600; letter-spacing: 0.12em; color: var(--accent); padding-top: 0.15em; }
.numbered h3 { margin: 0 0 6px; font-size: 1.1875rem; }
.numbered p { margin: 0; font-size: 1rem; }
.sources { margin-top: 2.6em; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.sources__title { margin: 0 0 14px !important; font-size: 1.25rem !important; }
.sources ul { display: grid; gap: 10px; }
.sources li { font-size: 1rem; }
.sources li a { font-weight: 600; }
.sources li p { margin: 2px 0 0; font-size: 0.9375rem; color: var(--fg-3); }
.author { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 22px; align-items: center; margin-top: 3em; padding: 26px 28px; background: var(--panel); border-radius: var(--panel-r); }
.author__img { width: 88px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; outline: 1.5px solid var(--atlantic); outline-offset: 2px; }
.author__img img { width: 100%; height: 100%; object-fit: cover; }
.author__name { margin: 0 0 4px; font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.author__name a { color: inherit !important; text-decoration: none !important; }
.author__body p { margin: 0; font-size: 1rem; }
.hi-decision-resource { margin: 2.6em 0; padding: 32px 34px 34px; background: var(--raised); border: 1px solid var(--rule); border-radius: var(--panel-r); }
.hi-decision-resource > h2 { margin-top: 0 !important; }
.hi-decision-table-wrap { overflow-x: auto; }
.hi-resource-note { font-size: 0.9375rem; color: var(--fg-3); }
.hi-fixture { padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.hi-fixture h3 { margin-top: 0 !important; }
.hi-fixture p { margin: 4px 0 0; font-size: 1rem; }
.hi-scorecard, .hi-planning-tool { margin: 2.4em 0; padding: 34px 36px 38px; background: var(--raised); border: 1px solid var(--rule); border-radius: var(--panel-r); max-width: none !important; }
.hi-scorecard > h2, .hi-planning-tool > h2 { margin-top: 0 !important; }
.hi-scorecard fieldset { min-width: 0; margin: 0; padding: 20px 0 22px; border: 0; border-top: 1px solid var(--rule); }
.hi-scorecard legend { padding: 0; font-size: 1.125rem; font-weight: 600; color: var(--ink); float: left; width: 100%; margin-bottom: 4px; }
.hi-scorecard fieldset > p { clear: both; font-size: 0.9375rem; color: var(--muted); margin: 0 0 12px; }
.hi-answer-options { display: flex; flex-wrap: wrap; gap: 10px; }
.hi-answer-options label { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1.5px solid var(--rule-strong); font-size: 1rem; font-weight: 500; color: var(--ink); cursor: pointer; transition: border-color 160ms ease, background 160ms ease; }
.hi-answer-options label:hover { border-color: var(--navy); }
.hi-answer-options label:has(input:checked) { border-color: var(--navy); background: var(--panel); }
.hi-answer-options input { margin: 0; }
.hi-score-result, .hi-planning-result { margin: 24px 0; padding: 24px 26px 26px; background: var(--navy); color: var(--navy-text); border-radius: var(--panel-r); --fg: #fff; --accent: var(--atlantic-light); }
.hi-score-result h2, .hi-score-result h3 { color: #fff; margin: 6px 0 10px !important; font-size: 1.375rem !important; }
.hi-score-result p, .hi-planning-result p { margin: 0 0 8px; }
.hi-score-result li { margin-bottom: 8px; }
.hi-score-actions, .hi-planning-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.hi-planning-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; margin-top: 16px; }
.hi-planning-fields label { display: grid; gap: 8px; font-size: 1rem; font-weight: 600; color: var(--ink); }

/* the insights listing */
.ifeature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin-bottom: 64px; background: var(--navy); color: var(--navy-text); border-radius: var(--panel-r); overflow: hidden; }
.ifeature__img { position: relative; min-height: 380px; overflow: hidden; }
.ifeature__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease-out); }
.ifeature:hover .ifeature__img img { transform: scale(1.03); }
.ifeature__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 44px 44px 42px; }
.ifeature__title { font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.18; font-weight: 700; letter-spacing: -0.008em; color: #fff; }
.ifeature__text { font-size: 1.0625rem; line-height: 1.6; }
.ifeature .arrow-link { margin-top: auto; padding-top: 12px; color: #fff; }
.ifeature:focus-visible { outline-offset: 4px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-bottom: 40px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.chips__set { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 14px; border: 1.5px solid var(--rule-strong); background: var(--raised); font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); cursor: pointer; transition: background 200ms ease, color 200ms ease, border-color 200ms ease; }
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chips__count { margin: 0; font-size: 0.9375rem; color: var(--muted); }
[data-cards]:not(.is-filtered) > .card[data-lead] { display: none; }

/* the home page's modules ----------------------------------------------------------- */

/* the firm's thesis, set apart from the sections below: a label, the statement as the heading at the close's scale,
   the two paragraphs side by side, then the facts and the ways on */
.thesis .thesis__label { margin-bottom: 36px; }
.thesis__statement { margin: 0 0 44px; max-width: 22ch; font-size: clamp(2rem, 1.2rem + 2.8vw, 3.5rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.028em; color: var(--ink); text-wrap: balance; }
.thesis__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.thesis__cols p { margin: 0; font-size: 1.125rem; line-height: 1.6; max-width: 36rem; }
@media (max-width: 767px) { .thesis__cols { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.facts-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 0; }
.facts-row li { padding: 24px 26px 26px; background: var(--tile); border-top: 4px solid var(--navy); border-radius: var(--panel-r); }
.facts-row .label { margin-bottom: 10px; }
.facts-row__line { display: block; font-size: 1.125rem; line-height: 1.4; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }

/* industries: a tab for each at the left; at the right its photograph, its line, the sections of its page and the way there */
/* industries: on the one Halyard navy, flat. The industries are a list on the navy itself, divided by hairlines;
   the open one takes the system's navy panel tint and an Atlantic bar. Beside it, a white card holds the open
   industry: its photograph, its line, the sections of its page and the way there. Every card stands in the same
   place, so the component is as tall as its tallest card from the start and never changes height. */
.sec-industries { background: var(--navy); }
.showcase { display: grid; grid-template-columns: 336px minmax(0, 1fr); align-items: stretch; --fg: var(--ink); --fg-2: var(--text); --fg-3: var(--muted); --line: var(--rule); --accent: var(--atlantic); --lab: var(--atlantic); --ghost-ink: var(--surface); }
.showcase__panels { grid-column: 2; grid-row: 1; min-width: 0; display: grid; background: var(--raised); color: var(--text); border-radius: var(--panel-r); overflow: clip; box-shadow: 0 24px 60px rgba(0, 12, 30, 0.35); color-scheme: light; }
.showcase__panel { grid-area: 1 / 1; }
html.js .showcase__panel[hidden] { display: grid !important; visibility: hidden; }
.showcase__tabs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; margin-right: 32px; border-top: 1px solid var(--navy-rule); border-bottom: 1px solid var(--navy-rule); }
.showcase__tab { position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 24px 18px 28px; font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--navy-muted); transition: background 240ms ease, color 200ms ease; }
.showcase__tab + .showcase__tab { box-shadow: inset 0 1px 0 var(--navy-rule); }
.showcase__tab .ico { width: 18px; height: 18px; color: var(--navy-muted); transition: transform 260ms var(--ease-out), color 200ms ease; }
.showcase__tab:hover { color: #fff; }
.showcase__tab:hover .ico { color: #fff; }
.showcase__tab[aria-selected="true"] { background: var(--navy-panel); color: #fff; }
.showcase__tab[aria-selected="true"] .ico { color: var(--atlantic-light); transform: translateX(4px); }
.showcase__tab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--atlantic-light); transform: scaleY(0); transform-origin: 50% 0; transition: transform 360ms var(--ease-out); }
.showcase__tab[aria-selected="true"]::before { transform: scaleY(1); }
.showcase__tab:focus-visible { outline-color: #fff; outline-offset: -4px; }
.showcase__panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 520px; }
.showcase__panel:focus-visible { outline-offset: -5px; }
.showcase__img { position: relative; overflow: hidden; background: var(--navy-panel); }
.showcase__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showcase__body { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 48px 52px 46px; }
.showcase__body h3 { font-size: 2rem; line-height: 1.14; font-weight: 700; letter-spacing: -0.016em; color: var(--ink); }
.showcase__body > p { margin: 0; font-size: 1.0625rem; color: var(--text); }
.showcase__body .linklist { width: 100%; margin: 6px 0 10px; }
.showcase__body .arrow-link { margin-top: auto; color: var(--ink); }
.linklist li { border-top: 1px solid var(--line); }
.linklist li:last-child { border-bottom: 1px solid var(--line); }
.linklist a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 2px 14px; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.006em; color: var(--fg); transition: padding 260ms var(--ease-out), color 200ms ease; }
.linklist .ico { width: 18px; height: 18px; color: var(--accent); }
.linklist a:hover { padding-left: 10px; color: var(--atlantic); }
html:not(.js) .showcase { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .showcase__panels { grid-column: 1; }
html:not(.js) .showcase__panel { grid-area: auto; }
html:not(.js) .showcase__tabs { display: none; }
html:not(.js) .showcase__panel + .showcase__panel { border-top: 4px solid var(--panel); }
html.js:not(.is-rm) .showcase__panel.is-entering .showcase__body > * { animation: rise 520ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 50ms + 60ms); }
html.js:not(.is-rm) .showcase__panel.is-entering .showcase__img img { animation: wipe 700ms var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes wipe { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }

/* services: the panel at the left; the three parts as numbered rows at the right, each with its drawn icon, drawn as the row comes into view.
   The navy panel reaches into the page's gutter by its own inner padding (--svc-pad), so the words inside it line up with
   the content edges of every other section (Simon, 27 October); where the gutter is no wider than that, it runs to the
   window's edge */
.svc { --svc-pad: 56px; margin-inline: calc(-1 * var(--svc-pad)); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); background: var(--navy); color: var(--navy-text); border-radius: var(--panel-r); counter-reset: svc; }
.svc__panel { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; }
.svc__rows { --svc-icon: 144px; --svc-gap: 48px; grid-column: 2; grid-row: 1; padding: 28px var(--svc-pad) 28px var(--svc-gap); }
.svc__panel-in { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding: 60px 40px 48px var(--svc-pad); }
@media (max-width: 1279px) { .svc { --svc-pad: 40px; } }
@media (max-width: 1023px) { .svc { border-radius: 0; } }
@media (max-width: 767px) { .svc { --svc-pad: var(--gutter); } }
.svc__img { position: relative; flex: 1 1 auto; min-height: 300px; overflow: hidden; }
.svc__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 40%; }
.svc__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--navy) 0%, rgba(0, 34, 72, 0.4) 34%, rgba(0, 34, 72, 0) 70%); }
.svc__panel h2 { color: #fff; }
.svc__panel p { margin: 0 0 12px; font-size: 1.125rem; line-height: 1.58; font-weight: 500; max-width: 24rem; }
.svc__row { position: relative; display: grid; grid-template-columns: var(--svc-icon) minmax(0, 1fr); column-gap: var(--svc-gap); row-gap: 12px; align-items: start; padding: 36px 0; counter-increment: svc; }
.svc__row + .svc__row { border-top: 1px solid var(--navy-rule); }
.svc__row .dicon { grid-column: 1; grid-row: 2 / span 3; width: var(--svc-icon); height: calc(var(--svc-icon) * 0.625); margin-top: 2px; }
.svc__row::before { content: counter(svc, decimal-leading-zero); grid-column: 1; grid-row: 1; font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; color: var(--atlantic-light); line-height: 2.3; }
.svc__row h3 { grid-column: 2; grid-row: 1; font-size: 1.625rem; line-height: 1.2; font-weight: 700; color: #fff; transition: color 200ms ease; }
.svc__row p { grid-column: 2; margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--navy-text); max-width: 38rem; }
.svc__row .arrow-link { grid-column: 2; justify-self: start; margin-top: 6px; color: #fff; }
.svc__row:hover h3 { color: var(--atlantic-light); }
.dicon { width: 112px; height: 70px; overflow: visible; color: var(--atlantic-light); }
.dicon line, .dicon path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dicon circle { fill: currentColor; stroke: none; }
.dicon .dicon__ring { fill: none; stroke: currentColor; stroke-width: 1.25; }
.dicon .dicon__ring--solid { fill: var(--navy); }
.dicon path.dicon__solid { fill: var(--navy); }
.dicon__core { color: #fff; }
.dicon__faint { opacity: 0.42; }
.dicon .dicon__frame { opacity: 0.5; }
html.js:not(.is-rm) [data-reveal] .dicon [style*="--len"] { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 900ms var(--ease-inout); transition-delay: calc(var(--k) * 110ms + 240ms); }
html.js:not(.is-rm) [data-reveal].is-in .dicon [style*="--len"] { stroke-dashoffset: 0; }
html.js:not(.is-rm) [data-reveal] .dicon circle { opacity: 0; transition: opacity 500ms ease 800ms; }
html.js:not(.is-rm) [data-reveal].is-in .dicon circle { opacity: 1; }
/* beneath, the work the firm is asked about most: eight sections of the industry pages, two across */
.svc + .wfgrid-head { margin-top: 72px; }
.wfgrid-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.wfgrid-head h3 { font-size: 1.625rem; font-weight: 700; }
.wfgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; border-top: 2px solid var(--fg); }
.wfgrid li { border-bottom: 1px solid var(--line); }
.wfgrid a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 6px; align-items: center; height: 100%; padding: 22px 12px 23px 18px; border-left: 4px solid transparent; transition: background 220ms ease, border-color 220ms ease; }
.wfgrid a:hover { background: var(--tile); border-left-color: var(--accent); }
.wfgrid__name { grid-column: 1; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.012em; color: var(--fg); }
.wfgrid__text { grid-column: 1; font-size: 0.9375rem; line-height: 1.5; color: var(--fg-3); }
.wfgrid .ico { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--accent); transition: transform 260ms var(--ease-out); }
.wfgrid a:hover .ico { transform: translateX(4px); }

/* the reporting example, as the reference site lays out its client work: the photograph, the card over its foot, the test cases beside it */
.stories__panel { position: relative; padding-bottom: 8px; }
.stories__img { position: relative; height: clamp(320px, 38vw, 520px); overflow: hidden; border-radius: 0 0 var(--panel-r) var(--panel-r); background: var(--navy-panel); }
.stories__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 74%; }
.stories__row { display: grid; grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); column-gap: 64px; align-items: start; }
.stories__card { position: relative; margin-top: -168px; margin-left: 40px; padding: 44px 48px 46px; background: var(--navy); border-top: 4px solid var(--atlantic-light); border-radius: var(--panel-r); box-shadow: var(--lift); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.stories__card h3 { font-size: 1.875rem; line-height: 1.14; font-weight: 700; letter-spacing: -0.016em; color: #fff; }
.stories__card p { margin: 0; }
.stories__card .btn { margin-top: 12px; }
.stories__results { padding-top: 36px; }
.stories__results .label { margin-bottom: 14px; }
.ticks { width: 100%; }
.ticks li { position: relative; padding: 14px 0 15px 38px; border-top: 1px solid var(--line); font-size: 1.0625rem; line-height: 1.5; font-weight: 600; color: var(--fg); }
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 1.18em; width: 15px; height: 8px; border-left: 3px solid var(--accent); border-bottom: 3px solid var(--accent); transform: rotate(-45deg); }

/* the close ------------------------------------------------------------------------- */

/* A page's close: over the skyline at night on the home and About pages, the section's name as a label, the
   statement, the words and the ways on; elsewhere, over the mark. */
.close { position: relative; overflow: hidden; background: var(--ground); color: var(--navy-text); }
.close__sail { position: absolute; right: -3%; bottom: -12%; width: min(40vw, 560px); aspect-ratio: 1133 / 1246; background: url("/assets/logos/halyard-mark-white.svg") no-repeat 100% 100% / contain; opacity: 0.9; pointer-events: none; }
.close__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); padding-block: clamp(88px, 11vw, 156px); }
.close__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 40rem; }
.close__title { font-family: var(--display); font-size: clamp(2rem, 1rem + 2.6vw, 3.125rem); line-height: 1.12; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.close__copy .close__label { margin-top: -4px; }
.close__copy p { margin: 0; font-size: 1.125rem; line-height: 1.6; max-width: 34rem; }
.close__copy .actions { margin-top: 10px; }
.close--photo { background: var(--navy-deep); }
.close--photo .close__img { position: absolute; inset: -12% 0 -12% 0; }
.close--photo .close__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 40%); opacity: 0.8; }
.close--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 34, 72, 0.94) 0%, rgba(0, 34, 72, 0.72) 50%, rgba(0, 34, 72, 0.3) 100%); }
.close--photo .close__in { display: flex; flex-direction: column; align-items: flex-start; padding-block: clamp(96px, 12vw, 168px); }
.close__label { margin: 0 0 22px; }
.close__statement { margin: 0 0 30px; max-width: 24ch; font-size: clamp(2rem, 1.2rem + 2.8vw, 3.5rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.028em; color: #fff; text-wrap: balance; }
.close__text { max-width: 36rem; margin-bottom: 34px; }
.close__text p { margin: 0 0 1em; font-size: 1.125rem; line-height: 1.6; }
.close__text p:last-child { margin-bottom: 0; }
.close__email { font-size: 1.0625rem; font-weight: 700; color: #fff; border-bottom: 2px solid var(--atlantic-light); padding-bottom: 3px; transition: color 160ms ease; }
.close__email:hover { color: var(--atlantic-light); }
.close .arrow-link { color: #fff; }

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

.ftr { position: relative; overflow: hidden; background: var(--navy-deep); color: var(--navy-text); font-size: 1rem; border-top: 1px solid var(--navy-rule); }
.ftr__in { position: relative; z-index: 1; padding-block: 72px 0; }
.ftr__top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: 48px; row-gap: 40px; align-items: start; padding-bottom: 56px; border-bottom: 1px solid var(--navy-rule); }
.ftr__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.ftr__line { margin: 0; max-width: 24rem; font-size: 1.0625rem; line-height: 1.5; color: #fff; }
.brand__logo--ftr { height: 46px; }
.ftr__offices ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ftr__city { display: block; margin-bottom: 6px; font-size: 1.25rem; font-weight: 700; color: #fff; }
.ftr__country { margin: 0; }
.ftr__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 36px; padding-block: 52px 56px; }
.ftr__head { margin: 0 0 16px; font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--atlantic-light); }
.ftr__col li { margin-bottom: 11px; line-height: 1.4; }
.ftr__col a { padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 300ms var(--ease-out), color 160ms ease; }
.ftr__col a:hover { color: #fff; background-size: 100% 1px; }
.ftr__social a { display: inline-flex; align-items: center; gap: 10px; }
.ftr__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; padding-block: 22px 30px; border-top: 1px solid var(--navy-rule); font-size: 0.9375rem; color: var(--navy-muted); }
.ftr__bottom ul { display: flex; flex-wrap: wrap; }
.ftr__bottom li + li { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--navy-rule); }
.ftr__bottom a { display: inline-flex; align-items: center; gap: 6px; }
.ftr__bottom a:hover { color: #fff; }
.ftr__bottom .ico { width: 15px; height: 15px; }
.ftr__sail { display: none; }

/* Reveal ---------------------------------------------------------------------------- */

/* On arrival. The words rise by the style sheet alone, from the first frame; the script never holds them. The
   hero's drawing and photograph play from the style sheet too (svg.survey, above), once the script has switched
   them on; without the script, or under reduced motion, both stand complete. The cards rise after the words. */
@keyframes hy-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hy-in { from { opacity: 0; } to { opacity: 1; } }
html.js:not(.is-rm) .hero__copy > *, html.js:not(.is-rm) .phero__bar, html.js:not(.is-rm) .phero__copy > * { animation: hy-up 760ms var(--ease-out) both; }
html.js:not(.is-rm) .hero__copy > :nth-child(2), html.js:not(.is-rm) .phero__copy > :nth-child(2) { animation-delay: 100ms; }
html.js:not(.is-rm) .hero__copy > :nth-child(3), html.js:not(.is-rm) .phero__copy > :nth-child(3) { animation-delay: 200ms; }
html.js:not(.is-rm) .hero__copy > :nth-child(n + 4), html.js:not(.is-rm) .phero__copy > :nth-child(n + 4) { animation-delay: 300ms; }
html.js:not(.is-rm) .phero__aside, html.js:not(.is-rm) .phero__figure, html.js:not(.is-rm) .phero__photo, html.js:not(.is-rm) .phero__portrait { animation: hy-up 900ms var(--ease-out) 260ms both; }
html.js:not(.is-rm) .phero__media { animation: hy-in 1400ms ease both; }
/* the sail fades up to its own faint opacity: hy-in's end state (1) held it at full strength (fixed 28 October) */
@keyframes hy-in-faint { from { opacity: 0; } }
html.js:not(.is-rm) .phero__sail { animation: hy-in-faint 1400ms ease both; }
html.js:not(.is-rm) .rail li { opacity: 0; transform: translateY(24px); animation: hy-up 800ms var(--ease-out) forwards; animation-delay: calc(900ms + var(--n, 0) * 120ms); }
html.js:not(.is-rm) .rail li:nth-child(2) { --n: 1; }
html.js:not(.is-rm) .rail li:nth-child(3) { --n: 2; }
.is-pending .cap__line, .is-pending .steps__line, .is-pending .stages__line { transform: scaleX(0); }
.is-pending .mk, .is-pending .step__ring, .is-pending .stage__mk { transform: scale(0); opacity: 0; }
@media (max-width: 767px) { .is-pending .cap__line, .is-pending .steps__line, .is-pending .stages__line { transform: scaleY(0); } }
.search__none { margin-top: 0; margin-bottom: 0; padding-bottom: 24px; color: var(--muted); }
.search__none:empty { display: none; }
.acc__body { overflow: hidden; }
html.js:not(.is-rm) [data-tabs]:not(.is-ready) [role="tabpanel"]:not(:first-child) { visibility: hidden; }
.career-status.is-error { color: #a3301f; }
[data-action][aria-busy="true"] { cursor: progress; opacity: 0.72; }
#career-file-help span + span::before { content: ""; display: inline-block; width: 1px; height: 0.9em; margin: 0 0.7em; vertical-align: -0.1em; background: currentColor; opacity: 0.45; }

html.js:not(.is-rm) [data-reveal] { opacity: 0; transform: translateY(18px); }
html.js:not(.is-rm) [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }

/* Where Halyard works: a tile for each office, with its country and a line on what is done there */
.offices-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.offices-row li { display: flex; flex-direction: column; gap: 10px; padding: 36px 36px 38px; background: var(--tile); border-top: 4px solid var(--navy); border-radius: var(--panel-r); }
.offices-row h3 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.016em; }
.offices-row p:not(.label) { margin: 8px 0 0; font-size: 1.0625rem; line-height: 1.58; }
.offices-row__note { margin-top: 40px; max-width: 46rem; font-size: 1.125rem; line-height: 1.6; }
.offices-row__note p { margin: 0; }
.offices-row__note a { font-weight: 600; color: var(--ink); background: linear-gradient(var(--atlantic), var(--atlantic)) 0 100% / 100% 1.5px no-repeat; }

/* Narrower screens ------------------------------------------------------------------ */

@media (max-width: 1359px) {
  .steps { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 34px; row-gap: 36px; }
  .steps__line { left: 8px; top: 8px; bottom: 8px; right: auto; width: 1px; height: auto; transform-origin: 50% 0; }
  .step__ring { left: -34px; top: 4px; }
  .step__out { align-self: flex-start; }
  .is-pending .steps__line { transform: scaleY(0); }
}

@media (max-width: 1180px) {
  .menu__cols { gap: 30px; padding: 34px 50px 36px 34px; }
  .showcase { grid-template-columns: 272px minmax(0, 1fr); }
  .showcase__tabs { margin-right: 24px; }
  .showcase__body { padding: 40px 36px; }
  .svc__panel-in { padding: 48px 32px 40px var(--svc-pad); }
  .svc__rows { --svc-icon: 120px; --svc-gap: 32px; padding: 20px var(--svc-pad) 20px var(--svc-gap); }
  .railed { grid-template-columns: 240px minmax(0, 1fr); column-gap: 56px; }
  .cap { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
}
@media (max-width: 1023px) {
  .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .cols--4 .col:nth-child(3) { padding-left: 0; border-left: 0; }
  /* the words come first, on the navy, and the photograph follows beneath them, the building standing in it */
  .hero__top { display: flex; flex-direction: column; }
  .hero { --plate-h: clamp(340px, 56vw, 520px); --over: 64px; --copy-w: 42rem; --lede-w: 36rem; }
  .hero__plate { position: relative; inset: auto; order: 2; width: 100%; height: var(--plate-h); }
  .hero__shift { -webkit-mask-image: none; mask-image: none; --bh: calc(var(--plate-h) + 88px); --bw: max(100%, calc(var(--bh) * var(--ratio, 1.5))); top: -44px; right: auto; bottom: auto; width: var(--bw); height: var(--bh); aspect-ratio: auto; left: clamp(calc(100% - var(--bw)), calc(50% - var(--focus, 0.5) * var(--bw)), 0px); transform: translateY(var(--py, 0px)); }
  .hero__in { min-height: 0; padding-block: 64px 40px; }
  .hero h1 { font-size: clamp(2.5rem, 1rem + 4.2vw, 3.25rem); }
  .rail { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rail a { min-height: 0; padding: 24px 24px 22px; }
  .rail__title { font-size: 1.1875rem; }
  .mhead { grid-template-columns: minmax(0, 1fr); margin-bottom: 40px; }
  .mhead h2, .mhead__side { grid-column: auto; }
  .mhead__side { padding-top: 0; max-width: 42rem; }
  .stories__row { grid-template-columns: minmax(0, 1fr); }
  .stories__card { margin-left: 24px; margin-right: 24px; }
  .stories__results { padding-top: 28px; }
  .svc__panel-in { padding: 48px var(--svc-pad) 36px; }
  .svc__img { min-height: 240px; }
  .svc__rows { --svc-icon: 128px; --svc-gap: 40px; padding: 0 var(--svc-pad) 20px; }
  .wfgrid { grid-template-columns: minmax(0, 1fr); }
  .bio { grid-template-columns: 168px minmax(0, 1fr); column-gap: 32px; padding: 32px; }
  .shead, .split, .faq, .start, .assure, .ftr__top { grid-template-columns: minmax(0, 1fr); }
  .shead__label, .shead__title, .shead__side, .split .shead, .split__body { grid-column: 1; grid-row: auto; }
  .shead { margin-bottom: 40px; }
  .shead__label { order: 3; justify-self: start; margin: 4px 0 0; }
  .shead__side { padding-top: 0; }
  .split .shead, .faq .shead, .assure .shead { display: flex; flex-direction: column; }
  .shead__title { order: 1; }
  .shead__side { order: 2; }
  .phero--split .phero__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .phero__sail { display: none; }
  .phero__media::after { background: rgba(0, 34, 72, 0.9); }
  .phero--photo .phero__copy { max-width: none; }
  .phero__photo { position: relative; width: calc(100% + 2 * var(--gutter)); height: 300px; margin: 0 calc(-1 * var(--gutter)); order: 2; }
  .phero--photo { display: flex; flex-direction: column; }
  .phero--photo .phero__photo { order: 2; width: 100%; margin: 0; }
  .phero__photo img { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%); }
  .phero--photo .phero__in { padding-bottom: 32px; }
  .phero__portrait { position: static; width: 160px; margin-top: 30px; }
  .phero--person .phero__copy { max-width: none; }
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase { grid-template-columns: minmax(0, 1fr); }
  .showcase__panels { grid-column: 1; grid-row: 2; }
  .showcase__tabs { grid-column: 1; grid-row: 1; flex-direction: row; margin: 0 0 16px; border-bottom: 0; overflow-x: auto; scrollbar-width: none; }
  .showcase__tabs::-webkit-scrollbar { display: none; }
  .showcase__tab { flex: 0 0 auto; padding: 16px 22px 18px; white-space: nowrap; }
  .showcase__tab + .showcase__tab { border-top: 0; border-left: 1px solid var(--navy-rule); }
  .showcase__tab .ico { display: none; }
  .showcase__tab::before { top: auto; right: 0; width: auto; height: 4px; transform: scaleX(0); transform-origin: 0 50%; }
  .showcase__tab[aria-selected="true"]::before { transform: scaleX(1); }
  .svc { grid-template-columns: minmax(0, 1fr); }
  .svc__panel, .svc__rows { grid-column: 1; }
  .svc__rows { grid-row: 2; }
  .railed { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .railed__rail { position: static; }
  .railed__rail .btn { display: none; }
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brief { position: static; }
  .close--booking .close__in { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .close__sail { width: 46vw; opacity: 0.5; }
  .ifeature { grid-template-columns: minmax(0, 1fr); }
  .ifeature__img { min-height: 280px; }
  .ftr__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
}
@media (max-width: 767px) {
  .btn { max-width: 100%; white-space: normal; line-height: 1.3; padding-block: 12px; text-align: center; }
  h3 { font-size: 1.25rem; }
  /* on a phone the words come first, on the navy, and the photograph follows with the boat in the middle of it */
  .cols--3, .cols--4, .cap__track, .steps, .stages, .controls, .reslinks--cards { grid-template-columns: minmax(0, 1fr); }
  .col, .col + .col { padding: 18px 0; border-left: 0; }
  .col + .col { border-top: 1px solid var(--line); }
  .cap--track .cap__track { padding: 0 0 0 30px; row-gap: 22px; }
  .cap__line { left: 6px; top: 6px; bottom: 6px; right: auto; width: 1px; height: auto; transform-origin: 50% 0; }
  .mk { left: -30px; top: 3px; }
  .cap:not(.cap--track) .station, .cap:not(.cap--track) .station + .station { padding: 14px 0 0; border-left: 0; }
  .steps, .stages { padding: 0 0 0 34px; row-gap: 32px; }
  .steps__line, .stages__line { left: 8px; top: 8px; bottom: 8px; right: auto; width: 1px; height: auto; transform-origin: 50% 0; }
  .step__ring, .stage__mk { left: -34px; top: 4px; }
  .controls li:nth-child(odd) { padding-right: 0; }
  .assure__part--measures { padding: 28px 22px; }
  .reslinks--cards li + li { border-left: 0; }
  .reslinks--cards li + li .arrow-link { padding-left: 0; }
  .cards--3 { grid-template-columns: minmax(0, 1fr); }
  .bio { grid-template-columns: minmax(0, 1fr); row-gap: 20px; padding: 26px 22px 28px; }
  .bio__img { width: 168px; }
  .hero { --plate-h: 360px; --over: 48px; }
  .hero__in { padding-block: 48px 32px; }
  .facts-row { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 36px 0 32px; }
  .offices-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .offices-row li { padding: 28px 26px 30px; }
  .stories__row { row-gap: 8px; }
  .stories__card { margin: -72px 12px 0; padding: 32px 26px 34px; }
  .stories__results { padding-top: 24px; }
  .stories__img { height: 260px; }
  .wfgrid a { padding: 20px 8px 21px 14px; }
  .svc__row { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .svc__row .dicon { grid-column: 1 / -1; grid-row: 1; margin: 0 0 4px; }
  .svc__row::before, .svc__row h3 { grid-row: 2; }
  .rowlist li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .terms { grid-template-columns: minmax(0, 1fr); }
  .showcase__panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 0; }
  .showcase__img { height: 220px; }
  .showcase__body { padding: 30px 24px 32px; }
  .showcase__body h3 { font-size: 1.625rem; }
  .svc__panel-in { padding: 40px var(--svc-pad) 32px; }
  .svc__img { min-height: 200px; }
  .svc__rows { padding: 0 var(--svc-pad) 12px; }
  .numbered__item { grid-template-columns: 44px minmax(0, 1fr); }
  .summary, .author { padding: 22px 20px; }
  .hi-scorecard, .hi-planning-tool, .hi-decision-resource { padding: 26px 20px 28px; }
  .hi-planning-fields, .career-form-grid { grid-template-columns: minmax(0, 1fr); }
  .apply form { padding: 28px 22px 32px; }
  .prose tbody th { width: auto; }
  .prose table, .prose thead, .prose tbody, .prose tr, .prose th, .prose td { display: block; }
  .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .prose tr { padding: 14px 0 6px; border-bottom: 1px solid var(--line); }
  .prose th, .prose td { padding: 0 0 10px; border: 0; }
  .prose td[data-h]::before, .prose th[data-h]::before { content: attr(data-h); display: block; margin-bottom: 2px; font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lab); }
  .ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__in { padding-top: 56px; }
  .close__sail { width: 64vw; opacity: 0.18; }
  .chips { flex-direction: column; align-items: flex-start; }
}

/* Reduced motion: every figure complete on arrival, nothing animated. html.is-rm is set by the
   head script (the setting, or ?rm); the media query covers a reader without scripting. */
html.is-rm *, html.is-rm *::before, html.is-rm *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

@media print {
  .hdr, .scrim, .subnav, .progress, .search, .hero__plate, .phero__sail, .phero__photo, .ftr__sail, .close__sail, .close__img, .railed__rail, .brief .btn, .showcase__tabs { display: none !important; }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
  *:not(.mk):not(.stage__mk):not(.flow__dot):not(.step__ring), *::before, *::after { background: transparent !important; color: #002248 !important; border-color: #b8c8d8 !important; }
  .mk, .stage__mk, .flow__dot, .step__ring { -webkit-print-color-adjust: exact; print-color-adjust: exact; transform: none !important; opacity: 1 !important; }
  .showcase [role="tabpanel"][hidden] { display: block !important; visibility: visible !important; }
  .brand__logo--ftr { content: url("/assets/logos/halyard-horizontal-dark.svg"); }
  .hero, .phero { min-height: 0; }
  .hero__in, .phero__in { padding-block: 20px; }
}

/* How we work, on the home page: the five stages held on screen while the reader scrolls through them. The line
   beside them marks where the reader is, in brass (where the work stands); the figure at the right draws delivery
   stage by stage: the existing process traced the long way round, the connections available and the outcome, the
   system's route beside it, the route in use and extended, and the settled whole (site.js, delivery()). */
.journey { position: relative; background: var(--navy); color: var(--navy-text); --p: 0; }
.journey__pin > .frame { padding-block: var(--band); }
.journey__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.journey__index { position: relative; padding-left: 2.8rem; }
.journey__index h2 { margin: 0 0 0.8rem; color: #fff; }
.journey__lede { margin: 0 0 1.8rem; max-width: 30rem; font-size: 1.0625rem; line-height: 1.6; font-weight: 500; color: var(--navy-text); }
.journey__line { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--navy-rule); }
.journey__fill { position: absolute; z-index: 1; left: 0; top: 0; width: 2px; height: calc(var(--p) * 100%); background: var(--brass-light); transition: height 420ms var(--ease-out); }
.journey__dot { position: absolute; z-index: 2; left: -3px; top: calc(var(--p) * 100%); width: 8px; height: 8px; border-radius: 50%; background: var(--brass-light); transform: translateY(-50%); transition: top 420ms var(--ease-out); }
/* on the way in the dot is the scroll's own, with no easing of its own */
.journey.is-waiting .journey__fill, .journey.is-waiting .journey__dot { transition: none; }
.journey__tick { position: absolute; z-index: 0; left: -4px; width: 10px; height: 2px; background: var(--navy-muted); transform: translateY(-50%); transition: top 420ms var(--ease-out); }
/* until the sequence begins, the first stage is open but not yet marked */
.journey.is-waiting .journey__item.is-active .journey__n, .journey.is-waiting .journey__item.is-active .journey__phase { color: var(--navy-muted); }
.journey__item + .journey__item { margin-top: 1.1rem; }
.journey__item a { display: flex; align-items: center; gap: 1.1rem; color: var(--navy-muted); font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.022em; transition: color 320ms ease; }
.journey__item.is-active a { color: #fff; }
.journey__n { font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; transition: color 320ms ease; }
.journey__phase { width: 20px; height: 20px; flex: none; transition: color 320ms ease; }
.journey__phase svg { width: 100%; height: 100%; }
.journey__item.is-active .journey__n, .journey__item.is-active .journey__phase { color: var(--brass-light); }
.journey__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--ease-out); }
.journey__body > div { overflow: hidden; }
.journey__item.is-active .journey__body { grid-template-rows: 1fr; }
.journey__body p { margin: 0; padding: 0.8rem 0 0.3rem 4rem; max-width: 31rem; font-size: 1.0625rem; line-height: 1.6; font-weight: 500; color: var(--navy-text); }
.journey__more { margin: 2.2rem 0 0; }
.journey__more .arrow-link { color: #fff; }
.journey__stage { display: flex; align-items: center; justify-content: center; }
.journey__stage svg { width: min(62vh, 100%); height: auto; overflow: visible; }
svg.dl .dl__noise { fill: var(--navy-text); }
svg.dl .dl__frame { fill: none; stroke: #fff; stroke-width: 1.4; }
svg.dl .dl__seal { fill: none; stroke: #fff; stroke-width: 1.2; opacity: 0.85; }
svg.dl .dl__ticks line { stroke: #fff; stroke-width: 1.4; opacity: 0; }
svg.dl .dl__edge { stroke: var(--navy-text); stroke-width: 1.2; stroke-linecap: round; }
svg.dl .dl__old { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
svg.dl .dl__route { fill: none; stroke: var(--brass-light); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
svg.dl .dl__branch { fill: none; stroke: var(--brass-light); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
svg.dl .dl__dot { fill: #fff; }
svg.dl .dl__ring { fill: none; stroke: var(--atlantic-light); stroke-width: 1.6; }
@media (min-width: 1024px) and (min-height: 621px) {
  .journey { height: 320vh; height: 320svh; }
  /* the trial scene is the scroll's own: each stage's change is made over the first half of the stage and the rest
     keeps moving, so it is given more room than the drawn figure */
  .journey.has-scene { height: 460vh; height: 460svh; }
  .journey__pin { position: sticky; top: var(--hdr-h); height: calc(100vh - var(--hdr-h)); height: calc(100svh - var(--hdr-h)); overflow: hidden; transition: top 340ms var(--ease-out); }
  .journey__pin > .frame { height: 100%; display: flex; align-items: center; padding-block: 0; }
  .journey__grid { width: 100%; }
}
html.is-rm .journey { height: auto; }
html.is-rm .journey__pin { position: static; height: auto; overflow: visible; }
html.is-rm .journey__pin > .frame { height: auto; display: block; padding-block: var(--band); }
html.is-rm .journey__item a { color: #fff; }
html.is-rm .journey__item .journey__n, html.is-rm .journey__item .journey__phase { color: var(--brass-light); }
html.is-rm .journey__item .journey__body { grid-template-rows: 1fr; }
/* TRIAL (28 October): the stages in three dimensions, behind ?delivery=new (delivery3d.js). The scene fills the held
   section from 36% of its width (nothing is drawn further left), fading out towards the words between 40% and 46.5%,
   and the drawn figure gives way to it */
.journey__scene { position: absolute; inset: 0 0 0 36%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 900ms ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 6.25%, #000 16.4%); mask-image: linear-gradient(90deg, transparent 0, transparent 6.25%, #000 16.4%); }
.journey__scene.is-ready { opacity: 1; }
.journey__scene canvas { display: block; width: 100%; height: 100%; }
.journey.has-scene .journey__pin > .frame { position: relative; z-index: 1; }
/* With the scene, the stage line takes the scene's language (Simon, 29 October: everything on the left was a hairline
   beside the scene's solid lines). A 4px track with round ends and a brass fill as thick; at each stage a ring that
   turns solid brass once the reader has reached it; a larger brass dot, set off from the line, where the reader is.
   The numbers go: the line, its rings and the phase icons already give the order. All centred on the line's middle,
   1px in from the column's edge, where the hairline was. */
.journey.has-scene .journey__line { left: -1px; width: 4px; border-radius: 2px; }
.journey.has-scene .journey__fill { width: 4px; border-radius: 2px; }
.journey.has-scene .journey__tick { z-index: 1; left: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--navy); box-shadow: inset 0 0 0 2px var(--navy-muted);
  transition: top 420ms var(--ease-out), background-color 320ms ease, box-shadow 320ms ease; }
.journey.has-scene .journey__tick.is-past { background: var(--brass-light); box-shadow: inset 0 0 0 2px var(--brass-light); }
.journey.has-scene .journey__dot { left: -6px; width: 16px; height: 16px; box-shadow: 0 0 0 3px var(--navy); }
.journey.has-scene .journey__n { display: none; }
.journey.has-scene .journey__body p { padding-left: calc(20px + 1.1rem); }
/* Entering and leaving the held section (Simon, 29 October: it "hits a wall", stopping dead as it is caught and
   starting dead as it is let go, against the momentum of the scroll). Where the browser can tie an animation to the
   scroll (Safari, Chrome), the held frame is caught and let go gently: it carries on up at the page's own speed and
   slows to rest over the first 7% of the held scrolling, then gathers speed over the last 7% until it leaves at the
   page's speed. Its speed never jumps (a quarter of a parabola at each end); in exchange it rests 3.5% of the held
   distance lower until it is caught and leaves as much higher. The browser runs it with its own scrolling, so it does
   not trail the page as a script would. Elsewhere the hold stays as it was. */
@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (min-height: 621px) {
    .journey.has-scene { view-timeline: --journey block; view-timeline-inset: var(--hdr-h) 0px; }
    .journey.has-scene .journey__pin { animation-name: journey-hold; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --journey; animation-range: contain 0% contain 100%; }
  }
}
/* the held distance is the section's 460vh less the screen below the header: 360vh and the header's height */
@keyframes journey-hold {
  0% { transform: translateY(calc((360vh + var(--hdr-h)) * 0.035)); animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
  7% { transform: translateY(0); }
  93% { transform: translateY(0); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
  100% { transform: translateY(calc((360vh + var(--hdr-h)) * -0.035)); }
}
.journey.has-scene .journey__stage svg { visibility: hidden; }
/* where motion is reduced the figure changes stage at once: its points neither fade nor grow */
html.is-rm svg.dl *, html.is-rm .journey__fill, html.is-rm .journey__pin { transition: none !important; }
html.is-rm .journey__line, html:not(.js) .journey__line, html:not(.js) .journey__stage { display: none; }
@media (max-width: 1023px), (max-height: 620px) {
  .journey__grid { grid-template-columns: minmax(0, 1fr); }
  .journey__stage { order: -1; margin-bottom: 2rem; }
  .journey__stage svg { width: min(70vw, 340px); }
  .journey__line { display: none; }
  .journey__index { padding-left: 0; }
  .journey__item a { color: #fff; }
  .journey__item .journey__n, .journey__item .journey__phase { color: var(--brass-light); }
  .journey__item .journey__body { grid-template-rows: 1fr; }
  .journey__body p { padding-left: 0; }
  .journey__item + .journey__item { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--navy-rule); }
}

/* The team: the words and an invitation at the left, the co-founders at the right, each with a 4:5 portrait; the advisors the same, in a band of their own */
.team { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 36px; }
.team__head { grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.team__head p { margin: 0 0 8px; font-size: 1.125rem; line-height: 1.58; font-weight: 500; max-width: 27rem; }
.team__list { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
/* the two advisors, evenly across the band: the portrait at the left of each, the words beside it */
.team__list--advisors { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; }
.team__list--advisors .person a { display: grid; grid-template-columns: 168px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 32px; row-gap: 10px; align-items: start; }
.team__list--advisors .person__img { grid-column: 1; grid-row: 1 / span 4; width: 168px; margin: 0; }
.team__list--advisors .person a > :not(.person__img) { grid-column: 2; }
.team__list--advisors .person__role { max-width: none; }
.team__list--advisors .person .arrow-link { align-self: end; justify-self: start; margin-top: 0; }
.person a { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; height: 100%; color: var(--text); }
.person__img { display: block; width: min(100%, 208px); aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 12px; background: var(--panel); border-bottom: 4px solid var(--atlantic); }
.person__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.person a:hover .person__img img { transform: scale(1.04); }
.person h3 { font-size: 1.4375rem; line-height: 1.22; font-weight: 700; transition: color 200ms ease; }
.person a:hover h3 { color: var(--atlantic); }
.person__role { max-width: 208px; }
.person p:not(.label) { margin: 0; font-size: 1.0625rem; line-height: 1.5; }
.person .arrow-link { margin-top: auto; padding-top: 6px; }
/* these follow the team's rules, which they narrow */
@media (max-width: 1023px) { .team__head, .team__list { grid-column: 1 / -1; } }
@media (max-width: 1023px) { .team__list--advisors { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .team__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 560px) { .team__list--advisors .person a { grid-template-columns: minmax(0, 1fr); } .team__list--advisors .person__img, .team__list--advisors .person a > :not(.person__img) { grid-column: 1; grid-row: auto; } .team__list--advisors .person__img { margin-bottom: 8px; } }
@media (max-width: 420px) { .team__list { grid-template-columns: minmax(0, 1fr); } .person__img { width: 168px; } }

/* The approved pages' sections: heading left, words right, and the row of places to go next ------------------- */
.sec-prose .split__body p:first-child { margin-top: 0; }
.sec-prose .split__body table { width: 100%; margin: 8px 0 24px; border-collapse: collapse; font-size: 0.9375rem; }
.sec-prose .split__body th, .sec-prose .split__body td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.sec-prose .split__body th { font-family: var(--display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lab); }
.sec-prose .split__body .actions { margin-top: 28px; }
.sec-prose .split__body ul { margin: 0 0 16px; padding-left: 1.2em; }
.sec-prose .split__body li { margin: 0 0 10px; }
.split .shead__side:empty { display: none; }
.ftr__cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ftr__social li { margin-bottom: 11px; }
.sec-related .reslinks--cards { margin-top: 0; }
@media (max-width: 767px) { .ftr__cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The inner pages (27 October): each section stacks its label, heading and introduction, then sets its content in
   a form of its own, so no page reads as rows of a heading at the left and its paragraph at the right ------------ */
.xhead { display: flex; flex-direction: column; align-items: flex-start; max-width: 46rem; margin-bottom: 56px; }
.xhead .xhead__label { margin-bottom: 22px; }
.xhead h2 { margin: 0; color: var(--fg); }
.xhead__lede { margin: 20px 0 0; max-width: 46rem; font-size: 1.125rem; line-height: 1.6; font-weight: 500; color: var(--fg-2); text-wrap: pretty; }

/* the Services pages as one series, beneath the header */
.series ul { gap: 8px; }
.series a { display: flex; align-items: baseline; gap: 10px; }
.series__n { font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; color: var(--atlantic); }
.series a[aria-current="page"] { color: var(--ink); background-size: calc(100% - 28px) 3px; }

/* the statement a page turns on, at the thesis's scale */
.thesis--page .thesis__statement { color: var(--fg); max-width: 20ch; }
.thesis__cols--one { grid-template-columns: minmax(0, 1fr); }
.thesis__cols--one p { max-width: 44rem; }
.thesis--page .thesis__cols p, .tile p, .part p, .nextcard p, .track p { text-wrap: pretty; }
.band--navy .thesis__cols p { color: var(--fg-2); }

/* numbered tiles */
.tiles { display: grid; gap: 20px; }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { display: flex; flex-direction: column; gap: 14px; padding: 38px 44px 42px; background: var(--tile); border-top: 4px solid var(--navy); border-radius: var(--panel-r); }
.tile__n { font-family: var(--display); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; color: var(--atlantic); }
.tile h3 { font-size: 1.3125rem; line-height: 1.25; font-weight: 700; color: var(--fg); }
.tile p { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.band--navy .tile { border-top-color: var(--atlantic-light); }
@media (max-width: 1023px) { .tile { padding: 32px 30px 34px; } }
@media (max-width: 1023px) { .tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .tiles--2, .tiles--3 { grid-template-columns: minmax(0, 1fr); } }

/* two lists set against each other, each in a panel headed by its half of the operating layer's icon */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.compare__col { padding: 40px 44px 30px; background: var(--tile); border-radius: var(--panel-r); }
.compare__col h3 { margin: 22px 0 18px; font-size: 1.5rem; line-height: 1.2; font-weight: 700; color: var(--fg); }
.compare__col .ticks { margin: 0; }
.compare__col .ticks li:last-child { border-bottom: 0; }
.sicon { display: block; width: 96px; height: 54px; overflow: visible; }
.sicon rect, .sicon path, .sicon line { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.compare__col--systems .sicon { color: var(--fg); }
.compare__col--layer .sicon { color: var(--accent); }
.compare__col--layer .sicon .sicon__faint { stroke: var(--fg); opacity: 0.4; }
@media (max-width: 1023px) { .compare { grid-template-columns: minmax(0, 1fr); } .compare__col { padding: 32px 28px 22px; } }

/* a sequence on one line: a numbered node for each step, a check at the last */
.track { position: relative; display: grid; gap: 0 28px; }
.track { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.track li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.track li::before { content: ""; position: absolute; top: 22px; left: 52px; right: -20px; height: 1px; background: var(--line-strong); }
.track li:last-child::before { display: none; }
.track__node { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; border: 1.5px solid var(--atlantic); background: var(--tile); font-family: var(--display); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--atlantic); }
.track__node--end { background: var(--navy); border-color: var(--navy); }
.track__node svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.track h3 { font-size: 1.25rem; line-height: 1.25; font-weight: 700; color: var(--fg); }
.track p { margin: 0; font-size: 1rem; line-height: 1.55; }
@media (max-width: 1279px) {
  .track { grid-template-columns: repeat(min(var(--n, 4), 3), minmax(0, 1fr)); row-gap: 48px; }
  .track li:nth-child(3n)::before { display: none; }
}
@media (max-width: 767px) {
  .track { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .track li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 20px; row-gap: 6px; padding-bottom: 30px; }
  .track li::before, .track li:nth-child(3n)::before { display: block; top: 52px; bottom: 6px; left: 22px; right: auto; width: 1px; height: auto; }
  .track li:last-child::before { display: none; }
  .track__node { grid-row: 1 / span 2; margin: 0; }
  .track h3 { padding-top: 10px; }
}

/* what the firm receives: each item beside a completed check, two to a row */
.receive { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; border-top: 1px solid var(--line-strong); }
.receive li { display: flex; align-items: flex-start; gap: 20px; padding: 28px 0 30px; border-bottom: 1px solid var(--line); font-size: 1.25rem; line-height: 1.45; font-weight: 600; color: var(--fg); }
.rcheck { flex: none; width: 30px; height: 30px; margin-top: -1px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rcheck circle { stroke: var(--accent); stroke-width: 1.5; }
.rcheck path { stroke: #fff; stroke-width: 2; }
.band:not(.band--navy) .rcheck path { stroke: var(--accent); }
@media (max-width: 767px) { .receive { grid-template-columns: minmax(0, 1fr); } .receive li { font-size: 1.125rem; padding: 22px 0 24px; } }

/* the programme's three parts as navy cards */
.parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.part { --fg: #fff; --fg-2: var(--navy-text); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; height: 100%; padding: 44px 40px 40px; background: var(--navy); color: var(--navy-text); border-radius: var(--panel-r); transition: background 240ms ease; }
.part:hover { background: var(--navy-bright); }
.part .dicon__ring--solid, .part path.dicon__solid { transition: fill 240ms ease; }
.part:hover .dicon__ring--solid, .part:hover path.dicon__solid { fill: var(--navy-bright); }
.part .dicon { width: 128px; height: 80px; margin-bottom: 26px; }
.part__n { font-family: var(--display); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; color: var(--atlantic-light); }
.part h3 { font-size: 1.625rem; line-height: 1.18; font-weight: 700; letter-spacing: -0.012em; color: #fff; }
.part p { margin: 0 0 18px; font-size: 1.0625rem; line-height: 1.55; }
.part .ico { margin-top: auto; width: 22px; height: 22px; color: var(--atlantic-light); transition: transform 260ms var(--ease-out); }
.part:hover .ico { transform: translateX(4px); }
@media (max-width: 1023px) { .parts { grid-template-columns: minmax(0, 1fr); } .part { padding: 36px 30px 32px; } .part .dicon { margin-bottom: 14px; } }

/* the pages to read next, each with its own header photograph */
.nextcards { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 24px; }
.nextcard { display: flex; flex-direction: column; height: 100%; background: var(--tile); border-radius: var(--panel-r); overflow: hidden; color: var(--fg-2); }
.nextcard__img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-panel); }
.nextcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.nextcard:hover .nextcard__img img { transform: scale(1.04); }
.nextcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: 1; padding: 30px 34px 32px; }
.nextcard h3 { font-size: 1.5rem; line-height: 1.2; font-weight: 700; color: var(--fg); transition: color 200ms ease; }
.nextcard:hover h3 { color: var(--atlantic); }
.nextcard p { margin: 0 0 12px; font-size: 1.0625rem; line-height: 1.55; }
.nextcard .ico { margin-top: auto; width: 22px; height: 22px; color: var(--accent); transition: transform 260ms var(--ease-out); }
.nextcard:hover .ico { transform: translateX(4px); }
.sec-nextcards .xhead { margin-bottom: 40px; }
@media (max-width: 767px) { .nextcards { grid-template-columns: minmax(0, 1fr); } .nextcard__body { padding: 24px 24px 26px; } }

/* the landing pages' head: taller, the photograph carrying further across, the words at its foot */
.phero--landing.phero--media:not(.phero--split) { display: flex; flex-direction: column; min-height: clamp(460px, 38vw, 580px); }
.phero--landing.phero--media:not(.phero--split) .phero__in { flex: 1; display: flex; flex-direction: column; padding-bottom: 88px; }
.phero--landing.phero--media:not(.phero--split) .phero__grid { margin-top: auto; }
/* the lighter veil only where the words stand at the left; below a laptop's width the words cross the whole photograph
   and keep the narrow screens' flat veil */
@media (min-width: 1024px) {
  .phero--landing.phero--media:not(.phero--split) .phero__media::after { background:
    linear-gradient(90deg, rgba(0, 34, 72, 0.96) 0%, rgba(0, 34, 72, 0.86) 32%, rgba(0, 34, 72, 0.5) 62%, rgba(0, 34, 72, 0.22) 100%),
    linear-gradient(0deg, rgba(0, 34, 72, 0.7) 0%, rgba(0, 34, 72, 0) 45%); }
}
@media (max-width: 767px) { .phero--landing.phero--media:not(.phero--split) { min-height: 420px; } .phero--landing.phero--media:not(.phero--split) .phero__in { padding-bottom: 56px; } }

/* a statement on the navy carries the sail, faint, at its foot */
.band--navy.sec-statement { overflow: hidden; }
.band--navy.sec-statement::after { content: ""; position: absolute; right: max(var(--gutter), calc((100% - var(--col)) / 2)); bottom: -8%; width: min(28vw, 380px); aspect-ratio: 1133 / 1246; background: url("/assets/logos/halyard-mark-white.svg") no-repeat 100% 100% / contain; opacity: 0.06; pointer-events: none; }
.band--navy.sec-statement > .frame { position: relative; z-index: 1; }
@media (max-width: 1279px) { .part h3 { font-size: 1.375rem; } .part { padding: 40px 30px 36px; } .part p { font-size: 1rem; } }
@media (max-width: 1180px) { .receive li { font-size: 1.125rem; } }
/* below a laptop's width the two paragraphs of a statement stand one above the other */
@media (max-width: 1279px) { .thesis--page .thesis__cols { grid-template-columns: minmax(0, 1fr); gap: 18px; } .thesis--page .thesis__cols p { max-width: 44rem; } }
@media (max-width: 1180px) and (min-width: 1024px) {
  .compare__col { padding: 36px 32px 26px; }
  .compare__col .ticks li { font-size: 1rem; }
  .tile { padding: 34px 32px 38px; }
  .nextcard__body { padding: 28px 28px 30px; }
  .nextcard p { font-size: 1rem; }
}

/* Phase 3 (27 October): the forms the How we work pages add ------------------------------------------------- */

/* notes beneath a row of tiles */
.tiles__notes { max-width: 46rem; margin-top: 36px; }
.tiles__notes p { margin: 0 0 14px; font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }

/* stages one beneath another on a line of numbered nodes, the head standing beside them as they pass */
.timeline { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
.timeline__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--hdr-h) + 60px + 48px); transition: top 340ms var(--ease-out); display: flex; flex-direction: column; align-items: flex-start; }
.timeline__head .timeline__head__label { margin-bottom: 22px; }
.timeline__head h2 { margin: 0; color: var(--fg); }
.timeline__head__lede { margin: 20px 0 0; max-width: 30rem; font-size: 1.125rem; line-height: 1.6; font-weight: 500; color: var(--fg-2); text-wrap: pretty; }
.timeline__list { grid-column: 7 / span 6; }
.timeline__list li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 28px; padding-bottom: 52px; }
.timeline__list li:last-child { padding-bottom: 0; }
.timeline__list li::before { content: ""; position: absolute; left: 22px; top: 52px; bottom: 8px; width: 1px; background: var(--line-strong); }
.timeline__list li:last-child::before { display: none; }
.timeline__node { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--field); font-family: var(--display); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--accent); }
.timeline__node--end { background: var(--navy); border-color: var(--navy); }
.timeline__node svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.timeline__body { padding-top: 8px; }
.timeline__body h3 { margin-bottom: 14px; font-size: 1.5rem; line-height: 1.2; font-weight: 700; color: var(--fg); }
.timeline__body p { margin: 0 0 14px; font-size: 1.0625rem; line-height: 1.62; text-wrap: pretty; }
.timeline__body p:last-child { margin-bottom: 0; }
@media (max-width: 1023px) {
  .timeline { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .timeline__head, .timeline__list { grid-column: auto; }
  .timeline__head { position: static; }
}
@media (max-width: 767px) { .timeline__list li { column-gap: 18px; } .timeline__body h3 { font-size: 1.3125rem; } }

/* a worked example's tables at the width of the page */
.dtable__wrap { max-width: 100%; }
.dtable { overflow-x: auto; margin-bottom: 28px; border-top: 2px solid var(--navy); }
.dtable table { width: 100%; border-collapse: collapse; font-size: 1.0625rem; line-height: 1.5; }
.dtable th { padding: 16px 24px 14px 0; text-align: left; vertical-align: bottom; font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lab); border-bottom: 1px solid var(--line-strong); }
.dtable td { padding: 18px 24px 18px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--fg-2); }
.dtable td:first-child { font-weight: 600; color: var(--fg); }
.dtable__note { max-width: 46rem; margin: 0 0 14px; font-size: 1.0625rem; line-height: 1.6; }
.dtable__wrap .actions { margin-top: 28px; }
@media (max-width: 767px) { .dtable table { font-size: 1rem; } .dtable th, .dtable td { padding-right: 16px; } }

/* a quoted output on the navy */
.quote { max-width: 60rem; }
.quote__title { margin: 0 0 32px; font-family: var(--display); font-size: 0.8125rem; line-height: 1.4; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lab); }
.quote__text { margin: 0 0 40px; padding-left: 32px; border-left: 3px solid var(--atlantic-light); }
.quote__text p { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.125rem); line-height: 1.32; font-weight: 600; letter-spacing: -0.012em; color: var(--fg); text-wrap: pretty; }
.quote__notes { max-width: 44rem; }
.quote__notes p { margin: 0 0 14px; font-size: 1.125rem; line-height: 1.6; color: var(--fg-2); }
@media (max-width: 767px) { .quote__text { padding-left: 20px; } }

/* three next cards to a row, two below a laptop's width when they would crowd */
@media (max-width: 1023px) { .nextcards { grid-template-columns: repeat(min(var(--n, 2), 2), minmax(0, 1fr)); } .nextcards li:nth-child(3):last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) and (max-width: 1180px) { .nextcards .nextcard h3 { font-size: 1.3125rem; } .nextcard__body { padding: 26px 24px 28px; } }
@media (max-width: 767px) { .nextcards { grid-template-columns: minmax(0, 1fr); } }
.nextcard__body > p, .part > p { align-self: stretch; }
@media (min-width: 1024px) and (max-width: 1100px) { .tiles--3 .tile { padding: 32px 26px 36px; } .tiles--3 .tile p { font-size: 1rem; } }

.band--navy .timeline__node--end, .band--navy .track__node--end { background: var(--atlantic); border-color: var(--atlantic); }
.track__node { border-color: var(--accent); color: var(--accent); }

/* Phase 4 (27 October): an industry's measure, on the navy at a heading's size, its words on one column */
.thesis--topic .thesis__statement { margin-bottom: 28px; max-width: 24ch; font-size: clamp(1.875rem, 1.35rem + 1.5vw, 2.5rem); line-height: 1.14; letter-spacing: -0.016em; }
.thesis--topic .thesis__cols p { max-width: 44rem; font-size: 1.1875rem; line-height: 1.6; }
.thesis--page .actions { margin-top: 32px; }

/* the six industries' strip: tighter, without its label until the window is wide enough for it, and fading at its
   right edge where it must still scroll */
.series--long a { padding: 0 11px; background-position: 11px 100%; }
.series--long a[aria-current="page"] { background-size: calc(100% - 22px) 3px; }
@media (max-width: 1439px) { .series--long .subnav__label { display: none; } }
@media (max-width: 1279px) { .series--long a { font-size: 0.875rem; padding: 0 9px; background-position: 9px 100%; } .series--long a[aria-current="page"] { background-size: calc(100% - 18px) 3px; } }
@media (max-width: 1179px) { .series--long ul { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); padding-right: 40px; } }

/* Phase 5 (27 October): the people pages and About's team ------------------------------------------------- */

/* a person's portrait at the right of their header: a rectangle, larger than the reference site's, standing on the
   header's foot */
.phero__portrait-fig { justify-self: end; align-self: end; width: min(100%, 380px); margin: 0 0 -72px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--navy-panel); border-bottom: 4px solid var(--atlantic-light); }
.phero__portrait-fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.phero--split:has(.phero__portrait-fig) .phero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; }
.phero__copy .phero__specialism { margin-top: -6px; }
@media (max-width: 1023px) {
  .phero--split:has(.phero__portrait-fig) .phero__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .phero__portrait-fig { justify-self: start; width: min(100%, 320px); margin-bottom: -56px; }
}

/* About's team: four large portraits */
.members { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
/* each card's parts share rows across the four, so names, titles, bios and links line up whatever a title's length */
.members .member { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 10px; align-items: start; }
.member .member__role { align-self: start; }
.member { color: var(--fg-2); }
.member__card { display: block; width: 100%; }
.member__card .member__img { width: 100%; }
.member h3 a { color: inherit; }
.member__img { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 14px; background: var(--panel); border-bottom: 4px solid var(--atlantic); }
.member__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.member:hover .member__img img { transform: scale(1.04); }
.member h3 { font-size: 1.5rem; line-height: 1.2; font-weight: 700; color: var(--fg); transition: color 200ms ease; }
.member:hover h3 { color: var(--atlantic); }
.member p:not(.label) { margin: 0 0 6px; font-size: 1.0625rem; line-height: 1.55; }
.member__acts { padding-top: 6px; gap: 0.6rem 1.6rem; }
@media (max-width: 1379px) { .members { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; column-gap: 40px; } .member__card { width: min(100%, 300px); } .member p:not(.label) { max-width: 25rem; } }
@media (max-width: 520px) { .members { grid-template-columns: minmax(0, 1fr); } .members .member { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .member__card { width: min(100%, 320px); } }

/* the advisors' fuller backgrounds beneath their bios */
.bio__body p:not(.label) + p:not(.label) { margin-top: 10px; }
@media (max-width: 767px) { .series ul { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); padding-right: 32px; } }

/* a person's background as text: one column, each part a paragraph with its name run in */
.sec-bio .xhead { margin-bottom: 36px; }
.biolist { max-width: 46rem; border-top: 1px solid var(--line-strong); padding-top: 32px; }
.biolist li + li { margin-top: 22px; }
.biolist h3 { display: inline; margin-right: 0.45em; font-size: 1.125rem; line-height: 1.62; font-weight: 700; color: var(--fg); }
.biolist h3.biolist__stop::after { content: "."; }
.biolist p { display: inline; margin: 0; font-size: 1.125rem; line-height: 1.62; }

/* a photograph below the first screen fades in once it has arrived (site.js, img-fade) */
html.js main img.is-loading { opacity: 0; }
html.js main img.is-fading { transition: opacity 650ms var(--ease-out), transform 700ms var(--ease-out); }
@media print { html.js main img.is-loading { opacity: 1; } }
/* a label sits 22 px above a section's heading; only the statement at the thesis's scale takes more */
.thesis--topic .thesis__label { margin-bottom: 22px; }

/* a person's profile: the background in a column, the role at Halyard as a list in a panel beside it */
.profile { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
.profile__main { grid-column: 1 / span 7; }
.profile__main h2 { margin: 0 0 20px; color: var(--fg); }
.profile__intro { margin: 0 0 32px; font-size: 1.1875rem; line-height: 1.6; font-weight: 500; color: var(--fg); max-width: 40rem; }
.profile .biolist { max-width: none; }
.profile__role { grid-column: 9 / span 4; padding: 32px 32px 18px; background: var(--tile); border-top: 4px solid var(--navy); border-radius: var(--panel-r); }
.profile__role .profile__label { margin-bottom: 14px; }
.profile__role .ticks { margin: 0; }
.profile__role .ticks li { font-size: 1rem; }
.profile__role .ticks li:last-child { border-bottom: 0; }
@media (max-width: 1023px) {
  .profile { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .profile__main, .profile__role { grid-column: auto; }
  .profile__role { max-width: 30rem; }
}



/* Phase 6 (27 October): an article's head and the insights listing ---------------------------------------- */


/* the byline's portrait, a small rectangle rather than a circle */
.byline__img { width: 44px; height: 55px; border-radius: var(--panel-r); border: 0; border-bottom: 2px solid var(--atlantic-light); }

/* the insights listing: the lead story as a raised card rising into the head; the groups beneath */
.leadstory { position: relative; background: var(--surface); }
.leadstory > .frame { padding-top: 72px; }
.story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 460px; background: var(--raised); border-radius: var(--panel-r); box-shadow: var(--lift); overflow: hidden; color: var(--fg-2); }
.story__img { position: relative; display: block; overflow: hidden; background: var(--navy-panel); }
.story__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform 1100ms var(--ease-out); }
.story:hover .story__img img { transform: scale(1.03); }
.story__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; padding: 52px 52px 48px; border-top: 4px solid var(--atlantic); }
.story__title { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.375rem); line-height: 1.12; letter-spacing: -0.016em; color: var(--fg); transition: color 200ms ease; }
.story:hover .story__title { color: var(--atlantic); }
.story__deck { margin: 0; font-size: 1.125rem; line-height: 1.6; }
.story:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.story__by { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.story__face { display: block; flex: none; width: 40px; height: 50px; overflow: hidden; border-radius: var(--panel-r); border-bottom: 2px solid var(--atlantic); }
.story__face img { width: 100%; height: 100%; object-fit: cover; }
.story__by > div { display: flex; flex-direction: column; font-size: 0.9375rem; line-height: 1.4; }
.story__name { font-weight: 600; color: var(--fg); }
.story__date { color: var(--fg-3); }
.story .arrow-link { margin-top: 6px; }
.leadstory + .sec-list > .frame { padding-top: 96px; }
@media (max-width: 767px) { .leadstory + .sec-list > .frame { padding-top: 64px; } }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--2 .card h3 { font-size: 1.4375rem; min-height: 2.6em; }
@media (max-width: 1023px) { .story { grid-template-columns: minmax(0, 1fr); } .story__img { aspect-ratio: 16 / 10; } .story__body { padding: 36px 32px 34px; } }
@media (max-width: 767px) { .cards--2 { grid-template-columns: minmax(0, 1fr); } .cards--2 .card h3 { font-size: 1.25rem; min-height: 0; } }

/* an insight article's head: its photograph behind under the navy veil, in navy monochrome (exported so, the
   "-header" files of photos.MONO), the words at the head's foot and a dateline along it: author, date, category and
   reading time (Simon, 28 October) */
.phero--art { min-height: clamp(520px, 42vw, 620px); display: flex; flex-direction: column; }
.phero--art .phero__in { flex: 1; display: flex; flex-direction: column; padding-bottom: 0; }
.phero--art .phero__grid { margin-top: auto; }
.phero--art .phero__copy { max-width: 46rem; gap: 20px; }
.phero--art .phero__copy h1 { max-width: 22ch; }
.dateline { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px 28px; width: min(100vw - 2 * var(--gutter), var(--col)); margin-top: 28px; padding: 20px 0 22px; border-top: 1px solid var(--navy-rule-strong); }
.dateline .byline { margin: 0; }
.art-media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(0, 34, 72, 0.96) 0%, rgba(0, 34, 72, 0.9) 40%, rgba(0, 34, 72, 0.5) 68%, rgba(0, 34, 72, 0.22) 100%),
  linear-gradient(0deg, rgba(0, 34, 72, 0.85) 0%, rgba(0, 34, 72, 0) 40%); }
@media (max-width: 1023px) { .phero--art .phero__media::after { background: rgba(0, 34, 72, 0.86); } .dateline { width: 100%; } }
@media (max-width: 767px) { .phero--art { min-height: 0; } .phero--art .phero__in { padding-top: 34px; } }
@media print { .phero--art { min-height: 0; } }

/* Phase 7 (28 October): the contact page */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
.contact__aside { grid-column: 1 / span 4; position: sticky; top: calc(var(--hdr-h) + 48px); }
.contact__aside h2 { margin: 0 0 18px; color: var(--fg); }
.contact__intro { margin: 0 0 32px; font-size: 1.125rem; line-height: 1.6; }
.contact__places { border-top: 1px solid var(--line-strong); }
.contact__places li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 0 19px; border-bottom: 1px solid var(--line); }
.contact__city { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }
.contact__email { margin: 32px 0 0; font-size: 1.125rem; }
.contact__email a { font-weight: 600; color: var(--ink); background: linear-gradient(var(--atlantic), var(--atlantic)) 0 100% / 100% 1.5px no-repeat; padding-bottom: 2px; }
.contact__form { grid-column: 6 / span 7; padding: 48px 52px 44px; background: var(--raised); border-top: 4px solid var(--navy); border-radius: var(--panel-r); box-shadow: var(--lift); }
.contact__form form.is-checked :invalid { border-color: #a3301f; }
@media (max-width: 1023px) {
  .contact { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .contact__aside, .contact__form { grid-column: auto; position: static; }
  .contact__form { padding: 32px 24px 30px; }
}
.contact__aside .contact__intro + .contact__intro { margin-top: -16px; }
.contact__form.apply { max-width: none; }
.contact__form.apply form { padding: 0; background: none; }
.career-check-text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--atlantic); text-underline-offset: 3px; }
.contact__aside { transition: top 340ms var(--ease-out); }
.contact__form form { display: grid; gap: 24px; }
.contact__form form.is-checked input[type="checkbox"]:invalid { outline: 2px solid #a3301f; outline-offset: 2px; }
.contact__form form.is-checked .career-choices:has(input:invalid) .career-choice { border-color: #a3301f; }
.career-field .career-check { font-weight: 400; color: var(--fg-2); }
.contact__careers { margin: 18px 0 0; font-size: 1rem; color: var(--muted); }
.contact__careers a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--atlantic); text-underline-offset: 3px; }

/* An industry page's processes (Simon, 28 October: rethought from first principles; the held photograph left the words
   sparse, the photograph plain and the page desolate). The opening statement carries a numbered map of the processes
   at its right, so it uses the page's width; each process is a numbered spread, its words at their own height beside
   a large photograph mounted on a navy block that runs out to the page's edge, the sides alternating. */
.opening { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; align-items: end; }
.opening__lead { grid-column: 1 / span 7; }
.opening__label { margin-bottom: 22px; }
.opening__statement { margin: 0 0 28px; max-width: 18ch; font-size: clamp(2.25rem, 1.4rem + 2.2vw, 3.375rem); line-height: 1.06; letter-spacing: -0.024em; color: var(--fg); }
.opening__lead p { max-width: 38rem; margin: 0; font-size: 1.1875rem; line-height: 1.65; text-wrap: pretty; }
.opening__map { grid-column: 9 / span 4; }
.opening__head { margin: 0 0 14px; font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--atlantic); }
.opening__map ol { border-top: 1px solid var(--line-strong); }
.opening__map a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 18px 0 19px; border-bottom: 1px solid var(--line); color: var(--ink); transition: color 200ms ease; }
.opening__map a:hover { color: var(--atlantic); }
.opening__n { font-family: var(--display); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.06em; color: var(--atlantic); }
.opening__name { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.opening__map .ico { width: 18px; height: 18px; align-self: center; color: var(--atlantic); transition: transform 260ms var(--ease-out); }
.opening__map a:hover .ico { transform: translateY(4px); }
@media (max-width: 1023px) { .opening__lead, .opening__map { grid-column: 1 / -1; } }

.spreads { overflow: hidden; background: var(--surface); padding-block: 8px calc(var(--band) - 40px); border-top: 1px solid var(--rule); }
.spread { padding-block: 72px; }
.spread__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
.spread__media { position: relative; isolation: isolate; grid-column: 1 / span 7; grid-row: 1; }
.spread--right .spread__media { grid-column: 6 / span 7; }
/* the navy mount: from the page's edge to beyond the photograph's middle, set lower than the photograph */
.spread__media::before { content: ""; position: absolute; z-index: -1; top: 56px; bottom: -56px; left: -100vw; right: 34%; background: var(--navy); }
.spread--right .spread__media::before { left: 34%; right: -100vw; }
.spread__img { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--panel-r); background: var(--navy-panel); }
.spread__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.spread__body { grid-column: 8 / span 5; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; padding-left: 40px; }
.spread--right .spread__body { grid-column: 1 / span 5; padding: 0 40px 0 0; }
.spread__n { margin-bottom: 24px; font-family: var(--display); font-size: clamp(3rem, 2rem + 2.4vw, 4.5rem); font-weight: 500; line-height: 0.9; letter-spacing: -0.02em; color: var(--atlantic-light); }
.spread__label { margin-bottom: 18px; }
.spread h2 { margin: 0 0 22px; font-size: clamp(1.875rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--fg); }
.spread__body p:not(.label) { margin: 0 0 16px; font-size: 1.0625rem; line-height: 1.65; text-wrap: pretty; }
.spread__body h2 + p { font-size: 1.1875rem; color: var(--fg); }
.spread__body .ticks { margin: 8px 0 0; align-self: stretch; }
.spread + .spread { border-top: 0; }
@media (max-width: 1279px) { .spread__body { padding-left: 24px; } .spread--right .spread__body { padding-right: 24px; } }
@media (max-width: 1023px) {
  .spread { padding-block: 40px; }
  .spread__in { grid-template-columns: minmax(0, 1fr); row-gap: 72px; }
  .spread__media, .spread--right .spread__media, .spread__body, .spread--right .spread__body { grid-column: 1; padding: 0; }
  .spread__media { grid-row: 1; }
  .spread__body { grid-row: 2; }
  .spread__media::before { top: 32px; bottom: -32px; }
  .spread__img { aspect-ratio: 4 / 3; }
  .spread__n { margin-bottom: 16px; }
}

/* A photo section that stands alone, in the form chosen for its page (pages.FEATURE_FORM; Simon, 28 October: each page
   designed intentionally; no photograph reaching outside its section, none plainly set, no words over a photograph). */

/* a single spread: a full band above it, and below it room for its mount */
.spreads--one { padding-block: calc(var(--band) - 72px) calc(var(--band) - 16px); }
.band--panel + .spreads, .band--navy + .spreads { border-top: 0; }
.spreads + .band:not(.band--navy):not(.band--panel) { border-top: 1px solid var(--rule); }

/* the plate: the photograph and a panel of the words joined as one block, on the page's columns */
.plate { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; min-height: 480px; overflow: hidden; border-radius: var(--panel-r); background: var(--tile); color: var(--fg-2); }
.plate--navy { background: var(--navy); }
.plate__img { position: relative; grid-column: 1 / span 7; grid-row: 1; overflow: hidden; }
.plate__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.plate__body { grid-column: 8 / span 5; grid-row: 1; align-self: center; display: flex; flex-direction: column; align-items: flex-start; padding: 64px 56px 64px 24px; }
.plate--right .plate__img { grid-column: 6 / span 7; }
.plate--right .plate__body { grid-column: 1 / span 5; padding: 64px 24px 64px 56px; }
/* an upright photograph takes five columns, the words seven */
.plate--narrow .plate__img { grid-column: 1 / span 5; }
.plate--narrow .plate__body { grid-column: 6 / span 7; padding-right: 88px; }
.plate__label { margin-bottom: 18px; }
.plate h2 { margin: 0 0 22px; font-size: clamp(1.875rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--fg); }
.plate__body p:not(.label) { margin: 0 0 16px; font-size: 1.0625rem; line-height: 1.65; text-wrap: pretty; }
.plate__body h2 + p { font-size: 1.1875rem; color: var(--fg); }
.plate__body > :last-child { margin-bottom: 0; }
/* the review's record: the draft's status set as a status, an inline box rather than an atomic one, so the line
   cannot break between it and the stop after it */
.plate--record strong { margin-inline: 2px; padding: 3px 10px 4px; border: 1.5px solid var(--atlantic); border-radius: var(--panel-r); background: var(--raised); font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.plate--record strong::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 0 0; border-radius: 50%; background: var(--atlantic); vertical-align: 0.1em; }

/* the panorama: the heading and the words across the page, a wide photograph beneath on a navy mount that runs out to
   the page's edge, set lower than the photograph; a list becomes a numbered key beneath, and the mount then rises */
.sec-pano { overflow: clip; }
.sec-pano > .frame { padding-bottom: calc(var(--band) + 56px); }
.pano { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
.pano__head { grid-column: 1 / span 6; grid-row: 1; }
.pano__text { grid-column: 8 / span 5; grid-row: 1; }
.pano__label { margin-bottom: 20px; }
.pano h2 { margin: 0; max-width: 16ch; font-size: clamp(2rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--fg); }
.pano__text p { margin: 0 0 14px; font-size: 1.0625rem; line-height: 1.65; text-wrap: pretty; }
.pano__text p:first-child { font-size: 1.1875rem; color: var(--fg); }
.pano__text > :last-child { margin-bottom: 0; }
/* two paragraphs side by side, the heading narrower; each column's width follows its paragraph's length, so the two
   end on the same line */
.pano--two .pano__head { grid-column: 1 / span 4; }
.pano--two .pano__text { grid-column: 5 / span 8; display: grid; grid-template-columns: minmax(0, var(--a)) minmax(0, var(--b)); column-gap: 32px; }
.pano--two .pano__text p { margin: 0; font-size: 1.0625rem; color: var(--fg-2); }
.pano__media { position: relative; isolation: isolate; grid-column: 1 / -1; grid-row: 2; margin-top: 64px; }
.pano__media::before { content: ""; position: absolute; z-index: -1; top: 56px; bottom: -56px; left: 38%; right: -100vw; background: var(--navy); }
.pano__img { position: relative; aspect-ratio: 12 / 5; overflow: hidden; border-radius: var(--panel-r); background: var(--navy-panel); }
.pano__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
@media (min-width: 1024px) { .pano--tall .pano__img { aspect-ratio: 2 / 1; } }
.sec-pano:has(.pano--key) > .frame { padding-bottom: var(--band); }
.pano--key .pano__media { margin-top: 96px; }
.pano--key .pano__media::before { top: -56px; bottom: 56px; left: -100vw; right: 38%; }
.pano__key { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); column-gap: 32px; margin-top: 44px; }
.pano__key li { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid var(--navy); }
.pano__n { font-family: var(--display); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.06em; color: var(--atlantic); }
.pano__item { font-size: 1.125rem; line-height: 1.4; font-weight: 600; color: var(--fg); text-wrap: pretty; }

@media (max-width: 1279px) {
  .plate__body { padding: 48px 40px 48px 8px; }
  .plate--right .plate__body { padding: 48px 8px 48px 40px; }
  .plate--narrow .plate__body { padding-right: 48px; }
  .pano__text { grid-column: 7 / span 6; }
  .pano--two .pano__head { grid-column: 1 / span 4; }
}
@media (max-width: 1023px) {
  .spreads--one { padding-block: calc(var(--band) - 40px) calc(var(--band) - 8px); }
  .plate { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .plate__img, .plate--right .plate__img, .plate--narrow .plate__img { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
  .plate--narrow .plate__img { aspect-ratio: 1; }
  .plate__body, .plate--right .plate__body, .plate--narrow .plate__body { grid-column: 1; grid-row: 2; padding: 36px 28px 40px; }
  .pano__head, .pano__text, .pano--two .pano__head, .pano--two .pano__text { grid-column: 1 / -1; }
  .pano__text { grid-row: 2; margin-top: 24px; }
  .pano--two .pano__text { display: block; }
  .pano--two .pano__text p + p { margin-top: 14px; }
  .pano__media { grid-row: 3; margin-top: 40px; }
  .pano__img { aspect-ratio: 3 / 2; }
  .pano__media::before { top: 28px; bottom: -28px; }
  .sec-pano > .frame { padding-bottom: calc(var(--band) + 28px); }
  .pano--key .pano__media { margin-top: 68px; }
  .pano--key .pano__media::before { top: -28px; bottom: 28px; }
  .pano__key { grid-row: 4; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 767px) {
  .pano__key { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .pano__key li { flex-direction: row; align-items: baseline; gap: 16px; padding: 14px 0 15px; border-top: 1px solid var(--line); }
  .pano__key li:first-child { border-top: 2px solid var(--navy); }
}

/* The page for an address the site does not have (build.not_found_page): the way home and the search in the head,
   then the main pages under the menus' four names. */
.p-not-found .phero__copy .actions { margin-top: 32px; }
.notfound { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; }
.notfound__head { margin: 0 0 14px; font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--atlantic); }
.notfound .linklist a { font-size: 1rem; }
@media (max-width: 1023px) { .notfound { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .notfound { grid-template-columns: minmax(0, 1fr); } }