/* RTM Innovation — corporate site styles
   Plain CSS, no build step, no external dependencies. */

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

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

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  overflow-x: hidden;
}

img,
picture {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* ---------- Design tokens ---------- */
:root {
  /* Deep navy / charcoal / off-white / steel gray — premium corporate palette */
  --color-bg: #fbfbfa;
  --color-bg-alt: #eef0f3;
  --color-bg-ink: #0d1220;
  --color-bg-ink-alt: #161d33;
  --color-surface: #ffffff;
  --color-border: #e1e3e8;
  --color-border-strong: #c7cbd3;
  --color-text: #12141c;
  --color-text-muted: #495166;
  --color-text-soft: #6b7280;
  --color-accent: #1c2f63;
  --color-accent-dark: #101d40;
  --color-accent-soft: #e9ecf6;
  --color-accent-line: #8f9fce;
  --color-focus: #1c2f63;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

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

  --max-width: 74rem;
  --max-width-narrow: 48rem;
  --radius: 4px;
  --radius-sm: 3px;

  --shadow-sm: 0 1px 2px rgba(13, 18, 32, 0.06), 0 1px 1px rgba(13, 18, 32, 0.04);
  --shadow-md: 0 20px 40px -22px rgba(13, 18, 32, 0.28), 0 2px 8px rgba(13, 18, 32, 0.06);
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
  font-size: 1rem;
}

h1,
h2,
h3,
h4 {
  line-height: 1.18;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

h1 {
  font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
}

h3 {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);
  letter-spacing: -0.008em;
}

h4 {
  font-size: 0.95rem;
  letter-spacing: -0.005em;
}

p {
  color: var(--color-text-muted);
  max-width: 65ch;
}

strong {
  color: var(--color-text);
  font-weight: 650;
}

/* ---------- Focus states ---------- */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--color-accent);
  color: #fff;
  padding: var(--space-1) var(--space-2);
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

section {
  padding-block: var(--space-6);
}

.section-tight {
  padding-block: var(--space-5);
}

.section-alt {
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section-ink {
  background-color: var(--color-bg-ink);
  border-top: 1px solid var(--color-bg-ink);
  border-bottom: 1px solid var(--color-bg-ink);
  position: relative;
  overflow: hidden;
}

.section-ink::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, var(--color-bg-ink-alt) 1px, transparent 1px);
  background-size: 100% 88px;
  opacity: 0.5;
  pointer-events: none;
}

.section-ink .container {
  position: relative;
}

.section-ink h2,
.section-ink h3,
.section-ink h4 {
  color: #ffffff;
}

.section-ink p {
  color: rgba(255, 255, 255, 0.68);
}

.section-ink .section-heading p {
  color: rgba(255, 255, 255, 0.68);
}

/* ---------- Site header ---------- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background-color: rgba(251, 251, 250, 0.94);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-border-strong);
  box-shadow: 0 1px 0 var(--color-border-strong), 0 8px 20px -14px rgba(13, 18, 32, 0.35);
}

@supports (backdrop-filter: blur(6px)) {
  .site-header {
    backdrop-filter: blur(8px);
  }
}

/* Home page only: header sits on the dark hero until the user
   scrolls past it, then settles into the normal light header. */
body.is-home .site-header:not(.is-scrolled) {
  background-color: var(--color-bg-ink);
  border-bottom-color: var(--color-bg-ink);
}

body.is-home .site-header:not(.is-scrolled) .wordmark {
  color: #ffffff;
}

body.is-home .site-header:not(.is-scrolled) .wordmark-mark span {
  background-color: var(--color-accent-line);
}

body.is-home .site-header:not(.is-scrolled) .main-nav a {
  color: rgba(255, 255, 255, 0.75);
}

body.is-home .site-header:not(.is-scrolled) .main-nav a:hover,
body.is-home .site-header:not(.is-scrolled) .main-nav a[aria-current="page"] {
  color: #ffffff;
}

body.is-home .site-header:not(.is-scrolled) .main-nav a::after {
  background-color: var(--color-accent-line);
}

body.is-home .site-header:not(.is-scrolled) .nav-toggle:focus-visible,
body.is-home .site-header:not(.is-scrolled) .main-nav a:focus-visible {
  outline-color: #ffffff;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: 1.15rem;
}

.wordmark {
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text);
}

