/* css/modern-style.css */

/* CSS Custom Properties */
:root {
    --primary-color: #384A91;
    --primary-dark: #2a3768;
    --primary-light: #4861a6;
    --secondary-color: #f8f9fa;
    --accent-color: #007bff;
    --text-color: #333;
    --text-muted: #666;
    --text-light: #999;
    --border-color: #e1e5e9;
    --shadow-light: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-medium: 0 4px 20px rgba(0,0,0,0.15);
    --border-radius: 8px;
    --container-max-width: 1200px;
    --header-height: 120px;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fff;
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-dark);
}

/* Brand Highlight */
.brand-highlight {
    color: var(--primary-color);
    font-weight: 600;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid;
    border-radius: var(--border-radius);
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.btn-primary-large, .btn-secondary-large {
    padding: 16px 32px;
    font-size: 1.1rem;
}

.btn-secondary-large {
    background-color: transparent;
    border-color: white;
    color: white;
}

.btn-secondary-large:hover {
    background-color: white;
    color: var(--primary-color);
}

/* Header Styles */
.header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-medium);
}

.navbar {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.nav-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* .nav-brand is an <a> to the home page, so it needs the anchor defaults off.
   The same rule is repeated in the inline block in includes/header.php, which
   comes later and wins — change both together or this one does nothing. */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
}

.nav-brand:hover .brand-name {
    text-decoration: underline;
}

.logo {
    height: 60px;
    width: auto;
}

.brand-text {
    color: white;
}

.brand-name {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0;
    color: white;
}

.brand-tagline {
    font-size: 0.9rem;
    margin-bottom: 0;
    opacity: 0.9;
}

.nav-contact {
    display: flex;
    gap: 2rem;
    color: white;
}

.contact-item {
    text-align: right;
}

.contact-label {
    display: block;
    font-size: 0.85rem;
    opacity: 0.8;
    margin-bottom: 0.25rem;
}

.contact-link {
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
}

.contact-link:hover {
    color: rgba(255,255,255,0.8);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
}

/* Main Navigation */
.main-nav {
    background-color: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
}

.nav-menu {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: block;
    padding: 1rem 1.5rem;
    color: white;
    font-weight: 500;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.nav-link:hover,
.nav-link.active {
    background-color: rgba(255,255,255,0.1);
    border-bottom-color: rgba(255,255,255,0.8);
    color: white;
}

.dropdown-arrow {
    font-size: 0.8rem;
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    min-width: 200px;
    box-shadow: var(--shadow-medium);
    border-radius: var(--border-radius);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-item:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-link {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}

.dropdown-link:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.dropdown-menu li:last-child .dropdown-link {
    border-bottom: none;
}

/* Mobile Navigation */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 2rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.mobile-nav-overlay.active .mobile-nav-content {
    transform: translateX(0);
}

.mobile-nav-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}

.mobile-nav-menu {
    list-style: none;
    margin-top: 3rem;
}

.mobile-nav-link {
    display: block;
    padding: 1rem 0;
    color: white;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-nav-link:hover {
    color: rgba(255,255,255,0.8);
}

.mobile-dropdown-toggle {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: white;
    padding: 1rem 0;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-dropdown-menu {
    list-style: none;
    padding-left: 1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-dropdown-menu.active {
    max-height: 300px;
}

.mobile-dropdown-toggle.active::after {
    content: " ×";
}

body.nav-open {
    overflow: hidden;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 4rem 0;
}

.hero-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.hero-description {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: var(--text-muted);
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
}

/* Services Section */
.services-section {
    padding: 5rem 0;
    background-color: white;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--primary-color);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.service-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.service-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.service-card h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.service-card p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.service-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    position: relative;
}

.service-link::after {
    content: ' →';
    transition: transform 0.3s ease;
}

.service-link:hover::after {
    transform: translateX(5px);
}

/* Why Choose Section */
.why-choose-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--secondary-color) 0%, #e9ecef 100%);
}

.why-choose-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.feature-icon {
    background-color: var(--primary-color);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.feature-item h4 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.feature-item p {
    margin-bottom: 0;
    color: var(--text-muted);
}

.why-choose-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
}

/* CTA Section */
.cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    text-align: center;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Footer */
.footer {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #1a1a1a 100%);
    color: white;
    padding: 3rem 0 1rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 1rem;
    color: white;
}

.footer-tagline {
    font-style: italic;
    opacity: 0.8;
    margin-bottom: 1.5rem;
}

.footer-contact p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.footer-contact a {
    color: white;
}

.footer-contact a:hover {
    opacity: 0.8;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: rgba(255,255,255,0.8);
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: white;
}

.regulatory-info {
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0.9;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 2rem;
    text-align: center;
}

.footer-warnings {
    margin-bottom: 1.5rem;
}

.warning-text {
    background-color: rgba(255,255,255,0.1);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.fee-info {
    font-size: 0.9rem;
    opacity: 0.8;
}

.footer-legal p {
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: var(--shadow-medium);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
}

/* Page Content Styles */
.main-content {
    margin-top: 0;
}

.page-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
    padding: 3rem 0;
    text-align: center;
}

.page-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.breadcrumb {
    background-color: var(--secondary-color);
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--primary-color);
}

