:root {
    --brand-blue: #165DA8;
    --brand-blue-deep: #0f4483;
    --brand-green: #A6CE3B;
    --bg-dark: #05070D;
    --bg-card: #0B1019;
    --text-light: #FFFFFF;
    --text-muted: #A9B2C1;
    --rule: rgba(166, 206, 59, 0.25);
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background-color: var(--bg-dark);
    color: var(--text-light);
    font-family: 'Inter', 'Helvetica', 'Arial', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Soft brand-tinted glow behind the card */
.business-card {
    background:
        radial-gradient(circle at 20% 20%, rgba(22, 93, 168, 0.18), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(166, 206, 59, 0.10), transparent 50%),
        var(--bg-dark);
}

/* The business card itself */
.card-shell {
    background: linear-gradient(180deg, var(--bg-card) 0%, #080B12 100%);
    border: 1px solid rgba(166, 206, 59, 0.15);
    border-radius: 1.25rem;
    padding: clamp(1.5rem, 5vw, 3rem);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 30px 60px -20px rgba(0, 0, 0, 0.8),
        0 0 80px -20px rgba(22, 93, 168, 0.25);
}

/* Logo */
.card-header-area {
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.card-logo {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
}

/* Services list */
.services {
    margin: 0 auto;
}

.service-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'Playfair Display', 'Georgia', serif;
    /*font-style: italic;*/
    font-weight: 500;
    font-size: clamp(1.05rem, 2.6vw, 1.45rem);
    line-height: 1.55;
    color: var(--text-light);
}

.service-list li {
    margin: 0;
}

.service-list .single {
    margin: 0.5rem 0;
}

.service-list .dot {
    color: var(--brand-green);
    margin: 0 0.35rem;
    font-style: normal;
}

/* Divider */
.divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(90deg, transparent, var(--rule), transparent);
    margin: clamp(1.5rem, 4vw, 2.25rem) auto;
    width: 80%;
    opacity: 1;
}

/* Footer / contact */
.card-footer-area {
    font-size: clamp(0.95rem, 2vw, 1.05rem);
}

.card-footer-area p {
    margin: 0 0 0.5rem 0;
}

.address {
    color: var(--text-muted);
}

.address i,
.email i,
.phone i,
.social i {
    color: var(--brand-green);
    margin-right: 0.4rem;
}

.email a,
.phone a,
.social a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.email a:hover,
.phone a:hover,
.social a:hover {
    color: var(--brand-green);
}

.social {
    margin-top: 0.75rem !important;
}

.social a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(22, 93, 168, 0.15);
    border: 1px solid rgba(22, 93, 168, 0.35);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.95rem;
}

.social a:hover {
    background: rgba(22, 93, 168, 0.30);
}

.social i {
    font-size: 1.1rem;
}

/* Small screen tweaks */
@media (max-width: 575.98px) {
    .divider {
        width: 90%;
    }
    .service-list {
        font-size: 1.05rem;
    }
}

/* ========================================
   Contact Page
   ======================================== */

.contact-title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    margin: 0 0 0.5rem 0;
    color: var(--text-light);
}

.contact-subtitle {
    color: var(--text-muted);
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    margin: 0 auto 1.75rem auto;
    max-width: 34rem;
}

/* Form labels + controls */
.contact-form .form-label {
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.contact-form .optional-tag {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.8rem;
}

.contact-form .form-control {
    background-color: rgba(5, 7, 13, 0.6);
    border: 1px solid rgba(166, 206, 59, 0.2);
    color: var(--text-light);
    border-radius: 0.6rem;
    padding: 0.65rem 0.9rem;
}

.contact-form .form-control::placeholder {
    color: rgba(169, 178, 193, 0.55);
}

.contact-form .form-control:focus {
    background-color: rgba(5, 7, 13, 0.8);
    border-color: var(--brand-green);
    color: var(--text-light);
    box-shadow: 0 0 0 0.2rem rgba(166, 206, 59, 0.15);
}

/* Submit button */
.btn-contact-submit {
    background: linear-gradient(135deg, var(--brand-green), #85b32c);
    color: #05070D;
    font-weight: 700;
    border: none;
    border-radius: 0.6rem;
    padding: 0.75rem 1.25rem;
    letter-spacing: 0.02em;
    transition: filter 0.2s ease, transform 0.1s ease;
}

.btn-contact-submit:hover,
.btn-contact-submit:focus-visible {
    filter: brightness(1.1);
    color: #05070D;
}

.btn-contact-submit:active {
    transform: translateY(1px);
}

.btn-contact-submit:disabled {
    filter: saturate(0.6) brightness(0.85);
    color: #05070D;
}

/* Success message (shown/hidden by form-handler.js via inline display;
   no display property here so the injected .form-success default stands) */
.contact-success {
    padding: 1.5rem 1rem 0.25rem 1rem;
}

.contact-success i {
    font-size: 2.25rem;
    color: var(--brand-green);
}

.contact-success-title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-light);
    margin: 0.5rem 0 0.25rem 0;
}

.contact-success-text {
    color: var(--text-muted);
    margin: 0 0 1rem 0;
}

/* Auto-injected ALTCHA widget, themed for the dark card using the widget's
   documented CSS custom properties (v3.x). The widget renders in the light
   DOM, so properties set here cascade into its internals. Without these,
   its defaults resolve via light-dark() against a light color scheme and
   produce near-black text on our dark background. */
.contact-form altcha-widget {
    display: block;
    margin-bottom: 1rem;
    --altcha-color-base: rgba(5, 7, 13, 0.6);        /* widget background, matches form controls */
    --altcha-color-base-content: var(--text-light);   /* "Verified" label + footer text */
    --altcha-color-neutral: rgba(166, 206, 59, 0.2);  /* secondary accents */
    --altcha-color-neutral-content: var(--text-muted);
    --altcha-border-color: rgba(166, 206, 59, 0.2);   /* widget border, matches input borders */
    --altcha-border-radius: 0.6rem;                   /* matches form-control radius */
    --altcha-checkbox-border-color: rgba(169, 178, 193, 0.6);
    --altcha-spinner-color: var(--brand-green);
    --altcha-color-success: var(--brand-green);       /* verified checkbox fill */
    --altcha-color-success-content: #05070D;          /* checkmark stroke on the green fill */
    --altcha-max-width: 100%;                         /* fill the form column like the inputs */
}

/* "Contact Us" call-to-action on the home card */
.contact-cta {
    margin: clamp(1.25rem, 3vw, 1.75rem) 0 0 0;
}

.contact-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(22, 93, 168, 0.15);
    border: 1px solid rgba(22, 93, 168, 0.35);
    color: var(--text-light);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
}

.contact-cta-link:hover,
.contact-cta-link:focus-visible {
    background: rgba(22, 93, 168, 0.30);
    color: var(--brand-green);
}

.contact-cta-link i {
    color: var(--brand-green);
    font-size: 1.1rem;
}