<section data-animate id="what-we-do" class="relative overflow-hidden bg-background py-24 lg:py-32">
    <div aria-hidden="true" class="pointer-events-none absolute -right-24 top-0 h-full w-64 -skew-x-[18deg] bg-secondary/[0.03]"></div>
    <div aria-hidden="true" class="pointer-events-none absolute -left-20 bottom-0 h-1/2 w-48 -skew-x-[18deg] bg-primary/[0.04]"></div>

    <div class="relative mx-auto max-w-7xl px-6">
        <div class="flex flex-col items-start justify-between gap-8 lg:flex-row lg:items-end">
            <div class="max-w-2xl">
                <p class="ani-down mb-5 flex items-center gap-4 font-display text-lg font-medium text-primary" style="animation-delay: 0.1s">
                    <span class="h-0.5 w-8 bg-primary"></span>
                    What We Do
                </p>
                <h2 class="font-display text-[34px] leading-[1.15] text-secondary sm:text-[44px] lg:text-[50px]">
                    <?php $__currentLoopData = explode(' ', 'End-to-End HSE Solutions, From Strategy to the Worksite'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $wi => $word): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <span class="mr-2.5 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>
            </div>
            <a href="#" class="btn-slide ani-up h-14 shrink-0 bg-primary px-8 text-sm text-primary-foreground hover:bg-secondary hover:text-secondary-foreground" style="animation-delay: 0.5s">
                <span class="btn-label">
                    <span class="text-one">Full Service Catalogue</span>
                    <span class="text-two">Full Service Catalogue</span>
                </span>
                <?php echo $__env->make('partials.arrow-icon', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
            </a>
        </div>

        <div class="ani-up mt-10 grid gap-6 border-t border-border pt-10 lg:grid-cols-2 lg:gap-16" style="animation-delay: 0.4s">
            <p class="font-display text-[18px] font-semibold leading-relaxed text-secondary lg:text-[20px]">
                We don't just write policies. We build, audit, coach, and embed HSE systems
                that hold up under real operational pressure — onshore, offshore, and on the rig floor.
            </p>
            <p class="text-sm leading-relaxed text-muted-foreground">
                HSE Horizon partners with organisations at every stage of HSE maturity — from companies building their first safety management system to established operators preparing for ISO recertification, process safety assurance, or a major incident investigation.
            </p>
        </div>

        <div class="mt-14 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            <?php $__currentLoopData = config('site.services'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $svc): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <article class="group relative overflow-hidden border border-border bg-background p-6 transition-all duration-300 hover:border-primary hover:bg-primary ani-up" style="animation-delay: <?php echo e(0.5 + $i * 0.07); ?>s">
                    <div class="mb-5 flex items-center justify-between">
                        <span class="font-display text-[11px] font-bold uppercase tracking-[0.18em] text-primary transition-colors duration-300 group-hover:text-primary-foreground/70"><?php echo e($svc['no']); ?></span>
                        <div class="flex size-10 items-center justify-center bg-primary/15 text-primary transition-all duration-300 group-hover:bg-primary-foreground/15 group-hover:text-primary-foreground">
                            <?php echo $__env->make('partials.icon', ['name' => $svc['icon'], 'class' => 'size-5'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                        </div>
                    </div>
                    <h3 class="font-display text-[17px] font-bold leading-snug text-secondary transition-colors duration-300 group-hover:text-primary-foreground"><?php echo e($svc['title']); ?></h3>
                    <p class="mt-3 text-sm leading-relaxed text-muted-foreground transition-colors duration-300 group-hover:text-primary-foreground/85"><?php echo e($svc['desc']); ?></p>
                    <div class="mt-5 h-px w-8 bg-primary transition-all duration-500 group-hover:w-full group-hover:bg-primary-foreground/40"></div>
                </article>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>
<?php /**PATH E:\projects-octa\hse-horizon\resources\views\partials\home\what-we-build.blade.php ENDPATH**/ ?>