.expertise-line{display:flex;gap:30px;flex-wrap:wrap;border-top:1px solid #d4a65666;padding:24px 0 40px;margin-top:16px;color:#e4c888;font-size:14px;line-height:1.6}
.project-page .header{border-bottom:1px solid #f4efe526}
.project-intro,.case-intro{padding-top:70px;padding-bottom:72px}
.project-intro h1,.case-intro h1{font-family:Manrope,sans-serif;font-size:clamp(44px,6.3vw,90px);font-weight:500;line-height:1.08;letter-spacing:-.04em;margin:24px 0}
.project-intro>p,.case-lead{font-size:clamp(19px,2vw,27px);line-height:1.55;max-width:800px;color:#f4efe5}
.project-list,.case-reading{background:#f4efe5;color:#0a1628;padding:70px 0}
.project-entry{margin-bottom:85px}
.project-entry:last-child{margin-bottom:0}
.project-entry .project-cover{min-height:420px;height:auto}
.project-entry .cover-statement{font-size:clamp(34px,4.5vw,64px)}
.entry-copy{display:grid;grid-template-columns:1fr 1fr;gap:45px;padding:28px 0 0}
.entry-copy h2{font-size:28px;margin:0 0 9px;font-weight:600;letter-spacing:-.025em}
.entry-copy p{font-size:17px;line-height:1.65;margin:0 0 16px;max-width:66ch}
.entry-copy .case-category{font-size:14px;color:#46505c}
.case-link,.back-link{display:inline-flex;align-items:center;gap:24px;font-size:15px;font-weight:650;min-height:44px;text-decoration:none;border-bottom:1px solid currentColor;padding:8px 0}
.case-link svg,.back-link svg{width:20px;height:20px;flex:none}
.case-link:hover,.back-link:hover{color:#8a6328}
.case-intro .case-link,.back-link{color:#e4c888}
.case-facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:35px;margin:48px 0 24px;border-top:1px solid #d4a65666;padding-top:25px}
.case-facts dt{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#e4c888;margin-bottom:10px}
.case-facts dd{font-size:15px;line-height:1.7;margin:0;max-width:40ch}
.case-actions{display:flex;gap:35px;flex-wrap:wrap}
.case-section{display:grid;grid-template-columns:1fr 2fr;gap:65px;padding:38px 0;border-bottom:1px solid #0a16282b}
.case-section h2{font-size:25px;line-height:1.3;letter-spacing:-.02em;font-weight:600;margin:0}
.case-section p{font-size:18px;line-height:1.85;max-width:70ch;margin:0}
.case-end{padding:48px 0 0}
.cover-quantum{background:#162a35;color:#f4efe5;display:flex;flex-direction:column;justify-content:space-between;gap:35px;padding:45px}
.quantum-name{font-size:30px;line-height:1.1;font-weight:600;margin:0}
.cover-quantum em{color:#a6d9d4}
.cover-quantum>p:last-child{font-size:13px}
.project-page .contact{margin:0}
.project-page #content:focus{outline:none}
@media(max-width:760px){.project-intro,.case-intro{padding-top:35px;padding-bottom:45px}.entry-copy,.case-section,.case-facts{grid-template-columns:1fr;gap:20px}.project-list,.case-reading{padding:35px 0}.project-entry{margin-bottom:55px}.project-entry .project-cover{min-height:380px}.project-entry .vecto-domains{grid-template-columns:repeat(3,1fr)}.case-section{padding:30px 0}.case-section p{font-size:16px;line-height:1.8}.case-facts{margin-top:30px}.expertise-line{gap:12px 24px;font-size:12px;padding:20px 0 32px;margin-top:0}.cover-quantum{padding:25px}.entry-copy{gap:8px}.project-page .case-intro h1{overflow-wrap:break-word}}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 28px;font-size:14px;line-height:1.7;color:#e4c888}.breadcrumbs li+li:before{content:'/';margin-right:10px;color:#b8c2cd}.breadcrumbs a{text-underline-offset:5px}.breadcrumbs [aria-current]{color:#f4efe5}.related-projects{display:flex;gap:30px;flex-wrap:wrap;margin:20px 0 35px}.case-end h2{font-size:25px;font-weight:600}.chapter-summary>.case-link{margin-top:20px}
@media(max-width:700px){.header nav{gap:16px}.header nav a{font-size:13px}}
.editorial-artwork{position:relative;overflow:hidden;background:#f4efe5;aspect-ratio:1586/992}.editorial-artwork img{display:block;width:100%;height:100%;object-fit:cover}.artwork-title{position:absolute;top:8%;left:5%;max-width:38%;font-size:clamp(26px,4.8vw,66px);font-weight:600;line-height:1.06;letter-spacing:-.035em;color:#0a1628;text-wrap:balance}.artwork-vecto{position:absolute;top:9%;left:5%;width:24%;height:12%;background:#0a1628;mask:url('/assets/vecto-wordmark-current.svg') left center/contain no-repeat;-webkit-mask:url('/assets/vecto-wordmark-current.svg') left center/contain no-repeat}.case-artwork{margin-bottom:32px}.case-artwork .artwork-title{font-size:clamp(26px,4.8vw,66px)}
@media(max-width:600px){.artwork-title,.case-artwork .artwork-title{font-size:clamp(20px,5.5vw,32px);max-width:43%}.case-artwork{margin-bottom:12px}}
.read-case{display:inline-flex;align-items:center;gap:16px;margin-top:28px;padding:10px 0;color:#e4c888;font-size:14px;text-decoration:none}.read-case svg,.related-project svg{width:22px;height:22px;flex-shrink:0}.related-projects{display:grid;grid-template-columns:1fr 1fr;gap:32px}.related-project{display:flex;gap:24px;justify-content:space-between;padding:24px 0;border-top:1px solid #0a162833;text-decoration:none}.related-project strong{display:block;font-size:25px;font-weight:600;margin-bottom:12px}.related-project span span{display:block;font-size:15px;line-height:1.65;max-width:48ch}.related-project:hover strong{text-decoration:underline;text-underline-offset:5px}
@media(max-width:900px){.related-projects{grid-template-columns:1fr;gap:0}}

/* The hero is one composition; artwork never becomes a separate card. */
.case-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  color: var(--navy);
}
.case-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 640px;
  padding-top: 32px;
  padding-bottom: 48px;
}
.case-hero .breadcrumbs ol,
.case-hero .breadcrumbs [aria-current],
.case-hero .breadcrumbs li + li::before { color: inherit; }
.case-hero-copy { max-width: 480px; margin-block: auto; padding-block: 32px; }
.case-hero h1 {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 24px;
  color: inherit;
  font-size: clamp(40px, 4.3vw, 64px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero-accessible-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hero-vecto-logo {
  display: block;
  width: 240px;
  height: 100px;
  background: currentColor;
  mask: url('/assets/vecto-wordmark-current.svg') left center / contain no-repeat;
  -webkit-mask: url('/assets/vecto-wordmark-current.svg') left center / contain no-repeat;
}
.case-hero .case-lead {
  color: inherit;
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.4;
  letter-spacing: -.025em;
  text-wrap: pretty;
}
.case-hero .case-actions { margin-top: 32px; gap: 16px 32px; }
.case-hero .case-link, .case-hero .read-case { color: inherit; }
.case-hero .case-link:hover, .case-hero .read-case:hover { color: #8a6328; }
.case-hero .read-case { margin-top: 16px; min-height: 44px; }
.case-hero-art {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 32px;
  right: 24px;
  width: auto;
  max-width: calc(100% - 48px);
  height: calc(100% - 64px);
  object-fit: contain;
  object-position: right center;
  mix-blend-mode: multiply;
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 16%), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
}
.case-hero--urlsnap-api .case-hero-art {
  mask-image: linear-gradient(to right, transparent 20%, #000 42%), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent 20%, #000 42%), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
}
.hero-facts { padding-top: 0; padding-bottom: 32px; }
.hero-facts .case-facts { margin-top: 0; border-top: 0; padding-top: 32px; }
.case-hero--brand { color: var(--white); }
.case-hero--brand .case-hero-copy { max-width: 800px; }
.case-hero--brand .case-link:hover,
.case-hero--brand .read-case:hover { color: var(--gold); }
.hero-brand-logo { display: block; object-fit: contain; object-position: left center; }
.case-hero-signature { margin-top: 16px; }
.case-hero--dea { background: #26221f; }
.case-hero--dea .hero-brand-logo { width: 280px; height: auto; }
.case-hero--dea .case-hero-copy { max-width: 620px; }
.case-hero--dea::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(20,18,15,.92), rgba(20,18,15,.32));
}
.case-hero--dea .dea-interior { object-position: center 54%; }
.case-hero--valk { background: #1e1724; }
.case-hero--valk .hero-brand-logo { width: 60px; height: 64px; }
.case-hero--valk .valk-symbol { width: 30%; height: 70%; max-height: none; right: 4%; top: 12%; opacity: .18; z-index: -1; }
.case-hero--valk .case-lead { max-width: 30ch; }
.case-hero--valk .read-case { color: #f0a8a1; }
.case-hero--engeparc { background: #172941; }
.case-hero--engeparc .hero-brand-logo { width: 320px; height: auto; }
.case-hero--engeparc .case-hero-copy { max-width: 1000px; }
.case-hero--engeparc .case-lead { max-width: 44ch; }
.case-hero--engeparc .read-case { color: #c6d82e; }
@media (max-width: 1100px) and (min-width: 701px) {
  .case-hero-copy { max-width: 42%; }
  .case-hero-art { max-width: 90%; }
  .case-hero h1 { font-size: 44px; }
  .case-hero .case-lead { font-size: 28px; }
  .case-hero--brand .case-hero-copy { max-width: 80%; }
}
@media (max-width: 700px) {
  .case-hero-inner { min-height: 0; padding-top: 24px; padding-bottom: 32px; }
  .case-hero-copy, .case-hero--brand .case-hero-copy { max-width: 100%; padding-block: 12px 0; }
  .case-hero-art, .case-hero--valk .valk-symbol { display: none; }
  .case-hero h1 { font-size: 40px; gap: 12px; margin-bottom: 20px; }
  .hero-vecto-logo { width: 180px; height: 76px; }
  .case-hero .case-lead { font-size: 24px; }
  .case-hero .case-actions { margin-top: 24px; gap: 12px 24px; }
  .case-hero .read-case { margin-top: 12px; }
  .case-hero--dea .hero-brand-logo { width: 220px; }
  .case-hero--valk .hero-brand-logo { width: 44px; height: 48px; }
  .case-hero--valk h1 { font-size: 32px; }
  .case-hero--engeparc .hero-brand-logo { width: 240px; }
  .case-hero--dea::before { background: rgba(20,18,15,.88); }
  .case-hero-signature { margin-top: 32px; }
  .hero-facts { padding-bottom: 24px; }
}

@media (min-width: 701px) and (max-width: 900px) {
  .case-hero-art { display: none; }
  .case-hero--editorial .case-hero-copy { max-width: 640px; }
  .case-hero--editorial .case-hero-inner { min-height: 560px; }
}
/* Approved transparent artwork belongs to individual case heroes only. */
.case-hero--editorial { background: var(--white); color: var(--navy); }
.case-hero--editorial::before { display: none; }
.case-hero--editorial .case-hero-inner { min-height: clamp(640px, 48vw, 760px); }
.case-hero--editorial .case-hero-copy { max-width: 39%; }
.case-hero--editorial .case-hero-art {
  display: block;
  width: 60%;
  max-width: none;
  height: calc(100% - 32px);
  top: 16px;
  right: 0;
  object-fit: contain;
  object-position: right center;
  mix-blend-mode: normal;
  mask-image: none;
  -webkit-mask-image: none;
}
.case-hero--editorial .read-case { color: inherit; }
.case-hero--editorial .case-hero-signature { display: none; }
.project-list .project-entry { margin: 0; padding: 40px 0; border-top: 1px solid #0a16282b; }
.project-list .entry-copy { padding: 0; }
.project-list .project-entry:last-child { border-bottom: 1px solid #0a16282b; }
@media (max-width: 1100px) and (min-width: 901px) {
  .case-hero--editorial .case-hero-copy { max-width: 40%; }
  .case-hero--editorial .case-lead { font-size: 26px; }
  .case-hero--editorial .case-hero-art { width: 58%; }
}
@media (max-width: 900px) {
  .case-hero--editorial .case-hero-copy { max-width: 100%; }
  .case-hero--editorial .case-hero-inner { min-height: 0; padding-bottom: 32px; }
  .case-hero--editorial .case-hero-art { display: none; }
  .case-hero--editorial .case-lead { max-width: 36ch; }
}