:root {
    --background: #f7f5ef;
    --ivory-panel: #f7f5ef;
    --ivory-warm: #f7f5ef;
    --sage-light: #7a9b8e20;

    /* Light Accents (borders, icons, light text) */
    --sage-border: #7a9b8e60;
    --sage-soft: #7a9b8e;
    --gold-light: #c9a14a;

    /* Medium Primary (gold accents, interactive elements) */
    --gold-primary: #c9a14a;

    /* Dark Text and Backgrounds */
    --text-primary: #0b1f3a;
    --navy-deep: #0b1f3a;

    /* Very Dark (shadows, button hover) */
    --navy-darker: #07152a;
    --navy-hover: #1a3152;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
    background: var(--background);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    background: white;
    box-shadow: 0 10px 30px rgba(0, 45, 85, 0.1);
}

header {
    background: var(--navy-deep);
    color: white;
    padding: 1.2rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.logo-area span {
    font-size: 2.2rem;
    color: var(--sage-soft);
}
.logo-area .brand {
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: 1px;
}
.brand small {
    font-size: 0.9rem;
    display: block;
    color: var(--sage-soft);
    line-height: 1.2;
}

.nav-links {
    display: flex;
    gap: 2.2rem;
}
.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding-bottom: 0.2rem;
    border-bottom: 2px solid transparent;
    transition: 0.2s;
}
.nav-links a:hover {
    border-bottom-color: var(--gold-light);
}
.nav-links .material-symbols-rounded {
    font-size: 1.4rem;
}

footer {
    background: var(--navy-deep);
    color: white;
    padding: 1.5rem 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    font-size: 0.95rem;
}
footer .material-symbols-rounded {
    color: var(--gold-light);
}

/* main content – flex column */
main {
    flex: 1;
    padding: 2.5rem 2.5rem;
}

