@import url("./design-system.css?v=shared-pills-1");

#portfolio-business-view { display: none; }
body[data-portfolio-mode="business"] { background: var(--portfolio-paper); color: var(--portfolio-ink); font-family: var(--portfolio-sans); overflow: auto; overscroll-behavior: auto; }
body[data-portfolio-mode="business"] .main,
body[data-portfolio-mode="business"] .widgets,
body[data-portfolio-mode="business"] .cases-pop-ups,
body[data-portfolio-mode="business"] .contact-form-web,
body[data-portfolio-mode="business"] .section--footer,
body[data-portfolio-mode="business"] .navbar-rnd,
body[data-portfolio-mode="business"] .preloader-black-bg { display: none !important; }
body[data-portfolio-mode] .navbar-rnd { display: none !important; }
body[data-portfolio-mode="business"] .rnd-wrap { min-height: 100vh; height: auto; background: var(--portfolio-paper); }
body[data-portfolio-mode="business"] #portfolio-business-view { display: block; min-height: 100vh; padding: 0 var(--portfolio-page-gutter); }
.portfolio-editorial-main { width: 100%; margin: 0 auto; }
#portfolio-business-view [data-width-block] { box-sizing: border-box; }
.portfolio-editorial-intro { padding: var(--portfolio-space-5) 0 0; }
.portfolio-profile { max-width: none; }
.portfolio-profile__portrait { display: block; width: 88px; height: 88px; margin: var(--portfolio-space-3) 0; border-radius: var(--portfolio-pill-radius); object-fit: cover; }
.portfolio-profile__specialties { display: flex; flex-wrap: wrap; gap: var(--portfolio-space-1); margin: var(--portfolio-space-2) 0; }
.portfolio-profile__specialties h1,
.portfolio-profile__specialties span { display: inline-flex; align-items: center; margin: 0; padding: 5px var(--portfolio-space-1); border: var(--portfolio-border); border-radius: var(--portfolio-tag-radius); font: var(--portfolio-type-label)/var(--portfolio-line-label) var(--portfolio-mono); letter-spacing: 0; text-transform: uppercase; }
.portfolio-profile__specialties h1 { color: var(--portfolio-muted); }
.portfolio-profile__specialties span { color: var(--portfolio-muted); }
.portfolio-profile__location { margin: var(--portfolio-space-3) 0 0; color: var(--portfolio-muted); font-size: var(--portfolio-type-profile-size); line-height: var(--portfolio-line-profile-body); letter-spacing: var(--portfolio-track-profile-body); }
.portfolio-profile__bio { margin: 0; color: var(--portfolio-muted); font-size: var(--portfolio-type-profile-size); line-height: var(--portfolio-line-profile-body); letter-spacing: var(--portfolio-track-profile-body); }
.portfolio-profile__bio p:first-child { color: var(--portfolio-ink); font-size: var(--portfolio-type-profile-lead); line-height: var(--portfolio-line-profile-lead); letter-spacing: var(--portfolio-track-profile-lead); }
.portfolio-profile__bio p { margin: 0 0 var(--portfolio-space-2); }
.portfolio-profile__bio p { max-width: var(--portfolio-reading-max); }
.portfolio-profile__bio p:last-child { margin-bottom: 0; }
.portfolio-editorial-section,
.portfolio-editorial-contact {
  margin-block-start: calc(var(--portfolio-section-gap) / 2);
  padding-block-start: calc(var(--portfolio-section-gap) / 2);
  border-block-start: var(--portfolio-border);
}
#business-work { border-block-start: 0; }
.portfolio-editorial-split, .portfolio-experience { display: grid; grid-template-columns: minmax(0, var(--portfolio-case-column)) minmax(0, 1fr); gap: var(--portfolio-case-column-gap); align-items: start; }
.portfolio-editorial-split__heading, .portfolio-experience__heading { margin: 0; font-size: var(--portfolio-type-section-title); font-weight: var(--portfolio-weight-display); letter-spacing: var(--portfolio-track-heading); }
.portfolio-expertise__grid { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--portfolio-space-4); }
.portfolio-expertise__item { display: grid; grid-template-columns: 1fr; align-content: start; }
.portfolio-expertise__icon { display: grid; place-items: center; width: var(--portfolio-mark-size); height: var(--portfolio-mark-size); margin: 0 0 var(--portfolio-space-2); border-radius: var(--portfolio-media-radius); background: var(--portfolio-soft); color: var(--portfolio-ink); }
.portfolio-expertise__icon svg { width: var(--portfolio-icon-size); height: var(--portfolio-icon-size); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.portfolio-expertise__item h3 { margin: 0 0 var(--portfolio-space-2); font-size: var(--portfolio-type-row-title); font-weight: var(--portfolio-weight-display); letter-spacing: var(--portfolio-track-subheading); }
.portfolio-expertise__item p { margin: 0; color: var(--portfolio-muted); font-size: var(--portfolio-type-body); line-height: var(--portfolio-line-body); }
.portfolio-editorial-section__heading { display: grid; grid-template-columns: 1fr minmax(260px, 0.85fr); gap: var(--portfolio-space-6); align-items: baseline; margin-bottom: var(--portfolio-space-5); }
.portfolio-editorial-section__heading--single { grid-template-columns: 1fr; }
.portfolio-editorial-section__heading h2 { margin: 0; font-size: var(--portfolio-type-section-title); font-weight: var(--portfolio-weight-display); letter-spacing: var(--portfolio-track-heading); }
.portfolio-editorial-section__heading p { margin: 0; color: var(--portfolio-muted); font-size: var(--portfolio-type-body); }
#business-work { scroll-margin-top: calc(var(--portfolio-header-height) + var(--portfolio-space-3)); }
.portfolio-editorial-case { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--portfolio-case-padding) 0 0; }
.portfolio-editorial-case:not([hidden]) ~ .portfolio-editorial-case:not([hidden]) { margin-block-start: var(--portfolio-case-padding); border-block-start: var(--portfolio-border); }
.portfolio-editorial-case__open { display: grid; grid-template-columns: minmax(0, var(--portfolio-case-column)) minmax(0, 1fr); gap: var(--portfolio-case-column-gap); align-items: stretch; color: inherit; text-decoration: none; }
.portfolio-editorial-case__open:focus-visible { outline: auto; }
.portfolio-work-filters { display: flex; flex-wrap: wrap; gap: var(--portfolio-filter-gap-y) var(--portfolio-filter-gap-x); padding: 0 0 var(--portfolio-filter-padding-bottom); border-bottom: var(--portfolio-border); }
.portfolio-work-filter { padding: 0 0 var(--portfolio-space-1); border: 0; border-bottom: var(--portfolio-border); border-color: transparent; border-radius: 0; background: transparent; color: var(--portfolio-muted); cursor: pointer; font: var(--portfolio-type-filter)/var(--portfolio-line-filter) var(--portfolio-sans); letter-spacing: var(--portfolio-track-filter); }
.portfolio-work-filter.is-active { border-color: var(--portfolio-ink); color: var(--portfolio-ink); }
.portfolio-editorial-case[hidden] { display: none; }
.portfolio-editorial-case__media { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: var(--portfolio-border); border-radius: var(--portfolio-media-radius); background: var(--portfolio-soft); }
.portfolio-editorial-case__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portfolio-case-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--portfolio-case-gallery-gap); align-content: start; align-self: start; }
.portfolio-case-gallery__item, .portfolio-case-gallery__placeholder { display: block; width: 100%; aspect-ratio: var(--portfolio-case-image-ratio); overflow: hidden; border-radius: var(--portfolio-case-media-radius); background: var(--portfolio-soft); }
.portfolio-case-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
#business-pmi-learning .portfolio-case-gallery__item img,
#business-campari-reporting .portfolio-case-gallery__item img { object-position: left center; }
.portfolio-case-dialog { width: min(var(--portfolio-page-max), calc(100vw - var(--portfolio-space-4))); max-height: 90vh; padding: var(--portfolio-space-4); overflow-y: auto; border: var(--portfolio-border); border-radius: var(--portfolio-media-radius); background: var(--portfolio-paper); color: var(--portfolio-ink); }
.portfolio-case-dialog::backdrop { background: var(--portfolio-ink); opacity: var(--portfolio-overlay-opacity); }
.portfolio-case-dialog__header { display: flex; align-items: start; justify-content: space-between; gap: var(--portfolio-space-3); padding-bottom: var(--portfolio-space-3); border-bottom: var(--portfolio-border); }
.portfolio-case-dialog__header .portfolio-editorial-case__identity { grid-template-columns: auto 1fr; align-items: center; margin: 0; }
.portfolio-case-dialog__close { flex: none; padding: var(--portfolio-space-1) var(--portfolio-space-2); border: var(--portfolio-border); border-radius: var(--portfolio-pill-radius); background: var(--portfolio-paper); color: var(--portfolio-ink); cursor: pointer; font: var(--portfolio-type-label)/var(--portfolio-line-label) var(--portfolio-mono); text-transform: uppercase; }
.portfolio-case-dialog__intro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--portfolio-space-6); align-items: start; padding: var(--portfolio-space-4) 0; }
.portfolio-case-dialog__copy { max-width: var(--portfolio-reading-max); }
.portfolio-case-dialog__copy h2 { margin: 0 0 var(--portfolio-space-3); font-size: var(--portfolio-type-section-title); font-weight: var(--portfolio-weight-display); letter-spacing: var(--portfolio-track-heading); }
.portfolio-case-dialog__copy h3 { margin: var(--portfolio-space-4) 0 var(--portfolio-space-2); font-size: var(--portfolio-type-summary); font-weight: var(--portfolio-weight-display); }
.portfolio-case-dialog__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--portfolio-space-3); align-items: start; }
.portfolio-case-dialog__gallery img { display: block; width: 100%; height: auto; border: var(--portfolio-border); border-radius: var(--portfolio-media-radius); }
.portfolio-editorial-case__outcome { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: var(--portfolio-case-copy-max); margin-top: auto; padding-top: var(--portfolio-case-group-gap); }
.portfolio-editorial-case__read { display: inline-flex; align-items: center; gap: var(--portfolio-space-1); margin-top: var(--portfolio-case-action-gap); padding: 5px var(--portfolio-space-1); border: var(--portfolio-border); border-radius: var(--portfolio-tag-radius); background: var(--portfolio-paper); color: var(--portfolio-muted); font: var(--portfolio-type-label)/var(--portfolio-line-label) var(--portfolio-mono); text-transform: uppercase; text-decoration: none; cursor: pointer; }
.portfolio-editorial-case__read span { text-decoration: none; }
.portfolio-editorial-case__read:hover { background: var(--portfolio-soft); }
.portfolio-editorial-case__read:focus-visible { outline: var(--portfolio-editor-focus); outline-offset: var(--portfolio-control-inset); }
.portfolio-editorial-case h3.portfolio-editorial-case__summary { margin: 0; padding: 0; font-family: var(--portfolio-sans); font-size: var(--portfolio-case-heading); line-height: var(--portfolio-case-heading-line); font-weight: var(--portfolio-weight-normal); letter-spacing: var(--portfolio-case-heading-tracking); }
.portfolio-editorial-case__subtitle { margin: 0 0 var(--portfolio-space-3); color: var(--portfolio-muted); font-size: var(--portfolio-type-summary); }
.portfolio-editorial-case p, .portfolio-editorial-copy p { margin: 0 0 var(--portfolio-space-2); color: var(--portfolio-muted); font-size: var(--portfolio-type-body); line-height: var(--portfolio-line-body); }
.portfolio-editorial-case p.portfolio-editorial-case__description { margin: var(--portfolio-case-description-gap) 0 0; font: inherit; letter-spacing: var(--portfolio-case-text-tracking); }
.portfolio-editorial-case p.portfolio-editorial-kicker { margin: 0; color: var(--portfolio-ink); }
.portfolio-editorial-case p.portfolio-editorial-metrics, .portfolio-case-dialog p.portfolio-editorial-metrics { margin: var(--portfolio-space-1) 0 0; color: var(--portfolio-muted); font: var(--portfolio-type-body)/var(--portfolio-line-body) var(--portfolio-sans); }
.portfolio-editorial-case h4 { margin: var(--portfolio-space-4) 0 var(--portfolio-space-2); font-size: var(--portfolio-type-summary); font-weight: var(--portfolio-weight-display); }
.portfolio-editorial-case h4.portfolio-editorial-case__headline { margin: 0 0 var(--portfolio-space-2); font-size: var(--portfolio-type-summary); line-height: var(--portfolio-line-body); letter-spacing: 0; }
.portfolio-editorial-link { display: inline-block; margin-top: var(--portfolio-space-2); color: var(--portfolio-ink); font-size: var(--portfolio-type-body); text-underline-offset: 4px; }
.portfolio-experience-row__mark { display: grid; place-items: center; width: var(--portfolio-mark-size); height: var(--portfolio-mark-size); margin-bottom: var(--portfolio-case-logo-gap); color: var(--portfolio-ink); font: var(--portfolio-type-body)/1 var(--portfolio-sans); }
.portfolio-experience-row__mark--tile { overflow: hidden; border-radius: var(--portfolio-media-radius); }
.portfolio-experience-row__mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.portfolio-experience-row__topline { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--portfolio-space-2); }
.portfolio-experience-row__topline h3 { margin: 0; color: var(--portfolio-ink); font-size: var(--portfolio-type-body); font-weight: var(--portfolio-weight-normal); letter-spacing: 0; line-height: var(--portfolio-case-line); }
.portfolio-experience-row__period { padding: var(--portfolio-space-1) var(--portfolio-space-2); border-radius: var(--portfolio-pill-radius); background: var(--portfolio-soft); color: var(--portfolio-ink); font: var(--portfolio-type-label)/1.35 var(--portfolio-sans); }
.portfolio-experience-row__position { margin: 0; color: var(--portfolio-muted); font-size: var(--portfolio-type-body); line-height: var(--portfolio-case-line); }
.portfolio-experience-row__body { max-width: var(--portfolio-experience-copy-max); margin-top: var(--portfolio-space-3); }
.portfolio-experience-row__body p { margin: 0 0 var(--portfolio-space-2); color: var(--portfolio-muted); font-size: var(--portfolio-type-body); line-height: var(--portfolio-line-body); }
.portfolio-experience-row__body p:last-child { margin-bottom: 0; }
.portfolio-editorial-row { display: grid; grid-template-columns: minmax(0, var(--portfolio-case-column)) minmax(0, 1fr); gap: var(--portfolio-case-column-gap); }
.portfolio-experience-row + .portfolio-experience-row,
.portfolio-editorial-row + .portfolio-editorial-row {
  margin-block-start: var(--portfolio-space-4);
  padding-block-start: var(--portfolio-space-4);
  border-block-start: var(--portfolio-border);
}
.portfolio-editorial-row h3 { margin: 0 0 var(--portfolio-space-1); font-size: var(--portfolio-type-row-title); font-weight: var(--portfolio-weight-display); letter-spacing: var(--portfolio-track-subheading); }
.portfolio-editorial-row__body { max-width: var(--portfolio-reading-max); }
.portfolio-editorial-row__body p { margin: 0 0 var(--portfolio-space-2); color: var(--portfolio-muted); font-size: var(--portfolio-type-body); line-height: var(--portfolio-line-body); }
.portfolio-editorial-copy { max-width: var(--portfolio-reading-max); }
.portfolio-editorial-contact { display: grid; grid-template-columns: minmax(0, var(--portfolio-case-column)) minmax(0, 1fr); gap: var(--portfolio-case-column-gap); align-items: start; padding-block-end: var(--portfolio-space-5); }
.portfolio-editorial-contact__body { display: grid; gap: var(--portfolio-space-2); max-width: var(--portfolio-reading-max); }
.portfolio-editorial-contact__body p { margin: 0; color: var(--portfolio-muted); font-size: var(--portfolio-type-body); line-height: var(--portfolio-line-body); }
.portfolio-editorial-contact__links { display: flex; gap: var(--portfolio-space-3); justify-content: flex-start; flex-wrap: wrap; }
.portfolio-editorial-contact__links a { color: var(--portfolio-ink); font-size: var(--portfolio-type-body); text-underline-offset: 4px; }
@media (max-width: 760px) {
  html:has(body[data-portfolio-mode="business"]) { overflow-x: clip; }
  body[data-portfolio-mode="business"] { overflow-x: hidden; }
  body[data-portfolio-mode="business"] #portfolio-business-view { padding: 0 var(--portfolio-page-gutter); }
  .portfolio-editorial-section__heading, .portfolio-editorial-row, .portfolio-editorial-contact { grid-template-columns: 1fr; gap: var(--portfolio-space-3); }
  .portfolio-editorial-split, .portfolio-experience { grid-template-columns: 1fr; gap: var(--portfolio-space-3); }
  .portfolio-expertise__grid { grid-template-columns: 1fr; gap: var(--portfolio-space-3); }
  .portfolio-editorial-case__copy { padding-right: 0; gap: 0; }
  .portfolio-editorial-case__open, .portfolio-case-dialog__intro { grid-template-columns: minmax(0, 1fr); gap: var(--portfolio-space-3); }
  .portfolio-case-gallery { grid-template-columns: minmax(0, 1fr); }
  .portfolio-case-dialog { width: calc(100vw - var(--portfolio-space-2)); max-height: 90vh; padding: var(--portfolio-space-2); }
  .portfolio-case-dialog__gallery { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  #portfolio-business-view *, .portfolio-site-header * { scroll-behavior: auto !important; }
}

body[data-portfolio-mode="creative"] .portfolio-rich-case .case-heading,
body[data-portfolio-mode="creative"] .portfolio-rich-case .case-second-line { display: none !important; }
.portfolio-rich-copy { position: relative; z-index: 2; width: min(100% - var(--portfolio-space-5), var(--portfolio-modal-max)); margin: var(--portfolio-modal-top) auto var(--portfolio-modal-bottom); color: var(--portfolio-paper); }
.portfolio-rich-copy__heading { margin: var(--portfolio-modal-heading-gap) 0 var(--portfolio-space-2); font-size: var(--portfolio-type-modal-heading); font-weight: 500; }
.portfolio-rich-copy .text-75-regular { margin: 0 0 var(--portfolio-modal-inline-space); }
.portfolio-rich-copy .text-25-medium { margin: 0 0 var(--portfolio-copy-gap); }
.portfolio-rich-copy__link { display: inline-block; margin: var(--portfolio-modal-inline-space) 0; color: inherit; text-underline-offset: 4px; }

.portfolio-hover-gallery { position: relative; padding: 0; border: 0; text-align: inherit; cursor: pointer; }
.portfolio-hover-gallery:focus-visible { outline: var(--portfolio-editor-focus); outline-offset: var(--portfolio-control-inset); }

.portfolio-hover-gallery img { position: absolute; inset: 0; width: 100%; height: 100%; transition: none; animation: none; }