/*
 * The layout every design theme of the public careers pages shares (ADR 0.51 decision 3). It reads the design properties each design file sets on <html data-design> (type scale,
 * radius, spacing, the surface map) and the 19 colour roles of the chosen colour theme as var(--c-*), and nothing else: no colour of its own, so a colour theme restyles it and the
 * contrast test (themes_contrast_test.go) covers every pair the designs draw. Public-page spacing is off the admin scale on purpose (decision 9). Each design stylesheet is this
 * file followed by the design's own file. Breakpoints: 800px (tablet) and 640px (phone).
 */
html[data-design] {
  --gutter: max(var(--gut), calc((100% - (var(--wrap) - 2 * var(--gut))) / 2));
  --measure: min(calc(var(--wrap) - 2 * var(--gut)), calc(100% - 2 * var(--gut)));
}

html[data-design] body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}
html[data-design] h1,
html[data-design] h2,
html[data-design] h3 {
  font-family: var(--f-head);
  font-weight: var(--w-head);
  letter-spacing: var(--ls);
  text-transform: var(--tt);
}
html[data-design] main {
  max-width: none;
  padding: 0;
}
html[data-design] a {
  color: var(--c-primary);
}
html[data-design] a:hover {
  color: var(--c-primary);
  text-decoration-thickness: 2px;
}
html[data-design] :focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}
html[data-design] .cr-contact :focus-visible,
html[data-design] .cr-footer :focus-visible {
  outline-color: var(--ft-ring);
}
html[data-design] .cr-hero--block :focus-visible {
  outline-color: var(--c-on-accent);
}
html[data-design] .cr-stack > * + * {
  margin-top: 0;
}
html[data-design] .cr-stack > :not(.cr-hero--block) {
  width: var(--measure);
  margin-inline: auto;
}

/* header */
html[data-design] .cr-bar {
  background: var(--bar-bg);
  border-bottom: var(--bar-bd);
  color: var(--bar-fg);
}
html[data-design] .cr-bar__in {
  justify-content: space-between;
  gap: 16px;
  max-width: var(--wrap);
  height: var(--bar-h);
  padding: 0 var(--gut);
}
html[data-design] .cr-brand,
html[data-design] .cr-brand:hover {
  min-width: 0;
  gap: 12px;
  color: var(--bar-fg);
  font-family: var(--f-head);
  font-size: calc(var(--fs-body) * 1.2);
  font-weight: var(--w-head);
  text-transform: var(--tt-brand, none);
}
html[data-design] .cr-brand__logo {
  flex: none;
  height: var(--logo);
  max-width: 12rem;
  margin-inline-end: 0;
  padding: var(--plate-pad, 0);
  border-radius: var(--plate-radius, 0);
  background: var(--plate-bg, transparent);
}
html[data-design] .cr-brand__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-design] .cr-nav {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--nav-gap);
}
html[data-design] .cr-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--bar-fg);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}
html[data-design] .cr-nav a:hover {
  color: var(--bar-fg);
  text-decoration: underline;
  text-underline-offset: 6px;
}
html[data-design] .cr-bar :focus-visible {
  outline-color: var(--bar-ring);
}

