.portfolio-page { color: var(--ink); }
.portfolio-page [hidden] { display: none; }
.portfolio-page .portfolio-intro { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 48px; align-items: end; padding-block: 40px; }
.portfolio-page .eyebrow { font-size: 11px; line-height: 1.5; letter-spacing: 0; }
.portfolio-page h1 { font-size: 42px; line-height: 1.18; letter-spacing: 0; margin-top: 16px; }
.portfolio-page .portfolio-intro>p { font-size: 14px; line-height: 1.8; color: var(--muted); max-width: 440px; justify-self: end; }
.portfolio-page .reference-project-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: auto auto auto auto auto; gap: 8px 32px; border: 0; scroll-margin-top: 104px; }
.portfolio-page .reference-project-tabs button { grid-row: span 5; display: grid; grid-template-rows: subgrid; gap: 8px; align-items: start; padding: 0 0 16px; border: 0; border-bottom: 2px solid transparent; background: none; border-radius: 0; box-shadow: none; color: var(--ink); text-align: left; }
.portfolio-page .reference-project-tabs button[aria-selected=true] { border-bottom-color: var(--blue); background: none; box-shadow: none; }
.portfolio-page .portfolio-thumbnail { width: 100%; aspect-ratio: 16/10; border: 1px solid #e3e7eb; border-radius: 4px; overflow: hidden; background: #f5f7f9; }
.portfolio-page .portfolio-thumbnail img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity 160ms; }
.portfolio-page .reference-project-tabs button:hover img { opacity: .85; }
.portfolio-page .portfolio-project-name { font-size: 21px; line-height: 1.4; font-weight: 700; margin-top: 8px; }
.portfolio-page .portfolio-project-sector { font-size: 13px; line-height: 1.6; color: var(--muted); }
.portfolio-page .portfolio-card-scope { font-size: 14px; line-height: 1.8; color: var(--muted); max-width: 320px; }
.portfolio-page .portfolio-card-cta { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--blue); }
.portfolio-page .portfolio-card-cta .icon { width: 16px; height: 16px; flex-basis: 16px; }
.portfolio-page .reference-projects { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.portfolio-page [data-reference-project] { scroll-margin-top: 104px; }
.portfolio-page [data-reference-project]:focus { outline: none; }
.portfolio-page .portfolio-project-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.portfolio-page .portfolio-project-heading .eyebrow { text-transform: uppercase; }
.portfolio-page .portfolio-project-heading h2 { font-size: 32px; line-height: 1.3; letter-spacing: 0; margin-top: 12px; }
.portfolio-page .portfolio-project-summary { font-size: 14px; line-height: 1.8; color: var(--muted); max-width: 920px; margin-top: 16px; }
.portfolio-page .reference-view-tabs { gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: 6px; background: #eef1f5; flex-shrink: 0; }
.portfolio-page .reference-view-tabs button { min-height: 40px; border: 0; border-radius: 4px; padding: 8px 16px; font-size: 12px; white-space: nowrap; }
.portfolio-page .reference-view-tabs button[aria-selected=true] { background: white; box-shadow: 0 1px 4px #0c162812; color: var(--ink); }
.portfolio-page .portfolio-case { display: grid; grid-template-columns: minmax(0,2.2fr) minmax(0,1fr); gap: 48px; align-items: start; margin-top: 32px; }
.portfolio-page .portfolio-presentation { padding: 0; background: transparent; }
.portfolio-page .portfolio-browser { border: 1px solid #dae0e5; border-radius: 6px; background: #fff; overflow: hidden; box-shadow: 0 8px 20px #1720300a; }
.portfolio-page .portfolio-address { min-height: 32px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; color: #64707b; font-size: 10px; }
.portfolio-page .portfolio-address>.icon { width: 16px; height: 16px; flex-basis: 16px; }
.portfolio-page .portfolio-view-label { margin-left: auto; }
.portfolio-page .reference-stage { width: 100%; aspect-ratio: 3/2; background: #f5f7f9; border: 0; border-radius: 0; touch-action: pan-y; }
.portfolio-page .reference-frame img { object-fit: contain; object-position: top; }
.portfolio-page .portfolio-story h3 { font-size: 26px; line-height: 1.3; letter-spacing: 0; margin-top: 12px; }
.portfolio-page .portfolio-story>p:not(.eyebrow) { font-size: 14px; line-height: 1.8; color: var(--muted); margin-top: 16px; }
.portfolio-page .portfolio-scope { margin-top: 24px; }
.portfolio-page .portfolio-scope h4 { font-size: 11px; line-height: 1.5; text-transform: uppercase; color: var(--blue); }
.portfolio-page .portfolio-scope ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 16px; }
.portfolio-page .portfolio-scope li { display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.6; }
.portfolio-page .portfolio-scope .icon { width: 20px; height: 20px; flex-basis: 20px; }
.portfolio-page .portfolio-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.portfolio-page .portfolio-actions .button { min-height: 44px; font-size: 12px; padding: 12px 16px; border-radius: 6px; gap: 8px; }
.portfolio-page .portfolio-actions .icon { width: 16px; height: 16px; flex-basis: 16px; }
.portfolio-page .portfolio-view-note { margin-top: 16px; padding-bottom: 40px; }
.portfolio-page .portfolio-view-note>p { font-size: 11px; line-height: 1.7; color: var(--muted); max-width: 920px; }
.portfolio-page .button-navy .icon { filter: brightness(0) invert(1); }
.portfolio-page .portfolio-closing-band { background: #f7f9fc; }
.portfolio-page .portfolio-closing { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); align-items: center; gap: 48px; padding-block: 40px; }
.portfolio-page .portfolio-closing h2 { font-size: 32px; line-height: 1.3; letter-spacing: 0; }
.portfolio-page .portfolio-closing p { font-size: 14px; line-height: 1.8; max-width: 440px; color: var(--muted); }
.portfolio-page .portfolio-closing .button { min-height: 44px; border-radius: 6px; font-size: 13px; gap: 8px; margin-top: 16px; }
.portfolio-page .portfolio-closing .icon { width: 16px; height: 16px; flex-basis: 16px; }
.portfolio-page :is(a,button):focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
@media(max-width:1000px) {
  .portfolio-page .portfolio-intro { gap: 32px; }
  .portfolio-page h1 { font-size: 36px; }
  .portfolio-page .reference-project-tabs { column-gap: 24px; }
  .portfolio-page .portfolio-project-name { font-size: 18px; }
  .portfolio-page .portfolio-project-heading h2 { font-size: 28px; }
  .portfolio-page .portfolio-case { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 24px; }
  .portfolio-page .portfolio-story h3 { font-size: 23px; }
  .portfolio-page .portfolio-closing { gap: 32px; }
}
@media(max-width:720px) {
  .portfolio-page .portfolio-intro { grid-template-columns: minmax(0,1fr); gap: 16px; padding-block: 24px; }
  .portfolio-page h1 { font-size: 30px; margin-top: 12px; }
  .portfolio-page .portfolio-intro>p { font-size: 13px; justify-self: start; max-width: none; }
  .portfolio-page .reference-project-tabs { gap: 8px 12px; scroll-margin-top: 80px; }
  .portfolio-page .portfolio-project-name { font-size: 13px; }
  .portfolio-page .portfolio-project-sector { font-size: 10px; }
  .portfolio-page .portfolio-card-scope { display: none; }
  .portfolio-page .portfolio-card-cta { font-size: 11px; gap: 4px; }
  .portfolio-page .portfolio-card-cta .icon { width: 12px; height: 12px; flex-basis: 12px; }
  .portfolio-page .reference-projects { margin-top: 24px; padding-top: 24px; }
  .portfolio-page [data-reference-project] { scroll-margin-top: 80px; }
  .portfolio-page .portfolio-project-heading { flex-direction: column; align-items: start; gap: 16px; }
  .portfolio-page .portfolio-project-heading h2 { font-size: 26px; }
  .portfolio-page .reference-view-tabs { width: 100%; }
  .portfolio-page .reference-view-tabs button { flex: 1; min-height: 44px; padding: 8px; font-size: 12px; }
  .portfolio-page .portfolio-project-summary { font-size: 13px; }
  .portfolio-page .portfolio-case { grid-template-columns: minmax(0,1fr); margin-top: 24px; gap: 24px; }
  .portfolio-page .portfolio-address { font-size: 9px; }
  .portfolio-page .portfolio-view-label { display: none; }
  .portfolio-page .portfolio-story h3 { font-size: 23px; }
  .portfolio-page .portfolio-story>p:not(.eyebrow) { font-size: 13px; }
  .portfolio-page .portfolio-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .portfolio-page .portfolio-actions .button { font-size: 11px; padding: 10px 8px; }
  .portfolio-page .portfolio-view-note { padding-bottom: 24px; }
  .portfolio-page .portfolio-closing { grid-template-columns: minmax(0,1fr); gap: 16px; padding-block: 24px; }
  .portfolio-page .portfolio-closing h2 { font-size: 26px; }
  .portfolio-page .portfolio-closing p { font-size: 13px; }
}
@media(prefers-reduced-motion:reduce) {
  .portfolio-page .portfolio-thumbnail img { transition: none; }
}