@charset "UTF-8";
.u-preview-card.image-portrait a {
  aspect-ratio: 0.6428571429;
}
.u-preview-card.image-portrait a .wrapper {
  margin-top: auto;
}
.u-preview-card.insight a .content .wrapper {
  margin-top: auto;
}
.u-preview-card.insight-frontpage a {
  aspect-ratio: 1.3285714286;
}
.u-preview-card.insight-frontpage a .content .wrapper {
  margin-top: auto;
}
.u-preview-card a {
  display: block;
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  position: relative;
  height: 100%;
}
.u-preview-card a .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.u-preview-card a .image picture {
  height: 100%;
  width: 100%;
}
.u-preview-card a .image picture img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.u-preview-card a .image::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}
.u-preview-card a .content {
  position: relative;
  height: 100%;
  z-index: 20;
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.u-preview-card a .content .label {
  background-color: var(--color-secondary);
  font-size: var(--font-size-smaller);
  line-height: 1;
  color: var(--color-primary);
  align-self: flex-end;
  padding: 7px 10px 5px;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  text-transform: uppercase;
  font-weight: 700;
}
.u-preview-card a .content .wrapper {
  display: flex;
  justify-content: space-between;
}
.u-preview-card a .content .wrapper .title {
  color: var(--color-primary);
  text-transform: uppercase;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.u-preview-card a .content .wrapper i {
  font-size: 30px;
  line-height: 30px;
  color: var(--color-secondary);
  flex-shrink: 0;
  align-self: flex-end;
  transition: color 0.3s ease;
}
@media (hover: hover) {
  .u-preview-card a:hover .image picture img {
    transform: scale(1.05);
  }
  .u-preview-card a:hover .content .wrapper i {
    color: var(--color-primary);
  }
}
@media screen and (min-width: 1024px) {
  .u-preview-card a .content .wrapper i {
    font-size: 35px;
    line-height: 35px;
  }
}
/* ─── Halbmayr u_preview_card — service_numbered variant ─────────────
   Numbered service card with hover-reveal image. Layout matches the
   legacy .svc-card / .svc-hover styling but driven by the unit class
   .u-preview-card.service-numbered. Numbering uses a CSS counter set on
   the parent c_view .grid (.services-overview) so it stays correct
   under any view order, no need to pass loop.index from PHP. */
.u-preview-card.service-numbered > a {
  border: 1px solid var(--rk-line);
  margin: -1px 0 0 -1px;
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  background: transparent;
  overflow: hidden;
  transition: background 0.35s ease;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--rk-ink);
}
.u-preview-card.service-numbered > a .num {
  color: var(--rk-taupe);
  font-size: var(--fs-numeral);
  font-weight: 700;
  position: relative;
  z-index: 1;
  transition: color 0.35s ease;
}
.u-preview-card.service-numbered > a .body {
  position: relative;
  z-index: 1;
}
.u-preview-card.service-numbered > a .body > * {
  transition: color 0.35s ease;
}
.u-preview-card.service-numbered > a .title {
  font-size: var(--fs-body);
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--rk-ink);
  text-transform: uppercase;
}
.u-preview-card.service-numbered > a .blurb {
  font-size: var(--fs-body-sm);
  line-height: 22px;
  font-weight: 300;
  color: var(--rk-mid);
  margin-top: 10px;
  max-width: 280px;
}
.u-preview-card.service-numbered > a .arrow-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: var(--rk-taupe);
  font-size: var(--fs-body-sm);
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  align-self: flex-start;
}
/* Hover image — full-card background, gradient overlay, copy turns white. */
.u-preview-card.service-numbered > a .svc-hover-img {
  position: absolute;
  inset: 0;
  background-image: var(--svc-img);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: 0;
  pointer-events: none;
}
.u-preview-card.service-numbered > a .svc-hover-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.75) 100%);
}
@media (hover: hover) {
  .u-preview-card.service-numbered:hover > a {
    background: transparent;
  }
  .u-preview-card.service-numbered:hover > a .svc-hover-img {
    opacity: 1;
  }
  .u-preview-card.service-numbered:hover > a .num, .u-preview-card.service-numbered:hover > a .title {
    color: #fff;
  }
  .u-preview-card.service-numbered:hover > a .blurb {
    color: var(--rk-line);
  }
  .u-preview-card.service-numbered:hover > a .arrow-row {
    color: #fff;
  }
}
/* ─── Halbmayr u_preview_card — project_masonary variant ────────────
   Used on the frontpage projects preview (4 cards in an asymmetric
   narrow+wide / wide+narrow grid). Matches the legacy .ref-row-a /
   .ref-row-b layout via grid-template-areas on the .masonary container.
   Card markup mirrors .proj-card / .ref-card (image with overlay tag,
   location title, "Mehr dazu" arrow). Image lazy-loaded webp via the
   project_masonary image style. */