/* hero */
html[data-design] .cr-hero--block {
  position: relative;
  padding: var(--hero-top) var(--gutter) var(--hero-bottom);
  overflow: hidden;
  background: linear-gradient(160deg, var(--c-accent-2), var(--c-accent) 70%);
  color: var(--c-on-accent);
}
html[data-design] .cr-hero--photo {
  min-height: var(--hero-h);
  background: var(--c-accent);
}
html[data-design] .cr-hero--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--scrim);
}
html[data-design] .cr-hero--block .cr-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
}
html[data-design] .cr-hero__text {
  position: relative;
  z-index: 2;
}
html[data-design] .cr-eyebrow {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html[data-design] .cr-hero--block h1 {
  max-width: var(--h1-max);
  margin: 10px 0 14px;
  font-size: var(--fs-h1);
  line-height: 1.12;
  color: inherit;
}
html[data-design] .cr-hero--block .cr-lead,
html[data-design] .cr-hero--block .cr-prose {
  max-width: var(--lead-max);
  margin: 0 0 26px;
  color: inherit;
  font-size: var(--fs-lead);
}
html[data-design] .cr-hero--block .cr-actions {
  gap: 10px;
}
html[data-design] .cr-hero--block .cr-button {
  border: 2px solid transparent;
}
html[data-design] .cr-hero--block .cr-button--primary {
  background: var(--hero-btn-bg);
  border-color: var(--hero-btn-bd);
  color: var(--hero-btn-fg);
  box-shadow: none;
}
html[data-design] .cr-hero--block .cr-button--secondary {
  background: transparent;
  border-color: var(--hero-btn2-bd);
  color: var(--hero-btn2-fg);
  text-decoration: var(--hero-btn2-td, none);
  text-underline-offset: 5px;
}
html[data-design] .cr-regions {
  margin-top: 22px;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
}

/* sections */
html[data-design] .cr-section {
  padding: var(--sec-y) 0 8px;
}
html[data-design] .cr-section > * + * {
  margin-top: 0;
}
html[data-design] .cr-section h2 {
  margin: 0 0 12px;
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--h2-fg);
}
html[data-design] #services h2::after {
  content: none;
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--c-highlight);
}
html[data-design] .cr-section p,
html[data-design] .cr-section .cr-prose {
  color: var(--c-muted);
}
html[data-design] .cr-section p {
  margin: 0 0 12px;
}
html[data-design] .cr-section .cr-lead {
  max-width: 640px;
  margin: 0 0 22px;
}
html[data-design] .cr-about {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--gap-l);
  align-items: center;
}
html[data-design] .cr-about--solo {
  grid-template-columns: 1fr;
}
html[data-design] .cr-about .cr-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 463 / 275;
  border-radius: var(--r-card);
  box-shadow: var(--card-sh);
  object-fit: cover;
}
html[data-design] .cr-prose {
  max-width: none;
  line-height: var(--lh);
}
html[data-design] .cr-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  padding: 0;
  list-style: none;
}
html[data-design] .cr-card-item {
  display: block;
  padding: var(--pad-card);
  border: var(--card-bd);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--card-sh);
}
html[data-design] .cr-cards--service .cr-card-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
html[data-design] .cr-pict {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-ic);
  background: var(--c-tag-bg);
  color: var(--c-tag-text);
}
html[data-design] .cr-pictogram {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-design] .cr-card-item strong {
  display: block;
  font-family: var(--f-head);
  font-size: var(--fs-h3);
  font-weight: var(--w-head2, 600);
  line-height: var(--lh);
  color: var(--c-text);
}
html[data-design] .cr-card-item span:not(.cr-pict) {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--c-muted);
}
html[data-design] #offices {
  padding-top: 34px;
}
html[data-design] #offices h2 {
  margin: 0 0 18px;
  font-size: var(--fs-h3b);
  font-weight: var(--w-head2, 600);
}
html[data-design] .cr-cards--region .cr-card-item {
  border: var(--reg-bd, 0);
  background: var(--reg-bg);
  box-shadow: var(--reg-sh, none);
  color: var(--reg-fg);
}
html[data-design] .cr-cards--region strong {
  margin-bottom: 4px;
  font-size: var(--fs-h3);
  color: var(--reg-fg);
}
html[data-design] .cr-cards--region em {
  display: block;
  margin: -3px 0 4px;
  font-size: var(--fs-small);
  font-style: normal;
  font-weight: 600;
}
html[data-design] .cr-cards--region .cr-card-item span {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--reg-fg);
}

/* careers: the CV band, the search and the jobs */
html[data-design] #careers {
  padding-bottom: var(--sec-y);
}
html[data-design] .cr-cv {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
  padding: 14px 18px;
  border: var(--card-bd);
  border-radius: var(--r-card);
  background: var(--c-surface-2);
}
html[data-design] .cr-cv__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--c-heading);
  font-weight: 600;
}
html[data-design] .cr-cv__link {
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
}
html[data-design] .cr-cv__link .cr-icon {
  width: 16px;
  height: 16px;
  margin-top: 0;
  transform: scaleX(-1);
}
html[data-design] .cr-filters {
  margin-bottom: 14px;
  padding: 20px;
  border: var(--card-bd);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--card-sh);
}
html[data-design] .cr-count {
  margin: 0 0 12px;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--c-muted);
}
html[data-design] .cr-jobs {
  gap: var(--job-gap, var(--gap));
}
html[data-design] .cr-job {
  border: var(--card-bd);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--card-sh);
}
html[data-design] .cr-job:hover {
  background: var(--c-surface);
}
html[data-design] .cr-job__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--pad-card);
  border-radius: var(--r-card);
  color: var(--c-text);
}
html[data-design] .cr-job__main {
  display: grid;
  gap: 6px;
  justify-items: start;
  min-width: 0;
}
html[data-design] .cr-job__title,
html[data-design] .cr-job__link:hover .cr-job__title {
  margin: 0;
  font-family: var(--f-head);
  font-size: var(--fs-h3);
  line-height: 1.4;
  font-weight: var(--w-head2, 600);
  color: var(--c-text);
}
html[data-design] .cr-job__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
html[data-design] .cr-job__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--ctl);
  padding: 0 var(--btn-px);
  border: 2px solid var(--c-primary);
  border-radius: var(--r-btn);
  background: var(--btn-p-bg);
  box-shadow: var(--btn-p-sh, none);
  color: var(--c-on-primary);
  font-size: var(--fs-btn);
  font-weight: 600;
  line-height: 1;
}
html[data-design] .cr-pill,
html[data-design] .cr-chip {
  padding: 3px 10px;
  border: 0;
  border-radius: var(--r-tag);
  background: var(--c-tag-bg);
  color: var(--c-tag-text);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.5;
}

