/* ==========================================================================
   Components
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 3rem;
  padding: 0 var(--s-5);
  border: 2px solid transparent;
  border-radius: var(--radius-1);
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out);
}

.btn__arrow {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  transition: transform var(--t-base) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

.btn--primary {
  background: var(--c-signal);
  color: var(--c-ink);
}

.btn--primary:hover {
  background: var(--c-signal-strong);
  text-decoration: none;
}

.btn--ghost {
  border-color: currentColor;
  background: transparent;
}

.btn--ghost:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-paper);
}

.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover {
  background: var(--c-paper);
  border-color: var(--c-paper);
  color: var(--c-ink);
}

.btn--dark {
  background: var(--c-ink);
  color: var(--c-paper);
}

.btn--dark:hover {
  background: var(--c-graphite);
}

.btn--sm {
  min-height: 2.5rem;
  padding: 0 var(--s-4);
}

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

@media (max-width: 29.99em) {
  .btn-row .btn {
    width: 100%;
  }
}

/* --- Text link with arrow ------------------------------------------------ */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 650;
  text-decoration: none;
  border-bottom: 2px solid var(--c-signal);
  padding-bottom: 2px;
}

.text-link:hover {
  border-bottom-color: currentColor;
}

/* --- Labels -------------------------------------------------------------- */
/* Kicker: mono label with index number, e.g. "02 — Leistungen" */
.kicker {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-steel);
}

.kicker__index {
  color: var(--c-ink);
}

.kicker::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--c-signal);
}

.section--dark .kicker,
.hero .kicker,
.page-hero .kicker {
  color: var(--c-steel-light);
}

.section--dark .kicker__index,
.hero .kicker__index,
.page-hero .kicker__index {
  color: var(--c-signal);
}

.lead {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--c-steel);
  max-width: 40rem;
}

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

.mono {
  font-family: var(--f-mono);
  font-size: 0.92em;
  letter-spacing: 0.02em;
}

.tag {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  background: var(--c-signal);
  color: var(--c-ink);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==========================================================================
   Home hero
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  min-height: min(92vh, 56rem);
  background: var(--c-ink);
  color: var(--c-paper);
  overflow: hidden;
  isolation: isolate;
}

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

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  transform: scale(1.06);
  transition: transform 2400ms var(--ease-out);
}

.hero.is-loaded .hero__media img {
  transform: scale(1);
}

/* Background video: sits on top of the photo and fades in once playable */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}

.hero.has-video .hero__video {
  opacity: 1;
}

/* Pause / play control (WCAG 2.2.2) */
.hero__video-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: 0 var(--s-4);
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: var(--radius-1);
  background: rgb(14 15 17 / 0.6);
  color: var(--c-paper);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.hero__video-toggle:hover {
  border-color: var(--c-signal);
  color: var(--c-signal);
}

.hero__video-toggle[hidden] {
  display: none;
}

.hero__video-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.hero__video-icon--play,
.hero__video-toggle.is-paused .hero__video-icon--pause {
  display: none;
}

.hero__video-toggle.is-paused .hero__video-icon--play {
  display: block;
}

/* Legibility: text sits on a solid-to-transparent ramp, never on busy image */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(14 15 17 / 0.94) 0%, rgb(14 15 17 / 0.82) 42%, rgb(14 15 17 / 0.25) 75%, rgb(14 15 17 / 0.1) 100%),
    linear-gradient(0deg, rgb(14 15 17 / 0.9) 0%, transparent 35%);
}

@media (max-width: 63.99em) {
  .hero::before {
    background: linear-gradient(0deg, rgb(14 15 17 / 0.96) 0%, rgb(14 15 17 / 0.82) 55%, rgb(14 15 17 / 0.45) 100%);
  }

  .hero__media img {
    object-position: 33% 60%;
  }
}

/* Desktop: split composition — solid text column, photo on the right
   framed so the cutting head and sparks stay visible. */
@media (min-width: 64em) {
  .hero__media {
    left: 46%;
  }

  .hero__media img {
    object-position: 30% 62%;
  }

  .hero::before {
    background:
      linear-gradient(90deg, var(--c-ink) 0%, var(--c-ink) 46%, rgb(14 15 17 / 0.55) 52%, rgb(14 15 17 / 0) 64%),
      linear-gradient(0deg, rgb(14 15 17 / 0.85) 0%, transparent 28%);
  }

}

.hero__inner {
  display: grid;
  align-content: end;
  gap: var(--s-6);
  padding-block: var(--s-9) var(--s-7);
}

/* The text column: on desktop it must end before the photo seam (46vw).
   Width = seam − container's left offset − breathing room. */
.hero__content,
.hero__ruler {
  max-width: 40rem;
}

@media (min-width: 64em) {
  .hero__inner {
    padding-block: var(--s-10) var(--s-8);
  }

  .hero__content,
  .hero__ruler {
    max-width: calc(46vw - 3rem - max(var(--gutter), (100vw - var(--container)) / 2));
  }
}

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

/* Second clause of the H1 sits on its own line, one step smaller */
.hero__title em {
  display: block;
  margin-top: 0.15em;
  font-size: 0.78em;
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 750;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

/* Narrower desktop column → slightly smaller display size */
@media (min-width: 64em) {
  .hero__title {
    font-size: clamp(2.25rem, 1rem + 2.4vw, 3.5rem);
  }
}

.hero__title em {
  font-style: normal;
  color: var(--c-signal);
}

.hero__lead {
  font-size: var(--fs-md);
  color: #d5d8dc;
}

/* Competence ruler: a horizontal scale under the CTAs, inside the dark
   text column (never on top of the photo) */
.hero__ruler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) 0;
  margin: 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--c-line-dark);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-steel-light);
}

.hero__ruler li {
  display: flex;
  align-items: center;
}

.hero__ruler li + li::before {
  content: "";
  width: 1px;
  height: 0.75rem;
  margin: 0 var(--s-3);
  background: var(--c-line-dark);
}

.hero__ruler li:first-child {
  color: var(--c-signal);
}

/* ==========================================================================
   Proof strip — facts directly under the hero
   ========================================================================== */

.proof-strip {
  background: var(--c-ink-2);
  color: var(--c-paper);
  border-top: 1px solid var(--c-line-dark);
}

.proof-strip__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

@media (min-width: 64em) {
  .proof-strip__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.proof-strip__item {
  display: grid;
  align-content: start;
  gap: var(--s-1);
  min-width: 0;
  padding: var(--s-5) var(--s-4);
  border-left: 1px solid var(--c-line-dark);
}

.proof-strip__item:nth-child(odd) {
  border-left: 0;
}

@media (min-width: 64em) {
  .proof-strip__item {
    padding: var(--s-6) var(--s-5);
  }

  .proof-strip__item:nth-child(odd) {
    border-left: 1px solid var(--c-line-dark);
  }

  .proof-strip__item:first-child {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 63.99em) {
  .proof-strip__item:nth-child(n + 3) {
    border-top: 1px solid var(--c-line-dark);
  }
}

.proof-strip__value {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-signal);
  font-variant-numeric: tabular-nums;
}

.proof-strip__item > * {
  min-width: 0;
}

/* Phones: two narrow columns — long German words must fit */
@media (max-width: 29.99em) {
  .proof-strip__value {
    font-size: 1.125rem;
    overflow-wrap: anywhere;
  }
}

.proof-strip__label {
  font-size: var(--fs-sm);
  color: var(--c-steel-light);
}

/* ==========================================================================
   Service finder — problem-led tabs ("Womit können wir helfen?")
   ========================================================================== */

.finder {
  display: grid;
  border: 1px solid var(--c-ink);
  background: var(--c-paper);
}

@media (min-width: 64em) {
  .finder {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.finder__tabs {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--c-ink);
}

@media (min-width: 64em) {
  .finder__tabs {
    border-bottom: 0;
    border-right: 1px solid var(--c-ink);
  }
}

.finder__tab {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 4rem;
  padding: var(--s-3) var(--s-5);
  border: 0;
  border-bottom: 1px solid var(--c-line);
  background: transparent;
  text-align: left;
  font-weight: 550;
  line-height: 1.35;
  transition: background-color var(--t-fast) var(--ease-out);
}

.finder__tabs li:last-child .finder__tab {
  border-bottom: 0;
}

.finder__tab:hover {
  background: var(--c-paper-2);
}

.finder__tab-index {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--c-steel);
}

.finder__tab-marker {
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid var(--c-steel);
}

.finder__tab[aria-selected="true"] {
  background: var(--c-ink);
  color: var(--c-paper);
}

.finder__tab[aria-selected="true"] .finder__tab-index {
  color: var(--c-signal);
}

.finder__tab[aria-selected="true"] .finder__tab-marker {
  border-color: var(--c-signal);
  background: var(--c-signal);
}

.finder__panel {
  display: grid;
  gap: var(--s-5);
  align-content: start;
  padding: var(--s-6) var(--s-5);
}

@media (min-width: 64em) {
  .finder__panel {
    padding: var(--s-7);
  }
}

.finder__panel h3 {
  font-size: var(--fs-lg);
}

.finder__panel[hidden] {
  display: none;
}

/* Without JS every panel is shown in sequence below the list */
.no-js .finder__tabs {
  display: none;
}

.no-js .finder__panel[hidden] {
  display: grid !important;
  border-top: 1px solid var(--c-line);
}

.spec-list {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--c-line);
}

