/* ==========================================================================
   Atlas Design Institute — site stylesheet

   Two rules from the owner shape everything here:

     1. The logo's own field colour (#1E1E1E) is the brand's dark. The folded
        corner and the footer are painted in it, so the mark sits on its own
        background and blends in.
     2. No numbering, no deck lines, no explaining what a heading means. A
        heading is followed by work, not by a sentence about the heading.

   Type: the wordmark is a high-contrast garamond, so headings and the top bar
   are set in Cormorant Garamond; everything else - body copy, buttons, meta
   lines, breadcrumbs, footer keys - is IBM Plex Sans. The second, monospaced
   face the small labels used to be set in was retired: the wide-tracked mono
   caption is a house style of its own by now, and the office wanted the site
   to look like theirs rather than like a template.

   1 tokens      2 base      3 type      4 layout     5 chrome
   6 buttons     7 hero      8 cards     9 blocks    10 forms
   11 pages     12 footer   13 motion/print
   ========================================================================== */

/* 1 ---------------------------------------------------------------- tokens */
:root {
  --field: #1E1E1E;          /* the logo's own field */
  --field-2: #262626;
  --ink: #0F1B26;
  --navy: #13293D;
  --cerulean: #247BA0;
  --cerulean-d: #1C6480;
  --azur: #1B98E0;
  --slate: #5D737E;
  --mist: #E8F1F2;
  --paper: #F5F8F8;
  --porcelain: #FCFFFD;
  --line: #DCE6EA;
  --line-2: #C6D5DC;
  --text: #16232E;
  --muted: #516773;
  --muted-l: #93A9B4;
  --on-dark: #E7EFF3;
  --on-dark-muted: #A7BCC7;

  --maxw: 1320px;
  --gutter: clamp(1.15rem, 5vw, 4rem);
  --bar: 58px;
  --fold: 208px;

  --serif: "Cormorant Garamond", "Iowan Old Style", Garamond, Georgia, serif;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* one small-label face retired - see the note at the top of this file */

  --ease: cubic-bezier(.22, .68, .16, 1);
  --shell: 1px solid var(--line);
}

/* The folded corner: its legs run along the top edge and the left edge, so
   only the hypotenuse is seen. Big enough to read the mark inside it. */
@media (min-width: 640px) { :root { --bar: 66px; --fold: 300px; } }
@media (min-width: 1024px) { :root { --bar: 84px; --fold: 420px; } }
@media (min-width: 1600px) { :root { --fold: 470px; } }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--cerulean); color: #fff; }
:focus-visible { outline: 2px solid var(--cerulean); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--field); color: #fff; padding: .7rem 1rem;
  font: 500 .78rem/1 var(--sans); letter-spacing: .08em;
}
.skip:focus { left: .5rem; top: .5rem; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.icon-linkedin { width: 15px; height: 15px; flex: 0 0 auto; }

/* 3 ------------------------------------------------------------ typography */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.005em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.kicker {
  font: 400 .7rem/1.5 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-l); margin: 0;
}
.lede {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
  line-height: 1.45;
  color: var(--navy);
  max-width: 46ch;
}
.subhead { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 1.5rem; }

.prose { max-width: 68ch; font-size: 1.05rem; }
.prose--wide { max-width: 78ch; }

/* The About page reads as one continuous statement rather than a standfirst
   followed by body copy, so all of it is set in the display serif at the size
   the opening line used to carry. The measure is wider than the old 46ch
   standfirst, which would have turned three long paragraphs into a narrow
   column. */