/* controls */
html[data-design] .cr-field > label,
html[data-design] .cr-choices legend {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-text);
}
html[data-design] .cr-hint,
html[data-design] .cr-opt {
  color: var(--c-muted);
}
html[data-design] .cr-control {
  min-height: var(--ctl);
  padding: 10px 12px;
  border: var(--in-bd);
  border-color: var(--c-control-border);
  border-radius: var(--r-ctl);
  background: var(--in-bg);
  box-shadow: none;
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
}
html[data-design] .cr-control:focus {
  border-color: var(--c-focus);
  box-shadow: 0 0 0 3px var(--c-focus);
  outline: none;
}
html[data-design] .cr-control[aria-invalid='true'],
html[data-design] .cr-control:user-invalid {
  border-color: var(--c-error);
  box-shadow: inset 0 0 0 1px var(--c-error);
}
html[data-design] .cr-control[aria-invalid='true']:focus,
html[data-design] .cr-control:user-invalid:focus {
  box-shadow:
    inset 0 0 0 1px var(--c-error),
    0 0 0 3px var(--c-focus);
}
html[data-design] input[type='file'].cr-control {
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  font-size: var(--fs-small);
}
html[data-design] input[type='file']::file-selector-button {
  align-self: stretch;
  min-height: 0;
  margin: 0 12px 0 0;
  padding: 0 16px;
  border: 0;
  border-inline-end: 1px solid var(--c-control-border);
  border-radius: 0;
  background: var(--c-surface-2);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-small);
  font-weight: 600;
}
html[data-design] .cr-button {
  min-height: var(--ctl);
  padding: 0 var(--btn-px);
  border-radius: var(--r-btn);
  font-family: var(--f-body);
  font-size: var(--fs-btn);
  letter-spacing: var(--ls-btn, 0);
  text-transform: var(--tt-btn, none);
}
html[data-design] .cr-button--primary,
html[data-design] .cr-button--primary:hover {
  border-color: var(--c-primary);
  background: var(--btn-p-bg);
  box-shadow: var(--btn-p-sh, none);
  color: var(--c-on-primary);
}
html[data-design] .cr-button--primary:hover {
  filter: brightness(1.06);
}
html[data-design] .cr-button--secondary,
html[data-design] .cr-button--secondary:hover {
  border: 2px solid var(--c-primary);
  background: transparent;
  box-shadow: none;
  color: var(--c-primary);
  font-weight: 600;
}
html[data-design] .cr-button--secondary:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
html[data-design] .cr-choices {
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-ctl);
  background: var(--c-surface-2);
}
html[data-design] .cr-choices[aria-invalid='true'] {
  border: 2px solid var(--c-error);
  padding: 11px 13px;
}
html[data-design] .cr-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
html[data-design] .cr-choices--inline .cr-choice {
  display: inline-flex;
  margin-inline-end: 18px;
}
html[data-design] .cr-choice input {
  width: 20px;
  height: 20px;
  accent-color: var(--c-primary);
}

