:root {
  --navy: #001954;
  --navy-deep: var(--navy);
  --ink: #001954;
  --orange: #f58220;
  --surface: #f3f5f7;
  --border: #dce1e6;
  --muted: #001954;
  --on-dark: rgba(255, 255, 255, 0.82);
  --on-dark-muted: rgba(255, 255, 255, 0.62);
  --white: #ffffff;
  --font-main: "Archivo", Arial, sans-serif;
  --font-body: "Noto Sans", Arial, sans-serif;
  --font-mono: "Noto Sans", Arial, sans-serif;
  --container: 1280px;
  --gutter: clamp(20px, 7vw, 100px);
  --section-space: clamp(80px, 10vw, 144px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 20px 60px rgba(10, 22, 40, 0.12);
}

@media (min-width: 1024px) {
  :root {
    --gutter: 96px;
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button,
a,
select {
  touch-action: manipulation;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

::selection {
  color: var(--white);
  background: var(--navy);
}

.container {
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

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

.mono,
.eyebrow {
  font-family: var(--font-mono);
}

.eyebrow {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 0 0 24px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 38px;
  height: 2px;
  background: var(--orange);
  content: "";
}

.eyebrow.light {
  color: var(--white);
}

.amp {
  font-family: Arial, Helvetica, sans-serif;
}

#domov .eyebrow::before {
  display: none;
}

h1,
h2,
h3,
p {
  text-wrap: pretty;
}

h1,
h2,
h3 {
  margin-top: 0;
  letter-spacing: -0.035em;
}

h1 {
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 700;
  line-height: 0.95;
}

h2 {
  margin-bottom: 0;
  color: var(--navy);
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 1.04;
}

h3 {
  font-size: clamp(23px, 2.1vw, 32px);
  font-weight: 600;
  line-height: 1.15;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 14px;
  left: 14px;
  padding: 12px 16px;
  color: var(--white);
  background: var(--navy);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.scroll-progress {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.site-header {
  position: sticky;
  z-index: 900;
  top: 0;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid transparent;
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 10px 35px rgba(10, 22, 40, 0.08);
}

.header-shell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  min-height: 154px;
  margin-inline: auto;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 176px;
  min-height: 149px;
}

.brand img {
  width: 176px;
  height: auto;
}

.brand-tagline {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

.brand-tagline strong {
  color: var(--ink);
  font-weight: 700;
}

.primary-nav {
  display: flex;
  gap: clamp(10px, 1.45vw, 34px);
  justify-content: center;
  align-items: center;
}

.primary-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: clamp(14px, 1.18vw, 19px);
  font-weight: 600;
  white-space: nowrap;
}

.primary-nav a::after {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 2px;
  background: var(--orange);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms var(--ease);
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(14px, 1.18vw, 19px);
  font-weight: 600;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-dropdown-toggle::after {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 2px;
  background: var(--orange);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms var(--ease);
}

.nav-dropdown-toggle:hover::after,
.nav-dropdown-toggle:focus-visible::after,
.nav-dropdown-toggle.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-dropdown-caret {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms var(--ease);
}

.nav-dropdown-toggle[aria-expanded="true"] .nav-dropdown-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu[hidden] {
  display: none;
}

.nav-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-dropdown-menu a {
  min-height: auto;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  border-radius: 2px;
  white-space: nowrap;
}

.nav-dropdown-menu a::after {
  display: none;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.is-active {
  background: var(--surface);
  color: var(--navy);
}

@media (min-width: 1025px) {
  .nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 210px;
    margin-top: 14px;
    padding: 8px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 16px 36px rgba(0, 25, 84, 0.14);
    transform: translateX(-50%);
    z-index: 20;
  }
}

.lang-switch {
  display: inline-flex;
  gap: 11px;
  padding-left: 24px;
  margin-left: 5px;
  border-left: 1px solid var(--border);
}

.lang-switch a {
  min-height: auto;
  color: var(--muted);
  font-size: 17px;
  font-weight: 700;
}

.lang-switch a.is-active {
  color: var(--orange);
}

.lang-switch a::after {
  bottom: -5px;
}

.header-cta {
  display: inline-flex;
  gap: 34px;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 16px 24px;
  color: var(--white);
  background: var(--navy);
  font-size: 19px;
  font-weight: 600;
  transition:
    color 220ms ease,
    background 220ms ease;
}

.header-cta:hover {
  color: var(--ink);
  background: var(--orange);
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 12px 9px;
  background: transparent;
  border: 0;
}

.menu-toggle span {
  display: block;
  width: 28px;
  height: 2px;
  margin: 6px auto;
  background: var(--navy);
  transition:
    transform 240ms var(--ease),
    opacity 180ms ease;
}

.hero {
  position: relative;
  min-height: min(850px, calc(100svh - 154px));
  overflow: hidden;
  color: var(--white);
  background: var(--navy-deep);
}

.hero-media,
.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  background: var(--navy);
  transform: scale(1.02);
  animation: hero-settle 900ms var(--ease) both;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(0, 25, 84, 0.88) 0%, rgba(0, 25, 84, 0.81) 38%, rgba(0, 25, 84, 0.31) 72%, rgba(0, 25, 84, 0.18) 100%),
    linear-gradient(0deg, rgba(0, 25, 84, 0.68) 0%, transparent 45%);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: end;
  min-height: min(850px, calc(100svh - 154px));
  padding-top: clamp(72px, 9vh, 115px);
  padding-bottom: 110px;
}

.hero-copy {
  max-width: 820px;
}

.hero-copy h1 {
  max-width: 780px;
  margin-bottom: 28px;
  color: var(--white);
}

.hero-lead {
  max-width: 680px;
  margin: 0 0 36px;
  color: var(--on-dark);
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-flex;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 13px 20px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  transition:
    color 220ms ease,
    background 220ms ease,
    border-color 220ms ease,
    transform 220ms var(--ease);
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: var(--ink);
  background: var(--orange);
  border-color: var(--orange);
}

.button-primary:hover {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
}

.hero .button-primary:hover,
.contact .button-primary:hover,
.career .button-primary:hover {
  color: var(--ink);
  background: var(--white);
  border-color: var(--white);
}

.button-ghost {
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.7);
}

.button-ghost:hover {
  color: var(--ink);
  background: var(--white);
  border-color: var(--white);
}

.proof-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  align-items: center;
  min-height: 92px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.proof-item strong {
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 500;
}

.proof-item span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.4;
}

.hero-bottom {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 25, 84, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.hero-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
}

.hero-bottom p {
  margin: 0;
}

.hero-bottom a {
  display: inline-flex;
  gap: 22px;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
}

.discipline-strip {
  color: var(--white);
  background: var(--navy);
  border-top: 3px solid var(--orange);
}

.section.home-intro {
  padding-top: calc(var(--section-space) / 2);
  padding-bottom: calc(var(--section-space) / 2);
}

.section.home-nav {
  padding-top: calc(var(--section-space) / 2);
}

.discipline-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.discipline-grid span {
  display: grid;
  place-items: center;
  min-height: 76px;
  padding: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.discipline-grid span:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.about {
  background: var(--white);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(60px, 10vw, 160px);
  align-items: start;
}

.section-intro h2 span {
  color: var(--orange);
}

.about-copy {
  max-width: 680px;
  padding-top: 46px;
  color: var(--muted);
}

.about-copy p {
  margin: 0 0 22px;
}

.about-copy .large-copy {
  margin-bottom: 28px;
  color: var(--ink);
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 500;
  line-height: 1.38;
}

.text-link {
  display: inline-flex;
  gap: 28px;
  align-items: center;
  min-height: 48px;
  margin-top: 12px;
  color: var(--navy);
  border-bottom: 2px solid var(--orange);
  font-weight: 600;
}

.values-grid {
  display: grid;
  grid-template-columns: 0.92fr 0.92fr 1.16fr;
  gap: 20px;
  margin-top: clamp(72px, 9vw, 128px);
}

.value-card {
  position: relative;
  min-height: 340px;
  padding: clamp(28px, 3.5vw, 48px);
  overflow: hidden;
}

.value-card.navy {
  color: var(--white);
  background: var(--navy);
}

.value-card.surface {
  background: var(--surface);
  border: 1px solid var(--border);
}

.value-card .mono {
  margin: 0 0 60px;
  color: var(--orange);
  font-size: 11px;
}

.value-card h3 {
  margin-bottom: 0;
}

.value-card.navy h3 {
  color: var(--white);
}

.value-line {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: var(--white);
  transform: scaleX(0.45);
  transform-origin: left;
  transition: transform 600ms var(--ease);
}

.value-card:hover .value-line {
  transform: scaleX(1);
}

.value-line.orange {
  background: var(--orange);
}

.service-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.service-category-grid .value-card h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (max-width: 768px) {
  .service-category-grid {
    grid-template-columns: 1fr;
  }
}

.image-card {
  padding: 0;
  background: var(--ink);
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 650ms var(--ease);
}

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

.image-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 12px 14px;
  color: var(--white);
  background: rgba(0, 25, 84, 0.9);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.services {
  background: var(--surface);
}

.services-heading,
.team-heading,
.projects-top,
.home-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(42px, 9vw, 130px);
  align-items: end;
}

.services-heading > p,
.team-heading > p {
  max-width: 520px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.service-list {
  margin-top: clamp(72px, 8vw, 112px);
}

.service-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  min-height: 420px;
  padding-block: 42px;
  border-top: 1px solid var(--border);
}

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

.service-index {
  align-self: start;
  padding-top: 4px;
  color: var(--orange);
  font-size: 15px;
}

.service-image-wrap {
  position: relative;
  aspect-ratio: 1.34;
  overflow: hidden;
  background: var(--navy);
}

.service-image-wrap::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 65%, rgba(0, 25, 84, 0.24));
  content: "";
  pointer-events: none;
}

.service-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 650ms var(--ease);
}

.service-row:hover .service-image-wrap img {
  transform: scale(1.04);
}

.service-content {
  max-width: 520px;
}

.service-content .mono {
  margin: 0 0 22px;
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 0.07em;
}

.service-content h3 {
  margin-bottom: 28px;
  color: var(--navy);
  font-size: clamp(27px, 2.5vw, 38px);
}

.service-content ul {
  margin: 0;
  padding: 0;
  color: var(--muted);
  list-style: none;
}

.service-content li {
  position: relative;
  padding: 12px 0 12px 25px;
  border-top: 1px solid var(--border);
}

.service-content li::before {
  position: absolute;
  top: 21px;
  left: 2px;
  width: 7px;
  height: 2px;
  background: var(--orange);
  content: "";
}

.service-row.reverse .service-image-wrap {
  grid-column: 3;
}

.service-row.reverse .service-content {
  grid-row: 1;
  grid-column: 2;
}

.process-section {
  position: relative;
  min-height: 920px;
  padding-block: var(--section-space);
  overflow: hidden;
  color: var(--white);
  background: var(--navy-deep);
  border-top: 4px solid var(--orange);
}

.process-section::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  content: "";
  -webkit-mask-image: linear-gradient(90deg, black, transparent 70%);
  mask-image: linear-gradient(90deg, black, transparent 70%);
}

.process-blueprint {
  position: absolute;
  top: 70px;
  right: 4vw;
  width: min(54vw, 760px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

.process-blueprint span {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.process-blueprint span:nth-child(2) {
  inset: 27%;
}

.process-blueprint span:nth-child(3) {
  inset: 42%;
}

.robot-arm {
  position: absolute;
  z-index: 1;
  top: 20px;
  right: -5vw;
  width: min(62vw, 920px);
  max-width: none;
  filter: drop-shadow(0 36px 48px rgba(0, 0, 0, 0.42));
  pointer-events: none;
  transform: translate3d(0, var(--arm-shift, 0px), 0);
  will-change: transform;
}

.process-grid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  min-height: 650px;
}

.process-copy {
  max-width: min(560px, 88vw);
}

.process-steps {
  width: 100%;
  max-width: min(480px, 88vw);
}

.process-copy h2 {
  max-width: 600px;
  margin-bottom: 32px;
  color: var(--white);
}

.process-copy > p:last-child {
  max-width: 560px;
  color: var(--on-dark);
  font-size: 18px;
}

.process-steps {
  margin: 0;
  padding: 0;
  background: rgba(0, 25, 84, 0.86);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  list-style: none;
}

.process-steps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  min-height: auto;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.process-steps > li > span {
  color: var(--orange);
  font-size: 14px;
}

.process-steps h3 {
  margin-bottom: 4px;
  color: var(--white);
  font-size: 19px;
}

.process-steps p {
  max-width: 400px;
  margin: 0;
  color: var(--on-dark);
  font-size: 13px;
}

.projects {
  overflow: hidden;
  background: var(--white);
  padding-top: clamp(32px, 4vw, 56px);
}

.projects-top {
  align-items: center;
}

.project-controls {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.project-controls button {
  width: 56px;
  height: 56px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--border);
  font-size: 21px;
  transition:
    color 220ms ease,
    background 220ms ease,
    border-color 220ms ease;
}

.project-controls button:hover {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
}

.project-rail {
  display: flex;
  gap: 22px;
  margin-top: 32px;
  padding:
    0 max(var(--gutter), calc((100vw - var(--container)) / 2))
    30px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--orange) var(--border);
  scroll-behavior: smooth;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
}

.project-card {
  position: relative;
  z-index: 2;
  flex: 0 0 clamp(300px, 31vw, 440px);
  aspect-ratio: 0.88;
  padding: 0;
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
  border: 0;
  text-align: left;
  scroll-snap-align: start;
}

.project-card.tall {
  margin-top: 0;
}

.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.project-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 25, 84, 0.96) 0%, rgba(0, 25, 84, 0.42) 36%, transparent 64%);
  content: "";
}

.project-card:hover img,
.project-card:focus-visible img {
  transform: scale(1.055);
}

.project-meta {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 42px;
  gap: 10px;
  align-items: end;
  padding: 28px;
}

.project-meta .mono {
  grid-column: 1 / -1;
  color: var(--orange);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.project-meta strong {
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.15;
}

.project-open {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--ink);
  background: var(--orange);
  font-size: 18px;
}

.project-note {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 40px;
  padding-top: 24px;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

.project-note p {
  max-width: 580px;
  margin: 0;
  font-size: 14px;
}

.project-note .mono {
  color: var(--navy);
  font-size: 11px;
}

.team {
  background: var(--surface);
}

.team-heading {
  align-items: end;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 20px;
  margin-top: clamp(70px, 8vw, 110px);
  padding-bottom: 64px;
}

.team-card {
  min-width: 0;
}

.team-card.offset {
  transform: translateY(64px);
}

.portrait-placeholder {
  position: relative;
  display: grid;
  place-items: end center;
  aspect-ratio: 0.82;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(220, 225, 230, 0.2)),
    var(--border);
  border: 1px solid var(--border);
}

.portrait-placeholder::before,
.portrait-placeholder::after {
  position: absolute;
  content: "";
}

.portrait-placeholder::before {
  top: 12%;
  right: 9%;
  width: 44%;
  aspect-ratio: 1;
  border: 1px solid rgba(0, 25, 84, 0.16);
  border-radius: 50%;
}

.portrait-placeholder::after {
  right: -18%;
  bottom: -25%;
  width: 82%;
  aspect-ratio: 1;
  border: 1px solid rgba(245, 130, 32, 0.45);
  border-radius: 50%;
}

.portrait-silhouette {
  position: relative;
  bottom: -2%;
  width: 66%;
  height: 68%;
  background: linear-gradient(145deg, #7e8999, #526071);
  border-radius: 50% 50% 8% 8%;
  clip-path: polygon(19% 100%, 12% 67%, 28% 50%, 38% 46%, 33% 32%, 35% 18%, 43% 8%, 50% 5%, 58% 8%, 66% 18%, 68% 32%, 62% 46%, 73% 51%, 88% 67%, 82% 100%);
  opacity: 0.8;
}

.photo-status {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 8px 10px;
  color: var(--white);
  background: var(--navy);
  font-size: 9px;
  letter-spacing: 0.05em;
}

.portrait-placeholder.has-photo {
  background: var(--border);
}

.portrait-placeholder.has-photo::before,
.portrait-placeholder.has-photo::after {
  content: none;
}

.portrait-placeholder.has-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}

.team-contact a {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.team-contact a:hover,
.team-contact a:focus-visible {
  color: var(--orange);
}

.team-card-copy {
  padding: 22px 0 12px;
}

.team-card-copy .mono {
  margin: 0 0 10px;
  color: var(--orange);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.team-card-copy h3 {
  margin-bottom: 5px;
  color: var(--navy);
  font-size: 23px;
}

.team-card-copy > span {
  color: var(--muted);
  font-size: 14px;
}

.career {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
}

.career-media {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 25, 84, 0.88) 0%, rgba(0, 25, 84, 0.68) 54%, rgba(0, 25, 84, 0.32) 100%),
    url("../hogroup/assets/sekcie/kariera.jpg") center 45% / cover no-repeat;
}

.career-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.6fr);
  gap: clamp(80px, 12vw, 180px);
  align-items: center;
  min-height: 760px;
  padding-block: var(--section-space);
}

.career-card {
  max-width: 700px;
}

.career-card h2 {
  margin-bottom: 30px;
  color: var(--white);
}

.career-card > p:not(.eyebrow) {
  max-width: 570px;
  margin-bottom: 32px;
  color: var(--on-dark);
  font-size: 18px;
}

.career blockquote {
  margin: 0 0 28px;
  padding: 32px 0 0;
  border-top: 2px solid var(--orange);
}

.career blockquote p {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1.3;
}

.contact {
  color: var(--white);
  background: var(--navy-deep);
}

