/* DTAT gallery V3 — image-led system, content IDs untouched */
:root{--image-overlay:linear-gradient(180deg,rgba(7,29,11,.02) 30%,rgba(7,29,11,.86) 100%)}
/* Three equal business fields: evidence image + copy */
#areas .three{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;border:0!important}
#areas .area{display:flex!important;flex-direction:column!important;justify-content:flex-end!important;min-height:560px!important;padding:32px!important;position:relative!important;overflow:hidden!important;border:0!important;color:#fff!important;isolation:isolate;background:#0c2e12!important}
#areas .area:before{content:"";position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:transform .7s ease,filter .7s ease;filter:saturate(.78) contrast(1.04)}
#areas .area:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,29,11,.02) 18%,rgba(7,29,11,.16) 45%,rgba(7,29,11,.92) 100%)}
#areas .area:nth-child(1):before{background-image:url('/assets/v3/field-interior.webp');background-position:58% center}
#areas .area:nth-child(2):before{background-image:url('/assets/v3/field-spray.webp');background-position:68% center}
#areas .area:nth-child(3):before{background-image:url('/assets/v3/field-landscape.webp');background-position:center}
#areas .area:hover{padding:32px!important;background:#0c2e12!important}
#areas .area:hover:before{transform:scale(1.035);filter:saturate(.9) contrast(1.07)}
#areas .area .field-no{color:#9af093!important;margin:0 0 18px!important;letter-spacing:.12em}
#areas .area h3{color:#fff!important;font-size:clamp(26px,2.25vw,38px)!important;margin:0 0 14px!important;text-shadow:0 2px 18px rgba(0,0,0,.35)}
#areas .area p{color:#e5ece2!important;font-size:13px!important;line-height:1.65!important;margin:0!important;max-width:430px!important;text-shadow:0 1px 12px rgba(0,0,0,.35)}
/* Material library: photography only where the image truth is strong; the rest stays crafted/abstract */
#materials .mat{isolation:isolate;display:flex;flex-direction:column;justify-content:space-between}
#materials .mat:nth-child(2),#materials .mat:nth-child(5){background-size:cover!important;background-position:center!important}
#materials .mat:nth-child(2){background-image:linear-gradient(180deg,rgba(7,29,11,.18),rgba(7,29,11,.84)),url('/assets/v3/material-stone.webp')!important}
#materials .mat:nth-child(5){background-image:linear-gradient(180deg,rgba(7,29,11,.14),rgba(7,29,11,.83)),url('/assets/v3/material-roof.webp')!important}
#materials .mat:nth-child(2):before,#materials .mat:nth-child(5):before{display:none}
#materials .mat h3{text-shadow:0 2px 16px rgba(0,0,0,.26)}
/* Process becomes an image-led technical scene without claiming a DTAT project */
.process{position:relative!important;isolation:isolate;overflow:hidden;background:#254f2a!important;color:#fff!important}
.process:before{content:"";position:absolute;inset:0;z-index:-2;background:url('/assets/v3/process-spray.webp') 70% center/cover no-repeat;filter:saturate(.75) contrast(1.05) brightness(.72)}
.process:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,29,11,.94) 0%,rgba(7,29,11,.78) 42%,rgba(7,29,11,.28) 100%)}
.process .eyebrow{color:#9af093!important}.process .section-head h2,.process .step h3{color:#fff!important}.process .step b{color:#9af093!important}.process .step p{color:#d9e5d8!important}.process .steps{border-color:rgba(255,255,255,.66)!important}.process .step{border-color:rgba(255,255,255,.25)!important}
/* Project direction uses same coherent image set, equal visual weight */
.case:nth-child(1):after{background-image:url('/assets/v3/field-interior.webp')!important;background-position:58% center!important}
.case:nth-child(2):after{background-image:url('/assets/v3/field-spray.webp')!important;background-position:68% center!important}
.case:nth-child(3):after{background-image:url('/assets/v3/field-landscape.webp')!important;background-position:center!important}
/* Compact legal/AI disclosure */
.photo-credit{font-size:10px;line-height:1.6;max-width:1320px}
@media(max-width:900px){
 #areas .three{grid-template-columns:1fr!important}
 #areas .area{min-height:460px!important;padding:28px!important}
 #areas .area:hover{padding:28px!important}
 .process:before{background-position:72% center}
 .process:after{background:linear-gradient(180deg,rgba(7,29,11,.92),rgba(7,29,11,.72))}
}
@media(max-width:580px){
 #areas .area{min-height:430px!important}
 #areas .area:nth-child(1):before{background-position:62% center}
 #areas .area:nth-child(2):before{background-position:70% center}
 #areas .area h3{font-size:30px!important}
 .process:before{background-position:72% center;opacity:.62}
 .case{min-height:430px!important}
}