/* .c-view--masonary content header — match the c_view default look. */
.c-view.projects-preview > .eyebrow, .c-view.projects-preview > .title, .c-view.projects-preview > .text {
  /* The masonary template renders these as direct children of .c-view,
     not inside .content. Mirror .c-view .content styles for visual
     parity with the services grid. */
}
.c-view.projects-preview > .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-overline);
  line-height: 14px;
  letter-spacing: 0.2em;
  color: var(--rk-taupe);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 25px;
}
.c-view.projects-preview > .eyebrow::before {
  content: "";
  width: 25px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  flex: 0 0 auto;
}
.c-view.projects-preview > .title {
  color: var(--rk-ink);
  line-height: 1.05;
  font-weight: 400;
  max-width: 1100px;
  margin: 0;
}
/* Card cell. The legacy .ref-img has clamp height 280–500. Apply to the
   card's image area so cards match the prototype look. */
.u-preview-card.project-masonary > a {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: var(--rk-ink);
}
.u-preview-card.project-masonary > a .img {
  width: 100%;
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .u-preview-card.project-masonary > a .img {
    height: clamp(280px, 30vw, 500px);
  }
}
.u-preview-card.project-masonary > a .img > picture {
  display: block;
  width: 100%;
  height: 100%;
}
.u-preview-card.project-masonary > a .img > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.u-preview-card.project-masonary > a .img .tag {
  position: absolute;
  top: 25px;
  left: 25px;
  background: var(--rk-taupe);
  color: #fff;
  padding: 10px 15px;
  border-radius: 50px;
  font-size: 9px;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
}
.u-preview-card.project-masonary > a .ttl {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--rk-ink);
}
.u-preview-card.project-masonary > a .more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: -8px;
  font-size: var(--fs-body-sm);
  letter-spacing: 0.2em;
  color: var(--rk-taupe);
  font-weight: 700;
  text-transform: uppercase;
  align-self: flex-start;
}
/* ─── Halbmayr u_preview_card — insight_card variant ────────────────
   Cards mirror the legacy .ins-card markup (image, .ins-meta with
   category + month, .ins-title, .more arrow) so the existing styles in
   _halbmayr.scss apply. Adds the <picture>/<img> object-fit rule for
   the new image-style approach (legacy used CSS background-image). */
.u-preview-card.insight-card.ins-card .img {
  /* aspect-ratio: 1/1 already on .ins-card .img in _halbmayr.scss. Just
     wire the <picture><img> to fill it like in c_image_slab. */
  overflow: hidden;
}
.u-preview-card.insight-card.ins-card .img > picture {
  display: block;
  width: 100%;
  height: 100%;
}
.u-preview-card.insight-card.ins-card .img > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ─── Halbmayr u_preview_card — service_category variant ────────────
   Whole card is an <a>. Inherits .real-cat / .real-cat-img / .real-cat-body
   styling from _halbmayr.scss; just wires <picture>/<img> to fill the
   .real-cat-img cell exactly like the old background-image approach. */
