html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.cta-buttons:after {
    background-image: url('/images/trusted-advisor-tick.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.about-card-decorative {
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}

.about-card-decorative .portrait::before {
    background: radial-gradient(circle, rgba(97, 124, 179, 0.3) 0%, transparent 70%);
    pointer-events: none;
    border-bottom: none;
    border-radius: 50%;
}

.about-card-decorative .portrait img {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%; 
}

.adviser-quote {
    opacity: 0.8;
}

header {
    background: rgba(0, 3, 54, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.logo-placeholder {
    border-radius: 4px;
}

.logo-placeholder > img {
    transition: max-width 260ms ease 0ms, max-height 260ms ease 0ms, top 360ms ease 50ms;
    object-fit: contain;
}

body[scroll="0"] .logo-placeholder > img {
    transition: max-width 260ms ease 50ms, max-height 260ms ease 50ms, top 260ms ease 0ms;
}

.nav-link{
    transition: all 100ms ease-out;
}

.nav-link:hover {
    color: #fff;
}

.nav-link::after {
    background-color: var(--accent-color);
    transition: width 0.3s;
}

.nav-link:hover::after {
    width: 100%;
}

.hero-label {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

h1 {
    background: -webkit-linear-gradient(#ffffff, #dcdcdc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-image-area {
    border-radius: 40pt;
}

.hero-image-area img {
    filter: drop-shadow(0 0 20px rgba(0,0,0,0.5));
}

.cta-sublink a {
    transition: all 180ms ease;
}

.cta-sublink a:hover,
.cta-sublink a:active {
    color: var(--accent-color-highlight);
}

.section {
    border-top: 1px solid rgba(255,255,255,0.05);
}

.section-container:not(:first-child) {
    border-top: 1px solid rgba(255,255,255,0.1);
}

.service-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
}

.process-card .step-number {
    user-select: none;
}

.fee-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.fee-item {
    border: 1px solid var(--card-border);
    border-radius: 8px;
}

.testimonial-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
}

.quote-icon {
    color: rgba(255,255,255,0.1);
    font-family: serif;
}

.testimonial-text {
    font-style: italic;
}

.contact-icon {
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

select option {
    background: var(--gradient-stop-1);
}

.contact-form {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--card-border);
}

.form-control {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    font-family: inherit;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-color);
}

textarea.form-control {
    resize: vertical;
}

.button {
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.button:hover {
    background-color: var(--accent-color-highlight);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.button-outline {
    border: 2px solid var(--accent-color);
}

.button-outline:hover {
    background: var(--accent-color);
}

.icon {
    fill: currentColor;
}

footer {
    background-color: rgba(0, 3, 54, 0.5); 
    backdrop-filter: blur(5px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright-area {
    border-top: 1px solid rgba(255,255,255,0.1);
}

.pdf-link {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pdf-link:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateX(5px);
}

#contactus_form_response[status]{
    margin: var(--spacing-unit) 0px;
    padding: var(--spacing-unit);
    border: 1px solid;
    border-radius: 4pt;
    background: rgba(0,0,0,0.2);
}

#contactus_form_response[status="200"]{
    color: var(--success-color);
}

#contactus_form_response[status="500"]{
    color: var(--error-color);
}

altcha-widget .altcha {
    border: none;
    background: rgba(0,0,0,0.2);
}

altcha-widget .altcha-main {
    vertical-align: middle;
}

altcha-widget .altcha-logo {
    vertical-align: middle;
}

.input_wrapper {
    background: rgba(0,0,0,0.2);
    border-radius: 2pt;
}

.fineprint {
    opacity: 0.8;
}

.modal[open] {
    border: none;
    outline: none;
    border-radius: 4pt;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.3);
}

.modal-header > h1 {
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 2pt;
}

.modal-header > i[onclick^="closeDialog"] {
    border: 1px solid rgba(255,255,255,0.2);
    background: none;
    border-radius: 2pt;
    cursor: pointer;
}

.modal-body ul,
.modal-body ol {
    border-radius: 4pt;
    background: rgba(0,0,0,0.2);
}

.modal::backdrop {
    opacity: 0.5;
}

.voucher-preview {
    background-image: url('/documents/Authentic Advisers Gift Voucher.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    border: 2px solid white;
}

.voucher-preview.large {
    background-size: contain;
    background-position: top center;
}

.toast {
    border-radius: 4pt;
}

.button_link {
    border: none;
    background: none;
    outline: none;
    cursor: pointer;
}

/* --- On Scroll Card Transitions --- */
.highlight-scroll {
    transition: all 150ms ease 0ms;
}

section.state-active .highlight-scroll:nth-child(1) { transition-delay: 100ms; }
section.state-active .highlight-scroll:nth-child(2) { transition-delay: 400ms; }
section.state-active .highlight-scroll:nth-child(3) { transition-delay: 700ms; }
section.state-active .highlight-scroll:nth-child(4) { transition-delay: 1000ms; }
section.state-active .highlight-scroll:nth-child(5) { transition-delay: 1300ms; }
section.state-active .highlight-scroll:nth-child(6) { transition-delay: 1600ms; }

section.state-active .process-card.highlight-scroll:nth-child(1) { transition-delay: 300ms; }
section.state-active .process-card.highlight-scroll:nth-child(2) { transition-delay: 800ms; }
section.state-active .process-card.highlight-scroll:nth-child(3) { transition-delay: 1300ms; }
section.state-active .process-card.highlight-scroll:nth-child(4) { transition-delay: 1800ms; }
section.state-active .process-card.highlight-scroll:nth-child(5) { transition-delay: 2300ms; }
section.state-active .process-card.highlight-scroll:nth-child(6) { transition-delay: 2800ms; }

section.state-active .highlight-scroll {
    transition-duration: 650ms;
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.1);
}

.highlight-scroll h1,
.highlight-scroll h2,
.highlight-scroll h3 {
    transition: all 350ms ease;
    transition-delay: inherit;
    transition-duration: inherit;
}

section.state-active .highlight-scroll h1,
section.state-active .highlight-scroll h2,
section.state-active .highlight-scroll h3 {
    color: var(--accent-color-highlight);
}

body[section="1"] .nav-menu > li:nth-child(1) > .nav-link,
body[section="2"] .nav-menu > li:nth-child(2) > .nav-link,
body[section="3"] .nav-menu > li:nth-child(3) > .nav-link,
body[section="4"] .nav-menu > li:nth-child(4) > .nav-link,
body[section="5"] .nav-menu > li:nth-child(5) > .nav-link,
body[section="6"] .nav-menu > li:nth-child(6) > .nav-link,
body[section="7"] .nav-menu > li:nth-child(7) > .nav-link,
body[section="8"] .nav-menu > li:nth-child(8) > .nav-link,
body[section="9"] .nav-menu > li:nth-child(9) > .nav-link{
    color: var(--accent-color-highlight);
}

/* --- Responsive Styling Fixes --- */
@media (max-width: 1100px) {
    .fee-item:nth-child(1) { transform: translateX(-30px); }
    .fee-item:nth-child(3) { transform: translateX(30px); }
}