/* ProcessWire integration overrides (kept separate from bundled hashed CSS) */

/* Mobile menu extra buttons */
.topnav__download {
  display: none
}

.topnav.is-open .topnav__download {
  display: inline-flex;
  justify-self: start;
  margin-top: .25rem
}

.topnav__consult {
  display: none
}

.topnav.is-open .topnav__consult {
  display: inline-flex;
  justify-self: start;
  margin-top: .25rem
}

.topnav__consultDesktop {
  display: none
}

@media (min-width: 61.3125rem) {
  .topnav__consultDesktop {
    display: inline-flex;
    margin-left: 1.25rem
  }
}

/* Make opened mobile menu opaque (no glass) */
.topnav.is-open {
  background: #faf9f7;
  -webkit-backdrop-filter: none;
  backdrop-filter: none
}

.topnav.is-open .topnav__links {
  background: #faf9f7;
  border-color: rgba(175, 179, 176, .25)
}

/* Burger icon: 3 lines -> X (no circle background when open) */
.burger {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  background: #ffffffeb;
  border-color: rgba(175, 179, 176, .35)
}

.burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.55rem;
  height: .125rem;
  background: rgba(47, 51, 49, .92);
  margin: 0;
  border-radius: 62.4375rem;
  transform-origin: center;
  transition: transform .22s ease, opacity .22s ease
}

.burger span:nth-child(1) {
  transform: translate(-50%, -50%) translateY(-.42rem)
}

.burger span:nth-child(2) {
  transform: translate(-50%, -50%)
}

.burger span:nth-child(3) {
  transform: translate(-50%, -50%) translateY(.42rem)
}

.topnav.is-open .burger {
  background: transparent;
  border-color: transparent
}

.topnav.is-open .burger span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg)
}

.topnav.is-open .burger span:nth-child(2) {
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(0)
}

.topnav.is-open .burger span:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg)
}

/* Modal close button (match original design) */
.modal__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .85) !important;
  border: .0625rem solid rgba(175, 179, 176, .28) !important;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0;
  line-height: 0;
  color: transparent;
  padding: 0
}

.modal__close:before, .modal__close:after {
  content: "";
  display: block;
  position: absolute;
  width: 1.1rem;
  height: .0625rem;
  background: rgba(47, 51, 49, .75);
  border-radius: 9999px
}

.modal__close:before {
  transform: rotate(45deg)
}

.modal__close:after {
  transform: rotate(-45deg)
}

.modal__close:hover:before, .modal__close:hover:after {
  background: rgba(47, 51, 49, .9)
}

.modal__close:focus-visible {
  outline: .125rem solid rgba(95, 94, 94, .35);
  outline-offset: .1875rem
}

/* Modal layout: avoid overlapping close icon and reduce unwanted scroll */
.modal__head {
  padding-right: 4.75rem
}

.modal__panel {
  max-height: calc(100dvh - 2rem);
  overflow: auto
}

@media (max-width: 48rem) {

  /* Put close button into normal flow so text never sits under it */
  .modal__close {
    position: relative;
    top: auto;
    right: auto;
    justify-self: end;
    margin-left: auto
  }

  .modal__head {
    padding-right: 1.25rem
  }
}

@media (max-width: 38.75rem) {

  /* Mobile: keep the form readable (less inner padding, a bit more width) */
  /* Keep a consistent outer gutter from screen edges */
  .modal__panel {
    width: calc(100% - 2rem);
    padding: 1.35rem 1.35rem 1.45rem;
    gap: 1rem
  }

  .modal__close {
    width: 2.75rem;
    height: 2.75rem
  }

  .modal__head {
    padding-right: 1.25rem
  }

  .modal__head .h2 {
    font-size: clamp(2.05rem, 1.65rem + 2.1vw, 2.5rem)
  }

  .modal__head .lead {
    font-size: 1rem;
    line-height: 1.75
  }

  .modal__meta {
    font-size: .95rem
  }
}

@media (min-width: 61.3125rem) {
  .modal__panel {
    max-height: calc(100dvh - 3.25rem)
  }

  .modal__head .h2 {
    font-size: clamp(2rem, 1.6rem + 1.3vw, 2.75rem)
  }
}

/* Prevent big titles from clipping on narrow screens (privacy, etc.) */
.page-hero__title {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  padding-right: .1em
}

/* Portfolio: unify rhythm and remove original mosaic staggering */
@media (min-width: 48rem) {
  .project--wide .project__media {
    aspect-ratio: auto;
    height: clamp(14rem, 18vw, 22rem);
    min-height: 0;
    max-height: 22rem;
    overflow: hidden
  }

  .project--wide .project__img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }
}

@media (max-width: 47.99rem) {
  .portfolio-grid {
    grid-template-columns: repeat(12, 1fr)
  }

  .portfolio-grid>.project {
    grid-column: 1/-1
  }

  .project--wide {
    display: block
  }

  .project--wide .project__link {
    display: block
  }
}