.u-preview-card.service-category > a {
  text-decoration: none;
  color: var(--rk-ink);
}
.u-preview-card.service-category > a .real-cat-img {
  overflow: hidden;
}
.u-preview-card.service-category > a .real-cat-img > picture {
  display: block;
  width: 100%;
  height: 100%;
}
.u-preview-card.service-category > a .real-cat-img > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* services-categories — mobile-first single-column (100% to dodge the iOS
   1fr quirk), 2 cols from tablet up. Matches the legacy .real-cat-grid
   spacing (column gap sm, row gap xl). */
.c-view.services-categories > .grid {
  display: grid !important;
  grid-template-columns: 100% !important;
  column-gap: var(--space-sm) !important;
  row-gap: var(--space-xl) !important;
}
@media (min-width: 768px) {
  /* Safari 1fr bug workaround — explicit calc using the column-gap value
     so each cell is exactly (100% - 1×gap) / 2. Mirrors the same fix on
     .proj-grid / .projects-preview / .c-view--filtered .view-content. */
  .c-view.services-categories > .grid {
    grid-template-columns: repeat(2, calc((100% - var(--space-sm)) / 2)) !important;
  }
}
/* ─── Halbmayr u_preview_card — team_member variant (compact, 4-col).
   Prototype port: text uses the same conventions as the legacy .team-card
   in _halbmayr.scss (18px bold name, 12px taupe uppercase role). */
.u-preview-card.team-member {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  color: var(--rk-ink-soft);
}
.u-preview-card.team-member .img {
  aspect-ratio: 0.75;
  overflow: hidden;
  background: var(--rk-cream);
}
.u-preview-card.team-member .img picture, .u-preview-card.team-member .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.u-preview-card.team-member .name {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.3;
  color: var(--rk-ink);
  margin: 0;
}
.u-preview-card.team-member .role {
  font-size: var(--fs-overline);
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--rk-taupe);
  text-transform: uppercase;
  margin: 0;
}
/* ─── Halbmayr u_preview_card — team_management variant (big, 2-col).
   Same text conventions as team_member (per prototype the only difference
   between founder + regular cards is the image aspect-ratio); plus the
   contact stack with underlined phone + email links. */
.u-preview-card.team-management {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--rk-ink-soft);
}
.u-preview-card.team-management .img {
  aspect-ratio: 1.5;
  overflow: hidden;
  background: var(--rk-cream);
}
.u-preview-card.team-management .img picture, .u-preview-card.team-management .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.u-preview-card.team-management .body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.u-preview-card.team-management .name {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.3;
  color: var(--rk-ink);
  margin: 0;
}
.u-preview-card.team-management .role {
  font-size: var(--fs-overline);
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--rk-taupe);
  text-transform: uppercase;
  margin: 0;
}
.u-preview-card.team-management .contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--rk-ink-soft);
}
.u-preview-card.team-management .contact a, .u-preview-card.team-member .contact a, .team-card .contact a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  font-weight: 400;
  border-radius: 0;
  padding: 0;
  background: transparent;
  transition: color 0.2s ease;
  height: auto;
}
@media (hover: hover) {
  .u-preview-card.team-management .contact a:hover, .u-preview-card.team-management .contact a:focus {
    color: var(--rk-taupe);
  }
}
/* ─── c_view layouts — team-management (2-col grid, no slider) + team-regular
   (mobile slider, desktop grid). */