.spec-list > div {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}

@media (min-width: 40em) {
  .spec-list > div {
    grid-template-columns: 9.5rem 1fr;
    gap: var(--s-4);
  }
}

.spec-list dt {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-steel);
  padding-top: 0.2em;
}

.spec-list dd {
  margin: 0;
}

.section--dark .spec-list,
.section--dark .spec-list > div {
  border-color: var(--c-line-dark);
}

.section--dark .spec-list dt {
  color: var(--c-steel-light);
}

/* ==========================================================================
   Media frame with corner registration marks
   ========================================================================== */

.frame {
  position: relative;
  margin: 0;
}

.frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--c-graphite);
}

.frame--wide img {
  aspect-ratio: 16 / 9;
}

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

.frame::before,
.frame::after {
  content: "";
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  border-color: var(--c-signal);
  border-style: solid;
  pointer-events: none;
}

.frame::before {
  top: -0.5rem;
  left: -0.5rem;
  border-width: 2px 0 0 2px;
}

.frame::after {
  right: -0.5rem;
  bottom: -0.5rem;
  border-width: 0 2px 2px 0;
}

.frame figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--c-steel);
}

.section--dark .frame figcaption {
  color: var(--c-steel-light);
}

/* Clearly marked placeholder for assets that still have to be supplied */
.asset-placeholder {
  display: grid;
  place-content: center;
  gap: var(--s-2);
  aspect-ratio: 4 / 3;
  padding: var(--s-5);
  border: 2px dashed var(--c-steel);
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgb(14 15 17 / 0.04) 12px 24px),
    var(--c-paper-2);
  color: var(--c-steel);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  text-align: center;
}

.asset-placeholder strong {
  color: var(--c-ink);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   Positioning block (about)
   ========================================================================== */

.facts-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--s-6);
  border-top: 1px solid var(--c-ink);
}

.facts-table > div {
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--c-line);
}

.facts-table dt {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-steel);
}

.facts-table dd {
  margin: var(--s-1) 0 0;
  font-weight: 600;
}

/* ==========================================================================
   Compatibility matrix
   ========================================================================== */

.compat {
  display: grid;
  border-top: 2px solid var(--c-ink);
}

.compat__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3) var(--s-4);
  align-items: center;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--c-line);
}

.compat__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  background: var(--c-signal-soft);
  color: var(--c-ink);
}

.compat__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.compat__cat {
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 700;
}

.compat__brands,
.compat__link {
  grid-column: 1 / -1;
}

@media (min-width: 64em) {
  .compat__row {
    grid-template-columns: 3rem 12rem minmax(0, 1fr) 11rem;
    gap: var(--s-5);
  }

  .compat__brands,
  .compat__link {
    grid-column: auto;
  }
}

.compat__brands {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
}

.compat__brands li {
  display: grid;
  place-items: center;
  min-height: 2.5rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--c-line);
  border-radius: 0.5rem;
  background: var(--c-paper);
  font-weight: 550;
  font-size: var(--fs-sm);
}

/* Logo tiles: equal height, logo scaled to fit */
.compat__brands .compat__logo,
.compat__brands .compat__name {
  min-width: 6.5rem;
  height: 3.25rem;
  padding: 0.5rem 0.875rem;
}

/* Wide wordmarks get up to 8.5rem, square marks up to 2.25rem tall */
.compat__logo img {
  width: auto;
  height: auto;
  max-width: 8.5rem;
  max-height: 1.75rem;
  object-fit: contain;
}

.compat__logo--square img {
  max-height: 2.25rem;
}

.compat__name {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.compat__link {
  font-size: var(--fs-sm);
  justify-self: start;
}

@media (min-width: 64em) {
  .compat__link {
    justify-self: end;
  }
}

.fineprint {
  margin-top: var(--s-5);
  font-size: var(--fs-xs);
  color: var(--c-steel);
  max-width: 48rem;
}

.section--dark .fineprint {
  color: var(--c-steel-light);
}

/* ==========================================================================
   Process timeline
   ========================================================================== */

.process {
  position: relative;
  display: grid;
  gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 64em) {
  .process {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--s-5);
  }
}

/* The measuring line that draws itself across the steps */
.process__line {
  position: absolute;
  top: 1.25rem;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-line-dark);
  display: none;
}

.process__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-signal);
  transform: scaleX(var(--progress, 1));
  transform-origin: left;
  transition: transform 1400ms var(--ease-in-out);
}

@media (min-width: 64em) {
  .process__line {
    display: block;
  }
}

.process__step {
  position: relative;
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding-left: var(--s-7);
}

@media (min-width: 64em) {
  .process__step {
    padding-left: 0;
    padding-top: var(--s-8);
  }
}

.process__num {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--c-signal);
  color: var(--c-ink);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
}

@media (max-width: 63.99em) {
  .process__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 1.25rem;
    top: 2.5rem;
    bottom: calc(-1 * var(--s-6));
    width: 2px;
    background: var(--c-line-dark);
  }
}

.process__step h3 {
  font-size: var(--fs-md);
}

.process__step p {
  font-size: var(--fs-sm);
  color: var(--c-steel-light);
}

.section:not(.section--dark) .process__step p {
  color: var(--c-steel);
}

.section:not(.section--dark) .process__line,
.section:not(.section--dark) .process__step::before {
  background: var(--c-line);
}

/* ==========================================================================
   Case sheet — engineering evidence layout
   ========================================================================== */

.case-sheet {
  display: grid;
  border: 1px solid var(--c-ink);
  background: var(--c-paper);
}

@media (min-width: 64em) {
  .case-sheet {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  }
}

.case-sheet__media {
  position: relative;
  min-height: 18rem;
  background: var(--c-ink);
}

.case-sheet__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-sheet__media .tag {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
}

.case-sheet__body {
  display: grid;
  gap: var(--s-5);
  align-content: start;
  padding: var(--s-6) var(--s-5);
}

@media (min-width: 64em) {
  .case-sheet__body {
    padding: var(--s-7);
  }
}

.case-sheet__title {
  font-size: var(--fs-lg);
}

.case-sheet__meta {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--c-steel);
  letter-spacing: 0.04em;
}

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

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

.case-card {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  border-top: 2px solid var(--c-ink);
  padding-top: var(--s-4);
}

.case-card h3 a {
  text-decoration: none;
}

.case-card h3 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--c-signal);
}

/* ==========================================================================
   Technology comparison (CO2 vs fibre)
   ========================================================================== */

.tech-compare {
  display: grid;
  gap: 1px;
  background: var(--c-line-dark);
  border: 1px solid var(--c-line-dark);
}

@media (min-width: 48em) {
  .tech-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tech-compare__col {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: var(--s-6) var(--s-5);
  background: var(--c-ink);
}

@media (min-width: 64em) {
  .tech-compare__col {
    padding: var(--s-7);
  }
}

.tech-compare__col h3 {
  font-size: var(--fs-lg);
}

.tech-compare__col h3 span {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-signal);
}

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

.tick-list li {
  position: relative;
  padding-left: var(--s-5);
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.75rem;
  height: 2px;
  background: var(--c-signal);
}

/* ==========================================================================
   Enquiry panel + checklist
   ========================================================================== */

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

@media (min-width: 64em) {
  .enquiry {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-9);
    align-items: start;
  }
}

