/* Service portfolio components reuse Anthread's existing design tokens. */
.portfolio-page { overflow-wrap: break-word; }
.portfolio-page .section-title { line-height: 1.08; }
.portfolio-page .page-intro, .portfolio-card-copy p, .portfolio-capabilities p, .portfolio-detail-copy p { color: #5e5b54; }
.portfolio-skip { position: absolute; left: 1rem; top: -6rem; z-index: 2000; padding: 1rem; background: var(--surface); color: var(--black); }
.portfolio-skip:focus { top: 1rem; }
.portfolio-page a:focus-visible, .overview-grid a:focus-visible { outline: 3px solid #4a8c38; outline-offset: 5px; }
.portfolio-service-intro { padding-bottom: 3.5rem; }
.portfolio-service-intro .page-intro { max-width: 760px; margin-bottom: 1.75rem; }
.portfolio-service-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; max-width: 1040px; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--border-strong); }
.portfolio-service-copy h2 { margin: 0 0 .65rem; font-size: 1.12rem; line-height: 1.4; }
.portfolio-service-copy p { margin: 0; color: #5e5b54; font-size: .92rem; line-height: 1.8; }
.portfolio-text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 500; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.portfolio-capabilities { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid var(--border-strong); }
.portfolio-capabilities h2 { font-size: 1rem; margin: 0 0 .6rem; font-weight: 600; }
.portfolio-capabilities p { font-size: .9rem; line-height: 1.75; margin: 0; }
.portfolio-selected { background: var(--surface-soft); border-top: 1px solid var(--border); }
#selected-projects, #services { scroll-margin-top: 110px; }
.portfolio-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.portfolio-section-heading .section-title { font-size: clamp(2rem,4vw,3.3rem); margin-bottom: 0; }
.portfolio-section-heading > p { flex-shrink: 0; color: #5e5b54; font-size: .86rem; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.25rem 1.5rem; }
.portfolio-card { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.portfolio-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; border-radius: inherit; }
.portfolio-card-link:hover .portfolio-card-cta { text-decoration: underline; text-underline-offset: 5px; }
.portfolio-card-link:hover { outline: 1px solid var(--accent); }
/* Contain the entire engineering image. The title floats over the frame edge,
   with its own solid panel and reserved space so no image detail is obscured. */
.portfolio-media { position: relative; display: grid; grid-template-rows: minmax(0,1fr) auto; height: clamp(360px,37vw,470px); padding: 1rem 1rem 0; background: #e8e6df; border-radius: var(--radius) var(--radius) 0 0; }
.portfolio-media img { width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; }
.portfolio-media h3 { position: relative; z-index: 1; justify-self: start; max-width: 100%; margin: .6rem 0 -.8rem; padding: .9rem 1rem; background: var(--black); color: #fff; font-size: clamp(1.1rem,1.6vw,1.4rem); line-height: 1.35; font-weight: 500; letter-spacing: -.02em; }
.portfolio-card-copy { display: flex; flex-direction: column; flex: 1; padding: 1.9rem 1.25rem 1.3rem; }
.portfolio-card-copy p { margin: 0 0 1.1rem; font-size: .92rem; line-height: 1.75; }
.portfolio-card-cta { margin-top: auto; color: var(--accent); font-size: .82rem; font-weight: 600; }
.portfolio-card-cta span { margin-left: .5rem; }
.portfolio-media-pending { background: var(--surface-soft); }
.portfolio-pending-label { align-self: center; justify-self: center; text-align: center; color: #666158; font-size: .85rem; }
.portfolio-enquiry { border-top: 1px solid var(--border); }
.portfolio-enquiry > .container { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.portfolio-enquiry h2 { font-size: clamp(1.7rem,3vw,2.6rem); line-height: 1.2; margin: 0 0 1rem; letter-spacing: -.03em; }
.portfolio-enquiry p { color: #5e5b54; margin: 0; }
.portfolio-enquiry .button { flex-shrink: 0; }
.portfolio-breadcrumb { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; font-size: .82rem; color: #5e5b54; }
.portfolio-breadcrumb a { text-underline-offset: 4px; }
.portfolio-detail-header .section-title { max-width: 1060px; font-size: clamp(2rem,4.5vw,4rem); }
.portfolio-hero-image { margin: 0; }
.portfolio-hero-image > a { display: block; background: #e8e6df; border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(.75rem,2vw,1.5rem); }
.portfolio-hero-image img { width: 100%; height: auto; max-height: 70vh; max-height: 70svh; object-fit: contain; }
.portfolio-hero-image figcaption { margin-top: .7rem; font-size: .8rem; color: #5e5b54; }
.portfolio-hero-pending { display: grid; place-items: center; min-height: 240px; padding: 2rem; text-align: center; border: 1px solid var(--border); background: var(--surface-soft); color: #5e5b54; }
.portfolio-detail-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: clamp(2rem,5vw,5rem); align-items: start; }
.portfolio-detail-copy h2 { margin: 0 0 1rem; font-size: 1.3rem; line-height: 1.4; }
.portfolio-detail-copy p { line-height: 1.85; margin: 0 0 2rem; }
.portfolio-detail-copy p + h2 { margin-top: 2.5rem; }
.portfolio-detail-copy .portfolio-service-copy { margin-top: 0; padding-top: 0; border: 0; grid-template-columns: 1fr; gap: 0; }
.portfolio-detail-copy .portfolio-service-copy section + section { margin-top: 2.5rem; }
.portfolio-capability-list { margin: 0; padding-left: 1.2rem; color: #5e5b54; }
.portfolio-capability-list li + li { margin-top: .45rem; }
.portfolio-related { border-top: 2px solid var(--accent); padding-top: 1.5rem; }
.portfolio-related .portfolio-text-link { display: flex; margin-top: .5rem; }
.portfolio-compatibility-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin: 2rem 0 4rem; }
.contact-item .portfolio-contact-label { display: block; margin-bottom: .25rem; font-size: .72rem; color: var(--mid); text-transform: uppercase; letter-spacing: .1em; }
/* Keep the desktop dropdown reachable across its existing visual gap. */
.nav-dropdown::before { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 1rem; }
.nav-dropdown-menu { min-width: 290px; }
/* Existing sticky header is z-index 1000; its drawer must sit above it. */
.mobile-nav-overlay { z-index: 1100; }
.mobile-nav-drawer { z-index: 1200; visibility: hidden; }
body.mobile-nav-open .mobile-nav-drawer { visibility: visible; }
@media (min-width:761px) and (max-width:1000px) {
  .site-nav { gap: .7rem; }
  .site-nav-links { gap: .8rem; }
  .site-nav-actions { gap: .5rem; }
  .site-nav-actions .button, .site-nav-actions .button-secondary { padding: .75rem .85rem; font-size: .7rem; }
}
@media (max-width:760px) {
  .portfolio-service-copy { grid-template-columns: 1fr; gap: 1.75rem; margin-top: 2.5rem; }
  .portfolio-capabilities { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.5rem; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .portfolio-media { height: clamp(350px,90vw,540px); }
  .portfolio-media h3 { font-size: 1.2rem; }
  .portfolio-detail-grid { grid-template-columns: 1fr; }
  .portfolio-enquiry > .container { flex-direction: column; align-items: start; }
  .portfolio-section-heading { align-items: start; }
  .portfolio-section-heading > p { margin-top: .2rem; }
  .portfolio-service-intro { padding-top: 3rem; }
}
@media (prefers-reduced-motion:reduce) {
  .portfolio-page *, .portfolio-page *::before, .portfolio-page *::after { scroll-behavior: auto; transition: none; animation: none; }
}