.portfolio-page { background: #fff; }
.portfolio-hero { position: relative; min-height: 680px; display: grid; align-items: end; overflow: hidden; color: #fff; background: var(--navy); }
.portfolio-collage { position: absolute; inset: -5%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; transform: rotate(-3deg) scale(1.05); opacity: .88; }
.portfolio-collage img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; }
.portfolio-collage img:nth-child(2), .portfolio-collage img:nth-child(5) { transform: translateY(42px); }
.portfolio-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,20,36,.94) 0%, rgba(10,20,36,.78) 46%, rgba(10,20,36,.34) 100%), linear-gradient(0deg, rgba(10,20,36,.75), transparent 60%); }
.portfolio-hero-copy { position: relative; z-index: 2; width: min(calc(100% - 40px), var(--shell)); padding: 110px 0 92px; }
.portfolio-hero-copy h1 { max-width: 760px; font-size: clamp(2.45rem, 4.35vw, 4rem); }
.portfolio-hero-copy > p:not(.kicker) { max-width: 720px; margin: 0; color: #d7e1ee; font-size: clamp(1.05rem, 1.55vw, 1.25rem); line-height: 1.55; }
.portfolio-hero-copy .button { margin-top: 30px; }
.portfolio-section { padding: 96px 0; }
.intro-grid, .system-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(44px, 8vw, 110px); align-items: start; }
.intro-grid > p, .system-grid > div:last-child > p { margin: 0; color: var(--muted); font-size: 1.12rem; }
.portfolio-page h2 { font-size: clamp(1.8rem, 3vw, 2.85rem); }
.portfolio-overview { padding: 0 0 96px; background: #fff; }
.portfolio-overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.portfolio-overview article { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); }
.portfolio-overview article > span { color: var(--blue); font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
.portfolio-overview h3 { margin: 18px 0 10px; font-size: 1.35rem; }
.portfolio-overview p { margin: 0; color: var(--muted); font-size: .96rem; }
.process-section, .tools-section, .learning-section { background: var(--surface-soft); }
.campaign-process { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; margin: 54px 0 0; padding: 0; list-style: none; }
.campaign-process li { position: relative; min-height: 145px; display: flex; flex-direction: column; gap: 13px; padding: 22px 16px; border: 1px solid var(--line); border-right: 0; background: #fff; }
.campaign-process li:first-child { border-radius: 18px 0 0 18px; }.campaign-process li:last-child { border-right: 1px solid var(--line); border-radius: 0 18px 18px 0; }
.campaign-process li:not(:last-child)::after { content: '→'; position: absolute; z-index: 2; right: -13px; top: 52px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: var(--blue); font-weight: 900; }
.campaign-process span, .campaign-number { color: var(--blue); font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
.campaign-process strong { line-height: 1.25; }
.campaigns-heading { max-width: 850px; text-align: center; }
.campaign-list { display: grid; gap: 72px; margin-top: 62px; }
.campaign-block { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(42px, 7vw, 88px); align-items: center; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: 30px; background: #fff; box-shadow: var(--shadow); }
.campaign-block--reverse .campaign-media { order: 2; }
.campaign-browser { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 18px 45px rgba(29,45,70,.13); }
.campaign-browser-bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--line); background: #f8fafb; }
.campaign-browser-bar span { width: 7px; height: 7px; border-radius: 50%; background: #cbd5d8; }.campaign-browser-bar span:first-child { background: #ef928b; }.campaign-browser-bar span:nth-child(2) { background: #efc16f; }.campaign-browser-bar span:nth-child(3) { background: #74c7a3; }
.campaign-browser img { width: 100%; height: auto; }
.campaign-copy h3 { margin: 10px 0 24px; font-size: clamp(1.7rem, 2.8vw, 2.45rem); }
.campaign-copy dl { margin: 0; }.campaign-copy dl div { padding: 18px 0; border-top: 1px solid var(--line); }.campaign-copy dt { margin-bottom: 5px; color: var(--blue); font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.campaign-copy dd { margin: 0; color: var(--muted); }
.asset-gallery-section { border-top: 1px solid var(--line); background: #fff; }
.asset-gallery-heading { max-width: 820px; text-align: center; }
.asset-gallery-heading h2 { font-size: clamp(1.9rem, 3.2vw, 3rem); }
.asset-gallery-heading > p:last-child { max-width: 700px; margin: 0 auto; color: var(--muted); font-size: 1rem; }
.asset-gallery-group { margin-top: 62px; }
.asset-gallery-label { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.asset-gallery-label > span { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--teal)); font-size: .68rem; font-weight: 900; }
.asset-gallery-label .eyebrow { margin-bottom: 5px; }
.asset-gallery-label h3 { margin: 0; font-size: clamp(1.2rem, 1.8vw, 1.55rem); }
.social-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.email-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.social-gallery figure, .email-gallery figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #f8fafc; box-shadow: 0 14px 34px rgba(28,47,78,.08); }
.social-gallery figure { display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 8px; }
.social-gallery img { width: 100%; height: 100%; object-fit: contain; }
.email-gallery figure { display: grid; place-items: center; min-height: 170px; padding: 10px; }
.email-gallery img { width: 100%; height: auto; object-fit: contain; }
.system-section { color: #fff; background: var(--navy); }.system-section h2 { color: #fff; }.system-grid > div:last-child > p { color: #c9d3e2; }
.system-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }.system-tags span { padding: 9px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #e5ecf6; background: rgba(255,255,255,.07); font-size: .8rem; font-weight: 750; }
.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }.tool-card { min-height: 170px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }.tool-card span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--teal)); font-size: .82rem; font-weight: 900; }.tool-card h3 { margin: 28px 0 0; font-size: 1.05rem; }
.timeline-section { background: linear-gradient(135deg, #eef4ff, #effbf9); }.timeline-card { text-align: center; }.timeline-card strong { display: block; color: var(--ink); font-size: clamp(3rem, 6vw, 6.2rem); line-height: 1; letter-spacing: -.055em; }.timeline-card > p:last-child { max-width: 760px; margin: 28px auto 0; color: var(--muted); font-size: 1.15rem; }
.learning-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 44px; }.learning-grid article { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }.learning-grid span { color: var(--teal); font-size: .72rem; font-weight: 900; }.learning-grid p { margin: 26px 0 0; color: #33415a; font-size: 1.08rem; font-weight: 700; }
.portfolio-contact { background: #fff; }
@media (max-width: 1020px) { .campaign-process { grid-template-columns: repeat(4, 1fr); gap: 12px; }.campaign-process li, .campaign-process li:first-child, .campaign-process li:last-child { border: 1px solid var(--line); border-radius: 16px; }.campaign-process li::after { display: none !important; }.portfolio-overview-grid { grid-template-columns: 1fr; }.campaign-block { grid-template-columns: 1fr; }.campaign-block--reverse .campaign-media { order: 0; }.social-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }.tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .portfolio-hero { min-height: 620px; }.portfolio-collage { grid-template-columns: repeat(2, 1fr); }.portfolio-collage img { min-height: 240px; }.portfolio-hero-overlay { background: rgba(10,20,36,.78); }.portfolio-hero-copy { width: min(calc(100% - 28px), var(--shell)); padding: 80px 0 66px; }.portfolio-hero-copy h1 { font-size: clamp(2.2rem, 10.5vw, 3.15rem); }.portfolio-section { padding: 72px 0; }.portfolio-overview { padding-bottom: 72px; }.intro-grid, .system-grid { grid-template-columns: 1fr; gap: 24px; }.campaign-process { grid-template-columns: 1fr 1fr; }.campaign-process li { min-height: 120px; }.campaign-list { gap: 34px; margin-top: 40px; }.campaign-block { padding: 18px; border-radius: 22px; }.asset-gallery-group { margin-top: 46px; }.social-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.email-gallery { grid-template-columns: 1fr; gap: 12px; }.email-gallery figure { min-height: 120px; }.tool-grid, .learning-grid { grid-template-columns: 1fr; }.timeline-card strong { font-size: clamp(3rem, 14vw, 4.75rem); }.portfolio-contact .contact-actions { width: 100%; }.portfolio-contact .button { width: 100%; } }