.enquiry__title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
}

.enquiry__title em {
  font-style: normal;
  color: var(--c-signal);
}

.checklist {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: check;
  border-top: 1px solid var(--c-line-dark);
}

/* The number sits in a fixed slot on the left; the whole text (including
   bold parts and links) flows as one block beside it. A grid would turn each
   inline element into its own cell and break the row. */
.checklist li {
  position: relative;
  padding: var(--s-4) 0 var(--s-4) calc(2.5rem + var(--s-3));
  border-bottom: 1px solid var(--c-line-dark);
  counter-increment: check;
}

.checklist li::before {
  content: counter(check, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: calc(var(--s-4) + 0.3em);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  line-height: 1;
  color: var(--c-signal);
}

.section:not(.section--dark) .checklist,
.section:not(.section--dark) .checklist li {
  border-color: var(--c-line);
}

.section:not(.section--dark) .checklist li::before {
  color: var(--c-steel);
}

.contact-lines {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}

.contact-lines a {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 650;
  text-decoration: none;
}

.contact-lines a:hover {
  text-decoration: underline;
  text-decoration-color: var(--c-signal);
}

.contact-lines small {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--c-steel-light);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.section:not(.section--dark) .contact-lines small {
  color: var(--c-steel);
}

/* ==========================================================================
   Inner page hero + breadcrumbs
   ========================================================================== */

.page-hero {
  position: relative;
  padding-block: var(--s-8) var(--s-8);
  background: var(--c-ink);
  color: var(--c-paper);
  overflow: hidden;
  isolation: isolate;
}

.page-hero--image .page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-hero--image .page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(14 15 17 / 0.95) 0%, rgb(14 15 17 / 0.8) 55%, rgb(14 15 17 / 0.4) 100%);
}

.page-hero__inner {
  display: grid;
  gap: var(--s-5);
  max-width: 54rem;
}

.page-hero h1 {
  font-size: var(--fs-2xl);
}

.page-hero .lead {
  color: #d5d8dc;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--c-steel-light);
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--s-2);
  color: var(--c-steel);
}

.breadcrumbs a {
  color: var(--c-steel-light);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--c-paper);
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--c-paper);
}

/* ==========================================================================
   Service index (services hub)
   ========================================================================== */

.service-index {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--c-ink);
}

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

@media (min-width: 64em) {
  .service-index__item {
    grid-template-columns: 4rem minmax(0, 4fr) minmax(0, 5fr) 11rem;
    gap: var(--s-6);
    align-items: start;
  }
}

.service-index__num {
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  color: var(--c-steel);
}

.service-index__item h3 {
  font-size: var(--fs-lg);
}

.service-index__item h3 a {
  text-decoration: none;
}

.service-index__item h3 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--c-signal);
}

.service-index__problem {
  font-size: var(--fs-sm);
  color: var(--c-steel);
}

.service-index__problem strong {
  display: block;
  color: var(--c-ink);
}

.service-index__status {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--c-steel);
}

@media (min-width: 64em) {
  .service-index__status {
    justify-self: end;
    text-align: right;
  }
}

.service-group-title {
  margin: var(--s-8) 0 var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-steel);
}

.service-group-title:first-child {
  margin-top: 0;
}

/* ==========================================================================
   Long-form content (service detail, legal pages)
   ========================================================================== */

.prose {
  max-width: 44rem;
}

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

.prose h2 {
  margin-top: var(--s-8);
  font-size: var(--fs-xl);
}

.prose h3 {
  margin-top: var(--s-6);
  font-size: var(--fs-md);
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

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

.prose .tick-list,
.prose .checklist {
  padding-left: 0;
}

.prose .checklist li + li,
.prose .tick-list li + li {
  margin-top: 0;
}

.prose address {
  font-style: normal;
}

.prose table {
  font-size: var(--fs-sm);
}

.prose th,
.prose td {
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}

.prose th {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-steel);
  border-bottom: 2px solid var(--c-ink);
}

/* Tables must scroll inside themselves on phones, never the page */
@media (max-width: 47.99em) {
  .prose table {
    display: block;
    overflow-x: auto;
  }
}

.content-layout {
  display: grid;
  gap: var(--s-8);
}

@media (min-width: 64em) {
  .content-layout {
    grid-template-columns: minmax(0, 1fr) 25rem;
    gap: var(--s-8);
    align-items: start;
  }
}

.aside-card {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border-top: 4px solid var(--c-signal);
  background: var(--c-paper-2);
}

@media (min-width: 64em) {
  .aside-card {
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
  }
}

.aside-card h2 {
  font-size: var(--fs-md);
}

.aside-card > * {
  min-width: 0;
}

/* Long e-mail addresses in the narrow sidebar */
.aside-card .contact-lines a {
  font-size: var(--fs-md);
  overflow-wrap: anywhere;
}

/* Legal placeholder marker — must be empty before launch */
.todo {
  display: inline;
  padding: 0 0.3em;
  background: #ffe8a3;
  color: var(--c-ink);
  outline: 1px dashed #8a6d00;
  font-family: var(--f-mono);
  font-size: 0.9em;
}

/* ==========================================================================
   FAQ — native <details>
   ========================================================================== */

.faq {
  border-top: 2px solid var(--c-ink);
}

.faq details {
  border-bottom: 1px solid var(--c-line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--f-mono);
  font-weight: 400;
  color: var(--c-steel);
}

.faq details[open] summary::after {
  content: "−";
}

.faq details > div {
  padding-bottom: var(--s-5);
  max-width: 44rem;
  color: var(--c-steel);
}

/* ==========================================================================
   Before / after comparison slider
   ========================================================================== */

.compare {
  position: relative;
  --pos: 50%;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--c-graphite);
  user-select: none;
}

.compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare__img--after {
  clip-path: inset(0 0 0 var(--pos));
}

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: var(--c-signal);
  pointer-events: none;
}

.compare__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  translate: -50% -50%;
  background: var(--c-signal);
}

.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.compare__range:focus-visible + .compare__handle::after {
  outline: 3px solid var(--c-paper);
}

.compare__label {
  position: absolute;
  bottom: var(--s-3);
  padding: 0.2rem 0.5rem;
  background: rgb(14 15 17 / 0.8);
  color: var(--c-paper);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
}

.compare__label--before {
  left: var(--s-3);
}

.compare__label--after {
  right: var(--s-3);
}

/* ==========================================================================
   Forms
   ========================================================================== */

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

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

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

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

.field label,
.field legend {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.field__optional {
  font-weight: 400;
  color: var(--c-steel);
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--c-steel);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-steel);
  border-radius: var(--radius-1);
  background: var(--c-paper);
  color: var(--c-ink);
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--c-signal);
  outline-offset: 0;
  box-shadow: none;
  border-color: var(--c-ink);
}

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

.field__error {
  display: flex;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-error);
}

.field__error::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--c-error);
  color: var(--c-paper);
  font-size: var(--fs-xs);
}

.field__error:empty {
  display: none;
}

.checkbox {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-sm);
}

.checkbox input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--c-ink);
}

/* Honeypot: off-screen for humans, still present for naive bots */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  padding: var(--s-4);
  border-left: 4px solid currentColor;
  font-weight: 600;
}

.form-status:empty {
  display: none;
}

.form-status[data-state="error"] {
  color: var(--c-error);
  background: #fbeaea;
}

.form-status[data-state="success"] {
  color: var(--c-success);
  background: #e8f3ec;
}

.form-status[data-state="pending"] {
  color: var(--c-steel);
  background: var(--c-paper-2);
}

/* ==========================================================================
   Consent dialog
   ========================================================================== */

.consent {
  position: fixed;
  left: var(--s-4);
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 500;
  max-width: 34rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: var(--s-5);
  border-top: 4px solid var(--c-signal);
  background: var(--c-ink);
  color: var(--c-paper);
  box-shadow: 0 12px 48px rgb(0 0 0 / 0.35);
}

@media (min-width: 48em) {
  .consent {
    left: var(--s-5);
    bottom: var(--s-5);
  }
}

.consent h2 {
  font-size: var(--fs-md);
  margin-bottom: var(--s-3);
}

.consent p {
  font-size: var(--fs-sm);
  color: var(--c-steel-light);
}

.consent a {
  color: var(--c-paper);
}