.page-content {
    padding: 3rem 0;
}

.content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.content-wrapper h1 {
    color: var(--primary-color);
    margin-bottom: 2rem;
}

.content-wrapper p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Form Styles */
.form-section {
    background-color: var(--secondary-color);
    padding: 3rem 0;
}

.form-container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-color);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(56, 74, 145, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-submit {
    text-align: center;
    margin-top: 2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-contact {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .main-nav {
        display: none;
    }
    
    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .why-choose-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-primary-large,
    .btn-secondary-large {
        width: 100%;
        max-width: 300px;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    
    .container {
        padding: 0 15px;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .service-card {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding: 2rem 0;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-cta {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        text-align: center;
    }
    
    .services-section,
    .why-choose-section,
    .cta-section {
        padding: 3rem 0;
    }
    
    .mobile-nav-content {
        width: 100%;
    }
}

/* Print Styles */
@media print {
    .header,
    .footer,
    .back-to-top,
    .mobile-menu-toggle,
    .mobile-nav-overlay {
        display: none;
    }
    
    .main-content {
        margin-top: 0;
    }
    
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
}

/* Complete CSS Patch for Gascoine Hoare Website */

/* CSS Variables */
:root {
    --primary-color: #384A91;
    --primary-dark: #2a3768;
    --primary-light: #4861a6;
    --secondary-color: #f8f9fa;
    --accent-color: #007bff;
    --text-color: #333;
    --text-muted: #666;
    --text-light: #999;
    --border-color: #e1e5e9;
    --shadow-light: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-medium: 0 4px 20px rgba(0,0,0,0.15);
    --border-radius: 8px;
    --container-max-width: 1200px;
}

/* Basic Reset */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

/* Layout */
.main-content {
    min-height: 70vh;
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-dark);
}

.brand-highlight {
    color: var(--primary-color);
    font-weight: 600;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid;
    border-radius: var(--border-radius);
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.btn-primary-large,
.btn-secondary-large {
    padding: 16px 32px;
    font-size: 1.1rem;
}

.btn-secondary-large {
    background-color: transparent;
    border-color: white;
    color: white;
}

.btn-secondary-large:hover {
    background-color: white;
    color: var(--primary-color);
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 4rem 0;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.hero-description {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: var(--text-muted);
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
}

/* Page Hero */
.page-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
    padding: 3rem 0;
    text-align: center;
}

.page-hero h1 {
    color: white;
    margin-bottom: 1rem;
}

/* Services Section */
.services-section {
    padding: 5rem 0;
    background-color: white;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--primary-color);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.service-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.service-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.service-card h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.service-card p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.service-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    position: relative;
}

.service-link::after {
    content: ' →';
    transition: transform 0.3s ease;
}

.service-link:hover::after {
    transform: translateX(5px);
}

/* Why Choose Section */
.why-choose-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--secondary-color) 0%, #e9ecef 100%);
}

.why-choose-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.feature-icon {
    background-color: var(--primary-color);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.feature-item h4 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.feature-item p {
    margin-bottom: 0;
    color: var(--text-muted);
}

.why-choose-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
}

/* CTA Section */
.cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    text-align: center;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: white;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Page Content */
.page-content {
    padding: 3rem 0;
}

.content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.content-wrapper h1 {
    color: var(--primary-color);
    margin-bottom: 2rem;
}

.content-wrapper p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Forms */
.form-section {
    background-color: var(--secondary-color);
    padding: 3rem 0;
}

.form-container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
}

.form-container h2 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    text-align: center;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-color);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(56, 74, 145, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-submit {
    text-align: center;
    margin-top: 2rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.privacy-notice {
    background-color: var(--secondary-color);
    padding: 1rem;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    border-left: 4px solid var(--primary-color);
}

/* Contact Page */
.contact-info-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.contact-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.contact-method {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background-color: var(--secondary-color);
    border-radius: var(--border-radius);
    transition: transform 0.3s ease;
}

.contact-method:hover {
    transform: translateY(-2px);
}

.contact-icon {
    font-size: 2rem;
    min-width: 50px;
}

.contact-info h4 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.contact-info p {
    margin-bottom: 0;
    color: var(--text-muted);
}

.contact-info a {
    color: var(--primary-color);
    font-weight: 600;
}

.quick-contact-card {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    text-align: center;
}

.quick-contact-card h3 {
    color: white;
    margin-bottom: 1rem;
}

.quick-contact-card p {
    margin-bottom: 2rem;
    opacity: 0.9;
}

.quick-contact-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quick-contact-buttons .btn {
    width: 100%;
}

.quick-contact-buttons .btn-secondary {
    background-color: transparent;
    border-color: white;
    color: white;
}

.quick-contact-buttons .btn-secondary:hover {
    background-color: white;
    color: var(--primary-color);
}

/* Breadcrumb */
.breadcrumb {
    background-color: var(--secondary-color);
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.breadcrumb p {
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--primary-color);
}

/* Images */
img {
    max-width: 100%;
    height: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .why-choose-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-primary-large,
    .btn-secondary-large {
        width: 100%;
        max-width: 300px;
    }
    
    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .contact-methods {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .container {
        padding: 0 15px;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
}

@media (max-width: 480px) {
    .hero-section {
        padding: 2rem 0;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-cta {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        text-align: center;
    }
    
    .services-section,
    .why-choose-section,
    .cta-section {
        padding: 3rem 0;
    }
}
/* ==========================================================================
   Regulatory / referral notices
   Shared notice box used for FCA scope statements and referred (non-regulated)
   services. Promoted here from Buy-to-Let.php so every page can use it.
   ========================================================================== */

.regulatory-notice {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: var(--border-radius);
    border-left: 4px solid #2196f3;
    margin: 2rem 0;
}

.notice-icon {
    font-size: 1.5rem;
    min-width: 30px;
}

.notice-content h4 {
    color: #1565c0;
    margin-bottom: 0.5rem;
}

.notice-content p {
    color: #1565c0;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.notice-content p:last-child {
    margin-bottom: 0;
}

/* Enquiry form: honeypot field and validation errors
   ------------------------------------------------------------------------- */

.form-field-website {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-error {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background-color: #fdecea;
    border-left: 4px solid #d32f2f;
    border-radius: var(--border-radius);
    color: #b71c1c;
    font-weight: 500;
}

/* Risk warnings in the page body (PRIMIS 8.5, 8.6) ------------------------
   8.6 asks for risk information in the main body rather than the small print,
   inside its own distinct border, in clear bold type on a neutral background,
   proportionate in size. Deliberately NOT upper case here: the footer copy is,
   but a body-width block of capitals is harder to read, and 8.6 is asking for
   legibility rather than shouting. The wording itself is prescribed and exact. */
.risk-warning {
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    background: #ffffff;
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
}

.risk-warning-text {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color);
}

.risk-warning-text + .risk-warning-text {
    margin-top: 0.75rem;
}


/* Basic mortgage calculator (PRIMIS 6.12.1) -------------------------------
   The prescribed statement is always visible, never behind a toggle, and the
   interest-only caveat sits with its own figure rather than in a footnote. */
.mortgage-calculator {
    background: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    margin: 2.5rem 0;
}

.mortgage-calculator h3 {
    color: var(--primary-color);
    margin: 0 0 0.5rem;
}

.calc-intro {
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}

.calc-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.calc-field label {
    display: block;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.4rem;
}

.calc-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.6rem 0.75rem;
}

.calc-input-wrap:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(42, 55, 104, 0.15);
}

.calc-input-wrap input {
    border: 0;
    outline: none;
    width: 100%;
    min-width: 0;
    font: inherit;
    font-size: 1.05rem;
    color: var(--text-color);
    background: transparent;
}

.calc-prefix,
.calc-suffix {
    color: var(--text-muted);
    font-size: 0.95rem;
    white-space: nowrap;
}

.calc-hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.calc-actions {
    align-self: end;
}

.calc-actions .calc-reset {
    width: auto;
}

.calc-per {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-muted);
}

.calc-results {
    margin-top: 1.5rem;
}

.calc-placeholder,
.calc-error {
    margin: 0;
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius);
    background: white;
    border: 1px dashed var(--border-color);
    color: var(--text-muted);
}

.calc-error {
    border-style: solid;
    border-color: #c0392b;
    color: #8e2c20;
}

/* .calc-result-grid sets display:grid, which beats the browser's own
   [hidden] { display: none } — so the empty result cards stayed on screen
   next to the placeholder, and stale figures stayed up next to an error.
   Stale numbers beside an error message on a money calculator is not a
   cosmetic bug, so this rule is load-bearing. */
.mortgage-calculator [hidden] {
    display: none !important;
}

.calc-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.calc-result {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
}

.calc-result h4 {
    margin: 0 0 0.25rem;
    color: var(--primary-color);
    font-size: 1rem;
}

.calc-figure {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary-color);
}