.prose--about { max-width: 58ch; }
.prose--about p {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
  line-height: 1.45;
  color: var(--navy);
  margin-bottom: 1.05em;
}
.wrap.prose, .wrap.prose--wide { max-width: none; }
.wrap.prose > * { max-width: 68ch; }
.wrap.prose--wide > * { max-width: 78ch; }
.prose h2 { font-size: clamp(1.55rem, 2.4vw, 2rem); margin: 2.6rem 0 .75rem; }
.prose h3 { font-size: 1.3rem; margin: 1.8rem 0 .5rem; }
.prose h4 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; color: var(--navy); }
.prose p { color: #23343F; }
.prose a, .refs a { color: var(--cerulean-d); text-underline-offset: 3px; }

/* An essay runs to thousands of words, so its charts take the width of the
   wrap while the text keeps the 68-character measure. */
.prose--essay { max-width: none; }
.prose--essay > p, .prose--essay > h2, .prose--essay > h3,
.prose--essay > h4, .prose--essay > ul, .prose--essay > ol,
.prose--essay > blockquote { max-width: 68ch; }
.prose--essay > figure { max-width: min(100%, 1040px); }
.prose figure { margin: 2.4rem 0; }
.prose figure img {
  width: 100%; height: auto; background: #fff;
  border: var(--shell); border-radius: 2px;
}
.prose figcaption {
  margin-top: .7rem; max-width: 72ch;
  font: 400 .88rem/1.5 var(--sans); color: var(--muted);
}
.refs {
  list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem;
  font-size: .93rem; color: var(--muted);
}
.refs li { padding-left: 1.4rem; position: relative; }
.refs li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: .7rem; height: 1px; background: var(--line-2);
}

/* 4 ---------------------------------------------------------------- layout */
.wrap {
  width: min(100% - (2 * var(--gutter)), var(--maxw));
  margin-inline: auto;
}
.section { padding: clamp(3rem, 6.5vw, 5.5rem) 0; }
.section--tight { padding: clamp(2rem, 4vw, 3rem) 0; }
.section--lead { padding-top: clamp(2rem, 4vw, 3.5rem); }
/* A band is marked by its own background; it does not also need a rule top and
   bottom, which only ever doubles with the line of whatever sits beside it. */
.section--paper { background: var(--paper); }
.section--industries { background: var(--ink); color: var(--on-dark); }
.section--industries h2 { color: #fff; }
[id] { scroll-margin-top: calc(var(--bar) + 1.5rem); }

.sechead {
  border-top: var(--shell);
  padding-top: 1.1rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.75rem);
}
/* The first section of a page opens under the title band, a hero or a framed
   picture - all of which already draw a line. A second rule a few pixels below
   reads as a mistake, so the heading drops its own. */
.section--first > .wrap > .sechead { border-top: 0; padding-top: 0; }
.sechead__title { font-size: clamp(2.1rem, 4vw, 3.2rem); }
.sechead__anchor {
  text-decoration: none; color: inherit;
  display: inline-flex; align-items: baseline; gap: .5rem;
}
.sechead__anchor:hover { color: var(--cerulean-d); }
.sechead__arrow {
  font-size: .5em; color: var(--cerulean);
  transition: transform .3s var(--ease); display: inline-block;
}
.sechead__anchor:hover .sechead__arrow { transform: translateX(6px); }

/* The title band. The heading is set to the right so the folded corner has the
   left to itself. */
.pagehead {
  text-align: right;
  padding: calc(var(--fold) * .24) 0 calc(var(--fold) * .44);
  border-bottom: var(--shell);
}

/* A service or an industry page opens on its own photograph - the same
   treatment the home page gives its hero: full bleed, tinted heavier along the
   top edge (where the menu crosses it) and along the bottom (where the title
   sits), with the breadcrumb and the heading laid over it. */