.consent__categories {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-4) 0;
  padding: 0;
  border: 0;
}

.consent__category {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--c-line-dark);
  font-size: var(--fs-sm);
}

.consent__category input {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  accent-color: var(--c-signal);
}

.consent__category span {
  display: block;
  color: var(--c-steel-light);
}

/* Accept and reject are equally prominent — reject is never hidden */
.consent__actions {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

@media (min-width: 30em) {
  .consent__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.consent__actions .btn {
  width: 100%;
}

.consent .btn--ghost {
  color: var(--c-paper);
}

/* Consent-gated embed placeholder */
.embed-gate {
  display: grid;
  place-content: center;
  gap: var(--s-3);
  aspect-ratio: 16 / 9;
  padding: var(--s-5);
  background: var(--c-ink-2);
  color: var(--c-paper);
  text-align: center;
  font-size: var(--fs-sm);
}


/* ==========================================================================
   Gallery
   ========================================================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--s-5);
}

.gallery-item {
  margin: 0;
  display: grid;
  gap: var(--s-2);
  align-content: start;
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 35%;
  background: var(--c-graphite);
}

.gallery-item figcaption {
  padding-left: var(--s-3);
  border-left: 3px solid var(--c-signal);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

/* Jump links (e.g. gallery sections) */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip-list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--s-4);
  border: 1px solid var(--c-line-dark);
  color: var(--c-paper);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.chip-list a:hover {
  border-color: var(--c-signal);
  color: var(--c-signal);
}

/* Sidebar photo: full card width, edge to edge (no corner brackets) */
.aside-card .frame {
  margin-inline: calc(-1 * var(--s-5));
}

.aside-card .frame::before,
.aside-card .frame::after {
  display: none;
}

.aside-card .frame img {
  aspect-ratio: 4 / 3;
}


/* ==========================================================================
   Home: What we do — sticky split
   Left: heading, lead and CTAs pinned while the service list scrolls (≥ 64em).
   Right: borderless icon list; the whole item is the link (stretched link).
   ========================================================================== */

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

.svc-split__sticky .btn-row {
  margin-top: var(--s-2);
}

.svc-list {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--s-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-item {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-5) 0 var(--s-6);
  border-top: 1px solid var(--c-line);
}

/* Yellow bar grows along the top edge on hover/focus */
.svc-item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--c-signal);
  transition: width var(--t-base) var(--ease-out);
}

.svc-item:hover::before,
.svc-item:focus-within::before {
  width: 100%;
}

.svc-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.svc-item__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  background: var(--c-signal);
  color: var(--c-ink);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.svc-item__icon-svg {
  width: 1.375rem;
  height: 1.375rem;
}

.svc-item:hover .svc-item__icon,
.svc-item:focus-within .svc-item__icon {
  background: var(--c-ink);
  color: var(--c-signal);
}

.svc-item__num {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--c-steel);
}

.svc-item h3 {
  font-size: var(--fs-md);
}

.svc-item__link {
  color: inherit;
  text-decoration: none;
}

.svc-item__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.svc-item__link:focus-visible {
  outline: none;
}

.svc-item:has(.svc-item__link:focus-visible) {
  outline: 3px solid var(--c-ink);
  outline-offset: 4px;
}

.svc-item p {
  font-size: var(--fs-sm);
  color: var(--c-steel);
}

@media (min-width: 40em) {
  .svc-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .svc-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-8);
  }

  .svc-split__sticky {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-item::before {
    transition: none;
  }
}

/* ==========================================================================
   Home: Why Laser Experts
   ========================================================================== */

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--s-6) var(--s-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.why-grid__item {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line-dark);
}


.why-grid__item h3 {
  font-size: var(--fs-md);
}

.why-grid__item p {
  font-size: var(--fs-sm);
  color: var(--c-steel-light);
}

.why-grid__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--s-2);
  border: 1px solid var(--c-graphite);
  border-radius: 0.875rem;
  color: var(--c-signal);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

.why-grid__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.why-grid__item:hover .why-grid__icon {
  background: var(--c-signal);
  border-color: var(--c-signal);
  color: var(--c-ink);
}

/* Key figures above the grid: big yellow values, readable at a glance */
.why-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin: var(--s-7) 0 0;
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line-dark);
}

.why-stats__item {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--s-2);
}

.why-stats dd {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-signal);
}

.why-stats dt {
  font-size: var(--fs-sm);
  color: var(--c-steel-light);
}

@media (min-width: 48em) {
  .why-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-6);
  }

  .why-stats__item + .why-stats__item {
    padding-left: var(--s-6);
    border-left: 1px solid var(--c-line-dark);
  }
}

/* ==========================================================================
   Home: Our network
   ========================================================================== */

.network-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.network-grid__item {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-signal);
}

.network-grid__logo {
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: var(--s-3);
  border-radius: 50%;
  object-fit: contain;
}

.network-grid__place {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-steel);
}

.network-grid__item h3 {
  font-size: var(--fs-md);
}

.network-grid__item p:not(.network-grid__place) {
  font-size: var(--fs-sm);
  color: var(--c-steel);
}

.network-grid__item .text-link {
  justify-self: start;
  font-size: var(--fs-sm);
}

/* Fixed column counts: 3 network cards → 1 × 3 */
@media (min-width: 40em) {
  .network-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* Four-step process variant */
@media (min-width: 64em) {
  .process--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* ==========================================================================
   Hero — card variant (centred, rounded, full-bleed media)
   ========================================================================== */

/* The whole card — including its rounded bottom corners — fits the visible
   screen below the top bar (2.5rem) and header. */
.hero--card {
  --card-gap: var(--s-3);
  --card-radius: 1rem;
  margin: var(--card-gap) var(--card-gap) 0;
  border-radius: var(--card-radius);
  /* clip-path keeps the video inside the rounded corners in every browser */
  clip-path: inset(0 round var(--card-radius));
  /* Nearly fill the screen below the header (next section peeks in); grow if the content needs more room */
  min-height: clamp(32rem, calc(100svh - var(--header-h) - var(--card-gap) - 3rem), 54rem);
}

@media (min-width: 48em) {
  .hero--card {
    --card-gap: var(--s-5);
    --card-radius: 1.75rem;
  }
}

/* Phones: the top bar wraps to two lines (≈ 4.25rem) */
@media (max-width: 47.99em) {
  .hero--card {
    min-height: clamp(27rem, calc(100svh - var(--header-h) - 4rem - var(--card-gap)), 54rem);
  }

  .hero--card .hero__title {
    font-size: clamp(1.875rem, 1.2rem + 3.4vw, 2.5rem);
  }

  .hero--card .hero__lead {
    font-size: var(--fs-base);
  }

  .hero--card .hero__inner {
    padding-block: var(--s-6) var(--s-8);
  }
}

/* Media fills the whole card (overrides the split layout) */
.hero--card .hero__media {
  left: 0;
}

.hero--card .hero__media img {
  object-position: 50% 55%;
}

/* Even darkening, a little stronger behind the centred text */
.hero--card::before {
  background:
    radial-gradient(ellipse 60% 55% at 50% 52%, rgb(14 15 17 / 0.55) 0%, rgb(14 15 17 / 0.25) 100%),
    linear-gradient(180deg, rgb(14 15 17 / 0.45) 0%, rgb(14 15 17 / 0.35) 50%, rgb(14 15 17 / 0.6) 100%);
}

.hero--card .hero__inner {
  align-content: center;
  justify-items: center;
  padding-block: var(--s-9);
  text-align: center;
}

.hero--card .hero__content {
  max-width: 54rem;
  justify-items: center;
  gap: var(--s-5);
}

.hero--card .hero__title {
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem);
  line-height: 1.05;
  text-wrap: balance;
}

.hero--card .hero__lead {
  max-width: 44rem;
  font-size: var(--fs-md);
  color: #e6e8ea;
  text-wrap: balance;
}

.hero--card .btn-row {
  justify-content: center;
  margin-top: var(--s-2);
}

.hero--card .hero__video-toggle {
  right: var(--s-5);
  bottom: var(--s-5);
}

/* Large buttons */
.btn--lg {
  min-height: 3.5rem;
  padding: 0 var(--s-6);
  font-size: var(--fs-base);
}

.btn__play {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
}

/* Play icon: one path, triangle cut out (evenodd) - the button background
   always shows through, so it is correct in normal, hover and focus states. */

.no-js [data-video-dialog-open] {
  display: none;
}

/* ==========================================================================
   Video dialog
   ========================================================================== */

.video-dialog {
  width: min(94vw, 72rem);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-top: 3px solid var(--c-signal);
  background: var(--c-ink);
  color: var(--c-paper);
}

.video-dialog::backdrop {
  background: rgb(0 0 0 / 0.82);
}

.video-dialog__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
}