@media (min-width: 48rem) {
  .portfolio-grid {
    align-items: stretch;
    gap: 1.25rem
  }

  .portfolio-grid .project {
    height: 100%;
    display: flex;
    flex-direction: column
  }

  .portfolio-grid .project__link {
    height: 100%;
    flex: 1
  }

  .portfolio-grid .project:not(.project--wide) .project__link {
    display: flex;
    flex-direction: column
  }

  .portfolio-grid .project__copy {
    padding: 1.25rem 1.25rem 1.15rem
  }

  .portfolio-grid .project__h {
    font-size: 1.32rem;
    margin: .6rem 0
  }

  .portfolio-grid .project:not(.project--wide) .project__media {
    aspect-ratio: auto;
    height: clamp(14rem, 18vw, 22rem);
    overflow: hidden
  }

  .portfolio-grid .project:not(.project--wide) .project__img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .portfolio-grid .project:not(.project--wide) .project__copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .75rem
  }

  .portfolio-grid .project:not(.project--wide) .project__meta {
    margin: 0;
    line-height: 1.6;
    white-space: nowrap;
    padding-bottom: .05rem
  }

  .portfolio-grid .project:not(.project--wide) .project__h {
    margin: 0;
    line-height: 1.2;
    height: 2.4em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
  }

  .portfolio-grid .project:not(.project--wide) .project__p {
    margin: 0;
    line-height: 1.75;
    max-height: 3.5em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
  }

  .portfolio-grid .project:not(.project--wide) .project__list {
    margin-top: auto
  }

  .portfolio-grid .project:not(.project--wide) .project__meta .tag,
  .portfolio-grid .project:not(.project--wide) .project__meta .muted {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%
  }

  .project__p--empty {
    visibility: hidden
  }

  .project__meta-placeholder {
    visibility: hidden
  }
}

@media (min-width: 61.3125rem) {

  .portfolio-grid .project:not(.project--wide):nth-child(3n),
  .portfolio-grid .project:not(.project--wide):nth-child(3n+2) {
    margin-top: 0 !important;
  }
}

/* Forms: consent checkbox */
.field--consent {
  margin-top: .25rem
}

.field__check {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  cursor: pointer;
  user-select: none
}

.field__checkbox {
  margin-top: .25rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--primary)
}

.field__checktext {
  color: #5c605deb;
  letter-spacing: .03em;
  line-height: 1.55
}

.field__checktext a {
  display: inline;
  border-bottom-color: rgba(175, 179, 176, .55)
}

/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  background: #faf9f7f2;
  border: .0625rem solid rgba(175, 179, 176, .22);
  border-radius: var(--radius-md);
  padding: 1rem 1rem;
  display: none;
  gap: 1rem;
  align-items: center;
  justify-content: space-between
}

.cookie-banner.is-visible {
  display: flex
}

.cookie-banner__text {
  margin: 0;
  color: #5c605de6;
  letter-spacing: .03em;
  line-height: 1.55;
  font-size: .95rem
}

.cookie-banner__btn {
  flex: 0 0 auto
}

@media (max-width: 48rem) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch
  }

  .cookie-banner__btn {
    width: 100%
  }
}

/* News: chips alignment */
.news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap
}

.news__head>.h2 {
  order: 1
}

.news__head>.chips {
  order: 2
}

/* Portfolio: keep heading first, link second */
.portfolio__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap
}

.portfolio__head>.h2 {
  order: 1
}

.portfolio__head>.underlink {
  order: 2
}

/* Privacy policy typography (make long legal text calmer) */
.privacy-body {
  max-width: 46rem
}

.privacy-body .h2 {
  font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.05rem);
  line-height: 1.18;
  margin: 2rem 0 .65rem
}

.privacy-body p {
  margin: 0;
  color: #5c605df2;
  letter-spacing: .03em;
  line-height: 1.85
}

.privacy-body p+p {
  margin-top: 1rem
}

.privacy-body .lead {
  color: #5c605dfa;
  line-height: 1.85
}

.privacy-body .case-list {
  margin-top: .85rem
}

.privacy-body .case-list li {
  margin-top: .35rem
}


/* Case/Portfolio hero image: less rigid aspect ratio */
.page-hero__media {
  aspect-ratio: auto;
  height: clamp(18rem, 34vw, 32rem);
  max-height: calc(100vh - 10rem);
}

.page-hero__grid {
  grid-template-columns: 1.4fr 1fr;
}

.page-hero__media {
  height: max-content;
}

.page-hero__img {
  object-fit: contain;
  object-position: left top;
}


@media (max-width: 61.25rem) {
  .page-hero__media {
    height: clamp(14rem, 70vw, 22rem);
    max-height: none;
  }
}