/* ==========================================================================
   E S HAJI & CO — corrective stylesheet
   Load AFTER css/style.css and css/responsive.css on every page:
   <link rel="stylesheet" href="css/eshaji-fix.css" />
   Uses existing brand tokens only: green #55be75, dark #262626 / #181818.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FIX 1 — Top bar contrast, HOME PAGE ("home-one" header, dark #2e2e2e/#181818 bar).
   index.html marks the phone/hours/email values as <span class="header-info-value">.
   That class has no colour rule anywhere, so the value inherits body colour
   (#555) and sits on the dark top bar at roughly 1.8:1 contrast.
   The theme's own rule only targets .text-box h3, which the markup no longer uses.
   Scoped to .home-one specifically — see FIX 1b below for why this must NOT
   apply to inner pages.
   -------------------------------------------------------------------------- */
.header-top.home-one .single-header-right-info .text-box .header-info-value,
.header-top.home-one .single-header-right-info .text-box h3 {
    display: block;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: .01em;
    color: #ffffff;          /* 12.6:1 on #2e2e2e */
    margin: 2px 0 0;
}

/* Label above the value: lift off pure brand green so small text stays legible */
.header-top.home-one .single-header-right-info .text-box p {
    color: #8fd9a4;          /* 7.4:1 on #2e2e2e, still reads as brand green */
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: .02em;
}

.header-top.home-one .single-header-right-info .icon-box i {
    color: #55be75;          /* icons pick up the brand instead of flat white */
}