.c-view.team-list.team-management > .grid {
  display: grid !important;
  grid-template-columns: 100% !important;
  column-gap: var(--space-sm) !important;
  row-gap: var(--space-xl) !important;
}
@media (min-width: 768px) {
  .c-view.team-list.team-management > .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* Team-regular: mobile is the slider — no grid styles at base. From 1024+
   the swiper is destroyed (see c_view.js) and the grid takes over on
   .swiper-wrapper (cards stay nested inside .swiper-container >
   .swiper-wrapper). 2 cols at 1024, 4 cols at 1440. */
@media (min-width: 1024px) {
  .c-view.team-list:not(.team-management) > .grid .swiper-container {
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .c-view.team-list:not(.team-management) > .grid .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: var(--space-sm) !important;
    row-gap: var(--space-lg) !important;
    transform: none !important;
  }
  .c-view.team-list:not(.team-management) .swiper-pagination {
    display: none;
  }
}
@media (min-width: 1440px) {
  .c-view.team-list:not(.team-management) > .grid .swiper-wrapper {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
/* Header + grid stacking on team blocks — same .content pattern as
   the other c_view sections (services / insights). */
.c-view.team-list > .content {
  margin-bottom: var(--space-lg);
}
/* ─── Nächstes Projekt — c_view--next on project detail ─────────────
   Prototype layout: bordered block. Inside the borders: small uppercase
   eyebrow on top, then a title + body row on the left with the CTA pill
   on the right (vertically centered). */
.next-project {
  padding: var(--space-xxl) var(--pad-x);
}
.next-project .section-inner {
  max-width: 1272px;
  margin: 0 auto;
}
/* The bordered block — borders sit on .c-view--next so the subtitle is
   visually inside the rule. */
.next-project .c-view--next {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--rk-line);
  border-bottom: 1px solid var(--rk-line);
}
/* Eyebrow inside the borders, above the row. */
.next-project .c-view--next .eyebrow {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--rk-taupe);
  margin: 0 0 var(--space-sm);
}
/* "next" wrapper is just a container for the card; no own rhythm. */
.next-project .c-view--next .next {
  margin: 0;
}
/* The row. */
.u-preview-card.project-next {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-lg);
  align-items: center;
}
.u-preview-card.project-next .next-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.u-preview-card.project-next .next-ttl {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: var(--rk-ink);
}
.u-preview-card.project-next .next-body {
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  font-weight: 300;
  color: var(--rk-mid);
  margin: 0;
  max-width: 520px;
}
.u-preview-card.project-next .next-cta {
  align-self: center;
}
@media (max-width: 700px) {
  .u-preview-card.project-next {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    align-items: flex-start;
  }
  .u-preview-card.project-next .next-cta {
    justify-self: start;
  }
}
/* --- Migrated from _halbmayr.scss (Pass 1 / Phase B) -----------------
   Block: SERVICE GRID (.svc-* card cluster)
   --------------------------------------------------------------------- */
/* =========================================================================
   SERVICE GRID  (Realisieren cards on Willkommen)
   3 cols → 2 cols → 1 col
   ========================================================================= */
