@extends('layouts.app')
@section('title', 'Civil Engineering — Paytell Company Limited')

@section('content')
<section style="background:var(--blue-900);padding:56px 0 48px;border-bottom:1px solid rgba(255,255,255,0.12);">
  <div class="wrap">
    <p style="font-size:12.5px;color:rgba(255,255,255,0.55);margin-bottom:14px;">Home › Services › Civil engineering</p>
    <h1 style="font-family:'Barlow Semi Condensed';font-weight:700;font-size:38px;color:#fff;line-height:1.1;max-width:680px;margin-bottom:14px;">Civil engineering &amp; construction.</h1>
    <p style="font-size:15.5px;color:rgba(255,255,255,0.75);max-width:580px;">From foundations to finishing — Paytell delivers residential and commercial construction projects to a modern standard, on time and on budget.</p>
  </div>
</section>
<section class="section">
  <div class="wrap">
    <div style="display:grid;grid-template-columns:1.2fr 0.8fr;gap:64px;align-items:start;">
      <div>
    <div style="padding:32px 0;border-top:1px solid var(--line);">
      <h3 style="font-size:19px;color:var(--blue-900);margin-bottom:10px;">Residential construction</h3>
      <p style="font-size:14.5px;color:var(--steel);max-width:680px;">Design and build of houses, apartments and gated estates for private developers and individuals.</p>
    </div>
    <div style="padding:32px 0;border-top:1px solid var(--line);">
      <h3 style="font-size:19px;color:var(--blue-900);margin-bottom:10px;">Commercial &amp; institutional</h3>
      <p style="font-size:14.5px;color:var(--steel);max-width:680px;">Offices, warehouses, schools and public buildings constructed to specification and code.</p>
    </div>
    <div style="padding:32px 0;border-top:1px solid var(--line);">
      <h3 style="font-size:19px;color:var(--blue-900);margin-bottom:10px;">Foundation &amp; earthworks</h3>
      <p style="font-size:14.5px;color:var(--steel);max-width:680px;">Site preparation, excavation, compaction and concrete foundation works for all project types.</p>
    </div>
    <div style="padding:32px 0;border-top:1px solid var(--line);">
      <h3 style="font-size:19px;color:var(--blue-900);margin-bottom:10px;">Project management</h3>
      <p style="font-size:14.5px;color:var(--steel);max-width:680px;">End-to-end supervision of civil works from planning and procurement through to handover.</p>
    </div></div>
      <div>
        <div style="background:var(--paper-alt);border:1px solid var(--line);border-radius:4px;padding:30px;">
          <div class="eyebrow">Get a quote</div>
          <h3 style="font-size:22px;margin-bottom:10px;color:var(--blue-900);">Talk to our team</h3>
          <p style="font-size:14px;color:var(--steel);margin-bottom:20px;">Describe your project or request and we'll get back to you within 24 hours.</p>
          <a href="{{ route('contact') }}" class="cta-btn" style="display:inline-block;text-decoration:none;">Send an enquiry</a>
        </div>
        <div style="margin-top:20px;background:var(--blue-900);border-radius:4px;padding:28px;">
          <p style="font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,0.6);margin-bottom:8px;">Office hours</p>
          <p style="color:#fff;font-size:14.5px;">Mon – Sat, 8am – 6pm</p>
          <p style="color:rgba(255,255,255,0.75);font-size:14px;margin-top:12px;">+233 244 271 418</p>
          <p style="color:rgba(255,255,255,0.75);font-size:14px;">info@paytellcompanylimited.com</p>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="cta-band">
  <div class="wrap">
    <h2>Ready to start?</h2>
    <p>Contact Paytell for a quote or site visit.</p>
    <div class="btn-row" style="justify-content:center;display:flex;gap:14px;">
      <a href="{{ route('contact') }}" class="cta-btn" style="background:#fff;color:var(--crimson-600);">Contact us</a>
      <a href="{{ route('services.index') }}" class="cta-ghost" style="border-color:#fff;color:#fff;">Back to services</a>
    </div>
  </div>
</section>

@endsection