.contact-heading {
  padding-bottom: clamp(50px, 7vw, 92px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-heading h2 {
  max-width: 950px;
  color: var(--white);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(60px, 10vw, 150px);
  padding-top: clamp(54px, 7vw, 90px);
}

.contact-lead {
  max-width: 500px;
  margin: 0 0 58px;
  color: var(--on-dark);
  font-size: 20px;
  line-height: 1.55;
}

.contact-details dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 30px;
  margin: 0;
}

.contact-details dt {
  margin-bottom: 10px;
  color: var(--orange);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.contact-details dd {
  margin: 0;
  color: var(--on-dark);
}

.contact-details a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.contact-details a:hover {
  color: var(--orange);
}

.contact-visit {
  align-items: center;
  padding-top: clamp(54px, 7vw, 90px);
  margin-top: clamp(54px, 7vw, 90px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-visit .eyebrow {
  margin-bottom: 20px;
}

.contact-visit h3 {
  margin: 0 0 34px;
  color: var(--white);
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.3;
}

.contact-map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, 0.2);
  filter: grayscale(0.15) contrast(1.05);
}

.contact-form {
  display: grid;
  gap: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.field {
  display: grid;
  gap: 9px;
}

.field label {
  color: var(--on-dark);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 54px;
  padding: 14px 0;
  color: var(--white);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 0;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field select option {
  color: var(--ink);
  background: var(--white);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-bottom-color: var(--orange);
  outline: 0;
  box-shadow: 0 2px 0 var(--orange);
}

.form-submit {
  width: fit-content;
  margin-top: 8px;
}

.form-note,
.form-status {
  margin: 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
}

.form-status:not(:empty) {
  color: var(--orange);
}

.project-dialog {
  width: min(1180px, calc(100% - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  padding: 0;
  overflow: visible;
  color: var(--white);
  background: var(--navy-deep);
  border: 0;
}

.project-dialog::backdrop {
  background: rgba(0, 25, 84, 0.9);
  backdrop-filter: blur(8px);
}

.project-dialog figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: min(780px, calc(100dvh - 40px));
  margin: 0;
}

.project-dialog figure img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: var(--navy);
}

.project-dialog figcaption {
  display: grid;
  gap: 7px;
  padding: 22px 28px;
  border-top: 2px solid var(--orange);
}

.project-dialog figcaption .mono {
  color: var(--orange);
  font-size: 10px;
}

.project-dialog figcaption strong {
  font-size: 21px;
}

.dialog-close,
.dialog-arrow {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  color: var(--white);
  background: rgba(0, 25, 84, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.32);
}

.dialog-close {
  top: 14px;
  right: 14px;
  width: 48px;
  height: 48px;
  font-size: 30px;
}

.dialog-arrow {
  top: 50%;
  width: 52px;
  height: 68px;
  font-size: 22px;
  transform: translateY(-50%);
}

.dialog-arrow.previous {
  left: 14px;
}

.dialog-arrow.next {
  right: 14px;
}

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 680ms var(--ease),
    transform 680ms var(--ease);
}

.js [data-reveal][data-delay="1"] {
  transition-delay: 80ms;
}

.js [data-reveal][data-delay="2"] {
  transition-delay: 160ms;
}

.js [data-reveal][data-delay="3"] {
  transition-delay: 240ms;
}

.js [data-reveal][data-delay="4"] {
  transition-delay: 320ms;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@keyframes hero-settle {
  from {
    opacity: 0.7;
    transform: scale(1.08);
  }
  to {
    opacity: 1;
    transform: scale(1.02);
  }
}

@media (max-width: 1180px) {
  .header-shell {
    grid-template-columns: auto 1fr auto;
    gap: 18px;
  }

  .brand,
  .brand img {
    width: 118px;
  }

  .primary-nav {
    gap: 8px;
  }

  .primary-nav a,
  .nav-dropdown-toggle {
    font-size: 13px;
  }

  .header-cta {
    gap: 12px;
    padding-inline: 14px;
  }

  .process-grid {
    grid-template-columns: minmax(0, 0.72fr) minmax(380px, 0.58fr);
  }

  .robot-arm {
    top: 100px;
    right: -14vw;
  }
}

@media (max-width: 1024px) {
  html {
    scroll-padding-top: 86px;
  }

  .header-shell {
    grid-template-columns: 1fr auto;
    min-height: 88px;
  }

  .brand {
    width: 88px;
    min-height: 84px;
  }

  .brand img {
    width: 88px;
  }

  .menu-toggle {
    display: block;
  }

  .primary-nav {
    position: fixed;
    z-index: 901;
    top: 88px;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    gap: 0;
    align-content: start;
    padding: 34px var(--gutter) 80px;
    overflow-y: auto;
    visibility: hidden;
    background: var(--white);
    opacity: 0;
    transform: translateY(-18px);
    transition:
      visibility 0s linear 260ms,
      opacity 220ms ease,
      transform 260ms var(--ease);
  }

  .primary-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .primary-nav a {
    min-height: 66px;
    padding-block: 8px;
    color: var(--navy);
    border-bottom: 1px solid var(--border);
    font-size: 24px;
  }

  .primary-nav a::after {
    display: none;
  }

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

  .nav-dropdown-toggle {
    justify-content: space-between;
    min-height: 66px;
    padding-block: 8px;
    color: var(--navy);
    border-bottom: 1px solid var(--border);
    font-size: 24px;
  }

  .nav-dropdown-toggle::after {
    display: none;
  }

  .nav-dropdown-menu {
    padding: 4px 0 12px 16px;
  }

  .nav-dropdown-menu a {
    min-height: 52px;
    font-size: 18px;
    border-bottom: none;
  }

  .lang-switch {
    padding: 20px 0 0;
    margin: 8px 0 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .lang-switch a {
    min-height: 44px;
    border-bottom: 0;
    font-size: 16px;
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(8px) rotate(45deg);
  }

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

  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-8px) rotate(-45deg);
  }

  .header-cta {
    display: none;
  }

  .hero,
  .hero-grid {
    min-height: min(820px, calc(100svh - 88px));
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    align-content: end;
    padding-top: 90px;
    padding-bottom: 125px;
  }

  .proof-item {
    grid-template-columns: 1fr;
    gap: 3px;
    padding-block: 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.24);
  }

  .proof-item:last-child {
    border-right: 0;
  }

  .discipline-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .discipline-grid span:nth-child(n + 4) {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .about-grid {
    gap: 60px;
  }

  .values-grid {
    grid-template-columns: 1fr 1fr;
  }

  .home-nav-grid {
    grid-template-columns: 1fr 1fr;
  }

  .value-card.image-card {
    grid-column: 1 / -1;
    min-height: 480px;
  }

  .service-row {
    grid-template-columns: 54px 1fr 1fr;
    gap: 28px;
  }

  .process-section {
    min-height: auto;
  }

  .process-grid {
    grid-template-columns: 1fr;
    min-height: 850px;
  }

  .process-copy {
    max-width: 540px;
  }

  .robot-arm {
    top: 120px;
    right: -16vw;
    width: min(88vw, 800px);
  }

  .process-steps {
    max-width: 580px;
  }

  .team-grid {
    grid-template-columns: 1fr 1fr;
  }

  .team-card.offset {
    transform: none;
  }

  .career-grid {
    grid-template-columns: 1fr;
    align-content: end;
  }

  .career blockquote {
    max-width: 680px;
  }

  .contact-grid {
    gap: 70px;
  }

}

@media (max-width: 768px) {
  h1 {
    font-size: clamp(40px, 10vw, 58px);
    line-height: 1.02;
  }

  h2 {
    font-size: clamp(34px, 8.5vw, 48px);
  }

  .hero {
    min-height: 780px;
  }

  .hero-media {
    background-position: 58% 44%;
  }

  .hero-overlay {
    background:
      linear-gradient(90deg, rgba(0, 25, 84, 0.96) 0%, rgba(0, 25, 84, 0.72) 74%, rgba(0, 25, 84, 0.36) 100%),
      linear-gradient(0deg, rgba(0, 25, 84, 0.84) 0%, transparent 55%);
  }

  .hero-grid {
    min-height: 780px;
    padding-top: 70px;
    padding-bottom: 120px;
  }

  .hero-bottom p {
    max-width: 240px;
    font-size: 13px;
  }

  .discipline-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .discipline-grid span {
    flex: 0 0 70vw;
    scroll-snap-align: start;
  }

  .about-grid,
  .services-heading,
  .team-heading,
  .projects-top,
  .contact-grid,
  .home-intro-grid,
  .highlight-grid {
    grid-template-columns: 1fr;
  }

  .reference-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .about-grid {
    gap: 24px;
  }

  .about-copy {
    padding-top: 16px;
  }

  .values-grid,
  .home-nav-grid,
  .home-stats {
    grid-template-columns: 1fr;
  }

  .value-card.image-card {
    grid-column: auto;
    min-height: 360px;
  }

  .service-row,
  .service-row.reverse {
    grid-template-columns: 42px 1fr;
    gap: 18px;
    padding-block: 38px;
  }

  .service-image-wrap,
  .service-row.reverse .service-image-wrap {
    grid-row: auto;
    grid-column: 2;
  }

  .service-content,
  .service-row.reverse .service-content {
    grid-row: auto;
    grid-column: 2;
  }

  .service-index {
    grid-row: 1 / span 2;
  }

  .process-grid {
    gap: 56px;
    min-height: auto;
  }

  .process-section {
    padding-bottom: 90px;
  }

  .robot-arm {
    top: 140px;
    right: -18vw;
    width: min(96vw, 640px);
  }

  .process-blueprint {
    top: 280px;
    right: -10vw;
    width: 90vw;
  }

  .process-steps {
    max-width: none;
  }

  .project-controls {
    justify-content: flex-start;
  }

  .project-rail {
    margin-top: 24px;
  }

  .project-card {
    flex-basis: min(84vw, 390px);
  }

  .project-card.tall {
    margin-top: 0;
  }

  .project-note {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .team-grid {
    grid-template-columns: 1fr 1fr;
  }

  .career-card {
    padding: 32px;
  }

  .contact-details dl {
    gap: 28px 18px;
  }

}

@media (max-width: 560px) {
  :root {
    --section-space: 78px;
  }

  .hero-lead {
    font-size: 17px;
  }

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

  .hero-actions .button {
    width: 100%;
  }

  .hero-bottom a {
    gap: 8px;
  }

  .discipline-grid span {
    flex-basis: 82vw;
  }

  .value-card {
    min-height: 300px;
  }

  .service-row,
  .service-row.reverse {
    grid-template-columns: 1fr;
  }

  .service-index,
  .service-image-wrap,
  .service-row.reverse .service-image-wrap,
  .service-content,
  .service-row.reverse .service-content {
    grid-row: auto;
    grid-column: 1;
  }

  .service-index {
    padding-bottom: 8px;
  }

  .process-grid {
    gap: 48px;
  }

  .robot-arm {
    display: none;
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .portrait-placeholder {
    aspect-ratio: 0.92;
  }

  .career-grid {
    gap: 55px;
  }

  .form-row,
  .contact-details dl {
    grid-template-columns: 1fr;
  }

  .project-dialog {
    width: calc(100% - 20px);
    max-height: calc(100dvh - 20px);
  }

  .project-dialog figcaption {
    padding-bottom: 68px;
  }

  .dialog-arrow {
    top: auto;
    bottom: 14px;
    height: 48px;
    transform: none;
  }
}

/* ===== Subpages: title band + per-page layout overrides ===== */

.page-head {
  padding-block: clamp(56px, 7vw, 104px) clamp(36px, 5vw, 72px);
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.page-head h1 {
  max-width: 20ch;
  font-size: clamp(38px, 5vw, 68px);
}

.page-head h1 span {
  color: var(--orange);
}

.page-head .page-lead {
  max-width: 62ch;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1.3;
}

body.page-sluzby .service-list {
  margin-top: 0;
}

body.page-projekty .projects-top {
  grid-template-columns: minmax(0, 1fr);
  justify-items: end;
}

/* ===== Homepage: intro band + subpage nav card grid ===== */

.home-intro-grid > div:last-child p {
  max-width: 560px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  line-height: 1.5;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.home-stats .proof-item {
  border-bottom: 0;
}

.home-stats .proof-item strong {
  color: var(--navy);
}

.home-stats .proof-item span {
  color: var(--muted);
}

.home-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.home-nav-grid .value-card {
  display: block;
  min-height: 260px;
}

.home-nav-grid .value-card .mono {
  margin-bottom: 40px;
  font-size: 15px;
}

.home-nav-grid .value-card h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ===== Referencie: stats, flagship case study, reference list ===== */

.reference-intro {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: 0;
}

.reference-intro .home-stats {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.reference-highlight {
  padding-bottom: calc(var(--section-space) / 2);
}

.reference-list-section {
  padding-top: calc(var(--section-space) / 2);
}

.reference-highlight .highlight-card {
  padding: clamp(32px, 4vw, 56px);
  color: var(--white);
  background: var(--navy);
}

.highlight-card .mono {
  margin: 0 0 16px;
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.highlight-card h2 {
  margin: 0 0 12px;
  color: var(--white);
}

.highlight-meta {
  margin: 0 0 40px;
  color: var(--on-dark);
  font-size: 15px;
}

.highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.highlight-grid h3 {
  margin: 0 0 10px;
  color: var(--orange);
  font-size: 15px;
}

.highlight-grid p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.6;
}

.reference-list {
  display: grid;
  gap: 1px;
  margin-top: clamp(48px, 6vw, 80px);
  background: var(--border);
  border: 1px solid var(--border);
}

.reference-card {
  padding: clamp(24px, 3vw, 34px);
  background: var(--white);
}

.reference-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
  margin-bottom: 12px;
}

.reference-card-head h3 {
  margin: 0;
  font-size: 21px;
}

.reference-card-head .mono {
  color: var(--orange);
  font-size: 10px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.reference-card p {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
}

.reference-note {
  padding-top: clamp(40px, 5vw, 64px);
}

.reference-note .mono {
  margin: 0 0 10px;
  color: var(--orange);
  font-size: 10px;
  letter-spacing: 0.05em;
}

.reference-note p:last-child {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
}

/* ===== Decorative gear background (desktop only) =====
   A large watermark cluster sitting behind normal page content.
   Layering: gear-bg (z-index 1) < plain text/sections (unpositioned,
   painted before positioned z-index:1+ elements regardless of DOM
   order), so the gears show through white sections and behind
   copy. Photos and full-bleed image sections are deliberately given
   z-index 2 (see img/iframe rule and .hero-media etc. below) so they
   always cover the gears instead of getting an ugly translucent tint. */

.gear-bg {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .gear-bg {
    display: block;
  }
}

.gear-cluster {
  position: absolute;
  left: 60%;
  top: 6vh;
}

.gear {
  position: absolute;
  fill: #c3d3ef;
  opacity: 0.5;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* One tightly interlocked cluster (matching the reference image),
   anchored well to the right so the left side of the page stays
   clean. Positions are local offsets from .gear-cluster's anchor
   point, edges touching/overlapping like real meshing gears.
   Smaller gears spin faster, like a real gear train would. */

.gear-1  { left: 32px;  top: 287px; width: 263px; height: 263px; transform: rotate(var(--gear-rotation, 0deg)); }
.gear-2  { left: 303px; top: 0px;   width: 233px; height: 233px; transform: rotate(calc(var(--gear-rotation, 0deg) * -1)); }
.gear-3  { left: 224px; top: 117px; width: 155px; height: 155px; transform: rotate(calc(var(--gear-rotation, 0deg) * 1.4)); }
.gear-4  { left: 140px; top: 85px;  width: 124px; height: 124px; transform: rotate(calc(var(--gear-rotation, 0deg) * -1.6)); }
.gear-5  { left: 69px;  top: 163px; width: 93px;  height: 93px;  transform: rotate(calc(var(--gear-rotation, 0deg) * 1.8)); }
.gear-6  { left: 279px; top: 248px; width: 140px; height: 140px; transform: rotate(calc(var(--gear-rotation, 0deg) * -1.3)); }
.gear-7  { left: 364px; top: 287px; width: 93px;  height: 93px;  transform: rotate(calc(var(--gear-rotation, 0deg) * 1.9)); }
.gear-8  { left: 457px; top: 249px; width: 78px;  height: 78px;  transform: rotate(calc(var(--gear-rotation, 0deg) * -2.2)); }
.gear-9  { left: 480px; top: 100px; width: 93px;  height: 93px;  transform: rotate(calc(var(--gear-rotation, 0deg) * 1.7)); }
.gear-10 { left: 566px; top: 131px; width: 62px;  height: 62px;  transform: rotate(calc(var(--gear-rotation, 0deg) * -2.5)); }

/* All real content sits in a .container somewhere on every page, so
   elevating it covers the gear layer everywhere in one rule, because text
   keeps its normal color instead of blending with the gear tint, and
   the gear still shows through genuine empty space (it has no
   background of its own, so nothing gets an unwanted white backing). */

.container {
  position: relative;
  z-index: 2;
}

img,
iframe,
.button {
  position: relative;
  z-index: 2;
}

.hero-media,
.hero-overlay,
.career-media,
.page-head-media {
  z-index: 2;
}.contact {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .robot-arm {
    transform: none !important;
  }

  .gear {
    transform: none !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ===== Referencie 2026: Industrial Editorial ===== */

.page-references {
  --references-surface: #f7f7f3;
  --references-display: var(--font-main);
  background: var(--references-surface);
}

.page-references .site-header {
  background: rgba(255, 255, 255, 0.985);
  border-bottom: 1px solid var(--border);
}

.page-references .header-shell {
  min-height: 104px;
}

.page-references .brand {
  min-height: 100px;
}

.page-references .primary-nav a.is-active {
  color: var(--orange);
}

.page-references .header-cta {
  min-height: 54px;
  padding-inline: 22px;
  color: var(--white);
  background: var(--orange);
}

.page-references .header-cta:hover,
.page-references .header-cta:focus-visible {
  color: var(--white);
  background: var(--navy);
}

.page-references .references-kicker,
.page-references .flagship-kicker {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 0;
  color: var(--navy);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.4;
}

.page-references .references-kicker::before,
.page-references .flagship-kicker::before {
  width: 44px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--orange);
  content: "";
}

.page-references .references-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: 560px;
  overflow: hidden;
  background: var(--references-surface);
  border-bottom: 1px solid var(--border);
}

.page-references .references-hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  grid-row: 1;
  grid-column: 1 / span 6;
  align-items: center;
  min-width: 0;
  background-color: var(--references-surface);
  background-image:
    linear-gradient(rgba(0, 25, 84, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 25, 84, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(0, 25, 84, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 25, 84, 0.025) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}

.page-references .references-hero-copy::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 36px;
  width: 1px;
  background: rgba(0, 25, 84, 0.1);
  content: "";
}

.page-references .references-hero-copy-inner {
  width: 100%;
  max-width: none;
  /* Column is exactly half of the full-bleed grid, so (100% - container/2) equals
     (viewport - container)/2 without the 100vw scrollbar error. */
  padding: 62px clamp(70px, 7vw, 118px) 56px max(var(--gutter), calc(100% - var(--container) / 2));
}

/* The hero photo starts at 5/12 of the viewport while the copy is anchored to the
   1280px container, so the gap between the text and the photo's diagonal shrinks as
   the screen widens and the text ends up under the image. 13% of this column is
   6.5% of the viewport, which keeps a ~30px gap to the diagonal at every width from
   1025px up. The max() keeps the original padding wherever it is already larger. */
@media (min-width: 1025px) {
  .page-references .references-hero-copy-inner {
    padding-right: max(clamp(70px, 7vw, 118px), calc(13% + 30px));
  }
}

.page-references .references-hero-copy-inner > .references-kicker {
  display: none;
}

.page-references .references-hero h1 {
  margin: 30px 0 26px;
  color: var(--navy);
  font-family: var(--references-display);
  font-size: clamp(70px, 6.9vw, 106px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  text-transform: uppercase;
}

.page-references .references-hero h1 span {
  display: block;
}

.page-references .references-hero h1 .references-title-accent {
  margin-top: 0;
  color: var(--orange);
}

.page-references .references-lead {
  max-width: 54ch;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.page-references .references-coordinate {
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.page-references .references-hero-media {
  position: relative;
  z-index: 3;
  grid-row: 1;
  grid-column: 6 / -1;
  min-width: 0;
  min-height: 560px;
  margin: 0;
  overflow: hidden;
  background: var(--navy-deep);
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

/* On desktop the photo used to start at 5/12 of the VIEWPORT while the copy is
   anchored to the 1280px container. Past ~2000px those two references drift apart
   and the headline ends up under the diagonal. Anchoring the photo to the container
   instead keeps the 1440px proportions at every larger width; the max() leaves
   1025-1472px exactly as before. */
@media (min-width: 1025px) {
  .page-references .references-hero-media {
    grid-column: 1 / -1;
    margin-left: max(
      calc(100% * 5 / 12),
      calc((100% - var(--container)) / 2 + var(--container) * 5 / 12)
    );
  }
}

.page-references .references-hero-media::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(0, 25, 84, 0.14), transparent 35%);
  content: "";
  pointer-events: none;
}

.page-references .references-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.page-references .references-hero-media figcaption,
.page-references .flagship-media figcaption {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 20px;
  padding: 8px 10px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(0, 25, 84, 0.82);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.page-references .references-metrics {
  position: relative;
  z-index: 3;
  background: var(--references-surface);
  border-bottom: 1px solid var(--border);
}

.page-references .references-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 154px;
}

.page-references .reference-metric {
  display: grid;
  grid-template-columns: 36px auto 1fr;
  gap: clamp(12px, 1.6vw, 24px);
  align-items: center;
  min-width: 0;
  padding: 30px clamp(18px, 3vw, 48px);
  border-left: 1px solid var(--border);
}

.page-references .reference-metric:first-child {
  padding-left: 0;
  border-left: 0;
}

.page-references .reference-metric:last-child {
  padding-right: 0;
}

.page-references .reference-metric svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: var(--orange);
  stroke-linecap: square;
  stroke-width: 1.6;
}

.page-references .reference-metric strong {
  color: var(--navy);
  font-family: var(--references-display);
  font-size: clamp(48px, 5vw, 66px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.9;
}

.page-references .reference-metric span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.page-references .references-flagship {
  position: relative;
  z-index: 2;
  padding-top: clamp(76px, 8vw, 120px);
  padding-bottom: clamp(76px, 8vw, 120px);
  background: var(--references-surface);
}

.page-references .flagship-shell {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: 710px;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-deep);
}

.page-references .flagship-copy {
  position: relative;
  z-index: 2;
  grid-row: 1;
  grid-column: 1 / span 7;
  min-width: 0;
  padding: clamp(44px, 5vw, 72px) clamp(72px, 7vw, 118px) clamp(42px, 5vw, 68px) clamp(34px, 5vw, 70px);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
}

.page-references .flagship-kicker {
  color: var(--orange);
}

.page-references .flagship-copy h2 {
  margin: 22px 0 28px;
  color: var(--white);
  font-family: var(--references-display);
  font-size: clamp(50px, 5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.94;
}

.page-references .flagship-copy h2 span {
  color: var(--orange);
}

.page-references .flagship-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 34px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.page-references .flagship-meta div {
  min-width: 0;
}

.page-references .flagship-meta dt {
  margin-bottom: 6px;
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-references .flagship-meta dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 600;
}

.page-references .flagship-details {
  display: grid;
}

.page-references .flagship-details article {
  display: grid;
  grid-template-columns: 92px 112px 1fr;
  gap: 18px;
  align-items: start;
  padding: 19px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.page-references .flagship-details article:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.page-references .flagship-details span {
  padding-top: 4px;
  color: var(--orange);
  font-size: 9px;
  letter-spacing: 0.07em;
}

.page-references .flagship-details h3 {
  margin: 0;
  color: var(--white);
  font-family: var(--references-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.page-references .flagship-details p {
  margin: 0;
  color: var(--on-dark);
  font-size: 13px;
  line-height: 1.6;
}

.page-references .flagship-media {
  position: relative;
  z-index: 3;
  grid-row: 1;
  grid-column: 7 / -1;
  min-width: 0;
  min-height: 710px;
  margin: 0;
  overflow: hidden;
  background: var(--navy);
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}

.page-references .flagship-media::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(0, 25, 84, 0.22), transparent 34%);
  content: "";
  pointer-events: none;
}

.page-references .flagship-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.page-references .references-list-section {
  position: relative;
  z-index: 2;
  padding-top: clamp(84px, 9vw, 136px);
  background: var(--white);
}

.page-references .references-section-heading {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: end;
}

.page-references .references-section-heading > div {
  grid-column: 1 / span 8;
}

.page-references .references-section-heading > p {
  grid-column: 9 / -1;
  max-width: 42ch;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.page-references .references-section-heading h2 {
  margin-top: 24px;
  color: var(--navy);
  font-family: var(--references-display);
  font-size: clamp(52px, 5.6vw, 80px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.93;
}

.page-references .references-section-heading h2 span {
  display: block;
  max-width: 100%;
  color: var(--orange);
}

.page-references .references-list {
  margin-top: clamp(56px, 7vw, 92px);
  border-top: 2px solid var(--navy);
}

.page-references .reference-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  min-width: 0;
  padding: clamp(28px, 3.4vw, 46px) 0;
  border-bottom: 1px solid var(--border);
  transition: background-color 220ms ease;
}

.page-references .reference-row:hover {
  background: linear-gradient(90deg, rgba(245, 130, 32, 0.055), transparent 68%);
}

.page-references .reference-row-index {
  grid-column: 1;
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.page-references .reference-row-copy {
  grid-column: 2 / span 7;
  min-width: 0;
}

.page-references .reference-row-copy h3 {
  margin: 0 0 13px;
  color: var(--navy);
  font-family: var(--references-display);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
}

.page-references .reference-row-copy p {
  max-width: 70ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.page-references .reference-row-meta {
  display: flex;
  grid-column: 10 / -1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 24px;
  border-left: 1px solid var(--border);
}

.page-references .reference-row-meta .mono {
  margin-bottom: 14px;
  color: var(--orange);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.page-references .reference-row-meta strong {
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.45;
}

.page-references .reference-row-meta time {
  margin-top: 6px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.page-references .references-note {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  padding-top: 34px;
}

.page-references .references-note span {
  grid-column: 1 / span 3;
  color: var(--orange);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.page-references .references-note p {
  grid-column: 4 / span 6;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.page-references .references-cta {
  position: relative;
  z-index: 2;
  padding: clamp(78px, 8vw, 120px) 0;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-deep);
  border-top: 4px solid var(--orange);
}

.page-references .references-cta::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  content: "";
  -webkit-mask-image: linear-gradient(90deg, black, transparent 78%);
  mask-image: linear-gradient(90deg, black, transparent 78%);
}

.page-references .references-cta-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.page-references .references-cta .references-kicker {
  grid-column: 1 / span 2;
  color: var(--orange);
}

.page-references .references-cta h2 {
  grid-column: 3 / span 6;
  margin: 0;
  color: var(--white);
  font-family: var(--references-display);
  font-size: clamp(48px, 5.2vw, 74px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.96;
}

.page-references .references-cta-grid > div {
  grid-column: 10 / -1;
}

.page-references .references-cta-grid > div > p {
  margin: 0 0 28px;
  color: var(--on-dark);
  font-size: 15px;
  line-height: 1.65;
}

.page-references .references-cta .button-primary {
  width: 100%;
  min-height: 56px;
}

.page-references .references-cta .button-primary:hover,
.page-references .references-cta .button-primary:focus-visible {
  color: var(--navy-deep);
  background: var(--white);
  border-color: var(--white);
}

@media (max-width: 1180px) {
  .page-references .references-hero h1 {
    font-size: clamp(62px, 7vw, 82px);
  }

  .page-references .references-hero-copy-inner {
    /* same diagonal-clearance rule as the >=1025px block above, which this would
       otherwise override between 1025px and 1180px */
    padding-right: max(72px, calc(13% + 30px));
  }

  .page-references .reference-metric {
    grid-template-columns: 28px auto 1fr;
    padding-inline: 24px;
  }

  .page-references .flagship-copy {
    padding-right: 90px;
  }

  .page-references .flagship-details article {
    grid-template-columns: 72px 94px 1fr;
    gap: 14px;
  }
}

@media (max-width: 1024px) {
  .page-references .header-shell {
    min-height: 88px;
  }

  .page-references .brand {
    min-height: 84px;
  }

  .page-references .primary-nav a.is-active {
    color: var(--orange);
  }

  .page-references .references-hero,
  .page-references .references-hero-media {
    min-height: 520px;
  }

  .page-references .references-hero-copy {
    grid-column: 1 / span 7;
  }

  .page-references .references-hero-media {
    grid-column: 7 / -1;
  }

  .page-references .references-hero-copy-inner {
    padding-right: 82px;
  }

  .page-references .references-hero h1 {
    font-size: clamp(58px, 7.2vw, 74px);
  }

  .page-references .references-lead {
    font-size: 14px;
  }

  .page-references .reference-metric {
    grid-template-columns: 1fr;
    gap: 6px;
    align-content: center;
  }

  .page-references .flagship-copy {
    grid-column: 1 / span 8;
    padding-right: 112px;
  }

  .page-references .flagship-media {
    grid-column: 8 / -1;
  }

  .page-references .flagship-details article {
    grid-template-columns: 72px 1fr;
  }

  .page-references .flagship-details p {
    grid-column: 2;
  }

  .page-references .reference-row-copy {
    grid-column: 2 / span 6;
  }

  .page-references .reference-row-meta {
    grid-column: 9 / -1;
  }

  .page-references .references-section-heading > div {
    grid-column: 1 / span 8;
  }

  .page-references .references-section-heading > p {
    grid-column: 9 / -1;
  }

  .page-references .references-cta .references-kicker {
    grid-column: 1 / span 3;
  }

  .page-references .references-cta h2 {
    grid-column: 4 / span 6;
  }

  .page-references .references-cta-grid > div {
    grid-column: 10 / -1;
  }
}

@media (max-width: 768px) {
  .page-references .references-hero {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }

  .page-references .references-hero-copy {
    min-height: 0;
  }

  .page-references .references-hero-copy-inner {
    max-width: none;
    padding: 64px var(--gutter) 52px;
  }

  .page-references .references-hero h1 {
    max-width: 9.5ch;
    margin-top: 26px;
    font-size: clamp(62px, 13vw, 88px);
  }

  .page-references .references-hero-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
    clip-path: none;
  }

  .page-references .references-hero-media figcaption {
    right: 16px;
    bottom: 14px;
  }

  .page-references .references-metrics-grid {
    min-height: 138px;
  }

  .page-references .reference-metric {
    padding: 24px 20px;
  }

  .page-references .reference-metric:first-child {
    padding-left: 0;
  }

  .page-references .reference-metric:last-child {
    padding-right: 0;
  }

  .page-references .reference-metric strong {
    font-size: 48px;
  }

  .page-references .reference-metric span {
    font-size: 12px;
  }

  .page-references .flagship-shell {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }

  .page-references .flagship-copy {
    padding: 48px 40px;
  }

  .page-references .flagship-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
    clip-path: none;
  }

  .page-references .references-section-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-references .references-section-heading > div,
  .page-references .references-section-heading > p {
    grid-column: 1;
    min-width: 0;
  }

  .page-references .references-section-heading > p {
    max-width: 60ch;
    margin-top: 18px;
  }

  .page-references .reference-row {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
  }

  .page-references .reference-row-index {
    grid-column: 1;
  }

  .page-references .reference-row-copy,
  .page-references .reference-row-meta {
    grid-column: 2;
  }

  .page-references .reference-row-meta {
    margin-top: 8px;
    padding: 16px 0 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .page-references .references-note {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
  }

  .page-references .references-note span {
    grid-column: 1 / -1;
  }

  .page-references .references-note p {
    grid-column: 2;
  }

  .page-references .references-cta-grid {
    grid-template-columns: 1fr;
  }

  .page-references .references-cta .references-kicker,
  .page-references .references-cta h2,
  .page-references .references-cta-grid > div {
    grid-column: 1;
  }

  .page-references .references-cta-grid > div {
    max-width: 560px;
    margin-top: 18px;
  }

  .page-references .references-cta .button-primary {
    width: auto;
    min-width: min(100%, 280px);
  }
}

@media (max-width: 560px) {
  .page-references .references-hero-copy-inner {
    padding-top: 52px;
    padding-bottom: 44px;
  }

  .page-references .references-hero-copy::after {
    display: none;
  }

  .page-references .references-hero h1 {
    font-size: clamp(54px, 16vw, 68px);
  }

  .page-references .references-coordinate {
    display: none;
  }

  .page-references .references-hero-media {
    aspect-ratio: 4 / 3;
  }

  .page-references .references-metrics-grid {
    grid-template-columns: 1fr;
    padding: 16px 0;
  }

  .page-references .reference-metric,
  .page-references .reference-metric:first-child,
  .page-references .reference-metric:last-child {
    grid-template-columns: 34px 128px 1fr;
    min-height: 94px;
    padding: 18px 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .page-references .reference-metric:first-child {
    border-top: 0;
  }

  .page-references .reference-metric strong {
    font-size: 42px;
    white-space: nowrap;
  }

  .page-references .reference-metric span {
    font-size: 13px;
  }

  .page-references .flagship-copy {
    padding: 40px 22px;
  }

  .page-references .flagship-copy h2 {
    font-size: 48px;
  }

  .page-references .flagship-meta {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .page-references .flagship-details article {
    grid-template-columns: 1fr;
    gap: 7px;
    padding-block: 22px;
  }

  .page-references .flagship-details p {
    grid-column: 1;
    font-size: 14px;
  }

  .page-references .flagship-media {
    aspect-ratio: 4 / 3;
  }

  .page-references .references-section-heading h2 {
    font-size: 50px;
  }

  .page-references .references-section-heading h2 br {
    display: none;
  }

  .page-references .reference-row-copy h3 {
    font-size: 30px;
  }

  .page-references .references-note p {
    grid-column: 1 / -1;
  }

  .page-references .references-cta h2 {
    font-size: 48px;
  }

  .page-references .references-cta .button-primary {
    width: 100%;
  }
}

/* ===== Site-wide 2026 Industrial Editorial system ===== */

:root {
  --editorial-surface: #f7f7f3;
  --editorial-grid: rgba(0, 25, 84, 0.045);
  --editorial-line: rgba(0, 25, 84, 0.16);
}

body {
  background: var(--editorial-surface);
}

.site-header {
  background: rgba(255, 255, 255, 0.985);
  border-bottom-color: var(--border);
}

.header-shell {
  min-height: 139px;
}

.brand {
  min-height: 133px;
}

.primary-nav a.is-active {
  color: var(--orange);
}

.header-cta {
  min-height: 72px;
  padding-inline: 29px;
  color: var(--white);
  background: var(--orange);
}

.header-cta:hover,
.header-cta:focus-visible {
  color: var(--white);
  background: var(--navy);
}.button,
.header-cta,
.project-controls button,
input,
select,
textarea {
  border-radius: 0;
}

.gear {
  fill: #acc2e6;
  opacity: 0.42;
}

.career {
  --ph-h1: clamp(62px, 6.6vw, 96px);
}

.page-head {
  --ph-h1: clamp(62px, 6.6vw, 96px);
  position: relative;
  display: grid;
  min-height: 500px;
  align-items: center;
  padding-block: clamp(74px, 8vw, 116px);
  overflow: hidden;
  background-color: rgba(247, 247, 243, 0.94);
  background-image:
    linear-gradient(var(--editorial-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--editorial-grid) 1px, transparent 1px),
    linear-gradient(rgba(0, 25, 84, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 25, 84, 0.02) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  border-bottom: 1px solid var(--border);
}

.page-head::after {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(9px, 1vw, 16px);
  height: 44%;
  background: var(--orange);
  content: "";
}

.page-head .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  min-height: calc(var(--ph-h1) * 3.8 + 10px);
}

.page-head-media {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-size: cover;
  background-position: center;
}

.page-head-media::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 25, 84, 0.87) 0%, rgba(0, 25, 84, 0.79) 45%, rgba(0, 25, 84, 0.65) 100%),
    linear-gradient(0deg, rgba(0, 25, 84, 0.5) 0%, transparent 55%);
  content: "";
}

body.page-o-nas .page-head,
body.page-sluzby .page-head,
body.page-projekty .page-head,
body.page-vas-hlas .page-head,
body.page-kontakt .page-head {
  background-image: none;
}

body.page-o-nas .page-head .eyebrow,
body.page-sluzby .page-head .eyebrow,
body.page-projekty .page-head .eyebrow,
body.page-vas-hlas .page-head .eyebrow,
body.page-kontakt .page-head .eyebrow {
  color: var(--orange);
}

body.page-o-nas .page-head h1,
body.page-sluzby .page-head h1,
body.page-projekty .page-head h1,
body.page-vas-hlas .page-head h1,
body.page-kontakt .page-head h1 {
  color: var(--white);
}

body.page-o-nas .page-head .page-lead,
body.page-sluzby .page-head .page-lead,
body.page-projekty .page-head .page-lead,
body.page-vas-hlas .page-head .page-lead,
body.page-kontakt .page-head .page-lead {
  color: var(--white);
  font-weight: 600;
}

body.page-o-nas .page-head-media {
  background-image: url("../hogroup/assets/sekcie/o-nas.jpg");
  background-position: center 30%;
}

body.page-sluzby .page-head-media {
  background-image: url("../hogroup/assets/sekcie/sluzby.jpg");
  background-position: center 42%;
}

body.page-projekty .page-head-media {
  background-image: url("../hogroup/assets/sekcie/galeria.jpg");
  background-position: center 60%;
}

body.page-vas-hlas .page-head-media {
  background-image: url("../hogroup/assets/sekcie/vas-hlas.jpg");
  background-position: center 45%;
}

body.page-kontakt .page-head-media {
  background-image: url("../hogroup/assets/galeria/project-37.jpg");
}

.page-head .eyebrow {
  grid-row: 1;
  grid-column: 1 / span 3;
  align-self: start;
  margin: 10px 0 0;
}

/* All six large display headings on the site (this one, the home hero, the
   references/career/contact heroes, and the career route stat) share this
   uppercase treatment. Originally -0.055em, which read "SPOLU" as "POLUS";
   loosened to -0.02em then -0.01em, both of which still let L/A touch in
   "HLAS" on some renderers; now 0 (normal). Keep all six in sync. */
.page-head h1 {
  grid-row: 1;
  grid-column: 1 / span 6;
  align-self: start;
  max-width: 13ch;
  margin: 0;
  color: var(--navy);
  font-size: var(--ph-h1);
  font-weight: 700;
  letter-spacing: 0em;
  line-height: 1.04;
  text-transform: uppercase;
}

/* No extra margin above the accent line, so every line gap in the heading is the same */
.page-head h1 span {
  display: block;
  margin-top: 0;
}

/* Archivo's "L" has very little right sidebearing and "A" leads with a near-
   vertical stroke, so in "hlas" they read as touching even with the heading's
   uniform tracking all the way at normal (0). Measured via canvas ink extents
   at 100px: the L-A gap sits at 3px versus 16px (H-L) and 5px (A-S); +0.07em
   after just the "l" brings it to ~10px, in line with the neighboring pairs,
   without loosening the rest of the word. */
.page-head h1 .kern-la {
  display: inline;
  margin: 0;
  color: inherit;
  letter-spacing: 0.07em;
}

.page-head .page-lead {
  grid-row: 1;
  grid-column: 7 / -1;
  align-self: start;
  max-width: 44ch;
  margin: 0;
  /* Left padding wider than the grid's own 24px column gap: at these large
     heading sizes 24px reads as cramped against the next column's text,
     e.g. "PREDISKUTUJME" almost touching the quote mark beside it. */
  padding: 22px 0 0 48px;
  border-top: 2px solid var(--orange);
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1.3;
}

body.page-o-nas .page-head .eyebrow,
body.page-sluzby .page-head .eyebrow,
body.page-projekty .page-head .eyebrow,
body.page-vas-hlas .page-head .eyebrow,
body.page-kontakt .page-head .eyebrow {
  display: none;
}

/* Homepage */

.page-home .hero {
  min-height: min(800px, calc(100svh - 139px));
  border-bottom: 0;
}

.page-home .hero-media {
  background-position: center 36%;
}

.page-home .hero-overlay {
  background:
    linear-gradient(90deg, rgba(0, 25, 84, 0.99) 0%, rgba(0, 25, 84, 0.92) 43%, rgba(0, 25, 84, 0.28) 73%, rgba(0, 25, 84, 0.08) 100%),
    linear-gradient(0deg, rgba(0, 25, 84, 0.82) 0%, transparent 47%),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
}

.page-home .hero-grid {
  min-height: min(800px, calc(100svh - 139px));
  padding-bottom: 96px;
}

.page-home .hero-copy {
  max-width: 850px;
  padding-left: clamp(22px, 3vw, 46px);
  border-left: 4px solid var(--orange);
}

.page-home .hero-copy h1 {
  max-width: 13ch;
  margin-bottom: 30px;
  font-size: clamp(56px, 6vw, 88px);
  letter-spacing: 0em;
  line-height: 0.92;
  text-transform: uppercase;
}

.discipline-strip {
  position: relative;
  z-index: 2;
  background: var(--navy-deep);
}

.discipline-grid span {
  min-height: 82px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.section.home-intro {
  position: relative;
  padding-top: clamp(80px, 9vw, 124px);
  padding-bottom: clamp(68px, 8vw, 108px);
  background-color: rgba(247, 247, 243, 0.93);
  background-image:
    linear-gradient(var(--editorial-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--editorial-grid) 1px, transparent 1px);
  background-size: 96px 96px;
  border-bottom: 1px solid var(--border);
}

.home-intro-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: end;
}

.home-intro-grid > div:first-child {
  grid-column: 1 / span 8;
}

.home-intro-grid > div:last-child {
  grid-column: 9 / -1;
  padding-top: 24px;
  border-top: 2px solid var(--orange);
}

.home-intro-grid h2 {
  max-width: 13ch;
  font-size: clamp(52px, 5.6vw, 80px);
  letter-spacing: -0.05em;
  line-height: 0.94;
  text-transform: uppercase;
}

/* German compound nouns (INDUSTRIETECHNOLOGIEN, FUNKTIONSFÄHIGEN) are far longer
   than these ch-based heading boxes, so the text used to spill over the next grid
   column and cover the intro link and the pull quote. Give the German headings a
   box wide enough for the longest word, plus a slightly smaller display size on
   the homepage, where even the full column is too narrow at 80px. Hyphenation
   stays as a safety net for any future, even longer word. Scoped to /de/ so the
   Slovak and English line breaks are untouched. */
html[lang="de"] .home-intro-grid h2,
html[lang="de"] .page-head h1,
html[lang="de"] .page-head .page-lead {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

@media (min-width: 1025px) {
  html[lang="de"] .home-intro-grid h2 {
    max-width: 24ch;
    font-size: clamp(32px, 3.8vw, 62px);
  }
}

@media (min-width: 769px) {
  /* Only the German services headline has words ("Montage", "funktionsfähigen")
     wider than its grid track, which forces mid-word hyphenation across the
     whole heading. A slightly smaller display size keeps every word whole.
     Widened each time the site-wide letter-spacing loosened (-0.055em to
     -0.02em to -0.01em to 0), and the breakpoint dropped from 1025px to 769px
     because the 769-1024px range had no accommodation at all and hit the same
     mid-word break once tracking reached 0. */
  html[lang="de"] body.page-sluzby .page-head h1 {
    max-width: 22ch;
    font-size: clamp(34px, 3.8vw, 56px);
  }
}

.home-stats {
  gap: 0;
  margin-top: clamp(64px, 7vw, 96px);
  padding-top: 0;
  border-top: 2px solid var(--navy);
  border-bottom: 1px solid var(--border);
}

.home-stats .proof-item {
  min-height: 126px;
  padding: 22px 28px;
  border-right: 1px solid var(--border);
}

.home-stats .proof-item:first-child {
  padding-left: 0;
}

.home-stats .proof-item:last-child {
  padding-right: 0;
  border-right: 0;
}

.section.home-nav {
  position: relative;
  padding-top: clamp(76px, 8vw, 112px);
  background: rgba(255, 255, 255, 0.95);
}

.home-nav-grid {
  gap: 0;
  border-top: 2px solid var(--navy);
  border-left: 1px solid var(--border);
}

.home-nav-grid .value-card {
  min-height: 300px;
  padding: clamp(28px, 3vw, 42px);
  background: rgba(247, 247, 243, 0.88);
  border: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.home-nav-grid .value-card.navy {
  background: var(--navy);
}

.home-nav-grid .value-card h3 {
  align-items: end;
  font-size: clamp(24px, 2.2vw, 32px);
}

.home-nav-grid .value-card:hover {
  background: var(--white);
}

.home-nav-grid .value-card.navy:hover {
  background: var(--navy-deep);
}

/* About */

.page-o-nas .about {
  position: relative;
  background: rgba(255, 255, 255, 0.94);
}

/* Váš hlas: the opening statement sits on the left, the explanatory copy and the
   CTA move to the right column, matching the two-column reading order as the homepage
   intro, with the statement set in the o-nas subpage scale so the two subpages
   share one typographic system. */
body.page-vas-hlas .about-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px clamp(40px, 5vw, 88px);
  align-items: start;
}

body.page-vas-hlas .about-copy {
  max-width: none;
  padding-top: 0;
}

body.page-vas-hlas .about-copy-lead {
  grid-column: 1 / span 6;
  padding: 42px 0 0 42px;
  border-top: 2px solid var(--navy);
  border-left: 4px solid var(--orange);
}

body.page-vas-hlas .about-copy-lead .large-copy {
  margin-bottom: 0;
  color: var(--navy);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

body.page-vas-hlas .about-copy-body {
  grid-column: 8 / -1;
  padding-top: 42px;
  border-top: 2px solid var(--orange);
}

body.page-vas-hlas .about-copy-body p:last-of-type {
  margin-bottom: 30px;
}

.page-o-nas .values-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(78px, 9vw, 128px);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.page-o-nas .values-grid > :nth-child(1) {
  grid-column: span 4;
}

.page-o-nas .values-grid > :nth-child(2) {
  grid-column: span 3;
}

.page-o-nas .values-grid > :nth-child(3) {
  grid-column: span 5;
}

.page-o-nas .value-card {
  min-height: 430px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Services */

.page-sluzby .services {
  position: relative;
  background: rgba(247, 247, 243, 0.93);
}

.page-sluzby .service-list {
  border-top: 2px solid var(--navy);
}

.page-sluzby .service-row {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  min-height: 500px;
  padding-block: clamp(46px, 5vw, 72px);
}

.page-sluzby .service-index {
  grid-row: 1;
  grid-column: 1;
  font-size: 12px;
}

.page-sluzby .service-image-wrap {
  grid-row: 1;
  grid-column: 2 / span 5;
  aspect-ratio: 1.22;
  clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
}

.page-sluzby .service-content {
  grid-row: 1;
  grid-column: 8 / -1;
  max-width: none;
}

.page-sluzby .service-row.reverse .service-image-wrap {
  grid-row: 1;
  grid-column: 8 / -1;
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
}

.page-sluzby .service-row.reverse .service-content {
  grid-row: 1;
  grid-column: 2 / span 5;
}

.page-sluzby .service-content h3 {
  font-size: clamp(32px, 3.1vw, 46px);
  letter-spacing: -0.04em;
  line-height: 1;
}

.process-section {
  background-color: var(--navy-deep);
  border-top-width: 6px;
}

.process-copy h2 {
  font-size: clamp(52px, 5.8vw, 82px);
  letter-spacing: -0.05em;
  line-height: 0.94;
  text-transform: uppercase;
}

.process-steps {
  border-top: 2px solid var(--orange);
}

/* Projects */

.page-projekty .projects {
  position: relative;
  background-color: rgba(247, 247, 243, 0.93);
  background-image:
    linear-gradient(var(--editorial-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--editorial-grid) 1px, transparent 1px);
  background-size: 96px 96px;
}

.page-projekty .project-controls button {
  color: var(--white);
  background: var(--orange);
  border-color: var(--orange);
}

.page-projekty .project-controls button:hover,
.page-projekty .project-controls button:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
}

.page-projekty .project-rail {
  gap: 12px;
  margin-top: 36px;
}

.page-projekty .project-card {
  flex-basis: clamp(310px, 33vw, 500px);
  aspect-ratio: 0.94;
  border-top: 4px solid var(--orange);
}

.page-projekty .project-card:nth-child(even) {
  flex-basis: clamp(280px, 28vw, 420px);
}

.page-projekty .project-meta {
  padding: clamp(24px, 3vw, 38px);
}

.page-projekty .project-meta strong {
  font-size: clamp(24px, 2.6vw, 36px);
  letter-spacing: -0.035em;
}

.page-projekty .project-note {
  margin-top: 52px;
  padding-top: 28px;
  border-top: 2px solid var(--navy);
}

/* References: use the shared typography and restore the common gear layer. */

.page-references .references-hero,
.page-references .references-flagship,
.page-references .references-list-section {
  z-index: auto;
}

.page-references .references-hero h1 {
  font-size: clamp(64px, 6.2vw, 92px);
  font-weight: 700;
  letter-spacing: 0em;
  line-height: 0.86;
}

.page-references .references-section-heading h2,
.page-references .flagship-copy h2,
.page-references .references-cta h2 {
  letter-spacing: -0.05em;
}

/* Career */

.page-kariera .career {
  min-height: 780px;
  border-top: 0;
}

.page-kariera .career-media {
  background:
    linear-gradient(90deg, rgba(0, 25, 84, 0.89) 0%, rgba(0, 25, 84, 0.79) 51%, rgba(0, 25, 84, 0.25) 100%),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    url("../hogroup/assets/sekcie/kariera.jpg") center 45% / cover no-repeat;
  background-size: auto, 64px 64px, 64px 64px, cover;
}

.page-kariera .career-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  min-height: 780px;
  align-content: start;
  align-items: start;
  padding-block: calc((650px - (var(--ph-h1) * 3.8 + 10px)) / 2) var(--section-space);
}

.page-kariera .career-card {
  grid-column: 1 / span 6;
  max-width: none;
}

.page-kariera .career-card .eyebrow {
  display: none;
}

.page-kariera .career-card h1 {
  max-width: 12ch;
  margin-bottom: 30px;
  color: var(--white);
  font-size: var(--ph-h1);
  letter-spacing: 0em;
  line-height: 0.92;
  text-transform: uppercase;
}

.page-kariera .career-card h1 span {
  display: block;
  margin-top: 8px;
  color: var(--orange);
}

.page-kariera .career blockquote p {
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 600;
}

.page-kariera .career blockquote {
  grid-column: 7 / -1;
  align-self: start;
  margin-bottom: 0;
  padding: 18px 0 0 24px;
}

/* Contact and team */

.page-kontakt .contact {
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  border-top: 6px solid var(--orange);
}

.page-kontakt .contact-heading {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: end;
}

.page-kontakt .contact-heading .eyebrow {
  grid-column: 1 / span 3;
}

.page-kontakt .contact-heading h1 {
  grid-column: 1 / span 9;
  max-width: 12ch;
  margin: 40px 0 0;
  color: var(--white);
  font-size: clamp(58px, 6.5vw, 92px);
  letter-spacing: 0em;
  line-height: 0.92;
  text-transform: uppercase;
}

.page-kontakt .contact-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

.page-kontakt .contact-grid > .contact-details {
  grid-column: 1 / span 5;
  padding-right: clamp(24px, 4vw, 60px);
}

.page-kontakt .contact-form,
.page-kontakt .contact-map {
  grid-column: 7 / -1;
}

.page-kontakt .contact-form {
  padding: clamp(30px, 4vw, 52px);
  background: rgba(255, 255, 255, 0.045);
  border-top: 2px solid var(--orange);
}

.page-kontakt .contact-visit {
  margin-top: clamp(70px, 8vw, 110px);
  padding-bottom: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.page-kontakt .team {
  position: relative;
  background: rgba(247, 247, 243, 0.94);
}

.page-kontakt .team-heading {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

.page-kontakt .team-heading > div {
  grid-column: 1 / span 8;
}

.page-kontakt .team-heading > p {
  grid-column: 9 / -1;
  padding-top: 22px;
  border-top: 2px solid var(--orange);
}

.page-kontakt .team-heading h2 {
  max-width: 13ch;
  font-size: clamp(50px, 5.4vw, 78px);
  letter-spacing: -0.05em;
  line-height: 0.95;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .page-references .gear-bg {
    display: block;
  }
}

@media (max-width: 1180px) {
  .page-head h1 {
    grid-column: 1 / span 9;
  }

  .page-head .page-lead {
    grid-column: 9 / -1;
  }

  .page-home .hero-copy h1 {
    font-size: clamp(52px, 6.4vw, 74px);
  }
}

@media (max-width: 1024px) {
  .header-shell,
  .page-references .header-shell {
    min-height: 88px;
  }

  .brand,
  .page-references .brand {
    min-height: 84px;
  }

  .page-head {
    min-height: 440px;
  }

  .page-home .hero,
  .page-home .hero-grid {
    min-height: min(760px, calc(100svh - 88px));
  }

  .page-sluzby .service-row {
    min-height: 450px;
  }

  .page-kariera .career-card {
    grid-column: 1 / span 8;
  }

  .page-kariera .career blockquote {
    grid-column: 9 / -1;
  }
}

@media (max-width: 768px) {
  .page-head {
    min-height: 0;
    padding-block: 64px 56px;
    background-size: 72px 72px, 72px 72px, 24px 24px, 24px 24px;
  }

  .page-head .container {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .page-head .eyebrow,
  .page-head h1,
  .page-head .page-lead {
    grid-row: auto;
    grid-column: 1;
  }

  .page-head .eyebrow {
    margin: 0;
  }

  .page-head h1 {
    max-width: 12ch;
    margin-top: 34px;
    font-size: clamp(48px, 12vw, 68px);
    line-height: 0.92;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .page-head .page-lead {
    max-width: 58ch;
    margin-top: 32px;
    padding-left: 0;
  }

  .page-home .hero-copy {
    padding-left: 24px;
  }

  .page-home .hero-copy h1 {
    font-size: clamp(46px, 10vw, 64px);
  }

  .home-intro-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .home-intro-grid > div:first-child,
  .home-intro-grid > div:last-child {
    grid-column: 1;
  }

  .home-intro-grid h2 {
    font-size: clamp(44px, 9vw, 62px);
  }

  .home-nav-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.page-vas-hlas .about-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  body.page-vas-hlas .about-copy-lead {
    grid-column: 1;
    padding: 28px 0 0 24px;
  }

  body.page-vas-hlas .about-copy-body {
    grid-column: 1;
    padding-top: 26px;
  }

  .page-o-nas .values-grid {
    grid-template-columns: 1fr 1fr;
  }

  .page-o-nas .values-grid > :nth-child(1),
  .page-o-nas .values-grid > :nth-child(2) {
    grid-column: span 1;
  }

  .page-o-nas .values-grid > :nth-child(3) {
    grid-column: 1 / -1;
  }

  .page-o-nas .value-card {
    min-height: 340px;
  }

  .page-sluzby .service-row,
  .page-sluzby .service-row.reverse {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
  }

  .page-sluzby .service-index {
    grid-row: 1;
    grid-column: 1;
  }

  .page-sluzby .service-image-wrap,
  .page-sluzby .service-row.reverse .service-image-wrap {
    grid-row: 1;
    grid-column: 2;
    clip-path: none;
  }

  .page-sluzby .service-content,
  .page-sluzby .service-row.reverse .service-content {
    grid-row: 2;
    grid-column: 2;
  }

  .page-projekty .project-card,
  .page-projekty .project-card:nth-child(even) {
    flex-basis: min(82vw, 430px);
  }

  .page-kariera .career-grid {
    display: flex;
    min-height: 760px;
    flex-direction: column;
    justify-content: flex-end;
  }

  .page-kariera .career-card {
    width: 100%;
  }

  .page-kariera .career blockquote {
    max-width: 580px;
  }

  .page-kontakt .contact-heading,
  .page-kontakt .contact-grid,
  .page-kontakt .team-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-kontakt .contact-heading .eyebrow,
  .page-kontakt .contact-heading h1,
  .page-kontakt .contact-grid > .contact-details,
  .page-kontakt .contact-form,
  .page-kontakt .contact-map,
  .page-kontakt .team-heading > div,
  .page-kontakt .team-heading > p {
    grid-column: 1;
  }

  .page-kontakt .contact-heading h1 {
    font-size: clamp(48px, 12vw, 68px);
  }

  .page-kontakt .contact-grid > .contact-details {
    padding-right: 0;
  }

  .page-kontakt .team-heading > p {
    margin-top: 30px;
  }
}

@media (max-width: 560px) {
  .page-head {
    padding-block: 52px 48px;
  }

  .page-head h1 {
    font-size: clamp(43px, 13vw, 58px);
  }

  .page-home .hero-copy {
    padding-left: 18px;
  }

  .page-home .hero-copy h1 {
    font-size: clamp(40px, 11vw, 52px);
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .page-home .hero-lead {
    font-size: 17px;
  }

  .home-stats {
    grid-template-columns: 1fr;
  }

  .home-stats .proof-item,
  .home-stats .proof-item:first-child,
  .home-stats .proof-item:last-child {
    min-height: 104px;
    padding-inline: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .home-nav-grid {
    grid-template-columns: 1fr;
  }

  .home-nav-grid .value-card {
    min-height: 230px;
  }

  .page-o-nas .values-grid {
    grid-template-columns: 1fr;
  }

  .page-o-nas .values-grid > :nth-child(1),
  .page-o-nas .values-grid > :nth-child(2),
  .page-o-nas .values-grid > :nth-child(3) {
    grid-column: 1;
  }

  .page-o-nas .value-card {
    min-height: 300px;
  }

  .page-sluzby .service-row,
  .page-sluzby .service-row.reverse {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .page-sluzby .service-content h3 {
    font-size: 30px;
  }

  .page-kariera .career-card h1 {
    font-size: clamp(43px, 13vw, 58px);
  }

  .page-kontakt .contact-heading h1 {
    font-size: clamp(38px, 10vw, 48px);
  }

  .page-kontakt .team-heading h2 {
    font-size: clamp(38px, 10vw, 48px);
  }

  .page-kontakt .contact-form {
    padding: 26px 20px;
  }

  .page-kontakt .team-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Career: People gateway ===== */

.page-kariera .people-gateway {
  position: relative;
  overflow: hidden;
  background-color: var(--editorial-surface);
  background-image:
    linear-gradient(var(--editorial-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--editorial-grid) 1px, transparent 1px),
    linear-gradient(rgba(0, 25, 84, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 25, 84, 0.02) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  border-top: 6px solid var(--orange);
}

.page-kariera .people-gateway::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(var(--gutter), calc((100% - var(--container)) / 2));
  width: 1px;
  background: rgba(0, 25, 84, 0.1);
  content: "";
}

.page-kariera .people-gateway-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  padding-block: clamp(88px, 10vw, 148px);
}

.page-kariera .people-gateway-intro {
  position: sticky;
  top: 136px;
  grid-column: 1 / span 4;
  min-height: 650px;
  padding: 10px clamp(24px, 3vw, 48px) 0 0;
}

.page-kariera .people-gateway-code {
  margin: 0 0 clamp(58px, 7vw, 92px);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.page-kariera .people-gateway-intro .eyebrow {
  margin-bottom: 28px;
}

.page-kariera .people-gateway-intro h2 {
  max-width: 8ch;
  margin: 0;
  font-size: clamp(52px, 5.5vw, 82px);
  letter-spacing: -0.06em;
  line-height: 0.88;
  text-transform: uppercase;
}

.page-kariera .people-gateway-intro h2 span {
  color: var(--orange);
}

/* Below 1280px the decorative gear badge is at its largest relative to the text
   column (and under 1181px .people-gateway-intro also drops its right padding), so
   the last line of the lead can print under the "H&O" badge, so keep it clear. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .page-kariera .people-gateway-lead {
    padding-right: 104px;
  }
}

.page-kariera .people-gateway-lead {
  max-width: 30ch;
  margin: 34px 0 0;
  padding-top: 20px;
  color: var(--muted);
  border-top: 2px solid var(--navy);
  font-size: 16px;
}

.page-kariera .people-gateway-gear {
  position: absolute;
  right: -30px;
  bottom: 0;
  width: clamp(180px, 18vw, 270px);
  aspect-ratio: 1;
  color: var(--navy);
}

.page-kariera .people-gateway-gear svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(0, 25, 84, 0.18);
  stroke-width: 1.25;
  transform: rotate(calc(var(--gear-rotation, 0deg) * -0.45));
  transform-origin: 50% 50%;
  will-change: transform;
}

.page-kariera .people-gateway-gear-core {
  position: absolute;
  inset: 37%;
  display: grid;
  place-items: center;
  color: var(--navy);
  border: 1px solid rgba(0, 25, 84, 0.25);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.page-kariera .people-gateway-gear-index {
  position: absolute;
  right: -12px;
  bottom: 12px;
  padding: 7px 9px;
  color: var(--white);
  background: var(--navy);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.page-kariera .people-gateway-routes {
  grid-column: 5 / -1;
  border-top: 2px solid var(--navy);
  border-left: 1px solid var(--editorial-line);
}

.page-kariera .people-route {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(150px, 0.42fr);
  grid-template-rows: 1fr auto;
  gap: 24px;
  min-height: 260px;
  padding: clamp(30px, 4vw, 54px);
  overflow: hidden;
  border-right: 1px solid var(--editorial-line);
  border-bottom: 1px solid var(--editorial-line);
  isolation: isolate;
  transition:
    background-color 240ms var(--ease),
    color 240ms var(--ease),
    transform 240ms var(--ease);
}

.page-kariera .people-route::before {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: var(--orange);
  content: "";
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 260ms var(--ease);
}

.page-kariera .people-route:hover,
.page-kariera .people-route:focus-visible {
  transform: translateX(8px);
}

.page-kariera .people-route:hover::before,
.page-kariera .people-route:focus-visible::before {
  transform: scaleY(1);
}

.page-kariera .people-route-index {
  grid-row: 1 / -1;
  grid-column: 1;
  padding-top: 4px;
  color: var(--orange);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.page-kariera .people-route-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-self: start;
}

.page-kariera .people-route-label {
  margin-bottom: 24px;
  color: currentColor;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.13em;
  opacity: 0.72;
  text-transform: uppercase;
}

.page-kariera .people-route-copy strong {
  max-width: 12ch;
  font-size: clamp(34px, 3.7vw, 56px);
  letter-spacing: 0em;
  line-height: 0.94;
}

.page-kariera .people-route-meta {
  margin-top: 24px;
  font-size: 13px;
  opacity: 0.68;
}

.page-kariera .people-route-icon {
  grid-row: 1;
  grid-column: 3;
  align-self: start;
  justify-self: end;
  width: clamp(72px, 8vw, 112px);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.5;
  opacity: 0.5;
}

.page-kariera .people-route-action {
  display: flex;
  grid-row: 2;
  grid-column: 2 / -1;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
  align-self: end;
  min-height: 52px;
  padding: 12px 14px;
  border-top: 1px solid currentColor;
  font-size: 13px;
  font-weight: 600;
}

.page-kariera .people-route-action > span {
  font-size: 20px;
  line-height: 1;
  transition: transform 220ms var(--ease);
}

.page-kariera .people-route:hover .people-route-action > span,
.page-kariera .people-route:focus-visible .people-route-action > span {
  transform: translate(3px, -3px);
}

.page-kariera .people-route-employee {
  min-height: 300px;
  color: var(--white);
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  border-color: rgba(255, 255, 255, 0.16);
}

.page-kariera .people-route-employee:hover,
.page-kariera .people-route-employee:focus-visible {
  background-color: #062566;
}

.page-kariera .people-route-employee .people-route-action {
  color: var(--navy);
  background: var(--orange);
  border-top: 0;
}

.page-kariera .people-route-career {
  min-height: 390px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.96);
}

.page-kariera .people-route-career:hover,
.page-kariera .people-route-career:focus-visible {
  background: var(--white);
}

.page-kariera .people-route-career .people-route-copy {
  grid-row: 1;
  grid-column: 2;
}

.page-kariera .people-route-board {
  display: grid;
  grid-row: 1;
  grid-column: 3;
  gap: 0;
  align-self: end;
  min-width: 220px;
  border-top: 2px solid var(--navy);
}

.page-kariera .people-route-board > span {
  display: grid;
  grid-template-columns: 36px 1fr 18px;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  border-bottom: 1px solid var(--editorial-line);
  font-size: 12px;
}

.page-kariera .people-route-board b {
  color: var(--orange);
  font-size: 9px;
  font-weight: 500;
}

.page-kariera .people-route-board i {
  color: var(--orange);
  font-size: 17px;
  font-style: normal;
}

.page-kariera .people-route-career .people-route-action {
  color: var(--white);
  background: var(--orange);
  border-top: 0;
}

.page-kariera .people-route-business {
  min-height: 260px;
  color: var(--navy);
  background: var(--orange);
}

.page-kariera .people-route-business::before {
  background: var(--navy);
}

.page-kariera .people-route-business:hover,
.page-kariera .people-route-business:focus-visible {
  background: #ff932f;
}

.page-kariera .people-route-business .people-route-action {
  color: var(--white);
  background: var(--navy);
  border-top: 0;
}

.page-kariera .people-route.people-route-disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.82;
}

@media (max-width: 1180px) {
  .page-kariera .people-gateway-intro {
    grid-column: 1 / span 4;
  }

  .page-kariera .people-gateway-routes {
    grid-column: 5 / -1;
  }

  .page-kariera .people-route {
    grid-template-columns: 50px minmax(0, 1fr) minmax(140px, 0.38fr);
    gap: 18px;
    padding: 38px 32px;
  }
}

@media (max-width: 1024px) {
  .page-kariera .people-gateway-grid {
    gap: 16px;
  }

  .page-kariera .people-gateway-intro {
    grid-column: 1 / span 5;
  }

  .page-kariera .people-gateway-routes {
    grid-column: 6 / -1;
  }

  .page-kariera .people-route {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .page-kariera .people-route-icon,
  .page-kariera .people-route-board {
    grid-row: auto;
    grid-column: 2;
    justify-self: stretch;
  }

  .page-kariera .people-route-icon {
    display: none;
  }

  .page-kariera .people-route-action {
    grid-column: 2;
  }
}

@media (max-width: 768px) {
  .page-kariera .people-gateway-grid {
    display: block;
    padding-block: 72px;
  }

  .page-kariera .people-gateway-intro {
    position: relative;
    top: auto;
    min-height: 470px;
    padding-right: 0;
  }

  .page-kariera .people-gateway-code {
    margin-bottom: 52px;
  }

  .page-kariera .people-gateway-intro h2 {
    max-width: 9ch;
  }

  .page-kariera .people-gateway-gear {
    right: -20px;
    bottom: 16px;
    width: 210px;
  }

  .page-kariera .people-gateway-routes {
    margin-top: 54px;
  }

  .page-kariera .people-route {
    min-height: 300px;
    padding: 34px 26px;
  }

  .page-kariera .people-route-career {
    min-height: 410px;
  }
}

@media (max-width: 560px) {
  .page-kariera .people-gateway-grid {
    width: min(100% - 32px, var(--container));
  }

  .page-kariera .people-gateway-intro {
    min-height: 430px;
  }

  .page-kariera .people-gateway-intro h2 {
    font-size: clamp(44px, 14vw, 62px);
  }

  .page-kariera .people-gateway-gear {
    width: 180px;
    opacity: 0.8;
  }

  .page-kariera .people-gateway-gear-index {
    right: 14px;
  }

  .page-kariera .people-route {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 30px 20px;
  }

  .page-kariera .people-route-copy strong {
    font-size: clamp(31px, 9.5vw, 42px);
  }

  .page-kariera .people-route-meta {
    font-size: 11px;
    line-height: 1.6;
  }

  .page-kariera .people-route-board {
    min-width: 0;
  }

  .page-kariera .people-route-action {
    padding-inline: 14px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-kariera .people-gateway-gear svg,
  .page-kariera .people-route,
  .page-kariera .people-route::before,
  .page-kariera .people-route-action > span {
    transition: none;
    transform: none;
  }
}

/* ===== Career: Open positions ===== */

.page-kariera .open-positions {
  position: relative;
  z-index: 2;
  overflow: hidden;
  color: var(--white);
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: 64px 64px;
  border-top: 6px solid var(--orange);
}

.page-kariera .open-positions::after {
  position: absolute;
  right: -110px;
  bottom: -220px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 54px rgba(255, 255, 255, 0.018),
    0 0 0 108px rgba(255, 255, 255, 0.012);
  content: "";
  pointer-events: none;
}

.page-kariera .open-positions-grid {
  position: relative;
  z-index: 1;
  padding-block: clamp(64px, 7vw, 104px);
}

.page-kariera .open-positions-intro {
  display: block;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.page-kariera .open-positions-code {
  margin: 0 0 clamp(54px, 6vw, 78px);
  color: rgba(255, 255, 255, 0.46);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.page-kariera .open-positions-intro .eyebrow {
  margin-bottom: 26px;
}

.page-kariera .open-positions-intro h2 {
  max-width: 8ch;
  margin: 0;
  color: var(--white);
  font-size: clamp(48px, 5vw, 74px);
  letter-spacing: -0.06em;
  line-height: 0.92;
  text-transform: uppercase;
}

.page-kariera .open-positions-intro > p:not(.eyebrow, .open-positions-code) {
  max-width: 34ch;
  margin: 34px 0 0;
  padding-top: 20px;
  color: var(--on-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.32);
}

.page-kariera .open-positions-count {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 44px;
}

.page-kariera .open-positions-count strong {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  color: var(--navy);
  background: var(--orange);
  font-size: 24px;
  font-weight: 500;
}

.page-kariera .open-positions-count span {
  color: var(--on-dark);
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.page-kariera .job-opening {
  display: grid;
  grid-template-columns: 1fr 340px;
  color: var(--ink);
  background: var(--white);
  border-top: 4px solid var(--orange);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}

.page-kariera .job-opening-main {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}

.page-kariera .job-opening-aside {
  display: flex;
  flex-direction: column;
}

.page-kariera .job-opening-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  padding: clamp(24px, 2.8vw, 40px) clamp(28px, 3.5vw, 48px);
  color: var(--white);
  background: #062566;
}

.page-kariera .job-opening-status,
.page-kariera .job-opening-sector {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-kariera .job-opening-status {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 14px;
  color: var(--orange);
}

.page-kariera .job-opening-status span {
  width: 8px;
  height: 8px;
  background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(245, 130, 32, 0.14);
}

.page-kariera .job-opening-sector {
  margin-bottom: 14px;
  color: var(--on-dark-muted);
}

.page-kariera .job-opening-head h3 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(28px, 3vw, 46px);
  letter-spacing: -0.05em;
  line-height: 0.95;
  text-transform: uppercase;
}

.page-kariera .job-opening-index {
  color: rgba(255, 255, 255, 0.24);
  font-size: clamp(60px, 8vw, 112px);
  letter-spacing: -0.08em;
  line-height: 0.8;
}

.page-kariera .job-opening-visual {
  position: relative;
  flex: 1;
  margin: 0;
  overflow: hidden;
  background: #062566;
  isolation: isolate;
}

.page-kariera .job-opening-visual::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 48%, rgba(0, 14, 49, 0.82) 100%),
    linear-gradient(90deg, rgba(0, 25, 84, 0.16), transparent 55%);
  content: "";
  pointer-events: none;
}

.page-kariera .job-opening-visual img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-kariera .job-opening-visual figcaption {
  position: absolute;
  z-index: 2;
  top: clamp(18px, 2.4vw, 28px);
  right: clamp(20px, 3vw, 36px);
  bottom: auto;
  left: auto;
  max-width: calc(100% - 40px);
  padding: 7px 10px;
  color: var(--white);
  background: rgba(0, 25, 84, 0.82);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-transform: uppercase;
}

.page-kariera .job-opening-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-bottom: 1px solid var(--border);
}

.page-kariera .job-opening-facts > div {
  min-height: 0;
  padding: 20px 22px;
  border-right: 1px solid var(--border);
}

.page-kariera .job-opening-facts > div:last-child {
  border-right: 0;
}

.page-kariera .job-opening-facts dt {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-kariera .job-opening-facts dd {
  margin: 0;
  color: var(--navy);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.page-kariera .job-opening-facts dd small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}

.page-kariera .job-opening-summary {
  padding: clamp(14px, 1.6vw, 22px) clamp(24px, 3vw, 48px);
  border-bottom: 1px solid var(--border);
}

.page-kariera .job-opening-summary > p {
  max-width: 62ch;
  margin: 0;
  color: #344055;
  font-size: 17px;
  line-height: 1.7;
}

.page-kariera .job-opening-earning {
  padding: 24px 28px;
  color: var(--white);
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-kariera .job-opening-earning span,
.page-kariera .job-opening-earning small {
  display: block;
}

.page-kariera .job-opening-earning span {
  margin-bottom: 10px;
  color: var(--on-dark-muted);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-kariera .job-opening-earning strong {
  display: block;
  color: var(--orange);
  font-size: clamp(28px, 2.8vw, 42px);
  letter-spacing: -0.06em;
  line-height: 1;
}

.page-kariera .job-opening-earning small {
  margin-top: 6px;
  color: var(--on-dark-muted);
  font-size: 11px;
}

.page-kariera .job-opening-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
}

.page-kariera .job-opening-detail-grid section {
  padding: clamp(16px, 1.8vw, 24px) clamp(24px, 3vw, 48px);
}

.page-kariera .job-opening-detail-grid section + section {
  border-left: 1px solid var(--border);
}

.page-kariera .job-opening-detail-grid h4 {
  margin: 0 0 14px;
  color: var(--navy);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-kariera .job-opening-detail-grid ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-kariera .job-opening-detail-grid li {
  position: relative;
  padding-left: 18px;
  color: #344055;
  font-size: 14px;
  line-height: 1.4;
}

.page-kariera .job-opening-detail-grid li::before {
  position: absolute;
  top: 0.68em;
  left: 0;
  width: 8px;
  height: 2px;
  background: var(--orange);
  content: "";
}

.page-kariera .job-opening-footer {
  display: grid;
  grid-template-columns: minmax(190px, 0.55fr) minmax(0, 1.45fr);
  gap: 24px;
  align-items: center;
  padding: clamp(18px, 2vw, 28px) clamp(24px, 3vw, 48px);
}

.page-kariera .job-opening-contact {
  display: grid;
  gap: 4px;
}

.page-kariera .job-opening-contact > span {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-kariera .job-opening-contact strong {
  color: var(--navy);
  font-size: 17px;
}

.page-kariera .job-opening-contact a {
  color: var(--muted);
  font-size: 14px;
}

.page-kariera .job-opening-contact a:hover {
  color: var(--orange);
}

.page-kariera .job-opening-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.page-kariera .job-opening-link {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 15px 18px;
  font-size: 13px;
  font-weight: 600;
  transition:
    color 220ms var(--ease),
    background-color 220ms var(--ease),
    transform 220ms var(--ease);
}

.page-kariera .job-opening-link:hover,
.page-kariera .job-opening-link:focus-visible {
  transform: translateY(-3px);
}

.page-kariera .job-opening-link-secondary {
  color: var(--navy);
  border: 1px solid var(--navy);
}

.page-kariera .job-opening-link-secondary:hover,
.page-kariera .job-opening-link-secondary:focus-visible {
  color: var(--white);
  background: var(--navy);
}

.page-kariera .job-opening-link-primary {
  color: var(--white);
  background: var(--orange);
}

.page-kariera .job-opening-link-primary:hover,
.page-kariera .job-opening-link-primary:focus-visible {
  background: #dd6e0e;
}

@media (max-width: 1180px) {
  .page-kariera .open-positions-intro {
    grid-column: 1 / span 4;
  }

  .page-kariera .job-opening {
    grid-column: 5 / -1;
  }

  .page-kariera .job-opening-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-kariera .job-opening-facts > div:nth-child(2) {
    border-right: 0;
  }

  .page-kariera .job-opening-facts > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .page-kariera .job-opening-summary {
    grid-template-columns: 1fr;
  }

  .page-kariera .job-opening-earning {
    max-width: 300px;
  }
}

@media (max-width: 900px) {
  .page-kariera .open-positions-grid {
    display: block;
    padding-block: 76px;
  }

  .page-kariera .open-positions-intro {
    position: relative;
    top: auto;
    max-width: 620px;
    padding-right: 0;
  }

  .page-kariera .job-opening {
    margin-top: 64px;
    grid-template-columns: minmax(0, 1fr);
  }

  .page-kariera .job-opening-main {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 640px) {
  .page-kariera .open-positions-grid {
    width: min(100% - 32px, var(--container));
    padding-block: 64px;
  }

  .page-kariera .open-positions-code {
    margin-bottom: 48px;
  }

  .page-kariera .open-positions-intro h2 {
    font-size: clamp(42px, 13vw, 58px);
  }

  .page-kariera .job-opening {
    margin-top: 48px;
  }

  .page-kariera .job-opening-head {
    grid-template-columns: minmax(0, 1fr);
    padding: 30px 22px 34px;
  }

  .page-kariera .job-opening-head h3 {
    font-size: clamp(38px, 12vw, 50px);
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .page-kariera .job-opening-index {
    display: none;
  }

  .page-kariera .job-opening-visual {
    aspect-ratio: 4 / 3;
  }

  .page-kariera .job-opening-visual img {
    object-position: center;
  }

  .page-kariera .job-opening-visual figcaption {
    font-size: 8px;
  }

  .page-kariera .job-opening-facts {
    grid-template-columns: 1fr 1fr;
  }

  .page-kariera .job-opening-facts > div {
    min-height: 132px;
    padding: 22px 18px;
  }

  .page-kariera .job-opening-facts dd {
    font-size: 21px;
  }

  .page-kariera .job-opening-summary {
    gap: 28px;
    padding: 30px 22px;
  }

  .page-kariera .job-opening-summary > p {
    font-size: 15px;
  }

  .page-kariera .job-opening-earning {
    max-width: none;
  }

  .page-kariera .job-opening-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-kariera .job-opening-detail-grid section {
    padding: 32px 22px;
  }

  .page-kariera .job-opening-detail-grid section + section {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .page-kariera .job-opening-footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 30px 22px;
  }

  .page-kariera .job-opening-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-kariera .job-opening-link {
    min-height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-kariera .job-opening-link {
    transition: none;
    transform: none;
  }
}

/* ── Job teaser card ── */
.job-teaser {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  width: 100%;
  padding: clamp(28px, 3.5vw, 44px) clamp(28px, 3.5vw, 48px);
  background: var(--white);
  color: var(--navy);
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.2s ease;
}
.job-teaser:hover {
  box-shadow: inset 0 0 0 4px var(--orange);
}
.job-teaser:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
}
.job-teaser-main { flex: 1; }
.job-teaser-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  margin-bottom: 14px;
}
.job-teaser-status {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.job-teaser-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
  animation: teaser-pulse 2s ease infinite;
}
@keyframes teaser-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.job-teaser-sector {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.job-teaser h3 {
  margin: 0 0 20px;
  font-size: clamp(22px, 2.6vw, 36px);
  color: var(--navy);
  font-weight: 700;
}
.job-teaser-facts {
  display: flex;
  gap: clamp(20px, 3.5vw, 52px);
  flex-wrap: wrap;
}
.job-teaser-facts dt {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.job-teaser-facts dd {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
}
.job-teaser-facts dd small {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 2px;
}
.job-teaser-cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  background: var(--orange);
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: background 0.2s;
}
.job-teaser:hover .job-teaser-cta { background: #dd6e0e; }

@media (max-width: 640px) {
  .job-teaser { flex-direction: column; align-items: flex-start; }
  .job-teaser-cta { align-self: stretch; justify-content: center; }
}

/* ── Job dialog ── */
.job-dialog {
  width: min(1180px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  max-width: none;
  padding: 0;
  overflow-y: auto;
  border: 0;
  color: var(--navy);
}
.job-dialog::backdrop {
  background: rgba(0, 25, 84, 0.9);
  backdrop-filter: blur(8px);
}
.job-dialog-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 0;
  overflow: visible;
  display: flex;
  justify-content: flex-end;
}
.job-dialog-close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 14px 14px 0 0;
  font-size: 28px;
  line-height: 1;
  color: var(--white);
  background: rgba(0, 25, 84, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
.job-dialog-close:hover { background: var(--navy); }

.page-kariera button.people-route {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-right: 1px solid var(--editorial-line);
  border-bottom: 1px solid var(--editorial-line);
}

.application-dialog {
  width: min(560px, calc(100% - 32px));
}

.application-form-wrap {
  padding: clamp(30px, 4vw, 54px);
}

.application-form-wrap .eyebrow {
  margin-bottom: 8px;
}

.application-form-wrap h3 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3vw, 34px);
}

.application-form-lead {
  margin: 0 0 28px;
  color: var(--muted);
}

.application-form {
  display: grid;
  gap: 20px;
}

.application-form .field label {
  color: var(--muted);
}

.application-form .field input {
  color: var(--ink);
  border-bottom-color: var(--border);
}

.application-form .form-status {
  color: var(--muted);
}

/* ===== Homepage first-viewport fit ===== */

@media (min-width: 1025px) {
  .page-home {
    --header-shell-height: 182px;
    --home-header-height: 238px;
  }

  .page-home .header-shell {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 24px;
    min-height: var(--header-shell-height);
  }

  .page-home .brand {
    width: clamp(158px, 10.5vw, 186px);
    min-height: calc(var(--header-shell-height) - 4px);
  }

  .page-home .brand img {
    width: 100%;
  }

  .page-home .header-cta {
    min-height: 66px;
    padding-inline: 27px;
  }

  .page-home .hero,
  .page-home .hero-grid {
    height: min(800px, calc(100dvh - var(--home-header-height) - 1px));
    min-height: min(640px, calc(100dvh - var(--home-header-height) - 1px));
  }

  .page-home .hero-grid {
    align-items: center;
    padding-top: clamp(38px, 7dvh, 72px);
    padding-bottom: clamp(86px, 11dvh, 112px);
  }

  .page-home .hero-copy {
    max-width: 860px;
    padding-left: clamp(24px, 2.5vw, 38px);
  }

  .page-home .hero-copy h1 {
    max-width: 13ch;
    margin-bottom: clamp(18px, 2.4dvh, 24px);
    font-size: clamp(50px, min(5.2vw, 8dvh), 78px);
    line-height: 0.9;
  }

  .page-home .hero-lead {
    max-width: 660px;
    margin-bottom: clamp(20px, 2.8dvh, 28px);
    font-size: clamp(16px, min(1.35vw, 2.5dvh), 20px);
    line-height: 1.45;
  }

  .page-home .hero-actions .button {
    min-height: 50px;
    padding-block: 11px;
  }

  .page-home .hero-bottom-inner {
    min-height: clamp(58px, 7dvh, 66px);
  }
}

@media (min-width: 1025px) and (max-height: 760px) {
  .page-home {
    --header-shell-height: 152px;
    --home-header-height: 202px;
  }

  .page-home .header-shell {
    min-height: var(--header-shell-height);
  }

  .page-home .brand {
    width: 150px;
    min-height: 104px;
  }

  .page-home .header-cta {
    min-height: 64px;
  }

  .page-home .hero,
  .page-home .hero-grid {
    min-height: calc(100dvh - var(--home-header-height) - 1px);
  }

  .page-home .hero-grid {
    padding-top: 24px;
    padding-bottom: 74px;
  }

  .page-home .hero-copy h1 {
    margin-bottom: 16px;
    font-size: clamp(46px, min(4.8vw, 7.4dvh), 62px);
  }

  .page-home .hero-lead {
    margin-bottom: 18px;
    font-size: 16px;
  }

  .page-home .hero-bottom-inner {
    min-height: 56px;
  }
}

/* ===== Shared first-viewport fit for subpages ===== */

@media (min-width: 1025px) {
  body {
    --header-shell-height: 182px;
    --site-header-height: 238px;
  }

  .site-header .header-shell {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 24px;
    min-height: var(--header-shell-height);
  }

  .site-header .brand {
    width: clamp(158px, 10.5vw, 186px);
    min-height: calc(var(--header-shell-height) - 4px);
  }

  .site-header .brand img {
    width: 100%;
  }

  .site-header .header-cta {
    min-height: 66px;
    padding-inline: 27px;
  }

  .page-head {
    height: min(620px, calc(100dvh - var(--site-header-height) - 1px));
    min-height: min(500px, calc(100dvh - var(--site-header-height) - 1px));
    padding-block: clamp(40px, 6dvh, 64px);
  }

  body.page-o-nas .page-head,
  body.page-sluzby .page-head,
  body.page-projekty .page-head,
  body.page-vas-hlas .page-head,
  body.page-kontakt .page-head {
    height: auto;
    min-height: min(650px, calc(100dvh - var(--site-header-height) - 1px));
  }

  .page-head .eyebrow {
    margin-bottom: 0;
  }

  .page-head,
  .career {
    --ph-h1: clamp(54px, min(5.2vw, 8.2dvh), 78px);
  }

  .page-head h1 {
    margin-top: 0;
    line-height: 0.92;
  }

  .page-head .page-lead {
    padding-top: 18px;
    font-size: clamp(24px, 2.8vw, 38px);
    line-height: 1.3;
  }

  .page-references .references-hero,
  .page-references .references-hero-media {
    height: min(650px, calc(100dvh - var(--site-header-height) - 1px));
    min-height: min(650px, calc(100dvh - var(--site-header-height) - 1px));
  }

  .page-references .references-hero-copy-inner {
    padding-top: clamp(38px, 5dvh, 50px);
    padding-bottom: clamp(34px, 4.5dvh, 46px);
  }

  .page-references .references-hero h1 {
    margin-block: clamp(20px, 2.8dvh, 26px);
    font-size: clamp(58px, min(5.5vw, 8dvh), 82px);
    line-height: 0.86;
  }

  .page-references .references-coordinate {
    margin-top: 20px;
  }

  .page-references .references-metrics-grid {
    min-height: 132px;
  }

  /* .page-head centres a block of height B inside a section of height S, so
     its h1 lands at (S - B) / 2. Reproduce that offset as a top padding and
     keep the section free to grow, so long EN/DE headings plus the CTA are
     never clipped. */
  .page-kariera .career {
    --career-shell: min(650px, calc(100dvh - var(--site-header-height) - 1px));
    height: auto;
    min-height: var(--career-shell);
  }

  .page-kariera .career-grid {
    height: auto;
    min-height: 0;
    align-items: start;
    align-content: start;
    padding-block: calc((var(--career-shell) - (var(--ph-h1) * 3.8 + 10px)) / 2)
      clamp(36px, 6dvh, 56px);
  }

  .page-kariera .career-card .eyebrow {
    margin-bottom: 18px;
  }

  .page-kariera .career-card h1 {
    margin-bottom: clamp(18px, 2.6dvh, 24px);
  }

  .page-kariera .career-card > p:not(.eyebrow) {
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.5;
  }

  .page-kontakt .contact {
    padding-top: clamp(36px, 5dvh, 48px);
    padding-bottom: clamp(80px, 8vw, 112px);
  }

  .page-kontakt .contact-heading {
    row-gap: clamp(12px, 1.6dvh, 16px);
    padding-bottom: clamp(18px, 2.4dvh, 24px);
  }

  .page-kontakt .contact-heading .eyebrow {
    margin-bottom: 0;
  }

  .page-kontakt .contact-heading h1 {
    margin-top: 0;
    font-size: clamp(54px, min(5.2vw, 7.5dvh), 72px);
    line-height: 0.92;
  }

  .page-kontakt .contact-grid {
    padding-top: clamp(18px, 2.4dvh, 24px);
  }

  .page-kontakt .contact-lead {
    margin-bottom: 28px;
    font-size: 18px;
    line-height: 1.5;
  }

  .page-kontakt .contact-details dl {
    gap: 22px 24px;
  }

  .page-kontakt .contact-form {
    gap: 14px;
    padding: clamp(22px, 2.2vw, 28px);
  }

  .page-kontakt .contact-form .form-row {
    gap: 16px;
  }

  .page-kontakt .contact-form .field {
    gap: 6px;
  }

  .page-kontakt .contact-form .field input,
  .page-kontakt .contact-form .field select,
  .page-kontakt .contact-form .field textarea {
    min-height: 48px;
    padding-block: 10px;
  }

  .page-kontakt .contact-form .field textarea {
    height: 96px;
    min-height: 96px;
  }

  .page-kontakt .contact-form .form-submit {
    min-height: 48px;
    margin-top: 0;
    padding-block: 11px;
  }

  .page-kontakt .contact-visit {
    margin-top: clamp(56px, 7vw, 88px);
  }
}

@media (min-width: 1025px) and (max-height: 760px) {
  body {
    --header-shell-height: 152px;
    --site-header-height: 202px;
  }

  .site-header .header-shell {
    min-height: var(--header-shell-height);
  }

  .site-header .brand {
    width: 150px;
    min-height: 104px;
  }

  .site-header .header-cta {
    min-height: 64px;
  }

  .page-head {
    height: min(600px, calc(100dvh - var(--site-header-height) - 1px));
    min-height: min(480px, calc(100dvh - var(--site-header-height) - 1px));
    padding-block: 36px;
  }

  body.page-o-nas .page-head,
  body.page-sluzby .page-head,
  body.page-projekty .page-head,
  body.page-vas-hlas .page-head,
  body.page-kontakt .page-head {
    height: auto;
    min-height: min(650px, calc(100dvh - var(--site-header-height) - 1px));
  }

  .page-head,
  .career {
    --ph-h1: clamp(48px, min(5vw, 8dvh), 64px);
  }

  .page-head h1 {
    margin-top: 0;
  }

  .page-references .references-hero,
  .page-references .references-hero-media {
    height: 500px;
    min-height: 500px;
  }

  .page-references .references-metrics-grid {
    min-height: 124px;
  }

  .page-kontakt .contact {
    padding-top: 18px;
  }

  .page-kontakt .contact-heading {
    row-gap: 8px;
    padding-bottom: 14px;
  }

  .page-kontakt .contact-heading h1 {
    font-size: clamp(46px, min(4.7vw, 7dvh), 54px);
  }

  .page-kontakt .contact-grid {
    padding-top: 12px;
  }

  .page-kontakt .contact-lead {
    margin-bottom: 20px;
    font-size: 16px;
  }

  .page-kontakt .contact-form {
    gap: 10px;
    padding: 16px 20px;
  }

  .page-kontakt .contact-form .field textarea {
    height: 72px;
    min-height: 72px;
  }

  .page-kontakt .contact-form .form-note {
    font-size: 11px;
  }
}

/* ===== Larger body copy on subpages (matches the homepage intro scale) ===== */

@media (min-width: 1025px) {
  .about-copy p:not(.large-copy),
  .page-kariera .people-gateway-lead {
    font-size: clamp(19px, 1.5vw, 22px);
    line-height: 1.6;
  }

  .page-references .references-lead {
    font-size: clamp(17px, 1.1vw, 19px);
    line-height: 1.55;
  }

  .page-references .reference-row-copy p,
  .page-references .references-section-heading p,
  .page-references .references-note p,
  .page-sluzby .process-copy p:not(.eyebrow) {
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.6;
  }
}

/* ===== Team groups (O nás) ===== */

.team-group-title {
  margin-top: clamp(64px, 7vw, 96px);
}

.team-group-title p {
  margin: 0;
  padding-bottom: 16px;
  color: var(--navy);
  border-bottom: 2px solid var(--orange);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.team-group-title + .team-grid {
  margin-top: clamp(32px, 3.5vw, 48px);
}

/* ===== Compact circular team portraits (O nás) ===== */

.page-kontakt .team-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 2.5vw, 40px) clamp(16px, 1.8vw, 28px);
}

.page-kontakt .team-card,
.page-kontakt .team-card.offset {
  transform: none;
}

.page-kontakt .portrait-placeholder {
  width: clamp(130px, 11vw, 176px);
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
}

.page-kontakt .portrait-placeholder.has-photo img {
  object-fit: cover;
  object-position: center 15%;
}

.page-kontakt .team-card-copy {
  padding-top: 18px;
  text-align: center;
}

.page-kontakt .team-contact {
  align-items: center;
}

@media (max-width: 1024px) {
  .page-kontakt .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .page-kontakt .team-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== Team member dialog (Kontakt) ===== */

.page-kontakt .team-card {
  cursor: pointer;
}

.page-kontakt .team-card .portrait-placeholder {
  transition: transform 220ms var(--ease);
}

.page-kontakt .team-card:hover .portrait-placeholder,
.page-kontakt .team-card:focus-visible .portrait-placeholder {
  transform: scale(1.04);
}

.team-dialog {
  width: min(860px, calc(100% - 32px));
  max-width: none;
  padding: 0;
  overflow: visible;
  color: var(--ink);
  background: var(--white);
  border: 0;
}

.team-dialog::backdrop {
  background: rgba(0, 25, 84, 0.9);
  backdrop-filter: blur(8px);
}

.team-dialog-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--white);
  background: rgba(0, 25, 84, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.team-dialog-close:hover {
  background: var(--navy);
}

.team-dialog-body {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(30px, 4vw, 52px);
  border-top: 4px solid var(--orange);
}

/* colleagues whose portrait is not in yet keep the same empty bubble in the dialog */
.team-dialog-photo.is-empty {
  display: grid;
  place-items: end center;
  aspect-ratio: 1;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(220, 225, 230, 0.2)),
    var(--border);
  border-radius: 50%;
}

/* the global `img { display: block }` reset outranks the UA rule for [hidden], so the
   empty <img> would still occupy a grid row and push the silhouette out of the bubble */
.team-dialog-photo.is-empty img {
  display: none;
}

/* the bubble is a square, so 66% wide / 68% tall is a fixed ratio, so deriving the
   height from it avoids a percentage against a content-sized grid row */
.team-dialog-photo.is-empty .portrait-silhouette {
  height: auto;
  aspect-ratio: 66 / 68;
}

.team-dialog-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 15%;
  border-radius: 50%;
}

.team-dialog-info .mono {
  margin: 0 0 12px;
  color: var(--orange);
  font-size: 13px;
  letter-spacing: 0.1em;
}

.team-dialog-info h3 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.03em;
}

.team-dialog-role {
  display: block;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 18px;
}

.team-dialog-motto {
  margin: -6px 0 22px;
  padding-left: 16px;
  border-left: 2px solid var(--orange);
  color: var(--navy);
  font-size: 16px;
  font-style: italic;
  line-height: 1.4;
}

.team-dialog-motto:empty {
  display: none;
}

.team-dialog-contact {
  display: grid;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.team-dialog-contact:empty {
  display: none;
}

.team-dialog-contact a {
  color: var(--navy);
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  justify-self: start;
}

.team-dialog-contact a:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

@media (max-width: 640px) {
  .team-dialog-body {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  .team-dialog-photo {
    width: min(200px, 60%);
    margin-inline: auto;
  }

  .team-dialog-contact a {
    justify-self: center;
  }
}

/* ===== Team card copy: drop the department line, lift name + contacts ===== */

.page-kontakt .team-card-copy .mono {
  display: none;
}

.page-kontakt .team-card-copy h3 {
  margin-bottom: 8px;
  font-size: clamp(24px, 2.1vw, 29px);
}

.page-kontakt .team-card-copy > span {
  font-size: clamp(16px, 1.35vw, 19px);
}

.page-kontakt .team-contact {
  gap: 7px;
  margin-top: 16px;
}

.page-kontakt .team-contact a {
  color: var(--navy);
  /* the longest address (veronika.pieckova@hogroup.eu) has to fit the 4-column card,
     which is narrowest around 1180-1280px; anywhere is the safety net for future ones */
  font-size: clamp(12px, 5.4cqi, 20px);
  font-weight: 600;
  white-space: nowrap;
}

/* size relative to the card so the longest address never wraps, at any window width */
.page-kontakt .team-card-copy {
  container-type: inline-size;
}

/* ===== O nás: company profile sections ===== */

/* the page is a long read, so its bands sit tighter than the site default
   (clamp(80px, 10vw, 144px)) without losing the editorial rhythm */
.page-o-nas .about.section,
.page-o-nas .about-duo-section,
.page-o-nas .principles-section,
.page-o-nas .about-closing,
.page-o-nas .certificates-section {
  padding-block: clamp(52px, 5.5vw, 84px);
}

/* intro: statement left, body copy right, matching the reading order as Váš hlas */
.page-o-nas .about-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px clamp(40px, 5vw, 88px);
  align-items: start;
}

.page-o-nas .about-copy {
  max-width: none;
  padding-top: 0;
}

.page-o-nas .about-copy-lead {
  grid-column: 1 / span 6;
  padding: 42px 0 0 42px;
  border-top: 2px solid var(--navy);
  border-left: 4px solid var(--orange);
}

.page-o-nas .about-copy-lead .mono {
  margin: 0 0 18px;
  color: var(--muted);
}

.page-o-nas .about-copy-lead .large-copy {
  margin-bottom: 0;
  color: var(--navy);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.page-o-nas .about-copy-body {
  grid-column: 8 / -1;
  padding-top: 42px;
  border-top: 2px solid var(--orange);
}

/* service strip: one continuously scrolling band instead of a two-row grid.
   The eight labels are repeated four times, so the track stays wider than the
   viewport after one set has scrolled past and the loop shows no gap. */
.about-services .marquee {
  overflow: hidden;
}

.about-services .marquee-track {
  display: flex;
  width: max-content;
  animation: about-marquee 46s linear infinite;
}

.about-services .marquee-track span {
  display: grid;
  min-height: 82px;
  padding: 16px clamp(28px, 3.2vw, 54px);
  place-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.about-services .marquee:hover .marquee-track,
.about-services .marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

@keyframes about-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-25%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-services .marquee {
    overflow-x: auto;
  }

  .about-services .marquee-track {
    animation: none;
  }
}

/* two explanatory blocks side by side */
.about-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}

.about-duo article {
  padding-top: 26px;
  border-top: 2px solid var(--navy);
}

.about-duo .mono {
  margin: 0 0 20px;
  color: var(--orange);
}

.about-duo h2 {
  margin: 0 0 18px;
  color: var(--navy);
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.about-duo p:not(.mono) {
  margin: 0;
  color: var(--muted);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
}

/* five principles */
.principles-section {
  background-color: rgba(247, 247, 243, 0.94);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.principles-heading h2 {
  max-width: 20ch;
  margin: 10px 0 0;
  color: var(--navy);
  font-size: clamp(30px, 3.4vw, 48px);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(30px, 3.4vw, 46px);
  border-top: 2px solid var(--navy);
  border-left: 1px solid var(--border);
}

.principle-card {
  display: flex;
  min-height: 178px;
  flex-direction: column;
  padding: 24px 22px 28px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.principle-index {
  color: var(--orange);
  font-size: 12px;
}

.principle-card h3 {
  margin: 16px 0 10px;
  color: var(--navy);
  font-size: clamp(19px, 1.5vw, 22px);
  letter-spacing: -0.02em;
}

.principle-card p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
}

/* closing statement */
.about-closing-inner {
  /* capping the .container itself would re-centre it off the page's left rail,
     so the width limit lives on the children instead */
  padding: 42px 0 0 42px;
  border-top: 2px solid var(--navy);
  border-left: 4px solid var(--orange);
}

.about-closing-inner h2 {
  max-width: 22ch;
  margin: 0 0 16px;
  color: var(--navy);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.about-closing-inner p {
  max-width: 58ch;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
}

/* section heading: certificates */
.certificates-heading {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: end;
}

.certificates-heading > div {
  grid-column: 1 / span 7;
}

.certificates-heading > p {
  grid-column: 9 / -1;
  margin: 0;
  padding-top: 20px;
  color: var(--muted);
  border-top: 2px solid var(--orange);
}

.certificates-heading h2 {
  max-width: 22ch;
  margin: 12px 0 0;
  color: var(--navy);
  font-size: clamp(30px, 3.4vw, 48px);
  letter-spacing: -0.035em;
  line-height: 1.08;
}




/* certificates */
.certificates-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(30px, 3.4vw, 46px);
  border-top: 2px solid var(--navy);
  border-left: 1px solid var(--border);
}

.certificate-card {
  display: flex;
  min-height: 196px;
  flex-direction: column;
  padding: 26px 24px 28px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.certificate-card .mono {
  margin: 0;
  color: var(--orange);
}

.certificate-card h3 {
  margin: 14px 0 auto;
  color: var(--navy);
  font-size: clamp(19px, 1.5vw, 22px);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.certificate-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 24px 0 0;
}

.certificate-links a {
  color: var(--navy);
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 25, 84, 0.25);
  padding-bottom: 4px;
  width: fit-content;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}

.certificate-links a:hover,
.certificate-links a:focus-visible {
  color: var(--orange);
  border-color: var(--orange);
}

@media (max-width: 1024px) {
  .principles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .principle-card:last-child {
    grid-column: 1 / -1;
  }

  .certificates-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .certificates-heading > div,
  .certificates-heading > p {
    grid-column: 1;
  }
}

@media (max-width: 768px) {
  .certificates-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-o-nas .about-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .page-o-nas .about-copy-lead {
    grid-column: 1;
    padding: 28px 0 0 24px;
  }

  .page-o-nas .about-copy-body {
    grid-column: 1;
    padding-top: 26px;
  }

  .about-duo {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .about-closing-inner {
    padding: 28px 0 0 24px;
  }
}

@media (max-width: 560px) {
  .principles-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .principle-card:last-child {
    grid-column: 1;
  }

  .principle-card {
    min-height: 0;
  }
}

/* The global mobile rule turns on automatic hyphenation for every heading. These
   headings are sized to fit whole words at every width, so a hyphen would only
   chop them mid-word; break-word stays as the last-resort guard. */
.about-duo h2,
.about-closing-inner h2,
.principles-heading h2,
.certificates-heading h2,
.principle-card h3,
.certificate-card h3 {
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* ===== Full-width tagline bar under the nav ===== */

.brand {
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.header-tagline {
  border-top: 1px solid var(--border);
}

.header-tagline p {
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin: 0 auto;
  padding-block: clamp(10px, 1vw, 16px);
  color: var(--muted);
  font-size: clamp(16px, 1.35vw, 20px);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.header-tagline strong {
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 1024px) {
  .header-tagline p {
    font-size: clamp(14px, 3.2vw, 17px);
  }
}

/* Tagline bar collapses away once the page is scrolled, freeing vertical space */

.header-tagline {
  overflow: hidden;
  max-height: 90px;
  transition:
    max-height 300ms var(--ease),
    opacity 200ms ease,
    border-top-color 200ms ease;
}

.site-header.is-scrolled .header-tagline {
  max-height: 0;
  opacity: 0;
  border-top-color: transparent;
}

/* Service copy as flowing paragraphs (replaces the old bullet lists) */

.service-content p:not(.mono) {
  margin: 0 0 18px;
  padding-top: 18px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.65;
}

.service-content p:not(.mono):last-child {
  margin-bottom: 0;
}

/* ===== References: project cards ===== */

.ref-featured {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.2vw, 32px);
  align-items: center;
  margin-top: clamp(36px, 4vw, 56px);
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.6vw, 34px);
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--orange);
}

.ref-featured-logo img {
  display: block;
  width: auto;
  max-width: 180px;
  max-height: 64px;
  object-fit: contain;
}

.ref-featured p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: clamp(16px, 1.6vw, 22px);
  margin-top: clamp(28px, 3vw, 40px);
}

.ref-card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 28px);
  background: var(--white);
  border: 1px solid var(--border);
  cursor: pointer;
  transition:
    transform 220ms var(--ease),
    box-shadow 220ms var(--ease);
}

.ref-card:hover,
.ref-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 25, 84, 0.16);
}

/* Header: logo chip on the left, period on the right */

.ref-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.ref-card-mark {
  display: inline-flex;
  height: 58px;
  min-width: 92px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  background: var(--white);
  border-radius: 3px;
}

.ref-card-mark img {
  width: auto;
  height: auto;
  max-width: 132px;
  max-height: 42px;
  object-fit: contain;
}

/* Fallback chip for partners whose logo we are not licensed to publish. */
.ref-card-mark-text {
  max-width: 168px;
  padding: 8px 12px;
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.ref-card-period {
  color: var(--muted);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: right;
  white-space: nowrap;
}

.ref-card h3 {
  margin: 0 0 20px;
  color: var(--navy);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.ref-card-meta {
  display: grid;
  gap: 14px;
  margin: 0 0 22px;
}

.ref-card-meta dt {
  margin-bottom: 3px;
  color: var(--muted);
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ref-card-meta dd {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  /* project codes like BUDGET VW_BA_PO546_UB_UB+UG_U1G1 are single unbreakable
     tokens that overflow the card on the narrowest phones */
  overflow-wrap: anywhere;
}

.ref-card-team {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.ref-card-team strong {
  color: var(--navy);
  font-family: var(--font-main);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.ref-card-team span {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.4;
}

/* Alternating colours, offset per row so they read as a checkerboard */

.ref-card:nth-child(9n + 2),
.ref-card:nth-child(9n + 4),
.ref-card:nth-child(9n + 9) {
  background: var(--navy);
  border-color: var(--navy);
}

.ref-card:nth-child(9n + 2) h3,
.ref-card:nth-child(9n + 4) h3,
.ref-card:nth-child(9n + 9) h3,
.ref-card:nth-child(9n + 2) .ref-card-team strong,
.ref-card:nth-child(9n + 4) .ref-card-team strong,
.ref-card:nth-child(9n + 9) .ref-card-team strong,
.ref-card:nth-child(9n + 2) .ref-card-meta dd,
.ref-card:nth-child(9n + 4) .ref-card-meta dd,
.ref-card:nth-child(9n + 9) .ref-card-meta dd {
  color: var(--white);
}

.ref-card:nth-child(9n + 2) .ref-card-meta dt,
.ref-card:nth-child(9n + 4) .ref-card-meta dt,
.ref-card:nth-child(9n + 9) .ref-card-meta dt,
.ref-card:nth-child(9n + 2) .ref-card-period,
.ref-card:nth-child(9n + 4) .ref-card-period,
.ref-card:nth-child(9n + 9) .ref-card-period,
.ref-card:nth-child(9n + 2) .ref-card-team span,
.ref-card:nth-child(9n + 4) .ref-card-team span,
.ref-card:nth-child(9n + 9) .ref-card-team span {
  color: var(--on-dark-muted);
}

.ref-card:nth-child(9n + 2) .ref-card-team,
.ref-card:nth-child(9n + 4) .ref-card-team,
.ref-card:nth-child(9n + 9) .ref-card-team {
  border-top-color: rgba(255, 255, 255, 0.22);
}

.ref-card:nth-child(9n + 3),
.ref-card:nth-child(9n + 5),
.ref-card:nth-child(9n + 7) {
  background: var(--orange);
  border-color: var(--orange);
}

.ref-card:nth-child(9n + 3) h3,
.ref-card:nth-child(9n + 5) h3,
.ref-card:nth-child(9n + 7) h3,
.ref-card:nth-child(9n + 3) .ref-card-team strong,
.ref-card:nth-child(9n + 5) .ref-card-team strong,
.ref-card:nth-child(9n + 7) .ref-card-team strong,
.ref-card:nth-child(9n + 3) .ref-card-meta dd,
.ref-card:nth-child(9n + 5) .ref-card-meta dd,
.ref-card:nth-child(9n + 7) .ref-card-meta dd {
  color: var(--navy);
}

.ref-card:nth-child(9n + 3) .ref-card-meta dt,
.ref-card:nth-child(9n + 5) .ref-card-meta dt,
.ref-card:nth-child(9n + 7) .ref-card-meta dt,
.ref-card:nth-child(9n + 3) .ref-card-period,
.ref-card:nth-child(9n + 5) .ref-card-period,
.ref-card:nth-child(9n + 7) .ref-card-period,
.ref-card:nth-child(9n + 3) .ref-card-team span,
.ref-card:nth-child(9n + 5) .ref-card-team span,
.ref-card:nth-child(9n + 7) .ref-card-team span {
  color: var(--navy);
}

.ref-card:nth-child(9n + 3) .ref-card-team,
.ref-card:nth-child(9n + 5) .ref-card-team,
.ref-card:nth-child(9n + 7) .ref-card-team {
  border-top-color: rgba(0, 25, 84, 0.25);
}

@media (max-width: 560px) {
  .ref-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== Reference detail dialog ===== */

.ref-dialog {
  width: min(720px, calc(100% - 32px));
  max-width: none;
  padding: 0;
  overflow: visible;
  color: var(--ink);
  background: var(--white);
  border: 0;
}

.ref-dialog::backdrop {
  background: rgba(0, 25, 84, 0.9);
  backdrop-filter: blur(8px);
}

.ref-dialog-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--white);
  background: rgba(0, 25, 84, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.ref-dialog-close:hover {
  background: var(--navy);
}

.ref-dialog-body {
  display: grid;
  gap: clamp(24px, 3.4vw, 36px);
  padding: clamp(30px, 4vw, 52px);
  border-top: 4px solid var(--orange);
}

.ref-dialog-mark {
  display: flex;
  height: 96px;
  align-items: center;
  justify-content: flex-start;
  padding-right: 58px;
}

.ref-dialog-mark .ref-card-mark-text {
  max-width: 100%;
  padding: 0;
  font-size: 13px;
  text-align: left;
}

.ref-dialog-mark img {
  width: auto;
  height: auto;
  max-width: min(320px, 100%);
  max-height: 96px;
  object-fit: contain;
  object-position: left center;
}

.ref-dialog-info time {
  display: block;
  margin-bottom: 8px;
  color: var(--orange);
  font-size: 13px;
  letter-spacing: 0.1em;
}

.ref-dialog-info h3 {
  margin: 0 0 24px;
  color: var(--navy);
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.ref-dialog-meta {
  display: grid;
  gap: 16px;
  margin: 0 0 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.ref-dialog-meta dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ref-dialog-meta dd {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
}

.ref-dialog-team {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.ref-dialog-team strong {
  color: var(--navy);
  font-family: var(--font-main);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.ref-dialog-team span {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .ref-dialog-mark {
    height: 72px;
    padding-right: 52px;
  }

  .ref-dialog-mark img {
    max-height: 72px;
  }

  .ref-dialog-body {
    padding: 28px 22px 30px;
  }
}

/* Long single words must not force the references hero wider than the phone */

@media (max-width: 768px) {
  .page-references .references-hero h1 {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

@media (max-width: 560px) {
  .page-references .references-hero h1 {
    max-width: none;
    font-size: clamp(50px, 14vw, 64px);
  }
}

/* Phones/tablets: no heading may push a long word past its column (SK/DE compounds) */

@media (max-width: 768px) {
  h1,
  h2,
  h3,
  .people-route-copy,
  .project-meta {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* ===== Careers: no active job posting ===== */

.job-empty {
  width: 100%;
  padding: clamp(28px, 3.5vw, 44px) clamp(28px, 3.5vw, 48px);
  color: var(--navy);
  background: var(--white);
}

.job-empty-status {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.job-empty-dot {
  width: 8px;
  height: 8px;
  border: 2px solid var(--muted);
  border-radius: 50%;
}

.job-empty h3 {
  margin: 0 0 16px;
  color: var(--navy);
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.job-empty-text {
  max-width: 62ch;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.job-empty-cta {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 26px;
  color: var(--navy);
  background: var(--orange);
  border: 0;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.job-empty-cta:hover,
.job-empty-cta:focus-visible {
  background: #dd6e0e;
}

@media (max-width: 640px) {
  .job-empty-cta {
    display: flex;
    width: 100%;
  }
}

/* ===== Projects: photo mosaic ===== */

.project-mosaic {
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin: clamp(28px, 4vw, 48px) auto 0;
  columns: 3;
  column-gap: 12px;
}

.project-mosaic .project-card {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  aspect-ratio: auto;
  flex: none;
  overflow: hidden;
  background: var(--navy);
  border: 0;
  border-top: 3px solid var(--orange);
  break-inside: avoid;
  cursor: pointer;
}

.project-mosaic .project-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 620ms var(--ease);
}

/* a clean photo grid: hovering reveals only the orange open-button - the
   caption lives in the dialog, but stays in the DOM for assistive tech */
.project-mosaic .project-card::after {
  display: none;
}

.project-mosaic .project-meta {
  grid-template-columns: auto;
  justify-content: end;
  padding: 14px;
}

.project-mosaic .project-meta .mono,
.project-mosaic .project-meta strong {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.project-mosaic .project-open {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 260ms var(--ease),
    transform 260ms var(--ease);
}

.project-mosaic .project-card:hover .project-open,
.project-mosaic .project-card:focus-visible .project-open {
  opacity: 1;
  transform: none;
}

.project-mosaic .project-card:hover img,
.project-mosaic .project-card:focus-visible img {
  transform: scale(1.04);
}

.project-mosaic .project-card:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
}

@media (max-width: 1024px) {
  .project-mosaic {
    columns: 2;
  }
}

@media (max-width: 560px) {
  .project-mosaic {
    columns: 1;
    column-gap: 0;
  }

  .project-mosaic .project-open {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-mosaic .project-card img,
  .project-mosaic .project-open {
    transition: none;
  }
}

/* narrow phones: keep "2017+" and its label out of each other's way */

@media (max-width: 360px) {
  .page-references .reference-metric,
  .page-references .reference-metric:first-child,
  .page-references .reference-metric:last-child {
    grid-template-columns: 28px 104px 1fr;
  }

  .page-references .reference-metric strong {
    font-size: 34px;
  }
}

/* narrowest phones: the logo chip must not push the period off the card */

@media (max-width: 360px) {
  .ref-card-mark {
    max-width: 100%;
  }

  .ref-card-mark img {
    max-width: 108px;
  }
}

/* ===== Site footer =====================================================
   One continuous dark band: brand / navigation / contact / follow across the
   top, a wide map below it, and a thin legal bar. The gear outline and the
   grid texture are decorative only. */

.site-footer {
  position: relative;
  z-index: 2;
  overflow: hidden;
  color: var(--on-dark);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, 0.06), transparent 60%),
    radial-gradient(90% 70% at 88% 100%, rgba(245, 130, 32, 0.07), transparent 62%),
    linear-gradient(180deg, #001a58 0%, #001341 100%),
    var(--navy-deep);
}

/* technical grid texture, deliberately faint */
.site-footer::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 80px 80px;
  content: "";
  pointer-events: none;
}

.footer-gear {
  position: absolute;
  z-index: 0;
  bottom: 90px;
  left: -110px;
  width: 360px;
  height: 360px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 2;
  opacity: 0.1;
  pointer-events: none;
}

.site-footer > .container {
  position: relative;
  z-index: 1;
}

/* --- top: four blocks ------------------------------------------------- */

.footer-main {
  display: grid;
  grid-template-columns:
    minmax(240px, 1.1fr)
    minmax(190px, 0.8fr)
    minmax(280px, 1.15fr)
    minmax(220px, 0.9fr);
  gap: clamp(40px, 3.6vw, 64px);
  align-items: start;
  padding-block: clamp(64px, 6.5vw, 104px) clamp(40px, 4vw, 60px);
}

.footer-col + .footer-col {
  padding-left: clamp(24px, 2.4vw, 44px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-head {
  margin: 0 0 26px;
  color: var(--on-dark-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --- brand ------------------------------------------------------------ */

.footer-brand img {
  width: clamp(132px, 11vw, 168px);
  height: auto;
}

.footer-statement {
  max-width: 14ch;
  margin: 26px 0 0;
  color: var(--white);
  font-size: clamp(25px, 2.2vw, 31px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.footer-statement strong {
  color: var(--orange);
  font-weight: 700;
}

.footer-accent {
  display: block;
  width: 44px;
  height: 3px;
  margin: 26px 0 20px;
  background: var(--orange);
}

.footer-claim {
  margin: 0;
  color: var(--on-dark-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  line-height: 1.9;
  text-transform: uppercase;
}

/* --- navigation ------------------------------------------------------- */

.footer-links-list {
  display: grid;
}

.footer-links-list a {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--on-dark);
  font-size: 17px;
  transition: color 200ms ease;
}

.footer-links-list svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    stroke 200ms ease,
    transform 200ms ease;
}

.footer-links-list a:hover,
.footer-links-list a:focus-visible {
  color: var(--white);
}

.footer-links-list a:hover svg,
.footer-links-list a:focus-visible svg {
  stroke: var(--orange);
  transform: translateX(4px);
}

/* --- contact ---------------------------------------------------------- */

.footer-contact-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
}

.footer-contact-icon {
  display: grid;
  width: 50px;
  height: 50px;
  flex: none;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}

.footer-contact-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--white);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-contact-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.footer-contact-label {
  color: var(--on-dark-muted);
  font-size: 12px;
}

.footer-contact-body a,
.footer-contact-body address {
  color: var(--white);
  font-size: 16px;
  font-style: normal;
  line-height: 1.4;
  overflow-wrap: anywhere;
  transition: color 200ms ease;
}

.footer-contact-body a:hover,
.footer-contact-body a:focus-visible {
  color: var(--orange);
}

.footer-cta {
  display: inline-flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 10px;
  padding-inline: 30px;
  color: var(--white);
  background: var(--orange);
  border-radius: 3px;
  font-size: 16px;
  font-weight: 700;
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.footer-cta svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms ease;
}

.footer-cta:hover,
.footer-cta:focus-visible {
  background: #ff9235;
}

.footer-cta:hover svg,
.footer-cta:focus-visible svg {
  transform: translateX(4px);
}

/* --- follow ----------------------------------------------------------- */

.footer-follow-text {
  margin: 0 0 26px;
  color: var(--on-dark);
  font-size: 16px;
  line-height: 1.55;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: var(--white);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  transition:
    color 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease;
}

.footer-social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--white);
  background: var(--orange);
  border-color: var(--orange);
}

.footer-find {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-find .footer-head {
  margin-bottom: 14px;
}

.footer-map-link {
  color: var(--on-dark);
  font-size: 16px;
  transition: color 200ms ease;
}

.footer-map-link:hover,
.footer-map-link:focus-visible {
  color: var(--orange);
}

/* --- map -------------------------------------------------------------- */

.footer-map {
  height: clamp(200px, 17vw, 230px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
}

.footer-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.75) contrast(1.02);
  opacity: 0.92;
}

/* --- legal bar -------------------------------------------------------- */

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(44px, 4.5vw, 64px);
  padding-block: 22px 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin: 0;
  color: var(--on-dark-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.footer-legal > span + span {
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.back-to-top {
  display: inline-flex;
  min-height: 44px;
  gap: 10px;
  align-items: center;
  padding-inline: 20px;
  color: var(--on-dark);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    color 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease;
}

.back-to-top span {
  font-size: 13px;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.42);
}

/* --- responsive ------------------------------------------------------- */

@media (max-width: 1100px) {
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(36px, 4vw, 56px);
  }

  /* only the second block of each row carries a divider */
  .footer-col + .footer-col {
    padding-left: 0;
    border-left: 0;
  }

  .footer-col:nth-child(even) {
    padding-left: clamp(24px, 3vw, 44px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 700px) {
  .footer-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    padding-block: 56px 34px;
  }

  .footer-col:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .footer-brand img {
    width: 128px;
  }

  .footer-statement {
    max-width: none;
    font-size: 27px;
  }

  .footer-cta {
    width: 100%;
    min-height: 58px;
  }

  .footer-map {
    height: 220px;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }

  .footer-gear {
    bottom: 40px;
    left: -150px;
    width: 280px;
    height: 280px;
    opacity: 0.06;
  }
}

@media (max-width: 420px) {
  .footer-legal > span + span {
    padding-left: 0;
    border-left: 0;
  }

  .footer-social a {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-links-list svg,
  .footer-cta svg {
    transition: none;
  }
}

/* ===== Public forms: enquiry dialog on Kontakt, anonymous feedback on Váš hlas ===== */

/* The CTA sits inside .page-lead so it lands in the hero's right-hand column;
   as a sibling of the grid it would drop into a second row. */
.page-head .page-lead .button {
  display: flex;
  width: fit-content;
  margin-top: 28px;
}

.page-head .button-primary:hover,
.page-head .button-primary:focus-visible {
  color: var(--ink);
  background: var(--white);
  border-color: var(--white);
}

/* German compounds are long enough to trip the global mobile hyphenation rule,
   which would break a button label mid-word. */
.button {
  hyphens: manual;
}

/* Honeypot. Off screen rather than display:none so a bot still fills it in,
   and hidden from assistive tech by the aria-hidden on its wrapper. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The application-form light override only recoloured inputs. Selects and
   textareas need it too, or they render white on white in the dialog. */
.application-form .field select,
.application-form .field textarea {
  color: var(--ink);
  border-bottom-color: var(--border);
}

.application-form .field select option {
  color: var(--ink);
  background: var(--white);
}

.application-form .form-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Native select arrows are invisible on the navy contact panel, so both
   contexts get an explicit chevron. */
.field select {
  padding-right: 28px;
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  appearance: none;
  -webkit-appearance: none;
}

.application-form .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001954' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
}

.form-submit[disabled] {
  opacity: 0.55;
  cursor: progress;
}

.form-status.is-error {
  color: var(--orange);
}

.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid {
  border-bottom-color: var(--orange);
}

/* Success panel replaces the form inside the dialog. */
#lead-success .button {
  margin-top: 8px;
}

/* Anonymity notice column on Váš hlas. */
.anon-notice {
  margin: 0 0 18px;
  padding-left: 18px;
  color: var(--white);
  border-left: 3px solid var(--orange);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  line-height: 1.45;
}

.anon-small {
  margin: 0 0 14px;
  color: var(--on-dark);
  font-size: 15px;
  line-height: 1.6;
}

.page-vas-hlas .contact {
  border-top: 6px solid var(--orange);
}

.page-vas-hlas .contact-form {
  padding: clamp(26px, 3.4vw, 44px);
  background: rgba(255, 255, 255, 0.045);
  border-top: 2px solid var(--orange);
}

@media (max-width: 1024px) {
  .page-vas-hlas .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(34px, 6vw, 56px);
  }
}

/* ===== Legal pages ===== */

/* .page-head-media carries an unconditional navy scrim for the photo heroes.
   A legal page has no photo, so the scrim would just paint the grid navy. */
.page-legal .page-head-media {
  display: none;
}

/* The hero reserves room for a three line display heading; a legal page has a
   short title and would otherwise open with a screen of empty grid. */
.page-legal .page-head .container {
  min-height: 0;
}

/* Elsewhere the eyebrow shares row 1 with the heading and is hidden. Here it
   is the document label, so it gets a row of its own. */
.page-legal .page-head .eyebrow {
  grid-row: 1;
  grid-column: 1 / -1;
  margin: 0 0 22px;
}

.page-legal .page-head h1 {
  grid-row: 2;
  max-width: 18ch;
}

.page-legal .page-head .page-lead {
  grid-row: 2;
}

/* Cap the blocks, not the container: .container centres itself, so narrowing
   it would pull the text off the left rail the heading above sits on. */
.page-legal .legal.section {
  padding-block: clamp(46px, 5vw, 76px) clamp(60px, 7vw, 104px);
}

.legal-updated,
.legal-intro,
.legal-block {
  max-width: 74ch;
}

.legal-updated {
  margin: 0 0 26px;
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.legal-intro {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.6;
}

.legal-block {
  padding-top: clamp(30px, 3.4vw, 46px);
  margin-top: clamp(30px, 3.4vw, 46px);
  border-top: 1px solid var(--border);
}

.legal-block h2 {
  margin: 0 0 18px;
  font-size: clamp(22px, 2.1vw, 28px);
  letter-spacing: -0.02em;
}

.legal-block p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
}

.legal-block ul {
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
}

.legal-block li {
  margin-bottom: 6px;
}

.legal-facts {
  display: grid;
  gap: 0;
  margin: 0 0 18px;
  border-top: 2px solid var(--navy);
}

.legal-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 8px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.legal-facts dt {
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legal-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .legal-facts > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== Consent for the embedded map ===== */

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}

.footer-legal-links a,
.footer-legal-links button {
  color: var(--on-dark);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  padding: 0 0 2px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition:
    color 200ms ease,
    border-color 200ms ease;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible,
.footer-legal-links button:hover,
.footer-legal-links button:focus-visible {
  color: var(--white);
  border-color: var(--orange);
}

/* .footer-map iframe sets display:block, which outranks the browser's own
   [hidden] rule, so the unloaded frame would still take up the whole box and
   push the placeholder out of it. */
.footer-map iframe[hidden] {
  display: none;
}

.map-placeholder {
  display: grid;
  height: 100%;
  gap: 16px;
  place-content: center;
  place-items: center;
  padding: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
}

.map-placeholder p {
  max-width: 42ch;
  margin: 0;
  color: var(--on-dark);
  font-size: 14px;
}

.consent {
  position: fixed;
  z-index: 60;
  right: 0;
  bottom: 0;
  left: 0;
  color: var(--white);
  background: var(--navy-deep);
  border-top: 3px solid var(--orange);
}

.consent-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px clamp(24px, 4vw, 56px);
  align-items: center;
  justify-content: space-between;
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
  padding-block: 20px;
}

.consent-copy {
  flex: 1 1 420px;
}

.consent-title {
  margin: 0 0 6px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.consent-copy p:last-child {
  margin: 0;
  color: var(--on-dark);
  font-size: 14px;
  line-height: 1.6;
}

.consent-copy a {
  color: var(--white);
  border-bottom: 1px solid var(--orange);
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.consent-decline {
  min-height: 52px;
  padding: 13px 20px;
  color: rgba(255, 255, 255, 0.8);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.32);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 200ms ease,
    border-color 200ms ease;
}

.consent-decline:hover,
.consent-decline:focus-visible {
  color: var(--white);
  border-color: var(--white);
}

.application-form .form-note a {
  color: var(--navy);
  border-bottom: 1px solid var(--orange);
}

/* Below 768px the hero stacks. The page-legal row assignments above are more
   specific than the stacking rule, so they have to be released here too. */
@media (max-width: 768px) {
  .page-legal .page-head .eyebrow,
  .page-legal .page-head h1,
  .page-legal .page-head .page-lead {
    grid-row: auto;
    grid-column: 1;
  }

  .page-legal .page-head .eyebrow {
    margin-bottom: 0;
  }
}

/* --- Phones: whole words wrap, never split with a hyphen ---------------- */
/* Hyphenation made headings break mid-word ("KVALIFIKOVA-NÝ"). On phones the
   Slovak/English headings now only wrap between words; sizes below are tuned so
   the longest word of each heading fits the column at 320px and up. German keeps
   hyphenation: its compounds are too long to fit any readable size otherwise. */

@media (max-width: 768px) {
  html:not([lang="de"]) :is(h1, h2, h3, h4, .people-route-copy, .project-meta) {
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}

@media (max-width: 480px) {
  /* ch-based measures (8ch, 12ch...) were narrower than a single long word */
  h1,
  h2,
  h3 {
    max-width: none !important;
  }

  .page-home .hero-copy h1 {
    font-size: clamp(28px, 9.4vw, 52px);
  }

  .home-intro-grid h2 {
    font-size: clamp(28px, 9.4vw, 62px);
  }

  .page-head h1,
  .page-kariera .page-head h1 {
    font-size: clamp(28px, 9.4vw, 58px);
  }

  .page-kariera .open-positions-intro h2 {
    font-size: clamp(28px, 10.4vw, 58px);
  }

  .page-sluzby .service-content h3 {
    font-size: min(30px, 8.6vw);
  }

  .page-kontakt .team-heading h2 {
    font-size: min(38px, 11.4vw);
  }

  .page-kariera .career-card h1 {
    font-size: clamp(28px, 12.4vw, 46px);
  }
}

/* Phones: small text links (footer, e-mails) get a ~44px touch area without changing the look */
@media (max-width: 768px) {
  .site-footer .footer-contact-body a,
  .site-footer .footer-legal-links a,
  .site-footer .footer-legal-links button,
  .site-footer .footer-map-link,
  .team-contact a {
    display: inline-block;
    padding-block: 11px;
    margin-block: -11px;
  }
}

/* Phones: no label smaller than 12px (was 9-11px mono captions) */
@media (max-width: 768px) {
  .footer-head,
  .footer-legal span,
  .marquee-track span,
  .value-card .mono,
  .service-content .mono,
  .references-kicker,
  .page-references dt,
  .ref-card-mark-text,
  .project-meta span,
  figcaption .mono,
  .people-gateway-code,
  .people-route-label,
  .people-route-meta,
  .open-positions-code,
  .field label,
  .team-card-copy .mono,
  .legal-updated,
  .page-head .mono,
  .container > p.mono {
    font-size: 12px;
  }
}

/* Phones: compact cookie/map consent so it no longer covers half the screen */
@media (max-width: 640px) {
  .consent-inner {
    gap: 12px;
    padding-block: 14px;
  }

  .consent-title {
    display: none;
  }

  .consent-copy p:last-child {
    font-size: 13px;
    line-height: 1.5;
  }

  .consent-actions {
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
  }

  .consent-actions .button,
  .consent-decline {
    flex: 1 1 0;
    justify-content: center;
    min-height: 46px;
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* ===== Phone simplification (branch mobile-simplify; delete this block to undo) ===== */

@media (max-width: 700px) {
  :root {
    --section-space: 56px;
  }

  /* purely decorative layers add scroll length, not information */
  .footer-gear,
  .process-blueprint,
  .people-gateway-gear {
    display: none;
  }

  /* footer: shorter, links in two columns, no repeated slogans */
  .footer-claim,
  .footer-accent,
  .footer-follow-text {
    display: none;
  }

  .footer-main {
    gap: 30px;
    padding-block: 44px 28px;
  }

  .footer-statement {
    margin-top: 18px;
    font-size: 22px;
  }

  .footer-links-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }

  .footer-links-list a {
    min-height: 44px;
    font-size: 16px;
  }

  .footer-links-list svg {
    display: none;
  }

  .footer-map {
    height: 170px;
  }
}

@media (max-width: 560px) {
  /* contact page: 16 team members as a compact two-column grid; e-mail stays in the popup */
  .page-kontakt .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 14px;
  }

  .page-kontakt .portrait-placeholder {
    width: min(112px, 100%);
  }

  .page-kontakt .team-card-copy {
    padding-top: 12px;
  }

  .page-kontakt .team-card-copy h3 {
    margin-bottom: 4px;
    font-size: 17px;
    line-height: 1.15;
  }

  .page-kontakt .team-card-copy > span {
    font-size: 13px;
    line-height: 1.3;
  }

  .page-kontakt .team-card .team-contact {
    display: none;
  }
}

/* ===== Mobile menu (branch mobile-simplify) ===== */
/* The menu column was centred and shrink-wrapped, Kontakt was missing and a
   double rule sat above the language switch. Full-width list, current page
   highlighted, Kontakt as a pinned button. */

@media (max-width: 1024px) {
  .primary-nav {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    padding-bottom: 120px;
  }

  .primary-nav > a:not(.header-cta),
  .nav-dropdown-toggle {
    width: 100%;
  }

  .primary-nav a.is-active,
  .nav-dropdown-toggle.is-active {
    color: var(--orange);
  }

  .lang-switch {
    padding-top: 22px;
    margin-top: 0;
    border-top: 0;
  }

  body.menu-open .header-cta {
    position: fixed;
    z-index: 902;
    right: var(--gutter);
    bottom: max(20px, env(safe-area-inset-bottom));
    left: var(--gutter);
    display: flex;
    justify-content: center;
    min-height: 58px;
  }
}

/* Phones: home navigation cards were 300px tall with empty space (branch mobile-simplify) */
@media (max-width: 700px) {
  .home-nav-grid .value-card {
    min-height: 0;
    padding: 24px 22px;
  }

  .home-nav-grid .value-card .mono {
    margin-bottom: 18px;
  }
}

/* Phones: service rows use the full width (the number column squeezed the photo) */
@media (max-width: 700px) {
  .page-sluzby .service-row,
  .page-sluzby .service-row.reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding-block: 30px;
  }

  .page-sluzby .service-index,
  .page-sluzby .service-row.reverse .service-index {
    grid-row: 1;
    grid-column: 1;
    padding-bottom: 0;
  }

  .page-sluzby .service-image-wrap,
  .page-sluzby .service-row.reverse .service-image-wrap {
    grid-row: 2;
    grid-column: 1;
    aspect-ratio: 1.5;
  }

  .page-sluzby .service-content,
  .page-sluzby .service-row.reverse .service-content {
    grid-row: 3;
    grid-column: 1;
  }
}

/* Phones: gallery as a two-column mosaic and slimmer reference cards
   (galeria was ~10,600px and referencie ~20,700px tall) */
@media (max-width: 700px) {
  .project-mosaic {
    columns: 2;
    column-gap: 8px;
  }

  .project-mosaic .project-card {
    margin-bottom: 8px;
  }

  .ref-card {
    padding: 18px 18px 16px;
  }

  .ref-card-head {
    margin-bottom: 12px;
  }

  .ref-card-mark {
    height: 44px;
    min-width: 76px;
    padding: 6px 10px;
  }

  .ref-card-mark img {
    max-width: 104px;
    max-height: 32px;
  }

  .ref-card h3 {
    margin-bottom: 10px;
    font-size: 21px;
  }

  .ref-card-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin-bottom: 12px;
  }
}

.ref-card.is-collapsed {
  display: none;
}

.ref-more {
  display: flex;
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin: 24px auto 0;
  justify-content: center;
}

@media (max-width: 700px) {
  .value-card,
  .page-o-nas .value-card {
    min-height: 180px;
  }
}

/* Whole site: tidy rag - balanced headings, no one-word last lines (branch mobile-simplify) */
h1,
h2,
h3 {
  text-wrap: balance;
}

main p,
main li,
.site-footer p {
  text-wrap: pretty;
}

/* Phones: the home hero keeps only the headline and the buttons */
@media (max-width: 700px) {
  .page-home .hero-lead {
    display: none;
  }
}

/* Phones: looser headline lines and more air above the buttons */
@media (max-width: 700px) {
  .page-home .hero-copy h1 {
    margin-bottom: 36px;
    line-height: 1.04;
    /* Safari/iPhone rendered the longest word wider and split "PRIEMYSELNÉ" mid-word: smaller size, never break inside a word */
    font-size: clamp(26px, 8vw, 52px);
    hyphens: manual;
    overflow-wrap: normal;
  }

  .page-home .hero-actions {
    gap: 14px;
  }
}

/* Desktop: slightly smaller headline with looser lines so the buttons stay clear of the hero edge */
@media (min-width: 701px) {
  .page-home .hero-copy h1 {
    font-size: clamp(44px, min(4.6vw, 7.2dvh), 70px);
    line-height: 1.04;
  }

  .page-home .hero-lead {
    line-height: 1.6;
  }

  .page-home .hero-actions {
    gap: 16px;
  }
}

/* Hero buttons are always there: no fade/slide-in on page load */
.js .hero-actions[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Home hero: headline and buttons only, on every screen size */
.page-home .hero-lead {
  display: none;
}

/* ===== Personálne služby: intro, team photo, role lists, offer, why ===== */

.services-heading-copy {
  max-width: 560px;
  margin-bottom: 8px;
}

.services-heading-copy p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.team-photo {
  padding-bottom: clamp(40px, 6vw, 80px);
}

/* same width as the page grid, cropped to 3:2 so heads and feet stay in frame */
.team-photo figure {
  margin: 0;
  overflow: hidden;
  border-top: 4px solid var(--orange);
}

.team-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 30%;
}

.roles-head,
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(36px, 8vw, 120px);
  align-items: start;
}

.roles-head > p {
  max-width: 520px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(40px, 5vw, 64px);
}

.role-card {
  padding: clamp(28px, 3.4vw, 46px);
}

.role-card.navy {
  color: var(--white);
  background: var(--navy);
}

.role-card.surface {
  background: var(--surface);
  border: 1px solid var(--border);
}

.role-card h3 {
  margin: 0 0 14px;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.05;
}

.role-card > p {
  margin: 0 0 22px;
  opacity: 0.82;
  line-height: 1.55;
}

.role-card ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1180px) {
  .role-card ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.role-card li {
  padding: 11px 0 11px 22px;
  position: relative;
  border-top: 1px solid rgba(127, 140, 165, 0.28);
  font-size: 17px;
  line-height: 1.4;
}

.role-card li::before {
  position: absolute;
  top: 1.15em;
  left: 0;
  width: 9px;
  height: 2px;
  background: var(--orange);
  content: "";
}

.role-card li:last-child {
  grid-column: 1 / -1;
  font-style: italic;
  opacity: 0.8;
}

.offer-wrap h2 {
  max-width: 14ch;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.offer-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer-list li {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 26px 26px 30px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--orange);
}

.offer-list .mono {
  color: var(--orange);
  font-size: 13px;
}

.offer-list p {
  margin: 0;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.6;
}

.why {
  position: relative;
  z-index: 2;
  color: var(--white);
  background: var(--navy);
}

/* decorative gears are absolutely positioned and would otherwise paint over solid blocks */
.role-card,
.offer-list li {
  position: relative;
  z-index: 2;
}

.why .eyebrow {
  color: var(--white);
}

.why h2 {
  color: var(--white);
}

.why-copy p {
  margin: 0 0 20px;
  color: var(--on-dark);
  font-size: 18px;
  line-height: 1.65;
}

.why-copy .why-cta-text {
  color: var(--white);
  font-size: 20px;
}

.why-copy .button {
  display: inline-flex;
  margin: 6px 0 28px;
}

.why-grid .why-claim {
  max-width: 16ch;
  margin: clamp(28px, 4vw, 56px) 0 0;
  padding-top: 22px;
  color: var(--white);
  border-top: 2px solid var(--orange);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

@media (max-width: 900px) {
  .roles-head,
  .why-grid,
  .role-grid,
  .offer-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .offer-wrap h2 {
    max-width: none;
  }

}

/* Personálne služby: tighter vertical rhythm (default section spacing doubled up between sections) */
.page-personalne-sluzby .services.section {
  padding-bottom: clamp(32px, 4vw, 56px);
}

.page-personalne-sluzby .team-photo {
  padding-bottom: clamp(32px, 4vw, 56px);
}

.page-personalne-sluzby .roles.section {
  padding-block: clamp(32px, 4vw, 56px) 0;
}

.page-personalne-sluzby .offer.section {
  padding-block: clamp(56px, 6vw, 88px);
}

.page-personalne-sluzby .why.section {
  padding-block: clamp(56px, 6vw, 96px);
}

/* Personálne služby intro: less air above, darker text so it stays readable over the decorative gears */
.page-personalne-sluzby .services.section {
  padding-top: clamp(40px, 4.5vw, 72px);
}

.page-personalne-sluzby .services-heading {
  align-items: start;
}

.page-personalne-sluzby .services-heading-copy {
  margin: 0;
}

.page-personalne-sluzby .services-heading-copy p {
  color: var(--ink);
}

/* Home navigation cards: photo (pre-blurred in the file) under a washed-out glass gradient.
   One plain background per card: no backdrop-filter, pseudo layers or blur filters, which made
   Safari flicker the cards while scrolling. */
.home-nav-grid .value-card {
  background:
    linear-gradient(135deg, rgba(247, 247, 243, 0.84) 0%, rgba(247, 247, 243, 0.32) 100%),
    var(--card-photo) center / cover no-repeat;
}

.home-nav-grid .value-card.navy {
  background:
    linear-gradient(135deg, rgba(0, 25, 84, 0.9) 0%, rgba(0, 25, 84, 0.5) 100%),
    var(--card-photo) center / cover no-repeat;
}

.home-nav-grid .value-card:hover,
.home-nav-grid .value-card:focus-visible {
  background:
    linear-gradient(135deg, rgba(247, 247, 243, 0.76) 0%, rgba(247, 247, 243, 0.14) 100%),
    var(--card-photo) center / cover no-repeat;
}

.home-nav-grid .value-card.navy:hover,
.home-nav-grid .value-card.navy:focus-visible {
  background:
    linear-gradient(135deg, rgba(0, 25, 84, 0.84) 0%, rgba(0, 25, 84, 0.3) 100%),
    var(--card-photo) center / cover no-repeat;
}

.home-nav-grid .value-card:nth-child(1) { --card-photo: url("/hogroup/assets/karty/o-nas.jpg"); }
.home-nav-grid .value-card:nth-child(2) { --card-photo: url("/hogroup/assets/karty/sluzby.jpg"); }
.home-nav-grid .value-card:nth-child(3) { --card-photo: url("/hogroup/assets/karty/galeria.jpg"); }
.home-nav-grid .value-card:nth-child(4) { --card-photo: url("/hogroup/assets/karty/referencie.jpg"); }
.home-nav-grid .value-card:nth-child(5) { --card-photo: url("/hogroup/assets/karty/kariera.jpg"); }
.home-nav-grid .value-card:nth-child(6) { --card-photo: url("/hogroup/assets/karty/kontakt.jpg"); }

/* labels on the photo cards: navy reads better than orange over the orange robots */
.home-nav-grid .value-card:not(.navy) .mono {
  color: var(--navy);
  font-weight: 500;
}

/* Consent banner: "decline" is as prominent as "allow" (solid button of the same size) */
.consent-decline {
  color: var(--navy);
  background: var(--white);
  border-color: var(--white);
}

.consent-decline:hover,
.consent-decline:focus-visible {
  color: var(--white);
  background: transparent;
  border-color: var(--white);
}

/* Home hero video: no transform on the video itself and no blur layer above it.
   Both force Safari to re-composite the video every frame, which shows up as flicker. */
.page-home video.hero-media {
  transform: none;
  animation: hero-fade 700ms ease both;
}

@keyframes hero-fade {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}

/* Personálne služby heading: same size as every other page heading, wider measure so "Správni ľudia na" stays on one line */
@media (min-width: 701px) {
  .page-personalne-sluzby .page-head h1 {
    max-width: 22ch;
  }
}

/* Career: looser tracking so headings and paragraphs stop running together */
.page-kariera h1,
.page-kariera h2,
.page-kariera h3,
.page-kariera .people-gateway-intro h2,
.page-kariera .open-positions-intro h2,
.page-kariera .open-positions h3 {
  letter-spacing: 0;
  word-spacing: 0.1em;
  line-height: 1.05;
}

.page-kariera .career blockquote p,
.page-kariera .people-gateway-lead,
.page-kariera .people-route-copy,
.page-kariera .section p,
.page-kariera .career-card p {
  word-spacing: 0.06em;
  line-height: 1.6;
  letter-spacing: 0.005em;
}

@media (max-width: 700px) {
  .page-kariera .career-card h1 {
    font-size: clamp(32px, 9.4vw, 42px);
  }

  .page-kariera .career blockquote p {
    font-size: 22px;
    line-height: 1.45;
  }
}

/* Mobile: headings were tracked so tight (-0.04em to -0.06em) that letters and words ran together */
@media (max-width: 700px) {
  body h1,
  body h2,
  body h3 {
    letter-spacing: -0.01em !important;
    word-spacing: 0.08em;
  }

  body main h2,
  body main h3 {
    line-height: 1.15 !important;
  }
}

/* Career page uses the shared page-head / offer / why layout */
body.page-kariera .page-head-media {
  background-image: url("../hogroup/assets/sekcie/kariera.jpg");
  background-position: center 45%;
}

body.page-kariera .offer-list h3 {
  margin: 0;
  font-size: clamp(22px, 2vw, 28px);
}

body.page-kariera .offer-list .button {
  justify-self: start;
  margin-top: 6px;
}

/* Typography: Noto Sans for body text and small labels, Archivo for headings and buttons */
body {
  font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
.button,
.header-cta,
.footer-statement,
blockquote p {
  font-family: var(--font-main);
}

/* Body text stays left-aligned: justified columns opened big word gaps and
   split words (mecha-nické) on narrow screens. text-wrap keeps line ends tidy instead. */
main p,
main li {
  text-align: left;
  hyphens: manual;
  text-wrap: pretty;
}

/* Long German link names (Personaldienstleistungen) must wrap instead of overflowing narrow columns */
.footer-links-list a,
.footer-links-list a span,
.site-nav a,
.mobile-menu a {
  overflow-wrap: anywhere;
}

/* Hero headings: one line height everywhere, no extra gap above the accent line */
body .page-head h1,
body.page-kariera .page-head h1,
body.page-references .references-hero h1 {
  line-height: 1.04;
}

/* Phones: page headings a step smaller and evenly spaced so they sit on fewer, calmer lines */
@media (max-width: 700px) {
  body .page-head h1 {
    font-size: clamp(40px, 11.5vw, 52px);
    line-height: 1.08;
  }

  body .page-head h1 span {
    margin-top: 0;
  }
}

/* "Why" block: two balanced columns (heading left, copy right) and the claim as a full-width closing line */
@media (min-width: 901px) {
  .why-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(48px, 7vw, 112px);
    row-gap: 0;
  }

  .why-grid > div:first-child {
    display: contents;
  }

  .why-grid .eyebrow {
    grid-column: 1;
    grid-row: 1;
  }

  .why-grid h2 {
    grid-column: 1;
    grid-row: 2;
    max-width: 12ch;
  }

  .why-copy {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .why-grid .why-claim {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: none;
    margin-top: clamp(40px, 5vw, 72px);
    font-size: clamp(22px, 2.4vw, 32px);
  }
}

/* Same type roles everywhere: Archivo for headings, navigation and buttons, Noto Sans for reading text */
.primary-nav a,
.nav-dropdown-toggle,
.lang-switch a {
  font-family: var(--font-main);
}

.footer-legal .amp {
  font-family: inherit;
}

/* Intro paragraphs next to section headings share one colour (navy) */
.roles-head > p {
  color: var(--navy);
}

/* About: five principles as separate cards (orange top edge, large index, lift on hover) */
.principles-grid {
  gap: clamp(12px, 1.4vw, 20px);
  border: 0;
}

.principle-card {
  position: relative;
  min-height: 230px;
  padding: 26px 24px 30px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--orange);
  box-shadow: 0 1px 0 rgba(0, 25, 84, 0.04);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-top-color 220ms ease;
}

.principle-card::after {
  position: absolute;
  right: 24px;
  bottom: 0;
  left: 24px;
  height: 2px;
  background: var(--orange);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms ease;
}

.principle-card:hover {
  border-top-color: var(--navy);
  box-shadow: 0 14px 30px rgba(0, 25, 84, 0.1);
  transform: translateY(-4px);
}

.principle-card:hover::after {
  transform: scaleX(1);
}

.principle-index {
  font-family: var(--font-main);
  font-size: clamp(34px, 3vw, 44px);
  font-weight: 700;
  line-height: 1;
  color: var(--orange);
}

.principle-card h3 {
  margin: 22px 0 10px;
}

@media (prefers-reduced-motion: reduce) {
  .principle-card,
  .principle-card::after {
    transition: none;
  }

  .principle-card:hover {
    transform: none;
  }
}

@media (max-width: 560px) {
  .principle-card {
    min-height: 0;
  }
}

/* Phones: no video, a portrait photo behind the hero text instead */
@media (max-width: 700px) {
  .page-home .hero {
    background: var(--navy-deep) url("/hogroup/assets/sekcie/domov-hero-mobil-zaber.jpg") center / cover no-repeat;
  }
  .page-home video.hero-media {
    display: none;
  }
}

/* Phones: reading text never below 17px (same as the "Naše skúsenosti" blocks), small labels never below 13px */
@media (max-width: 700px) {
  main .about-copy,
  main .about-copy-body,
  main .role-card p,
  main .text-link,
  main .certificates-heading,
  main .certificates-heading p {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }

  main .principle-card p,
  main .ref-card-team,
  main .team-card-copy,
  main .team-contact,
  main .certificate-links,
  main .reference-metric {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  main .eyebrow,
  main .mono,
  main .references-kicker,
  main .project-open,
  main .ref-card-mark {
    font-size: 13px !important;
  }

  .footer-legal,
  .footer-legal-links,
  .footer-contact-label,
  .footer-head,
  .back-to-top {
    font-size: 13px !important;
  }
}

/* Phones (SK/EN): Safari split headings mid-word ("FUNKČ/NÝ CELOK"), so never hyphenate or break inside a word; sizes keep the longest word on one line. DE keeps its own hyphenation rules. */
@media (max-width: 700px) {
  html:not([lang="de"]) h1,
  html:not([lang="de"]) h2,
  html:not([lang="de"]) h3 {
    -webkit-hyphens: manual !important;
    hyphens: manual !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* "Prediskutujme" is wider than a 390px phone at the default size */
  html:not([lang="de"]) .page-kontakt .page-head h1 {
    font-size: clamp(26px, 7.8vw, 52px) !important;
  }
}

/* Gallery: the team photos sit side by side in a row above the mosaic */
.project-mosaic.project-team {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.project-mosaic.project-team .project-card {
  margin: 0;
  aspect-ratio: 3 / 2;
}

.project-mosaic.project-team .project-card img {
  height: 100%;
}

@media (max-width: 700px) {
  .project-mosaic.project-team {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 8px;
  }

  /* 9 photos: the last one spans both columns so the row stays full */
  .project-mosaic.project-team .project-card:last-child {
    grid-column: 1 / -1;
  }
}