.svc-grid {
  display: grid;
  grid-template-columns: 100%;
  gap: 0;
  border-collapse: collapse;
}
.svc-card {
  border: 1px solid var(--rk-line);
  margin: -1px 0 0 -1px;
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  background: #fff;
  overflow: hidden;
  transition: background 0.35s ease;
  gap: var(--space-md);
}
@media (hover: hover) {
  .svc-card:hover {
    background: var(--rk-cream);
  }
}
.svc-card .num {
  color: var(--rk-taupe);
  font-size: var(--fs-numeral);
  font-weight: 700;
}
.svc-card .title {
  font-size: var(--fs-body);
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--rk-ink);
  text-transform: uppercase;
}
.svc-card .blurb {
  font-size: var(--fs-body-sm);
  line-height: 22px;
  font-weight: 300;
  color: var(--rk-mid);
  margin-top: 10px;
  max-width: 280px;
}
.svc-card .arrow-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: var(--rk-taupe);
  font-size: var(--fs-body-sm);
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  align-self: flex-start;
}
.svc-card.image {
  border: 0;
  padding: 0;
  background-position: center;
  background-size: cover;
  position: relative;
}
.svc-card.image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 100%);
}
.svc-card.image .overlay {
  position: absolute;
  bottom: 50px;
  left: 50px;
  right: 50px;
  z-index: 1;
  color: #fff;
}
.svc-card.image .overlay .title {
  color: #fff;
}
.svc-card.image .overlay .blurb {
  color: var(--rk-line);
}
.svc-card.image .overlay .arrow-row {
  color: #fff;
}
.svc-card.svc-hover {
  position: relative;
}
.svc-card.svc-hover > *:not(.svc-hover-img) {
  position: relative;
  z-index: 1;
  transition: color 0.35s ease;
}
.svc-card.svc-hover > div > * {
  transition: color 0.35s ease;
}
.svc-hover-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.svc-hover-img picture, .svc-hover-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.svc-hover-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.75) 100%);
}
@media (hover: hover) {
  .svc-card.svc-hover:hover {
    background: transparent;
  }
  .svc-card.svc-hover:hover .svc-hover-img {
    opacity: 1;
  }
  .svc-card.svc-hover:hover .num, .svc-card.svc-hover:hover .title {
    color: #fff;
  }
  .svc-card.svc-hover:hover .blurb {
    color: var(--rk-line);
  }
  .svc-card.svc-hover:hover .arrow-row {
    color: #fff;
  }
}
/* --- Migrated from _halbmayr.scss (Pass 1 / Phase B) -----------------
   Block: PROJECT GRID (.proj-* / .ref-* cluster)
   --------------------------------------------------------------------- */
/* =========================================================================
   PROJECT GRID (Entdecken)
   ========================================================================= */
.proj-tools {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-md);
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.proj-grid {
  display: grid;
  grid-template-columns: repeat(3, calc((100% - var(--space-md) - var(--space-md)) / 3));
  column-gap: var(--space-md);
  row-gap: var(--space-lg);
}
.proj-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
}
.proj-card .img {
  margin-bottom: 6px;
}
.proj-card .img {
  position: relative;
  aspect-ratio: 1.1714285714;
  overflow: hidden;
}
.proj-card .img picture, .proj-card .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.proj-card .img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
}
@media (hover: hover) {
  .proj-card:hover .img::after {
    background: rgba(0, 0, 0, 0.18);
  }
}
.proj-card .tag {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--rk-taupe);
  padding: 10px 15px;
  border-radius: 50px;
  position: absolute;
  left: 25px;
  top: 25px;
  z-index: 1;
}
.proj-card .ttl {
  font-size: var(--fs-body);
  letter-spacing: 0;
  font-weight: 700;
  color: var(--rk-ink);
}
.proj-card .loc {
  font-size: var(--fs-body-sm);
  color: var(--rk-mid);
  font-weight: 300;
}
/* Featured project — full-width card spanning all columns */
.proj-card.featured {
  grid-column: 1 / -1;
}
.proj-card.featured .img {
  aspect-ratio: 2.3333333333;
}
/* Reference card on Willkommen */
.ref-card {
  height: 100%;
}
.ref-card .ttl + .more {
  margin-top: -8px;
}
.ref-img {
  width: 100%;
  height: clamp(280px, 30vw, 500px);
  aspect-ratio: auto !important;
  overflow: hidden;
  position: relative;
}
.ref-img picture, .ref-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* --- Migrated from _halbmayr.scss (Pass 1 / Phase B) -----------------
   Block: INSIGHTS GRID (.ins-* cluster)
   --------------------------------------------------------------------- */
/* =========================================================================
   INSIGHTS GRID
   ========================================================================= */
