/* Portfolio extends the original navy / teal brand. Real screenshots only. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.portfolio-hero{padding-bottom:48px}.portfolio-hero h1{max-width:1000px;font-size:clamp(2.5rem,5vw,4.8rem);letter-spacing:-.055em}.portfolio-hero .lead{max-width:820px}.portfolio-intro-note{font-size:15px;color:#526c78;margin-top:24px}.portfolio-list{padding-top:24px}.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.portfolio-card{border:1px solid #bfd5d9;border-radius:18px;overflow:hidden;background:white;display:flex;flex-direction:column;box-shadow:0 12px 36px #12304709}.portfolio-visual{position:relative;padding:32px 60px 55px 28px;isolation:isolate;min-width:0}.own-preview{background:#e6eee9}.concept-preview{background:#dcecf0}.browser-preview,.case-desktop{background:#fff;border:1px solid #bccbd0;border-radius:8px;overflow:hidden;box-shadow:0 12px 26px #12304715}.browser-bar{display:flex;align-items:center;gap:5px;padding:9px 12px;background:#f4f7f8;color:#506671;font-size:12px;min-height:28px;box-sizing:border-box}.browser-bar i{width:5px;height:5px;background:#b5c4c8;border-radius:50%}.browser-bar span{margin-left:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.browser-preview img{display:block;aspect-ratio:1.44;width:100%;height:auto;object-fit:cover;object-position:top}.mobile-preview{position:absolute;right:22px;bottom:39px;width:24%;border:5px solid #123047;border-radius:16px;background:#123047;overflow:hidden;box-shadow:0 8px 20px #12304735}.mobile-preview img{display:block;width:100%;height:auto}.preview-caption{position:absolute;bottom:15px;left:28px;font-size:13px;font-weight:600;color:#3e5966}.portfolio-copy{padding:30px;display:flex;flex-direction:column;flex:1}.project-status{display:inline-flex;align-self:flex-start;border:1px solid #a0c4c9;background:#edf7f8;color:#076673;border-radius:30px;padding:7px 12px;font-size:14px;font-weight:750;letter-spacing:.035em;line-height:1.5;margin:0 0 18px}.portfolio-copy h3{font-size:32px;letter-spacing:-.04em;margin:0 0 12px}.portfolio-copy p{font-size:16px;line-height:1.7}.portfolio-copy .project-status{font-size:14px;line-height:1.5}.project-subtitle{font-weight:650;color:#123047;margin:0 0 14px}.project-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:18px 0 24px}.project-tags li{padding:5px 10px;background:#f2f6f7;border:1px solid #d6e3e5;border-radius:5px;font-size:14px;line-height:1.5;color:#315566}.portfolio-copy .project-note{font-size:14px;color:#526c78;padding-top:16px;border-top:1px solid #dde8eb;margin-top:auto}.project-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;margin-top:12px}.project-actions .button,.project-actions .text-link{font-size:15px;min-height:48px}.preview-empty{padding:60px 10px}.concept-band{background:#123047;color:#fff;padding:44px;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:40px}.concept-band h2,.concept-band p{color:#fff}.concept-band .eyebrow{color:#98dce0}.concept-band>div{max-width:730px}.concept-band .button{flex-shrink:0}.case-showcase{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.22fr);align-items:end;gap:32px;padding:38px;border-radius:18px}.case-showcase figure{margin:0;min-width:0}.case-desktop img{width:100%;height:auto;display:block}.case-showcase figcaption{font-size:13px;line-height:1.5;padding:10px 12px;color:#365362;background:#f4f7f8}.case-mobile{border:6px solid #123047;border-radius:18px;overflow:hidden;background:#123047}.case-mobile img{display:block;width:100%;height:auto}.case-mobile figcaption{font-size:12px;padding:8px}.case-nav{display:flex;flex-wrap:wrap;gap:10px 26px;padding:24px 0;border-bottom:1px solid #cadde1;margin:0}.case-nav a{min-height:44px;display:inline-flex;align-items:center;font-size:15px;font-weight:600}.case-section{display:grid;grid-template-columns:210px minmax(0,1fr);gap:42px;padding:56px 0;border-bottom:1px solid #dbe7e9}.case-section .eyebrow{font-size:14px;line-height:1.6;margin-top:8px}.case-section>div{max-width:780px}.case-section h2{font-size:clamp(28px,3vw,38px);letter-spacing:-.04em;margin-top:0}.case-section p,.case-points{font-size:17px;line-height:1.8}.case-points{padding-left:22px}.case-points li{margin:10px 0}.case-gallery{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:36px 0}.case-figure{border:1px solid #c2d7dc;border-radius:12px;overflow:hidden;background:#edf4f5;margin:0}.case-figure img{display:block;width:100%;height:auto}.case-figure figcaption{font-size:14px;line-height:1.6;padding:16px 20px;background:#f0f6f7;color:#365362}.case-wide{padding:32px 0 0;max-width:1000px;margin:auto}.case-status-note{border-left:4px solid #087f8c;background:#edf5f6;padding:24px 28px;margin-top:28px}.case-status-note h3{font-size:20px;margin-top:0}.case-status-note p{font-size:15px}.case-preview-note{font-size:14px;color:#526c78;line-height:1.7;padding:6px 0}.case-next{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:36px 0}.concept-context{background:#edf7f8;border:1px solid #b2d1d6;border-radius:10px;padding:18px 22px;margin-bottom:24px}.concept-context p{margin:6px 0}.concept-context .text-link{font-size:14px}
@media(max-width:1000px){.portfolio-grid{grid-template-columns:1fr}.portfolio-card{max-width:800px;width:100%;margin:auto}.concept-band{align-items:flex-start;flex-direction:column}.case-section{grid-template-columns:160px minmax(0,1fr);gap:24px}.portfolio-visual{padding:32px 90px 55px 32px}.mobile-preview{width:20%;right:35px}.case-showcase{gap:20px;padding:24px}.portfolio-hero h1{font-size:clamp(2.5rem,6vw,4rem)}}
@media(max-width:600px){.portfolio-copy{padding:24px}.portfolio-copy h3{font-size:28px}.portfolio-visual{padding:22px 48px 42px 18px}.mobile-preview{width:24%;right:14px;bottom:33px;border-width:3px;border-radius:10px}.browser-bar{padding:7px;font-size:12px}.browser-bar span{margin-left:4px}.browser-bar i{display:none}.preview-caption{left:18px;bottom:12px;font-size:12px}.project-status,.portfolio-copy .project-status{font-size:13px}.project-actions{align-items:stretch;flex-direction:column}.project-actions .text-link{justify-content:center}.concept-band{padding:28px 22px;gap:20px}.concept-band .button{width:100%}.case-showcase{grid-template-columns:minmax(0,1fr) 25%;gap:10px;padding:16px 12px}.case-showcase figcaption{padding:7px;font-size:12px}.case-mobile{border-width:3px;border-radius:10px}.case-mobile figcaption{display:none}.case-section{grid-template-columns:1fr;gap:10px;padding:36px 0}.case-section .eyebrow{margin-bottom:0}.case-section p,.case-points{font-size:16px}.case-gallery{grid-template-columns:1fr}.case-nav{gap:2px 18px}.case-figure figcaption{font-size:13px;padding:14px}.case-status-note{padding:20px}.portfolio-hero .actions{align-items:stretch;flex-direction:column}.case-next{flex-direction:column}.portfolio-hero{padding-bottom:32px}.case-section h2{font-size:28px}}
/* Custom Mockup Styles for Portfolio */
.relaunch-project-image.has-mobile-mockup {
  position: relative;
  overflow: hidden;
  background: #e4f0f1;
}
.relaunch-project-image .mockup-desktop {
  width: 100%;
  height: 100%;
}
.relaunch-project-image .mockup-desktop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform .2s ease;
}
.relaunch-project-image:hover .mockup-desktop img {
  transform: scale(1.015);
}
.relaunch-project-image .mockup-mobile {
  position: absolute;
  right: 18px;
  bottom: 0;
  width: 25%;
  border: 4px solid #123047;
  border-bottom: 0;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: #123047;
  overflow: hidden;
  box-shadow: -5px 0 20px rgba(18, 48, 71, 0.2);
  transform: translateY(10px);
  transition: transform 0.2s ease;
}
.relaunch-project-image:hover .mockup-mobile {
  transform: translateY(0);
}
.relaunch-project-image .mockup-mobile img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 600px) {
  .relaunch-project-image .mockup-mobile {
    width: 28%;
    right: 12px;
    border-width: 3px;
    border-radius: 8px 8px 0 0;
  }
}