.pagehead--photo {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: clamp(340px, 58vh, 660px);
  padding: 0 0 clamp(1.5rem, 5vh, 3.5rem);
  overflow: hidden;
  background: var(--field);
  border-bottom: var(--shell);
}
.pagehead__bg { position: absolute; inset: 0; }
.pagehead__bg img { width: 100%; height: 100%; object-fit: cover; }
.pagehead__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(14, 17, 20, .88) 0%,
    rgba(14, 17, 20, .44) 22%,
    rgba(14, 17, 20, .30) 46%,
    rgba(14, 17, 20, .58) 78%,
    rgba(14, 17, 20, .82) 100%);
}
.pagehead__inner { position: relative; z-index: 1; }
.pagehead--photo .pagehead__title {
  color: #fff;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .35);
}
.pagehead--photo .crumbs { color: rgba(255, 255, 255, .68); }
.pagehead--photo .crumbs a { color: rgba(255, 255, 255, .82); }
.pagehead--photo .crumbs a:hover { color: #fff; }
.pagehead--photo .crumbs [aria-current] { color: #fff; }
.pagehead--photo .crumbs li + li::before { color: rgba(255, 255, 255, .4); }
.pagehead__title { font-size: clamp(2.6rem, 6.4vw, 4.8rem); }
.crumbs {
  /* serif, to sit in the same family as the bar above it; a touch larger
     because a garamond reads smaller than the sans at the same size */
  font: 400 .8rem/1 var(--serif); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-l); margin-bottom: 1.4rem;
}
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
/* the title band is right-aligned, and a flex row ignores text-align, so the
   breadcrumb has to be pushed across explicitly - otherwise its first item
   disappears behind the folded corner */
.pagehead .crumbs ol { justify-content: flex-end; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--line-2); }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--cerulean-d); }
.crumbs [aria-current] { color: var(--navy); }

/* 5 ---------------------------------------------------------------- chrome */
.fold {
  position: fixed; top: 0; left: 0; z-index: 70;
  width: var(--fold); height: var(--fold);
  background: var(--field);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transform-origin: 0 0;
  transition: transform .55s var(--ease), opacity .35s var(--ease);
}
.fold__home { position: absolute; inset: 0; display: block; }
/* The mark is centred in the triangle and clear of the hypotenuse: for a
   right isosceles leg L the far corner sits at 0.93 L, which leaves about
   6% of the leg as clearance. */
.fold__mark {
  position: absolute;
  left: calc(var(--fold) * .105);
  top: calc(var(--fold) * .165);
  width: calc(var(--fold) * .39);
  height: auto;
}
html.nav-compact .fold { transform: scale(.44); }
html.nav-hidden .fold,
html.menu-open .fold {
  transform: translateY(-104%) scale(.44);
  opacity: 0; pointer-events: none;
}

.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--bar);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: transform .45s var(--ease), opacity .3s var(--ease),
              background-color .3s linear, border-color .3s linear;
}
.masthead__inner {
  width: 100%;
  display: flex; align-items: center; justify-content: flex-end;
  gap: clamp(.4rem, 1.4vw, 1.4rem);
  padding: 0 clamp(.9rem, 3.4vw, 3rem);
}
html.nav-solid .masthead {
  background: rgba(252, 255, 253, .9);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom-color: var(--line);
}
html.nav-hidden .masthead {
  transform: translateY(-104%); opacity: 0; pointer-events: none;
}

.nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(.15rem, .75vw, 1rem);
}
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: .55rem .35rem;
  white-space: nowrap;
  transition: color .2s linear;
}
.nav__link:hover, .nav__link.is-current { color: var(--cerulean-d); }
.nav__link--cta { padding-left: .35rem; }
.nav__toggle {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: .6rem .35rem .6rem .1rem;
  display: inline-flex; align-items: center;
}
.caret {
  width: 0; height: 0; border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent; border-top: 4px solid var(--ink);
  opacity: .55; transition: transform .25s var(--ease), opacity .2s;
}
.nav__toggle:hover .caret { opacity: 1; }
.nav__item.is-open .caret { transform: rotate(180deg); opacity: 1; }