.ins-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-sm);
  row-gap: var(--space-xl);
}
.ins-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.ins-card .img {
  aspect-ratio: 1.1714285714;
  overflow: hidden;
  position: relative;
}
@media (min-width: 1024px) {
  .ins-card .img {
    aspect-ratio: 1;
  }
}
.ins-card .img picture, .ins-card .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ins-meta {
  font-size: var(--fs-overline);
  letter-spacing: 0.2em;
  color: var(--rk-taupe);
  font-weight: 700;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  text-transform: uppercase;
}
.ins-meta > *:last-child {
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
}
.ins-title {
  font-size: var(--fs-body);
  line-height: 1.4;
  font-weight: 700;
  color: var(--rk-ink);
  margin: 0;
}
.ins-blurb {
  font-size: var(--fs-overline);
  line-height: 22px;
  color: var(--rk-mid);
  font-weight: 300;
  margin: 0;
}
.ins-card .more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body-sm);
  letter-spacing: 0.2em;
  color: var(--rk-taupe);
  font-weight: 700;
  text-transform: uppercase;
  align-self: flex-start;
}
/* --- Migrated from _halbmayr.scss (Pass 1 / Phase B) -----------------
   Block: PREVIEW CARD HOVER + legacy resets (universal)
   --------------------------------------------------------------------- */
/* =========================================================================
   PREVIEW CARD HOVER — universal across u_preview_card variants
   Picture/img scales 1.05 on card hover (0.5s ease).
   .more / .real-cat-link / .arrow-row text shifts colour (0.3s ease).
   Picture parents (.img, .ins-img, .real-cat-img, .svc-hover-img) already
   carry overflow:hidden so the scaled image stays clipped.
   ========================================================================= */
.unit.u-preview-card picture, .unit.u-preview-card img {
  transition: transform 0.5s ease;
}
@media (hover: hover) {
  .unit.u-preview-card:hover picture img, .unit.u-preview-card:focus-within picture img {
    transform: scale(1.05);
  }
}
.unit.u-preview-card .more, .unit.u-preview-card .real-cat-link {
  transition: color 0.3s ease;
}
@media (hover: hover) {
  .unit.u-preview-card:hover .more, .unit.u-preview-card:focus-within .more, .unit.u-preview-card:hover .real-cat-link, .unit.u-preview-card:focus-within .real-cat-link {
    color: var(--rk-ink);
  }
}
/* Reset legacy base-unit anchor styles for our new card variants.
   u_preview_card.scss applies .u-preview-card a { display:block; border-radius;
   overflow:hidden; height:100% } — these were for the legacy base where the
   anchor IS the card. Our new variants put the anchor inside a .u-preview-card
   wrapper, so those styles bleed onto the inner anchor and break layout. */
.unit.u-preview-card.project-masonary > a, .unit.u-preview-card.insight-card > a, .unit.u-preview-card.service-category > a, .unit.u-preview-card.service-numbered > a {
  border-radius: 0;
  overflow: visible;
  height: auto;
}
/* The base u_preview_card.scss sets .u-preview-card a { display:block } for
   the legacy variant where the anchor IS the card. That rule outranks the
   single-class .ins-card / .real-cat flex declarations and kills the vertical
   gap inside our new wrapper-div variants. Restore the prototype layout. */