.video-dialog__title {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.video-dialog__close {
  min-height: 2.75rem;
  padding: 0 var(--s-4);
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--c-paper);
  font-size: var(--fs-sm);
}

.video-dialog__close:hover {
  border-color: var(--c-signal);
  color: var(--c-signal);
}

.video-dialog__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* ==========================================================================
   Language switch in the top bar (desktop); in the header on phones
   ========================================================================== */

.utility-bar .lang-switch {
  display: none;
}

.utility-bar .lang-switch a {
  min-height: 2rem;
  color: var(--c-steel-light);
}

.utility-bar .lang-switch a[aria-current="true"] {
  color: var(--c-paper);
}

.utility-bar .lang-switch li + li::before {
  color: var(--c-line-dark);
}

@media (min-width: 48em) {
  .utility-bar .lang-switch {
    display: flex;
  }

  .header-actions .lang-switch {
    display: none;
  }
}

/* Top bar: e-mail and language grouped on the right */
.utility-bar__links {
  margin-left: auto;
}



/* ==========================================================================
   Dropdown menus — card style (rounded, soft shadow, rows with arrows)
   ========================================================================== */

.subnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 3rem;
  padding: 0.8rem 0.25rem;
  border-left: 0;
  border-bottom: 1px solid var(--c-line);
  background: none;
  color: var(--c-ink);
  font-size: var(--fs-base);
  font-weight: 500;
  white-space: nowrap;
}

.subnav__list > li:last-child > .subnav__link {
  border-bottom: 0;
}

.subnav__link:hover,
.subnav__link[aria-current="page"] {
  background: none;
  border-left: 0;
}

.subnav__link[aria-current="page"] span {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--c-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.subnav__arrow {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform var(--t-fast) var(--ease-out);
}

.subnav__link:hover .subnav__arrow,
.subnav__footer:hover .subnav__arrow {
  transform: translateX(3px);
}

.subnav__footer {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding: var(--s-4) 0.25rem var(--s-1);
  border-top: 1px solid var(--c-line);
  color: var(--c-ink);
  font-size: var(--fs-base);
  font-weight: 500;
  text-decoration: none;
}

.subnav__footer .subnav__arrow {
  width: 0.875rem;
  height: 0.875rem;
}

.subnav__footer:hover {
  text-decoration: underline;
  text-decoration-color: var(--c-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

@media (min-width: 64em) {
  .subnav {
    min-width: 19rem;
    padding: var(--s-3) var(--s-5) var(--s-4);
    border: 1px solid rgb(14 15 17 / 0.06);
    border-top: 1px solid rgb(14 15 17 / 0.06);
    border-radius: 0.875rem;
    box-shadow: 0 24px 56px rgb(14 15 17 / 0.16), 0 2px 8px rgb(14 15 17 / 0.06);
  }

  .subnav::before {
    top: -0.9rem;
  }
}

/* Drawer (phones/tablets): same rows, indented under the section */
@media (max-width: 63.99em) {
  .subnav {
    padding: 0 0 var(--s-3) var(--s-3);
  }

  .subnav__link {
    font-size: var(--fs-base);
  }
}

/* ==========================================================================
   Two-tone headings: <span class="hl"> marks the key phrase in brand yellow.
   Client decision: #FFC700 also on white (1.6 : 1 — below the WCAG 3 : 1
   minimum for large text; see docs/01-design-system.md).
   ========================================================================== */

.hl {
  color: var(--c-signal);
}

/* ==========================================================================
   Home: section bridge — ends each section with a lead-in to the next one.
   A yellow line runs from the link down to the section edge, in line with
   the kicker dash that opens the next section.
   ========================================================================== */

.section-next {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-7);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.section-next::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: calc(100% + var(--s-3));
  width: 1px;
  height: calc(var(--section-y) - var(--s-3));
  background: linear-gradient(var(--c-signal), transparent);
  pointer-events: none;
}

.section-next__index {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-steel);
}

.section--dark .section-next__index {
  color: var(--c-signal);
}

.section-next__arrow {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--c-signal);
  color: var(--c-ink);
  transition: transform var(--t-fast) var(--ease-out);
}

.section-next:hover {
  text-decoration: underline;
  text-decoration-color: var(--c-signal);
  text-underline-offset: 0.25em;
}

.section-next:hover .section-next__arrow {
  transform: translateY(3px);
}

@media (prefers-reduced-motion: reduce) {
  .section-next:hover .section-next__arrow {
    transform: none;
  }
}

/* Bridges alternate left / right, so the line zig-zags down the page */
.section-next {
  display: flex;
  width: fit-content;
}

.section-next--right {
  margin-left: auto;
}

.section-next--right::after {
  left: auto;
  right: 0.875rem;
}

/* The line draws downward when the bridge scrolls into view */
.section-next::after {
  transform: scaleY(var(--progress, 1));
  transform-origin: top;
  transition: transform 0.9s var(--ease-out) 0.15s;
}

/* Partner rows (company page): logo in the icon slot */
.compat__icon--logo {
  overflow: hidden;
  border-radius: 50%;
  background: none;
}

.compat__icon--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Description paragraph in partner rows spans like the brand list */
.compat__row > p {
  grid-column: 1 / -1;
}

@media (min-width: 64em) {
  .compat__row > p {
    grid-column: auto;
  }
}

/* ==========================================================================
   Home: service process — numbered photo cards joined by arrow lines
   Animation (motion allowed): cards rise in one after another, then each
   connector line draws toward the next step.
   ========================================================================== */

.psteps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6) var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.psteps__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.psteps__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--c-signal);
  color: var(--c-ink);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* Connector line with an arrowhead pointing at the next step */
.psteps__line {
  position: relative;
  flex: 1;
  height: 2px;
}

.psteps__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-signal);
  transform-origin: left;
  transition: transform 0.8s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0ms) + 350ms);
}

.psteps__line::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid var(--c-signal);
  border-right: 2px solid var(--c-signal);
  transform: translateY(-50%) rotate(45deg);
  transition: opacity 0.2s linear;
  transition-delay: calc(var(--reveal-delay, 0ms) + 1100ms);
}

.psteps__item:last-child .psteps__line::before {
  display: none;
}

.motion-ok .psteps__item .psteps__line::after {
  transform: scaleX(0);
}

.motion-ok .psteps__item .psteps__line::before {
  opacity: 0;
}

.motion-ok .psteps__item.is-visible .psteps__line::after {
  transform: scaleX(1);
}

.motion-ok .psteps__item.is-visible .psteps__line::before {
  opacity: 1;
}

/* Item = number row + card; the card fills the rest so all cards end level */
.psteps__item {
  display: flex;
  flex-direction: column;
}

.psteps__card {
  flex: 1;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 1rem;
  background: var(--c-paper);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.psteps__item:hover .psteps__card {
  transform: translateY(-4px);
  border-color: var(--c-signal);
  box-shadow: var(--shadow-1), 0 14px 32px rgb(14 15 17 / 0.08);
}

.psteps__img {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--c-paper-2);
}

.psteps__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.psteps__item:hover .psteps__img img {
  transform: scale(1.05);
}

.psteps__body {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5) var(--s-5);
}

.psteps__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--s-1);
  border-radius: 50%;
  background: var(--c-signal-soft);
  color: var(--c-ink);
  transition: background-color var(--t-fast) var(--ease-out);
}

.psteps__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.psteps__item:hover .psteps__icon {
  background: var(--c-signal);
}

.psteps__body h3 {
  font-size: var(--fs-md);
}

.psteps__body p {
  font-size: var(--fs-sm);
  color: var(--c-steel);
}