/* job page */
html[data-design] .cr-back {
  gap: 6px;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: underline;
}
html[data-design] .cr-back .cr-icon {
  width: 16px;
  height: 16px;
  margin-top: 0;
}
html[data-design] .cr-stack > .cr-card {
  width: min(calc(var(--wrap-n) - 2 * var(--gut)), calc(100% - 2 * var(--gut)));
  margin-top: var(--page-y);
  margin-bottom: 56px;
}
html[data-design] .cr-card {
  padding: var(--pad-detail);
  border: var(--card-bd);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--card-sh);
  color: var(--c-text);
}
html[data-design] .cr-card > * + * {
  margin-top: 8px;
}
html[data-design] .cr-card h1 {
  margin: 0 0 8px;
  font-size: var(--fs-h1-job);
  line-height: 1.2;
  color: var(--c-text);
}
html[data-design] .cr-card .cr-section {
  padding: 0;
}
html[data-design] .cr-card .cr-prose h2,
html[data-design] .cr-card .cr-section > h2 {
  margin: 28px 0 8px;
  padding-bottom: 6px;
  border-bottom: var(--prose-rule);
  font-size: var(--fs-h3b);
  font-weight: var(--w-head2, 600);
  line-height: 1.3;
  color: var(--h2-fg);
}
html[data-design] .cr-card .cr-section > h2::after {
  content: none;
}
html[data-design] .cr-card .cr-section p,
html[data-design] .cr-card .cr-prose {
  color: var(--c-text);
}
html[data-design] .cr-prose p {
  margin: 6px 0;
}
html[data-design] .cr-prose ul,
html[data-design] .cr-prose ol {
  margin: 6px 0;
  padding-left: 22px;
}
html[data-design] .cr-prose a {
  text-decoration: underline;
}
html[data-design] .cr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 4px;
  padding: 0;
  list-style: none;
}
html[data-design] .cr-tag {
  padding: 4px 12px;
  border-radius: var(--r-tag);
  background: var(--c-tag-bg);
  color: var(--c-tag-text);
  font-size: var(--fs-small);
  font-weight: 600;
}
html[data-design] .cr-tags--soft .cr-tag {
  background: var(--c-surface-2);
  color: var(--c-muted);
}
html[data-design] .cr-skip {
  margin: 10px 0 0;
}
html[data-design] .cr-skip .cr-link {
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 600;
}
html[data-design] .cr-tags__label {
  margin: 10px 0 0;
  font-size: var(--fs-small);
  color: var(--c-muted);
}
html[data-design] .cr-banner,
html[data-design] .cr-disc {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
html[data-design] .cr-banner {
  margin-top: 16px;
  padding: 14px 16px;
  border: var(--card-bd);
  border-left: var(--box-edge, 4px solid var(--c-primary));
  border-radius: var(--r-ctl);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-size: var(--fs-body);
  line-height: 1.55;
}
html[data-design] .cr-stack > .cr-banner {
  margin-top: 24px;
  margin-bottom: 40px;
}
html[data-design] .cr-banner .cr-icon,
html[data-design] .cr-disc .cr-icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--c-primary);
}
html[data-design] .cr-disc {
  margin: 14px 0 0;
  font-size: var(--fs-small);
  color: var(--c-muted);
}
html[data-design] .cr-disc .cr-link {
  display: inline;
  min-height: 0;
  font-size: inherit;
}
html[data-design] .cr-disc .cr-icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}
html[data-design] .cr-email-apply {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 16px;
  border: 1px dashed var(--c-control-border);
  border-radius: var(--r-card);
  font-size: var(--fs-small);
  line-height: 1.6;
}
html[data-design] .cr-email-apply__text {
  flex: 1;
  min-width: 240px;
  overflow-wrap: anywhere;
  color: var(--c-text);
}
html[data-design] .cr-email-apply .cr-link {
  display: inline;
  min-height: 0;
  font-size: inherit;
}
html[data-design] .cr-sel {
  user-select: all;
  font-weight: 600;
}
html[data-design] .cr-email-apply code {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--c-tag-bg);
  color: var(--c-tag-text);
  font-size: calc(var(--fs-small) * 0.95);
  font-weight: 600;
}
html[data-design] .cr-apply {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--c-border);
}
html[data-design] .cr-apply > h2 {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  font-size: var(--fs-h2s);
}
html[data-design] .cr-form {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
html[data-design] .cr-form > * {
  grid-column: 1 / -1;
}
html[data-design] .cr-form > .cr-field--half {
  grid-column: auto;
}
html[data-design] .cr-summary {
  display: block;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 2px solid var(--c-error);
  border-radius: var(--r-ctl);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-small);
}
html[data-design] .cr-summary__title {
  font-size: var(--fs-body);
}
html[data-design] .cr-summary ul {
  margin: 6px 0 0;
}
html[data-design] .cr-summary a {
  color: var(--c-primary);
}
html[data-design] .cr-req,
html[data-design] .cr-msg,
html[data-design] .cr-summary__title {
  color: var(--c-error);
}
html[data-design] .cr-msg {
  font-size: var(--fs-small);
  font-weight: 600;
}
html[data-design] .cr-empty {
  border: var(--card-bd);
  border-radius: var(--r-card);
  background: var(--c-surface);
  color: var(--c-muted);
}

