.techesteel-about-page{background:#fff;color:var(--text)}
.section-space{padding:100px 0}.section-soft{background:#f4f9fe}
.about-hero{padding:110px 0 90px;background:radial-gradient(circle at 85% 5%,rgba(33,151,255,.18),transparent 35%),linear-gradient(135deg,#eef8ff,#fff)}
.about-hero-inner{max-width:980px}.about-kicker,.section-kicker{display:inline-block;color:var(--blue2);font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.13em}
.about-hero h1{max-width:900px;margin:18px 0 22px;font-size:clamp(48px,6vw,80px);line-height:1.03;letter-spacing:-.05em}.about-hero p{max-width:720px;margin:0;color:var(--muted);font-size:20px;line-height:1.7}
.about-intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.95fr);gap:70px;align-items:center}.about-intro-copy h2,.section-heading h2{margin:16px 0 20px;font-size:clamp(38px,5vw,60px);line-height:1.1;letter-spacing:-.04em}.about-intro-copy>p,.section-heading p{color:var(--muted);font-size:17px;line-height:1.8}.about-intro-image{overflow:hidden;border-radius:24px;box-shadow:0 24px 65px rgba(20,83,137,.16)}.about-intro-image img{display:block;width:100%;height:520px;object-fit:cover}
.about-feature-list{display:grid;gap:15px;margin-top:30px}.about-feature-list div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 18px;border:1px solid var(--border);border-radius:12px;background:#fff}.about-feature-list strong{color:var(--blue2)}.about-feature-list span{color:var(--muted)}
.section-heading{max-width:760px;margin-bottom:46px}.section-heading.centered{margin-left:auto;margin-right:auto;text-align:center}.team-group-title{font-size:32px;font-weight:600;color:#10283d;margin:0 0 28px;}.team-group-title.leadership-title{width:100%;text-align:center;margin:48px 0 32px;}.team-grid{display:grid;gap:28px}.founders-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.leadership-grid{display:grid;grid-template-columns:minmax(420px,700px);justify-content:center;gap:32px;}.team-card{display:grid;grid-template-columns:190px 1fr;overflow:hidden;border:1px solid var(--border);border-radius:20px;background:#fff;box-shadow:0 15px 38px rgba(25,88,145,.08)}.team-card>img{width:100%;height:100%;min-height:270px;object-fit:cover}.team-card-body{padding:30px}.team-card h4{margin:0;font-size:26px}.team-card span{display:block;margin:6px 0 18px;color:var(--blue2);font-weight:700}.team-card p{margin:0;color:var(--muted);line-height:1.7}.team-card.compact{grid-template-columns:120px 1fr;align-items:center}.team-initial{display:grid;place-items:center;width:82px;height:82px;margin:auto;border-radius:50%;background:linear-gradient(135deg,var(--blue2),#6bbcff);color:#fff;font-size:24px;font-weight:800}
.momentum-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.metric-card{padding:28px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:0 13px 34px rgba(25,88,145,.07)}.metric-card h3{margin:0 0 5px;font-size:22px}.metric-unit{color:var(--muted);font-size:13px}.metric-row{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;margin-top:22px;font-size:13px}.metric-track{height:30px;overflow:hidden;border-radius:8px;background:#eaf1f7}.metric-fill{width:0;height:100%;display:flex;align-items:center;justify-content:flex-end;padding-right:9px;border-radius:8px;background:linear-gradient(90deg,#0c7bdc,#52b5ff);transition:width 1.25s cubic-bezier(.2,.8,.2,1)}.metric-fill.purple{background:linear-gradient(90deg,#6652d9,#a28fff)}.metric-fill.teal{background:linear-gradient(90deg,#0d9f98,#61d2cb)}.metric-fill.final{box-shadow:inset 0 0 0 2px #ff9d2e}.metric-fill strong{color:#fff;font-size:13px}
.drivers-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}.driver-card{padding:25px 20px;border:1px solid var(--border);border-radius:17px;background:#fff;box-shadow:0 12px 32px rgba(25,88,145,.07)}.driver-card img{width:54px;height:54px;object-fit:contain}.driver-card h3{margin:18px 0 12px;font-size:19px}.driver-card strong{display:block;color:var(--blue2);font-size:28px}.driver-card span{display:block;min-height:38px;margin:5px 0 15px;color:#526a7f;font-size:12px;font-weight:700}.driver-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}.data-note{margin:24px 0 0;color:var(--muted);font-size:12px;text-align:center}
.about-cta-box{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:46px 52px;border-radius:24px;background:#071f34;color:#fff}.about-cta-box h2{max-width:720px;margin:13px 0 0;font-size:clamp(34px,4vw,52px);line-height:1.12}.about-cta-box .section-kicker{color:#75c6ff}.about-cta-box .primary-btn{flex-shrink:0}
.reveal-on-scroll{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}.reveal-on-scroll.is-visible{opacity:1;transform:none}
@media(max-width:1100px){.about-intro-grid{grid-template-columns:1fr;gap:45px}.about-intro-image img{height:480px}.momentum-grid{grid-template-columns:1fr}.drivers-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.section-space{padding:75px 0}.about-hero{padding:85px 0 70px}.founders-grid,.leadership-grid{grid-template-columns:1fr}.team-card{grid-template-columns:150px 1fr}.drivers-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-cta-box{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.about-hero h1{font-size:45px}.about-intro-image img{height:330px}.about-feature-list div{grid-template-columns:1fr;gap:5px}.team-card,.team-card.compact{grid-template-columns:1fr}.team-card>img{height:320px}.team-initial{margin-top:28px}.team-card-body{padding:24px}.drivers-grid{grid-template-columns:1fr}.about-cta-box{padding:34px 26px}.metric-row{grid-template-columns:64px 1fr}}
.vision-section{background:#fff}.vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.vision-card{min-height:245px;padding:34px;background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 14px 36px rgba(25,88,145,.07);transition:.3s ease}.vision-label{display:inline-block;color:#d39135;font:700 12px var(--mono);letter-spacing:.13em;text-transform:uppercase}.vision-card h3{margin:24px 0 0;font-size:30px;line-height:1.35;max-width:560px}.vision-card:hover{transform:translateY(-6px);color:#fff;border-color:transparent;background:linear-gradient(135deg,#1887dc,#075eb9);box-shadow:0 28px 60px rgba(23,119,210,.25)}.vision-card:hover .vision-label{color:#fff}@media(max-width:1000px){.problem-grid{grid-template-columns:repeat(2,1fr)}.route-comparison,.msme-layout{grid-template-columns:1fr}.comparison-row{grid-template-columns:1fr 1.35fr 1.45fr}}@media(max-width:700px){.why-hero{min-height:auto}.why-hero-inner{padding-top:75px;padding-bottom:75px}.why-hero h1{font-size:50px}.why-hero-lead{font-size:18px}.why-section{padding:75px 0}.problem-grid,.vision-grid,.msme-stats{grid-template-columns:1fr}.route-panel{padding:22px}.comparison-card{overflow-x:auto}.comparison-row{min-width:820px}.vision-card h3{font-size:24px}}


/* ==========================================================
   About Us hero — same structure as Why TechESteel hero
========================================================== */

.about-hero{
    position:relative;
    min-height:0;
    overflow:hidden;
    display:block;
    padding:105px 0 115px;
    background:
        radial-gradient(circle at 78% 20%,rgba(47,139,230,.18),transparent 38%),
        linear-gradient(135deg,#f7fbff 0%,#eef7ff 55%,#f9fcff 100%);
    border-bottom:1px solid var(--border);
}

.about-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(47,139,230,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(47,139,230,.07) 1px,transparent 1px);
    background-size:72px 72px;
    opacity:.42;
    pointer-events:none;
}

.about-hero-inner{
    position:relative;
    z-index:2;
    width:100%;
    max-width:980px;
    margin:0;
	padding-left:40px;
}

.about-kicker{
    display:inline-block;
    margin-bottom:22px;
    color:var(--blue2);
    font:700 13px var(--mono);
    letter-spacing:.18em;
    text-transform:uppercase;
}

.about-hero h1{
    max-width:840px;
    margin:0;
    color:var(--text);
    font-family:var(--display);
    font-size:clamp(50px,6vw,78px);
    font-weight:400;
    line-height:1.08;
    letter-spacing:-.05em;
}

.about-hero p{
    max-width:720px;
    margin:28px 0 0;
    color:var(--muted);
    font-size:19px;
    line-height:1.7;
}

@media(max-width:700px){
    .about-hero{
        padding:78px 0 86px;
    }

    .about-hero h1{
        font-size:46px;
    }

    .about-hero p{
        font-size:17px;
    }
}

/* ==========================================================
   FINAL ABOUT HERO — MATCH WHY TECHESTEEL HERO
========================================================== */

.about-hero{
    position:relative;
    min-height:0;
    overflow:hidden;
    display:block;
    padding:105px 0 115px;
    background:
        radial-gradient(circle at 78% 20%,rgba(47,139,230,.18),transparent 38%),
        linear-gradient(135deg,#f7fbff 0%,#eef7ff 55%,#f9fcff 100%);
    border-bottom:1px solid var(--border);
}

.about-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(47,139,230,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(47,139,230,.07) 1px,transparent 1px);
    background-size:72px 72px;
    opacity:.42;
    pointer-events:none;
}

.about-hero .container{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1320px;
    margin:0 auto;
	margin-left:20px;
}

.about-hero-inner{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
}

.about-kicker{
    display:inline-block;
    margin-bottom:22px;
    color:var(--blue2);
    font:700 13px var(--mono);
    letter-spacing:.18em;
    text-transform:uppercase;
}

.about-hero h1{
    width:100%;
    max-width:1120px;
    margin:0;
    color:var(--text);
    font-family:var(--display);
    font-size:clamp(58px,6vw,82px);
    font-weight:400;
    line-height:1.05;
    letter-spacing:-.05em;
    text-align:left;
}

.about-hero p{
    width:100%;
    max-width:900px;
    margin:28px 0 0;
    color:var(--muted);
    font-size:20px;
    line-height:1.7;
    text-align:left;
}

@media(max-width:991px){
    .about-hero h1,
    .about-hero p{
        max-width:100%;
    }
}

@media(max-width:700px){
    .about-hero{
        padding:78px 0 86px;
    }

    .about-hero h1{
        font-size:46px;
    }

    .about-hero p{
        font-size:17px;
    }
}