/* LA's Premier Property Maintenance
   Built on modern-lending-mono-high-end: 1px rules, uppercase display, square buttons.
   Layers: reset -> tokens -> base -> layout -> components -> utilities */
@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; }
  img, picture, svg { display: block; max-width: 100%; height: auto; }
  input, button, select, textarea { font: inherit; color: inherit; }
  ul[class], ol[class] { list-style: none; }
  a { color: inherit; }
}

@layer tokens {
  :root {
    /* From the hero photo (shadow, stucco) and the brand banner (hi-vis) */
    --ink: #1c1814;
    --ink-2: #5e5448;
    --paper: #f4efe6;
    --sand: #e6dccb;
    --white: #ffffff;
    --hivis: #ffc61a;          /* only on --ink, or as a fill behind --ink text */

    --ground: var(--paper);
    --text: var(--ink);
    --text-mute: var(--ink-2);
    --rule: var(--ink);

    --font-display: "Archivo Black", "Arial Black", sans-serif;
    --font-body: "Source Sans 3", "Segoe UI", sans-serif;

    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-base: 1.125rem;
    --text-lg: 1.375rem;
    --text-xl: clamp(1.75rem, 3.6vw, 2.75rem);
    --text-display: clamp(2.9rem, 7vw, 5.5rem);

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
    --space-6: 7rem;

    --container: 80rem;
    --gutter: clamp(1rem, 4vw, 3rem);
    --line: 1px solid var(--rule);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --header-h: 4.5rem;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground: #15120f;
      --text: #f4efe6;
      --text-mute: #c9bfb0;
      --rule: #f4efe6;
    }
  }
}

@layer base {
  @font-face {
    font-family: "Archivo Black";
    src: url("../fonts/Archivo-Black.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: "Source Sans 3";
    src: url("../fonts/SourceSans3-Variable.woff2") format("woff2");
    font-weight: 200 900;
    font-display: swap;
  }

  html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
  body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text);
    background: var(--ground);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.98;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }
  p { text-wrap: pretty; }
  ::selection { background: var(--hivis); color: var(--ink); }
  :focus-visible { outline: 3px solid var(--hivis); outline-offset: 3px; }

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

@layer layout {
  .wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
}

