/* About page styles (builds on contact.css + services.css) */

/* story: text + stacked photos */
#cp .story{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:stretch}
#cp .story .txt{background:#c69419;border-radius:clamp(22px,3vw,28px);padding:clamp(28px,5vw,60px);display:flex;flex-direction:column;gap:20px;justify-content:center}
#cp .story .txt .tag{align-self:flex-start}
#cp .story h2{font-size:clamp(34px,5.2vw,62px)}
#cp .story p{margin:0;font-size:clamp(14px,1.4vw,16px);line-height:1.7;max-width:36em}
#cp .story .pics{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:20px;min-height:clamp(420px,46vw,620px)}
#cp .story .pics figure{margin:0;position:relative;border-radius:clamp(18px,2.4vw,24px);overflow:hidden;background:#1b1d17}
#cp .story .pics figure:first-child{grid-row:span 2}
#cp .story .pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
#cp .story .pics figure:hover img{transform:scale(1.06)}
@media(max-width:900px){
  #cp .story{grid-template-columns:1fr}
  #cp .story .pics{min-height:0;grid-template-rows:200px 200px}
}

/* values */
#cp .values{display:flex;flex-direction:column;gap:28px}
#cp .values>div:first-child{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px}
#cp .values>div:first-child>div{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
#cp .values h2{font-size:clamp(32px,5.5vw,56px);max-width:11em}
#cp .values>div:first-child p{margin:0;max-width:400px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.78)}
#cp .vgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#cp .vgrid li{background:#111;border-radius:22px;padding:28px 24px 30px;display:flex;flex-direction:column;gap:14px;transition:background .3s,transform .3s,color .3s}
#cp .vgrid li:hover{background:#fff;color:#111;transform:translateY(-4px)}
#cp .vgrid .vi{width:56px;height:56px;border-radius:50%;background:#c69419;display:inline-flex;align-items:center;justify-content:center}
#cp .vgrid b{font-family:Tanker,Anton,Oswald,sans-serif;font-weight:400;font-size:24px;text-transform:uppercase;letter-spacing:.01em}
#cp .vgrid p{margin:0;font-size:14px;line-height:1.6;opacity:.8}
@media(max-width:1000px){#cp .vgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){#cp .vgrid{grid-template-columns:1fr}}

/* promise band */
#cp .promise{background:#fff;color:#111;border-radius:clamp(22px,3vw,28px);padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center}
#cp .promise .tag{background:#c69419;color:#fff}
#cp .promise>div:first-child{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
#cp .promise h2{font-size:clamp(32px,5vw,58px)}
#cp .promise blockquote{margin:0;font-size:clamp(17px,2vw,22px);line-height:1.5;color:#333;border-left:4px solid #c69419;padding-left:20px}
#cp .plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
#cp .plist li{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-bottom:1px solid #e3e3dc}
#cp .plist li:first-child{padding-top:0}
#cp .plist li:last-child{border-bottom:0;padding-bottom:0}
#cp .plist span{flex:none;font-family:Tanker,Anton,Oswald,sans-serif;font-size:30px;line-height:1;color:#c69419;min-width:44px}
#cp .plist b{display:block;font-family:Tanker,Anton,Oswald,sans-serif;font-weight:400;font-size:20px;text-transform:uppercase;margin-bottom:4px}
#cp .plist p{margin:0;font-size:14px;line-height:1.6;color:#444}
@media(max-width:900px){#cp .promise{grid-template-columns:1fr}}

/* what we do: link cards to services page */
#cp .wwd{display:flex;flex-direction:column;gap:24px}
#cp .wwd>div:first-child{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
#cp .wwd h2{font-size:clamp(30px,5vw,52px)}
#cp .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#cp .cards a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:clamp(260px,26vw,360px);border-radius:22px;overflow:hidden;padding:22px;background:#1b1d17}
#cp .cards a:hover{text-decoration:none}
#cp .cards img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
#cp .cards a:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,0) 65%);transition:background .4s}
#cp .cards a:hover img{transform:scale(1.07)}
#cp .cards a:hover:after{background:linear-gradient(0deg,rgba(198,148,25,.92),rgba(0,0,0,.05) 75%)}
#cp .cards a>*:not(img){position:relative;z-index:1}
#cp .cards small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
#cp .cards b{font-family:Tanker,Anton,Oswald,sans-serif;font-weight:400;font-size:24px;line-height:1.05;text-transform:uppercase}
#cp .cards .go{position:absolute!important;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:1.5px solid #fff;display:inline-flex;align-items:center;justify-content:center;transition:background .3s,transform .3s}
#cp .cards a:hover .go{background:#fff;transform:rotate(45deg)}
#cp .cards a:hover .go svg{stroke:#111}
@media(max-width:1000px){#cp .cards{grid-template-columns:1fr 1fr}}
@media(max-width:480px){#cp .cards{grid-template-columns:1fr}#cp .cards a{min-height:220px}}
@media(prefers-reduced-motion:reduce){#cp .story .pics figure:hover img,#cp .cards a:hover img{transform:none}}