/* section headings */
h2 {
    font-size: 2rem;
    font-weight: 450;
    color: var(--text-primary);
    border-left: 6px solid var(--gold-primary);
    padding-left: 1.2rem;
    margin-bottom: 2.2rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

/* ----- index specific sections (flexbox, no grid) ----- */
.marketing-block {
    background: linear-gradient(145deg, var(--ivory-warm), var(--ivory-warm));
    border-radius: 2.5rem;
    padding: 3rem 3rem;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
.marketing-block h1 {
    font-size: 3rem;
    font-weight: 400;
    color: var(--navy-deep);
    max-width: 800px;
    line-height: 1.2;
}
.marketing-tag {
    background: var(--navy-deep);
    color: white;
    padding: 0.5rem 1.8rem;
    border-radius: 40px;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}
.marketing-tag .material-symbols-rounded {
    font-size: 1.8rem;
}

/* service cards – flex row */
.service-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.8rem;
    margin-bottom: 2.8rem;
}
.service-card {
    background: var(--ivory-panel);
    border-radius: 2rem;
    padding: 2rem 1.5rem;
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 6px 12px rgba(0,50,90,0.06);
    transition: 0.15s;
}
.service-card:hover {
    background: var(--ivory-warm);
}
.service-card .material-symbols-rounded {
    font-size: 2.8rem;
    color: var(--gold-primary);
    margin-bottom: 1rem;
}
.service-card h3 {
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.service-card p {
    color: var(--text-primary);
}

/* contact section – flex row */
.contact-panel {
    background: var(--sage-light);
    border-radius: 2.5rem;
    padding: 2rem 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 3.5rem;
    align-items: center;
    margin-top: 1.8rem;
}
.contact-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.contact-item .material-symbols-rounded {
    background: var(--navy-deep);
    color: white;
    padding: 0.5rem;
    border-radius: 50%;
    font-size: 1.8rem;
}
.gaborone-highlight {
    font-weight: 600;
    color: var(--navy-deep);
}

/* ---------- FAQ page specific (flex column) ---------- */
.faq-container {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.faq-item {
    background: var(--ivory-panel);
    border-radius: 1.8rem;
    border-left: 6px solid var(--gold-primary);
    padding: 0.2rem 2rem;
}
.faq-question {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.6rem 0 1rem 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--navy-deep);
    cursor: pointer;
    user-select: none;
}
.faq-question .material-symbols-rounded {
    color: var(--gold-primary);
    transition: transform 0.2s;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.2s;
    padding: 0 1.8rem 0 3rem;
    color: var(--text-primary);
    line-height: 1.5;
}
.faq-item.open .faq-answer {
    max-height: 250px;    /* enough for answers */
    padding: 0 1.8rem 1.5rem 3rem;
}
.faq-item.open .faq-question .material-symbols-rounded {
    transform: rotate(90deg);
}

/* ---------- apply page form (flex column) ---------- */
.form-card {
    background: var(--ivory-panel);
    border-radius: 2.5rem;
    padding: 2.5rem 3rem;
    max-width: 800px;
    margin: 1rem auto;
}
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.8rem;
}
.form-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--navy-deep);
    margin-bottom: 0.3rem;
}
.form-group label .material-symbols-rounded {
    font-size: 1.4rem;
}
input, select, textarea {
    padding: 1rem 1.5rem;
    border: 2px solid var(--sage-border);
    border-radius: 50px;
    font-size: 1rem;
    background: white;
    outline: none;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--gold-primary);
}
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    background: white;
    padding: 0.9rem 1.8rem;
    border-radius: 50px;
    border: 2px solid var(--sage-border);
}
.radio-option {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
button {
    background: var(--navy-deep);
    border: none;
    color: white;
    font-size: 1.3rem;
    padding: 1rem 2.5rem;
    border-radius: 60px;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
    box-shadow: 0 5px 0 var(--navy-darker);
    cursor: pointer;
    transition: 0.1s;
    margin-top: 1rem;
}
button:hover {
    background: var(--navy-hover);
    transform: translateY(-2px);
    box-shadow: 0 7px 0 var(--navy-darker);
}

/* helper: active page indicator */
.active-page {
    border-bottom-color: var(--gold-light) !important;
}


/*.site-wrapper { display:flex; flex-direction:column; flex:1; max-width:1280px; margin:0 auto; width:100%; background:white; box-shadow:0 10px 30px rgba(0,45,85,0.1); }
header { background:var(--navy-deep); color:white; padding:1.2rem 2.5rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.logo-area { display:flex; align-items:center; gap:0.5rem; }
.logo-area span { font-size:2.2rem; color:var(--sage-soft); }
.brand { font-size:1.8rem; font-weight:300; } .brand small { font-size:0.9rem; display:block; color:var(--sage-soft); }
.nav-links { display:flex; gap:2.2rem; }
.nav-links a { color:white; text-decoration:none; font-weight:500; display:flex; align-items:center; gap:0.3rem; padding-bottom:0.2rem; border-bottom:2px solid transparent; transition:0.2s; }
.nav-links a:hover { border-bottom-color:var(--gold-light); }
.nav-links .material-symbols-rounded { font-size:1.4rem; }
footer { background:var(--navy-deep); color:white; padding:1.5rem 2rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2.5rem; }
main { flex:1; padding:2.5rem 2.5rem; }
h2 { font-size:2rem; font-weight:450; color:var(--text-primary); border-left:6px solid var(--gold-primary); padding-left:1.2rem; margin-bottom:2.2rem; display:flex; align-items:center; gap:0.7rem; }
.active-page { border-bottom-color:var(--gold-light) !important; }*/

/* identical global styles (vanilla, blue) */
/** { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--background); color:var(--text-primary); font-family:'Segoe UI',Roboto,sans-serif; display:flex; flex-direction:column; min-height:100vh; }
.site-wrapper { display:flex; flex-direction:column; flex:1; max-width:1280px; margin:0 auto; width:100%; background:white; box-shadow:0 10px 30px rgba(0,45,85,0.1); }
header { background:var(--navy-deep); color:white; padding:1.2rem 2.5rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.logo-area { display:flex; align-items:center; gap:0.5rem; }
.logo-area span { font-size:2.2rem; color:var(--sage-soft); }
.brand { font-size:1.8rem; font-weight:300; } .brand small { font-size:0.9rem; display:block; color:var(--sage-soft); }
.nav-links { display:flex; gap:2.2rem; }
.nav-links a { color:white; text-decoration:none; font-weight:500; display:flex; align-items:center; gap:0.3rem; padding-bottom:0.2rem; border-bottom:2px solid transparent; transition:0.2s; }
.nav-links a:hover { border-bottom-color:var(--gold-light); }
.nav-links .material-symbols-rounded { font-size:1.4rem; }
footer { background:var(--navy-deep); color:white; padding:1.5rem 2rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2.5rem; }
main { flex:1; padding:2.5rem 2.5rem; }
h2 { font-size:2rem; font-weight:450; color:var(--text-primary); border-left:6px solid var(--gold-primary); padding-left:1.2rem; margin-bottom:2.2rem; display:flex; align-items:center; gap:0.7rem; }
.active-page { border-bottom-color:var(--gold-light) !important; }*/

/* apply form styles */
.form-card {
    background: var(--ivory-panel);
    border-radius: 2.5rem;
    padding: 2.5rem 3rem;
    max-width: 800px;
    margin: 1rem auto;
}
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.8rem;
}
.form-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--navy-deep);
    margin-bottom: 0.3rem;
}
.form-group label .material-symbols-rounded {
    font-size: 1.4rem;
}
input, select, textarea {
    padding: 1rem 1.5rem;
    border: 2px solid var(--sage-border);
    border-radius: 50px;
    font-size: 1rem;
    background: white;
    outline: none;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--gold-primary);
}
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    background: white;
    padding: 0.9rem 1.8rem;
    border-radius: 50px;
    border: 2px solid var(--sage-border);
}
.radio-option {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
button {
    background: var(--navy-deep);
    border: none;
    color: white;
    font-size: 1.3rem;
    padding: 1rem 2.5rem;
    border-radius: 60px;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
    box-shadow: 0 5px 0 var(--navy-darker);
    cursor: pointer;
    transition: 0.1s;
    margin-top: 1rem;
}
button:hover {
    background: var(--navy-hover);
    transform: translateY(-2px);
    box-shadow: 0 7px 0 var(--navy-darker);
}
/* simple response message */
#formResponse {
    margin-top: 1.5rem;
    font-weight: 500;
    color: var(--navy-deep);
}

