:root{--project-page-width:980px}
html{scroll-behavior:smooth}
.project-detail-site{background:#050505;color:#f0f0eb}
.project-detail-site .header{height:72px;border-bottom:1px solid #ffffff18;background:#050505ed}
.project-detail-site .header-inner{min-height:72px}
.project-detail-main{overflow:hidden}
.project-detail-hero{padding:clamp(148px,16vw,220px) 0 clamp(72px,8vw,112px);background:radial-gradient(ellipse 42% 72% at 82% 20%,#d32f3812,transparent 68%),#050505}
.project-detail-marker{display:flex;align-items:center;gap:10px;margin:0;color:#8e9188;font:9px/1.4 Inter,system-ui,sans-serif;letter-spacing:.14em}
.project-detail-marker:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 4px #d32f3812}
.project-detail-kicker{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(44px,5vw,70px);color:#8b8e85;font:9px/1.4 Inter,system-ui,sans-serif;letter-spacing:.13em}
.project-detail-title{max-width:10ch;margin:clamp(22px,2.5vw,36px) 0 0;font-size:clamp(64px,9vw,138px);font-weight:430;line-height:.83;letter-spacing:-.072em;text-wrap:balance}
.project-detail-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:clamp(42px,5vw,70px)}
.project-detail-button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:50px;padding:0 20px;border:1px solid #ffffff24;color:#d8dad2;font:700 9px/1.25 Inter,system-ui,sans-serif;letter-spacing:.12em;text-decoration:none;transition:border-color .2s ease,color .2s ease,transform .2s ease}
.project-detail-button:hover{border-color:var(--color-accent);color:var(--color-accent);transform:translateY(-2px)}
.project-detail-button--primary{border-color:var(--color-accent);background:var(--color-accent);color:#080905}
.project-detail-button--primary:hover{background:#e0e334;color:#080905}
.project-detail-capture{padding:clamp(74px,8vw,118px) 0;background:#0a0b09}
.project-detail-capture-head{display:flex;align-items:end;justify-content:space-between;gap:30px;max-width:var(--project-page-width);margin:0 auto clamp(30px,4vw,50px)}
.project-detail-capture-head p{max-width:48ch;margin:0;color:#92958c;font-size:13px;line-height:1.7}
.project-detail-capture-frame{display:flex;justify-content:center;max-width:var(--project-page-width);margin:0 auto;padding:clamp(12px,1.7vw,24px);background:#11120f;box-shadow:0 32px 90px #0008}
.project-detail-capture-frame img{display:block;width:auto;max-width:100%;height:auto;object-fit:contain;background:#fff}
.project-detail-navigation{padding:clamp(74px,8vw,118px) 0;background:#050505}
.project-detail-navigation-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#ffffff18;border:1px solid #ffffff18}
.project-detail-nav-link{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;min-height:190px;padding:clamp(26px,3vw,44px);background:#070807;color:#efefe9;text-decoration:none;transition:background .25s ease}
.project-detail-nav-link:hover{background:#0d0f09}
.project-detail-nav-link small{display:block;margin-bottom:15px;color:#777a72;font:9px/1.4 Inter,system-ui,sans-serif;letter-spacing:.13em}
.project-detail-nav-link strong{font-size:clamp(28px,3vw,46px);font-weight:430;line-height:.96;letter-spacing:-.045em}
.project-detail-nav-link i{color:var(--color-accent);font-size:24px;font-style:normal;transition:transform .2s ease}
.project-detail-nav-link:hover i{transform:translateX(4px)}
.project-detail-nav-link--previous i{order:-1}.project-detail-nav-link--previous:hover i{transform:translateX(-4px)}
.project-detail-cta{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:clamp(58px,7vw,90px);padding-top:clamp(34px,4vw,54px);border-top:1px solid #ffffff18}
.project-detail-cta p{max-width:17ch;margin:0;font-size:clamp(34px,4vw,58px);line-height:.96;letter-spacing:-.05em}
.project-detail-site [data-whatsapp-link][hidden]{display:none!important}

@media(max-width:760px){
  .project-detail-site .header,.project-detail-site .header-inner{height:64px;min-height:64px}
  .project-detail-hero{padding-top:132px}
  .project-detail-title{font-size:clamp(52px,16vw,74px);line-height:.88}
  .project-detail-kicker{align-items:flex-start;flex-direction:column;gap:10px}
  .project-detail-actions{align-items:stretch;flex-direction:column}
  .project-detail-button{width:100%;min-height:52px}
  .project-detail-capture-head{display:block}
  .project-detail-capture-head .project-detail-button{margin-top:24px}
  .project-detail-capture-frame{margin-inline:calc(var(--gutter) * -.25);padding:7px}
  .project-detail-navigation-grid{grid-template-columns:1fr}
  .project-detail-nav-link{min-height:150px}
  .project-detail-cta{align-items:flex-start;flex-direction:column}
}
@media(max-width:359px){.project-detail-site .header-inner{gap:8px}.project-detail-site .menu-toggle{flex:none}.project-detail-site .wordmark{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project-detail-button,.project-detail-nav-link,.project-detail-nav-link i{transition:none}}
/* The CTA keeps its natural width; the headline beside it gives way instead of squeezing the label. */
.project-detail-cta .project-detail-button{flex:none}