.wordmark-mark {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.wordmark-mark span {
  display: inline-block;
  width: 3px;
  background-color: var(--color-accent);
  border-radius: 1px;
}

.wordmark-mark span:nth-child(1) {
  height: 7px;
}

.wordmark-mark span:nth-child(2) {
  height: 13px;
}

.wordmark-mark span:nth-child(3) {
  height: 10px;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.main-nav a {
  position: relative;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--color-text-muted);
  padding: 0.35rem 0;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--color-accent);
}

.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ---------- Mobile nav toggle ---------- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: transparent;
  cursor: pointer;
}

.nav-toggle-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}

.nav-toggle-line {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-text);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

body.is-home .site-header:not(.is-scrolled) .nav-toggle {
  border-color: rgba(255, 255, 255, 0.32);
}

body.is-home .site-header:not(.is-scrolled) .nav-toggle-line {
  background-color: #ffffff;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Below 640px: the five-link row becomes a wordmark + menu button,
   with the links collapsing into a simple panel beneath. Without
   JavaScript, the panel is not collapsible and the links remain a
   plain, fully usable stacked list — the toggle itself only shows
   once main.js confirms it can run the open/close behavior. */
@media (max-width: 639px) {
  .nav-toggle {
    display: inline-flex;
  }

  html:not(.js) .nav-toggle {
    display: none;
  }

  .main-nav {
    width: 100%;
    order: 3;
  }

  html.js .main-nav {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }

  html.js .main-nav.is-open {
    max-height: 22rem;
    opacity: 1;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding-block: var(--space-1) var(--space-2);
    margin-top: var(--space-1);
    border-top: 1px solid var(--color-border);
  }

  body.is-home .site-header:not(.is-scrolled) .main-nav ul {
    border-top-color: rgba(255, 255, 255, 0.16);
  }

  .main-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.6rem 0.2rem;
  }
}

/* ---------- Eyebrow / kicker ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  background-color: var(--color-accent);
}

.section-ink .eyebrow {
  color: var(--color-accent-line);
}

.section-ink .eyebrow::before {
  background-color: var(--color-accent-line);
}

/* ---------- Hero (executive / architectural / premium dark) ---------- */
.hero {
  position: relative;
  padding-block: var(--space-7) var(--space-6);
  background-color: var(--color-bg-ink);
  overflow: hidden;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-5);
}

.hero-inner {
  max-width: 34rem;
}

.hero .eyebrow {
  color: var(--color-accent-line);
}

.hero .eyebrow::before {
  background-color: var(--color-accent-line);
}

.hero h1 {
  max-width: 25ch;
  color: #ffffff;
  font-size: clamp(1.85rem, 1.45rem + 1.7vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
}

.hero p {
  font-size: 1.08rem;
  margin-top: var(--space-3);
  max-width: 40ch;
  color: rgba(255, 255, 255, 0.66);
}

.hero .btn-secondary {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.32);
}

.hero .btn-secondary:hover {
  background-color: #ffffff;
  color: var(--color-bg-ink);
  border-color: #ffffff;
}

/* ---------- Hero visual: an RTM signature composition, not a diagram ----------
   One focal core (a scaled, engraved derivative of the wordmark
   mark) anchors four concentric precision arcs at staggered
   rotations, two thin axis lines, and a small set of nodes — most
   static, a few slowly drifting toward the core. No labels, no
   grid, no network/diagram reading. Every stroke uses a fully-
   opaque color with visibility controlled by a single `opacity`
   value per element, so layering stays predictable and legible. */
.hero-graphic-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-graphic {
  width: 100%;
  max-width: 37rem;
  height: auto;
  display: block;
  transition: transform 0.5s ease-out;
  will-change: transform;
}

.hv-glow {
  fill: var(--color-accent-line);
  opacity: 0.27;
}

.hv-glow-secondary {
  opacity: 0.16;
}

.hv-core-glow {
  fill: var(--color-accent-line);
  opacity: 0.3;
}

.hv-core-ring {
  fill: none;
  stroke: var(--color-accent-line);
  opacity: 0.6;
  stroke-width: 1.3;
}

.hv-core-disc {
  fill: var(--color-accent-line);
  opacity: 0.92;
  transform-origin: 340px 300px;
  animation: hv-core-breathe 16s ease-in-out infinite;
}

