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

/* Brand typeface. easyex.com uses Metric, which is licensed from Klim Type
   Foundry and cannot be redistributed, so this site uses Inter — the same
   geometric-grotesque proportions under the SIL Open Font License. See
   ../fonts/Inter-LICENSE.txt.

   One variable file per subset covers every weight (wght axis 100-900), and
   unicode-range means a browser only fetches the subset the page needs. Inter
   carries no CJK, so the stack below falls through for the zh-hans locale. */
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-latin.260c81a4759b.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-latin-ext.1ad231aac0a8.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --primary: #0b2a5f;
    --primary-dark: #07214c;
    --secondary: #2454a8;
    --secondary-dark: #1252b8;
    --text: #111111;
    --text-light: #505050;
    --dark: #222222;
    --light-bg: #F9FAFB;
    --border: #E5E7EB;
    --white: #FFFFFF;
    --success: #10B981;
    --error: #EF4444;
    --warning: #F59E0B;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: var(--text);
    overflow-x: hidden;
}

/* Type scale from easyex.com: light body copy, regular headings, medium for
   the hero and the uppercase eyebrow labels. */
h1 {
    font-weight: 600;
    font-size: 45px;
    line-height: 50px;
}

h3 {
    font-weight: 400;
    font-size: 38px;
    line-height: 46px;
}

h5 {
    font-weight: 400;
    font-size: 30px;
    line-height: 35px;
}

@media (min-width: 768px) {
    h1 {
        font-size: 55px;
        line-height: 60px;
    }
}

/* Uppercase kicker that sits above a section heading. */
.section-eyebrow {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-light);
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 1.25px;
    margin-bottom: 10px;
}

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Navigation — translucent white bar, no shadow, as on easyex.com. Kept
   sticky (not fixed) so the sections below never need clearance padding. */
nav {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: saturate(180%) blur(8px);
    position: sticky;
    top: 0;
    z-index: 1000;
    font-weight: 600;
    font-size: 16px;
    transition: 0.3s;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 2rem 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.logo {
    flex-shrink: 0;
    padding-right: 1.5rem;
}

.logo a {
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
}

.logo img {
    display: block;
    width: 160px;
    height: 30px;
}

/* This site carries eight nav items to easyex.com's four, so the bar is kept
   on one line with nowrap and tighter tracking rather than letting links wrap. */
.nav-links {
    display: flex;
    gap: 1rem;
    list-style: none;
    flex-wrap: nowrap;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-light);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition: color 0.3s;
    position: relative;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary);
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary);
}

.nav-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

/* Header CTAs echo the site-wide outline pill, at a smaller size. */
.btn-login {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 9px 12px;
    transition: color 0.3s;
}

.btn-login:hover {
    color: var(--secondary-dark);
}

.nav-cta {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 9px 18px;
    border-radius: 24px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all 0.3s;
}

.nav-cta:hover {
    background: var(--primary);
    color: var(--white);
}

.mobile-menu {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--primary);
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
}

.mobile-nav-actions {
    display: none;
}

/* Hero Section — full-bleed photograph with a bottom-weighted dark gradient
   and the caption sitting low, as on easyex.com. */
.hero {
    position: relative;
    background-color: var(--primary);
    background-image: url("../images/carousel-hero.35dfb498e313.jpg");
    background-image: image-set(url("../images/carousel-hero.b79e38310398.webp") type("image/webp"),
                                url("../images/carousel-hero.35dfb498e313.jpg") type("image/jpeg"));
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--white);
    min-height: 505px;
    display: flex;
    align-items: flex-end;
    padding: 5rem 2rem 3.5rem;
    text-align: center;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%);
}

.hero > .container {
    position: relative;
    z-index: 1;
}

.hero h1 {
    text-transform: uppercase;
    margin-bottom: 25px;
    animation: fadeInUp 0.8s;
}

.hero p {
    font-weight: 300;
    font-size: 25px;
    line-height: 35px;
    margin-bottom: 27px;
}