.menu {
  position: absolute; top: calc(100% + .4rem); right: 0;
  min-width: min(280px, 84vw);
  background: #fff; border: var(--shell);
  box-shadow: 0 26px 50px -34px rgba(12, 30, 46, .55);
  padding: .35rem;
  animation: menu-in .2s var(--ease);
}
.menu[hidden] { display: none; }
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__link {
  display: block; padding: .55rem .8rem;
  font-family: var(--serif); font-size: 1.16rem; font-weight: 500;
  color: var(--ink); text-decoration: none;
  transition: background-color .18s linear, color .18s linear;
}
.menu__link:hover { background: var(--mist); color: var(--cerulean-d); }

.burger {
  display: none; position: relative;
  width: 42px; height: 38px; border: var(--shell); background: #fff;
  cursor: pointer; padding: 0;
}
.burger__bar {
  position: absolute; left: 10px; width: 20px; height: 1.5px;
  background: var(--ink); transition: transform .3s var(--ease);
}
.burger__bar:nth-child(1) { top: 15px; }
.burger__bar:nth-child(2) { top: 21px; }
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.mnav {
  position: fixed; inset: var(--bar) 0 auto 0; z-index: 55;
  background: var(--porcelain); border-bottom: var(--shell);
  max-height: calc(100vh - var(--bar)); overflow-y: auto;
  animation: menu-in .22s var(--ease);
}
.mnav[hidden] { display: none; }
.mnav__inner { padding: .5rem var(--gutter) 2rem; }
.mnav__group { border-top: var(--shell); }
.mnav__row { display: flex; align-items: center; justify-content: space-between; }
.mnav__label {
  display: block; padding: 1rem 0; text-decoration: none;
  font-family: var(--serif); font-size: 1.45rem; font-weight: 500;
  color: var(--ink);
}
.mnav__toggle {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: .9rem 0 .9rem 1.2rem;
}
.mnav__list { list-style: none; margin: 0 0 .8rem; padding: 0 0 0 .1rem; }
.mnav__list[hidden] { display: none; }
.mnav__list a {
  display: block; padding: .5rem 0; text-decoration: none;
  color: var(--muted); font-size: 1rem;
}
.mnav__list a:hover { color: var(--cerulean-d); }

@media (max-width: 900px) {
  /* Contact stays in the bar; the four menus move into the burger panel */
  .nav__item:not(.nav__item--cta) { display: none; }
  .burger { display: block; }
  .masthead__inner { gap: .9rem; }
}
/* over the hero photograph the bar is white on dark until it gains its
   frosted ground on scroll */
