/* ==========================================================
   ABOUT PAGE — Hezar Mahsool
   Uses the visual language of main-clean.css
   ========================================================== */

.about-hero{
  position:relative;
  min-height:390px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(11,34,56,.96),rgba(11,34,56,.82) 48%,rgba(11,34,56,.55)),
    url("assets/images/about-hero.jpg") center/cover no-repeat;
  color:#fff;
}
.about-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,transparent 55%,rgba(174,149,114,.13));
  pointer-events:none;
}
.about-hero .section{position:relative;z-index:1;width:100%;padding-block:70px;}
.about-hero .eyebrow{color:#d6c2a4;}
.about-hero h1{
  max-width:760px;
  margin:12px 0 18px;
  font-size:clamp(34px,5vw,64px);
  font-weight:500;
  line-height:1.35;
}
.about-hero p{
  max-width:680px;
  margin:0;
  color:#d5dde4;
  font-size:15px;
  line-height:2.2;
}
.about-hero-meta{
  position:absolute;
  left:var(--gutter);
  bottom:30px;
  z-index:2;
  display:flex;
  gap:24px;
  align-items:center;
  color:#b8c4ce;
  font-size:12px;
  letter-spacing:1.2px;
}
.about-hero-meta span+span:before{
  content:"";
  display:inline-block;
  width:24px;
  height:1px;
  background:#c7b292;
  margin:0 12px;
  vertical-align:middle;
}

.about-intro{padding-bottom:clamp(55px,7vw,90px);}
.about-intro-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(35px,7vw,100px);
  align-items:center;
}
.about-intro-copy p,
.about-story p,
.ceo-copy p{
  color:var(--muted);
  font-size:15px;
  line-height:2.25;
  text-align:justify;
  margin:15px 0;
}
.about-intro-copy h2{max-width:700px;}
.about-lead{font-size:18px!important;color:var(--ink)!important;line-height:2.1!important;}
.about-facts{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border:1px solid var(--line);
  background:#fff;
}
.about-fact{padding:28px 26px;border-inline-start:1px solid var(--line);border-top:1px solid var(--line);}
.about-fact:nth-child(-n+2){border-top:0;}
.about-fact:nth-child(odd){border-inline-start:0;}
.about-fact strong{display:block;font-size:30px;font-weight:500;color:var(--navy);line-height:1.2;}
.about-fact span{display:block;margin-top:7px;font-size:13px;color:var(--muted);}

.about-story{background:#eef1f2;border-block:1px solid var(--line);}
.about-story-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(35px,7vw,100px);
  align-items:center;
}
.about-story-art{
  min-height:430px;
  position:relative;
  background:
    linear-gradient(145deg,rgba(11,34,56,.18),rgba(11,34,56,.78)),
    url("assets/images/about-company.jpg") center/cover no-repeat;
  border:1px solid #d0d7dc;
}
.about-story-art:before{
  content:"HEZAR MAHSOOL";
  position:absolute;
  left:24px;
  bottom:20px;
  color:#fff;
  font-size:11px;
  letter-spacing:2px;
}
.about-story-art:after{
  content:"";
  position:absolute;
  top:20px;
  right:20px;
  width:48px;
  height:3px;
  background:var(--metal);
}
.about-story .section-heading{margin-bottom:25px;}

.ceo-section{background:var(--paper);}
.ceo-card{
  display:grid;
  grid-template-columns:270px 1fr;
  gap:clamp(30px,6vw,80px);
  padding:clamp(28px,5vw,55px);
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--blue);
  position:relative;
}
.ceo-card:after{
  content:"";
  position:absolute;
  top:-3px;
  right:0;
  width:70px;
  height:3px;
  background:var(--red);
}
.ceo-portrait {
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    min-height: 0;
    align-self: start;
    overflow: hidden;
    position: relative;
    background: #e7ebed;
    border: 1px solid #d4dade;
}

    .ceo-portrait img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
.ceo-copy blockquote{
  margin:26px 0 0;
  padding:22px 24px;
  border-inline-start:3px solid var(--metal);
  background:#f7f6f2;
  color:var(--ink);
  font-size:17px;
  line-height:2.15;
}
.ceo-signature{margin-top:25px;}
.ceo-signature strong{display:block;font-size:17px;font-weight:600;}
.ceo-signature span{font-size:13px;color:var(--muted);}