@layer components {

  /* Buttons: square, uppercase, template vocabulary */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.8rem 1.6rem;
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 2px solid currentColor;
    transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
  }
  .btn--hivis { background: var(--hivis); color: var(--ink); border-color: var(--hivis); }
  .btn--ghost { background: transparent; color: var(--white); border-color: var(--white); }
  @media (hover: hover) and (pointer: fine) {
    .btn--hivis:hover { background: var(--white); border-color: var(--white); }
    .btn--ghost:hover { background: var(--white); color: var(--ink); }
  }

  /* Header: solid ink bar, sticky, condenses on scroll */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ink);
    color: var(--white);
    border-bottom: 1px solid #3a332c;
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--header-h);
    transform-origin: left center;
    transition: transform 0.25s var(--ease-out);
  }
  .site-header[data-scrolled="true"] .site-header__inner { transform: scale(0.94); }
  .brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; margin-right: auto; min-height: 44px; }
  .brand__mark {
    display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem;
    background: var(--hivis); color: var(--ink);
    font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.02em;
  }
  .brand__name { font-family: var(--font-display); font-size: 1rem; line-height: 1.05; text-transform: uppercase; }
  .brand__name small { display: block; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; color: #c9bfb0; }

  .nav { display: flex; align-items: center; gap: var(--space-3); }
  .nav__link {
    font-size: var(--text-sm); font-weight: 600; text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
    padding-block: 0.75rem;
  }
  @media (hover: hover) and (pointer: fine) {
    .nav__link:hover { color: var(--hivis); }
  }
  .header-phone {
    font-family: var(--font-display); font-size: 1.05rem; text-decoration: none;
    white-space: nowrap; color: var(--hivis); padding-block: 0.75rem;
  }
  .header-cta { min-height: 2.75rem; padding: 0.55rem 1.1rem; }
  .nav-toggle { display: none; }

  @media (max-width: 1100px) {
    .nav { display: none; }
    .nav-toggle {
      display: grid; place-items: center;
      width: 2.75rem; height: 2.75rem;
      background: none; border: 2px solid var(--white); color: var(--white); cursor: pointer;
    }
    .nav.is-open {
      display: flex; flex-direction: column; align-items: stretch;
      position: absolute; inset: 100% 0 auto 0;
      background: var(--ink); padding: var(--space-2) var(--gutter) var(--space-3);
      border-bottom: 1px solid #3a332c;
    }
  }
  @media (max-width: 640px) {
    .header-cta, .brand__name small { display: none; }
    .site-header__inner { gap: 0.75rem; }
    .brand { gap: 0.5rem; }
    .brand__mark { width: 2.25rem; height: 2.25rem; font-size: 0.85rem; }
    .brand__name { font-size: 0.78rem; }
    .header-phone { font-size: 0.85rem; }
    .hero__kicker { letter-spacing: 0.1em; }
  }

  /* Hero: full-bleed photo, headline on the image */
  .hero {
    position: relative;
    min-height: min(82vh, 52rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    color: var(--white);
    background: var(--ink);
    overflow: hidden;
  }
  .hero__media, .hero__media img {
    position: absolute; inset: 0; width: 100%; height: 100%;
  }
  .hero__media img { object-fit: cover; object-position: 62% 40%; }
  .hero__media::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgb(28 24 20 / 0.9) 0%, rgb(28 24 20 / 0.65) 30%, rgb(28 24 20 / 0) 55%),
      linear-gradient(0deg, rgb(28 24 20 / 0.75) 0%, rgb(28 24 20 / 0) 45%);
  }
  .hero__copy { position: relative; width: 100%; padding-block: var(--space-6) var(--space-5); }
  .hero__kicker {
    display: inline-block;
    font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em;
    background: var(--hivis); color: var(--ink);
    padding: 0.35rem 0.7rem; margin-bottom: var(--space-3);
  }
  .hero__title { font-size: var(--text-display); max-width: 11ch; }
  .hero__title em { font-style: normal; color: var(--hivis); }
  .hero__lead { max-width: 42ch; margin-top: var(--space-3); font-size: var(--text-lg); line-height: 1.45; color: #f1ebe1; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
  @media (max-width: 640px) {
    .hero { min-height: 88vh; }
    .hero__media img { object-position: 70% 40%; }
    .hero__media::after {
      background: linear-gradient(0deg, rgb(28 24 20 / 0.94) 0%, rgb(28 24 20 / 0.7) 55%, rgb(28 24 20 / 0.2) 100%);
    }
  }

  /* Section head (template vocabulary) */
  .section-head { padding-block: var(--space-5) var(--space-4); max-width: 46rem; }
  .section-head__title { font-size: var(--text-xl); }
  .section-head__sub { color: var(--text-mute); margin-top: var(--space-1); font-size: var(--text-lg); }
  .section-head--invert .section-head__sub { color: #c9bfb0; }

  /* Intro: oversized statement left, body right */
  .intro { border-bottom: var(--line); }
  .intro__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
    padding-block: var(--space-6);
  }
  .intro__title { font-size: clamp(2.2rem, 4.6vw, 3.75rem); }
  .intro__body { display: grid; gap: var(--space-2); max-width: 38rem; }
  .intro__lead { font-size: var(--text-lg); font-weight: 600; line-height: 1.45; }
  .intro__promise { border-left: 6px solid var(--hivis); padding: 0.25rem 0 0.25rem var(--space-2); }
  @media (max-width: 860px) { .intro__grid { grid-template-columns: 1fr; gap: var(--space-3); padding-block: var(--space-5); } }

  /* Services: ruled grid of numbered cards, hover inverts */
  .services { border-bottom: var(--line); padding-bottom: var(--space-5); }
  .services__grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: var(--line); border-left: var(--line);
  }
  .services__grid > li { display: flex; border-right: var(--line); border-bottom: var(--line); }
  .card {
    display: flex; flex-direction: column; gap: var(--space-1); width: 100%;
    padding: var(--space-3); text-decoration: none; min-height: 14rem;
    transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
  }
  .card__index { font-family: var(--font-display); font-size: var(--text-sm); color: var(--text-mute); }
  .card__title { font-size: 1.35rem; }
  .card__body { color: var(--text-mute); font-size: var(--text-sm); flex-grow: 1; }
  .card__link { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: underline; text-underline-offset: 4px; }
  .card--all { background: var(--ink); color: var(--white); }
  .card--all .card__index { color: var(--hivis); }
  .card--all .card__body { color: #c9bfb0; }
  @media (hover: hover) and (pointer: fine) {
    .card:hover { background: var(--ink); color: var(--white); }
    .card:hover .card__body { color: #c9bfb0; }
    .card:hover .card__index { color: var(--hivis); }
    .card--all:hover { background: var(--hivis); color: var(--ink); }
    .card--all:hover .card__body, .card--all:hover .card__index { color: var(--ink); }
  }
  @media (max-width: 1100px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 760px) { .services__grid { grid-template-columns: repeat(2, 1fr); } .card { min-height: 0; padding: var(--space-2); } }
  @media (max-width: 420px) { .services__grid { grid-template-columns: 1fr; } }

  /* Full-bleed band */
  .band { position: relative; min-height: min(78vh, 46rem); display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; color: var(--white); background: var(--ink); overflow: hidden; }
  .band__media, .band__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .band__media img { object-fit: cover; object-position: 50% 45%; }
  .band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(28 24 20 / 0.9) 0%, rgb(28 24 20 / 0.35) 50%, rgb(28 24 20 / 0) 75%); }
  .band__copy { position: relative; width: 100%; padding-block: var(--space-6) var(--space-5); }
  .band__title { font-size: clamp(2rem, 5vw, 4rem); max-width: 18ch; }
  .band__lead { max-width: 46ch; margin-top: var(--space-2); font-size: var(--text-lg); color: #f1ebe1; }

  /* Case studies: ink section */
  .cases { background: var(--ink); color: var(--white); padding-bottom: var(--space-6); }
  .cases__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .case { display: flex; flex-direction: column; gap: var(--space-2); border-top: 3px solid var(--hivis); padding-top: var(--space-3); }
  .case__img { width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: contain; background: #0f0d0b; }
  .case__tag { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hivis); }
  .case__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
  .case__body { color: #d9d0c3; flex-grow: 1; }
  .case__link { color: var(--hivis); font-weight: 700; text-underline-offset: 4px; padding-block: 0.6rem; }
  @media (max-width: 860px) { .cases__grid { grid-template-columns: 1fr; } }

  /* Credentials: photo + figures */
  .creds { border-bottom: var(--line); }
  .creds__grid { display: grid; grid-template-columns: 2fr 3fr; gap: var(--space-5); padding-block: var(--space-6); align-items: stretch; }
  .creds__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
  .creds__copy { display: flex; flex-direction: column; gap: var(--space-3); justify-content: center; }
  .creds__item { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-3); border-top: var(--line); padding-top: var(--space-3); }
  .creds__figure { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.05; }
  .creds__item a { font-weight: 700; text-underline-offset: 3px; }
  @media (max-width: 860px) {
    .creds__grid { grid-template-columns: 1fr; padding-block: var(--space-5); }
    .creds__media img { aspect-ratio: 4 / 3; height: auto; }
    .creds__item { grid-template-columns: 1fr; gap: var(--space-1); }
  }

  /* Clients marquee: ink band, reduced motion stops it */
  .clients { background: var(--ink); color: var(--white); padding-block: var(--space-4); overflow: hidden; }
  .clients__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hivis); margin-bottom: var(--space-2); }
  .clients__viewport { display: flex; width: max-content; animation: marquee 40s linear infinite; }
  .clients__track { display: flex; gap: var(--space-5); padding-right: var(--space-5); }
  .clients__track li { font-family: var(--font-display); font-size: clamp(1.2rem, 2.2vw, 1.75rem); text-transform: uppercase; white-space: nowrap; }
  @keyframes marquee { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .clients__viewport { animation: none; width: auto; }
    .clients__track { flex-wrap: wrap; padding-inline: var(--gutter); gap: var(--space-1) var(--space-3); }
    .clients__track[aria-hidden] { display: none; }
  }

  /* Areas */
  .areas { background: var(--sand); color: var(--ink); padding-bottom: var(--space-6); }
  .areas .section-head__sub { color: var(--ink-2); }
  .areas__list { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
  .areas__list a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.9rem 0; border-bottom: 1px solid var(--ink); margin-right: var(--space-3);
    font-weight: 600; text-decoration: none; min-height: 44px;
  }
  .areas__list a::after { content: "\2192"; }
  @media (hover: hover) and (pointer: fine) { .areas__list a:hover { color: var(--ink-2); } }
  @media (max-width: 860px) { .areas__list { grid-template-columns: 1fr 1fr; } }

  /* Closing call */
  .contact { background: var(--hivis); color: var(--ink); padding-block: var(--space-6); }
  .contact__title { font-size: var(--text-display); max-width: 12ch; }
  .contact__sub { max-width: 44ch; margin-top: var(--space-3); font-size: var(--text-lg); font-weight: 500; }
  .contact__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
  .contact .btn--hivis { background: var(--ink); color: var(--hivis); border-color: var(--ink); font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.02em; }
  .contact .btn--ghost { color: var(--ink); border-color: var(--ink); }
  @media (hover: hover) and (pointer: fine) {
    .contact .btn--hivis:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
    .contact .btn--ghost:hover { background: var(--ink); color: var(--hivis); }
  }

  /* Footer */
  .footer { background: var(--ink); color: #c9bfb0; padding-top: var(--space-5); }
  .footer__grid { display: grid; grid-template-columns: 2fr 2fr 1.5fr; gap: var(--space-4); padding-bottom: var(--space-4); }
  .footer__brand { font-family: var(--font-display); color: var(--white); text-transform: uppercase; font-size: 1.15rem; }
  .footer__small { font-size: var(--text-sm); margin-top: 0.4rem; }
  .footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); align-content: start; }
  .footer__nav a { text-decoration: none; padding-block: 0.6rem; color: #e9e2d6; }
  @media (hover: hover) and (pointer: fine) { .footer__nav a:hover { color: var(--hivis); } }
  .footer__phone { display: inline-block; padding-block: 0.6rem; font-family: var(--font-display); color: var(--hivis); font-size: 1.5rem; text-decoration: none; }
  .footer__copy { font-size: var(--text-xs); border-top: 1px solid #3a332c; padding-block: var(--space-2); }
  @media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr; } }

  /* ---------- Inner pages ---------- */
  .page-hero {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end;
    min-height: 26rem; background: var(--ink); color: var(--white); overflow: hidden;
  }
  .page-hero--photo { min-height: min(68vh, 40rem); }
  .page-hero__media, .page-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .page-hero__media img { object-fit: cover; }
  .page-hero__media::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgb(28 24 20 / 0.9) 0%, rgb(28 24 20 / 0.6) 45%, rgb(28 24 20 / 0.15) 80%),
      linear-gradient(0deg, rgb(28 24 20 / 0.7) 0%, rgb(28 24 20 / 0) 50%);
  }
  .page-hero__copy { position: relative; width: 100%; padding-block: var(--space-5); }
  .crumbs { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hivis); margin-bottom: var(--space-2); }
  .crumbs a { text-decoration: none; display: inline-block; padding-block: 0.7rem; }
  .page-hero__title { font-size: clamp(2.1rem, 5vw, 4rem); max-width: 20ch; }
  .page-hero__lead { max-width: 52ch; margin-top: var(--space-2); font-size: var(--text-lg); color: #f1ebe1; line-height: 1.45; }
  .page-hero__date { margin-top: var(--space-1); color: #c9bfb0; font-size: var(--text-sm); }

  .page__grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-5); padding-block: var(--space-5) var(--space-6); align-items: start; }
  @media (max-width: 960px) { .page__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } }

  /* Long-form copy migrated from WordPress */
  .prose { max-width: 46rem; font-size: 1.1875rem; line-height: 1.7; }
  .prose > * + * { margin-top: 1.1em; }
  .prose h2, .prose h3, .prose h4 { margin-top: 1.8em; line-height: 1.1; }
  .prose h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
  .prose h3 { font-size: 1.35rem; }
  .prose h4 { font-size: 1.1rem; }
  .prose > :first-child { margin-top: 0; }
  .prose a { font-weight: 600; text-decoration-color: var(--hivis); text-decoration-thickness: 3px; text-underline-offset: 3px; }
  .prose ul, .prose ol { padding-left: 1.25em; }
  .prose li + li { margin-top: 0.4em; }
  .prose blockquote { border-left: 6px solid var(--hivis); padding-left: var(--space-2); font-weight: 600; }
  .prose picture img { width: 100%; height: auto; }
  .prose figure { margin-block: 1.6em; }
  .prose figcaption { font-size: var(--text-sm); color: var(--text-mute); margin-top: 0.5rem; }
  .prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
  .prose th, .prose td { border: var(--line); padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
  .prose .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.5rem; }
  .prose .gallery figure { margin: 0; }
  .prose .gallery img { aspect-ratio: 4 / 3; object-fit: cover; }

  .side { position: sticky; top: calc(var(--header-h) + var(--space-2)); display: grid; gap: var(--space-3); }
  .side__call { background: var(--ink); color: #e9e2d6; padding: var(--space-3); display: grid; gap: var(--space-2); border-top: 6px solid var(--hivis); }
  .side__kicker { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hivis); }
  .side__phone { font-family: var(--font-display); font-size: 1.6rem; color: var(--white); text-decoration: none; }
  .side__call p:not(.side__kicker) { font-size: var(--text-sm); }
  .side__title { font-family: var(--font-display); text-transform: uppercase; margin-bottom: var(--space-1); }
  .side__nav ul { border-top: var(--line); }
  .side__nav a { display: flex; justify-content: space-between; padding: 0.7rem 0; border-bottom: var(--line); text-decoration: none; font-weight: 600; }
  .side__nav a::after { content: "\2192"; }
  @media (hover: hover) and (pointer: fine) { .side__nav a:hover { color: var(--text-mute); } }
  @media (max-width: 960px) { .side { position: static; } }

  .more { border-top: var(--line); padding-block: var(--space-5); }
  .more__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
  .post-card { display: grid; gap: 0.5rem; text-decoration: none; }
  .post-card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
  .post-card__date { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
  .post-card__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.15rem; line-height: 1.1; }
  @media (hover: hover) and (pointer: fine) { .post-card:hover .post-card__title { text-decoration: underline; text-decoration-color: var(--hivis); text-decoration-thickness: 3px; } }
  @media (max-width: 760px) { .more__grid { grid-template-columns: 1fr; } }

  /* Trust bar: hi-vis band, ruled cells like the template's stats grid */
  .trust { background: var(--hivis); color: var(--ink); border-bottom: 1px solid var(--ink); }
  .trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
  .trust__item { padding: var(--space-3) var(--space-3); border-left: 1px solid var(--ink); }
  .trust__item:first-child { border-left: none; padding-left: 0; }
  .trust__figure { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1; font-variant-numeric: tabular-nums; }
  .trust__label { font-size: var(--text-sm); font-weight: 600; margin-top: 0.4rem; line-height: 1.35; }
  @media (max-width: 760px) {
    .trust__grid { grid-template-columns: 1fr 1fr; }
    .trust__item { padding: var(--space-3) var(--space-2); }
    .trust__item:nth-child(odd) { border-left: none; padding-left: 0; }
    .trust__item:nth-child(n+3) { border-top: 1px solid var(--ink); }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}