.unit.u-preview-card.insight-card > a {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
@media (min-width: 1024px) {
  .unit.u-preview-card.insight-card > a {
    gap: var(--space-sm);
  }
}
.unit.u-preview-card.service-category > a {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* --- Migrated from _halbmayr.scss (Pass 1 / Phase B) -----------------
   Block: Team management/team_member hover disable
   --------------------------------------------------------------------- */
/* Team management + team_member units — disable the global card image
   scale-on-hover. Portraits stay still per design feedback. */
@media (hover: hover) {
  .unit.u-preview-card.team-management:hover picture img, .unit.u-preview-card.team-management:focus-within picture img, .unit.u-preview-card.team-member:hover picture img, .unit.u-preview-card.team-member:focus-within picture img {
    transform: none;
  }
}
/* --- Migrated from _halbmayr.scss (Pass 1 / Phase E) -----------------
   Block: RESPONSIVE BREAKPOINTS (legacy max-width queries; Pass 2 flips to mobile-first)
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .proj-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ins-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .svc-grid {
    grid-template-columns: 100%;
  }
  .proj-grid {
    grid-template-columns: 100%;
  }
  .ins-grid {
    grid-template-columns: 100%;
  }
  .ref-img {
    height: 280px;
  }
  .proj-tools {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 480px) {
  .ref-img {
    height: 220px;
  }
}
/* Mobile-first min-width tier — restore desktop service card sizing. */
@media (min-width: 1024px) {
  .svc-card, .u-preview-card.service-numbered > a {
    padding: var(--space-md);
    min-height: 380px;
  }
}
/* ─── Projects + insights preview — desktop layout (min-width:1024) ──
   Mobile is the simple block stack handled by base styles + the swiper.
   From 1024+:
   - .content is a 2-col header grid (left col holds eyebrow/title/text,
     right col is the ghost-link button — placed on its OWN row below
     the eyebrow so it sits next to the title baseline-end).
   - The swiper JS destroys at this breakpoint (see c_view.js), so the
     cards are still nested inside .swiper-container > .swiper-wrapper.
     We apply the items grid to .swiper-wrapper directly (and reset
     .swiper-container's bleed margin/padding) so the grid wraps the
     actual card children. */
@media (min-width: 1024px) {
  /* Reset .swiper-container bleed + hide pagination — swiper is killed at this bp. */
  /* Projects masonary — asymmetric 3-col grid on .swiper-wrapper. */
  /* Card image proportions — override the mobile-first fixed clamp height
     with aspect-ratios that follow the cell width. Narrow cells (a, d) get
     a portrait-ish ratio; wide cells (b, c) get a wide landscape. Picked so
     both rows of cards land at the same visual height across viewport sizes. */
  /* Insights grid — uniform 3-col on .swiper-wrapper. */
  .c-view.projects-preview > .content, .c-view.insights-preview > .content {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--space-md);
    align-items: end;
  }
  .c-view.projects-preview > .content > .eyebrow, .c-view.projects-preview > .content > .title, .c-view.projects-preview > .content > .text, .c-view.insights-preview > .content > .eyebrow, .c-view.insights-preview > .content > .title, .c-view.insights-preview > .content > .text {
    grid-column: 1;
  }
  .c-view.projects-preview > .content > .button-wrapper, .c-view.insights-preview > .content > .button-wrapper {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    margin: 0;
  }
  .c-view.projects-preview > .masonary .swiper-container, .c-view.insights-preview > .grid .swiper-container {
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .c-view.projects-preview .swiper-pagination, .c-view.insights-preview .swiper-pagination {
    display: none;
  }
  .c-view.projects-preview > .masonary {
    margin-top: var(--space-lg);
  }
  .c-view.projects-preview > .masonary .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, calc((100% - var(--space-sm) - var(--space-sm)) / 3));
    grid-template-areas: "a b b" "c c d";
    gap: var(--space-sm);
    grid-auto-rows: auto !important;
    transform: none !important;
  }
  .c-view.projects-preview > .masonary .swiper-wrapper > *:nth-child(1) {
    grid-area: a;
  }
  .c-view.projects-preview > .masonary .swiper-wrapper > *:nth-child(2) {
    grid-area: b;
  }
  .c-view.projects-preview > .masonary .swiper-wrapper > *:nth-child(3) {
    grid-area: c;
  }
  .c-view.projects-preview > .masonary .swiper-wrapper > *:nth-child(4) {
    grid-area: d;
  }
  .c-view.projects-preview > .masonary .swiper-wrapper > *:nth-child(1) .img, .c-view.projects-preview > .masonary .swiper-wrapper > *:nth-child(4) .img {
    height: auto;
    aspect-ratio: 0.82;
  }
  .c-view.projects-preview > .masonary .swiper-wrapper > *:nth-child(2) .img, .c-view.projects-preview > .masonary .swiper-wrapper > *:nth-child(3) .img {
    height: auto;
    aspect-ratio: 1.68;
  }
  .c-view.insights-preview > .grid {
    margin-top: var(--space-lg);
  }
  .c-view.insights-preview > .grid .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: var(--space-sm) !important;
    row-gap: var(--space-xl) !important;
    transform: none !important;
  }
}
/* ─── Migrated from _halbmayr_addons.scss — Pass 1 / Phase F cleanup ─── */
/* =========================================================================
 * Halbmayr: projects grid — first card spans the full row, 21:9 aspect.
 * Matches prototype's .proj-card.featured behaviour without needing a Views
 * preprocess to add a class to the first row.
 * ========================================================================= */