.hv-core-mark {
  fill: var(--color-bg-ink);
}

.hv-curve {
  fill: none;
  stroke: #ffffff;
  opacity: 0.27;
}

.hv-curve-strong {
  opacity: 0.36;
}

.hv-curve-accent {
  stroke: var(--color-accent-line);
  opacity: 0.65;
}

.hv-curve-faint {
  opacity: 0.17;
}

.hv-curve-breathe {
  animation: hv-curve-pulse 19s ease-in-out infinite;
}

.hv-curve-fixed-1 {
  transform-origin: 340px 300px;
  transform: rotate(-10deg);
}

.hv-curve-fixed-2 {
  transform-origin: 340px 300px;
  transform: rotate(15deg);
}

.hv-curve-drift-a {
  transform-origin: 340px 300px;
  transform: rotate(-28deg);
  animation: hv-drift-a 26s ease-in-out infinite alternate;
}

.hv-curve-drift-b {
  transform-origin: 340px 300px;
  transform: rotate(47deg);
  animation: hv-drift-b 33s ease-in-out infinite alternate;
}

.hv-line {
  stroke: #ffffff;
  stroke-width: 0.85;
  opacity: 0.18;
}

.hv-node {
  fill: #ffffff;
  opacity: 0.48;
}

.hv-node-accent {
  fill: var(--color-accent-line);
  opacity: 0.68;
}

.hv-point {
  fill: var(--color-accent-line);
}

.hv-point-a {
  animation: hv-travel-a 24s ease-in-out infinite alternate;
}

.hv-point-b {
  animation: hv-travel-b 29s ease-in-out infinite alternate;
  animation-delay: -9s;
}

.hv-point-c {
  animation: hv-travel-c 21s ease-in-out infinite alternate;
  animation-delay: -14s;
}

@keyframes hv-travel-a {
  0% {
    cx: 120px;
    cy: 520px;
    opacity: 0.28;
  }
  50% {
    cx: 262px;
    cy: 378px;
    opacity: 0.85;
  }
  100% {
    cx: 400px;
    cy: 238px;
    opacity: 0.28;
  }
}

@keyframes hv-travel-b {
  0% {
    cx: 522px;
    cy: 118px;
    opacity: 0.25;
  }
  50% {
    cx: 418px;
    cy: 238px;
    opacity: 0.78;
  }
  100% {
    cx: 300px;
    cy: 378px;
    opacity: 0.25;
  }
}

@keyframes hv-travel-c {
  0% {
    cx: 460px;
    cy: 462px;
    opacity: 0.22;
  }
  50% {
    cx: 380px;
    cy: 340px;
    opacity: 0.7;
  }
  100% {
    cx: 220px;
    cy: 180px;
    opacity: 0.22;
  }
}

@keyframes hv-curve-pulse {
  0%,
  100% {
    opacity: 0.16;
  }
  50% {
    opacity: 0.3;
  }
}

@keyframes hv-drift-a {
  from {
    transform: rotate(-35deg);
  }
  to {
    transform: rotate(-21deg);
  }
}

@keyframes hv-drift-b {
  from {
    transform: rotate(40deg);
  }
  to {
    transform: rotate(54deg);
  }
}

@keyframes hv-core-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

@keyframes hv-breathe {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.9;
  }
}

/* Tablet: simplify without losing identity */
@media (min-width: 860px) and (max-width: 1023px) {
  .hv-decorative {
    display: none;
  }
}

/* Mobile: compress the hero so its statement stays strong without
   consuming multiple screens. The signature visual stays part of
   the identity — focal core, main arcs and a couple of nodes — but
   sheds its purely decorative layers and shrinks its footprint. */
@media (max-width: 639px) {
  .hero {
    padding-block: var(--space-5) var(--space-3);
  }

  .hero-layout {
    gap: var(--space-3);
  }

  .hero-inner {
    max-width: none;
  }

  .hero h1 {
    max-width: 19ch;
    font-size: clamp(1.3rem, 1.05rem + 2vw, 1.55rem);
    line-height: 1.28;
    text-wrap: balance;
  }

  .hero p {
    margin-top: var(--space-2);
    max-width: 34ch;
    font-size: 1rem;
  }

  .hero .btn-row {
    margin-top: var(--space-3);
  }

  .hero .btn {
    font-size: 0.8rem;
    padding: 0.75rem 1.3rem;
  }

  .hero-graphic {
    max-width: 13.5rem;
  }

  .hv-decorative {
    display: none;
  }
}