@media (max-width: 991px) {
    .header-top.home-one .single-header-right-info .text-box .header-info-value { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   FIX 1b — Top bar contrast, INNER PAGES ("home-three" header).
   Root cause found 17 Aug: .header-top.home-three has a WHITE background
   (style.css: ".header-top.home-three{background:#fff}") — a completely
   different layout to the homepage's dark bar. FIX 1 above was written only
   against the homepage and, being unscoped, was ALSO applying its white
   text colour here — making the phone/hours/email values invisible
   (white-on-white) on every inner page. This was present in the very first
   13 Aug fix, not introduced later.

   The theme's own default for this variant (.header-top.home-three
   .single-header-right-info h3 { color:#262626 }) is actually correct and
   high-contrast (15:1) on white — it just needed FIX 1 to stop clobbering
   it. The label colour (#888, theme default) fails AA at 3.5:1 on white,
   so that still needs a fix: darkened to a brand-green tone at 5.3:1.
   -------------------------------------------------------------------------- */
.header-top.home-three .single-header-right-info .text-box h3 {
    color: #262626;           /* 15:1 on white — theme default, now unblocked */
}

.header-top.home-three .single-header-right-info .text-box p {
    color: #2f7a46;           /* 5.3:1 on white, still reads as brand green */
}

.header-top.home-three .single-header-right-info .icon-box i {
    color: #55be75;
}

/* --------------------------------------------------------------------------
   FIX 2 — Undefined .auto-container.
   The two newer homepage sections (Steel Fabrication Services / From Your
   Drawing to a Certified Delivery) wrap their content in .auto-container,
   which is not defined in style.css, responsive.css or bootstrap.min.css.
   With no width or padding the text runs edge-to-edge — screenshots 3 and 4.
   Matched to the theme's .container width (1170px).
   -------------------------------------------------------------------------- */
.auto-container {
    width: 100%;
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 1200px) {
    .auto-container { padding-left: 0; padding-right: 0; }
}

/* --------------------------------------------------------------------------
   FIX 3 — "From Your Drawing to a Certified Delivery" step grid.
   Five steps in an auto-fit grid produce a 4 + 1 break at desktop width,
   leaving a stranded card. Flex wrap with a centred final row gives 3 + 2,
   which reads as deliberate. Cards also equalise in height.
   -------------------------------------------------------------------------- */
.esh-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
    margin-top: 24px;
}

.esh-step {
    flex: 0 1 calc(33.333% - 18px);
    min-width: 260px;
    display: flex;
    flex-direction: column;
    background: #f6f8f7;
    border-left: 4px solid #55be75;
    padding: 26px 24px;
    border-radius: 6px;
    transition: box-shadow .3s ease, transform .3s ease;
}

.esh-step:hover {
    box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
    transform: translateY(-3px);
}

.esh-step-no {
    display: block;
    font-family: Poppins, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #55be75;
    letter-spacing: .12em;
}

.esh-step h3 {
    margin: 8px 0 10px;
    font-family: Poppins, sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: #262626;
}

.esh-step p { font-size: 15px; line-height: 1.65; margin: 0; color: #555; }

@media (max-width: 991px) { .esh-step { flex-basis: calc(50% - 13px); } }
@media (max-width: 640px) { .esh-step { flex-basis: 100%; min-width: 0; } }

/* Eyebrow + divider used by both new sections.
   The theme's `.sec-title span` rule forces Playfair Display italic with a
   red-to-orange gradient fill onto ANY span inside .sec-title, which is why
   the FABRICATION / HOW WE WORK eyebrows rendered as red italic serif.
   Higher specificity + explicit resets are needed to win. */
.sec-title span.esh-eyebrow,
.esh-fab-detail .sec-title span.esh-eyebrow,
.esh-how .sec-title span.esh-eyebrow {
    display: inline-block;
    font-family: Poppins, sans-serif;
    font-style: normal;
    letter-spacing: .18em;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: #55be75;
    color: #55be75;
}

.esh-divider { width: 60px; height: 3px; background: #55be75; margin: 12px 0 18px; }

/* The theme only styles `.sec-title h3`; these sections use h2 for correct
   document outline, so the section-title treatment has to be restated. */
.esh-fab-detail .sec-title h2,
.esh-how .sec-title h2 {
    margin: 10px 0 0;
    font-family: Poppins, sans-serif;
    font-size: 32px;
    line-height: 1.3;
    font-weight: 600;
    color: #262626;
}

.esh-fab-detail .sec-title p { color: #555; font-size: 16px; line-height: 1.75; margin-top: 4px; }

.esh-fab-detail h3, .esh-how h3 {
    margin: 30px 0 10px;
    font-family: Poppins, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #262626;
}

.esh-fab-detail p { font-size: 16px; line-height: 1.75; color: #555; }

@media (max-width: 767px) {
    .esh-fab-detail .sec-title h2, .esh-how .sec-title h2 { font-size: 25px; }
}

/* --------------------------------------------------------------------------
   FIX 4 — Homepage about / H1 block.
   The H1 carried an inline font-size:26px override and the two spec panels
   used a #c0392b (red) left border that fights the green brand. Rebuilt on
   brand tokens with a proper type scale, and the pipe-separated spec strings
   become scannable chips.
   -------------------------------------------------------------------------- */
.about-content-modern .about-subtitle {
    display: inline-block;
    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #55be75;
    margin-bottom: 14px;
}

.about-content-modern h1 {
    font-family: Poppins, sans-serif;
    font-size: 30px !important;   /* overrides the inline 26px */
    line-height: 1.28;
    font-weight: 600;
    color: #262626;
    margin: 0 0 6px;
    max-width: 22ch;
}

.about-content-modern h1 .esh-h1-accent {
    display: block;
    font-size: 17px;
    font-weight: 500;
    color: #55be75;
    margin-top: 10px;
    letter-spacing: .01em;
}

.about-content-modern h1::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #55be75;
    margin: 18px 0 22px;
}

.about-content-modern > p { font-size: 15.5px; line-height: 1.75; color: #555; }
.about-content-modern strong { color: #262626; font-weight: 600; }

/* Spec panels — brand green, chip treatment */
.esh-spec {
    background: #f6f8f7;
    border-left: 4px solid #55be75;
    padding: 16px 18px;
    margin: 18px 0;
    border-radius: 6px;
}

.esh-spec-label {
    display: block;
    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #262626;
    margin-bottom: 10px;
}

.esh-spec ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.esh-spec li {
    font-size: 13.5px;
    line-height: 1;
    color: #3d4a42;
    background: #fff;
    border: 1px solid #d9e5dd;
    border-radius: 40px;
    padding: 8px 14px;
    white-space: nowrap;
}

@media (max-width: 1199px) { .about-content-modern h1 { font-size: 26px !important; max-width: none; } }
@media (max-width: 767px)  { .about-content-modern h1 { font-size: 23px !important; } }

/* --------------------------------------------------------------------------
   FIX 5 — FAQ column balance.
   The two-column FAQ is hardcoded as two <ul>s, so pages with an odd or
   lopsided split render one short column and one long one. The item counts
   are rebalanced in the markup; this rule stops the columns from collapsing
   unevenly and keeps both starting at the same baseline.
   -------------------------------------------------------------------------- */
.esh-faq-grid { align-items: start; }
.esh-faq-grid > div { min-width: 0; }
.esh-faq-list { margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   Accessibility floor
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.esh-faq-q:focus-visible {
    outline: 3px solid #55be75;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .esh-step, .esh-step:hover { transition: none; transform: none; }
}


/* --------------------------------------------------------------------------
   FABRICATION SECTION — capability grid
   Was: an H2 followed by four unbroken h3 + paragraph pairs, which read as a
   wall of text at desktop width. The prose carries real technical figures
   (40mm cutting, 50-tonne lifting, SS304/SS316) that were invisible inside
   the sentences. Split into four cards with the figures pulled into a spec
   list, so the section can be scanned as well as read. Body copy unchanged,
   so the keyword coverage is intact.
   -------------------------------------------------------------------------- */

.esh-fab-detail { background: #fff; }

/* The "we don't subcontract" claim — the section's actual differentiator */
.esh-claim {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    background: #262626;
    border-left: 5px solid #55be75;
    padding: 20px 26px;
    border-radius: 6px;
    margin: 6px 0 38px;
}

.esh-claim-mark {
    font-family: Poppins, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #55be75;
    white-space: nowrap;
}

.esh-claim p {
    margin: 0;
    color: #f2f2f2;
    font-size: 16px;
    line-height: 1.6;
}

/* Four capability cards, two up */
.esh-cap-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}

.esh-cap {
    display: flex;
    flex-direction: column;
    background: #f8faf9;
    border: 1px solid #e4ece7;
    border-top: 3px solid #55be75;
    border-radius: 8px;
    padding: 30px 28px 24px;
    transition: box-shadow .3s ease, transform .3s ease;
}

.esh-cap:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
    transform: translateY(-3px);
}

.esh-fab-detail .esh-cap h3 {
    margin: 0 0 12px;
    font-family: Poppins, sans-serif;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
    color: #262626;
}

.esh-fab-detail .esh-cap p {
    margin: 0 0 22px;
    font-size: 15.5px;
    line-height: 1.75;
    color: #555;
    flex: 1 1 auto;
}

/* Spec strip — the figures that were buried in the prose */
.esh-cap-spec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid #e4ece7;
}

.esh-cap-spec > div { min-width: 0; }

.esh-cap-spec dt {
    font-family: Poppins, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8a9a90;
    margin-bottom: 5px;
}

.esh-cap-spec dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    color: #262626;
}

@media (max-width: 880px) {
    .esh-cap-grid { grid-template-columns: 1fr; gap: 20px; }
    .esh-cap { padding: 26px 22px 22px; }
}

@media (max-width: 480px) {
    .esh-claim { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
    .esh-cap-spec { grid-template-columns: 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .esh-cap, .esh-cap:hover { transition: none; transform: none; }
}


/* --------------------------------------------------------------------------
   ABOUT SECTION — media column
   Was: left column 353px tall against a 1052px right column, leaving ~700px
   of empty space. Three causes:
     1. `.img-main{height:48%}` / `.img-second{height:48%}` in style.css do
        nothing — a percentage height needs a parent with a resolved height,
        and .about-images is auto. So both images rendered at intrinsic size
        (353px and 203px) instead of filling the column.
     2. The images were never told to fill the column width.
     3. `.row.align-items-center` vertically centred a short column against a
        tall one, which puts the empty space at both ends.
   Fix: images now scale to the column and sit in a proper composition; the
   stat row moved into this column to give it real content; the column is
   sticky so it stays beside the text on tall screens.
   -------------------------------------------------------------------------- */

.about-row { display: flex; flex-wrap: wrap; align-items: flex-start; }

.about-media { position: sticky; top: 110px; }

.about-images {
    position: relative;
    display: block;
    padding-bottom: 42px;   /* room for the overlapping badge */
    margin: 0;
}

.about-images figure { margin: 0; }

/* The two source photos (about-1-1.webp / about-1-2.webp) have a circular
   crop baked in, with white corners. A rounded-rectangle card fought that —
   the shadow drew a rectangle around a circular photo. Clipping to a true
   circle removes the white corners and lets the shadow follow the subject. */
.about-images .img-main {
    width: 82%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .16);
}

.about-images .img-second {
    position: absolute;
    right: 0;
    bottom: 34px;
    width: 44%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    border: 7px solid #f9fafc;   /* matches section bg, reads as a cut-out */
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}

.about-images img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Badge: the founding year is the headline, the label supports it */
.about-images .since-badge {
    position: absolute;
    left: 2%;
    bottom: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #55be75;
    color: #fff;
    padding: 12px 24px;
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(85, 190, 117, .32);
}

.about-images .since-badge strong {
    font-family: Poppins, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
}

.about-images .since-badge span {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .92;
    margin-top: 4px;
}

/* Stats — 2x2 so they sit under the media without stretching thin */
.about-media .about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-top: 34px;
    background: #e6ebe8;          /* shows through as hairline rules */
    border: 1px solid #e6ebe8;
    border-radius: 10px;
    overflow: hidden;
}

.about-media .stat-box {
    background: #fff;
    padding: 22px 20px;
    text-align: left;
}

.about-media .stat-num {
    font-family: Poppins, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #262626;
}

.about-media .stat-box p {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.35;
    color: #77857d;
}

/* Certification strip — the standards a buyer scans for */
.about-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.about-badges span {
    font-family: Poppins, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    color: #3d4a42;
    background: #fff;
    border: 1px solid #d9e5dd;
    border-radius: 40px;
    padding: 7px 14px;
}

@media (max-width: 991px) {
    .about-media { position: static; margin-bottom: 45px; }
    .about-images .img-main { width: 78%; }
}

@media (max-width: 575px) {
    .about-media .about-stats { grid-template-columns: 1fr 1fr; }
    .about-media .stat-box { padding: 18px 16px; }
    .about-media .stat-num { font-size: 25px; }
    .about-images .since-badge { padding: 10px 18px; }
    .about-images .since-badge strong { font-size: 24px; }
}