/* the small pages: received, refused, privacy */
html[data-design] .cr-message {
  width: min(640px, calc(100% - 2 * var(--gut)));
  margin-top: calc(var(--page-y) + 24px);
  text-align: center;
}
html[data-design] .cr-message > * + * {
  margin-top: 12px;
}
html[data-design] .cr-message .cr-actions {
  justify-content: center;
  margin-top: 20px;
}
html[data-design] .cr-message p {
  color: var(--c-muted);
}
html[data-design] .cr-message__mark {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  color: var(--c-success);
}
html[data-design] .cr-message--error {
  border: 2px solid var(--c-error);
  background: var(--c-surface);
  text-align: start;
}
html[data-design] .cr-message--error h1 {
  color: var(--c-error);
}
html[data-design] .cr-message--error .cr-actions {
  justify-content: flex-start;
}

/* contact and footer */
html[data-design] .cr-contact {
  padding: 48px 0 28px;
  background: var(--ft-bg);
  border-top: var(--ft-bd, 0);
  color: var(--ft-fg);
  font-size: var(--fs-small);
  line-height: 1.55;
}
html[data-design] .cr-contact__in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
}
html[data-design] .cr-fcols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 24px var(--gap-l);
}
html[data-design] .cr-fbrand__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
html[data-design] .cr-fbrand__name {
  font-family: var(--f-head);
  font-size: calc(var(--fs-body) * 1.2);
  font-weight: var(--w-head);
  color: var(--ft-fg);
}
html[data-design] .cr-flist {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
}
html[data-design] .cr-flist li {
  display: grid;
  color: var(--ft-fg);
}
html[data-design] .cr-flist small {
  font-size: var(--fs-small);
  font-weight: 600;
}
html[data-design] .cr-contact h3 {
  margin: 0 0 10px;
  font-family: var(--f-body);
  font-size: var(--fs-small);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ft-fg);
}
html[data-design] .cr-contact p {
  margin: 0;
}
html[data-design] .cr-flogo {
  display: block;
  width: auto;
  max-width: 12rem;
  height: var(--logo);
  padding: var(--plate-pad, 0);
  border-radius: var(--plate-radius, 8px);
  background: var(--plate-bg, var(--c-surface));
  object-fit: contain;
}
html[data-design] .cr-contact .cr-tagline {
  margin: 10px 0 6px;
}
html[data-design] .cr-contact a,
html[data-design] .cr-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ft-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
html[data-design] .cr-follow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
html[data-design] .cr-plain--social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-design] .cr-contact .cr-social {
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--soc-bd, 0);
  border-radius: var(--r-soc, 50%);
  background: var(--soc-bg);
  color: var(--soc-fg);
  text-decoration: none;
}
html[data-design] .cr-copy {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid currentColor;
  font-size: var(--fs-small);
}
html[data-design] .cr-copy a {
  display: inline-flex;
}
html[data-design] .cr-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 16px var(--gutter);
  border-top: var(--ft-bd, 0);
  background: var(--ft-bg);
  color: var(--ft-fg);
  font-size: var(--fs-small);
}