/* ---------- Domain strip: dark continuation of the hero, not a ticker ----------
   Each domain is a real link to its anchor on the Services page. On
   narrow screens the strip is a compact two-column (or, at very
   narrow widths, one-column) grid; from tablet width up it returns
   to a single centered row. */
.domain-strip-wrap {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background-color: var(--color-bg-ink-alt);
}

.domain-strip-wrap a:focus-visible {
  outline-color: var(--color-accent-line);
  outline-offset: 2px;
}

.domain-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding-block: var(--space-3);
}

.domain-strip-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 0.15s ease;
}

.domain-strip li:last-child .domain-strip-link {
  border-bottom: none;
}

.domain-strip-link:hover,
.domain-strip-link:focus-visible {
  color: #ffffff;
}

@media (min-width: 400px) {
  .domain-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.25rem;
  }

  .domain-strip li:nth-last-child(2) .domain-strip-link {
    border-bottom: none;
  }
}

@media (min-width: 860px) {
  .domain-strip {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.85rem 0.75rem;
    padding-block: var(--space-4);
    text-align: center;
  }

  .domain-strip-link {
    min-height: auto;
    padding-block: 0;
    border-bottom: none;
    justify-content: center;
    white-space: nowrap;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
  }
}

/* From 1280px there is enough room to open the gaps back up to the
   original, more spacious rhythm while staying on one row. */
@media (min-width: 1280px) {
  .domain-strip {
    gap: 0.85rem 2.25rem;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 650;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.85rem 1.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.btn-primary {
  background-color: var(--color-accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background-color: var(--color-accent-dark);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn-secondary:hover {
  background-color: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}

.section-ink .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}

.section-ink .btn-secondary:hover {
  background-color: #fff;
  color: var(--color-bg-ink);
  border-color: #fff;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ---------- Cards / grid ---------- */
.grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin-top: var(--space-4);
}

/* ---------- Portfolio secondary entries (homepage) ----------
   Compact, name-only links for products that don't need their own
   featured card — restrained, no status, no description. */
.portfolio-secondary {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.portfolio-links-compact {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
}

.portfolio-links-compact a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 0.15rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.portfolio-links-compact a:hover,
.portfolio-links-compact a:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.card {
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: var(--space-3);
  background-color: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-top-color 0.3s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-top-color: var(--color-accent);
}

.card h3 {
  margin-top: 0;
}

.card-featured {
  border-top-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.card-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
}

.status-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background-color: var(--color-bg-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  width: fit-content;
}

.status-badge.is-live {
  color: #145c30;
  background-color: #e6f4ec;
  border-color: #bfe0cb;
}

.card-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.card-links a {
  font-weight: 650;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-line);
}

.card-links a:hover {
  border-bottom-color: var(--color-accent);
}

/* ---------- Index label (shared: capability list, service list) ---------- */
.index-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  display: block;
}

/* ---------- Compact capability index (home) ---------- */
.capability-list {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-border);
}

.capability-list li {
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--color-border);
}

.capability-list h3 {
  font-size: 1.05rem;
  margin: 0;
}

/* ---------- Service list (editorial rows) ---------- */
.service-list {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
}

.service-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 5.5rem;
}

.service-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.service-item h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.65vw, 1.45rem);
}

.service-item p {
  max-width: 60ch;
  font-size: 0.98rem;
}

@media (min-width: 700px) {
  .service-item {
    grid-template-columns: 17rem 1fr;
    align-items: baseline;
    gap: var(--space-4);
  }
}

.pillar-heading {
  margin-top: var(--space-6);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-strong);
}

.pillar-heading:first-child {
  margin-top: 0;
}

.pillar-heading .eyebrow {
  margin-bottom: var(--space-1);
}

/* ---------- Principles / operating principles ---------- */
.principles-grid {
  grid-template-columns: 1fr;
}

