/* Device compositions echo the original ColorIT hero. Every selector is scoped. */
#colorit-portfolio { --portfolio-ink: #191a20; --portfolio-muted: #60636a; --portfolio-orange: #e98100; position: relative; padding: 70px 0 60px; color: var(--portfolio-ink); scroll-margin-top: 110px; }
#colorit-portfolio [hidden] { display: none !important; }
#colorit-portfolio .portfolio-heading { max-width: 660px; margin: 0 auto 60px; text-align: center; }
#colorit-portfolio .portfolio-heading h2 { font-size: 42px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; }
#colorit-portfolio p { color: var(--portfolio-muted); font-size: 15px; line-height: 1.8; margin: 0; }
#colorit-portfolio .portfolio-heading p { font-size: 17px; }
#colorit-portfolio .portfolio-offer { padding: 0 0 35px; border-bottom: 1px solid #e9e9eb; }
#colorit-portfolio .portfolio-offer h3 { font-size: 28px; letter-spacing: -.5px; }
#colorit-portfolio .portfolio-offer > p { max-width: 80ch; }
#colorit-portfolio .portfolio-offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 30px; }
#colorit-portfolio .portfolio-offer-grid > div { border-top: 2px solid var(--portfolio-orange); padding-top: 20px; }
#colorit-portfolio .portfolio-offer h4 { font-size: 19px; font-weight: 600; margin-bottom: 12px; }
#colorit-portfolio .portfolio-offer-grid p { font-size: 14px; }
#colorit-portfolio .portfolio-offer a { display: inline-block; margin-top: 18px; color: #88500b; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
#colorit-portfolio .portfolio-screen-note { font-size: 12px; margin-top: 12px; }
#colorit-portfolio .portfolio-contact { max-width: 680px; margin: 55px auto 0; text-align: center; }
#colorit-portfolio .portfolio-contact h3 { font-size: 28px; letter-spacing: -.5px; }
#colorit-portfolio .portfolio-contact a { display: inline-block; margin-top: 22px; padding: 13px 25px; border-radius: 24px; background: #a95200; color: #fff; font-size: 14px; font-weight: 600; }
#colorit-portfolio .portfolio-project { --stage-start: #ffa033; --stage-end: #f0675c; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; column-gap: 65px; padding: 65px 0 85px; border-bottom: 1px solid #e9e9eb; scroll-margin-top: 125px; }
#colorit-portfolio .portfolio-project--speakbeak { --stage-start: #f4dc61; --stage-end: #cedb8a; }
#colorit-portfolio .portfolio-project--newarts-market { --stage-start: #9dc263; --stage-end: #275d35; }
#colorit-portfolio .portfolio-kind { color: #6c4b27; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
#colorit-portfolio h3 { color: var(--portfolio-ink); font-size: clamp(34px, 3.7vw, 49px); font-weight: 700; line-height: 1.15; letter-spacing: -1.4px; margin: 0 0 20px; }
#colorit-portfolio .portfolio-headline { color: var(--portfolio-ink); font-size: 22px; line-height: 1.45; font-weight: 600; margin-bottom: 18px; }
#colorit-portfolio .portfolio-lead { max-width: 54ch; }
#colorit-portfolio .portfolio-gallery { grid-column: 2; grid-row: 1 / 3; min-width: 0; align-self: start; }
#colorit-portfolio .portfolio-stage { position: relative; height: 570px; isolation: isolate; }
#colorit-portfolio .portfolio-stage::before { content: ''; position: absolute; z-index: -1; width: 96%; aspect-ratio: 1; max-width: 480px; top: 58px; left: 2%; background: linear-gradient(135deg, var(--stage-start), var(--stage-end)); border-radius: 50%; }
#colorit-portfolio .portfolio-stage::after { content: ''; position: absolute; z-index: -1; width: 70%; height: 30px; bottom: 20px; left: 14%; border-radius: 50%; background: #191a201f; filter: blur(14px); }
#colorit-portfolio .portfolio-slide { position: absolute; inset: 0; margin: 0; }
#colorit-portfolio .portfolio-device { display: block; position: absolute; width: 220px; padding: 17px 7px 9px; background: linear-gradient(115deg, #17181c 20%, #44474f 50%, #111216 80%); border: 2px solid #9699a0; border-radius: 32px; box-shadow: 2px 2px 0 #08090b, 14px 22px 25px #191a2033, inset 0 0 0 2px #111216; margin: 0; line-height: 0; }
#colorit-portfolio .portfolio-device::before { content: ''; position: absolute; top: 6px; width: 36px; height: 3px; left: calc(50% - 18px); border-radius: 10px; background: #08090b; box-shadow: 0 1px 0 #7779; }
#colorit-portfolio .portfolio-device::after { content: ''; position: absolute; right: -4px; top: 105px; width: 3px; height: 45px; border-radius: 0 3px 3px 0; background: #464951; }
#colorit-portfolio .portfolio-device-screen { display: block; overflow: hidden; border-radius: 20px; background: #fff; }
#colorit-portfolio .portfolio-device img { display: block; width: 100%; height: auto; max-width: none; margin: 0; }
#colorit-portfolio .portfolio-device--front { top: 18px; left: calc(50% - 155px); z-index: 2; transform: perspective(1200px) rotateY(10deg) rotateZ(-9deg); cursor: zoom-in; }
#colorit-portfolio .portfolio-device--rear { top: 78px; left: calc(50% - 20px); width: 190px; transform: perspective(1200px) rotateY(-12deg) rotateZ(13deg); z-index: 1; }
#colorit-portfolio .portfolio-slide.is-entering { animation: portfolio-slide-in 220ms ease-out; }
@keyframes portfolio-slide-in { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
#colorit-portfolio .portfolio-gallery-controls { display: flex; gap: 10px; align-items: center; justify-content: center; }
#colorit-portfolio button { font-family: inherit; }
#colorit-portfolio .portfolio-arrow { flex: 0 0 36px; height: 36px; border: 1px solid #d8d9dc; border-radius: 50%; background: #fff; color: var(--portfolio-ink); font-size: 28px; line-height: 28px; cursor: pointer; padding: 0 0 3px; }
#colorit-portfolio .portfolio-screen-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
#colorit-portfolio .portfolio-screen-picker button { border: 0; border-bottom: 2px solid transparent; padding: 10px 0; background: transparent; color: #666970; font-size: 12px; font-weight: 500; cursor: pointer; }
#colorit-portfolio .portfolio-screen-picker [aria-pressed="true"] { border-color: var(--portfolio-orange); color: var(--portfolio-ink); font-weight: 700; }
#colorit-portfolio .portfolio-caption { min-height: 125px; max-width: 390px; padding: 24px 10px 0; margin: 0 auto; text-align: center; }
#colorit-portfolio .portfolio-count { display: block; font-size: 11px; color: #777; margin-bottom: 7px; font-variant-numeric: tabular-nums; }
#colorit-portfolio .portfolio-caption h4 { font-size: 17px; font-weight: 600; line-height: 1.45; margin: 0 0 7px; }
#colorit-portfolio .portfolio-caption p { font-size: 13px; line-height: 1.7; }
#colorit-portfolio .portfolio-story { padding-top: 28px; }
#colorit-portfolio .portfolio-features { margin: 0; padding: 0; }
#colorit-portfolio .portfolio-features li { list-style: none; margin: 0 0 20px; padding: 0; }
#colorit-portfolio .portfolio-features strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 5px; }
#colorit-portfolio .portfolio-features p, #colorit-portfolio .portfolio-work p { font-size: 14px; }
#colorit-portfolio .portfolio-work { border-left: 2px solid var(--portfolio-orange); padding-left: 18px; margin: 28px 0 18px; }
#colorit-portfolio .portfolio-work h4 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
#colorit-portfolio .portfolio-stack { font-size: 12px; color: #76777c; }
#colorit-portfolio .portfolio-services { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 22px 0 18px; }
#colorit-portfolio .portfolio-services a { color: #88500b; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
#colorit-portfolio .portfolio-status { font-size: 12px; color: #76777c; }
#colorit-portfolio .portfolio-capabilities { grid-column: 1 / -1; min-width: 0; margin-top: 35px; border-top: 1px solid #dedee2; border-bottom: 1px solid #dedee2; }
#colorit-portfolio .portfolio-capabilities summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; line-height: 1.45; }
#colorit-portfolio .portfolio-capabilities summary::-webkit-details-marker { display: none; }
#colorit-portfolio .portfolio-capabilities summary:hover { color: #88500b; }
#colorit-portfolio .portfolio-capabilities-meta { display: flex; align-items: center; gap: 18px; flex-shrink: 0; font-size: 12px; font-weight: 400; color: var(--portfolio-muted); }
#colorit-portfolio .portfolio-expand-icon { display: inline-block; color: #88500b; font-size: 28px; line-height: 1; font-weight: 400; }
#colorit-portfolio .portfolio-capabilities[open] .portfolio-expand-icon { transform: rotate(45deg); }
#colorit-portfolio .portfolio-feature-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 65px; padding: 12px 0 32px; }
#colorit-portfolio .portfolio-feature-group h4 { color: #88500b; font-size: 17px; font-weight: 600; line-height: 1.5; margin: 0 0 19px; }
#colorit-portfolio .portfolio-feature-group dl { margin: 0; }
#colorit-portfolio .portfolio-feature-group dl > div { margin-bottom: 18px; }
#colorit-portfolio .portfolio-feature-group dl > div:last-child { margin-bottom: 0; }
#colorit-portfolio .portfolio-feature-group dt { color: var(--portfolio-ink); font-size: 14px; font-weight: 600; line-height: 1.6; margin-bottom: 5px; }
#colorit-portfolio .portfolio-feature-group dd { margin: 0; color: var(--portfolio-muted); font-size: 14px; line-height: 1.8; }
#colorit-portfolio .portfolio-footnote { font-size: 12px; text-align: center; padding-top: 30px; }
#colorit-portfolio :is(button,a,summary):focus-visible { outline: 3px solid #b76500; outline-offset: 5px; }
#colorit-portfolio .portfolio-lightbox { inset: 0; margin: auto; width: min(460px, 96vw); max-width: none; max-height: 96dvh; border: 1px solid #777; border-radius: 16px; background: #18191d; padding: 14px; color: #fff; overflow: auto; box-shadow: 0 20px 80px #0006; }
#colorit-portfolio .portfolio-lightbox::backdrop { background: #101114dd; }
#colorit-portfolio .portfolio-lightbox button { display: block; margin: 0 0 14px auto; padding: 8px 14px; border: 1px solid #72747a; border-radius: 20px; background: transparent; color: #fff; font-size: 13px; cursor: pointer; }
#colorit-portfolio .portfolio-lightbox button span { font-size: 18px; padding-left: 12px; }
#colorit-portfolio .portfolio-lightbox img { display: block; max-width: 100%; width: auto; height: auto; max-height: 76dvh; margin: 0 auto; border-radius: 10px; }
#colorit-portfolio .portfolio-lightbox p { color: #ddd; font-size: 12px; text-align: center; margin-top: 12px; }
@media (min-width: 992px) {
  #colorit-portfolio .portfolio-project--speakbeak .portfolio-gallery { grid-column: 1; }
  #colorit-portfolio .portfolio-project--speakbeak .portfolio-intro, #colorit-portfolio .portfolio-project--speakbeak .portfolio-story { grid-column: 2; }
}
@media (max-width: 991px) {
  #colorit-portfolio .portfolio-offer-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #colorit-portfolio .portfolio-project { grid-template-columns: minmax(0, 1fr); padding: 45px 0 55px; }
  #colorit-portfolio .portfolio-gallery { grid-column: 1; grid-row: auto; width: 100%; max-width: 500px; margin: 15px auto 0; }
  #colorit-portfolio .portfolio-intro { max-width: 620px; }
  #colorit-portfolio .portfolio-story { padding-top: 24px; }
  #colorit-portfolio .portfolio-stage { height: 545px; }
  #colorit-portfolio .portfolio-feature-groups { column-gap: 30px; }
}
@media (max-width: 575px) {
  #colorit-portfolio { padding: 45px 0 35px; }
  #colorit-portfolio .container { padding-left: 24px; padding-right: 24px; }
  #colorit-portfolio .portfolio-heading { margin-bottom: 15px; text-align: left; }
  #colorit-portfolio .portfolio-heading h2 { font-size: 32px; }
  #colorit-portfolio .portfolio-heading p { font-size: 15px; }
  #colorit-portfolio h3 { font-size: 36px; letter-spacing: -1px; margin-bottom: 16px; }
  #colorit-portfolio .portfolio-headline { font-size: 21px; }
  #colorit-portfolio .portfolio-lead { font-size: 14px; }
  #colorit-portfolio .portfolio-stage { height: 450px; }
  #colorit-portfolio .portfolio-stage::before { top: 60px; width: 100%; left: 0; }
  #colorit-portfolio .portfolio-stage::after { bottom: 15px; }
  #colorit-portfolio .portfolio-device { width: 174px; border-radius: 27px; padding: 15px 5px 7px; }
  #colorit-portfolio .portfolio-device-screen { border-radius: 17px; }
  #colorit-portfolio .portfolio-device--front { top: 18px; left: calc(50% - 119px); }
  #colorit-portfolio .portfolio-device--rear { width: 148px; top: 82px; left: calc(50% - 3px); }
  #colorit-portfolio .portfolio-gallery-controls { gap: 8px; }
  #colorit-portfolio .portfolio-arrow { flex-basis: 32px; height: 32px; }
  #colorit-portfolio .portfolio-screen-picker { column-gap: 10px; }
  #colorit-portfolio .portfolio-screen-picker button { font-size: 11px; }
  #colorit-portfolio .portfolio-caption { padding-top: 20px; min-height: 120px; }
  #colorit-portfolio .portfolio-capabilities summary { align-items: flex-start; font-size: 16px; gap: 14px; }
  #colorit-portfolio .portfolio-capabilities-meta { gap: 10px; padding-top: 3px; font-size: 11px; }
  #colorit-portfolio .portfolio-feature-groups { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 374px) {
  #colorit-portfolio .portfolio-stage { height: 410px; }
  #colorit-portfolio .portfolio-device--front { width: 156px; left: calc(50% - 110px); }
  #colorit-portfolio .portfolio-device--rear { width: 132px; left: calc(50% - 15px); }
  #colorit-portfolio .portfolio-screen-picker { column-gap: 7px; }
}
@media (prefers-reduced-motion: reduce) { #colorit-portfolio .portfolio-slide.is-entering { animation: none; } }