.hero-badges {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.badge {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.5);
    padding: 0.4rem 1.25rem;
    border-radius: 24px;
    font-size: 15px;
    letter-spacing: 1px;
    backdrop-filter: blur(10px);
}

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

/* Buttons — uppercase outline pills. On a dark background they invert to
   solid white on hover; on light they fill with navy. */
.btn-primary, .btn-secondary {
    font-size: 15px;
    line-height: 18px;
    padding: 14px 25px 14px 20px;
    border-radius: 24px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    transition: all 0.3s;
    display: inline-block;
    border: 1px solid transparent;
    cursor: pointer;
}

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

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

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

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

/* Over photographs and dark panels both buttons go white-outline. */
.hero .btn-primary,
.hero .btn-secondary,
.cta-section .btn-primary,
.cta-section .btn-secondary {
    background: transparent;
    border-color: var(--white);
    color: var(--white);
}

.hero .btn-primary:hover,
.hero .btn-secondary:hover,
.cta-section .btn-primary:hover,
.cta-section .btn-secondary:hover {
    background: var(--white);
    border-color: transparent;
    color: var(--primary);
}

.btn-large {
    padding: 16px 34px;
    font-size: 16px;
}

.btn-link {
    color: var(--secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    line-height: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s;
}

.btn-link:hover {
    color: var(--secondary-dark);
}

@media (min-width: 768px) {
    .hero {
        min-height: 700px;
        padding-bottom: 5rem;
    }
}

/* Sections — easyex.com's "tier" rhythm: left-aligned eyebrow + heading,
   then a flat row of columns with no card chrome. */
.features, .quick-services {
    padding: 71px 2rem 33px;
    background: var(--white);
}

.quick-services {
    padding-top: 58px;
    padding-bottom: 15px;
}

.section-title {
    text-align: left;
    font-size: 38px;
    line-height: 46px;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 20px;
}

.section-subtitle {
    text-align: left;
    font-weight: 300;
    font-size: 18px;
    line-height: 21px;
    color: var(--text-light);
    margin-bottom: 3rem;
    max-width: 900px;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: transparent;
    padding: 0 0 50px;
    border-radius: 0;
    text-align: left;
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-3px);
}

/* Highlighted variant — replaces the amber inline styles that used to be
   hardcoded in the block templates. See "HIGHLIGHT VARIANTS" at the end of
   this file for the rest of the family. */
.feature-card.is-featured {
    background: var(--light-bg);
    border-left: 3px solid var(--primary);
    padding: 2rem;
}

.feature-card.is-featured h3 {
    color: var(--primary);
}

.feature-icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 18px;
}

.feature-card.is-featured .feature-icon {
    font-size: 48px;
}

.feature-card h3 {
    font-size: 30px;
    line-height: 35px;
    font-weight: 400;
    margin-bottom: 18px;
    color: var(--text);
}

.feature-card p {
    font-weight: 300;
    font-size: 18px;
    line-height: 21px;
    color: var(--text-light);
}

/* Services Preview — square-cornered photo, then heading, copy, more-link. */
.services-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.service-preview-card {
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    padding-bottom: 50px;
    transition: transform 0.3s;
}

.service-preview-card:hover {
    transform: translateY(-3px);
}

.service-preview-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    margin-bottom: 27px;
}

.service-preview-card h3 {
    font-size: 30px;
    line-height: 35px;
    font-weight: 400;
    color: var(--text);
    padding: 0 0 18px;
}

.service-preview-card p {
    padding: 0;
    font-weight: 300;
    font-size: 18px;
    line-height: 21px;
    color: var(--text-light);
    margin-bottom: 24px;
}

.service-preview-card .btn-link {
    display: inline-block;
    padding: 0;
}