@media (min-width: 40em) {
  .psteps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .psteps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Lines reach across the gap to the next number */
  .psteps__line {
    margin-right: calc(-1 * var(--s-5) + var(--s-2));
  }

  .psteps__item:last-child .psteps__line {
    margin-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .psteps__item:hover .psteps__card,
  .psteps__item:hover .psteps__img img {
    transform: none;
  }
}

/* ==========================================================================
   Home: Our work — case-study carousel
   Markup: build/case-studies.mjs · behaviour: js/carousel.js
   Photo left | metadata, title, yellow accent, icon rows right.
   Slides share one grid cell (no layout shift); the navigation bar with the
   progress line is fixed at the bottom of the information column.
   ========================================================================== */

.case-carousel {
  --case-pad: var(--s-5);
  --case-nav-h: 4.75rem;
}

.case-carousel__viewport {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 1.25rem;
  background: var(--c-paper);
  box-shadow: var(--shadow-1);
}

.case-carousel__track {
  display: grid;
  grid-template-areas: "slide";
}

.case-slide {
  grid-area: slide;
  display: grid;
  background: var(--c-paper);
}

.case-slide[hidden] {
  display: none;
}

/* With JS: only the active slide (and the one leaving) is visible */
.case-carousel.is-ready .case-slide:not(.is-active):not(.is-leaving) {
  visibility: hidden;
}

/* Horizontal slide transition */
.case-carousel.is-ready .case-slide {
  transition: transform var(--carousel-transition, 750ms) cubic-bezier(0.65, 0, 0.35, 1);
}

.case-slide.is-enter-right { transform: translateX(100%); transition: none !important; }
.case-slide.is-enter-left { transform: translateX(-100%); transition: none !important; }
.case-slide.is-leave-left { transform: translateX(-100%); }
.case-slide.is-leave-right { transform: translateX(100%); }

/* Text follows the image with a slight delay */
.case-carousel.is-ready .case-slide.is-active .case-slide__body > * {
  animation: case-text-in 600ms ease-out 250ms both;
}

@keyframes case-text-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}

.case-slide__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  background: var(--c-paper-2);
}

.case-slide__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-slide__media .tag {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  font-weight: 700;
}

.case-slide__body {
  display: grid;
  align-content: center;
  gap: var(--s-3);
  padding: var(--case-pad) var(--case-pad) calc(var(--case-nav-h) + var(--s-2));
}

.case-slide__meta {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-steel);
}

/* Title with a short yellow accent bar below */
.case-slide__title {
  padding-bottom: var(--s-3);
  font-size: var(--fs-lg);
  line-height: 1.2;
  background: linear-gradient(var(--c-signal), var(--c-signal)) left bottom / 3.5rem 3px no-repeat;
}

.case-slide__title a {
  color: inherit;
  text-decoration: none;
}

.case-slide__title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--c-signal);
  text-underline-offset: 0.2em;
}

/* Icon rows: icon | label | text (label above text on phones) */
.case-rows {
  margin: 0;
}

.case-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--s-3);
  row-gap: 0.1rem;
  align-items: center;
  padding-block: var(--s-2);
  border-top: 1px solid var(--c-line);
}

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

.case-row__icon {
  grid-row: span 2;
  align-self: start;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c-signal-soft);
  color: var(--c-ink);
}

.case-row__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.case-row dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-steel);
}

.case-row dd {
  margin: 0;
  font-size: var(--fs-sm);
}

.case-slide__source {
  font-size: var(--fs-xs);
  color: var(--c-steel);
}

/* Navigation: ←  01 ━━━━━━──── 04  →  ‖  (bottom of the information column) */
.case-carousel__nav {
  position: absolute;
  left: var(--case-pad);
  right: var(--case-pad);
  bottom: var(--s-4);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.case-carousel__nav[hidden] {
  display: none;
}

.case-carousel__btn,
.case-carousel__pause {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: 0.5rem;
  background: var(--c-paper);
  color: var(--c-ink);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

.case-carousel__btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.case-carousel__btn:hover,
.case-carousel__pause:hover {
  border-color: var(--c-signal);
  background: var(--c-signal);
}

.case-carousel__btn:focus-visible,
.case-carousel__pause:focus-visible {
  outline: 3px solid var(--c-ink);
  outline-offset: 2px;
}

.case-carousel__pause {
  margin-left: auto;
  border-color: transparent;
}

.case-carousel__pause[hidden] {
  display: none;
}

/* Pause icon (two bars) / play icon (triangle) */
.case-carousel__pause-icon {
  width: 0.625rem;
  height: 0.75rem;
  border-inline: 3px solid currentColor;
}

.case-carousel__pause[aria-pressed="true"] .case-carousel__pause-icon {
  width: 0;
  height: 0;
  border: 0;
  border-left: 0.7rem solid currentColor;
  border-block: 0.4rem solid transparent;
}

.case-carousel__progress {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: 16rem;
}

.case-carousel__num {
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-ink);
}

.case-carousel__num--total {
  font-weight: 400;
  color: var(--c-steel);
}

.case-carousel__bar {
  position: relative;
  flex: 1;
  height: 2px;
  overflow: hidden;
  background: var(--c-line);
}

.case-carousel__bar span {
  position: absolute;
  inset: 0;
  background: var(--c-signal);
  transform: scaleX(0);
  transform-origin: left;
}

.case-carousel.is-running .case-carousel__bar span {
  animation: case-progress var(--carousel-delay, 6s) linear forwards;
}

.case-carousel.is-paused .case-carousel__bar span {
  animation-play-state: paused;
}

@keyframes case-progress {
  to { transform: scaleX(1); }
}

/* Tablet: two columns while there is room */
@media (min-width: 48em) {
  .case-carousel {
    --case-pad: var(--s-6);
  }

  .case-slide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .case-slide__media {
    aspect-ratio: auto;
    min-height: 100%;
  }

  .case-carousel__nav {
    left: calc(50% + var(--case-pad));
  }

  .case-row {
    grid-template-columns: 2.5rem 6.5rem minmax(0, 1fr);
    row-gap: 0;
  }

  .case-row__icon {
    grid-row: auto;
    align-self: center;
  }
}

/* Desktop */
@media (min-width: 64em) {
  .case-carousel {
    --case-pad: var(--s-7);
  }

  .case-slide__body {
    padding-top: var(--s-6);
  }

  .case-row {
    grid-template-columns: 2.5rem 7rem minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-carousel.is-ready .case-slide {
    transition: none;
  }

  .case-carousel.is-ready .case-slide.is-active .case-slide__body > * {
    animation: none;
  }
}

/* ==========================================================================
   Home: technical enquiry (compact) — heading | short text, one CTA, contact line
   ========================================================================== */

.enquiry--compact {
  align-items: center;
  gap: var(--s-6);
}

.enquiry--compact .enquiry__side {
  display: grid;
  justify-items: start;
  gap: var(--s-4);
}

.enquiry--compact .enquiry__title {
  font-size: var(--fs-xl);
  line-height: 1.1;
  max-width: 18ch;
}

.enquiry__lead {
  max-width: 44ch;
  color: var(--c-steel-light);
}

.enquiry--compact .btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.enquiry__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

.enquiry__contacts a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.enquiry__contacts a:hover {
  text-decoration: underline;
  text-decoration-color: var(--c-signal);
  text-underline-offset: 0.2em;
}

.enquiry__contacts svg {
  width: 1rem;
  height: 1rem;
  color: var(--c-signal);
}

.enquiry__contacts small {
  font-weight: 400;
  color: var(--c-steel-light);
}

@media (min-width: 64em) {
  .enquiry--compact {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-8);
  }

  .enquiry--compact .enquiry__title {
    max-width: 16ch;
  }

}

/* Home enquiry band: laser-cutting photo behind a dark fade, tighter padding */
.section--cta {
  padding-block: var(--s-8);
  background:
    linear-gradient(90deg, var(--c-ink) 0%, rgb(14 15 17 / 0.92) 40%, rgb(14 15 17 / 0.72) 100%),
    url("/assets/images/hero-laser-cutting-head.jpg") center / cover no-repeat,
    var(--c-ink);
}

@media (max-width: 47.99em) {
  .section--cta {
    padding-block: var(--s-7);
    background:
      linear-gradient(rgb(14 15 17 / 0.9), rgb(14 15 17 / 0.9)),
      url("/assets/images/hero-laser-cutting-head.jpg") center / cover no-repeat,
      var(--c-ink);
  }
}

/* ==========================================================================
   Services dropdown — two-column card: icon | title + arrow | description
   ========================================================================== */

.subnav__link--rich {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-1);
  white-space: normal;
}