html:not(.nav-solid):not(.menu-open) body.has-photo .nav__link { color: #fff; }
html:not(.nav-solid):not(.menu-open) body.has-photo .nav__link:hover,
html:not(.nav-solid):not(.menu-open) body.has-photo .nav__link.is-current { color: #fff; opacity: .72; }
html:not(.nav-solid):not(.menu-open) body.has-photo .caret {
  border-top-color: #fff; opacity: .7;
}
html:not(.nav-solid):not(.menu-open) body.has-photo .burger {
  border-color: rgba(255, 255, 255, .45); background: rgba(14, 17, 20, .25);
}
html:not(.nav-solid):not(.menu-open) body.has-photo .burger__bar { background: #fff; }

/* 6 --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .85rem 1.5rem;
  font: 500 .76rem/1 var(--sans);
  letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .22s linear, color .22s linear,
              border-color .22s linear;
}
.btn--solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--solid:hover { background: var(--cerulean-d); border-color: var(--cerulean-d); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(19, 41, 61, .05); }
/* buttons that sit on the hero photograph */
.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { background: var(--mist); border-color: var(--mist); }
.btn--outline-light { background: rgba(14, 17, 20, .25); color: #fff; border-color: rgba(255, 255, 255, .65); }
.btn--outline-light:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.btn--sm { padding: .62rem 1rem; font-size: .7rem; }

/* 7 ------------------------------------------------------------------ hero
   A full-bleed photograph. The tint is heaviest along the top edge, so the
   bar stays legible over it, and along the left, where the headline sits. */
.hero {
  position: relative;
  min-height: clamp(520px, 84vh, 940px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--field);
  border-bottom: var(--shell);
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(14, 17, 20, .90) 0%,
      rgba(14, 17, 20, .72) 14%,
      rgba(14, 17, 20, .40) 34%,
      rgba(14, 17, 20, .46) 72%,
      rgba(14, 17, 20, .68) 100%),
    linear-gradient(to right,
      rgba(14, 17, 20, .70) 0%,
      rgba(14, 17, 20, .18) 46%,
      rgba(14, 17, 20, 0) 78%);
}
.hero__inner {
  position: relative; z-index: 1;
  width: 100%;
  padding: calc(var(--fold) + 2rem) 0 clamp(2.5rem, 7vh, 5.5rem);
}
.hero__grid {
  width: min(100% - (2 * var(--gutter)), var(--maxw));
  margin-inline: auto;
}
.hero__title {
  font-size: clamp(3.2rem, 8.6vw, 6.8rem);
  line-height: .94;
  letter-spacing: -.015em;
  color: #fff;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
  text-shadow: 0 2px 40px rgba(0, 0, 0, .35);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* 8 ----------------------------------------------------------------- cards */
.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.4rem, 2.4vw, 2.4rem);
}
@media (min-width: 660px) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 860px) {
  .cards--2 { grid-template-columns: repeat(2, 1fr); gap: clamp(1.6rem, 3vw, 3.4rem); }
  .cards--3 { grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.6rem); }
}
.card__hit {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit;
}
.card__frame {
  position: relative; display: block; overflow: hidden;
  border: var(--shell); background: #fff;
  aspect-ratio: 4 / 3; margin-bottom: 1rem;
}
.card__frame::after {
  content: ""; position: absolute; inset: 0 auto auto 0;
  height: 2px; width: 0; background: var(--cerulean);
  transition: width .5s var(--ease);
}
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.card__hit:hover .card__img { transform: scale(1.035); }
.card__hit:hover .card__frame::after { width: 100%; }
.card__title {
  font-family: var(--serif); font-weight: 600; line-height: 1.1;
  font-size: clamp(1.45rem, 2vw, 1.8rem); color: var(--ink);
}
.card__action {
  margin-top: .7rem; display: inline-flex; align-items: center; gap: .5rem;
  font: 500 .7rem/1 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--cerulean-d);
}
.card__action span { transition: transform .3s var(--ease); }
.card__hit:hover .card__action span { transform: translateX(5px); }
.cards--dark .card__frame { border-color: rgba(255, 255, 255, .16); }
.cards--dark .card__title { color: #fff; }
.cards--dark .card__action { color: var(--azur); }

/* 9 ---------------------------------------------------------------- blocks */
.specs { list-style: none; margin: 0; padding: 0; max-width: 92ch; }
.spec {
  display: grid; grid-template-columns: 1fr;
  padding: 1.5rem 0; border-top: var(--shell);
}
.spec:last-child { border-bottom: var(--shell); }
.spec__title {
  display: block; font-family: var(--serif); font-size: 1.5rem;
  font-weight: 600; color: var(--ink); margin-bottom: .35rem;
}
.spec__text { display: block; color: var(--muted); font-size: .98rem; max-width: 72ch; }

/* The Scope list closes on its own hairline. A section's usual bottom padding
   then opens a second gap after a line the eye has just read as an ending, so
   the gap below Scope is left to the next section's own top padding. */
.section--scope { padding-bottom: 0; }

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.4rem, 2.6vw, 2.4rem);
}
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { border-top: var(--shell); padding-top: 1rem; }
.step__title { font-size: 1.6rem; margin-bottom: .5rem; }
.step__text { font-size: .95rem; color: var(--muted); margin: 0; }

.feature { max-width: 74ch; }
.feature__link { text-decoration: none; display: block; }
.feature__title { font-size: clamp(2rem, 3.4vw, 3rem); margin: .5rem 0 0; }
.feature__link:hover .feature__title { color: var(--cerulean-d); }
.feature--lead .feature__title {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.02;
  margin-top: .8rem;
}