.values-section{background:#fff;}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d7dde1;border:1px solid #d7dde1;}
.value-card{background:#fff;padding:32px 28px;min-height:220px;}
.value-number{font-size:13px;color:var(--metal);border-bottom:1px solid #c8cfd4;padding-bottom:9px;display:inline-block;min-width:32px;}
.value-card h3{font-size:19px;margin:24px 0 10px;}
.value-card p{font-size:14px;line-height:2.1;color:var(--muted);margin:0;}
/* =========================================================
   AWARDS & LICENSES
========================================================= */

.awards-section,
.licenses-section {
    position: relative;
    padding: 2px 0;
    background-color: #f4f1e8;
    opacity:0.8;
}

.awards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin-top: 50px;
}

.award-card,
.license-card {
    min-width: 0;
}

.award-image,
.license-image {
    position: relative;
    overflow: hidden;
    background: #f4f3f0;
    border: 1px solid rgba(15, 23, 42, .08);
}

.award-image {
    aspect-ratio: 4 / 5;
}

.license-image {
    aspect-ratio: 4 / 3;
}

    .award-image img,
    .license-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
        padding: 12px;
        transition: transform .6s cubic-bezier(.2,.7,.2,1);
    }

.award-image img {
    background: #f8f7f4;
}

.license-image img {
    background: #f5f5f3;
}

.award-overlay,
.license-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 18px;
    background: linear-gradient( to top, rgba(10, 18, 32, .72), rgba(10, 18, 32, 0) 55% );
    opacity: 0;
    transition: opacity .35s ease;
}

    .award-overlay span,
    .license-overlay span {
        color: #fff;
        font-size: 12px;
        letter-spacing: .04em;
    }

.award-card:hover .award-image img,
.license-card:hover .license-image img {
    transform: scale(1.035);
}

.award-card:hover .award-overlay,
.license-card:hover .license-overlay {
    opacity: 1;
}

.award-caption,
.license-caption {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 2px 0;
}

    .award-caption > span,
    .license-caption > span {
        flex: 0 0 auto;
        font-size: 11px;
        letter-spacing: .08em;
        color: #9a7a3a;
    }

    .award-caption h3,
    .license-caption h3 {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        color: #172033;
    }


/* LICENSES */

.license-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 50px;
}

.license-card {
    transition: transform .35s ease;
}

    .license-card:hover {
        transform: translateY(-4px);
    }


/* RESPONSIVE */

@media (max-width: 1100px) {

    .awards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .license-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {

    .awards-section,
    .licenses-section {
        padding: 70px 0;
    }

    .awards-grid,
    .license-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 35px;
    }

    .award-image {
        aspect-ratio: 4 / 5;
    }

    .license-image {
        aspect-ratio: 4 / 3;
    }

    .award-overlay,
    .license-overlay {
        opacity: 1;
    }
}

.about-cta{padding-block:clamp(5px,7vw,5px);}
.about-cta .contact-card{background:#fff;}

@media (max-width:1024px){
  .about-intro-grid,.about-story-grid{grid-template-columns:1fr;}
  .about-story-art{min-height:330px;}
  .ceo-card{grid-template-columns:220px 1fr;}
  .values-grid{grid-template-columns:repeat(2,1fr);}
  .awards-grid{grid-template-columns:repeat(2,1fr);}
  .license-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .about-hero{min-height:350px;}
  .about-hero .section{padding-block:55px;}
  .about-hero h1{font-size:36px;}
  .about-hero-meta{position:relative;left:auto;bottom:auto;margin:10px var(--gutter) 24px;}
  .about-facts{grid-template-columns:1fr;}
  .about-fact:nth-child(2){border-top:1px solid var(--line);}
  .about-fact:nth-child(odd){border-inline-start:0;}
  .about-fact{border-inline-start:0;}
  .about-story-art{min-height:260px;}
  .ceo-card{grid-template-columns:1fr;padding:22px;}
    .ceo-portrait {
        width: 100%;
        max-width: 320px;
        aspect-ratio: 4 / 5;
        min-height: 0;
        height: auto;
        margin-inline: auto;
    }
  .values-grid,.awards-grid,.license-grid{grid-template-columns:1fr;}
  .license-card{grid-template-columns:64px 1fr;}
  .license-icon{width:64px;}
}