/* Page styles for base/templates/base/aboutus.html.
   Moved out of the template unchanged; linked from the same point in the
   page, so these rules still resolve in exactly the order they used to. */

main.page-content {
  padding-top: 0;
}
main .hero-container {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* svh with a vh fallback, matching site.css's .hero-container height — a
     vh-only min-height here would win the max() against the svh height and
     push the bottom-anchored text back under the mobile URL bar. */
  min-height: 100vh;
  min-height: 100svh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* The home page's own measure, in one place.

   The sections below the hero used to be set by Tailwind's `max-w-6xl`
   (1152px) while the hero text was set to 1300px and .page-content to 1300px
   — three numbers for one column, of which the narrowest won, so the page
   that advertises the application was 250px narrower than the application. It
   is the shell measure now, top to bottom. Everything narrower than this on
   the page is deliberate: the closing call to action stays `max-w-4xl` and
   the section ledes `max-w-3xl`, because those are prose and a headline, not
   layout. */
.home-measure {
  max-width: var(--nh-page-measure);
  margin-left: auto;
  margin-right: auto;
}

/* Running text in the opening section. The column is three fifths of the
   measure, which at 1400px is ~800px of 18px type — over ninety characters a
   line. The section gets the width; the sentences do not. */
.home-prose p {
  max-width: var(--nh-read-measure);
}

.hero-text {
  width: min(var(--nh-page-measure), 100%);
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 72px) 8vh;
  box-sizing: border-box;
}
.hero-text h1 {
  margin: 0;
  line-height: 0.95;
}
.hero-text .hero-kicker {
  display: block;
  font-size: clamp(0.85rem, 1.6vw, 1.15rem);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: clamp(8px, 1.5vh, 20px);
}
.hero-text .hero-title {
  display: block;
  font-size: clamp(3.2rem, 10vw, 8.5rem);
  line-height: 1;
}
.hero-text .hero-sub {
  max-width: 46ch;
  margin: clamp(12px, 2vh, 24px) 0 0;
  font-size: clamp(1rem, 1.9vw, 1.375rem);
  line-height: 1.5;
  font-weight: 400;
  font-family: var(--font-ui);
}

main a:focus,
main a:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Capability cards. Deliberately image-free: a plain surface, so a card can
   be added or reworded without anyone having to source a photograph for it.
   The 4px brand-blue top rule was removed 2026-08-11 at the operator's
   request; the neutral 1px outline is the whole frame now. The dark-mode
   rules in site.css repaint .bg-white/.bg-gray-50 and the .text-gray-* scale,
   so these inherit both themes without a second set of colours here. */
.svc-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.svc-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
  transform: translateY(-2px);
}
.dark-mode .svc-card {
  background: var(--surface);
  border-color: #3a3a3a;
}
.svc-title {
  margin: 0 0 0.75rem;
  font-family: 'Sen', sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.dark-mode .svc-title { color: var(--ink); }
.svc-body { margin: 0 0 1rem; color: var(--ink-2); }
.dark-mode .svc-body { color: var(--ink-2); }
.svc-list {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
  list-style: disc;
  color: var(--ink-2);
}
.dark-mode .svc-list { color: var(--ink-2); }
.svc-list li { margin-bottom: 0.4rem; }
.svc-note {
  margin: auto 0 0;
  padding-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--ink-3);
}
.dark-mode .svc-note { color: #9aa5b1; }
.svc-link {
  margin-top: auto;
  font-weight: 700;
  color: var(--brand-blue-deep);
  text-decoration: underline;
}
.dark-mode .svc-link { color: var(--brand-blue-light); }

@media (prefers-reduced-motion: reduce) {
  .svc-card { transition: none; }
  .svc-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .transition-transform {
    transition: none !important;
  }
  .hover\:scale-\[1\.01\]:hover {
    transform: none !important;
  }
}