.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
@media (min-width: 720px) { .posts--row { grid-template-columns: repeat(3, 1fr); } }
.post { border-top: var(--shell); padding-top: 1rem; }
.post__hit { display: block; text-decoration: none; }

/* the home page lists the notes as a stack: the lead one large, the rest
   below it in a smaller face, no dates */
.posts--stack { display: block; max-width: 62rem; }
.posts--stack .post {
  border-top: 0; border-bottom: var(--shell);
  padding: clamp(.9rem, 1.6vw, 1.3rem) 0;
}
.posts--stack .post--lead { padding-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }
.posts--stack .post__title { font-size: clamp(1.2rem, 1.9vw, 1.5rem); }
.posts--stack .post--lead .post__title {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  line-height: 1.05;
}
.post__title {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.35rem, 1.8vw, 1.6rem); line-height: 1.15; color: var(--ink);
}
.post__hit:hover .post__title { color: var(--cerulean-d); }

.cta {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(1.2rem, 2.4vw, 1.8rem); text-align: left;
}
.cta__head {
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  letter-spacing: -.01em;
}

.apply {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 2rem; max-width: 78ch;
}
.apply p { margin: 0; color: var(--muted); }
/* the paragraph's link takes the accent; the button in the same block keeps
   its own white-on-ink, which an `.apply a` rule was overriding */