.calc-note {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.calc-statement {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-muted);
}

@media (max-width: 480px) {
    .mortgage-calculator {
        padding: 1.5rem 1.25rem;
    }

    .calc-figure {
        font-size: 1.6rem;
    }
}

/* Testimonials (PRIMIS 5.10) ----------------------------------------------
   The date is part of the content, not decoration: 5.10 wants testimonials
   inside roughly 12-18 months, and showing the date is what makes a stale one
   obvious to us and to the reader. Styled quietly on purpose — a wall of
   oversized praise invites the reader to discount the lot. */
.testimonials-section {
    padding: 5rem 0;
    background: var(--secondary-color);
}

.testimonials-intro {
    text-align: center;
    color: var(--text-muted);
    max-width: 640px;
    margin: -1.5rem auto 2.5rem;
}

/* Two columns rather than auto-fit: with four of them, auto-fit gives 3 + 1
   and the long quote ends up stranded on its own row. */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

.testimonial {
    margin: 0;
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
}

.testimonial-quote {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
}

.testimonial-quote::before { content: "\201C"; }
.testimonial-quote::after  { content: "\201D"; }

.testimonial-meta {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.testimonial-meta span {
    display: inline-block;
}

.testimonial-author {
    font-weight: 600;
    color: var(--primary-color);
}

.testimonial-author::after,
.testimonial-date::after {
    content: "\00b7";
    margin: 0 0.4rem;
    color: var(--border-color);
}

/* The "what you will need" sidebar card. */
.doc-intro {
    margin: -0.5rem 0 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Spacing where these blocks meet a section edge --------------------------
   .risk-warning and .mortgage-calculator carry their own vertical margins so
   they sit correctly mid-page. Against a section's own 5rem padding those
   margins just add to it, which is where the gaps under the hero and above
   "Why Choose" came from. Drop the margin on whichever side touches the edge. */
.risk-warning:first-child {
    margin-top: 0;
}

.mortgage-calculator:last-child {
    margin-bottom: 0;
}

/* Header details that used to live in inline style attributes ------------
   The markup carried style="" on the logo, brand, contact block, nav list
   and every nav link. All of it duplicated rules already in this file — but
   inline styles win, so the header's own <style> block needed
   display:flex !important just to get the hamburger back on a phone. The
   attributes are gone; these few declarations are what the stylesheet was
   genuinely missing. */
.brand-name,
.brand-tagline {
    margin: 0;
}

.nav-link,
.contact-link {
    text-decoration: none;
}

.contact-link {
    color: white;
    font-weight: 600;
}

/* .btn-primary-large had no colour anywhere in this file. Its fill came only
   from a .btn rule in the header's inline "fallback" block, which also flattened
   the -large padding back to the standard 12px/24px. With that block gone the
   CTA buttons lost their fill entirely, so the colours live here now — and the
   -large padding does what its name says again. */
.btn-primary-large {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.btn-primary-large:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
}

/* The footer tightened up on small screens. This lived only in the footer's
   inline block, so it went with it. */
@media (max-width: 768px) {
    .footer {
        padding: 2rem 0 1rem;
    }
}