/* ---------- Business domains (two-pillar dark band) ---------- */
.pillar-columns {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.pillar-connector {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background-color: var(--color-accent-line);
  animation: hv-breathe 9s ease-in-out infinite;
}

.pillar-column-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.pillar-column-heading .index-label {
  color: var(--color-accent-line);
}

.pillar-list {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pillar-list h4 {
  margin-bottom: 0.3rem;
}

.pillar-list p {
  font-size: 0.95rem;
}

/* ---------- Section heading ---------- */
.section-heading {
  max-width: 42rem;
  margin-bottom: var(--space-2);
}

.section-heading-wide {
  max-width: 56rem;
}

/* ---------- CTA ---------- */
.cta {
  position: relative;
  background-color: var(--color-bg-ink);
  text-align: left;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background-image: linear-gradient(180deg, var(--color-bg-ink-alt) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-bg-ink-alt) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
  mask-image: linear-gradient(90deg, transparent, #000 60%);
  pointer-events: none;
}

.cta .container {
  position: relative;
}

.cta h2 {
  color: #fff;
  max-width: 24ch;
}

.cta p {
  color: rgba(255, 255, 255, 0.7);
}

/* The default .btn-secondary styles (dark text, light border) are
   tuned for light sections and become unreadable on this section's
   dark background — override for legible, clearly-secondary
   contrast against --color-bg-ink. */
.cta .btn-secondary {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.cta .btn-secondary:hover {
  background-color: #ffffff;
  color: var(--color-bg-ink);
  border-color: #ffffff;
}

.cta .btn-secondary:focus-visible {
  outline-color: #ffffff;
}

/* ---------- Footer (authoritative, multi-column) ---------- */
.site-footer {
  position: relative;
  padding-block: var(--space-6) var(--space-3);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-alt);
  color: var(--color-text-soft);
  font-size: 0.9rem;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent) 0, var(--color-accent) 3.5rem, transparent 3.5rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}

.footer-brand .wordmark {
  color: var(--color-text);
}

.footer-tagline {
  margin-top: var(--space-2);
  max-width: 32ch;
  font-size: 0.9rem;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-3);
}

.footer-col-heading {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-soft);
  margin-bottom: var(--space-1);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-col a {
  text-decoration: none;
  color: var(--color-text-muted);
}

.footer-col a:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-col li {
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

.footer-bottom {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-strong);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1);
  font-size: 0.82rem;
}

/* ---------- Page intro system (About / Services / Apps / Contact / 404) ----------
   A lighter derivative of the homepage hero language: a thin
   architectural rule, an eyebrow, an editorial statement — no
   animated graphic, just the same restrained structural vocabulary. */
.page-header {
  position: relative;
  padding-block: var(--space-7) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-alt);
  overflow: hidden;
}

.page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  max-width: 22rem;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent) 0, var(--color-accent) 2.75rem, transparent 2.75rem);
}

.page-header .container {
  position: relative;
}

.page-header h1 {
  margin-top: 0.4rem;
  max-width: 18ch;
  font-size: clamp(1.9rem, 1.5rem + 1.7vw, 2.6rem);
}

.page-header p {
  font-size: 1.08rem;
  max-width: 50ch;
  color: var(--color-text-muted);
}

.page-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

/* ---------- Two complementary areas (About) ---------- */
.two-areas {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.two-area {
  padding-top: var(--space-3);
  border-top: 2px solid var(--color-border-strong);
}

.two-area h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
}

.two-area > p {
  margin-top: var(--space-1);
}

.two-area ul {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.two-area ul li {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  padding-left: 1rem;
  position: relative;
}

.two-area ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 1px;
  background-color: var(--color-border-strong);
}

/* ---------- Editorial principles (large typographic, not cards) ---------- */
.principles-editorial {
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.principle-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.principle-row h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.65vw, 1.45rem);
}

.principle-row p {
  font-size: 0.98rem;
}

@media (min-width: 700px) {
  .principle-row {
    grid-template-columns: 17rem 1fr;
    align-items: baseline;
    gap: var(--space-4);
  }
}

/* ---------- Product portfolio (Apps index) ---------- */
.portfolio-list {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
}

.portfolio-item {
  position: relative;
  padding-block: var(--space-5);
  padding-inline: var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  border-top: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: background-color 0.3s ease, border-top-color 0.3s ease;
}

.portfolio-item:hover {
  background-color: var(--color-bg-alt);
  border-top-color: var(--color-accent);
}

.portfolio-item:hover h2 {
  color: var(--color-accent);
}