/* Featured first card — spans full row. Works whether the first card is
   wrapped in .views-row (Views block) or rendered as a direct child. */
@media (min-width: 768px) {
  .proj-grid > .proj-card:first-child, .proj-grid > .views-row:first-child .proj-card, .proj-grid > div:first-child .proj-card, .proj-grid > div:first-child > div:first-child .proj-card, .proj-grid > div:first-child > div:first-child > .views-row:first-child .proj-card {
    grid-column: 1 / -1;
  }
  .proj-grid > .proj-card:first-child .img, .proj-grid > .views-row:first-child .proj-card .img, .proj-grid > div:first-child .proj-card .img, .proj-grid > div:first-child > div:first-child .proj-card .img, .proj-grid > div:first-child > div:first-child > .views-row:first-child .proj-card .img {
    aspect-ratio: 2.3333333333;
  }
}
/* Exposed filter form — visually tighten default Drupal form spacing so it
 * doesn't dominate the grid. Real .proj-pill styling will replace this. */
.proj-grid .views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.proj-grid .views-exposed-form .form-actions {
  margin: 0;
}
.proj-grid .views-exposed-form label {
  margin-right: 8px;
}
/* =========================================================================
 * Halbmayr: featured first card — spans full row at 21:9.
 * Cards are now direct children of .proj-grid (no Views wrappers), so
 * :first-child resolves to the actual first .proj-card.
 * ========================================================================= */
@media (min-width: 768px) {
  .proj-grid > .proj-card:first-child {
    grid-column: 1 / -1;
  }
  .proj-grid > .proj-card:first-child .img {
    aspect-ratio: 2.3333333333;
  }
}
/* =========================================================================
 * Halbmayr: .proj-card .more and .ins-card .more wrappers.
 * Prototype hardcodes these styles inline on each card; we promote them to
 * CSS so the Drupal-rendered cards look right without inline styles.
 * The .link-text underline rule already lives in buttons.scss.
 * ========================================================================= */
.proj-card .more, .ins-card .more, .svc-card .arrow-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body-sm);
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--rk-taupe);
  text-transform: uppercase;
  text-decoration: none;
  align-self: flex-start;
}
/* The whole card is an <a> in Drupal (prototype uses <article> + JS).
 * Reset inherited link underline on the card itself; inner .link-text keeps
 * its underline via the rule already in buttons.scss. */
a.proj-card, a.proj-card:link, a.proj-card:visited, a.ins-card, a.ins-card:link, a.ins-card:visited {
  color: var(--rk-ink);
  text-decoration: none;
}
@media (hover: hover) {
  a.proj-card:hover, a.ins-card:hover {
    color: var(--rk-ink);
  }
}
/* Project card: service pills row — first service + "+n" (avoid overlap of absolute .tag). */
.u-preview-card.project-masonary > a .img .tag-row {
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 1;
  display: flex;
  gap: 6px;
  align-items: center;
}
.u-preview-card.project-masonary > a .img .tag-row .tag {
  position: static;
  top: auto;
  left: auto;
}
/*# sourceMappingURL=u_preview_card.css.map */