/* tablet */
@media (max-width: 800px) {
  html[data-design] .cr-hero--photo::before {
    background: var(--scrim-flat);
  }
  html[data-design] .cr-about,
  html[data-design] .cr-about--solo {
    grid-template-columns: 1fr;
  }
  html[data-design] .cr-cards,
  html[data-design] .cr-fcols {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* phone */
@media (max-width: 640px) {
  html[data-design] .cr-brand__logo,
  html[data-design] .cr-flogo {
    height: calc(var(--logo) * 0.83);
  }
  html[data-design] .cr-nav {
    gap: 14px;
  }
  html[data-design] .cr-nav a.cr-nav__opt {
    display: none;
  }
  html[data-design] .cr-hero--photo {
    min-height: var(--hero-h-phone);
  }
  html[data-design] .cr-hero--block h1 {
    font-size: var(--fs-h1-phone);
  }
  html[data-design] .cr-cards,
  html[data-design] .cr-fcols {
    grid-template-columns: 1fr;
  }
  html[data-design] .cr-fcols {
    gap: 28px;
  }
  html[data-design] .cr-cv {
    flex-wrap: wrap;
  }
  html[data-design] .cr-cv .cr-button {
    width: 100%;
  }
  html[data-design] .cr-job__link {
    flex-direction: column;
    align-items: flex-start;
  }
  html[data-design] .cr-form {
    grid-template-columns: 1fr;
  }
  html[data-design] .cr-form > .cr-field--half {
    grid-column: 1 / -1;
  }
  html[data-design] .cr-card h1 {
    font-size: var(--fs-h1-job-phone);
  }
}
/*
 * Design theme "Classic": the old Flash Education site's layout, sizes and spacing (Tom, 2026-10-31; canvas amendment A1 to A3 and A6), chosen by <html data-design="classic">.
 * Inter for headings and body (the face of careers.css). Its paddings are off the product spacing scale, which ADR 0.51 decision 9 allows for the public careers pages only.
 * It places the roles Classic draws and no colour of its own (themes.go lists the pairs).
 */
html[data-design='classic'] {
  --f-head: Inter, ui-sans-serif, system-ui, sans-serif;
  --f-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-btn: 15px;
  --fs-lead: 17px;
  --lh: 1.55;
  --fs-h1: 42px;
  --fs-h1-phone: 30px;
  --fs-h2: 28px;
  --fs-h3: 16px;
  --fs-h3b: 20px;
  --fs-h2s: 20px;
  --fs-h1-job: 30px;
  --fs-h1-job-phone: 30px;
  --w-head: 700;
  --w-head2: 700;
  --tt: none;
  --ls: -0.02em;
  --h1-max: 600px;
  --lead-max: 520px;
  --r-card: 14px;
  --r-btn: 10px;
  --r-ctl: 10px;
  --r-tag: 999px;
  --r-ic: 50%;
  --logo: 58px;
  --bar-h: 73px;
  --ctl: 47px;
  --btn-px: 22px;
  --wrap: 1040px;
  --wrap-n: 860px;
  --gut: 16px;
  --gap: 14px;
  --gap-l: 36px;
  --sec-y: 56px;
  --pad-card: 20px;
  --pad-detail: 32px;
  --page-y: 32px;
  --nav-gap: 22px;
  --hero-top: 72px;
  --hero-bottom: 84px;
  --hero-h: 564px;
  --hero-h-phone: 620px;
  --bar-bg: var(--c-surface);
  --bar-fg: var(--c-heading);
  --bar-bd: 1px solid var(--c-border);
  --bar-ring: var(--c-focus);
  --h2-fg: var(--c-heading);
  --card-bd: 1px solid var(--c-border);
  --card-sh: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px -8px rgba(0, 0, 0, 0.1);
  --btn-p-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c-primary) 90%, var(--c-on-primary)),
    var(--c-primary)
  );
  --btn-p-sh: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 20px -10px rgba(0, 0, 0, 0.4);
  --hero-btn-bg: var(--c-on-accent);
  --hero-btn-bd: var(--c-on-accent);
  --hero-btn-fg: var(--c-accent);
  --hero-btn2-bd: var(--c-on-accent);
  --hero-btn2-fg: var(--c-on-accent);
  --reg-bg: linear-gradient(160deg, var(--c-accent-2), var(--c-accent) 70%);
  --reg-fg: var(--c-on-accent);
  --reg-sh: 0 14px 28px -16px rgba(0, 0, 0, 0.5);
  --ft-bg: var(--c-accent);
  --ft-fg: var(--c-on-accent);
  --ft-link: var(--c-on-accent);
  --ft-ring: var(--c-on-accent);
  --soc-bg: color-mix(in srgb, var(--c-on-accent) 16%, transparent);
  --soc-fg: var(--c-on-accent);
  --in-bg: var(--c-surface);
  --in-bd: 1px solid;
  --prose-rule: 1px solid var(--c-border);
  --scrim: linear-gradient(
    90deg,
    color-mix(in srgb, var(--c-accent) 93%, transparent) 0%,
    color-mix(in srgb, var(--c-accent) 80%, transparent) 62%,
    color-mix(in srgb, var(--c-accent) 15%, transparent) 100%
  );
  --scrim-flat: color-mix(in srgb, var(--c-accent) 80%, transparent);
}

html[data-design='classic'] #services h2::after {
  content: '';
}
html[data-design='classic'] #careers {
  padding-top: 48px;
}
html[data-design='classic'] .cr-card-item strong,
html[data-design='classic'] .cr-cards--region strong {
  font-weight: 600;
}