/* Stats — the navy band of figures that sits under the hero. */
.stats-section {
    padding: 3rem 2rem 2rem;
    background: var(--primary);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.stat-item {
    text-align: center;
    background: transparent;
    padding: 0 0 20px;
    border-radius: 0;
    box-shadow: none;
}

.stat-number {
    font-size: 48px;
    line-height: 1.1;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.stat-label {
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

/* CTA Section — the near-black band before the footer. */
.cta-section {
    padding: 53px 2rem 3px;
    background: var(--dark);
    text-align: center;
    color: var(--white);
}

.cta-section h2 {
    font-size: 38px;
    line-height: 46px;
    font-weight: 400;
    margin-bottom: 11px;
}

.cta-section p {
    font-weight: 300;
    font-size: 18px;
    line-height: 21px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 18px;
}

/* Breadcrumbs bar between the last section and the footer. */
.breadcrumbs {
    background: var(--white);
    color: var(--text-light);
    text-transform: uppercase;
    font-size: 15px;
    line-height: 16px;
    padding: 35px 0;
}

.breadcrumbs .container {
    display: flex;
    justify-content: space-between;
}

.breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Footer — navy block over a darker copyright strip. */
footer {
    background: var(--primary);
    color: var(--white);
    padding: 0;
}

.footer-content {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    padding: 54px 2rem 20px;
}

.footer-section h3 {
    margin-bottom: 18px;
    margin-top: 8px;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

.footer-section p {
    color: rgba(255,255,255,0.61);
    margin-top: 25px;
    font-weight: 300;
}

.footer-logo {
    display: inline-block;
}

.footer-logo img {
    display: block;
    width: 123px;
    height: 31px;
}

.footer-section ul {
    list-style: none;
    font-size: 15px;
    line-height: 18px;
}

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

.footer-section a {
    color: rgba(165,165,165,0.9);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: var(--white);
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.social-links a:hover {
    background: var(--secondary-dark);
}

.footer-bottom {
    text-align: center;
    background: var(--primary-dark);
    padding: 34px 2rem;
    border-top: none;
    color: rgba(255,255,255,0.5);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
/* Eight nav items plus two CTAs and four locales is more than easyex.com's bar
   carries, and Inter sets wider than Metric did, so the bar gives up tracking
   and padding well before it gives up a line. */
@media (max-width: 1500px) {
    .logo {
        padding-right: 0.75rem;
    }

    .nav-links {
        gap: 0.65rem;
    }

    .nav-links a {
        font-size: 13px;
        letter-spacing: 0;
    }

    .btn-login {
        font-size: 13px;
        padding: 9px 6px;
    }

    .nav-cta {
        font-size: 13px;
        padding: 8px 12px;
    }

    .lang-switcher {
        margin-left: 8px;
    }

    .lang-btn {
        font-size: 12px;
        padding: 2px 2px;
    }
}

@media (max-width: 1150px) {
    .nav-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .logo img {
        width: 130px;
        height: 24px;
    }

    .nav-links {
        gap: 0.5rem;
    }

    .nav-links a {
        font-size: 12px;
    }
}

/* Collapse to the hamburger at 1279, not 768: eight links plus two CTAs and
   four locale names need ~1240px, so anything narrower used to run off the
   right edge. The hamburger panel already carries the CTAs and the locale
   switcher, so nothing is lost. Markup and the classes main.js toggles are
   unchanged — only the width at which the collapsed layout takes over. */
@media (max-width: 1279px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        padding: 1rem 2rem;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        z-index: 100;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        font-size: 16px;
        letter-spacing: 0.5px;
    }

    .mobile-nav-actions.open {
        display: block;
        padding: 0 2rem 1.5rem;
        background: var(--white);
    }

    .mobile-nav-cta {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-nav-cta a {
        display: block;
        text-align: center;
        padding: 12px;
        border-radius: 24px;
        font-weight: 600;
        text-decoration: none;
        min-height: 44px;
    }

    .nav-actions {
        display: none;
    }

    .mobile-menu {
        display: flex;
    }

    .logo img {
        width: 150px;
        height: 28px;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 16px;
        line-height: 1.6;
    }

    .hero h1 {
        font-size: 34px;
        line-height: 38px;
    }

    .hero p {
        font-size: 18px;
        line-height: 24px;
    }

    .hero .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero .hero-actions .btn,
    .hero .hero-actions a {
        width: 100%;
        text-align: center;
        min-height: 44px;
    }

    .section-title {
        font-size: 28px;
        line-height: 34px;
    }

    section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .features,
    .quick-services {
        padding: 40px 2rem 10px;
    }

    .feature-card h3,
    .service-preview-card h3 {
        font-size: 24px;
        line-height: 30px;
    }

    .cta-section h2 {
        font-size: 28px;
        line-height: 34px;
    }

    .stat-number {
        font-size: 36px;
    }

    .breadcrumbs {
        padding: 24px 0;
    }

    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .features-grid,
    .services-preview {
        grid-template-columns: 1fr;
    }

    .stats-section .stats-grid,
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .btn, button {
        min-height: 44px;
    }

    .footer-content {
        flex-direction: column;
    }

    .footer-section {
        width: 100%;
        margin-bottom: 24px;
    }

    .page-header {
        padding: 2rem 1rem 1.5rem;
    }

    .page-header h1 {
        font-size: 1.8rem;
    }

    .hero-image {
        display: none;
    }
}
/* ==========================
   PAGE-SPECIFIC STYLES
   ========================== */

/* Page Header (Common for most pages) — the subpage equivalent of the home
   hero: same photograph treatment, shorter, title centred. */
.page-header {
    position: relative;
    background-color: var(--primary);
    background-image: url("../images/hero.ff0222c48e30.jpg");
    background-image: image-set(url("../images/hero.e16c51da8e4b.webp") type("image/webp"),
                                url("../images/hero.ff0222c48e30.jpg") type("image/jpeg"));
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--white);
    padding: 106px 2rem 95px;
    text-align: center;
}

.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.55) 100%);
}

.page-header > * {
    position: relative;
    z-index: 1;
}

.page-header h1 {
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.page-header p {
    font-weight: 300;
    font-size: 25px;
    line-height: 35px;
}

/* Form Styles (Common for login, register, contact) */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #374151;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.9rem;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
}

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

.form-error {
    color: var(--error);
    font-size: 0.9rem;
    margin-top: 0.3rem;
}

.submit-btn {
    width: 100%;
    background: var(--primary);
    color: white;
    padding: 1rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.submit-btn:hover {
    background: var(--primary-dark);
}

/* ==========================
   LOGIN & REGISTER PAGES
   ========================== */
.login-page, .register-page {
    min-height: 100vh;
    background: var(--light-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login-container, .register-container {
    max-width: 900px;
    width: 100%;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.register-container {
    max-width: 1000px;
}

.login-left, .register-left {
    background: var(--primary);
    color: white;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-left {
    align-items: center;
    text-align: center;
}

.login-left h2, .register-left h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.login-left p, .register-left p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.login-illustration {
    font-size: 8rem;
    margin-bottom: 2rem;
}

.stats-row {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
}

.stat {
    flex: 1;
}

.stat .number {
    font-size: 2rem;
    font-weight: bold;
    color: var(--secondary);
}

.stat .label {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-top: 0.3rem;
}

.login-right, .register-right {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-header, .register-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-header .logo, .register-header .logo {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary);
    margin-bottom: 1rem;
}

.login-header h3, .register-header h3 {
    color: var(--primary);
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.login-header p, .register-header p {
    color: var(--text-light);
}

.benefits-list {
    list-style: none;
}

.benefits-list li {
    padding: 1rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.05rem;
}

.benefits-list i {
    font-size: 1.5rem;
    color: var(--secondary);
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.form-footer {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--text-light);
}

.form-footer a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.form-footer a:hover {
    text-decoration: underline;
}

/* ==========================
   SERVICES PAGE
   ========================== */
.services-detail {
    padding: 5rem 2rem;
}

.service-detail-item {
    display: flex;
    gap: 3rem;
    margin-bottom: 5rem;
    align-items: center;
}

.service-detail-item:nth-child(even) {
    flex-direction: row-reverse;
}

.service-image {
    flex: 1;
    min-width: 400px;
}

.service-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.service-content {
    flex: 1;
}

.service-content h2 {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.service-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
    color: var(--text-light);
}

.service-features {
    list-style: none;
    margin: 2rem 0;
}

.service-features li {
    padding: 0.8rem 0;
    padding-left: 2rem;
    position: relative;
    font-size: 1.1rem;
}

.service-features li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: bold;
    font-size: 1.3rem;
}

.price-highlight {
    background: var(--primary);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    margin-top: 2rem;
    display: inline-block;
}

.price-highlight strong {
    font-size: 2rem;
}

/* ==========================
   PRICING PAGE
   ========================== */
.pricing-section {
    padding: 5rem 2rem;
}

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

.pricing-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    border: 2px solid transparent;
}

.pricing-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
}

.pricing-card.featured {
    border-color: var(--secondary);
    position: relative;
}

.featured-badge {
    position: absolute;
    top: -15px;
    right: 20px;
    background: var(--secondary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
}

.pricing-card h3 {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.price {
    font-size: 3rem;
    font-weight: bold;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.price-unit {
    font-size: 1rem;
    color: var(--text-light);
}

.price-features {
    list-style: none;
    margin: 2rem 0;
}

.price-features li {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.price-features li:last-child {
    border-bottom: none;
}

.check-icon {
    color: var(--success);
    font-size: 1.2rem;
}

.calculator-section {
    background: var(--light-bg);
    padding: 3rem;
    border-radius: 12px;
    margin-bottom: 3rem;
}

.calculator-section h3 {
    color: var(--primary);
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: center;
}

.calculator-form {
    max-width: 600px;
    margin: 0 auto;
}

.calculate-btn {
    width: 100%;
    background: var(--primary);
    color: white;
    padding: 1rem;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.calculate-btn:hover {
    background: var(--primary-dark);
}

.result-box {
    margin-top: 2rem;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    border-left: 4px solid var(--success);
    display: none;
}

.result-box.show {
    display: block;
}

/* ==========================
   WAREHOUSES PAGE
   ========================== */
.map-section {
    padding: 3rem 2rem;
    background: white;
}

.map-container {
    background: var(--light-bg);
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.map-placeholder {
    width: 100%;
    max-width: 1000px;
    height: 500px;
    background: var(--dark);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
}

.map-placeholder i {
    font-size: 5rem;
    margin-bottom: 2rem;
}

.region-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.region-btn {
    padding: 0.8rem 1.5rem;
    border: 2px solid var(--border);
    background: white;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
}

.region-btn:hover,
.region-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.warehouse-list {
    padding: 3rem 2rem;
}

.warehouse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.warehouse-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.warehouse-card:hover {
    transform: translateY(-5px);
}

.warehouse-card h3 {
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.warehouse-info {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.warehouse-info-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--text-light);
}

.warehouse-info-item i {
    color: var(--primary);
    width: 20px;
}

/* ==========================
   REVIEWS PAGE
   ========================== */
.stats-banner {
    background: white;
    padding: 3rem 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.stats-banner .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
}

.stat-box {
    padding: 1rem;
}

.stat-box .number {
    font-size: 3rem;
    font-weight: bold;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.stat-box .label {
    color: var(--text-light);
    font-size: 1.1rem;
}

.reviews-section {
    padding: 5rem 2rem;
}

.review-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.8rem 1.5rem;
    border: 2px solid var(--border);
    background: white;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
}

.filter-btn:hover,
.filter-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.review-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.review-card:hover {
    transform: translateY(-5px);
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.reviewer-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--light-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary);
}

.reviewer-details h4 {
    color: var(--text);
    margin-bottom: 0.3rem;
}

.reviewer-meta {
    color: var(--text-light);
    font-size: 0.9rem;
}

.rating {
    color: var(--secondary);
    margin-bottom: 1rem;
}

.review-text {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.review-service {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: var(--light-bg);
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--text-light);
}

/* ==========================
   HOW IT WORKS PAGE
   ========================== */
.workflow-section {
    padding: 5rem 2rem;
}

.tabs {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.tab-btn {
    padding: 1rem 2rem;
    border: 2px solid var(--border);
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
    font-size: 1rem;
}

.tab-btn:hover {
    border-color: var(--primary);
}

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

.service-flow {
    display: none;
}

.service-flow.active {
    display: block;
}

.steps-container {
    max-width: 1000px;
    margin: 0 auto;
}

.step-item {
    display: flex;
    gap: 3rem;
    margin-bottom: 5rem;
    align-items: center;
    position: relative;
}

.step-item:nth-child(even) {
    flex-direction: row-reverse;
}

.step-item::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2.5rem;
    width: 2px;
    height: 2rem;
    background: var(--border);
    transform: translateX(-50%);
}

.step-item:last-child::after {
    display: none;
}

.step-number {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
}

.step-content {
    flex: 1;
}

.step-content h3 {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.step-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-light);
}

/* ==========================
   ABOUT PAGE
   ========================== */
.mission-section {
    padding: 5rem 2rem;
    text-align: center;
}

.mission-quote {
    font-size: 2.5rem;
    color: var(--primary);
    font-weight: 600;
    font-style: italic;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.mission-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #374151;
    max-width: 900px;
    margin: 0 auto 2rem;
}

.company-info-section {
    padding: 5rem 2rem;
    background: var(--light-bg);
}

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

.info-card {
    background: white;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.info-card h3 {
    color: var(--primary);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.info-card p {
    color: var(--text-light);
    line-height: 1.6;
}

/* ==========================
   CONTACT PAGE
   ========================== */
.contact-section {
    padding: 5rem 2rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-form {
    background: white;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.contact-form h2 {
    color: var(--primary);
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

.contact-info {
    background: white;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.contact-info h2 {
    color: var(--primary);
    margin-bottom: 2rem;
    font-size: 2rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.contact-details h3 {
    color: var(--text);
    margin-bottom: 0.5rem;
}

.contact-details p {
    color: var(--text-light);
}

/* ==========================
   RESPONSIVE DESIGN ADDITIONS
   ========================== */
@media (max-width: 768px) {
    /* This block sits after the .page-header base rule, so unlike the earlier
       768px block it actually wins. Keep the photo, shrink the band. */
    .page-header {
        padding: 56px 1rem 48px;
    }

    .page-header h1 {
        font-size: 2rem;
    }

    .page-header p {
        font-size: 18px;
        line-height: 24px;
    }

    .service-detail-item,
    .service-detail-item:nth-child(even) {
        flex-direction: column;
    }

    .service-image {
        min-width: 100%;
    }

    .service-content h2 {
        font-size: 1.8rem;
    }

    .login-container,
    .register-container {
        grid-template-columns: 1fr;
    }

    .login-left,
    .register-left {
        padding: 2rem;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .step-item,
    .step-item:nth-child(even) {
        flex-direction: column;
        text-align: center;
    }

    .step-item::after {
        display: none;
    }

    .warehouse-grid {
        grid-template-columns: 1fr;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .pricing-cards {
        grid-template-columns: 1fr;
    }
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
    flex-shrink: 0;
}

.lang-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    color: inherit;
    white-space: nowrap;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.lang-btn:hover {
    opacity: 1;
}

.lang-btn.active {
    opacity: 1;
    font-weight: bold;
    color: var(--secondary);
}

.lang-divider {
    opacity: 0.4;
    font-size: 12px;
}

/* ============================================================
   Pricing Page (New)
   ============================================================ */

.pricing-new-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-new-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pricing-new-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-6px);
}

.pricing-new-card:nth-child(2) {
    border: 2px solid var(--secondary);
}

.pricing-new-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.pricing-new-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.pricing-new-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.pricing-new-unit {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-light);
}

.pricing-new-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
    width: 100%;
    flex-grow: 1;
}

.pricing-new-features li {
    padding: 0.4rem 0;
    font-size: 0.95rem;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.pricing-new-features li i {
    color: var(--success);
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.pricing-new-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--secondary);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    white-space: nowrap;
}

.pricing-new-card .btn-primary {
    width: 100%;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    margin-top: auto;
}

/* Info Section (Storage & Additional) */
.info-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
    padding: 2rem;
    background: var(--light-bg);
    border-radius: 12px;
}

.info-item h4 {
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.info-item p {
    color: var(--text-light);
    font-size: 0.95rem;
}

/* Cost Calculator */
.calc-section {
    margin: 3rem 0;
    padding: 2.5rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.calc-section .section-title {
    margin-bottom: 0.5rem;
}

.calc-section .section-subtitle {
    color: var(--text-light);
    margin-bottom: 2rem;
}

.calc-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 700px;
}

.calc-form .form-group {
    display: flex;
    flex-direction: column;
}

.calc-form label {
    font-weight: 600;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
}

.calc-form input,
.calc-form select {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
}

.calc-form small {
    color: var(--text-light);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.calc-form .btn-primary {
    grid-column: 1 / -1;
    justify-self: start;
}

.calc-result-box {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--light-bg);
    border-radius: 8px;
}

.calc-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.calc-table th,
.calc-table td {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--border);
}

.calc-table th {
    font-weight: 600;
    color: var(--text-light);
    font-size: 0.85rem;
    text-transform: uppercase;
}

.calc-table td:last-child,
.calc-table th:last-child {
    text-align: right;
}

.calc-total {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
    text-align: right;
    padding: 0.5rem 0.8rem;
}

.calc-note,
.calc-disclaimer {
    font-size: 0.8rem;
    color: var(--text-light);
    text-align: right;
    margin-top: 0.25rem;
}

/* FAQ Section */
.faq-section {
    margin: 3rem 0;
}

.faq-section .section-title {
    margin-bottom: 2rem;
}

.faq-item {
    border-bottom: 1px solid var(--border);
    padding: 1.25rem 0;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-q {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.faq-q::before {
    content: 'Q: ';
    color: var(--primary);
    font-weight: 700;
}

.faq-a {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.7;
    padding-left: 1.5rem;
}

.faq-a::before {
    content: 'A: ';
    color: var(--success);
    font-weight: 700;
}

.faq-section {
    background: var(--light-bg);
    padding: 2.5rem;
    border-radius: 12px;
}

/* Responsive: Pricing New Cards */
@media (max-width: 640px) {
    .pricing-new-cards {
        grid-template-columns: 1fr;
    }

    .calc-form {
        grid-template-columns: 1fr;
    }

    .info-section {
        grid-template-columns: 1fr;
    }

    .info-section {
        grid-template-columns: 1fr;
    }

    .calc-form {
        grid-template-columns: 1fr;
    }

    .calc-total {
        text-align: left;
    }

    .calc-note,
    .calc-disclaimer {
        text-align: left;
    }
}

/* ==========================
   HIGHLIGHT VARIANTS
   ==========================
   These rules replace inline style="…" attributes that used to be hardcoded in
   the CMS block templates with the old amber palette. Keeping them here means a
   brand change follows the tokens instead of needing a template edit. */

/* Mission callout (mission_block.html) */
.mission-callout {
    background: var(--light-bg);
    border-left: 3px solid var(--primary);
    padding: 2rem;
    margin: 2rem auto;
    max-width: 900px;
}

.mission-callout h3 {
    color: var(--primary);
    text-align: center;
    margin-bottom: 1rem;
}

.mission-callout-body {
    color: var(--text-light);
    text-align: center;
    font-weight: 300;
    font-size: 18px;
    line-height: 26px;
}

/* Featured review (reviews_block.html) */
.review-card.is-featured {
    background: var(--light-bg);
    border-left: 4px solid var(--primary);
}

.review-badge {
    background: var(--primary);
    color: var(--white);
    padding: 0.3rem 0.9rem;
    border-radius: 24px;
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Highlighted service (service_detail_block.html) */
.service-highlight {
    background: var(--light-bg);
    border-left: 3px solid var(--primary);
    padding: 2rem;
    margin-bottom: 4rem;
}

.service-highlight .service-detail-item {
    margin-bottom: 0;
}

/* The badge sits above the item inside the highlight wrapper, which makes the
   item :nth-child(2) and hands it the row-reverse meant for even items — so the
   featured service came out mirrored against the alternating run below it.
   Pin it to image-left/content-right and the whole page alternates cleanly.
   Guarded above the phone breakpoint so it can't beat the column stacking. */
@media (min-width: 769px) {
    .service-highlight .service-detail-item {
        flex-direction: row;
    }
}

.service-highlight-badge {
    text-align: center;
    margin-bottom: 2rem;
}

.service-highlight-badge span {
    background: var(--primary);
    color: var(--white);
    padding: 0.5rem 1.5rem;
    border-radius: 24px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.service-tagline {
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: 600;
}

.service-case {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 2rem;
}

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

/* Sits on the navy price block, so state the colour rather than inheriting a
   muted body-copy grey that would drop the contrast. */
.price-note {
    font-size: 0.9rem;
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
}

.service-suitable {
    margin-top: 1rem;
}

/* Contact help cards and social row (contact_form_block.html).
   .help-grid/.help-card had no styling at all before, so they stacked full
   width; they now follow the same flat column rhythm as the feature tier. */
.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

.help-card {
    padding: 0 0 20px;
}

.help-card i {
    font-size: 32px;
    color: var(--primary);
    margin-bottom: 18px;
    display: block;
}

.help-card h3 {
    font-size: 24px;
    line-height: 30px;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 12px;
}

.help-card p {
    font-weight: 300;
    font-size: 18px;
    line-height: 21px;
    color: var(--text-light);
    margin-bottom: 16px;
}

.help-card a {
    color: var(--secondary);
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.help-card a:hover {
    color: var(--secondary-dark);
}

.help-card.is-featured {
    background: var(--light-bg);
    border-left: 3px solid var(--primary);
    padding: 2rem;
}

.help-card.is-featured i,
.help-card.is-featured h3,
.help-card.is-featured a {
    color: var(--primary);
}

.contact-social {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.contact-social a {
    width: 50px;
    height: 50px;
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.5rem;
    transition: transform 0.3s;
}

.contact-social a:hover {
    transform: scale(1.1);
}

/* Workflow intro (workflow_block.html) */
.workflow-intro {
    text-align: center;
    margin-bottom: 3rem;
}

.workflow-intro.is-featured {
    background: var(--light-bg);
    border-left: 3px solid var(--primary);
    padding: 2rem;
}

.workflow-badge {
    background: var(--primary);
    color: var(--white);
    padding: 0.5rem 1.5rem;
    border-radius: 24px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.workflow-intro h2 {
    color: var(--primary);
    font-size: 38px;
    line-height: 46px;
    font-weight: 400;
}

.workflow-intro h2.is-muted {
    color: var(--text-light);
}

.workflow-intro .workflow-badge + h2 {
    margin-top: 1rem;
}

.workflow-intro p {
    color: var(--text-light);
    font-weight: 300;
    font-size: 18px;
    line-height: 26px;
    margin-top: 0.5rem;
}

/* The circle inside is already navy, so the featured box reads as a tinted
   surround rather than another solid block of the same colour. */
.step-number-box.is-featured {
    background: var(--light-bg);
    border: 1px solid var(--primary);
    border-radius: 12px;
    padding: 0.75rem;
}

.step-note {
    margin-top: 1rem;
    color: var(--text-light);
    font-size: 0.95rem;
}

/* ==========================
   CONTACT FORM STATUS
   ========================== */

/* Honeypot. Off-canvas rather than display:none — some bots skip hidden fields
   but fill positioned ones, and this keeps it out of the tab order either way. */
.cf-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-status {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 4px;
    font-size: 0.95rem;
    white-space: pre-line;
}

.contact-status:empty {
    display: none;
}

.contact-status.is-pending {
    background: var(--light-bg);
    color: var(--text-light);
}

.contact-status.is-success {
    background: #EEF6EE;
    color: #1B5E20;
    border: 1px solid #C6E3C6;
}

.contact-status.is-error {
    background: #FDECEC;
    color: #991B1B;
    border: 1px solid #F5C6C6;
}

.contact-sent {
    font-size: 1rem;
    line-height: 1.6;
    padding: 1.5rem;
}

.submit-btn[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}