.subnav__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--c-signal-soft);
  color: var(--c-ink);
  transition: background-color var(--t-fast) var(--ease-out);
}

.subnav__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.subnav__link--rich:hover .subnav__icon,
.subnav__link--rich[aria-current="page"] .subnav__icon {
  background: var(--c-signal);
}

.subnav__text {
  display: grid;
  gap: 0.1rem;
  padding-top: 0.1rem;
}

.subnav__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-display);
  font-size: var(--fs-base);
  font-weight: 700;
}

.subnav__desc {
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-steel);
}

@media (min-width: 64em) {
  /* Anchored to the header's right edge (like the mega panel), never off screen */
  .has-rich {
    position: static;
  }

  .subnav--rich {
    top: calc(100% - 0.75rem);
    left: auto;
    right: 0;
    width: min(100%, 36rem);
    padding: var(--s-2) var(--s-4) var(--s-3);
  }

  .subnav--rich .subnav__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-5);
  }

  /* Divider between the two columns */
  .subnav--rich .subnav__list {
    background: linear-gradient(var(--c-line), var(--c-line)) center / 1px calc(100% - 2rem) no-repeat;
  }

  /* Row lines: every row has one except the last row of both columns
     (on the row, so it sits below the sub-page links) */
  .subnav--rich .subnav__list > li {
    border-bottom: 1px solid var(--c-line);
  }

  .subnav--rich .subnav__list > li:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .subnav--rich .subnav__footer {
    padding-top: var(--s-3);
    font-size: var(--fs-sm);
  }
}

/* Current page in a rich row: underline the title only, not the description */
.subnav__link--rich[aria-current="page"] span {
  text-decoration: none;
  font-weight: inherit;
}

.subnav__link--rich[aria-current="page"] .subnav__title > span {
  text-decoration: underline;
  text-decoration-color: var(--c-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* Rich rows: the divider belongs to the row, not the link */
.subnav--rich .subnav__link--rich {
  border-bottom: 0;
}

@media (max-width: 63.99em) {
  .subnav--rich .subnav__list > li {
    border-bottom: 1px solid var(--c-line);
  }

  .subnav--rich .subnav__list > li:last-child {
    border-bottom: 0;
  }
}

/* Sub-pages of a service: small links under the row text */
.subnav__children {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: calc(-1 * var(--s-2)) 0 0;
  padding: 0 var(--s-1) var(--s-3) calc(2.25rem + var(--s-3) + var(--s-1));
  list-style: none;
}

.subnav__children a {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-ink);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

.subnav__children a:hover,
.subnav__children a[aria-current="page"] {
  border-color: var(--c-signal);
  background: var(--c-signal-soft);
}

.subnav__children a:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;
}

/* ==========================================================================
   Company page: motto, journey timeline, vision & mission, leadership
   ========================================================================== */

.quote-line {
  padding-left: var(--s-4);
  border-left: 3px solid var(--c-signal);
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 700;
}

/* Journey timeline: year row with dots and connector lines, a card per year
   (icon, title, text, photo). Animation (motion allowed): year by year, the
   dot lights up, the card rises and the line draws on to the next year.     */
.tl {
  --tl-step: 380ms;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5) var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-item {
  --tl-delay: 0ms;
  --reveal-delay: var(--tl-delay);
  display: flex;
  flex-direction: column;
}

.tl-item:nth-child(2) { --tl-delay: calc(var(--tl-step) * 1); }
.tl-item:nth-child(3) { --tl-delay: calc(var(--tl-step) * 2); }
.tl-item:nth-child(4) { --tl-delay: calc(var(--tl-step) * 3); }
.tl-item:nth-child(5) { --tl-delay: calc(var(--tl-step) * 4); }
.tl-item:nth-child(6) { --tl-delay: calc(var(--tl-step) * 5); }

/* Year row */
.tl-item__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 2.75rem;
  margin-bottom: var(--s-3);
}

.tl-item__dot {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--c-signal);
  border-radius: 50%;
  background: var(--c-signal);
  box-shadow: 0 0 0 4px var(--c-signal-soft);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  transition-delay: var(--tl-delay);
}

.tl-item__year {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1;
  transition: opacity 0.4s ease;
  transition-delay: var(--tl-delay);
}

.tl-item--current .tl-item__year {
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: var(--c-signal);
}

.tl-item__line {
  position: relative;
  flex: 1;
  height: 2px;
  background: var(--c-line);
}

.tl-item__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-signal);
  transform-origin: left;
  transition: transform var(--tl-step) linear;
  transition-delay: calc(var(--tl-delay) + 150ms);
}

.tl-item--current .tl-item__line::after {
  display: none;
}

/* Card */
.tl-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: 1rem;
  background: var(--c-paper);
  box-shadow: 0 1px 2px rgb(14 15 17 / 0.04);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.tl-item:hover .tl-card {
  transform: translateY(-4px);
  border-color: var(--c-signal);
  box-shadow: 0 16px 36px rgb(14 15 17 / 0.08);
}

.tl-item--current .tl-card {
  border-color: rgb(255 199 0 / 0.55);
  background: var(--c-signal-soft);
}

.tl-card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--s-2);
  border-radius: 50%;
  background: var(--c-signal-soft);
  color: var(--c-ink);
}

.tl-item--current .tl-card__icon {
  background: var(--c-paper);
}

.tl-card__icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.tl-card h3 {
  font-size: var(--fs-md);
  line-height: 1.2;
}

.tl-card p {
  font-size: var(--fs-sm);
  color: var(--c-steel);
}

.tl-card__media {
  margin: auto 0 0;
  padding-top: var(--s-3);
}

.tl-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 0.75rem;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.tl-item:hover .tl-card__media img {
  transform: scale(1.03);
}

/* UAE: logo panel instead of a photo */
.tl-card__media--logo {
  display: grid;
}

.tl-card__media--logo img {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 18% 0 24%;
  object-fit: contain;
  background: radial-gradient(circle at 50% 40%, var(--c-graphite), var(--c-ink) 70%);
}

.tl-card__media--logo figcaption {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: center;
  margin-bottom: 0.8rem;
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-steel-light);
}

/* Start state before the timeline scrolls into view */
.motion-ok .tl-item:not(.is-visible) .tl-item__dot {
  background: var(--c-paper);
  box-shadow: none;
}

.motion-ok .tl-item:not(.is-visible) .tl-item__year {
  opacity: 0.25;
}

.motion-ok .tl-item:not(.is-visible) .tl-item__line::after {
  transform: scaleX(0);
}

@media (min-width: 40em) {
  .tl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .tl {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--s-4);
  }

  /* Lines bridge the gap to the next year */
  .tl-item__line {
    margin-right: calc(-1 * var(--s-4));
  }

  .tl-item:last-child .tl-item__line {
    margin-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tl-item:hover .tl-card,
  .tl-item:hover .tl-card__media img {
    transform: none;
  }
}

/* Vision & mission */
.vm-grid {
  display: grid;
  gap: var(--s-5);
}

.vm-card {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-6);
  border: 1px solid var(--c-graphite);
  border-radius: 1rem;
  background: var(--c-ink-2);
}

.vm-card__label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-signal);
}

.vm-card h3 {
  font-size: var(--fs-lg);
  line-height: 1.2;
}

.vm-card__acronym {
  color: var(--c-signal);
}

.vm-card p:not(.vm-card__label) {
  color: var(--c-steel-light);
}

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

/* Leadership */
.leaders {
  display: grid;
  gap: var(--s-5);
}

.leader {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
  margin: 0;
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: 1rem;
  background: var(--c-paper);
}

.leader__photo {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 38%;
  background: var(--c-paper-2);
}

.leader__body {
  display: grid;
  gap: var(--s-2);
}

.leader__role {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-steel);
}

.leader__name {
  font-size: var(--fs-lg);
}

.leader__quote {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-4);
  border-left: 3px solid var(--c-signal);
  font-size: var(--fs-sm);
  color: var(--c-steel);
}

