/* Case-study covers: homepage artwork, lighting and responsive typography. */
body.pf-system.pf-unified[data-portfolio] .pf-project-hero.pf-cover-hero {
  --cover-pad: clamp(20px,5vw,88px);
  display: flex !important; flex-direction: column; justify-content: space-between;
  align-items: stretch !important; position: relative !important; isolation: isolate;
  width: 100% !important; max-width: none !important; margin: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important;
  background: var(--project-home-bg) !important; --pf-ink: #fff; --pf-muted: #e7e7eb;
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero::before,
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero::after { display: none !important; }
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero :is(.pf-cover-art,.pf-cover-scrim,.pf-cover-fx) {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  max-width: none !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; pointer-events: none;
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-cover-art { z-index: 0; overflow: hidden; }
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .art-img {
  display: block; width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover !important; object-position: center !important; opacity: 1 !important;
  border-radius: 0 !important; margin: 0 !important; filter: saturate(1.05) !important;
  mix-blend-mode: normal !important; transform: none;
}
@keyframes pf-cover-drift {
  from { transform: scale(1.06) translate(0,0); }
  to { transform: scale(1.14) translate(-1.5%,-1%); }
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero[data-motion='on'] .art-img {
  animation: pf-cover-drift 18s ease-in-out infinite alternate; animation-play-state: paused;
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero[data-animating='true'] .art-img { animation-play-state: running; }
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-cover-scrim {
  z-index: 1;
  background: linear-gradient(180deg,rgba(4,7,12,.45),transparent 24%),
    linear-gradient(0deg,rgba(4,7,12,.93),rgba(4,7,12,.65) 30%,rgba(4,7,12,.12) 66%,transparent) !important;
}
/* Like Home: the cursor lamp and canvas are ABOVE the veil, not dimmed by it. */
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-cover-lamp { z-index: 2; opacity: 0; transition: opacity .45s ease; }
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero[data-motion='on'][data-pointer='inside'] .pf-cover-lamp { opacity: 1; }
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-cover-lamp .art-img {
  --cover-light-radius: 32vmax;
  filter: brightness(1.12) saturate(1.05) !important;
  -webkit-mask-image: radial-gradient(circle var(--cover-light-radius) at var(--cover-x,50%) var(--cover-y,50%),black 0%,rgba(0,0,0,.7) 30%,transparent 100%);
  mask-image: radial-gradient(circle var(--cover-light-radius) at var(--cover-x,50%) var(--cover-y,50%),black 0%,rgba(0,0,0,.7) 30%,transparent 100%);
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-cover-fx { z-index: 3; }
body.pf-system.pf-unified[data-portfolio] .pf-cover-toolbar {
  position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-project-copy { grid-template-columns: minmax(0,1fr) 320px; gap: clamp(48px,6vw,104px);
  position: relative !important; z-index: 4; width: 100% !important; max-width: none !important;
  padding: 0 !important; margin: 0 !important; align-self: auto;
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-heading { position: relative; z-index: 0; min-width: 0; perspective: 1200px; }
body.pf-system.pf-unified[data-portfolio] .pf-cover-heading::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-label {
  display: flex; align-items: center; gap: 12px; color: #fff !important;
  font: 400 15px/1.5 var(--pf-mono) !important; letter-spacing: .04em !important; margin: 0 0 28px !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-label::before {
  content: ''; display: block !important; width: 7px; height: 7px; border-radius: 50%; background: var(--project-bright);
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero h1 {
  font: 500 clamp(88px,11.5vw,184px)/.96 var(--pf-font) !important; color: #fff !important;
  overflow: visible; transform-style: preserve-3d;
  text-shadow: none !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-title-word { white-space: nowrap; }
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero :is(.pf-cover-title-word,.pf-cover-letter) {
  font: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; color: inherit !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-letter {
  display: inline-block; transform-style: preserve-3d;
  text-shadow: -1px 1px var(--project-pale),-2px 2px var(--project-dark),-3px 3px var(--project-dark),-4px 4px var(--project-dark),-5px 5px var(--project-dark);
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-cover-letter.is-hot { color: var(--project-bright) !important; }
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero[data-title-active='true'] .pf-cover-letter { transition: transform .18s ease-out,color .2s; }
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-hero-description {
  text-shadow: 0 2px 14px rgba(0,0,0,.75);
}
@media(max-width:1100px) {
  body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-project-copy { grid-template-columns: minmax(0,1fr) 270px; gap: 32px; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-hero h1 { font-size: 10vw !important; }
}
@media(max-width:900px) {
  body.pf-system.pf-unified[data-portfolio] .pf-project-hero.pf-cover-hero { height: auto !important; min-height: 100svh !important; padding-bottom: 112px !important; gap: 180px !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-project-copy { grid-template-columns: minmax(0,1fr); gap: 40px; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-hero h1 { font-size: clamp(66px,17vw,128px) !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-title-word { display: inline-block; margin-right: .14em; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-hero h1 { white-space: normal; text-wrap: wrap; }
}
@media(max-width:520px) {
  body.pf-system.pf-unified[data-portfolio] .pf-project-hero.pf-cover-hero { padding-top: 16px !important; gap: 220px !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-hero h1 { font-size: clamp(58px,17vw,88px) !important; margin-bottom: 24px !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-label { margin-bottom: 20px !important; font-size: 14px !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-cover-scrim {
    background: linear-gradient(180deg,rgba(4,7,12,.4),transparent 20%),linear-gradient(0deg,rgba(4,7,12,.97),rgba(4,7,12,.75) 45%,rgba(4,7,12,.1) 78%,transparent) !important;
  }
}
@media(prefers-reduced-motion:reduce) {
  body.pf-system.pf-unified[data-portfolio] .pf-cover-hero :is(.pf-cover-letter,.pf-cover-lamp) { transition: none !important; }
}

/* Broad chapters share a heading; project-specific stories become modules. */
body.pf-system.pf-unified[data-portfolio] .pf-subchapter {
  display: block !important; width: 100% !important; max-width: none !important;
  padding: 0 !important; margin: var(--pf-module) 0 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-chapter > .pf-subchapter:first-of-type { margin-top: 0 !important; }
body.pf-system.pf-unified[data-portfolio] .pf-subchapter > :is(.wrap,.container,.collection,.section) {
  width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-subchapter .pf-subchapter-intro {
  margin-bottom: 32px !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-subchapter-intro > :is(h2,h3) {
  font: 500 25px/1.3 var(--pf-font) !important; margin: 0 0 12px !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-chapter-group > :is(article,figure,.destination-map,.flow-reason,.service-board) + :is(article,figure,.destination-map,.flow-reason,.service-board) { margin-top: var(--pf-module) !important; }
body.pf-system.pf-unified[data-portfolio] .compact-design-row:has(> :only-child) { grid-template-columns: minmax(0,1fr) !important; }
body.pf-system.pf-unified[data-portfolio] .pf-chapter > .premise {
  width: 100% !important; max-width: none !important; padding-inline: 0 !important;
  margin: 0 0 var(--pf-module) !important;
}

/* Unified navigation leaves the cover focused on the project and its interactive title. */
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero h1 { position: relative; width: fit-content; max-width: 100%; }
body.pf-system.pf-unified[data-portfolio] .pf-cover-title-word { position: relative; }
body.pf-system.pf-unified[data-portfolio] .pf-cover-letter { position: relative; will-change: transform; transition: color .18s !important; }
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero[data-title-active='true'] .pf-cover-letter {
  text-shadow: -1px 1px var(--project-pale),-2px 2px var(--project-dark),-4px 4px var(--project-dark),-6px 6px var(--project-dark),-8px 8px var(--project-dark),-10px 10px var(--project-dark);
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero h1:focus-visible { outline: 2px solid var(--project-pale); outline-offset: 12px; border-radius: 4px; }
/* A prominent left-aligned project story leaves the right side to the artwork. */
body.pf-system.pf-unified[data-portfolio] .pf-project-hero.pf-cover-hero {
  height: auto !important; min-height: 100svh !important;
  padding: calc(var(--pf-site-height,56px) + 24px) var(--cover-pad) calc(var(--pf-reading-height,81px) + 40px) !important;
  gap: 28px !important; perspective: none;
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-project-copy {
  display: flex !important; flex: 1 0 auto; align-items: center; justify-content: flex-start; min-height: min-content;
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-heading {
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(28px,3.5vh,44px);
  max-width: 100%; width: 100%; text-align: left;
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-heading::before {
  inset: -100px 8% -90px -100px;
  background: radial-gradient(ellipse at 20% 50%,rgba(3,6,11,.85),rgba(3,6,11,.6) 46%,transparent 77%);
  filter: blur(28px);
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero h1 {
  font-size: clamp(100px,13.5vw,240px) !important; line-height: .94 !important;
  letter-spacing: -.065em !important; margin: 0 !important; text-align: left !important;
  white-space: normal; text-wrap: balance;
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-title-word { display: inline-block; margin-right: .12em; }
body.pf-system.pf-unified[data-portfolio] .pf-cover-title-word:last-child { margin-right: 0; }
body.pf-system.pf-unified[data-portfolio] .pf-cover-summary {
  position: relative; max-width: 720px; width: 58%; padding: 0; border: 0; text-align: left;
  text-shadow: 0 2px 18px rgba(0,0,0,.7);
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-lead {
  color: var(--project-pale) !important; font: 500 clamp(26px,2.5vw,40px)/1.2 var(--pf-font) !important;
  letter-spacing: -.025em !important; margin: 0 0 18px !important; text-wrap: pretty;
}
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-hero-description {
  color: #e4e5ec !important; font: 400 clamp(18px,1.5vw,24px)/1.5 var(--pf-font) !important;
  max-width: 48ch !important; margin: 0 !important; text-wrap: pretty; text-align: left !important;
}
/* Perspective affects the artwork and the effects canvas drawn over it, so re-lit pixels stay
   registered with the picture at every tilt; the story and navigation remain stable. */
body.pf-system.pf-unified[data-portfolio] .pf-cover-hero :is(.pf-cover-art,.pf-cover-lamp,.pf-cover-fx) {
  transform: perspective(1400px) translate3d(var(--depth-x,0px),var(--depth-y,0px),0) rotateX(var(--depth-rx,0deg)) rotateY(var(--depth-ry,0deg)) scale(var(--depth-scale,1.16));
  transition: transform .65s cubic-bezier(.2,.7,.2,1); will-change: transform;
}
@media(max-width:760px) {
  body.pf-system.pf-unified[data-portfolio] .pf-project-hero.pf-cover-hero { padding-top: calc(var(--pf-site-height,56px) + 24px) !important; padding-bottom: calc(var(--pf-reading-height,74px) + 24px) !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-heading { gap: 24px; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-hero h1 { font-size: clamp(60px,18vw,136px) !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-summary { max-width: 560px; width: 100%; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-lead { font-size: clamp(24px,5vw,32px) !important; margin-bottom: 14px !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-hero-description { font-size: 19px !important; line-height: 1.45 !important; }
}
@media(max-height:700px) and (max-width:760px) {
  body.pf-system.pf-unified[data-portfolio] .pf-cover-heading { gap: 18px; }
  body.pf-system.pf-unified[data-portfolio] .pf-project-hero.pf-cover-hero { padding-bottom: calc(var(--pf-reading-height,74px) + 20px) !important; gap: 16px !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-lead { font-size: 23px !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-hero-description { font-size: 18px !important; }
}
@media(max-height:500px) and (min-width:761px) {
  body.pf-system.pf-unified[data-portfolio] .pf-cover-hero h1 { font-size: 70px !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-heading { gap: 16px; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-lead { font-size: 21px !important; margin-bottom: 10px !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-cover-hero .pf-hero-description { font-size: 18px !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-project-hero.pf-cover-hero { padding-bottom: calc(var(--pf-reading-height,74px) + 16px) !important; }
}
@media(prefers-reduced-motion:reduce) {
  body.pf-system.pf-unified[data-portfolio] .pf-cover-hero :is(.pf-cover-art,.pf-cover-lamp,.pf-cover-fx) { transform: none !important; transition: none !important; }
}

/* Keep hover light local and restrained against the full-size artwork. */
body.pf-system.pf-unified:is([data-portfolio='feral'],[data-portfolio='pawsitive']) .pf-cover-hero[data-motion='on'][data-pointer='inside'] .pf-cover-lamp { opacity: .55; }
body.pf-system.pf-unified:is([data-portfolio='feral'],[data-portfolio='pawsitive']) .pf-cover-hero .pf-cover-lamp .art-img { filter: brightness(1) saturate(1.05) !important; --cover-light-radius: 28vmax; }
body.pf-system.pf-unified[data-portfolio='feral'] .pf-cover-hero .pf-cover-lamp .art-img { --cover-light-radius: 30vmax; }

/* Femme Fatale: the illustrated bar is lit for the page a little more generously than the shared cover treatment. */
body.pf-system.pf-unified[data-portfolio='femmefatale'] .pf-cover-hero .pf-cover-art:not(.pf-cover-lamp) .art-img { filter: brightness(1.16) saturate(1.06) !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .pf-cover-hero .pf-cover-lamp .art-img { filter: brightness(1.3) saturate(1.06) !important; }
body.pf-system.pf-unified[data-portfolio='femmefatale'] .pf-cover-hero .pf-cover-scrim {
  background: linear-gradient(180deg,rgba(4,7,12,.3),transparent 22%),
    linear-gradient(0deg,rgba(4,7,12,.88),rgba(4,7,12,.5) 30%,rgba(4,7,12,.06) 66%,transparent) !important;
}

/* Pawsitive: the storybook art is bright and pastel, so the cover keeps a much lighter veil. */
body.pf-system.pf-unified[data-portfolio='pawsitive'] .pf-cover-hero .pf-cover-scrim {
  background: linear-gradient(180deg,rgba(24,18,32,.18),transparent 20%),
    linear-gradient(0deg,rgba(24,18,32,.62),rgba(24,18,32,.22) 30%,transparent 58%) !important;
}
/* The near-black heading shadow that suits the dark covers muddies this pastel scene, so Pawsitive uses a smaller,
   plum-tinted glow and lets the type carry its own shadow instead. */
body.pf-system.pf-unified[data-portfolio='pawsitive'] .pf-cover-heading::before {
  background: radial-gradient(ellipse at 22% 55%,rgba(36,33,38,.5),rgba(36,33,38,.28) 45%,transparent 72%);
  filter: blur(34px);
}
body.pf-system.pf-unified[data-portfolio='pawsitive'] .pf-cover-hero :is(.pf-cover-lead,.pf-hero-description) {
  text-shadow: 0 1px 2px rgba(24,18,32,.55), 0 2px 18px rgba(24,18,32,.6);
}
body.pf-system.pf-unified[data-portfolio='pawsitive'] .pf-cover-hero h1 { text-shadow: 0 2px 24px rgba(24,18,32,.45) !important; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] .pf-cover-hero .pf-cover-art:not(.pf-cover-lamp) .art-img { filter: brightness(1.06) saturate(1.08) !important; }

/* Pawsitive: the scene is already bright, and a cursor lamp only washes out the dust motes drawn over it,
   so this cover has no lamp. The depth tilt and the motes gathering are the hover response. */
body.pf-system.pf-unified[data-portfolio='pawsitive'] .pf-cover-hero .pf-cover-lamp { display: none; }