.project-page { min-height: 100vh; background: var(--cream); color: var(--ink); }
      .project-bar { min-height: 78px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; color: var(--cream); background: var(--green); }
      .project-bar img { width: 145px; }
      .project-back { display: inline-flex; align-items: center; gap: .8rem; padding: .8rem 0; font-size: .73rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
      .project-back span { font-size: 1.25rem; font-weight: 400; transition: transform .2s ease; }
      .project-back:hover span { transform: translateX(-4px); }
      .project-shell { width: min(90vw, 1680px); margin: 0 auto; }
      .project-hero { min-height: min(70vw, 760px); padding: clamp(5rem, 10vw, 10rem) 0 clamp(4rem, 7vw, 7rem); display: grid; align-content: end; background: var(--cream); }
      .project-meta { margin-bottom: clamp(2.5rem, 5vw, 5rem); display: flex; gap: .9rem; }
      .project-meta span { padding: .5rem .7rem; color: var(--coral); border: 1px solid rgba(207,73,51,.45); font-size: .68rem; font-weight: 800; letter-spacing: .13em; }
      .project-hero h1 { max-width: 1250px; margin: 0; color: var(--green); font: 400 clamp(4.8rem, 10.2vw, 11rem)/.8 var(--serif); letter-spacing: -.065em; }
      .project-hero > p { margin: 2.3rem 0 0; color: var(--coral); font-size: .78rem; font-weight: 800; letter-spacing: .16em; }
      .project-hero h2 { max-width: 670px; margin: 2rem 0 0 auto; color: #294f43; font: italic 400 clamp(1.7rem, 2.7vw, 3.05rem)/1.06 var(--serif); }
      .project-cover { height: min(59vw, 760px); margin: 0; overflow: hidden; background: #ddd6ca; }
      .project-cover img { width: 100%; height: 100%; object-fit: cover; }
      .project-overview { padding: clamp(4rem, 8vw, 9rem) 0; display: grid; grid-template-columns: 31% 1fr; gap: clamp(2rem, 7vw, 10rem); border-bottom: 1px solid var(--line); }
      .project-overview > div { display: flex; align-items: center; gap: 1.3rem; align-self: start; color: var(--coral); font-size: .73rem; font-weight: 800; letter-spacing: .16em; }
      .project-overview i { width: 56px; height: 3px; background: var(--coral); }
      .project-overview > p { max-width: 920px; margin: 0; color: var(--green); font: 400 clamp(2.25rem, 4.1vw, 4.7rem)/1.06 var(--serif); letter-spacing: -.035em; }
      .project-story { padding: clamp(3rem, 6vw, 7rem) 0; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
      .project-story article { min-height: 280px; padding: .5rem clamp(1.5rem, 3vw, 4rem) 1.5rem; border-left: 1px solid var(--line); }
      .project-story article:first-child { padding-left: 0; border-left: 0; }
      .project-story span, .project-services-heading p { color: var(--coral); font-size: .7rem; font-weight: 800; letter-spacing: .15em; }
      .project-story h3 { margin: 2.2rem 0 1rem; color: var(--green); font: italic 400 clamp(2rem, 3vw, 3.2rem)/.95 var(--serif); }
      .project-story p { max-width: 390px; margin: 0; color: #466057; font: 1.08rem/1.5 var(--serif); }
      .project-services { padding: clamp(5rem, 9vw, 10rem) 0; display: grid; grid-template-columns: 42% 1fr; gap: clamp(3rem, 7vw, 10rem); }
      .project-services-heading p { margin: 0 0 1.6rem; }
      .project-services-heading h2 { max-width: 500px; margin: 0; color: var(--green); font: italic 400 clamp(3.2rem, 5vw, 5.7rem)/.88 var(--serif); letter-spacing: -.05em; }
      .project-services ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
      .project-services li { min-height: 90px; display: grid; grid-template-columns: 78px 1fr; align-items: center; border-bottom: 1px solid var(--line); color: var(--green); }
      .project-services li span:first-child { color: var(--coral); font-size: .77rem; font-weight: 800; }
      .project-services li span:last-child { font: italic 400 clamp(1.65rem, 2.5vw, 2.7rem) var(--serif); }
      .project-footer { display: grid; grid-template-columns: 1fr 1fr; margin: 0 calc((90vw - 100vw) / 2); color: var(--cream); background: #071c35; }
      .project-footer a { min-height: 240px; padding: clamp(2rem, 5vw, 5rem); display: grid; align-content: center; gap: 1.1rem; border-right: 1px solid rgba(255,255,255,.2); transition: background .25s ease; }
      .project-footer a:hover { background: #10324e; }
      @media (hover: none) {
        .project-back:active span, .project-detail-page .project-detail-back:active span { transform: translateX(-4px); }
        .project-footer a:active { background: #10324e; }
        .project-detail-page .project-detail-footer a:active { background: rgba(18,61,50,.06); }
      }
      .project-footer span { color: rgba(255,255,255,.7); font-size: .7rem; font-weight: 800; letter-spacing: .15em; }
      .project-footer strong { max-width: 430px; font: italic 400 clamp(1.9rem, 3vw, 3.4rem)/.98 var(--serif); }
      .project-footer i { color: var(--cream); font-size: 1.8rem; font-style: normal; }
      @media (max-width: 800px) {
        .project-hero { min-height: 650px; }
        .project-overview, .project-services { grid-template-columns: 1fr; gap: 2rem; }
        .project-story { grid-template-columns: 1fr; }
        .project-story article, .project-story article:first-child { min-height: auto; padding: 2.5rem 0; border-left: 0; border-top: 1px solid var(--line); }
        .project-story article:first-child { border-top: 0; padding-top: .5rem; }
      }
      @media (max-width: 560px) {
        .project-bar { min-height: 68px; padding: 0 1rem; }
        .project-bar img { width: 112px; }
        .project-back { font-size: .62rem; }
        .project-shell { width: calc(100vw - 2rem); }
        .project-hero { min-height: 580px; }
        .project-meta { flex-wrap: wrap; }
        .project-cover { height: 72vw; }
        .project-footer { grid-template-columns: 1fr; margin: 0 -1rem; }
        .project-footer a { min-height: 190px; border-bottom: 1px solid rgba(255,255,255,.2); border-right: 0; }
      }

      /* Reference detail-page layout from the live DERNEK implementation. */
      .project-detail-page { min-height: 100vh; padding: clamp(30px,4vw,66px) max(24px,4vw) clamp(64px,7vw,110px); background: #f4f2e9; color: #123d32; }
      .project-detail-page .detail-action-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
      .project-detail-page .project-detail-back { display: inline-flex; align-items: center; gap: 13px; color: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .08em; line-height: 1; text-decoration: none; }.project-detail-page .project-detail-back span { color: var(--orange); font-size: 1.25rem; transition: transform .18s ease; }.project-detail-page .project-detail-back:hover span { transform: translateX(-5px); }
      .project-detail-page .project-detail-shell { width: min(100%,1500px); margin: clamp(58px,7.5vw,112px) auto 0; }
      .project-detail-page .project-detail-hero { min-height: 0; padding: 0; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(320px,.6fr); column-gap: clamp(48px,8vw,130px); align-items: end; background: transparent; }
      .project-detail-page .project-detail-meta { grid-column: 1/-1; display: flex; gap: 18px; margin-bottom: 22px; color: var(--orange); font-family: var(--ff-projDetailTag, var(--sans)); font-size: var(--fs-projDetailTag, .72rem); font-weight: var(--fw-projDetailTag, 700); font-style: var(--fst-projDetailTag, normal); letter-spacing: .14em; }.project-detail-page .project-detail-meta span { padding: 0; border: 0; }.project-detail-page .project-detail-meta span + span { padding-left: 18px; border-left: 1px solid rgba(18,61,50,.25); }
      .project-detail-page .project-detail-hero h1 { margin: 0; color: inherit; font: var(--fst-projDetailTitle, normal) var(--fw-projDetailTitle, 500) var(--fs-projDetailTitle, clamp(4.4rem,8.7vw,9.4rem))/.78 var(--ff-projDetailTitle, var(--serif)); letter-spacing: -.055em; }.project-detail-page .project-detail-hero > p { grid-column: 1; margin: 26px 0 0; color: inherit; font-family: var(--ff-projDetailTag, var(--sans)); font-size: var(--fs-projDetailTag, .72rem); font-weight: var(--fw-projDetailTag, 700); font-style: var(--fst-projDetailTag, normal); letter-spacing: .13em; line-height: 1.4; }.project-detail-page .project-detail-hero h2 { grid-column: 2; grid-row: 2/4; max-width: none; margin: 0; color: inherit; font: var(--fst-projDetailHeadline, italic) var(--fw-projDetailHeadline, 400) var(--fs-projDetailHeadline, clamp(2rem,3vw,3.75rem))/1.02 var(--ff-projDetailHeadline, var(--serif)); letter-spacing: -.03em; }
      .project-detail-page .project-detail-cover { height: clamp(430px,56vw,790px); margin: clamp(52px,7vw,104px) 0 0; overflow: hidden; background: #163e34; }.project-detail-page .project-detail-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
      .project-detail-page .project-detail-overview { display: grid; grid-template-columns: minmax(190px,.35fr) minmax(0,1fr); gap: clamp(40px,8vw,150px); padding: clamp(60px,8vw,126px) 0; border-bottom: 1px solid rgba(18,61,50,.22); }.project-detail-page .project-detail-overview > div { display: block; color: var(--orange); font-family: var(--ff-projDetailTag, var(--sans)); font-size: var(--fs-projDetailTag, .72rem); font-weight: var(--fw-projDetailTag, 700); font-style: var(--fst-projDetailTag, normal); letter-spacing: .14em; }.project-detail-page .project-detail-overview > div i { display: block; width: 42px; height: 2px; margin-top: 18px; background: var(--orange); }.project-detail-page .project-detail-overview > p { max-width: 950px; margin: 0; color: inherit; font: var(--fst-projDetailOverviewTitle, normal) var(--fw-projDetailOverviewTitle, 400) var(--fs-projDetailOverviewTitle, clamp(2rem,3.3vw,4.1rem))/1.05 var(--ff-projDetailOverviewTitle, var(--serif)); letter-spacing: -.035em; }
      .project-detail-page .project-detail-story { padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-bottom: 1px solid rgba(18,61,50,.22); }.project-detail-page .project-detail-story article { min-height: 360px; padding: clamp(42px,5vw,76px) clamp(24px,3.4vw,56px) clamp(46px,5vw,76px) 0; border: 0; }.project-detail-page .project-detail-story article + article { padding-left: clamp(24px,3.4vw,56px); border-left: 1px solid rgba(18,61,50,.22); }.project-detail-page .project-detail-story span { color: var(--orange); font-family: var(--ff-projDetailStoryTag, var(--sans)); font-size: var(--fs-projDetailStoryTag, .7rem); font-weight: var(--fw-projDetailStoryTag, 700); font-style: var(--fst-projDetailStoryTag, normal); letter-spacing: .12em; }.project-detail-page .project-detail-story h3 { margin: 48px 0 20px; color: inherit; font: var(--fst-projDetailStoryTitle, normal) var(--fw-projDetailStoryTitle, 500) var(--fs-projDetailStoryTitle, clamp(2rem,2.7vw,3.4rem))/.96 var(--ff-projDetailStoryTitle, var(--serif)); letter-spacing: -.035em; }.project-detail-page .project-detail-story p { max-width: 360px; color: inherit; font: 1rem/1.65 var(--sans); }
      .project-detail-page .project-detail-services { padding: clamp(72px,9vw,138px) 0; display: grid; grid-template-columns: minmax(280px,.7fr) minmax(0,1fr); gap: clamp(50px,9vw,160px); }.project-detail-page .project-detail-services-heading p { margin: 0; color: var(--orange); font-family: var(--ff-projDetailTag, var(--sans)); font-size: var(--fs-projDetailTag, .72rem); font-weight: var(--fw-projDetailTag, 700); font-style: var(--fst-projDetailTag, normal); letter-spacing: .14em; }.project-detail-page .project-detail-services-heading h2 { max-width: 520px; margin: 20px 0 0; color: inherit; font: var(--fst-projDetailServicesTitle, normal) var(--fw-projDetailServicesTitle, 500) var(--fs-projDetailServicesTitle, clamp(3rem,5.2vw,6rem))/.88 var(--ff-projDetailServicesTitle, var(--serif)); letter-spacing: -.045em; }.project-detail-page .project-detail-services ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(18,61,50,.22); }.project-detail-page .project-detail-services li { display: grid; min-height: 72px; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; border-bottom: 1px solid rgba(18,61,50,.22); color: inherit; font: var(--fst-projDetailServicesItem, normal) var(--fw-projDetailServicesItem, 400) var(--fs-projDetailServicesItem, clamp(1.5rem,2vw,2.2rem)) var(--ff-projDetailServicesItem, var(--serif)); }.project-detail-page .project-detail-services li span:first-child { color: var(--orange); font: var(--fst-projDetailServicesNum, normal) var(--fw-projDetailServicesNum, 700) var(--fs-projDetailServicesNum, .7rem) var(--ff-projDetailServicesNum, var(--sans)); }.project-detail-page .project-detail-services li span:last-child { font: inherit; }
      .project-detail-page .project-detail-footer { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; color: inherit; background: transparent; border-top: 1px solid rgba(18,61,50,.22); border-bottom: 1px solid rgba(18,61,50,.22); }.project-detail-page .project-detail-footer a { position: relative; min-height: 180px; padding: 34px clamp(24px,4vw,64px); display: flex; flex-direction: column; justify-content: center; gap: 0; color: inherit; background: transparent; box-sizing: border-box; }.project-detail-page .project-detail-footer a:hover { background: transparent; }.project-detail-page .project-detail-footer a + a { border-left: 1px solid rgba(18,61,50,.22); }.project-detail-page .project-detail-footer span { color: var(--orange); font-family: var(--ff-projDetailFooterTag, var(--sans)); font-size: var(--fs-projDetailFooterTag, .68rem); font-weight: var(--fw-projDetailFooterTag, 700); font-style: var(--fst-projDetailFooterTag, normal); letter-spacing: .13em; }.project-detail-page .project-detail-footer strong { max-width: none; margin-top: 14px; padding-right: 50px; font: var(--fst-projDetailFooterTitle, normal) var(--fw-projDetailFooterTitle, 500) var(--fs-projDetailFooterTitle, clamp(1.8rem,2.8vw,3.4rem))/.95 var(--ff-projDetailFooterTitle, var(--serif)); }.project-detail-page .project-detail-footer i { position: absolute; right: clamp(24px,4vw,64px); color: inherit; font-size: .76rem; font-weight: 700; letter-spacing: .13em; }
      @media (max-width: 860px) { .project-detail-page { padding-top: calc(28px + env(safe-area-inset-top)); padding-inline: max(24px,6vw); }.project-detail-page .project-detail-shell { margin-top: 62px; }.project-detail-page .project-detail-hero { display: block; }.project-detail-page .project-detail-hero h1 { font-size: var(--fs-projDetailTitle, clamp(4rem,15vw,7rem)); }.project-detail-page .project-detail-hero h2 { max-width: 620px; margin-top: 34px; }.project-detail-page .project-detail-cover { height: auto; aspect-ratio: 4/3; }.project-detail-page .project-detail-overview, .project-detail-page .project-detail-services { grid-template-columns: 1fr; gap: 42px; }.project-detail-page .project-detail-story { grid-template-columns: 1fr; }.project-detail-page .project-detail-story article { min-height: 0; padding: 46px 0; }.project-detail-page .project-detail-story article + article { padding-left: 0; border-top: 1px solid rgba(18,61,50,.22); border-left: 0; } }
      @media (max-width: 560px) { .project-detail-page { padding-inline: 22px; padding-bottom: calc(56px + env(safe-area-inset-bottom)); }.project-detail-page .project-detail-shell { margin-top: 48px; }.project-detail-page .project-detail-hero h1 { font-size: var(--fs-projDetailTitle, clamp(3.6rem,18vw,5.3rem)); line-height: .82; }.project-detail-page .project-detail-hero h2 { font-size: var(--fs-projDetailHeadline, clamp(1.85rem,9vw,2.55rem)); }.project-detail-page .project-detail-cover { margin-top: 44px; aspect-ratio: 1/1.05; }.project-detail-page .project-detail-overview { padding-block: 54px; }.project-detail-page .project-detail-overview > p { font-size: var(--fs-projDetailOverviewTitle, clamp(1.8rem,9vw,2.55rem)); }.project-detail-page .project-detail-footer { grid-template-columns: 1fr; }.project-detail-page .project-detail-footer a { min-height: 150px; padding-inline: 22px; }.project-detail-page .project-detail-footer a + a { border-top: 1px solid rgba(18,61,50,.22); border-left: 0; } }