/* ---------- Portfolio Archive ---------- */
.portfolio-archive { position:relative; width:100%; padding:85px 0 110px; overflow:hidden; background:#fff; }
.portfolio-archive__container { width:calc(100% - 40px); max-width:1200px; margin:0 auto; }
.portfolio-archive__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; align-items:stretch; }
.portfolio-archive-card { display:flex; flex-direction:column; min-width:0; height:100%; overflow:hidden; background:#fff; border:1px solid rgba(15,15,15,.1); border-radius:22px; box-shadow:0 12px 38px rgba(15,15,15,.07); transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease; }
.portfolio-archive-card:hover { border-color:rgba(var(--backgroundColorOrangeRGB),.28); box-shadow:0 25px 60px rgba(15,15,15,.13); transform:translateY(-6px); }
.portfolio-archive-card__media { position:relative; flex:0 0 auto; width:100%; height:340px; overflow:hidden; background:#f1f1f1; }
.portfolio-archive-card__image-link { display:block; width:100%; height:100%; color:inherit; text-decoration:none; }
.portfolio-archive-card__image-link:hover { text-decoration:none; }
.portfolio-archive-card__image { display:block; width:100%; max-width:none; height:100%; margin:0; border:0; border-radius:0; object-fit:cover; object-position:center; transform:scale(1); transition:transform .45s ease; }
.portfolio-archive-card:hover .portfolio-archive-card__image { transform:scale(1.035); }
.portfolio-archive-card__placeholder { display:flex; align-items:center; justify-content:center; flex-direction:column; width:100%; height:100%; color:#fff; background:var(--backgroundColorBlack); }
.portfolio-archive-card__placeholder strong { color:var(--backgroundColorOrange); font-size:36px; line-height:1; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.portfolio-archive-card__placeholder span { margin-top:7px; color:#fff; font-size:11px; line-height:1; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.portfolio-archive-card__label { position:absolute; z-index:2; top:19px; left:19px; display:inline-flex; align-items:center; min-height:32px; max-width:calc(100% - 38px); padding:0 17px; overflow:hidden; color:#fff; background:var(--backgroundColorOrange); border-radius:999px; box-shadow:0 8px 22px rgba(15,15,15,.16); font-size:11px; line-height:1; font-weight:700; letter-spacing:.035em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.portfolio-archive-card__content { display:flex; flex:1 1 auto; flex-direction:column; min-height:220px; padding:27px 25px 25px; }
.portfolio-archive-card__title { position:relative; margin:0 0 15px; padding:0 0 15px; color:var(--backgroundColorBlack); font-size:25px; line-height:1.2; font-weight:700; letter-spacing:-.025em; }
.portfolio-archive-card__title::before { position:absolute; z-index:2; bottom:0; left:0; width:30px; height:6px; content:""; background:radial-gradient(circle,var(--backgroundColorOrange) 2px,transparent 2px) 0 0/10px 6px repeat-x; }
.portfolio-archive-card__title::after { position:absolute; bottom:2px; left:34px; width:95px; height:2px; content:""; background:var(--backgroundColorOrange); }
.portfolio-archive-card__title a { color:inherit; text-decoration:none; }
.portfolio-archive-card__title a:hover { color:inherit; text-decoration:none; }
.portfolio-archive-card__description { color:rgba(34,34,34,.82); font-size:15px; line-height:1.7; }
.portfolio-archive-card__description p { margin:0; }
.portfolio-archive-card__description p + p { margin-top:12px; }
.portfolio-archive-card__footer { display:grid; grid-template-columns:minmax(140px,.85fr) minmax(175px,1fr) auto; gap:18px; align-items:center; min-height:112px; padding:18px 25px; border-top:1px solid rgba(15,15,15,.08); }
.portfolio-archive-card__meta { display:grid; grid-template-columns:32px minmax(0,1fr); gap:11px; align-items:center; min-width:0; }
.portfolio-archive-card__meta-icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; color:var(--backgroundColorOrange); font-size:30px; line-height:1; }
.portfolio-archive-card__meta strong { display:block; margin:0 0 2px; color:#1e1e1e; font-size:14px; line-height:1.3; font-weight:700; }
.portfolio-archive-card__meta div > span { display:block; color:#555; font-size:14px; line-height:1.5; }
.portfolio-archive-card__project-link { display:inline-flex; align-items:center; justify-content:flex-end; gap:9px; color:var(--backgroundColorOrange); font-size:14px; line-height:1.3; font-weight:700; text-decoration:none; white-space:nowrap; }
.portfolio-archive-card__project-link:hover,.portfolio-archive-card__project-link:focus { color:var(--buttonHover); text-decoration:none; }
.portfolio-archive-card__project-link span:last-child { font-family:Arial,sans-serif; font-size:19px; line-height:1; transition:transform .25s ease; }
.portfolio-archive-card__project-link:hover span:last-child { transform:translateX(4px); }
.portfolio-archive__empty { width:100%; max-width:720px; margin:0 auto; padding:55px 40px; background:#f7f7f7; border:1px solid rgba(15,15,15,.08); border-radius:16px; text-align:center; }
.portfolio-archive__empty h2 { margin:0 0 14px; color:var(--backgroundColorBlack); font-size:32px; line-height:1.25; }
.portfolio-archive__empty p { margin:0 0 26px; color:rgba(34,34,34,.7); font-size:16px; line-height:1.7; }

@media (max-width:1100px) {
.portfolio-archive { padding:75px 0 95px; }
.portfolio-archive__grid { gap:25px; }
.portfolio-archive-card__media { height:300px; }
.portfolio-archive-card__footer { grid-template-columns:repeat(2,minmax(0,1fr)); }
.portfolio-archive-card__project-link { grid-column:1/-1; justify-content:flex-start; }
}

@media (max-width:900px) {
.portfolio-archive__grid { grid-template-columns:1fr; }
.portfolio-archive-card { width:100%; max-width:700px; margin:0 auto; }
.portfolio-archive-card__media { height:360px; }
.portfolio-archive-card__content { min-height:0; }
.portfolio-archive-card__footer { grid-template-columns:minmax(140px,.85fr) minmax(175px,1fr) auto; }
.portfolio-archive-card__project-link { grid-column:auto; justify-content:flex-end; }
}

@media (max-width:767px) {
.portfolio-archive { padding:55px 0 75px; }
.portfolio-archive__container { width:calc(100% - 40px); }
.portfolio-archive__grid { gap:24px; }
.portfolio-archive-card { border-radius:16px; }
.portfolio-archive-card__media { height:auto; aspect-ratio:16/10; }
.portfolio-archive-card__label { top:14px; left:14px; min-height:28px; max-width:calc(100% - 28px); padding:0 13px; font-size:10px; }
.portfolio-archive-card__content { padding:22px 20px; }
.portfolio-archive-card__title { font-size:22px; }
.portfolio-archive-card__description { font-size:14px; line-height:1.65; }
.portfolio-archive-card__footer { grid-template-columns:1fr; gap:16px; min-height:0; padding:19px 20px 22px; }
.portfolio-archive-card__project-link { grid-column:auto; justify-content:flex-start; }
.portfolio-archive-card__meta { grid-template-columns:30px minmax(0,1fr); }
.portfolio-archive-card__meta-icon { width:30px; height:30px; font-size:28px; }
.portfolio-archive__empty { padding:40px 22px; }
.portfolio-archive__empty h2 { font-size:27px; }
}

@media (max-width:420px) {
.portfolio-archive__container { width:calc(100% - 32px); }
.portfolio-archive-card__content { padding-right:18px; padding-left:18px; }
.portfolio-archive-card__title { font-size:20px; }
.portfolio-archive-card__footer { padding-right:18px; padding-left:18px; }
}

/* ---------- Single Portfolio ---------- */
.portfolio-single { position: relative; width: 100%; overflow: hidden; background: #fff; }
.portfolio-single__hero { display: none; }
.portfolio-single__showcase { position: relative; padding: 90px 0 120px; background: #fff; }
.portfolio-single__browser { width: 100%; max-width: 1080px; margin: 0 auto; overflow: hidden; border: 1px solid #dedede; border-radius: 12px; background: #fff; box-shadow: 0 28px 70px rgba(15, 15, 15, .14); }
.portfolio-single__browser-bar { display: grid; grid-template-columns: 105px minmax(0, 1fr) 105px; align-items: center; min-height: 50px; padding: 0 18px; border-bottom: 1px solid #e7e7e7; background: #f4f4f4; }
.portfolio-single__browser-dots { display: flex; align-items: center; gap: 6px; }
.portfolio-single__browser-dots span { display: block; width: 9px; height: 9px; border-radius: 50%; background: #cecece; }
.portfolio-single__browser-url { width: 100%; max-width: 430px; margin: 0 auto; padding: 8px 16px; overflow: hidden; color: #747474; border: 1px solid #dfdfdf; border-radius: 6px; background: #fff; font-size: 11px; line-height: 1; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.portfolio-single__browser-image { position: relative; overflow: hidden; background: #eee; }
.portfolio-single__featured-image { display: block; width: 100%; height: auto; }
.portfolio-single__introduction { padding: 0 15px 125px 15px; background: #fff; }
.portfolio-single__introduction-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 95px; width: 100%; max-width: 1080px; margin: 0 auto; align-items: start; }
.portfolio-single__project-meta { position: relative; padding-top: 25px; border-top: 1px solid #dcdcdc; }
.portfolio-single__section-label { color: var(--color-primary, var(--backgroundColorOrange)); font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.portfolio-single__meta-item { display: flex; flex-direction: column; gap: 7px; margin-top: 27px; }
.portfolio-single__meta-label { color: #8a8a8a; font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-single__meta-value { color: var(--color-dark, #0f0f0f); font-size: 15px; line-height: 1.6; font-weight: 600; }
.portfolio-single__services { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.portfolio-single__services li { position: relative; margin: 0; padding-left: 15px; color: var(--color-dark, #0f0f0f); font-size: 15px; line-height: 1.55; }
.portfolio-single__services li::before { position: absolute; top: .72em; left: 0; width: 5px; height: 5px; content: ""; border-radius: 50%; background: var(--color-primary, var(--backgroundColorOrange)); transform: translateY(-50%); }
.portfolio-single__meta-button { display: inline-flex; width: auto; margin-top: 30px; gap: 12px; }
.portfolio-single__meta-button svg { flex: 0 0 auto; transition: transform .3s ease; }
.portfolio-single__meta-button:hover svg { transform: translate(3px, -3px); }
.portfolio-single__introduction-content { width: 100%; max-width: 750px; }
.portfolio-single__introduction-content p { margin: 0 0 20px; color: var(--color-dark, #0f0f0f); font-size: 18px; line-height: 1.75; font-weight: 400; letter-spacing: normal; }
.portfolio-single__introduction-content p:last-child { margin-bottom: 0; }
.portfolio-single__introduction-content ul { display: grid; gap: 8px; margin: 22px 0; padding-left: 22px; }
.portfolio-single__introduction-content li { color: #4f4f4f; font-size: 17px; line-height: 1.7; }
.portfolio-single__section { position: relative; padding: 115px 0; overflow: hidden; }
.portfolio-single__section--light { background: #fff; }
.portfolio-single__section--muted { background: #f4f4f2; }
.portfolio-single__section--dark { color: #fff; background: var(--color-dark, #0f0f0f); }
.portfolio-single__section-container { position: relative; display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 95px; width: 100%; max-width: 1080px; margin: 0 auto; align-items: start; padding: 0 15px; }
.portfolio-single__section-heading { position: relative; z-index: 2; }
.portfolio-single__section-title { max-width: 440px; margin: 17px 0 0; color: var(--color-dark, #0f0f0f); font-size: clamp(34px, 3.7vw, 52px); line-height: 1.12; font-weight: 700; letter-spacing: -.04em; }
.portfolio-single__section--dark .portfolio-single__section-title { color: #fff; }
.portfolio-single__section-text { position: relative; z-index: 2; padding-top: 31px; }
.portfolio-single__section-text p { margin: 0 0 20px; color: #555; font-size: 17px; line-height: 1.8; }
.portfolio-single__section-text p:last-child { margin-bottom: 0; }
.portfolio-single__section-text ul,
.portfolio-single__section-text ol { display: grid; gap: 10px; margin: 22px 0; padding-left: 21px; color: #555; font-size: 17px; line-height: 1.75; }
.portfolio-single__section-text a { color: var(--color-primary, var(--backgroundColorOrange)); }
.portfolio-single__section--dark .portfolio-single__section-text p,
.portfolio-single__section--dark .portfolio-single__section-text ul,
.portfolio-single__section--dark .portfolio-single__section-text ol { color: rgba(255, 255, 255, .72); }
.portfolio-single__section-number { position: absolute; z-index: 1; top: -70px; right: 0; color: rgba(15, 15, 15, .035); font-size: 190px; line-height: 1; font-weight: 700; letter-spacing: -.08em; pointer-events: none; }
.portfolio-single__section--dark .portfolio-single__section-number { color: rgba(255, 255, 255, .04); }
.portfolio-single__gallery { padding: 120px 0; background: #fff; }
.portfolio-single__gallery-header { width: 100%; max-width: 1080px; margin: 0 auto 48px; padding: 0 15px; }
.portfolio-single__gallery-title { max-width: 720px; margin: 16px 0 0; color: var(--color-dark, #0f0f0f); font-size: clamp(38px, 4.5vw, 60px); line-height: 1.1; font-weight: 700; letter-spacing: -.04em; }
.portfolio-single__gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; max-width: 1080px; margin: 0 auto; }
.portfolio-single__gallery-item { position: relative; display: block; overflow: hidden; border-radius: 9px; background: #eee; }
.portfolio-single__gallery-item--large { grid-column: 1 / -1; }
.portfolio-single__gallery-image { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .6s ease; }
.portfolio-single__gallery-item:hover .portfolio-single__gallery-image { transform: scale(1.025); }
.portfolio-single__gallery-icon { position: absolute; right: 20px; bottom: 20px; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: #fff; border-radius: 50%; background: rgba(15, 15, 15, .85); opacity: 0; transform: translateY(7px); transition: opacity .3s ease, transform .3s ease, background .3s ease; }
.portfolio-single__gallery-item:hover .portfolio-single__gallery-icon { opacity: 1; transform: translateY(0); }
.portfolio-single__gallery-icon:hover { background: var(--color-primary, var(--backgroundColorOrange)); }
.portfolio-single__navigation { background: #fff; padding: 0 15px; }
.portfolio-single__navigation-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 1080px; margin: 0 auto; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; }
.portfolio-single__navigation-item { display: flex; flex-direction: column; justify-content: center; min-height: 170px; padding: 38px 0; color: var(--color-dark, #0f0f0f); text-decoration: none; transition: color .3s ease; }
.portfolio-single__navigation-item--previous { padding-right: 45px; border-right: 1px solid #e2e2e2; }
.portfolio-single__navigation-item--next { align-items: flex-end; padding-left: 45px; text-align: right; }
.portfolio-single__navigation-item:hover { color: var(--color-primary, var(--backgroundColorOrange)); text-decoration: none; }
.portfolio-single__navigation-direction { margin-bottom: 10px; color: #858585; font-size: 11px; line-height: 1.4; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.portfolio-single__navigation-title { font-size: clamp(22px, 2.7vw, 32px); line-height: 1.2; font-weight: 700; letter-spacing: -.025em; }
.portfolio-single__cta { position: relative; padding: 110px 0; background: #fff; }
.portfolio-single__cta-container { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 70px; width: calc(100% - 40px); max-width: 1180px; min-height: 320px; margin: 0 auto; padding: 68px 72px; overflow: hidden; color: #fff; border-radius: 12px; background: var(--color-dark, #0f0f0f); }
.portfolio-single__cta-container::before { position: absolute; top: -170px; right: -130px; width: 390px; height: 390px; content: ""; border: 1px solid rgba(var(--backgroundColorOrangeRGB), .35); border-radius: 50%; pointer-events: none; }
.portfolio-single__cta-container::after { position: absolute; right: 125px; bottom: -210px; width: 350px; height: 350px; content: ""; border: 1px solid rgba(255, 255, 255, .07); border-radius: 50%; pointer-events: none; }
.portfolio-single__cta-content { position: relative; z-index: 2; width: 100%; max-width: 760px; }
.portfolio-single__cta .portfolio-single__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; color: var(--color-primary, var(--backgroundColorOrange)); font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.portfolio-single__cta .portfolio-single__eyebrow-line { display: block; width: 36px; height: 2px; background: currentColor; }
.portfolio-single__cta-title { margin: 0; color: #fff; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.08; font-weight: 700; letter-spacing: -.045em; }
.portfolio-single__cta-text { max-width: 650px; margin: 21px 0 0; color: rgba(255, 255, 255, .68); font-size: 16px; line-height: 1.7; }
.portfolio-single__cta .button { position: relative; z-index: 2; flex: 0 0 auto; }

@media (max-width: 1100px) {
	.portfolio-single__showcase { padding: 75px 0 100px; }
	.portfolio-single__introduction-grid,
	.portfolio-single__section-container { gap: 65px; }
	.portfolio-single__cta-container { padding: 60px; }
}

@media (max-width: 900px) {
	.portfolio-single__showcase { padding: 65px 0 85px; }
	.portfolio-single__browser-bar { grid-template-columns: 80px minmax(0, 1fr) 80px; }
	.portfolio-single__introduction { padding-bottom: 95px; }
	.portfolio-single__introduction-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 45px; }
	.portfolio-single__introduction-content p { font-size: 17px; }
	.portfolio-single__section { padding: 90px 0; }
	.portfolio-single__section-container { grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); gap: 45px; }
	.portfolio-single__section-text { padding-top: 27px; }
	.portfolio-single__gallery-item--large { min-height: 500px; }
	.portfolio-single__cta { padding: 90px 0; }
	.portfolio-single__cta-container { align-items: flex-start; flex-direction: column; min-height: 0; gap: 35px; padding: 55px; }
}

@media (max-width: 767px) {
	.portfolio-single__showcase { padding: 45px 0 70px; }
	.portfolio-single__browser { border-radius: 7px; }
	.portfolio-single__browser-bar { grid-template-columns: 55px minmax(0, 1fr); min-height: 42px; padding: 0 11px; }
	.portfolio-single__browser-dots { gap: 4px; }
	.portfolio-single__browser-dots span { width: 7px; height: 7px; }
	.portfolio-single__browser-url { padding: 7px 9px; font-size: 9px; }
	.portfolio-single__introduction { padding-bottom: 75px; }
	.portfolio-single__introduction-grid { grid-template-columns: 1fr; gap: 38px; }
	.portfolio-single__project-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 25px; }
	.portfolio-single__project-meta .portfolio-single__section-label { grid-column: 1 / -1; }
	.portfolio-single__meta-button { grid-column: 1 / -1; justify-self: start; }
	.portfolio-single__introduction-content p { font-size: 16px; line-height: 1.48; }
	.portfolio-single__section { padding: 75px 0; }
	.portfolio-single__section-container { grid-template-columns: 1fr; gap: 28px; }
	.portfolio-single__section-title { margin-top: 13px; font-size: 36px; }
	.portfolio-single__section-text { padding-top: 0; }
	.portfolio-single__section-text p,
	.portfolio-single__section-text ul,
	.portfolio-single__section-text ol { font-size: 16px; line-height: 1.75; }
	.portfolio-single__section-number { top: -28px; right: 15px; font-size: 110px; }
	.portfolio-single__gallery { padding: 75px 0; }
	.portfolio-single__gallery-header { margin-bottom: 32px; }
	.portfolio-single__gallery-title { margin-top: 13px; font-size: 38px; }
	.portfolio-single__gallery-grid { grid-template-columns: 1fr; gap: 15px; }
	.portfolio-single__gallery-item,
	.portfolio-single__gallery-item--large { grid-column: auto; min-height: 290px; }
	.portfolio-single__gallery-icon { right: 14px; bottom: 14px; width: 43px; height: 43px; opacity: 1; transform: none; }
	.portfolio-single__navigation-container { grid-template-columns: 1fr; }
	.portfolio-single__navigation-item { min-height: 125px; padding: 30px 0; }
	.portfolio-single__navigation-item--previous { padding-right: 0; border-right: 0; border-bottom: 1px solid #e2e2e2; }
	.portfolio-single__navigation-item--next { align-items: flex-start; padding-left: 0; text-align: left; }
	.portfolio-single__cta { padding: 70px 0; }
	.portfolio-single__cta-container { width: calc(100% - 30px); padding: 45px 28px; border-radius: 9px; }
	.portfolio-single__cta-title { font-size: 38px; }
	.portfolio-single__cta-text { font-size: 15px; }
}

@media (max-width: 480px) {
	.portfolio-single__project-meta { grid-template-columns: 1fr; }
	.portfolio-single__meta-button { grid-column: auto; }
	.portfolio-single__cta-title { font-size: 34px; }
}