/* Project Library */
.portfolio-filters {
  display: grid;
  gap: 17px;
  margin: 46px 0 25px;
  padding-block: 18px;
  border-block: 1px solid var(--line);
}
.portfolio-filter-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}
.portfolio-collections {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-inline-size: 100%;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #e9ecf2;
}
.portfolio-filter,
.portfolio-type-filter,
.portfolio-empty button {
  border: 1px solid transparent;
  color: var(--navy);
  min-block-size: 44px;
  padding: 8px 16px;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.32;
  transition: color .18s, background-color .18s, border-color .18s;
}
.portfolio-filter {
  min-inline-size: 86px;
  border-radius: 999px;
  background: transparent;
}
.portfolio-filter:hover:not([aria-pressed=true]) { background: #fff; }
.portfolio-filter[aria-pressed=true] {
  color: white;
  background: var(--navy);
  border-color: var(--navy);
}
.portfolio-result-count {
  margin: 0;
  color: var(--muted);
  font-size: .89rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.portfolio-types {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.portfolio-type-filter {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding-block: 6px;
  padding-inline: 13px 11px;
  background: white;
  border-color: #cbd1db;
  border-radius: 999px;
  font-size: .8rem;
}
.portfolio-type-filter:hover:not(:disabled):not([aria-disabled=true]) {
  border-color: var(--orange-text);
}
.portfolio-type-filter[aria-pressed=true] {
  background: #fff0e6;
  border-color: #bb611f;
  color: #86360d;
}
.portfolio-type-empty:not([aria-pressed=true]) {
  background: #eef0f4;
  color: #596375;
}
.portfolio-type-filter:is(:disabled, [aria-disabled=true]) {
  background: #e9ecf2;
  color: #5a6375;
  cursor: default;
}
.portfolio-type-count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.7em;
  min-block-size: 1.7em;
  padding-inline: .35em;
  border-radius: 999px;
  background: #edf0f4;
  color: #4b566d;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.portfolio-type-filter[aria-pressed=true] .portfolio-type-count {
  color: #782e0a;
  background: #f7d9c4;
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(16px, 2vw, 30px);
}
.portfolio-card {
  position: relative;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: white;
  transition: border-color .18s, box-shadow .22s, transform .22s var(--ease);
}
.portfolio-card:focus-within { border-color: var(--navy); }
@media (hover: hover) {
  .portfolio-card:hover {
    border-color: #c66830;
    box-shadow: 0 8px 24px #18233f12;
    transform: translateY(-3px);
  }
}
.portfolio-cover {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #e8ebf0;
  border-block-end: 1px solid var(--line);
}
.portfolio-cover img, .portfolio-gallery-frame img, .portfolio-thumbnails img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
.portfolio-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(15px, 1.65vw, 23px);
}
.portfolio-type {
  color: #99400f;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .065em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.portfolio-card h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.8vw, 1.58rem);
  letter-spacing: -.028em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.portfolio-open {
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  text-align: start;
}
.portfolio-open::after { content: ""; position: absolute; inset: 0; }
.portfolio-open:focus-visible { outline: none; }
.portfolio-card:has(.portfolio-open:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.portfolio-place {
  font-size: .83rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 7px 0 0;
}
.portfolio-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: auto;
  padding-block-start: 14px;
  color: #99400f;
  font-size: .81rem;
  font-weight: 700;
}
.portfolio-card-arrow {
  display: inline-block;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1;
}
.portfolio-card:is(:hover, :focus-within) .portfolio-card-link {
  text-decoration: underline;
  text-underline-offset: .2em;
}
.portfolio-empty {
  grid-column: 1/-1;
  padding: 30px 24px;
  border: 1px solid var(--line);
  background: white;
}
.portfolio-empty p { margin: 0 0 15px; }
.portfolio-empty button { border-color: #cbd1db; background-color: white; }
.portfolio-empty button:hover { border-color: var(--navy); }

/* The header and photo stay in place; only the project overview scrolls. */
.portfolio-dialog {
  --portfolio-padding: clamp(20px, 3.5vw, 36px);
  --portfolio-photo-min: clamp(105px, 22dvh, 180px);
  --portfolio-gallery-dark: #111c33;
  position: fixed;
  inset: 0;
  margin: auto;
  inline-size: min(880px, calc(100% - 32px));
  block-size: min(900px, calc(100dvh - 32px));
  max-inline-size: none;
  max-block-size: none;
  border: 0;
  border-radius: 4px;
  padding: 0;
  background: white;
  box-shadow: 0 16px 65px #0a142e66;
  color: var(--ink);
  overflow: hidden;
  overscroll-behavior: contain;
}
.portfolio-dialog::backdrop {
  background: #101b32cf;
  backdrop-filter: blur(6px);
}
.portfolio-dialog[open] { animation: portfolio-reader-enter .28s var(--ease) both; }
@keyframes portfolio-reader-enter {
  from { opacity: 0; transform: translateY(14px) scale(.986); }
  to { opacity: 1; transform: none; }
}
.portfolio-dialog > #dialogContent {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  min-block-size: 0;
}
.portfolio-reader-header {
  flex: none;
  min-inline-size: 0;
  padding: 14px var(--portfolio-padding) 12px;
  padding-inline-end: calc(var(--portfolio-padding) + 47px);
  color: #fff;
  background: var(--navy);
  border-block-end: 1px solid #35435f;
}
.portfolio-reader-header .portfolio-type {
  color: #ffc296;
  margin-block-end: 4px;
}
.portfolio-reader-header h2 {
  color: inherit;
  margin: 0;
  font-size: clamp(1.4rem, 3.15vw, 2.45rem);
  letter-spacing: -.032em;
  line-height: 1.11;
  overflow-wrap: anywhere;
}
.portfolio-meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: 18px;
  row-gap: 3px;
  margin: 7px 0 0;
  color: #dae1ee;
  font-size: .8rem;
  line-height: 1.42;
}
.portfolio-meta > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45em; }
.portfolio-meta dt { color: #bbc6d9; font-weight: 700; }
.portfolio-meta dd { margin: 0; }
.portfolio-close {
  position: absolute;
  inset-block-start: 13px;
  inset-inline-end: 15px;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  color: white;
  background: #23314d;
  border: 1px solid #8795ae;
  border-radius: 3px;
  font-size: 30px;
  line-height: 1;
}
.portfolio-close:hover,
.portfolio-gallery button:hover { background-color: #364766; }
.portfolio-close:focus-visible,
.portfolio-gallery button:focus-visible {
  outline: 2px solid #ffc296;
  outline-offset: 2px;
}
.portfolio-gallery {
  --portfolio-gallery-controls: 0px;
  flex: 1 1 0px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-inline-size: 0;
  min-block-size: calc(var(--portfolio-photo-min) + var(--portfolio-gallery-controls));
  max-block-size: calc(587px + var(--portfolio-gallery-controls));
  background: var(--portfolio-gallery-dark);
  color: white;
}
.portfolio-gallery:has(.portfolio-gallery-footer) { --portfolio-gallery-controls: 60px; }
.portfolio-gallery-frame {
  position: relative;
  container-type: size;
  overflow: hidden;
}
.portfolio-gallery-frame img {
  position: absolute;
  inset: 0;
  margin-inline: auto;
  inline-size: min(100%, 150cqh);
}
.portfolio-photo-outgoing { pointer-events: none; }
.portfolio-gallery-frame button {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 1px solid #ffffff9e;
  border-radius: 50%;
  background: #14203eea;
  color: white;
  line-height: 1;
}
.portfolio-photo-prev { inset-inline-start: 11px; }
.portfolio-photo-next { inset-inline-end: 11px; }
@supports (inline-size: 1cqh) {
  .portfolio-photo-prev { inset-inline-start: max(11px, calc(50% - 75cqh + 11px)); }
  .portfolio-photo-next { inset-inline-end: max(11px, calc(50% - 75cqh + 11px)); }
}
.portfolio-chevron {
  display: block;
  inline-size: 9px;
  block-size: 13px;
  background-color: currentColor;
  clip-path: polygon(0 0, 33.33% 0, 100% 50%, 33.33% 100%, 0 100%, 66.67% 50%);
}
.portfolio-photo-prev .portfolio-chevron { rotate: 180deg; }
@media (forced-colors: active) {
  .portfolio-chevron { background-color: ButtonText; forced-color-adjust: none; }
}
.portfolio-gallery-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px 14px;
  padding: 5px clamp(10px, 2vw, 22px);
  border-block-start: 1px solid #2c3956;
}
.portfolio-gallery-tools {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 7px;
}
.portfolio-gallery-tools button,
.portfolio-thumbnails button {
  min-block-size: 44px;
  color: white;
  background: #23314d;
  border: 1px solid #8795ae;
  border-radius: 2px;
}
.portfolio-gallery-tools button {
  padding: 3px 10px;
  font-size: .78rem;
  line-height: 1.3;
}
.portfolio-photo-count {
  min-inline-size: 40px;
  color: #dae1ee;
  text-align: center;
  font-size: .81rem;
  font-variant-numeric: tabular-nums;
}
.portfolio-thumbnails {
  display: flex;
  align-items: center;
  justify-content: safe center;
  min-inline-size: 0;
  gap: 5px;
  overflow: auto;
  padding: 3px;
}
.portfolio-thumbnails button {
  flex: none;
  inline-size: clamp(46px, 7vw, 66px);
  block-size: 44px;
  padding: 2px;
  border-color: transparent;
}
.portfolio-thumbnails button[aria-current=true] {
  border-color: #ffc296;
  box-shadow: 0 0 0 1px #ffc296;
}
.portfolio-thumbnails button:focus-visible { outline-offset: 1px; }
@media (min-width: 850px) and (min-height: 560px) {
  .portfolio-dialog { inline-size: min(960px, calc(100% - 32px)); }
  .portfolio-gallery:has(.portfolio-gallery-footer) {
    --portfolio-gallery-controls: 0px;
    position: relative;
    grid-template-columns: minmax(0, 1fr) 94px;
    grid-template-rows: minmax(0, 1fr);
  }
  .portfolio-gallery-footer {
    min-block-size: 0;
    padding: 6px 4px;
    border-block-start: 0;
    border-inline-start: 1px solid #2c3956;
  }
  .portfolio-gallery-tools {
    position: absolute;
    inset-inline-start: 11px;
    inset-block-end: 9px;
    z-index: 1;
    gap: 2px;
    padding: 2px;
    background: #111c33ed;
    border-radius: 3px;
  }
  .portfolio-thumbnails {
    flex-direction: column;
    min-block-size: 0;
    inline-size: 100%;
    max-block-size: 100%;
    overflow: hidden auto;
  }
  .portfolio-thumbnails button { inline-size: 64px; }
}
.portfolio-dialog-body {
  flex: 0 1 auto;
  min-block-size: 0;
  min-inline-size: 0;
  padding: clamp(12px, 2vw, 19px) var(--portfolio-padding);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.portfolio-dialog-body:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.portfolio-dialog-body h3,
.portfolio-overview-heading {
  margin: 0 0 7px;
  color: var(--navy);
  font-size: clamp(1.13rem, 2vw, 1.48rem);
  letter-spacing: -.022em;
  line-height: 1.2;
}
.portfolio-description, .portfolio-role {
  max-inline-size: 88ch;
  margin: 0 0 10px;
  color: #424d62;
  font-size: .98rem;
  line-height: 1.65;
}
.portfolio-role strong { margin-inline-end: .35em; color: var(--ink); }
.portfolio-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 154px), 1fr));
  gap: 10px;
  margin: 12px 0 13px;
}
.portfolio-kpis > div {
  display: flex;
  min-inline-size: 0;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 4px;
  padding: 9px 12px;
  background: #fff4eb;
  border: 1px solid #f1d7c6;
  border-inline-start: 3px solid var(--orange);
}
.portfolio-kpis dt { color: #604634; font-size: .81rem; line-height: 1.45; }
.portfolio-kpis dd {
  margin: 0;
  color: #8c3710;
  font-size: clamp(1.08rem, 2.2vw, 1.58rem);
  font-weight: 700;
  overflow-wrap: anywhere;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.portfolio-dialog-body .button {
  min-block-size: 44px;
  padding: 8px 15px;
}
@media (min-width: 850px) and (min-height: 560px) {
  .portfolio-dialog-body:has(.portfolio-kpis) {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    align-content: start;
    align-items: start;
    column-gap: 22px;
  }
  .portfolio-dialog-body > :is(h3, p, .button) { grid-column: 1; }
  .portfolio-dialog-body .button { justify-self: start; }
  .portfolio-kpis {
    grid-area: 1 / 2 / span 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
  }
  .portfolio-kpis > div { padding: 7px 10px; }
  .portfolio-kpis > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
html[dir=rtl] :is(.portfolio-type, .portfolio-card h3, .portfolio-reader-header h2, .portfolio-dialog-body h3) {
  letter-spacing: 0;
}
html[dir=rtl] .portfolio-chevron,
html[dir=rtl] .portfolio-card-arrow { transform: scaleX(-1); }

@media (max-width: 960px) {
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
  .portfolio-filters { margin-block-start: 32px; gap: 10px; padding-block: 12px; }
  .portfolio-filter-primary { gap: 8px; }
  .portfolio-collections { inline-size: 100%; }
  .portfolio-filter { min-inline-size: 0; padding-inline: 4px; }
  .portfolio-types { gap: 5px; }
  .portfolio-type-filter { padding-inline: 10px 8px; }
  .portfolio-result-count { font-size: .82rem; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 16px; }
  .portfolio-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .portfolio-cover {
    align-self: center;
    border-block-end: 0;
  }
  .portfolio-card-copy { padding: 11px; }
  .portfolio-card h3 { font-size: 1.05rem; }
  .portfolio-card .portfolio-type { font-size: .66rem; margin-block-end: 5px; }
  .portfolio-place { font-size: .78rem; }
  .portfolio-card-link { font-size: .75rem; padding-block-start: 8px; }
  .portfolio-dialog {
    inline-size: 100%;
    block-size: 100dvh;
    border-radius: 0;
    --portfolio-padding: 15px;
    --portfolio-photo-min: clamp(90px, 19dvh, 163px);
  }
  .portfolio-reader-header { padding-block: 13px 11px; }
  .portfolio-close { inset-block-start: 11px; inset-inline-end: 9px; }
  .portfolio-gallery-footer { padding-inline: 8px; }
  .portfolio-gallery { max-block-size: calc(66.667vw + var(--portfolio-gallery-controls)); }
  .portfolio-dialog-body { scrollbar-gutter: auto; }
  .portfolio-kpis { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 125px), 1fr)); }
}
@media (max-width: 350px) {
  .portfolio-card { grid-template-columns: 1fr; }
  .portfolio-cover { border-block-end: 1px solid var(--line); }
}
@media (max-height: 525px) {
  .portfolio-dialog { --portfolio-photo-min: clamp(72px, 22dvh, 115px); }
  .portfolio-reader-header { padding-block: 8px; }
  .portfolio-reader-header h2 { font-size: clamp(1.2rem, 3.4vw, 1.6rem); }
  .portfolio-meta { margin-block-start: 4px; }
  .portfolio-gallery-footer { padding-block: 2px; }
  .portfolio-dialog-body { padding-block: 12px; }
}
@media (max-height: 340px) {
  .portfolio-dialog { --portfolio-photo-min: 64px; }
}
html.reduce-motion :is(.portfolio-card, .portfolio-filter, .portfolio-type-filter, .portfolio-empty button) {
  transition: none;
  transform: none;
}
html.reduce-motion .portfolio-dialog[open] { animation: none; }
html.reduce-motion .portfolio-photo-outgoing { display: none; }
@media (prefers-reduced-motion: reduce) {
  html:not(.allow-motion) :is(.portfolio-card, .portfolio-filter, .portfolio-type-filter, .portfolio-empty button) {
    transition: none;
    transform: none;
  }
  html:not(.allow-motion) .portfolio-dialog[open] { animation: none; }
  html:not(.allow-motion) .portfolio-photo-outgoing { display: none; }
}