/* London Mixed-Use Development editorial project composition — golden-ratio system (PEP-1012, mirrors the Notting Hill treatment above) */
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]){
background:linear-gradient(90deg,#03120de0 0%,#03120db3 43%,#03120d66 72%,#03120d75 100%),linear-gradient(#03120d2e,#03120d75),url("/images/projects/london-mixed-use-development/london-mixed-use-development-exterior.webp") 50% 48%/cover no-repeat,var(--green-960)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-page{
--phi-10:10px;
--phi-16:16px;
--phi-26:26px;
--phi-42:42px;
--phi-68:68px;
--phi-max:1440px;
width:100%;
max-width:var(--phi-max);
grid-template-columns:minmax(0,.382fr) minmax(0,.618fr);
grid-template-rows:auto auto;
gap:var(--phi-16) var(--phi-26);
align-items:start;
margin:0 auto;
padding:var(--phi-68) var(--phi-42);
display:grid;
position:relative;
isolation:isolate;
background:transparent
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-page:before{
content:none;
display:none
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-hero,
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-grid{
display:contents
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-hero>div,
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-hero>p,
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-story{
width:100%;
background:#03120dcc;
border:1px solid #ffffff38;
backdrop-filter:blur(1.5px)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-hero>div{
grid-column:2;
grid-row:1;
align-self:stretch;
padding:var(--phi-26) var(--phi-42)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-hero>p{
grid-column:1;
grid-row:1;
align-self:stretch;
min-height:100%;
color:#e4c98f;
background:linear-gradient(135deg,#03120de8,#123126dc);
border-color:#e4c98f70;
place-content:center;
justify-items:center;
gap:var(--phi-16);
padding:var(--phi-42);
font:400 20px/1.5 Georgia,"Times New Roman",serif;
letter-spacing:.005em;
text-align:center;
display:grid;
text-shadow:0 2px 16px #0009
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-hero>p:before,
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-hero>p:after{
content:"";
width:var(--phi-42);
height:1px;
background:#e4c98f;
opacity:.8
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-hero .back-link,
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-hero .kicker{
color:#fff
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-hero .back-link{
margin-bottom:var(--phi-16)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-hero .kicker{
margin-bottom:var(--phi-10)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-hero h1{
max-width:100%;
color:#fff;
font:400 clamp(34px,3.15vw,46px)/1.05 Georgia,"Times New Roman",serif;
letter-spacing:-.035em;
text-wrap:balance;
text-shadow:0 3px 24px #000b
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-hero h1 em{
color:#fff;
font-family:inherit;
font-style:italic;
font-weight:400
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-story{
grid-column:1;
grid-row:2;
align-self:start;
color:#fff;
padding:var(--phi-26);
gap:var(--phi-16);
font:400 16px/1.618 Georgia,"Times New Roman",serif;
text-shadow:0 2px 14px #0009
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-scope{
background:#0a2119e8;
border:1px solid #ffffff2e;
gap:var(--phi-10);
margin-top:0;
padding:var(--phi-16)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-scope>span{
color:#fff;
font:600 10px/1.2 var(--body);
letter-spacing:.08em
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-scope>strong{
color:#fff;
font:400 20px/1.25 Georgia,"Times New Roman",serif;
letter-spacing:0
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-scope p{
color:#ffffffc7;
font:400 13px/1.5 Georgia,"Times New Roman",serif
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-gallery{
grid-column:2;
grid-row:2;
width:100%;
align-self:start;
background:#03120df0;
border:8px solid #03120d;
gap:var(--phi-10);
margin:0;
padding-bottom:8px;
position:relative
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-stage{
aspect-ratio:1.618/1
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-stage>img,
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-thumbnails img{
object-fit:contain
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-cta{
display:none
}

@media (width<=900px){
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]){
background:linear-gradient(#03120d70,#03120de8 690px,#0a2119 980px),url("/images/projects/london-mixed-use-development/london-mixed-use-development-exterior.webp") 48% 0/auto 100svh no-repeat,var(--green-960)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-page{
grid-template-columns:1fr;
grid-template-rows:auto;
gap:var(--phi-16);
padding:var(--phi-42) var(--phi-16);
background:transparent
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-page:before{
content:none;
display:none
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-hero>div{
grid-column:1;
grid-row:1;
padding:var(--phi-26)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-hero>p{
grid-column:1;
grid-row:3;
padding:var(--phi-26);
font-size:18px
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-hero h1{
font-size:clamp(31px,9vw,42px)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-gallery{
grid-column:1;
grid-row:2;
border-width:5px
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Mixed-Use Development project photographs"]) .project-detail-story{
grid-column:1;
grid-row:4
}
}


/* London Heating Plant Rooms editorial project composition — golden-ratio system (PEP-1012, mirrors the Notting Hill treatment above) */
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]){
background:linear-gradient(90deg,#03120de0 0%,#03120db3 43%,#03120d66 72%,#03120d75 100%),linear-gradient(#03120d2e,#03120d75),url("/images/heating/plant-room-installation-chiswick-london-completed-panorama.webp") 50% 48%/cover no-repeat,var(--green-960)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-page{
--phi-10:10px;
--phi-16:16px;
--phi-26:26px;
--phi-42:42px;
--phi-68:68px;
--phi-max:1440px;
width:100%;
max-width:var(--phi-max);
grid-template-columns:minmax(0,.382fr) minmax(0,.618fr);
grid-template-rows:auto auto;
gap:var(--phi-16) var(--phi-26);
align-items:start;
margin:0 auto;
padding:var(--phi-68) var(--phi-42);
display:grid;
position:relative;
isolation:isolate;
background:transparent
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-page:before{
content:none;
display:none
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-hero,
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-grid{
display:contents
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-hero>div,
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-hero>p,
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-story{
width:100%;
background:#03120dcc;
border:1px solid #ffffff38;
backdrop-filter:blur(1.5px)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-hero>div{
grid-column:2;
grid-row:1;
align-self:stretch;
padding:var(--phi-26) var(--phi-42)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-hero>p{
grid-column:1;
grid-row:1;
align-self:stretch;
min-height:100%;
color:#e4c98f;
background:linear-gradient(135deg,#03120de8,#123126dc);
border-color:#e4c98f70;
place-content:center;
justify-items:center;
gap:var(--phi-16);
padding:var(--phi-42);
font:400 20px/1.5 Georgia,"Times New Roman",serif;
letter-spacing:.005em;
text-align:center;
display:grid;
text-shadow:0 2px 16px #0009
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-hero>p:before,
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-hero>p:after{
content:"";
width:var(--phi-42);
height:1px;
background:#e4c98f;
opacity:.8
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-hero .back-link,
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-hero .kicker{
color:#fff
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-hero .back-link{
margin-bottom:var(--phi-16)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-hero .kicker{
margin-bottom:var(--phi-10)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-hero h1{
max-width:100%;
color:#fff;
font:400 clamp(34px,3.15vw,46px)/1.05 Georgia,"Times New Roman",serif;
letter-spacing:-.035em;
text-wrap:balance;
text-shadow:0 3px 24px #000b
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-hero h1 em{
color:#fff;
font-family:inherit;
font-style:italic;
font-weight:400
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-story{
grid-column:1;
grid-row:2;
align-self:start;
color:#fff;
padding:var(--phi-26);
gap:var(--phi-16);
font:400 16px/1.618 Georgia,"Times New Roman",serif;
text-shadow:0 2px 14px #0009
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-scope{
background:#0a2119e8;
border:1px solid #ffffff2e;
gap:var(--phi-10);
margin-top:0;
padding:var(--phi-16)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-scope>span{
color:#fff;
font:600 10px/1.2 var(--body);
letter-spacing:.08em
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-scope>strong{
color:#fff;
font:400 20px/1.25 Georgia,"Times New Roman",serif;
letter-spacing:0
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-scope p{
color:#ffffffc7;
font:400 13px/1.5 Georgia,"Times New Roman",serif
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-gallery{
grid-column:2;
grid-row:2;
width:100%;
align-self:start;
background:#03120df0;
border:8px solid #03120d;
gap:var(--phi-10);
margin:0;
padding-bottom:8px;
position:relative
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-stage{
aspect-ratio:1.618/1
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-stage>img,
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-thumbnails img{
object-fit:contain
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-cta{
display:none
}

@media (width<=900px){
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]){
background:linear-gradient(#03120d70,#03120de8 690px,#0a2119 980px),url("/images/heating/plant-room-installation-chiswick-london-completed-panorama.webp") 48% 0/auto 100svh no-repeat,var(--green-960)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-page{
grid-template-columns:1fr;
grid-template-rows:auto;
gap:var(--phi-16);
padding:var(--phi-42) var(--phi-16);
background:transparent
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-page:before{
content:none;
display:none
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-hero>div{
grid-column:1;
grid-row:1;
padding:var(--phi-26)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-hero>p{
grid-column:1;
grid-row:3;
padding:var(--phi-26);
font-size:18px
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-hero h1{
font-size:clamp(31px,9vw,42px)
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-gallery{
grid-column:1;
grid-row:2;
border-width:5px
}
.project-detail-frame:has(.project-detail-gallery[aria-label="London Heating Plant Rooms project photographs"]) .project-detail-story{
grid-column:1;
grid-row:4
}
}