@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-padding-block-start: calc(var(--header-h) + var(--s-4));
    overflow-x: hidden;
    overscroll-behavior-x: none;
    -webkit-text-size-adjust: 100%;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  ul,
  ol,
  dl,
  dd,
  figure,
  blockquote,
  address {
    margin: 0;
  }

  ul,
  ol {
    padding: 0;
  }

  img,
  svg,
  video {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  address {
    font-style: normal;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer tokens {
  :root {
    --c-brand: #b43d3b;
    --c-brand-hover: #a02f2d;
    --c-black: #0a0a0a;
    --c-white: #ffffff;
    --c-text: #111111;
    --c-text-muted: #6b6b6b;
    --c-text-muted-warm: #555555;
    --c-text-on-dark: #ffffff;
    --c-text-muted-on-dark: #d6d6d6;
    --c-beige: #f0ece5;
    --c-grey: #f4f4f2;
    --c-grey-500: #6b6b6b;
    --c-line: #e3e3e3;
    --c-line-warm: #d9d6d0;
    --c-line-strong: #8a8a8a;
    --c-line-on-dark: #2e2e2e;
    --c-error: #a02f2d;
    --c-success: #2f6b3a;
    --c-bg: var(--c-white);

    --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fs--1: clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem);
    --fs-0: clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);
    --fs-1: clamp(1.125rem, 1.0833rem + 0.1852vw, 1.25rem);
    --fs-2: clamp(1.25rem, 1.2083rem + 0.1852vw, 1.375rem);
    --fs-3: clamp(1.625rem, 1.5rem + 0.5556vw, 2rem);
    --fs-4: clamp(1.875rem, 1.6667rem + 0.9259vw, 2.5rem);
    --fs-5: clamp(2rem, 1.4167rem + 2.5926vw, 3.75rem);
    --fs-stat: clamp(2rem, 1.3425rem + 2.697vw, 3.5rem);
    --lh-body: 1.47;
    --lh-heading: 1.12;
    --fw-body: 450;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --measure: 66ch;

    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --section-y: clamp(3.5rem, 6.5vw, 6rem);
    --gap: clamp(1rem, 2vw, 1.5rem);

    --container: 75rem;
    --container-narrow: 48rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --header-h: 4rem;
    --tap: 2.75rem;

    --r-1: 0.375rem;
    --r-2: 0.75rem;
    --r-pill: 980px;
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --dur-1: 150ms;
    --dur-2: 250ms;
  }
}

@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--fs-0);
    font-weight: var(--fw-body);
    line-height: var(--lh-body);
    color: var(--c-text);
    background: var(--c-bg);
  }

  h1,
  h2,
  h3,
  h4 {
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--fs-5);
    letter-spacing: -0.035em;
  }

  h2 {
    font-size: var(--fs-3);
    letter-spacing: -0.025em;
  }

  h3 {
    font-size: var(--fs-2);
    letter-spacing: -0.015em;
  }

  h4 {
    font-size: var(--fs-1);
    letter-spacing: -0.015em;
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-1) var(--ease);
  }

  a:hover {
    color: var(--c-brand);
  }

  .prose a,
  .link--inline,
  .facts dd a,
  .contacts__details a,
  .contact-nap__address a,
  address a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }

  :focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
  }

  small {
    font-size: var(--fs--1);
  }

  hr {
    border: 0;
    border-block-start: 1px solid var(--c-line);
    margin-block: var(--s-7);
  }

  .prose {
    max-inline-size: var(--measure);
  }

  .prose > * + * {
    margin-block-start: var(--s-4);
  }

  .prose > h2 {
    margin-block-start: var(--s-8);
    font-size: var(--fs-4);
    letter-spacing: -0.03em;
  }

  .prose > h3 {
    margin-block-start: var(--s-6);
    font-weight: var(--fw-semibold);
  }

  .prose > h2 + *,
  .prose > h3 + * {
    margin-block-start: var(--s-4);
  }

  .prose > :first-child {
    margin-block-start: 0;
  }

  .prose ul,
  .prose ol {
    padding-inline-start: 1.25em;
  }

  .prose li + li {
    margin-block-start: var(--s-2);
  }

  .prose blockquote {
    padding-inline-start: var(--s-5);
    border-inline-start: 1px solid var(--c-line-strong);
    font-size: var(--fs-1);
  }

  .prose table {
    inline-size: 100%;
    border-collapse: collapse;
  }

  .table-scroll {
    overflow-x: auto;
  }

  .table-scroll td {
    min-inline-size: 8em;
  }

  .prose th,
  .prose td {
    text-align: start;
    padding: var(--s-3) 0;
    padding-inline-end: var(--s-5);
    border-block-end: 1px solid var(--c-line);
  }

  .prose th {
    font-weight: var(--fw-semibold);
  }

  .section--beige .prose th,
  .section--beige .prose td,
  .section--grey .prose th,
  .section--grey .prose td {
    border-color: rgb(10 10 10 / 0.14);
  }

  .prose img {
    border-radius: var(--r-2);
  }

  .prose figcaption {
    font-size: var(--fs--1);
    color: var(--c-text-muted);
    margin-block-start: var(--s-2);
  }

  .prose .wp-block-image img,
  .prose .wp-block-gallery img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  .prose .wp-block-gallery {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }

  .prose .wp-block-gallery img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .prose .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
  }

  .prose .wp-block-separator {
    border: 0;
    border-block-start: 1px solid var(--c-line);
  }

  .prose .wp-block-embed__wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
  }

  .prose .wp-block-embed iframe {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    border-radius: var(--r-2);
  }

  .prose figure:empty {
    display: none;
  }
}

@layer layout {
  .container {
    inline-size: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }

  .container--narrow {
    max-inline-size: var(--container-narrow);
  }

  .section {
    padding-block: var(--section-y);
    container-type: inline-size;
    overflow-x: clip;
  }

  .section--tight {
    padding-block-start: 0;
  }

  .section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4) var(--s-6);
    margin-block-end: var(--s-6);
  }

  .section__head h2 {
    max-inline-size: 24ch;
  }

  .grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: minmax(0, 1fr);
  }

  .grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @container (min-width: 36em) {
    .grid--2,
    .grid--3 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container (min-width: 60em) {
    .grid--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .split {
    display: grid;
    gap: var(--s-5) var(--gap);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  @container (min-width: 48em) {
    .split {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .split > :first-child {
      grid-column: 1 / span 5;
    }

    .split > :nth-child(2) {
      grid-column: 7 / span 6;
    }

    .split--stack > :first-child,
    .split--stack > :nth-child(2),
    .split--solo > :first-child {
      grid-column: 1 / span 8;
    }
  }

  .split__title {
    font-size: var(--fs-4);
    letter-spacing: -0.03em;
  }

  .split__text {
    max-inline-size: 62ch;
  }

  .split__text > * + * {
    margin-block-start: var(--s-4);
  }

  .split__answer,
  .split__lead {
    font-size: var(--fs-1);
    line-height: 1.5;
  }

  .section__lead {
    max-inline-size: 40rem;
    margin-block-end: var(--s-6);
    font-size: var(--fs-1);
    line-height: 1.5;
  }

  .front__answer {
    padding-block: calc(var(--section-y) * 0.62);
  }

  .front__answer .section__lead {
    margin-block-end: 0;
  }

  .split__text > p:last-child,
  .panel__text > p:last-child,
  .media-row__text > p:last-child,
  .qa__answer > p:last-child {
    margin-block-end: 0;
  }

  .split + .process {
    margin-block-start: var(--s-7);
  }

  .section--beige {
    background: var(--c-beige);
  }

  .section--grey {
    background: var(--c-grey);
  }

  .section--beige + .section--tight,
  .section--grey + .section--tight,
  .band + .section--tight,
  .hero--photo + .section--tight {
    padding-block-start: var(--section-y);
  }

  :is(.section, .hero--light):not(.section--beige, .section--grey, .related) + .section:not(.section--beige, .section--grey, .related) {
    padding-block-start: 0;
  }

  /* Below 60em the photo card ends in its white card, not in the photo. */
  @media (max-width: 59.99em) {
    .photo-card + .section:not(.section--beige, .section--grey, .related) {
      padding-block-start: 0;
    }
  }

  @media (min-width: 60em) {
    .photo-card + .section--tight {
      padding-block-start: var(--section-y);
    }
  }

  .site-main {
    min-block-size: 50vb;
  }

  .entry,
  .listing {
    padding-block: var(--section-y);
    container-type: inline-size;
  }

  .entry__header,
  .listing__title {
    margin-block-end: var(--s-6);
  }

  .entry__title {
    font-size: var(--fs-4);
    letter-spacing: -0.03em;
  }

  .listing__title {
    max-inline-size: 44rem;
    font-size: var(--fs-5);
    letter-spacing: -0.035em;
    line-height: 1.05;
  }

  .listing__header .listing__title {
    margin-block-end: 0;
  }

  .listing__intro {
    margin-block-start: var(--s-5);
    max-inline-size: 36rem;
    font-size: var(--fs-2);
    line-height: 1.4;
  }

  .listing__header {
    margin-block-end: var(--section-y);
  }

  .listing--search {
    padding-block-start: 0;
  }

  .result-list__summary,
  .result-list {
    max-inline-size: var(--container-narrow);
  }

  .result-list {
    list-style: none;
    display: grid;
    gap: var(--s-6);
    margin-block-start: var(--s-6);
  }

  .result-list__title {
    font-size: var(--fs-2);
    font-weight: var(--fw-semibold);
  }

  .result-list__text {
    margin-block-start: var(--s-2);
    max-inline-size: 60ch;
  }

  .entry__meta {
    margin-block-start: var(--s-3);
    color: var(--c-text-muted);
    font-size: var(--fs--1);
  }

  .post-header {
    padding-block-start: var(--section-y);
    container-type: inline-size;
  }

  .post-header__title {
    font-size: var(--fs-4);
    letter-spacing: -0.03em;
  }

  .post-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
    margin-block-start: var(--s-4);
    color: var(--c-text-muted);
    font-size: var(--fs--1);
  }

  .post-figure {
    margin-block-start: var(--s-7);
  }

  .post-figure img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--r-2);
  }

  .post-body {
    padding-block: var(--s-7) var(--section-y);
  }

  .entry-list {
    list-style: none;
    display: grid;
    gap: var(--s-6);
  }

  .entry-list__title {
    font-size: var(--fs-2);
    font-weight: var(--fw-semibold);
  }

  .entry-list__excerpt {
    margin-block-start: var(--s-2);
    color: var(--c-text-muted);
  }
}