.portfolio-item h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  transition: color 0.3s ease;
}

.portfolio-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.portfolio-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.portfolio-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: center;
}

.portfolio-item p {
  font-size: 1rem;
  max-width: 50ch;
}

/* ---------- Product detail metadata strip (Wooligan / Woolly) ---------- */
.meta-strip {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.meta-strip-item {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.meta-strip-item:last-child {
  border-bottom: none;
}

.meta-strip-item span {
  display: block;
}

.meta-strip-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-soft);
  margin-bottom: 0.2rem;
}

.meta-strip-value {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--color-text);
}

@media (min-width: 640px) {
  .meta-strip {
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--color-border);
  }

  .meta-strip-item {
    border-bottom: none;
    border-right: 1px solid var(--color-border);
    padding-inline: var(--space-3);
  }

  .meta-strip-item:first-child {
    padding-left: 0;
  }

  .meta-strip-item:last-child {
    border-right: none;
  }
}

/* Variant for product pages carrying only Category + Developer (no
   status/availability row) — two even columns instead of three. */
@media (min-width: 640px) {
  .meta-strip-two {
    grid-template-columns: repeat(2, 1fr);
  }
}

.prose > * + * {
  margin-top: var(--space-2);
}

.prose h2 {
  margin-top: var(--space-5);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose ul {
  padding-left: 1.25rem;
  color: var(--color-text-muted);
}

.prose ul li {
  margin-top: 0.4rem;
}

.note-box {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  background-color: var(--color-bg-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-3);
  margin-top: var(--space-3);
}

.prose-wide {
  max-width: none;
}

.contact-panels {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.contact-panel {
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: var(--space-3);
  background-color: var(--color-surface);
}

.contact-panel h2 {
  font-size: 1.05rem;
  margin-bottom: var(--space-1);
}

.contact-panel p {
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

/* ---------- Contact note (restrained corporate CTA on product pages) ---------- */
.contact-note {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.92rem;
  color: var(--color-text-soft);
}

.contact-note a {
  color: var(--color-accent);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-note a:hover {
  color: var(--color-accent-dark);
}

.breadcrumb-back {
  display: inline-block;
  margin-top: var(--space-4);
  font-weight: 650;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-accent);
  text-decoration: none;
}

.breadcrumb-back:hover {
  text-decoration: underline;
}

/* ---------- 404 ---------- */
.not-found-index {
  display: block;
  font-size: clamp(4.5rem, 3rem + 8vw, 9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-border-strong);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

/* ---------- Scroll reveal (progressive enhancement) ----------
   Content is fully visible by default so the page works with JS
   disabled. Only once main.js confirms it is running (html.js) do
   elements start hidden, ready to be revealed as they enter view. */
.reveal {
  opacity: 1;
  transform: none;
}

html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 639px) {
  section {
    padding-block: var(--space-5);
  }
}

@media (min-width: 560px) {
  .footer-nav {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .contact-panels {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 860px) {
  .footer-grid {
    grid-template-columns: 1.2fr 2fr;
    align-items: start;
  }

  .pillar-columns {
    grid-template-columns: repeat(2, 1fr);
    position: relative;
  }

  .pillar-columns::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(
      180deg,
      transparent,
      rgba(255, 255, 255, 0.16) 20%,
      rgba(255, 255, 255, 0.16) 80%,
      transparent
    );
  }

  .pillar-connector {
    display: block;
  }

  .hero-layout {
    grid-template-columns: minmax(0, 1.27fr) minmax(0, 1fr);
  }

  .hero-inner {
    padding-bottom: var(--space-6);
  }

  .hero-graphic-wrap {
    padding-block: 0;
  }

  .two-areas {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .capability-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-4);
  }
}

/* ---------- Reduced motion ----------
   The global rule below collapses one-shot transitions (hovers,
   scroll reveals) to effectively instant. Infinite decorative loops
   (hero graphic, pillar connector) are explicitly stopped so the
   composition settles into a calm, static graphic rather than
   looping imperceptibly in the background. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-graphic *,
  .pillar-connector {
    animation: none !important;
  }

  .hero-graphic {
    transform: none !important;
  }
}

/* ---------- Transitions (guarded above for reduced motion) ---------- */
.btn,
.main-nav a,
.card-links a,
.footer-col a {
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}