<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Site Under Maintenance</title>

    <!-- Google Fonts: Playfair Display for headings, Lato for body -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link
        href="https://fonts.googleapis.com/css2?family=Russo+One:wght@400;600&family=Montserrat:wght@300;400&display=swap"
        rel="stylesheet"
    />

    <style>
        /* ── CSS Variables ─────────────────────────────────────── */
        :root {
            --bg:          #f5f3ee;       /* warm off-white */
            --card:        #333333;
            --accent:      #eeeeee;       /* deep teal */
            --accent-soft: #111111;
            --text-dark:   #ffffff;
            --text-mid:    #eeeeee;
            --text-light:  #ffffff;
            --border:      #ddd8ce;
            --radius:      16px;
            --shadow:      0 8px 40px rgba(44, 95, 110, 0.12);
        }

        /* ── Reset & Base ──────────────────────────────────────── */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            font-weight: 400;
            background-color: var(--bg);

            /* Subtle dot-grid texture for depth */
            background-image: radial-gradient(circle, #c8c0b0 1px, transparent 1px);
            background-size: 28px 28px;

            /* Full-viewport centering — both horizontal AND vertical */
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 24px;
        }

        /* ── Card Container ────────────────────────────────────── */
        .card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            max-width: 520px;
            width: 100%;
            padding: 56px 48px 48px;
            text-align: center;

            /* Gentle fade-up entrance animation */
            animation: fadeUp 0.7s ease both;
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(18px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ── Logo ──────────────────────────────────────────────── */
        .logo {
            display: block;
            margin: 0 auto 32px;
            max-width: 140px;   /* adjust to suit your logo's dimensions */
            height: auto;
        }

        /* ── Decorative divider line ───────────────────────────── */
        .divider {
            width: 48px;
            height: 3px;
            background: var(--accent);
            border-radius: 2px;
            margin: 20px auto 28px;
        }

        /* ── Heading ───────────────────────────────────────────── */
        h1 {
            font-family: 'Montserrat', serif;
            font-size: clamp(1.4rem, 4vw, 1.85rem);
            font-weight: 600;
            color: var(--text-dark);
            line-height: 1.35;
            letter-spacing: -0.01em;
        }

        /* ── Sub-message ───────────────────────────────────────── */
        .contact-intro {
            font-size: 1rem;
            color: var(--text-mid);
            margin-top: 24px;
            margin-bottom: 16px;
            letter-spacing: 0.01em;
        }

        /* ── Contact Details Box ───────────────────────────────── */
        .contact-box {
            background: var(--accent-soft);
            border: 1px solid #c8dde2;
            border-radius: 10px;
            padding: 20px 24px;
            display: inline-block;   /* shrink-wrap around content */
            width: 100%;
        }

        /* Each contact row: icon + text */
        .contact-item {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-size: 1rem;
            color: var(--accent);
            font-weight: 400;
        }

        /* Space between phone and email rows */
        .contact-item + .contact-item {
            margin-top: 12px;
        }

        /* Make phone/email links look native */
        .contact-item a {
            color: inherit;
            text-decoration: none;
        }

        .contact-item a:hover {
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        /* Inline SVG icon sizing */
        .icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            opacity: 0.85;
        }

        /* ── Footer Note ───────────────────────────────────────── */
        .footer-note {
            margin-top: 32px;
            font-size: 0.78rem;
            color: var(--text-light);
            letter-spacing: 0.03em;
        }
    </style>
</head>
<body>

<div class="card">

    <!--
      LOGO
      ────
      Replace "logo.png" with the path to your own PNG logo.
      The alt text should describe your company/brand.
    -->
    <img
        class="logo"
        src="site-group.png"
        alt="Company Logo"
    />

    <!-- Decorative accent bar -->
    <div class="divider"></div>

    <!--
      MAIN HEADING
      ────────────
      Edit this text to suit your message.
    -->
    <h1>Apologies — this site is currently down for maintenance.</h1>

    <!--
      CONTACT INTRO
      ─────────────
    -->
    <p class="contact-intro">Please contact us via:</p>

    <!--
      CONTACT DETAILS
      ───────────────
      Replace the phone number and email address below with your own.
      The tel: and mailto: links make them tappable on mobile.
    -->
    <div class="contact-box">

        <!-- Phone row -->
        <div class="contact-item">
            <!-- Phone icon (inline SVG — no external dependency) -->
            <svg class="icon" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2"
                 stroke-linecap="round" stroke-linejoin="round"
                 aria-hidden="true">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2
                   A19.86 19.86 0 0 1 3.08 4.18
                   2 2 0 0 1 5.07 2h3a2 2 0 0 1 2 1.72
                   c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11
                   L9.09 9.91a16 16 0 0 0 6 6l1.27-1.27
                   a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7
                   A2 2 0 0 1 22 16.92z"/>
            </svg>
            <a href="tel:+441234567890">+44 1723 584 250</a>
        </div>

        <!-- Email row -->
        <div class="contact-item">
            <!-- Envelope icon (inline SVG) -->
            <svg class="icon" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2"
                 stroke-linecap="round" stroke-linejoin="round"
                 aria-hidden="true">
                <rect width="20" height="16" x="2" y="4" rx="2"/>
                <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
            </svg>
            <a href="/cdn-cgi/l/email-protection#66030817130f140f031526050715120a03011409131648050948130d"><span class="__cf_email__" data-cfemail="781d16090d110a111d0b381b190b0c141d1f0a170d08561b17560d13">[email&#160;protected]</span></a>
        </div>

    </div>

    <!-- Small footer note — optional, remove if not needed -->
    <p class="footer-note">We'll be back up and running shortly. Thank you for your patience.</p>

</div>

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
</html>