@layer components {
  .site-footer,
  .panel,
  .quote {
    --c-text-muted: var(--c-text-muted-warm);
    --c-line: var(--c-line-warm);
  }

  .skip-link {
    position: absolute;
    inset-block-start: var(--s-2);
    inset-inline-start: var(--s-2);
    z-index: 100;
    padding: var(--s-3) var(--s-5);
    background: var(--c-white);
    color: var(--c-text);
    border-radius: var(--r-pill);
    transform: translateY(-200%);
  }

  .skip-link:focus {
    transform: none;
  }

  .btn,
  .embed-gate__load {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--tap);
    padding: 0.75rem 1.375rem;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-size: var(--fs-0);
    font-weight: var(--fw-medium);
    line-height: 1.18;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition:
      background-color var(--dur-1) var(--ease),
      border-color var(--dur-1) var(--ease),
      color var(--dur-1) var(--ease);
  }

  .btn--primary {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-white);
  }

  .btn--primary:hover {
    background: var(--c-brand-hover);
    border-color: var(--c-brand-hover);
    color: var(--c-white);
  }

  .btn--secondary,
  .embed-gate__load {
    background: transparent;
    border-color: var(--c-brand);
    color: var(--c-brand);
  }

  .btn--secondary:hover,
  .embed-gate__load:hover {
    background: var(--c-brand);
    color: var(--c-white);
  }

  .btn--light {
    background: var(--c-white);
    border-color: var(--c-white);
    color: var(--c-black);
  }

  .btn--light:hover {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-white);
  }

  .hero--dark .btn--secondary,
  .band .btn--secondary,
  .closing .btn--secondary {
    color: var(--c-white);
  }

  .btn--small,
  .embed-gate__load {
    min-block-size: 2.25rem;
    padding: 0.5rem 1rem;
    font-size: var(--fs--1);
  }

  .btn:focus-visible,
  .embed-gate__load:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 3px;
  }

  .hero--dark .btn:focus-visible,
  .band .btn:focus-visible,
  .closing .btn:focus-visible {
    outline-color: var(--c-white);
  }

  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.42;
    cursor: default;
    pointer-events: none;
  }

  @media (max-width: 30em) {
    .btn {
      white-space: normal;
      text-align: center;
    }
  }

  .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-4);
    align-items: center;
  }

  .link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: var(--fw-medium);
  }

  .link::after {
    content: "\2192";
    transition: transform var(--dur-1) var(--ease);
  }

  .link:hover::after {
    transform: translateX(0.15em);
  }

  .phone-link {
    font-weight: var(--fw-medium);
    white-space: nowrap;
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: var(--c-black);
    color: var(--c-white);
  }

  /* The sticky header is always in view; the page's scroll padding would scroll to its controls. */
  .site-header a,
  .site-header button {
    scroll-margin-block-start: calc(-1 * (var(--header-h) + var(--s-4)));
  }

  .site-nav.is-open a,
  .site-nav.is-open button {
    scroll-margin-block-start: 0;
  }

  .site-header.is-stuck {
    box-shadow: 0 1px 0 var(--c-line-on-dark);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: min(var(--s-6), 2rem);
    min-block-size: var(--header-h);
  }

  .site-logo {
    display: inline-flex;
    align-items: center;
    flex: none;
    min-block-size: var(--tap);
  }

  .site-logo img {
    block-size: min(2.25rem, 36px);
    inline-size: auto;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    min-block-size: var(--tap);
    padding-inline: var(--s-2);
    color: var(--c-white);
  }

  .nav-toggle__bars {
    position: relative;
    inline-size: 1.125rem;
    block-size: 1.5px;
    background: currentColor;
  }

  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: 1.5px;
    background: currentColor;
    transition: transform var(--dur-2) var(--ease);
  }

  .nav-toggle__bars::before {
    inset-block-start: -5px;
  }

  .nav-toggle__bars::after {
    inset-block-start: 5px;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars {
    background: transparent;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
    transform: translateY(5px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    transform: translateY(-5px) rotate(-45deg);
  }

  .site-nav {
    display: none;
  }

  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    block-size: calc(100dvb - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-black);
    padding: var(--s-4) var(--gutter) var(--s-7);
  }

  @media (max-width: 63.999em) {
    html.nav-open {
      overflow: hidden;
    }
  }

  .site-nav__list,
  .site-nav__list ul {
    list-style: none;
  }

  .site-nav__list a {
    display: flex;
    align-items: center;
    min-block-size: var(--tap);
    padding: var(--s-2) 0;
    font-size: var(--fs-1);
    color: rgb(255 255 255 / 0.82);
  }

  .site-nav__list a:hover,
  .site-nav__list .current-menu-item > a,
  .site-nav__list .current-menu-ancestor > a,
  .site-nav__list .current_page_parent > a {
    color: var(--c-white);
  }

  .site-nav__list .menu-item-has-children {
    position: relative;
  }

  .site-nav__list .menu-item-has-children > a {
    padding-inline-end: var(--tap);
  }

  .site-nav__sub-toggle {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: var(--tap);
    block-size: var(--tap);
    color: var(--c-white);
  }

  .site-nav__sub-toggle::before {
    content: "";
    display: block;
    inline-size: 0.45rem;
    block-size: 0.45rem;
    margin: auto;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--dur-1) var(--ease);
  }

  .site-nav__sub-toggle[aria-expanded="true"]::before {
    transform: translateY(2px) rotate(225deg);
  }

  .site-nav__list .sub-menu {
    display: none;
    padding-inline-start: var(--s-5);
  }

  .site-nav__list .menu-item.is-open > .sub-menu {
    display: block;
  }

  .site-nav__list .sub-menu a {
    font-size: var(--fs-0);
  }

  .site-nav__shop {
    display: flex;
    align-items: center;
    min-block-size: var(--tap);
    margin-block-start: var(--s-5);
    padding: var(--s-2) 0;
    font-size: var(--fs-1);
    color: rgb(255 255 255 / 0.82);
  }

  .site-nav__shop:hover {
    color: var(--c-white);
  }

  .site-nav__contact {
    display: grid;
    justify-items: start;
    margin-block-start: auto;
    padding-block-start: var(--s-6);
  }

  .site-nav__contact a {
    display: flex;
    align-items: center;
    min-block-size: var(--tap);
    font-size: var(--fs-1);
    font-weight: var(--fw-medium);
    color: var(--c-white);
  }

  @media (min-width: 64em) {
    .nav-toggle {
      display: none;
    }

    .site-nav,
    .site-nav.is-open {
      --nav-gap: var(--s-4);
      display: flex;
      flex-direction: row;
      position: static;
      block-size: auto;
      max-block-size: none;
      overflow: visible;
      flex: 1;
      align-items: center;
      gap: var(--s-6);
      padding: 0;
      background: none;
    }

    .site-nav__list {
      display: flex;
      gap: var(--nav-gap);
    }

    .site-nav__list > .menu-item {
      flex: none;
    }

    .site-nav__list > .menu-item > a {
      position: relative;
      padding-inline: var(--s-2);
      min-block-size: var(--header-h);
      font-size: var(--fs-0);
      white-space: nowrap;
    }

    .site-nav__list .menu-item-has-children > a {
      padding-inline-end: var(--s-2);
    }

    .site-nav__sub-toggle,
    .site-nav__contact {
      display: none;
    }

    .site-nav__list .sub-menu {
      position: absolute;
      inset-block-start: calc(100% - var(--s-3));
      inset-inline-start: calc(var(--s-2) * -1);
      min-inline-size: 15rem;
      padding: var(--s-3);
      border-radius: var(--r-2);
      background: var(--c-white);
      color: var(--c-text);
      box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.16);
    }

    .site-nav__list .menu-item-has-children:hover > .sub-menu,
    .site-nav__list .menu-item-has-children:focus-within > .sub-menu {
      display: block;
    }

    .site-nav__list .menu-item-has-children.is-dismissed > .sub-menu {
      display: none;
    }

    .site-nav__list .sub-menu a {
      min-block-size: 2.5rem;
      padding: var(--s-2) var(--s-3);
      border-radius: var(--r-1);
      color: var(--c-text);
    }

    .site-nav__list .sub-menu a:hover,
    .site-nav__list .sub-menu a:focus-visible {
      background: var(--c-grey);
      color: var(--c-text);
    }

    .site-nav__shop {
      margin-block-start: 0;
      margin-inline-start: auto;
      padding-inline: var(--s-2);
      min-block-size: var(--header-h);
      font-size: var(--fs-0);
      white-space: nowrap;
    }
  }

  @media (min-width: 80em) {
    .site-nav,
    .site-nav.is-open {
      gap: var(--s-8);
    }
  }

  .breadcrumb {
    font-size: var(--fs--1);
    color: var(--c-text-muted);
    margin-block-end: var(--s-5);
  }

  .hero {
    position: relative;
    display: grid;
    align-items: center;
    min-block-size: clamp(28rem, 60vb, 42rem);
    padding-block: var(--section-y);
    overflow-x: clip;
    container-type: inline-size;
  }

  .hero--plain {
    min-block-size: 0;
  }

  .hero--dark {
    background: var(--c-black);
    color: var(--c-text-on-dark);
  }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .hero__media picture {
    display: contents;
  }

  .hero__media img,
  .hero__media .placeholder {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: 0;
    color: transparent;
  }

  .hero--photo {
    align-items: end;
    min-block-size: clamp(34rem, 72vb, 40rem);
  }

  /* The homepage hero and the answer below it fill the small viewport (toolbars shown) together.
     A phone too short for both keeps the photo and shows a strip of white above the answer. */
  .front__first {
    display: flex;
    flex-direction: column;
    min-block-size: calc(100svb - var(--header-h));
  }

  .front__first > .hero--photo {
    flex: 1 0 auto;
    min-block-size: 0;
  }

  /* A short hero crops the photo; keep its upper part, where people stand, in view. */
  .front__first > .hero--photo .hero__media img {
    object-position: 50% 20%;
  }

  @media (max-width: 43.75em) and (max-height: 45rem) {
    .front__first > .hero--photo {
      min-block-size: max(34rem, calc(100svb - var(--header-h) - 3rem));
    }

    .front__first > .front__answer {
      padding-block-start: var(--section-y);
    }
  }

  .hero--photo .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      150% 130% at 0% 100%,
      rgb(10 10 10 / 0.85) 0%,
      rgb(10 10 10 / 0.62) 40%,
      rgb(10 10 10 / 0) 72%
    );
  }

  .hero--portrait .hero__media img {
    object-position: 50% 0%;
  }

  @container (max-width: 43.75em) {
    .hero--photo .hero__media::after {
      background: linear-gradient(
        0deg,
        rgb(10 10 10 / 0.82) 0%,
        rgb(10 10 10 / 0.5) 45%,
        rgb(10 10 10 / 0) 75%
      );
    }

    .hero--photo:not(.hero--portrait) .hero__media img {
      object-position: 70% 50%;
    }

    .hero--photo.hero--phone-source .hero__media img {
      object-position: 50% 50%;
    }
  }

  .hero__inner {
    position: relative;
    z-index: 1;
    max-inline-size: 44rem;
  }

  .hero__answer {
    max-inline-size: 36rem;
  }

  .hero__title {
    font-size: var(--fs-5);
    letter-spacing: -0.035em;
    line-height: 1.05;
  }

  .hero--photo .hero__title {
    max-inline-size: 17ch;
    text-wrap: balance;
  }

  .hero__line {
    margin-block-start: var(--s-4);
    font-size: var(--fs-2);
    font-weight: var(--fw-medium);
    line-height: 1.3;
  }

  .hero__answer {
    margin-block-start: var(--s-5);
    font-size: var(--fs-2);
    line-height: 1.4;
  }

  .hero__actions {
    margin-block-start: var(--s-6);
  }

  .hero--split {
    min-block-size: 0;
  }

  .hero--split .hero__answer {
    font-size: var(--fs-1);
    line-height: 1.5;
  }

  .hero__split {
    display: grid;
    gap: var(--s-7) var(--gap);
    align-items: center;
  }

  .hero__figure img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-2);
  }

  @container (min-width: 48em) {
    .hero__split {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .hero__split > .hero__inner {
      grid-column: 1 / span 6;
    }

    .hero__split > .hero__figure {
      grid-column: 7 / span 6;
    }
  }

  .figures {
    display: grid;
    gap: var(--s-6) var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }

  .prose .figures {
    margin-block: var(--s-6);
  }

  .prose .figures:last-child {
    margin-block-end: 0;
  }

  .figures__value {
    font-size: var(--fs-stat);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.035em;
    line-height: 1;
  }

  .figures__label {
    margin-block-start: var(--s-3);
    font-size: var(--fs--1);
    color: var(--c-text-muted-warm);
  }

  .text-box {
    display: grid;
    gap: var(--s-6) var(--gap);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .text-box__text {
    margin-block-start: var(--s-5);
  }

  .text-box__card {
    padding: var(--s-6);
    background: var(--c-beige);
    border-radius: var(--r-2);
  }

  @container (min-width: 48em) {
    .text-box {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .text-box > :first-child {
      grid-column: 1 / span 7;
    }

    .text-box > .text-box__card {
      grid-column: 9 / span 4;
    }
  }

  .photo-card {
    position: relative;
    container-type: inline-size;
  }

  .photo-card__figure img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
  }

  .photo-card__caption {
    padding: var(--s-3) var(--gutter, 1rem) 0;
    font-size: var(--fs--1);
    color: var(--c-text-muted);
  }

  .photo-card__container {
    position: relative;
    margin-block-start: calc(var(--s-8) * -1);
    padding-block-end: var(--section-y);
  }

  .photo-card__card {
    padding: var(--s-6);
    background: var(--c-white);
    border-radius: var(--r-2);
    box-shadow: 0 0.5rem 2rem rgb(10 10 10 / 0.08);
  }

  .photo-card__title {
    font-size: var(--fs-4);
    letter-spacing: -0.03em;
  }

  .photo-card__text {
    margin-block-start: var(--s-5);
  }

  @container (min-width: 60em) {
    .photo-card__figure img {
      aspect-ratio: auto;
      block-size: clamp(36rem, 52vw, 48rem);
    }

    .photo-card__caption {
      position: absolute;
      inset-inline-start: var(--s-5);
      inset-block-end: var(--s-4);
      padding: var(--s-1) var(--s-3);
      background: rgb(255 255 255 / 0.9);
      border-radius: var(--r-1);
      color: var(--c-text);
    }

    .photo-card__container {
      position: absolute;
      inset: 0;
      display: grid;
      align-items: center;
      justify-items: end;
      margin: 0 auto;
      padding-block: var(--s-7);
    }

    .photo-card__card {
      inline-size: min(100%, 34rem);
      max-block-size: 100%;
      overflow: auto;
      padding: var(--s-7);
    }
  }

  .placeholder {
    display: grid;
    place-items: center;
    inline-size: 100%;
    background: var(--c-grey);
    color: var(--c-text-muted-warm);
    font-size: var(--fs--1);
    border-radius: var(--r-2);
  }

  .logo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-6) var(--s-9);
    padding: 0;
    list-style: none;
  }

  .logo-row__item {
    font-size: var(--fs-3);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
    color: var(--c-text-muted);
  }

  .logo-row__item img {
    block-size: 2.5rem;
    inline-size: auto;
  }

  .logo-row--large {
    column-gap: var(--s-7);
  }

  @container (min-width: 48em) {
    .logo-row--large .logo-row__item img {
      block-size: 3rem;
    }

    .brands-split {
      display: grid;
      grid-template-columns: 5fr 7fr;
      column-gap: var(--s-8);
      align-items: start;
    }

    .brands-split .section__head {
      margin-block-end: 0;
    }
  }

  .stats {
    display: grid;
    gap: var(--s-6);
    list-style: none;
  }

  .stats__value {
    display: block;
    font-size: var(--fs-stat);
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    line-height: 1;
  }

  .stats__label {
    display: block;
    margin-block-start: var(--s-2);
    font-size: var(--fs-1);
  }

  .band {
    position: relative;
    overflow: hidden;
    background: var(--c-black);
    color: var(--c-white);
    padding-block: var(--section-y);
    container-type: inline-size;
  }

  .band__media {
    position: absolute;
    inset: 0;
  }

  .band__media img,
  .band__media .placeholder {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: 0;
    color: transparent;
  }

  .band__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgb(0 0 0 / 0.7) 0%,
      rgb(0 0 0 / 0.58) 50%,
      rgb(0 0 0 / 0.6) 100%
    );
  }

  @media (max-width: 59.99em) {
    .band__media::after {
      background: rgb(0 0 0 / 0.62);
    }
  }

  .band__inner {
    position: relative;
    display: grid;
    gap: var(--s-8);
  }

  @container (min-width: 48em) {
    .band__inner {
      grid-template-columns: minmax(0, 1fr) auto;
      justify-content: space-between;
      align-items: center;
      column-gap: var(--s-8);
    }

    .band .stats {
      text-align: right;
    }
  }

  .band__title {
    font-size: var(--fs-4);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.03em;
    max-inline-size: 16ch;
  }

  .band__text {
    margin-block-start: var(--s-4);
    max-inline-size: 40ch;
    font-size: var(--fs-1);
  }

  .band .btn-row {
    margin-block-start: var(--s-6);
  }

  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-2);
    overflow: hidden;
    background: var(--c-grey);
  }

  .card__media {
    position: relative;
    aspect-ratio: 4 / 3;
  }

  .card__media img,
  .card__media .placeholder {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: 0;
    color: transparent;
  }

  .card__title {
    font-size: var(--fs-2);
    font-weight: var(--fw-semibold);
  }

  .card__title a {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .card--image {
    color: var(--c-white);
    background: var(--c-grey);
  }

  .card--image .card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgb(0 0 0 / 0) 40%,
      rgb(0 0 0 / 0.85) 100%
    );
  }

  .card--image .card__media img {
    transition: transform var(--dur-2) var(--ease);
  }

  .card--image:hover .card__media img {
    transform: scale(1.03);
  }

  .card--image .card__body {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 1;
    padding: var(--s-5);
  }

  .card--image .card__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    color: var(--c-white);
  }

  .card--image .card__title::after {
    content: "\2192";
    flex: none;
    transition: transform var(--dur-1) var(--ease);
  }

  .card--image:hover .card__title::after {
    transform: translateX(0.15em);
  }

  .card--image .card__title a:hover {
    color: var(--c-white);
  }

  .card--square .card__media {
    aspect-ratio: 1;
  }

  .card--product .card__media img {
    transition: transform var(--dur-2) var(--ease);
  }

  .card--product:hover .card__media img {
    transform: scale(1.03);
  }

  .card--product .card__body {
    padding: var(--s-5);
  }

  .card--product .card__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
  }

  .card--product .card__title::after {
    content: "\2192";
    flex: none;
    transition: transform var(--dur-1) var(--ease);
  }

  .card--product:hover .card__title::after {
    transform: translateX(0.15em);
  }

  .grid--pair .card--product .card__body {
    padding: var(--s-4);
  }

  /* Two cards in a row on phones: the longest title word ("Klimatizacija") has to fit beside the arrow at 360 px. */
  .grid--pair .card--product .card__title {
    font-size: var(--fs-0);
    gap: var(--s-2);
  }

  @container (min-width: 36em) {
    .grid--pair .card--product .card__body {
      padding: var(--s-5);
    }

    .grid--pair .card--product .card__title {
      font-size: var(--fs-2);
      gap: var(--s-4);
    }
  }

  .card--product:not(.card--post) .card__body {
    flex: 1;
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }

  .card--product:not(.card--post):hover .card__body,
  .card--product:not(.card--post):focus-within .card__body {
    background: var(--c-brand);
    color: var(--c-white);
  }

  .card--product:not(.card--post):hover .card__title a,
  .card--product:not(.card--post):focus-within .card__title a {
    color: var(--c-white);
  }

  .card--square .card__title::after {
    content: none;
  }

  .card__place {
    margin-block-start: var(--s-1);
    font-size: var(--fs-1);
  }

  .card__meta {
    margin-block-start: var(--s-2);
    font-size: var(--fs--1);
    color: var(--c-text-muted-on-dark);
  }

  .card--post .card__meta {
    color: var(--c-text-muted-warm);
  }

  .card--tile .card__body {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-6);
    flex: 1;
  }

  .card--tile .link {
    position: relative;
    z-index: 1;
    margin-block-start: auto;
    padding-block-start: var(--s-3);
  }

  .card--tile.card--square {
    aspect-ratio: 1;
  }

  .card--tile.card--square .card__body {
    justify-content: flex-end;
    gap: 0;
  }

  .card--tile .card__meta {
    color: var(--c-text-muted-warm);
  }

  .card--job .card__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
  }

  .card--job .card__title::after {
    content: "\2192";
    flex: none;
    transition: transform var(--dur-1) var(--ease);
  }

  .card--job:hover .card__title::after {
    transform: translateX(0.15em);
  }

  .legal-page__date {
    margin-block-end: var(--s-6);
    color: var(--c-text-muted);
    font-size: var(--fs--1);
  }

  .job-page__contact {
    max-inline-size: var(--measure);
    margin-block-start: var(--s-6);
    font-size: var(--fs-1);
  }

  .panel {
    display: grid;
    gap: var(--s-6);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--r-2);
    background: var(--c-beige);
    container-type: inline-size;
  }

  .panel--grey {
    background: var(--c-grey);
  }

  @container (min-width: 48em) {
    .panel--split {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      gap: var(--s-8);
    }
  }

  .panel__title {
    font-size: var(--fs-4);
    letter-spacing: -0.03em;
    max-inline-size: 16ch;
  }

  .facts {
    display: grid;
    gap: var(--s-3) var(--s-6);
    align-content: start;
  }

  @container (min-width: 36em) {
    .facts {
      grid-template-columns: max-content minmax(0, 1fr);
      gap: var(--s-4) var(--s-7);
    }
  }

  .facts dt {
    font-size: var(--fs--1);
    font-weight: var(--fw-semibold);
    color: var(--c-text-muted);
  }

  .facts dd + dt {
    margin-block-start: var(--s-3);
  }

  @container (min-width: 36em) {
    .facts dd + dt {
      margin-block-start: 0;
    }
  }

  .facts__line {
    display: block;
  }

  .facts__line + .facts__line {
    margin-block-start: var(--s-2);
  }

  .panel__text {
    margin-block-start: var(--s-4);
    max-inline-size: 44ch;
  }

  .panel .link,
  .panel .btn-row {
    margin-block-start: var(--s-6);
  }

  .media-row {
    display: grid;
    gap: var(--s-5) var(--gap);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  @container (min-width: 48em) {
    .media-row {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .media-row__figure {
      grid-column: 1 / span 6;
    }

    .media-row__body {
      grid-column: 8 / span 5;
    }

    .front .section--beige .media-row__body {
      align-self: center;
    }
  }

  .media-row__figure img,
  .media-row__figure .placeholder {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--r-2);
  }

  .media-row__figure--contain img {
    object-fit: contain;
  }

  .media-row__caption {
    margin-block-start: var(--s-3);
    font-size: var(--fs--1);
    color: var(--c-text-muted);
  }

  .media-row__title {
    font-size: var(--fs-4);
    letter-spacing: -0.03em;
  }

  .media-row__text {
    margin-block-start: var(--s-5);
    max-inline-size: 62ch;
  }

  .media-row__actions {
    margin-block-start: var(--s-6);
  }

  .media-row__phone {
    margin-block-start: var(--s-5);
  }

  .media-row__phone a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }

  .process {
    list-style: none;
    display: grid;
    gap: var(--s-6);
  }

  .process__row {
    display: grid;
    gap: var(--s-2) var(--gap);
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: baseline;
  }

  .process--plain .process__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .process__number {
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
    color: var(--c-text-muted);
  }

  .process__title {
    font-size: var(--fs-2);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.015em;
  }

  .process__text {
    grid-column: 2;
    max-inline-size: 62ch;
  }

  .process--plain .process__text {
    grid-column: 1;
  }

  @container (min-width: 48em) {
    .process__row,
    .process--plain .process__row {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .process__number {
      grid-column: 1;
    }

    .process__title {
      grid-column: 2 / span 4;
    }

    .process--plain .process__title {
      grid-column: 1 / span 5;
    }

    .process__text,
    .process--plain .process__text {
      grid-column: 7 / span 6;
    }
  }

  .chapter {
    container-type: inline-size;
  }

  .chapter > :first-child {
    padding-block-start: var(--section-y);
  }

  .chapter__label {
    margin-block-end: var(--s-5);
    font-size: var(--fs--1);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    color: var(--c-text-muted-warm);
  }

  .chapter .text-box__card,
  .chapter .card-tile,
  .chapter .compare__card,
  .chapter .process--cards .process__row {
    background: var(--c-white);
  }

  .cards__lead {
    margin-block: var(--s-7) var(--s-4);
    font-weight: var(--fw-semibold);
  }

  .cards {
    list-style: none;
    display: grid;
    gap: var(--gap);
    grid-template-columns: minmax(0, 1fr);
  }

  .cards--spaced {
    margin-block-start: var(--s-7);
  }

  @container (min-width: 36em) {
    .cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container (min-width: 60em) {
    .cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cards--4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .card-tile {
    padding: var(--s-6);
    background: var(--c-grey);
    border-radius: var(--r-2);
  }

  .card-tile__title {
    font-size: var(--fs-2);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.015em;
    line-height: 1.25;
  }

  .card-tile__value {
    font-size: var(--fs-stat);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.035em;
    line-height: 1;
  }

  .card-tile__text {
    margin-block-start: var(--s-3);
    color: var(--c-text-muted-warm);
  }

  .card-tile__value + .card-tile__text {
    margin-block-start: var(--s-4);
  }

  .cards__note {
    margin-block-start: var(--s-6);
    max-inline-size: 62ch;
    color: var(--c-text-muted-warm);
  }

  .compare__text {
    margin-block-start: var(--s-5);
  }

  .compare {
    display: grid;
    gap: var(--s-4);
    container-type: inline-size;
  }

  .compare__card {
    display: grid;
    gap: var(--s-2) var(--s-5);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding: var(--s-5) var(--s-6);
    background: var(--c-grey);
    border-radius: var(--r-2);
  }


  .compare__name {
    font-size: var(--fs-2);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.015em;
  }

  .compare__source {
    grid-column: 1;
    font-size: var(--fs--1);
    color: var(--c-text-muted-warm);
  }

  .compare__values {
    display: flex;
    gap: var(--s-6);
    margin-block-start: var(--s-3);
  }

  @container (min-width: 26em) {
    .compare:not(.compare--stack) .compare__card {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .compare:not(.compare--stack) .compare__values {
      grid-column: 2;
      grid-row: 1 / span 2;
      margin-block-start: 0;
    }

    .compare:not(.compare--stack) .compare__value {
      text-align: end;
    }
  }

  .compare__value b {
    display: block;
    font-size: var(--fs-4);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.03em;
    line-height: 1;
  }

  .compare__value span {
    font-size: var(--fs--1);
    color: var(--c-text-muted-warm);
  }

  .compare__note {
    margin-block-start: var(--s-2);
    font-size: var(--fs--1);
    color: var(--c-text-muted);
  }

  .compare__note > * + * {
    margin-block-start: var(--s-2);
  }

  .split__text .list-cols li + li {
    margin-block-start: var(--s-2);
  }

  @container (min-width: 60em) {
    .split__text:has(> .list-cols) {
      max-inline-size: none;
    }

    .split__text .list-cols {
      columns: 2;
      column-gap: var(--s-7);
    }

    .split__text .list-cols li {
      break-inside: avoid;
    }
  }

  @container (min-width: 48em) {
    .media-row--flip .media-row__figure {
      grid-column: 7 / span 6;
      grid-row: 1;
    }

    .media-row--flip .media-row__body {
      grid-column: 1 / span 5;
      grid-row: 1;
    }
  }

  .media-row__figure--tall img {
    aspect-ratio: 4 / 5;
  }

  .process--cards {
    gap: var(--gap);
    grid-template-columns: minmax(0, 1fr);
  }

  .process--cards .process__row {
    display: block;
    padding: var(--s-6);
    background: var(--c-grey);
    border-radius: var(--r-2);
  }

  .process--cards .process__number {
    display: block;
    font-size: var(--fs-4);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--c-brand);
  }

  .process--cards .process__title {
    margin-block-start: var(--s-5);
  }

  .process--cards .process__text {
    margin-block-start: var(--s-2);
  }

  @container (min-width: 48em) {
    .process--cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .scope__intro {
    margin-block-start: var(--s-5);
    max-inline-size: 48ch;
  }

  .scope__list {
    list-style: none;
    display: grid;
    gap: var(--s-4) var(--gap);
    grid-template-columns: minmax(0, 1fr);
    font-size: var(--fs-1);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  @container (min-width: 36em) {
    .scope__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .link-tiles {
    list-style: none;
    display: grid;
    gap: var(--s-3);
    grid-template-columns: minmax(0, 1fr);
  }

  @container (min-width: 20em) {
    .link-tiles {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container (min-width: 48em) {
    .link-tiles {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
    }
  }

  .link-tiles__tile {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    block-size: 100%;
    min-block-size: 8rem;
    padding: var(--s-4);
    border-radius: var(--r-2);
    background: var(--c-grey);
    color: var(--c-text);
    text-decoration: none;
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }

  @container (min-width: 48em) {
    .link-tiles__tile {
      min-block-size: 10.5rem;
      padding: var(--s-5);
    }
  }

  a.link-tiles__tile:hover {
    background: var(--c-brand);
    color: var(--c-white);
  }

  a.link-tiles__tile:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 3px;
  }

  .link-tiles__title {
    font-size: var(--fs-1);
    font-weight: var(--fw-semibold);
    line-height: 1.15;
    letter-spacing: -0.015em;
    overflow-wrap: break-word;
  }

  @container (min-width: 48em) {
    .link-tiles__title {
      font-size: var(--fs-2);
    }
  }

  .link-tiles--quick {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
  }

  @container (min-width: 48em) {
    .link-tiles--quick {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .link-tiles--quick .link-tiles__tile {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    min-block-size: 4.75rem;
    padding: var(--s-4) var(--s-5);
  }

  .link-tiles--quick .link-tiles__title {
    font-size: var(--fs-0);
    line-height: 1.3;
  }

  .link-tiles--quick .link-tiles__tile:has(.link-tiles__body) {
    align-items: flex-start;
  }

  .link-tiles__text {
    margin-block-start: var(--s-2);
    font-size: var(--fs--1);
    line-height: 1.45;
    color: var(--c-text-muted-warm);
  }

  a.link-tiles__tile:hover .link-tiles__text {
    color: var(--c-white);
  }

  .link-tiles__arrow {
    flex: none;
    color: var(--c-brand);
    transition: color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
  }

  a.link-tiles__tile:hover .link-tiles__arrow {
    color: var(--c-white);
    transform: translateX(0.15em);
  }

  .split__item-title {
    font-size: var(--fs-2);
    letter-spacing: -0.015em;
  }

  .split__item-title a {
    color: inherit;
    text-decoration: none;
  }

  .split__item-title a:hover {
    color: var(--c-brand);
  }

  .split__item > * + * {
    margin-block-start: var(--s-2);
  }

  .split__item > p:last-child {
    margin-block-end: 0;
  }

  .split__text > .split__item + *,
  .split__text > * + .split__item {
    margin-block-start: var(--s-6);
  }

  .section__head--center {
    justify-content: center;
    text-align: center;
  }

  .section__head--center h2 {
    max-inline-size: none;
  }

  .qa {
    max-inline-size: var(--container-narrow);
    margin-inline: auto;
    border-block-start: 1px solid var(--c-line);
  }

  .qa__item {
    border-block-end: 1px solid var(--c-line);
  }

  .qa__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding-block: var(--s-5);
    font-size: var(--fs-1);
    font-weight: var(--fw-medium);
    cursor: pointer;
    list-style: none;
  }

  .qa__item summary::-webkit-details-marker {
    display: none;
  }

  .qa__item summary::after {
    content: "";
    flex: none;
    inline-size: 0.55rem;
    block-size: 0.55rem;
    margin-inline-end: var(--s-2);
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform var(--dur-1) var(--ease);
  }

  .qa__item[open] summary::after {
    transform: translateY(25%) rotate(225deg);
  }

  .qa__answer {
    padding-block-end: var(--s-5);
    max-inline-size: 60ch;
    color: var(--c-text-muted);
  }

  .qa__answer > * + * {
    margin-block-start: var(--s-3);
  }

  .quote {
    max-inline-size: var(--container-narrow);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--r-2);
    background: var(--c-beige);
  }

  .quote__text {
    font-size: var(--fs-2);
    font-weight: var(--fw-medium);
    line-height: 1.4;
  }

  .quote__source {
    margin-block-start: var(--s-4);
    color: var(--c-text-muted);
  }

  .closing {
    background: var(--c-black);
    color: var(--c-text-on-dark);
    padding-block: var(--section-y);
    container-type: inline-size;
  }

  .closing__inner {
    display: grid;
    gap: var(--s-6);
  }

  .closing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
  }

  @container (min-width: 48em) {
    .closing__inner {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: var(--s-8);
    }

    .closing__actions {
      flex-direction: column;
      align-items: stretch;
    }
  }

  .closing__title {
    font-size: var(--fs-5);
    font-weight: var(--fw-semibold);
    line-height: 1.04;
    letter-spacing: -0.035em;
    max-inline-size: 20ch;
  }

  .closing__text {
    margin-block-start: var(--s-5);
    max-inline-size: 62ch;
    color: var(--c-text-muted-on-dark);
  }

  .closing__text p + p {
    margin-block-start: var(--s-4);
  }

  .related {
    background: var(--c-grey);
  }

  .related + .section--tight {
    padding-block-start: var(--section-y);
  }

  .related__cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(80cqi, 22rem);
    gap: var(--s-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .related__cards::-webkit-scrollbar {
    display: none;
  }

  .related__cards:has(> :only-child) {
    grid-auto-columns: 100%;
  }

  @container (min-width: 48em) {
    .related__cards {
      grid-auto-flow: row;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      overflow: visible;
    }
  }

  @container (min-width: 56em) {
    .related__cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .related-card {
    position: relative;
    border-radius: var(--r-2);
    background: var(--c-white);
    scroll-snap-align: start;
  }

  .related-card__inner {
    display: grid;
    gap: var(--s-4);
    block-size: 100%;
    padding: var(--s-4);
  }

  .related-card:has(a:focus-visible) {
    outline: 2px solid var(--c-brand);
    outline-offset: 3px;
  }

  .related-card__media {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--r-1);
    overflow: hidden;
    background: var(--c-grey);
  }

  .related-card__media img,
  .related-card__media .placeholder {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  .related-card__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s-4);
  }

  .related-card__title {
    font-size: var(--fs-2);
    font-weight: var(--fw-semibold);
    line-height: 1.12;
    letter-spacing: -0.025em;
    overflow-wrap: break-word;
    transition: color var(--dur-1) var(--ease);
  }

  .related-card__title a {
    color: inherit;
    text-decoration: none;
  }

  .related-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .related-card:hover .related-card__title {
    color: var(--c-brand);
  }

  .related__guides {
    margin-block-start: var(--s-4);
  }

  .related .link-tiles__tile {
    background: var(--c-white);
  }

  .form {
    display: grid;
    gap: var(--s-5);
    max-inline-size: var(--container-narrow);
  }

  .form__row {
    display: grid;
    gap: var(--s-5);
  }

  @container (min-width: 36em) {
    .form__row--2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .field {
    display: grid;
    align-content: start;
    gap: var(--s-2);
  }

  .field__label {
    font-weight: var(--fw-medium);
  }

  .field__input {
    inline-size: 100%;
    min-block-size: 3.5rem;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-2);
    background: var(--c-white);
    transition: border-color var(--dur-1) var(--ease);
  }

  textarea.field__input {
    min-block-size: 9rem;
    resize: vertical;
  }

  select.field__input {
    appearance: none;
    padding-inline-end: var(--s-8);
    background-image:
      linear-gradient(45deg, transparent 50%, currentColor 50%),
      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
      calc(100% - 1.5rem) 55%,
      calc(100% - 1.15rem) 55%;
    background-size: 0.35rem 0.35rem;
    background-repeat: no-repeat;
  }

  .field__input:hover {
    border-color: var(--c-text);
  }

  .field__input:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 0;
    border-color: transparent;
  }

  .field__input[aria-invalid="true"] {
    border-color: var(--c-error);
  }

  .field__error {
    font-size: var(--fs--1);
    color: var(--c-error);
  }

  .field__hint,
  .form__group-note {
    font-size: var(--fs--1);
    color: var(--c-text-muted);
  }

  .field__optional {
    font-weight: var(--fw-body);
    color: var(--c-text-muted);
  }

  .form__group-note {
    margin-block: calc(var(--s-5) * -1 + var(--s-2)) var(--s-5);
  }

  .search-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    max-inline-size: 36rem;
  }

  .search-form .field {
    flex: 1 1 14rem;
  }

  .search-form .field__input {
    appearance: none;
  }

  .search-form .field__input::-webkit-search-cancel-button,
  .search-form .field__input::-webkit-search-decoration {
    appearance: none;
    display: none;
  }

  .search-form .btn {
    min-block-size: 3.5rem;
  }

  .hero .search-form {
    margin-block-start: var(--s-6);
  }

  .field__input--file {
    padding-block: calc(var(--s-3) + 0.35rem);
    cursor: pointer;
  }

  .field__input--file::file-selector-button {
    margin-inline-end: var(--s-3);
    padding: 0.35rem var(--s-4);
    border: 1px solid var(--c-line-strong);
    border-radius: 999px;
    background: var(--c-white);
    font: inherit;
    cursor: pointer;
  }

  .field--checkbox {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--s-3);
  }

  .field--checkbox input {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin-block-start: 0.2rem;
    accent-color: var(--c-brand);
  }

  .field--checkbox .field__label {
    font-weight: var(--fw-body);
  }

  .field--checkbox .field__error {
    grid-column: 2;
  }

  .field--choices {
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
  }

  .field--choices legend {
    padding: 0;
    margin-block-end: var(--s-2);
  }

  .choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--s-6);
  }

  .choice {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-block-size: var(--tap);
  }

  .choice input {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin: 0;
    accent-color: var(--c-brand);
  }

  .notice {
    padding: var(--s-5) var(--s-6);
    border-radius: var(--r-2);
    background: var(--c-grey);
  }

  .notice__title {
    font-weight: var(--fw-medium);
  }

  .notice--success .notice__title {
    color: var(--c-success);
  }

  .notice--error .notice__title {
    color: var(--c-error);
  }

  .contact-layout {
    display: grid;
    gap: var(--s-6);
    align-items: start;
  }

  @container (min-width: 60em) {
    .contact-layout {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      gap: var(--s-8);
    }

    .contact-layout--sticky > .panel {
      position: sticky;
      inset-block-start: calc(var(--header-h) + var(--s-5));
    }
  }

  .contact-nap__address {
    display: grid;
    gap: var(--s-3);
  }

  .contact-nap__phone {
    font-size: var(--fs-2);
    font-weight: var(--fw-medium);
  }

  .job-list__items {
    display: grid;
    gap: var(--s-3);
    padding: 0;
    list-style: none;
  }

  .job-list__items .link,
  .job-list .btn-row {
    margin-block-start: 0;
  }

  .contact-form {
    container-type: inline-size;
  }

  .contact-form__title {
    margin-block-end: var(--s-5);
  }

  .form__group {
    display: grid;
    gap: var(--s-5);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .form__group-title {
    margin-block-end: var(--s-5);
    padding: 0;
    font-size: var(--fs-2);
    font-weight: var(--fw-medium);
  }

  .contact-form .form {
    max-inline-size: none;
  }

  .contacts {
    display: grid;
    gap: var(--s-6) var(--gap);
  }

  @container (min-width: 36em) {
    .contacts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container (min-width: 60em) {
    .contacts {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .contacts__item {
    padding-block-start: var(--s-4);
    border-block-start: 1px solid var(--c-line);
  }

  .contacts__name {
    font-size: var(--fs-1);
    font-weight: var(--fw-semibold);
  }

  .contacts__details {
    display: grid;
    gap: var(--s-1);
    margin-block-start: var(--s-3);
  }

  .map {
    display: grid;
    gap: var(--gap);
  }

  .map__panel .btn-row {
    margin-block-start: 0;
  }

  .map__frame {
    aspect-ratio: 16 / 9;
    min-block-size: 18rem;
    overflow: hidden;
    border-radius: var(--r-2);
    background: var(--c-grey);
  }

  .map__frame iframe {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
  }

  .pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    align-items: center;
    margin-block-start: var(--s-7);
  }

  .pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2rem;
    min-block-size: 2.5rem;
    color: var(--c-text-muted);
  }

  .pagination a.page-numbers:hover {
    color: var(--c-text);
  }

  .pagination .page-numbers.current {
    color: var(--c-text);
    font-weight: var(--fw-semibold);
  }

  .pagination .prev,
  .pagination .next {
    color: var(--c-text);
    font-weight: var(--fw-medium);
  }

  .pagination .screen-reader-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-footer {
    background: var(--c-beige);
    color: var(--c-text);
    padding-block: var(--section-y) var(--s-6);
    container-type: inline-size;
  }

  .site-footer__grid {
    display: grid;
    gap: var(--s-7) var(--s-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  @container (min-width: 60em) {
    .site-footer__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.2fr);
    }

    .site-footer__brand {
      grid-column: auto;
    }
  }

  .site-footer__logo {
    display: inline-block;
  }

  .site-footer__logo img {
    block-size: 2rem;
    inline-size: auto;
  }

  .site-footer .address {
    display: grid;
    gap: var(--s-2);
    margin-block-end: var(--s-4);
  }

  .social {
    display: flex;
    flex-wrap: wrap;
    margin-block-start: var(--s-4);
    margin-inline-start: -0.75rem;
  }

  .social__link {
    display: grid;
    place-items: center;
    inline-size: var(--tap);
    block-size: var(--tap);
    color: var(--c-text);
    transition: color var(--dur-1) var(--ease);
  }

  .social__link:hover {
    color: var(--c-brand);
  }

  .social__link:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: -2px;
  }

  .site-footer__heading {
    font-size: var(--fs-2);
    font-weight: var(--fw-medium);
    margin-block-end: var(--s-4);
  }

  .site-footer__list {
    list-style: none;
    display: grid;
  }

  .site-footer__reach {
    display: grid;
    justify-items: start;
  }

  .site-footer__list a,
  .site-footer__legal-list a,
  .site-footer__reach a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap);
    padding-block: 0.625rem;
  }

  .site-footer__host {
    white-space: nowrap;
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3) var(--s-6);
    margin-block-start: var(--s-8);
    font-size: var(--fs--1);
    color: var(--c-text-muted);
  }

  .site-footer__legal-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
  }

  .site-footer__consent {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap);
    color: inherit;
  }

  .site-footer__consent:hover {
    color: var(--c-text);
  }

  .site-footer__seal {
    block-size: 4rem;
    inline-size: auto;
    margin-inline-start: auto;
    mix-blend-mode: multiply;
  }

  .consent {
    position: fixed;
    inset-inline: var(--s-3);
    inset-block-end: var(--s-3);
    z-index: 40;
    padding: var(--s-5);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-2);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.06);
    color: var(--c-text);
  }

  @media (min-width: 40em) {
    .consent {
      inset-inline: var(--s-5) auto;
      inset-block-end: var(--s-5);
      inline-size: min(26rem, calc(100vw - 2 * var(--s-5)));
    }
  }

  .consent__form {
    display: grid;
    gap: var(--s-4);
  }

  .consent__title {
    font-size: var(--fs-1);
    font-weight: var(--fw-semibold);
  }

  .consent__text {
    font-size: var(--fs--1);
    color: var(--c-text-muted-warm);
  }

  .consent__settings {
    display: grid;
    gap: var(--s-3);
    padding-block: var(--s-3);
    border-block: 1px solid var(--c-line);
  }

  .consent__settings .field--checkbox {
    gap: var(--s-1) var(--s-3);
  }

  .consent__settings .field__hint {
    grid-column: 2;
  }

  .consent__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
    align-items: center;
  }

  .consent__actions .btn {
    inline-size: 100%;
  }

  .consent__toggle {
    grid-column: 1 / -1;
    justify-self: start;
    min-block-size: var(--tap);
    font-size: var(--fs--1);
    font-weight: var(--fw-medium);
    color: var(--c-text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .consent__toggle:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 3px;
  }

  .embed-gate {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--s-4);
    padding: var(--s-5);
    border-radius: var(--r-2);
    background: var(--c-grey);
    text-align: center;
  }

  .embed-gate__text {
    max-inline-size: 32ch;
    font-size: var(--fs--1);
    color: var(--c-text-muted-warm);
  }

  /* The row bleeds to the screen edge while its first card starts on the container line. */
  .shelf {
    --shelf-edge: max(var(--gutter), (100cqi - var(--container)) / 2);
  }

  .shelf .section__head {
    flex-wrap: nowrap;
    align-items: baseline;
  }

  .shelf .section__head h2 {
    min-inline-size: 0;
  }

  .shelf .section__head .link {
    flex: none;
    white-space: nowrap;
  }

  .shelf__scroller {
    position: relative;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--shelf-edge);
    scrollbar-width: none;
  }

  .shelf__scroller::-webkit-scrollbar {
    display: none;
  }

  .shelf__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(78cqi, 22.5rem);
    gap: var(--s-5);
    inline-size: max-content;
    margin: 0;
    padding: 0 var(--shelf-edge);
    list-style: none;
  }

  .shelf__item {
    scroll-snap-align: start;
  }

  .shelf__item:last-child {
    scroll-snap-align: end;
  }

  .shelf__nav {
    display: flex;
    justify-content: flex-end;
    gap: var(--s-3);
    padding-block-start: var(--s-5);
  }

  .shelf__button {
    display: grid;
    place-items: center;
    inline-size: var(--tap);
    block-size: var(--tap);
    border: 0;
    border-radius: 50%;
    background: var(--c-grey);
    color: var(--c-text);
    font: inherit;
    font-size: var(--fs-1);
    cursor: pointer;
    transition: background var(--dur-1) var(--ease);
  }

  .shelf__button:hover {
    background: var(--c-line-warm);
  }

  .shelf__button[aria-disabled="true"] {
    opacity: 0.35;
    cursor: default;
  }

  .ref-card {
    display: block;
    color: var(--c-text);
    text-decoration: none;
  }

  .ref-card__media {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--r-2);
    background: var(--c-grey);
  }

  .ref-card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--dur-2) var(--ease);
  }

  .ref-card:hover .ref-card__media img {
    transform: scale(1.03);
  }

  .ref-card__title {
    margin-block: var(--s-4) 0;
    font-size: var(--fs-1);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    line-height: 1.3;
  }

  .ref-card__place {
    display: block;
    margin-block-start: var(--s-1);
    font-size: var(--fs--1);
    color: var(--c-text-muted);
  }

  .ref-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-block-end: var(--s-6);
  }

  @media (max-width: 47.99em) {
    .ref-filter {
      flex-wrap: nowrap;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      padding-block: var(--s-1);
      scrollbar-width: none;
    }

    .ref-filter::-webkit-scrollbar {
      display: none;
    }

    .ref-filter__button {
      flex: none;
      white-space: nowrap;
    }
  }

  @media (scripting: none) {
    .ref-filter {
      display: none;
    }
  }

  .ref-filter__button {
    min-block-size: var(--tap);
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--c-grey);
    color: var(--c-text);
    font: inherit;
    font-size: var(--fs--1);
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }

  .ref-filter__button:hover {
    background: var(--c-brand);
    color: var(--c-white);
  }

  .ref-filter__button[aria-pressed="true"] {
    background: var(--c-black);
    color: var(--c-white);
    font-weight: var(--fw-semibold);
  }

  .ref-filter__button:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
  }

  .ref-mosaic,
  .ref-names {
    display: grid;
    gap: var(--s-3);
    padding: 0;
    list-style: none;
  }

  .ref-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 10rem;
    grid-auto-flow: dense;
  }

  .ref-mosaic__item--big,
  .ref-mosaic__item--wide {
    grid-column: span 2;
  }

  .ref-mosaic__item--big {
    grid-row: span 2;
  }

  @container (min-width: 48em) {
    .ref-mosaic {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-auto-rows: 14.375rem;
    }
  }

  .ref-mosaic__link {
    position: relative;
    display: block;
    block-size: 100%;
    overflow: hidden;
    border-radius: var(--r-2);
    background: var(--c-grey);
    color: var(--c-text);
    text-decoration: none;
  }

  .ref-mosaic__link img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--dur-2) var(--ease);
  }

  .ref-mosaic__link:hover img {
    transform: scale(1.03);
  }

  .ref-mosaic__link:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 3px;
  }

  .ref-mosaic__label {
    position: absolute;
    inset-inline: var(--s-2);
    inset-block-end: var(--s-2);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-1);
    background: rgb(255 255 255 / 0.95);
    font-size: var(--fs--1);
    line-height: 1.3;
  }

  @container (min-width: 48em) {
    .ref-mosaic__label {
      inset-inline: var(--s-3);
      inset-block-end: var(--s-3);
    }
  }

  .ref-mosaic__name {
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
  }

  .ref-mosaic__place {
    color: var(--c-text-muted);
  }

  .ref-names {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-start: var(--s-7);
  }

  @container (min-width: 48em) {
    .ref-names {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @container (min-width: 64em) {
    .ref-names {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  .ref-names__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--s-1);
    block-size: 100%;
    min-block-size: 7rem;
    padding: var(--s-4);
    border-radius: var(--r-2);
    background: var(--c-grey);
    color: var(--c-text);
    text-align: center;
    text-decoration: none;
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }

  a.ref-names__link:hover {
    background: var(--c-brand);
    color: var(--c-white);
  }

  .ref-names__link:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 3px;
  }

  .ref-names__name {
    font-size: var(--fs-0);
    font-weight: var(--fw-semibold);
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
  }

  .ref-names__place {
    font-size: var(--fs--1);
    color: var(--c-text-muted);
    transition: color var(--dur-2) var(--ease);
  }

  a.ref-names__link:hover .ref-names__place {
    color: var(--c-white);
  }

  .section__head + .ref-names {
    margin-block-start: 0;
  }

  .ref-names__more {
    margin-block-start: var(--s-5);
  }

  @container (max-width: 47.99em) {
    .ref-names.is-collapsed .is-extra {
      display: none;
    }
  }

  @container (min-width: 48em) {
    .ref-names__more {
      display: none;
    }
  }

  .client-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3);
    padding: 0;
    list-style: none;
  }

  .client-grid > li {
    flex: 0 0 calc((100% - 2 * var(--s-3)) / 3);
  }

  .client-grid__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 6rem;
    padding-inline: var(--s-3);
    border-radius: var(--r-2);
    background: var(--c-grey);
  }

  /* The logo files are RGB on white; multiply drops the white onto the pale tile. */
  .client-grid__tile img {
    max-inline-size: 100%;
    max-block-size: 3.25rem;
    inline-size: auto;
    block-size: auto;
    filter: grayscale(1);
    opacity: 0.7;
    mix-blend-mode: multiply;
    transition: filter var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
  }

  a.client-grid__tile:hover img,
  a.client-grid__tile:focus-visible img {
    filter: none;
    opacity: 1;
  }

  a.client-grid__tile:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 3px;
  }

  @container (min-width: 48em) {
    .client-grid > li {
      flex-basis: calc((100% - 5 * var(--s-3)) / 6);
    }

    .client-grid__tile {
      block-size: 7.5rem;
      padding-inline: var(--s-4);
    }
  }

  .cert-line .container {
    text-align: center;
  }

  .cert-line__seal {
    display: block;
    block-size: 6rem;
    inline-size: auto;
    margin: 0 auto var(--s-5);
  }

  .cert-line__text {
    max-inline-size: 44ch;
    margin-inline: auto;
    font-size: var(--fs-1);
  }

  .credentials__inner {
    display: grid;
    gap: var(--s-7);
  }

  .credentials .cert-line {
    display: flex;
    align-items: center;
    gap: var(--s-5);
  }

  .credentials .cert-line__seal {
    flex: none;
    margin: 0;
  }

  .credentials .cert-line__text {
    margin: 0;
    max-inline-size: 34ch;
  }

  @container (min-width: 48em) {
    .credentials__inner {
      grid-template-columns: 7fr 5fr;
      column-gap: var(--s-8);
      align-items: center;
    }

    .credentials .cert-line__seal {
      block-size: 8rem;
    }
  }

  .brands-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-5) var(--s-7);
  }

  .brands-label__text {
    color: var(--c-text-muted);
  }

  .brands-label .logo-row {
    gap: var(--s-5);
  }

  .brands-label .logo-row__item img {
    block-size: 1.5rem;
  }

  @container (min-width: 36em) {
    .brands-label .logo-row {
      column-gap: var(--s-7);
    }

    .brands-label .logo-row__item img {
      block-size: 1.875rem;
    }
  }

  /* Sectors on the front page: one open at a time; stacked below 60em, a row of panels above. */
  .sectors .section__head {
    flex-wrap: nowrap;
    align-items: baseline;
  }

  .sectors .section__head h2 {
    min-inline-size: 0;
  }

  .sectors .section__head .link {
    flex: none;
    white-space: nowrap;
  }

  .sector-panels {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    list-style: none;
    padding: 0;
  }

  .sector-panel {
    position: relative;
    border-radius: var(--r-2);
    overflow: hidden;
    background: var(--c-grey);
  }

  .sector-panel__tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    inline-size: 100%;
    min-block-size: 3rem;
    padding-inline: var(--s-5);
    font-size: var(--fs-1);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    text-align: start;
    transition: color var(--dur-1) var(--ease);
  }

  .sector-panel__tab::after {
    content: "+";
    flex: none;
    font-weight: var(--fw-medium);
  }

  .sector-panel__tab:hover {
    color: var(--c-brand);
  }

  .sector-panel.is-open .sector-panel__tab {
    display: none;
  }

  .sector-panel__body {
    display: none;
  }

  .sector-panel.is-open .sector-panel__body {
    display: block;
  }

  .sector-panel.is-opening .sector-panel__body {
    animation: sector-in var(--dur-2) var(--ease);
  }

  .sector-panel__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--c-grey);
  }

  .sector-panel__media img,
  .sector-panel__media .placeholder {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .sector-panel__media .placeholder {
    border-radius: 0;
    background: var(--c-line);
  }

  .sector-panel__text {
    padding: var(--s-4) var(--s-5) var(--s-5);
  }

  .sector-panel__title {
    font-size: var(--fs-2);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
  }

  .sector-panel__title a {
    display: inline-flex;
    gap: 0.4em;
    color: var(--c-text);
    text-decoration: none;
  }

  .sector-panel__title a::before {
    content: "";
    position: absolute;
    inset: 0;
  }

  .sector-panel__title a::after {
    content: "\2192";
    transition: transform var(--dur-1) var(--ease);
  }

  .sector-panel__title a:hover {
    color: var(--c-brand);
  }

  .sector-panel__title a:hover::after {
    transform: translateX(0.15em);
  }

  .sector-panel__text p {
    margin-block-start: var(--s-2);
    color: var(--c-text-muted-warm);
    max-inline-size: 36ch;
  }

  @container (min-width: 60em) {
    .sector-panels {
      flex-direction: row;
      gap: var(--s-3);
      block-size: 26rem;
    }

    .sector-panel {
      flex: 0 0 5.5rem;
      transition: flex-grow var(--dur-2) var(--ease), flex-basis var(--dur-2) var(--ease);
    }

    .sector-panel.is-open {
      flex: 1 1 auto;
    }

    .sector-panel__tab {
      position: absolute;
      inset: 0;
      align-items: flex-end;
      justify-content: center;
      padding: var(--s-5) 0;
    }

    .sector-panel__tab::after {
      content: none;
    }

    .sector-panel__tab span {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      white-space: nowrap;
    }

    .sector-panel.is-open .sector-panel__body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      block-size: 100%;
    }

    .sector-panel__media {
      aspect-ratio: auto;
      block-size: 100%;
    }

    .sector-panel__text {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: var(--s-6);
    }

    .sector-panel__title {
      font-size: var(--fs-3);
    }
  }

  @keyframes sector-in {
    from {
      opacity: 0;
    }
  }
}

@layer utilities {
  [hidden] {
    display: none !important;
  }

  .visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  .stack > * + * {
    margin-block-start: var(--s-4);
  }

  @media print {
    .site-header,
    .site-footer,
    .closing,
    .nav-toggle,
    .skip-link {
      display: none !important;
    }

    a[href^="http"]::after {
      content: " (" attr(href) ")";
      font-size: 0.85em;
    }
  }
}