/* FAQ specific */
.faq-container { display:flex; flex-direction:column; gap:1.2rem; }
.faq-item { background:var(--ivory-panel); border-radius:1.8rem; border-left:6px solid var(--gold-primary); padding:0.2rem 2rem; }
.faq-question { display:flex; align-items:center; gap:1rem; padding:1.6rem 0 1rem 0; font-size:1.2rem; font-weight:600; color:var(--navy-deep); cursor:pointer; user-select:none; }
.faq-question .material-symbols-rounded { color:var(--gold-primary); transition:transform 0.2s; }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.25s ease, padding 0.2s; padding:0 1.8rem 0 3rem; color:var(--text-primary); line-height:1.5; }
.faq-item.open .faq-answer { max-height:250px; padding:0 1.8rem 1.5rem 3rem; }
.faq-item.open .faq-question .material-symbols-rounded { transform:rotate(90deg); }

.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 700px;
    margin: 2rem auto;
}

.error-code {
    font-size: 8rem;
    font-weight: 300;
    color: var(--navy-deep);
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
.error-code .material-symbols-rounded {
    font-size: 7rem;
    color: var(--gold-primary);
}

.error-message {
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--text-primary);
    margin: 1rem 0 1.5rem;
    border-left: 6px solid var(--gold-primary);
    padding-left: 1.5rem;
}

.error-description {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 2.5rem;
    max-width: 550px;
    background: var(--ivory-panel);
    padding: 1.5rem 2rem;
    border-radius: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    margin: 1.5rem 0;
}

.btn {
    background: var(--navy-deep);
    color: white;
    text-decoration: none;
    padding: 1rem 2.2rem;
    border-radius: 60px;
    font-size: 1.2rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    box-shadow: 0 5px 0 var(--navy-darker);
    transition: 0.1s;
    border: none;
    cursor: pointer;
}
.btn:hover {
    background: var(--navy-hover);
    transform: translateY(-2px);
    box-shadow: 0 7px 0 var(--navy-darker);
}
.btn-outline {
    background: transparent;
    color: var(--navy-deep);
    box-shadow: inset 0 0 0 2px var(--navy-deep), 0 4px 0 var(--sage-border);
}
.btn-outline:hover {
    background: var(--ivory-panel);
    transform: translateY(-2px);
}

.gaborone-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    margin-top: 2.5rem;
    font-size: 1rem;
}

/* no grid fallback */
@media (max-width: 600px) {
    .error-code { font-size: 5rem; }
    .error-code .material-symbols-rounded { font-size: 4.5rem; }
    .error-message { font-size: 1.8rem; }
}