<?php $__env->startSection('content'); ?>
<div class="min-h-screen bg-background">
    <?php echo $__env->make('partials.navbar', ['variant' => 'dark'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

    <main>
        
        <div class="relative overflow-hidden bg-secondary pt-[140px] pb-20">
            <div class="absolute inset-0">
                <img src="<?php echo e(asset('images/about-team.jpg')); ?>" alt="" aria-hidden="true" class="size-full object-cover object-center">
                <div class="absolute inset-0 bg-secondary/85"></div>
            </div>

            <div class="relative mx-auto max-w-7xl px-6">
                <p class="mb-4 flex items-center gap-4 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary">
                    <span class="h-0.5 w-8 bg-primary"></span>
                    About HSE Horizon
                </p>
                <h1 class="max-w-3xl font-display text-[38px] leading-[1.1] text-secondary-foreground sm:text-[52px] lg:text-[60px]">
                    A Team That Has Worked the Rig Floor, Not Just the Boardroom.
                </h1>
                <p class="mt-6 max-w-2xl text-sm leading-relaxed text-white/55">
                    HSE Horizon was founded on a simple belief: safety advice only works when it comes
                    from people who understand real operations — onshore and offshore.
                </p>

                <div class="mt-12 flex flex-wrap gap-8">
                    <?php $__currentLoopData = config('about.stats'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $stat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="flex flex-col gap-1">
                            <span class="font-display text-[36px] font-extrabold leading-none text-primary"><?php echo e($stat['value']); ?></span>
                            <span class="font-display text-[11px] font-bold uppercase tracking-[0.14em] text-white/50"><?php echo e($stat['label']); ?></span>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
        </div>

        <div class="h-1.5 w-full bg-primary"></div>

        
        <section data-animate class="overflow-hidden">
            <div class="grid lg:min-h-[580px] lg:grid-cols-[45%_55%]">
                <div class="ani-reveal relative h-[340px] overflow-hidden lg:h-auto" style="animation-delay: 0.05s">
                    <img src="<?php echo e(asset('images/about-main.jpg')); ?>" alt="HSE Horizon consultants at work on an industrial site" class="size-full object-cover" loading="lazy">
                    <div class="absolute inset-0 bg-secondary/30"></div>
                    <div class="absolute bottom-0 left-0 top-0 w-1.5 bg-primary"></div>
                    <div class="absolute bottom-8 right-8 bg-primary px-6 py-5 text-center">
                        <p class="font-display text-[36px] font-extrabold leading-none text-primary-foreground">25+</p>
                        <p class="mt-1 font-display text-[11px] font-bold uppercase tracking-[0.14em] text-primary-foreground/80">Years Experience</p>
                    </div>
                </div>

                <div class="flex flex-col justify-center bg-background px-8 py-16 lg:px-16 lg:py-20">
                    <p class="ani-down mb-5 flex items-center gap-4 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary" style="animation-delay: 0.15s">
                        <span class="h-0.5 w-8 bg-primary"></span>
                        Who We Are
                    </p>

                    <h2 class="font-display text-[28px] leading-[1.2] text-secondary sm:text-[34px] lg:text-[40px]">
                        <?php $__currentLoopData = explode(' ', 'Built by Practitioners, Not Theorists'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $wi => $word): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <span class="mr-2 inline-flex overflow-hidden">
                                <span class="word-up" style="animation-delay: <?php echo e(0.2 + $wi * 0.05); ?>s"><?php echo e($word); ?></span>
                            </span>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </h2>

                    <p class="ani-up mt-6 text-sm leading-relaxed text-muted-foreground" style="animation-delay: 0.4s">
                        HSE Horizon is a Health, Safety & Environment consultancy built by practitioners — not theorists. Our team brings direct field experience from drilling, production, well service, and marine operations, construction sites, industrial plants, and corporate HSE leadership roles.
                    </p>
                    <p class="ani-up mt-4 text-sm leading-relaxed text-muted-foreground" style="animation-delay: 0.5s">
                        We understand the gap between a policy that looks good in an audit binder and a procedure that actually gets followed under time pressure, at height, in confined spaces, or on a moving rig.
                    </p>

                    <a href="<?php echo e(route('contact')); ?>" class="btn-slide ani-up mt-8 inline-flex h-12 w-fit bg-primary px-8 text-sm text-primary-foreground hover:bg-secondary" style="animation-delay: 0.6s">
                        <span class="btn-label">
                            <span class="text-one">Talk to Our Team</span>
                            <span class="text-two">Talk to Our Team</span>
                        </span>
                        <?php echo $__env->make('partials.arrow-icon', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                    </a>
                </div>
            </div>
        </section>

        
        <section data-animate class="bg-secondary py-20">
            <div class="mx-auto max-w-7xl px-6">
                <div class="grid gap-0 lg:grid-cols-2">
                    <div class="ani-up border border-white/10 p-10 lg:p-14" style="animation-delay: 0.1s">
                        <p class="mb-5 flex items-center gap-3 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary">
                            <span class="h-0.5 w-6 bg-primary"></span>
                            Our Mission
                        </p>
                        <h3 class="font-display text-[22px] leading-[1.3] text-secondary-foreground lg:text-[26px]">
                            To make world-class HSE practice accessible and achievable for operators and contractors of every size.
                        </h3>
                        <p class="mt-5 text-sm leading-relaxed text-white/55">
                            Protecting workers, safeguarding the environment, and giving our clients the confidence to bid for, win, and deliver high-risk projects safely — onshore and offshore.
                        </p>
                    </div>

                    <div class="ani-up border border-white/10 border-l-0 bg-white/[0.03] p-10 lg:p-14" style="animation-delay: 0.2s">
                        <p class="mb-5 flex items-center gap-3 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary">
                            <span class="h-0.5 w-6 bg-primary"></span>
                            Our Vision
                        </p>
                        <h3 class="font-display text-[22px] leading-[1.3] text-secondary-foreground lg:text-[26px]">
                            To be the region's most trusted HSE partner — recognised for measurable results, not report volume.
                        </h3>
                        <p class="mt-5 text-sm leading-relaxed text-white/55">
                            Recognised not for the volume of reports we produce, but for the measurable reduction in incidents, the strength of the safety cultures we help build, and the certifications our clients earn and keep.
                        </p>
                    </div>
                </div>

                <div class="ani-reveal relative mt-0 h-[260px] overflow-hidden" style="animation-delay: 0.3s">
                    <img src="<?php echo e(asset('images/about-mission.jpg')); ?>" alt="HSE team in a strategy planning session" class="size-full object-cover object-center" loading="lazy">
                    <div class="absolute inset-0 bg-secondary/60"></div>
                    <div class="absolute inset-0 flex items-center justify-center px-6 text-center">
                        <blockquote class="max-w-2xl">
                            <p class="font-display text-[18px] font-bold italic leading-relaxed text-secondary-foreground sm:text-[22px]">
                                "Safety advice only works when it comes from people who understand real operations — onshore and offshore."
                            </p>
                            <footer class="mt-4 font-display text-[11px] font-bold uppercase tracking-[0.18em] text-primary">
                                — HSE Horizon Founding Principle
                            </footer>
                        </blockquote>
                    </div>
                </div>
            </div>
        </section>

        
        <section data-animate class="bg-background py-24">
            <div class="mx-auto max-w-7xl px-6">
                <div class="mb-14 text-center">
                    <p class="ani-down mb-4 flex items-center justify-center gap-3 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary" style="animation-delay: 0.1s">
                        <span class="h-0.5 w-6 bg-primary"></span>
                        Our Values
                        <span class="h-0.5 w-6 bg-primary"></span>
                    </p>
                    <h2 class="ani-up font-display text-[30px] leading-[1.2] text-secondary sm:text-[38px]" style="animation-delay: 0.2s">
                        What We Stand For
                    </h2>
                </div>

                <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
                    <?php $__currentLoopData = config('about.values'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $value): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="group ani-up flex flex-col gap-4 border border-border p-7 transition-all duration-300 hover:border-primary hover:bg-primary" style="animation-delay: <?php echo e(0.25 + $i * 0.08); ?>s">
                            <div class="flex size-12 items-center justify-center bg-primary/10 text-primary transition-all duration-300 group-hover:bg-primary-foreground/15 group-hover:text-primary-foreground">
                                <?php echo $__env->make('partials.icon', ['name' => $value['icon'], 'class' => 'size-6'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                            </div>
                            <h3 class="font-display text-[16px] font-bold leading-snug text-secondary transition-colors duration-300 group-hover:text-primary-foreground">
                                <?php echo e($value['title']); ?>

                            </h3>
                            <p class="text-sm leading-relaxed text-muted-foreground transition-colors duration-300 group-hover:text-primary-foreground/85">
                                <?php echo e($value['body']); ?>

                            </p>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
        </section>

        
        <section data-animate class="bg-secondary py-24">
            <div class="mx-auto max-w-7xl px-6">
                <div class="grid gap-16 lg:grid-cols-2 lg:gap-24">
                    <div>
                        <p class="ani-down mb-5 flex items-center gap-3 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary" style="animation-delay: 0.1s">
                            <span class="h-0.5 w-6 bg-primary"></span>
                            Our Expertise
                        </p>
                        <h2 class="ani-up mb-8 font-display text-[26px] leading-[1.2] text-secondary-foreground sm:text-[32px]" style="animation-delay: 0.2s">
                            Technical Depth Across Every Discipline
                        </h2>
                        <ul class="flex flex-col gap-3">
                            <?php $__currentLoopData = config('about.expertise'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <li class="ani-up flex items-start gap-3" style="animation-delay: <?php echo e(0.25 + $i * 0.05); ?>s">
                                    <?php echo $__env->make('partials.icon', ['name' => 'check-circle', 'class' => 'mt-0.5 size-4 shrink-0 text-primary'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                                    <span class="text-sm leading-relaxed text-white/65"><?php echo e($item); ?></span>
                                </li>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </ul>
                    </div>

                    <div>
                        <p class="ani-down mb-5 flex items-center gap-3 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary" style="animation-delay: 0.15s">
                            <span class="h-0.5 w-6 bg-primary"></span>
                            Credentials
                        </p>
                        <h2 class="ani-up mb-8 font-display text-[26px] leading-[1.2] text-secondary-foreground sm:text-[32px]" style="animation-delay: 0.25s">
                            Qualified, Certified & Field-Tested
                        </h2>
                        <div class="flex flex-wrap gap-2.5">
                            <?php $__currentLoopData = config('about.credentials'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $cred): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <span class="ani-up border border-white/10 px-4 py-2 font-display text-[11px] font-bold uppercase tracking-[0.1em] text-white/55 transition-colors duration-300 hover:border-primary hover:text-primary" style="animation-delay: <?php echo e(0.3 + $i * 0.04); ?>s">
                                    <?php echo e($cred); ?>

                                </span>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>

                        <div class="ani-reveal relative mt-10 h-[220px] overflow-hidden" style="animation-delay: 0.5s">
                            <img src="<?php echo e(asset('images/about-team.jpg')); ?>" alt="HSE Horizon team members collaborating" class="size-full object-cover" loading="lazy">
                            <div class="absolute inset-0 bg-secondary/40"></div>
                            <div class="absolute bottom-0 left-0 right-0 flex items-center justify-between bg-primary/90 px-6 py-4">
                                <div>
                                    <p class="font-display text-[13px] font-bold uppercase tracking-[0.14em] text-primary-foreground">Meet the Team</p>
                                    <p class="text-[12px] text-primary-foreground/70">Experienced HSE professionals, ready to help</p>
                                </div>
                                <a href="<?php echo e(route('contact')); ?>" class="flex items-center gap-2 font-display text-[12px] font-bold uppercase tracking-[0.12em] text-primary-foreground hover:opacity-80">
                                    Get in Touch <?php echo $__env->make('partials.arrow-icon', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        
        <section data-animate class="bg-background py-24">
            <div class="mx-auto max-w-3xl px-6 text-center">
                <p class="ani-down mb-4 flex items-center justify-center gap-3 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary" style="animation-delay: 0.1s">
                    <span class="h-0.5 w-6 bg-primary"></span>
                    Work With Us
                    <span class="h-0.5 w-6 bg-primary"></span>
                </p>
                <h2 class="ani-up font-display text-[28px] leading-[1.2] text-secondary sm:text-[36px]" style="animation-delay: 0.2s">
                    Ready to Build a Stronger Safety Culture?
                </h2>
                <p class="ani-up mt-5 text-sm leading-relaxed text-muted-foreground" style="animation-delay: 0.3s">
                    Whether you need a single audit, ISO certification support, or a complete HSE management
                    system built from scratch — our team is ready with a tailored approach.
                </p>
                <div class="ani-up mt-8 flex flex-wrap items-center justify-center gap-4" style="animation-delay: 0.4s">
                    <a href="<?php echo e(route('contact')); ?>" class="btn-slide h-14 bg-primary px-10 text-sm text-primary-foreground hover:bg-secondary">
                        <span class="btn-label">
                            <span class="text-one">Talk to an HSE Specialist</span>
                            <span class="text-two">Talk to an HSE Specialist</span>
                        </span>
                        <?php echo $__env->make('partials.arrow-icon', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                    </a>
                    <a href="<?php echo e(route('why')); ?>" class="btn-slide h-14 border-2 border-secondary bg-transparent px-10 text-sm text-secondary hover:bg-secondary hover:text-secondary-foreground">
                        <span class="btn-label">
                            <span class="text-one">Why HSE Horizon</span>
                            <span class="text-two">Why HSE Horizon</span>
                        </span>
                        <?php echo $__env->make('partials.arrow-icon', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                    </a>
                </div>
            </div>
        </section>
    </main>

    <?php echo $__env->make('partials.footer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
</div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH E:\projects-octa\hse-horizon\resources\views\pages\about.blade.php ENDPATH**/ ?>