@extends('layouts.app')
@section('title', 'Road Construction — 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 › Road construction</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;">Road construction &amp; resurfacing.</h1>
    <p style="font-size:15.5px;color:rgba(255,255,255,0.75);max-width:580px;">Paytell builds and resurfaces roads for private estates, industrial sites and public infrastructure — with our own fleet of equipment on every job.</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;">New road construction</h3>
      <p style="font-size:14.5px;color:var(--steel);max-width:680px;">Design and construction of paved roads, including drainage, kerbs and road markings.</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;">Resurfacing &amp; rehabilitation</h3>
      <p style="font-size:14.5px;color:var(--steel);max-width:680px;">Overlay and repair of deteriorated road surfaces for municipalities and private clients.</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;">Earthworks &amp; grading</h3>
      <p style="font-size:14.5px;color:var(--steel);max-width:680px;">Land clearing, grading and sub-base preparation for new road corridors.</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;">Drainage systems</h3>
      <p style="font-size:14.5px;color:var(--steel);max-width:680px;">Storm drainage channels and culverts designed to protect road infrastructure long term.</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