/* =====================================================================
   Portfolio page — elevated photo cards
   Full-colour photos, gentle zoom on hover, card lifts with a thin teal
   ring. Logos stay white. Tech yet minimal.
   ===================================================================== */

/* Page intro — generous top air for a premium, editorial feel */
.pf-intro { padding-block: clamp(5.5rem, 8vw, 9.5rem); }

/* Header: title (left) + a short editorial lead (right), aligned to the top
   No rule here, the template visual provides the break. */
.pf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 3rem;
}
.pf-head .eyebrow { margin-bottom: 0.55rem; }
.pf-title { margin: 0; line-height: 1; }
/* Same lead as the other page headers (News, About): light, not body weight */
.pf-head__lead {
  max-width: 42ch;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.6;
}

/* Toolbar above the grid: filter on the right, hairline beneath. It carries
   the air the section visual used to provide, now that the page opens
   straight on the company grid. */
.pf-toolbar {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: flex;
  justify-content: flex-end;
  padding-bottom: 1rem;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-strong);
}

/* Filter — plain text, active goes bold + accent underline slides in */
.pf-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin: 0;
}
.pf-filter__btn {
  appearance: none;
  background: none;
  border: 0;
  position: relative;
  padding: 0 0 0.3rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-ink);
  cursor: pointer;
}
.pf-filter__btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
}
.pf-filter__btn:hover::after,
.pf-filter__btn.is-active::after { transform: scaleX(1); }
.pf-filter__btn.is-active { font-weight: 600; }

/* Grid of company cards — three across, editorial spacing */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(4rem, 7.5vw, 6.5rem) clamp(1.75rem, 3.5vw, 3rem);
}

/* Card: clean landscape photo on top, identity + copy below (same grammar
   as the Focus sector cards). The whole card opens the detail drawer. */
.pf-card { display: flex; flex-direction: column; cursor: pointer; }

/* Staggered fade-up on direct load / filter change (opacity only, no zoom).
   Cards are visible by default; the run only fires while .is-animating. */
.pf-grid.is-animating .pf-card {
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}
.pf-grid.is-animating .pf-card.is-in { opacity: 1; }

.pf-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--color-surface, #f3f3ef);
}

.pf-card__body { padding-top: clamp(1.1rem, 2vw, 1.5rem); }

.pf-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
/* The name is the affordance: a bare button that underlines on card hover,
   with the same draw-in as .btn-line and the People roster. */
.pf-card__btn {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.pf-card__label {
  position: relative;
  display: inline-block;
}
.pf-card__label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}
.pf-card:hover .pf-card__label::after,
.pf-card__btn:focus-visible .pf-card__label::after {
  transform: scaleX(1);
  transform-origin: left;
}
.pf-card__desc {
  margin: clamp(0.7rem, 1.5vw, 1rem) 0 0;
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .pf-card__label::after { transition: none; }
}

/* ---------------------------------------------------------------------
   Company drawer: slides in from the right, same grammar as the People
   roster. Logo, stage, name, long copy, then the two outbound links.
   --------------------------------------------------------------------- */
.pf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 10, 0.5);
  /* dim plus a soft blur, same treatment as the mega-menu scrim */
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  /* above the header, so the drawer reads as a true modal layer */
  z-index: 1200;
}
.pf-overlay.is-open { opacity: 1; visibility: visible; }

.pf-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  /* same footprint as the People drawer: two thirds of the screen */
  width: 66.6667vw;
  max-width: 1280px;
  background: #fff;
  z-index: 1210;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -24px 0 70px rgba(8, 10, 10, 0.18);
  display: flex;
  flex-direction: column;
}
.pf-drawer.is-open { transform: translateX(0); }

/* No boxed icon: the word alone, on the site's drawn underline, aligned with
   the top of the logo and the right edge of the content column */
.pf-drawer__close {
  position: absolute;
  top: clamp(2.5rem, 5vw, 5.5rem);
  right: clamp(2rem, 5vw, 5.5rem);
  z-index: 2;
  padding: 0;
  border: 0;
  background-color: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-muted);
  cursor: pointer;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--transition), color var(--transition);
}
.pf-drawer__close:hover,
.pf-drawer__close:focus-visible {
  color: var(--color-ink);
  background-size: 100% 1px;
}
/* Keep a comfortable tap target without drawing one */
.pf-drawer__close::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 44px;
}

.pf-drawer__scroll {
  overflow-y: auto;
  height: 100%;
  padding: clamp(2.5rem, 5vw, 5.5rem) clamp(2rem, 5vw, 5.5rem);
}

/* Logo sits on its own line, contained so wordmarks and monograms both sit
   comfortably, with a hairline beneath it */
.pf-drawer__logo {
  padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--color-border);
}
.pf-drawer__logo img {
  display: block;
  height: clamp(38px, 5vw, 56px);
  max-width: 260px;
  object-fit: contain;
  object-position: left center;
}
/* White-artwork marks flipped to black so they read on the white panel */
.pf-drawer__logo img.is-inverted { filter: brightness(0); }
.pf-drawer__name {
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.008em;
  color: var(--color-ink);
}
/* The overview reads as the lead: one step larger than the sections below */
.pf-drawer__body { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); max-width: 62ch; }
.pf-drawer__body p {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.pf-drawer__body p + p { margin-top: 1.1rem; }

/* Detail sections. Label left, content right, exactly as on the legal pages,
   and like them with no separators: the spacing does the work. */
/* A hairline closes the header block, echoing the one under the logo */
.pf-drawer__detail {
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
  padding-top: clamp(2.25rem, 4.5vw, 3.25rem);
  border-top: 1px solid var(--color-border);
}

.pf-sec {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.7fr);
  gap: clamp(1.25rem, 4vw, 3.5rem);
  align-items: start;
}
.pf-sec + .pf-sec { margin-top: clamp(2.75rem, 5vw, 4.25rem); }

.pf-sec__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--color-muted);
}

.pf-sec__body { max-width: 64ch; }
.pf-sec__body p {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.75;
  color: var(--color-text-secondary);
}
.pf-sec__body p + p { margin-top: 1.15rem; }

/* The single figure worth pulling out, on the scale of the homepage metric */
.pf-metric { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.pf-sec__body .pf-metric__figure {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 1.5rem + 4vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}
.pf-sec__body .pf-metric__label {
  margin-top: 0.75rem;
  max-width: 34ch;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

/* Year left, event right */
.pf-mile {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  column-gap: clamp(1rem, 2vw, 1.75rem);
  row-gap: 1rem;
}
.pf-sec__body .pf-mile__year {
  margin: 0;
  font-weight: 400;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.pf-sec__body .pf-mile__text { margin: 0; }

.pf-drawer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
}

/* Lock background scroll when the drawer is open */
.pf-lock, .pf-lock body { overflow: hidden; }

@media (max-width: 720px) {
  .pf-drawer { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-overlay, .pf-drawer { transition: none; }
}

/* Responsive */
@media (max-width: 900px) {
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .pf-sec { grid-template-columns: 1fr; gap: clamp(0.55rem, 3vw, 0.9rem); }
  .pf-mile { grid-template-columns: 3.75rem minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pf-grid { grid-template-columns: 1fr; }
}