.about-hero {
  min-height: 520px;
  background:
    linear-gradient(90deg, rgba(19,21,18,.88), rgba(19,21,18,.22)),
    url("https://preprod.4wdmada.com/wp-content/uploads/2025/07/bg-about-us.jpg?id=2979")
      center 52%/cover;
}
.about-intro { padding-top: 90px; padding-bottom: 90px; }
.about-story { display: grid; grid-template-columns: 1.1fr .75fr; align-items: center; gap: clamp(45px,7vw,100px); }
.about-story h2, .award-card h2, .about-cta h2 { font: 800 clamp(2.4rem,5vw,4.5rem)/.95 "Barlow Condensed"; text-transform: uppercase; margin: 10px 0 25px; }
.about-story p { font-size: 1rem; line-height: 1.8; color: var(--muted); }
.about-story figure { margin: 0; position: relative; }
.about-story img { width: 100%; height: 520px; object-fit: cover; border-radius: 4px; box-shadow: 22px 22px 0 var(--brand-brown); }
.about-story .onja-photo { object-position: center 48%; }
.about-story figcaption { margin-top: 30px; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; }
.about-values { padding: 85px 6%; background: var(--ink); color: var(--white); }
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: 1250px; margin: 45px auto 0; }
.value-grid article { border: 1px solid rgba(255,255,255,.14); padding: 38px 32px; transition: transform .3s ease,border-color .3s ease,background .3s ease; }
.value-grid article:hover { transform: translateY(-7px); border-color: var(--brand-brown-soft); background: rgba(137,69,3,.18); }
.value-grid span { color: var(--brand-brown-soft); font: 800 1rem Montserrat; }
.value-grid h3 { font: 800 1.8rem "Barlow Condensed"; text-transform: uppercase; margin: 18px 0 12px; }
.value-grid p { color: #d7d7d7; line-height: 1.7; margin: 0; }
.award-section { padding: 90px 6%; background: var(--paper); }
.award-card { max-width: 1050px; margin: auto; display: grid; grid-template-columns: 300px 1fr; gap: 60px; align-items: center; background: var(--white); padding: 45px; box-shadow: 0 18px 55px rgba(19,21,18,.1); border-top: 4px solid var(--brand-brown); }
.award-card img { width: 100%; object-fit: contain; }
.award-card p { color: var(--muted); line-height: 1.75; }
.award-card a { color: var(--brand-brown); font-weight: 800; text-transform: uppercase; font-size: .8rem; border-bottom: 2px solid currentColor; }
.team-section { padding: 90px 6%; }
.team-lead { max-width: 760px; margin: -10px auto 45px; text-align: center; color: var(--muted); line-height: 1.7; }
.team-grid { max-width: 1250px; margin: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.team-grid article { position: relative; height: 410px; overflow: hidden; background: var(--ink); border-radius: 4px; }
.team-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease,filter .4s ease; }
.team-grid .onja-photo { object-position: center 42%; }
.team-grid article::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.92)); }
.team-grid article:hover img { transform: scale(1.07); filter: saturate(1.08); }
.team-grid div { position:absolute; z-index:2; left:26px; bottom:22px; color:var(--white); }
.team-grid h3 { margin:0; font:800 2rem "Barlow Condensed"; text-transform:uppercase; }
.team-grid p { margin:4px 0 0; color:var(--brand-brown-soft); font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.about-cta { padding: 75px 7%; background: linear-gradient(120deg,var(--brand-brown-dark),var(--brand-brown)); color:var(--white); display:flex; justify-content:space-between; align-items:center; gap:40px; }
.about-cta h2 { max-width:800px; margin-bottom:0; }
.about-cta .eyebrow { color:var(--white); }
.about-cta .btn { background:var(--ink); min-width:220px; }
.about-cta .btn:hover { background:var(--white); color:var(--ink); }
@media (max-width:850px) { .about-story,.award-card { grid-template-columns:1fr; } .about-story img { height:430px; } .value-grid,.team-grid { grid-template-columns:1fr 1fr; } .award-card { gap:25px; } .award-card img { max-width:240px; margin:auto; } .about-cta { flex-direction:column; align-items:flex-start; } }
@media (max-width:560px) { .about-hero { min-height:430px; } .about-intro,.team-section,.award-section { padding-top:65px; padding-bottom:65px; } .value-grid,.team-grid { grid-template-columns:1fr; } .team-grid article { height:390px; } .about-story img { height:380px; box-shadow:12px 12px 0 var(--brand-brown); } .award-card { padding:28px 22px; } }