.apply p a { color: var(--cerulean-d); }
.apply .btn { color: #fff; }

/* ------------------------------------------- the mailing-list sign-up band */
.section--signup { background: var(--paper); }
.signup {
  display: grid; gap: clamp(1.4rem, 3vw, 3rem);
  align-items: start;
}
@media (min-width: 880px) { .signup { grid-template-columns: 1fr 1.05fr; } }
.signup__title {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  max-width: 22ch;
}
.signup__field { display: flex; flex-wrap: wrap; gap: .6rem; }
.signup__field input {
  flex: 1 1 16rem; min-width: 0;
  font: 400 1rem/1.5 var(--sans); color: var(--text);
  background: #fff; border: var(--shell); border-radius: 0;
  padding: .85rem 1rem;
}
.signup__field input:focus {
  outline: none; border-color: var(--cerulean);
  box-shadow: 0 0 0 1px var(--cerulean);
}
.signup__note {
  margin: .9rem 0 0; font-size: .85rem; color: var(--muted-l);
  max-width: 52ch;
}
.signup__note a { color: var(--muted); text-underline-offset: 3px; }
.signup__note a:hover { color: var(--cerulean-d); }
.signup__done {
  font-family: var(--serif); font-size: 1.5rem; color: var(--ink); margin: 0;
}

/* the line-up */
.fleet { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
/* A render and its name, laid out like a builder's model shelf. Three across
   is the widest it goes: the line-up is nine, and nine in three is three even
   rows where four across would leave one plate stranded on its own. */
.fleet__grid { display: grid; gap: clamp(1.3rem, 2.4vw, 2rem); }
@media (min-width: 620px) { .fleet__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .fleet__grid { grid-template-columns: repeat(3, 1fr); } }
.fleet__note {
  grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .95rem;
  border-left: 2px solid var(--line-2); padding-left: 1rem;
}
.vessel { margin: 0; }
.vessel__plate {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 16 / 9; border: var(--shell); background: #fff;
}
.vessel__plate img { width: 100%; height: 100%; object-fit: cover; }
.vessel__plate--empty {
  background:
    linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(to bottom, var(--line) 1px, transparent 1px) 0 0 / 24px 24px,
    #fff;
}
.vessel__slot {
  background: #fff; border: var(--shell); padding: .7rem 1.1rem;
  text-align: center; max-width: 88%;
  font: 400 .68rem/1.6 var(--sans); letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.vessel__slot b { display: block; color: var(--ink); font-weight: 500; }
.vessel__name {
  display: block; margin: .9rem 0 0;
  font-family: var(--serif); font-size: 1.45rem; font-weight: 600;
  color: var(--ink);
}

/* 10 --------------------------------------------- filters on the jobs list */
.form__row { display: flex; flex-direction: column; gap: .35rem; }

/* the unsubscribe page: one field, and it should look like the sign-up band's */
.unsubscribe { max-width: 44rem; margin-top: clamp(1.6rem, 3vw, 2.4rem);
               display: grid; gap: 1.1rem; justify-items: start; }
.unsubscribe input[type="email"] {
  width: 100%;
  font: 400 1rem/1.5 var(--sans); color: var(--text);
  background: #fff; border: var(--shell); border-radius: 0;
  padding: .85rem 1rem;
}
.unsubscribe input[type="email"]:focus {
  outline: none; border-color: var(--cerulean);
  box-shadow: 0 0 0 1px var(--cerulean);
}
.form__note {
  margin: 0; font-size: .85rem; color: var(--muted); max-width: 52ch;
}
.form label {
  font: 400 .68rem/1.4 var(--sans); letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.form select {
  font: 400 .98rem/1.5 var(--sans);
  color: var(--text);
  background: #fff;
  border: var(--shell);
  padding: .7rem .8rem;
  width: 100%;
  border-radius: 0;
}
.form select:focus {
  outline: none; border-color: var(--cerulean);
  box-shadow: 0 0 0 1px var(--cerulean);
}
.filters {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr; max-width: none;
  align-items: end;
  margin-bottom: 2rem;
}
@media (min-width: 700px) { .filters { grid-template-columns: repeat(3, 1fr) auto; } }

/* 11 ----------------------------------------------------------------- pages */
.titleblock {
  margin: 0; display: grid; grid-template-columns: 7rem 1fr; gap: 0 1rem;
}
.titleblock dt {
  font: 400 .66rem/1.9 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-l);
  border-top: 1px solid var(--line); padding-top: .7rem;
}
.titleblock dd {
  margin: 0; padding: .7rem 0 .8rem; color: var(--ink);
  font-size: .98rem; border-top: 1px solid var(--line);
}
.titleblock a { text-decoration: none; }
.titleblock a:hover { color: var(--cerulean-d); text-decoration: underline; text-underline-offset: 3px; }
.titleblock dd.with-icon { display: flex; align-items: center; gap: .5rem; }
.titleblock dd.with-icon svg { color: var(--cerulean); }
.titleblock__addr { line-height: 1.6; }
/* the block's first row sits directly under the title band (or under the
   footer's column heading, which draws its own rule), so its top rule would
   only double that line */
.titleblock dt:first-of-type, .titleblock dd:first-of-type { border-top: 0; }

.contact-page { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 900px) { .contact-page { grid-template-columns: .9fr 1.1fr; } }

.positions { display: grid; gap: 0; }
.positions__empty {
  border-top: var(--shell); border-bottom: var(--shell);
  padding: 1.6rem 0; color: var(--muted);
}
.job {
  display: grid; gap: .8rem 2rem;
  border-top: var(--shell); padding: 1.4rem 0;
}
@media (min-width: 700px) { .job { grid-template-columns: 1fr auto; align-items: center; } }
.job:last-child { border-bottom: var(--shell); }
.job__title { font-size: 1.55rem; }
.job__meta {
  margin: .3rem 0 0;
  font: 400 .68rem/1.5 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-l);
}
.job__text { margin: .6rem 0 0; color: var(--muted); font-size: .95rem; }

.article__wrap { max-width: none; }
.article__standfirst {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.4; color: var(--navy);
  border-left: 2px solid var(--cerulean);
  padding-left: 1.4rem; margin: 2.4rem 0 2.5rem; max-width: 60ch;
}
.article + .section { padding-top: clamp(2rem, 4vw, 3rem); }

/* 12 --------------------------------------------------------------- footer */
.footer {
  background: var(--field);
  color: var(--on-dark);
  padding: clamp(2.5rem, 5vw, 4rem) 0 0;
}
.footer__inner {
  width: min(100% - (2 * var(--gutter)), var(--maxw));
  margin-inline: auto;
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 860px) {
  .footer__inner { grid-template-columns: 1fr .8fr 1.2fr; }
}
/* the plate is the logo's own field, so the mark has no visible edge */
.plate {
  display: grid; place-items: center;
  width: min(280px, 66vw); aspect-ratio: 1;
  background: var(--field);
  padding: 17%;
}
.plate img { width: 100%; }
.footer__title {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
  color: #fff; margin: 0 0 1rem;
  padding-bottom: .8rem; border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.footer__links { list-style: none; margin: 0; padding: 0; }
.footer__links a {
  display: block; padding: .42rem 0; text-decoration: none;
  color: var(--on-dark-muted); font-size: 1rem;
  transition: color .2s linear, padding-left .2s var(--ease);
}
.footer__links a:hover { color: #fff; padding-left: .35rem; }
.footer .titleblock dt { color: var(--muted-l); border-top-color: rgba(255, 255, 255, .12); }
.footer .titleblock dd { color: var(--on-dark); border-top-color: rgba(255, 255, 255, .12); }
.footer .titleblock a:hover { color: #fff; }
.footer .titleblock dd.with-icon svg { color: #fff; opacity: .75; }
.footer__base {
  width: min(100% - (2 * var(--gutter)), var(--maxw));
  margin-inline: auto;
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding: 1.1rem 0 1.4rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  justify-content: space-between;
  font-size: .82rem; color: var(--muted-l);
}
.footer__base p { margin: 0; }
.footer__legal { display: flex; gap: 1.4rem; }
.footer__legal a { text-decoration: none; color: var(--muted-l); }
.footer__legal a:hover { color: #fff; }

/* ------------------------------------------------------- cookie choice bar */
.cookie {
  /* bottom right, so it never sits over the hero headline or its buttons */
  position: fixed; right: clamp(.8rem, 3vw, 2rem); bottom: clamp(.8rem, 3vw, 2rem);
  z-index: 90;
  width: min(30rem, calc(100vw - 2rem));
  background: var(--porcelain);
  border: var(--shell);
  box-shadow: 0 30px 60px -40px rgba(12, 30, 46, .6);
  padding: clamp(1rem, 2vw, 1.4rem);
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.cookie[hidden] { display: none; }
.cookie.is-in { opacity: 1; transform: none; }
.cookie__text {
  font-size: .92rem; color: var(--muted); margin: 0 0 1rem;
}
.cookie__text b { color: var(--ink); font-weight: 600; }
.cookie__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
}
.cookie__link {
  font: 400 .7rem/1 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--cerulean-d);
  text-underline-offset: 3px;
}

/* the policy's table of systems */
.table-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; }
.table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.table th, .table td {
  border: var(--shell); padding: .7rem .8rem; text-align: left;
  vertical-align: top;
}
.table thead th {
  font: 400 .68rem/1.5 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); background: var(--paper);
}
.table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.table a { color: var(--cerulean-d); }

/* 13 --------------------------------------------------------- motion, print */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0; transform: translateY(14px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .form__grid, .filters { gap: .8rem; }
  /* on a phone the heading drops below the fold: at that width the triangle
     reaches too far across for a right-aligned title to clear it */
  .pagehead {
    padding: calc(var(--fold) + .85rem) 0 clamp(1.25rem, 3vw, 2rem);
  }
  .pagehead__title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .hero__title { overflow-wrap: anywhere; }
}
@media print {
  .fold, .masthead, .mnav, .footer__base, .cookie { display: none; }
  body { color: #000; }
  .hero__text { padding-top: 1rem; }
  .pagehead { padding-top: 1rem; }
}