@media (max-width: 29.99em) {
  .leader {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 64em) {
  .leaders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Contact page: contacts by topic, locations, channels
   ========================================================================== */

.people,
.locations {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.person,
.location {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: 1rem;
  background: var(--c-paper);
}

.person {
  border-top: 3px solid var(--c-signal);
}

.person__topic,
.location__tag {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-steel);
}

.person__name {
  font-size: var(--fs-lg);
}

.person__role {
  font-size: var(--fs-sm);
  color: var(--c-steel);
}

.person__lines {
  display: grid;
  gap: var(--s-1);
  margin: var(--s-2) 0 0;
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--c-line);
  list-style: none;
}

.person__lines a {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.person__lines a:hover,
.social-links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--c-signal);
  text-underline-offset: 0.2em;
}

.location h3 {
  font-size: var(--fs-md);
}

.location address,
.location p:not(.location__tag) {
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--c-steel);
}

.location--hq {
  border-color: var(--c-signal);
  background: var(--c-signal-soft);
}

.location--remote {
  border-style: dashed;
}

@media (min-width: 40em) {
  .people,
  .locations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .people,
  .locations {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Channels */
.channels {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.55rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-paper);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.social-links .social-links__doc {
  border-color: var(--c-signal);
  background: var(--c-signal);
}

@media (min-width: 64em) {
  .channels {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .social-links {
    justify-content: flex-end;
  }
}

/* ==========================================================================
   Company page hero — split: text left, team photo card with facts right
   ========================================================================== */

.about-hero {
  padding-block: var(--s-6) var(--s-7);
  background: var(--c-paper);
}

.about-hero__inner {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

/* Centred: text block on top, photo banner below */
.about-hero__text {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  text-align: center;
}

.about-hero .breadcrumbs ol {
  justify-content: center;
}

.about-hero h1 {
  font-size: var(--fs-2xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.about-hero .lead {
  max-width: 52ch;
  color: var(--c-steel);
}

/* Breadcrumbs on a light background */
.about-hero .breadcrumbs a {
  color: var(--c-steel);
}

.about-hero .breadcrumbs a:hover,
.about-hero .breadcrumbs [aria-current="page"] {
  color: var(--c-ink);
}

.about-hero__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 1.25rem;
  aspect-ratio: 4 / 3;
  background: var(--c-paper-2);
}

.about-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}


/* Three facts on a dark strip over the bottom of the photo */
.about-hero__facts {
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: var(--s-3);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: 0.875rem;
  background: rgb(14 15 17 / 0.82);
  backdrop-filter: blur(6px);
  color: var(--c-steel-light);
  font-size: var(--fs-xs);
}

.about-hero__facts span {
  display: grid;
  gap: 0.1rem;
  padding: var(--s-3) var(--s-4);
}

.about-hero__facts span + span {
  border-left: 1px solid var(--c-graphite);
}

.about-hero__facts strong {
  font-family: var(--f-display);
  font-size: var(--fs-md);
  color: var(--c-signal);
}

@media (min-width: 64em) {
  .about-hero {
    padding-block: var(--s-6) var(--s-8);
  }

  .about-hero__inner {
    gap: var(--s-7);
  }
}

/* Wide, flat banner centred under the text; facts strip centred on it */
@media (min-width: 48em) {
  .about-hero__media {
    justify-self: center;
    width: min(100%, 70rem);
    aspect-ratio: 5 / 2;
  }

  .about-hero__facts {
    left: 50%;
    right: auto;
    width: min(100% - 2 * var(--s-3), 36rem);
    transform: translateX(-50%);
    text-align: center;
  }
}

/* ==========================================================================
   Contact page hero: photo background, text + direct contacts left,
   compact enquiry form card right
   ========================================================================== */

.contact-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--s-6) var(--s-7);
  background: var(--c-ink);
  color: var(--c-paper);
}

.contact-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.contact-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 30%;
}

/* Dark fade: strong behind the text, lighter towards the form */
.contact-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(14 15 17 / 0.94) 0%, rgb(14 15 17 / 0.82) 45%, rgb(14 15 17 / 0.6) 100%);
}

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

.contact-hero__text {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.contact-hero h1 {
  font-size: var(--fs-2xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.contact-hero .lead {
  max-width: 44ch;
  color: var(--c-steel-light);
}

.contact-hero__direct {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-hero__direct a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.55rem 0.95rem;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.contact-hero__direct a:hover {
  border-color: var(--c-signal);
  background: rgb(255 199 0 / 0.12);
}

.contact-hero__direct svg {
  width: 1rem;
  height: 1rem;
  color: var(--c-signal);
}

.contact-hero__direct small {
  font-weight: 400;
  color: var(--c-steel-light);
}

.contact-hero__steps {
  margin-top: var(--s-2);
}

.contact-hero__steps-title {
  margin-bottom: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-signal);
}

.contact-hero__steps ol {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: next;
}

.contact-hero__steps li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--c-steel-light);
  counter-increment: next;
}

.contact-hero__steps li::before {
  content: counter(next);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--c-signal);
  color: var(--c-ink);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* Breadcrumbs keep the dark-background colours already defined */

/* Form card */
.contact-card {
  padding: var(--s-5);
  border-radius: 1.25rem;
  background: var(--c-paper);
  color: var(--c-ink);
  box-shadow: 0 30px 60px rgb(0 0 0 / 0.35);
}

.contact-card__title {
  margin-bottom: var(--s-1);
  font-size: var(--fs-lg);
}

.form--compact {
  display: grid;
  gap: var(--s-3);
}

.form--compact .form__intro {
  font-size: var(--fs-xs);
  color: var(--c-steel);
}

.form--compact .form__row {
  gap: var(--s-3);
}

.form--compact .field {
  gap: 0.3rem;
}

.form--compact textarea {
  min-height: 7rem;
}

.form--compact .field__hint {
  font-size: var(--fs-xs);
}

.contact-card__submit {
  width: 100%;
}

.form--compact .fineprint {
  margin-top: 0;
}

@media (min-width: 64em) {
  .contact-hero {
    padding-block: var(--s-7) var(--s-8);
  }

  .contact-hero__inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--s-8);
  }

  .contact-card {
    padding: var(--s-6);
  }
}

/* ==========================================================================
   Service pages: offering cards (photo, title, text, "learn more")
   The whole card is the link (stretched link on the title).
   ========================================================================== */

.offer-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 1rem;
  background: var(--c-paper);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.offer-card:hover,
.offer-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--c-signal);
  box-shadow: 0 16px 36px rgb(14 15 17 / 0.08);
}

.offer-card__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--c-paper-2);
}

.offer-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.offer-card:hover .offer-card__media img {
  transform: scale(1.04);
}

.offer-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4) var(--s-5);
}

.offer-card h3 {
  font-size: var(--fs-md);
  line-height: 1.2;
}

.offer-card__link {
  color: inherit;
  text-decoration: none;
}

.offer-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.offer-card__link:focus-visible {
  outline: none;
}

.offer-card:has(.offer-card__link:focus-visible) {
  outline: 3px solid var(--c-ink);
  outline-offset: 3px;
}

.offer-card p {
  font-size: var(--fs-sm);
  color: var(--c-steel);
}

.offer-card__more {
  margin-top: auto;
  padding-top: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-ink);
}

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

/* Desktop: 3 + 2 layout, the last two cards share the bottom row */
@media (min-width: 64em) {
  .offer-cards {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .offer-card {
    grid-column: span 2;
  }

  .offer-card:nth-child(4),
  .offer-card:nth-child(5) {
    grid-column: span 3;
  }

  .offer-card:nth-child(4) .offer-card__media,
  .offer-card:nth-child(5) .offer-card__media {
    aspect-ratio: 16 / 7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offer-card:hover,
  .offer-card:focus-within,
  .offer-card:hover .offer-card__media img {
    transform: none;
  }
}

/* Contact cards with photo: round portrait left of topic, name and role */
.person:has(.person__photo) {
  grid-template-columns: 4.5rem minmax(0, 1fr);
  column-gap: var(--s-4);
}

.person__photo {
  grid-row: span 3;
  align-self: center;
  width: 4.5rem;
  height: 4.5rem;
  border: 3px solid var(--c-signal-soft);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
  background: var(--c-paper-2);
}

.person:has(.person__photo) .person__lines {
  grid-column: 1 / -1;
}

/* Brand icon inside the social link pills */
.social-links__icon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--c-ink);
  transition: color var(--t-fast) var(--ease-out);
}

.social-links a:hover .social-links__icon {
  color: var(--c-signal-strong);
}

.social-links .social-links__doc .social-links__icon,
.social-links .social-links__doc:hover .social-links__icon {
  color: var(--c-ink);
}