/* ============================================================================
   Otium Business Solutions - the public website.

   One palette, kept in :root, taken from the company's own cover design: navy
   for authority, gold for emphasis, and one accent per division so the five
   cards are told apart at a glance rather than read one by one.
   ============================================================================ */

:root {
    --navy: #082d63;
    --navy-deep: #071f43;
    --blue: #0d4f9c;
    --gold: #d79a12;
    --gold-soft: #f1b72c;
    --green: #11743c;
    --purple: #64319b;
    --teal: #087f95;
    --ink: #10233f;
    --muted: #63758a;
    --line: #e1e8f0;
    --light: #f6f9fc;
    --radius: 22px;
    --shadow: 0 12px 30px rgba(15, 43, 75, .06);
    --shadow-lg: 0 25px 70px rgba(17, 43, 76, .14);
}

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

html {
    scroll-behavior: smooth;

    /* The header is fixed, so an anchor that lands exactly on a section would
       put its heading underneath the bar. This is the height of that bar. */
    scroll-padding-top: 84px;
}

body {
    font-family: 'Inter', Arial, Helvetica, sans-serif;

    /* Nothing on this page is meant to be scrolled sideways. This is the
       backstop; the widths below are the actual fix. */
    overflow-x: hidden;
    color: var(--ink);
    background: #fff;
    line-height: 1.6;
    font-size: 15.5px;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

/* Headings are set tight and only a step or two above the text they lead.
   A hero that shouts at 74px reads as a template; the same words at 48px,
   with the line closed up, read as a company. */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', 'Inter', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

/* ------------------------------------------------------------------ chrome */

.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 6vw;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(8, 45, 99, .08);
}

.logo {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 900;
    letter-spacing: .5px;
    color: var(--navy);
    font-size: 17.5px;
    line-height: 1.15;

    /* Without this the brand refuses to shrink and pushes the whole bar wider
       than the phone, which is what makes a page scroll sideways. */
    min-width: 0;
}

/* The brand is set as type, not as a picture. */
.logo .wordmark { min-width: 0; }
.logo .wordmark span { color: var(--gold); }
/* One line, the way the name is written on the letterhead:
   OTIUM BUSINESS SOLUTIONS PVT. LTD. - the suffix sits at the end of it,
   smaller and quieter, rather than dropping to a line of its own. */
.logo small {
    display: inline;
    font-size: .62em;
    letter-spacing: 1.6px;
    color: var(--muted);
    font-weight: 700;
    margin-left: 6px;
    white-space: nowrap;
}

.auth-logo { color: #fff; margin-bottom: 30px; }
.auth-logo .wordmark span { color: var(--gold-soft); }

.navlinks { display: flex; gap: 22px; font-size: 13.5px; font-weight: 700; color: #29415e; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.navlinks a { padding: 6px 0; border-bottom: 2px solid transparent; transition: .2s; }
.navlinks a:hover { color: var(--gold); border-color: var(--gold); }

.navlinks .btn-signin {
    border: 1.5px solid var(--navy);
    color: var(--navy);
    padding: 7px 16px;
    font-size: 13px;
    border-radius: 30px;
}
.navlinks .btn-signin:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    width: 42px; height: 38px;
    border-radius: 10px;
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--navy);
    margin: 5px auto;
    width: 22px;
    transition: .2s;
}

/* -------------------------------------------------------------------- hero */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(215, 154, 18, .13), transparent 25%),
        radial-gradient(circle at 85% 70%, rgba(13, 79, 156, .12), transparent 28%),
        linear-gradient(135deg, #fff 0%, #f4f8fd 100%);
}

.hero:before {
    content: ""; position: absolute;
    width: 650px; height: 650px;
    border: 1px solid rgba(13, 79, 156, .08);
    border-radius: 50%;
    right: -250px; top: -180px;
}

.hero:after {
    content: ""; position: absolute;
    width: 420px; height: 420px;
    border: 1px solid rgba(215, 154, 18, .12);
    border-radius: 50%;
    left: -180px; bottom: -170px;
}

.hero-content {
    width: min(1180px, 90%);
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 60px;
    align-items: center;
    z-index: 1;
    padding: 130px 0 70px;
}

.eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--gold);
    font-size: 11.5px; font-weight: 800; letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.eyebrow:before { content: ""; width: 28px; height: 2px; background: var(--gold); }

.hero h1 {
    font-size: clamp(31px, 3.8vw, 48px);
    line-height: 1.13;
    color: var(--navy);
    letter-spacing: -.025em;
    font-weight: 800;
}
.hero h1 span { color: var(--gold); }

.hero p.lead { font-size: 16.5px; color: #55697f; max-width: 560px; margin: 20px 0 30px; line-height: 1.65; }

.buttons { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 700;
    display: inline-block;
    border: 1.5px solid transparent;
    cursor: pointer;
    font-size: 14px;
    transition: .2s;
}
.btn.primary { background: var(--navy); color: #fff; box-shadow: 0 10px 25px rgba(8, 45, 99, .18); }
.btn.primary:hover { background: #0a3877; }
.btn.secondary { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn.secondary:hover { background: var(--navy); color: #fff; }
.btn.gold { background: var(--gold); color: #2b1d00; }
.btn.gold:hover { background: var(--gold-soft); }
.btn[disabled] { opacity: .6; cursor: default; }

.hero-card {
    position: relative;
    background: #fff;
    border-radius: 28px;
    padding: 30px;
    box-shadow: var(--shadow-lg);
    border: 1px solid #e4ebf3;
}
.hero-card h3 { color: var(--navy); font-size: 17px; margin-bottom: 18px; }

.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mini {
    padding: 16px 18px;
    border-radius: 16px;
    background: #f7f9fc;
    border-left: 4px solid var(--blue);
    font-weight: 700;
    font-size: 13px;
    transition: .2s;
}
.mini:hover { transform: translateX(3px); background: #eef4fb; }
.mini:nth-child(2) { border-color: var(--green); }
.mini:nth-child(3) { border-color: var(--purple); }
.mini:nth-child(4) { border-color: var(--teal); }
.mini:nth-child(5) { border-color: var(--gold); grid-column: 1/3; }

.stats { display: flex; gap: 25px; margin-top: 24px; padding-top: 22px; border-top: 1px solid #e5ebf2; }
.stat strong { display: block; font-size: 22px; color: var(--navy); font-family: 'Plus Jakarta Sans', sans-serif; }
.stat small { color: #68798d; font-size: 12px; }

/* ------------------------------------------------------- landing hero shot

   The home page hero is the company photograph with the words set into it.
   Everything here is scoped to .hero-shot so the division pages, which share
   the .hero class, keep their light two-tone treatment untouched.

   The band used to be min-height:100vh with a gradient behind it, which on a
   laptop meant most of the first screen was empty. Height now comes from the
   content, and the picture fills what is left.                              */

.hero.hero-shot {
    min-height: auto;
    display: block;
    background: #06192f;

    /* Keeps the blur in the glass tiles from reaching the page behind. */
    isolation: isolate;
}

/* The decorative outline circles belong to the light hero, not this one. */
.hero-shot:before,
.hero-shot:after { display: none; }

.hero-bg { position: absolute; inset: 0; z-index: 0; display: block; }
.hero-bg img {
    width: 100%; height: 100%;
    display: block;
    object-fit: cover;

    /* Slightly above centre: the people are in the middle band of the frame,
       the ceiling is not worth the pixels. */
    object-position: 50% 44%;
}

/* Two washes rather than one, and the balance between them is the whole
   design: heavy on the left so the words have something solid to sit on,
   almost nothing on the right so the photograph is actually seen. A single
   even wash made the picture invisible, which is the same as not using it. */
.hero-veil {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(100deg,
            rgba(6, 25, 52, .93) 0%,
            rgba(6, 25, 52, .87) 27%,
            rgba(6, 25, 52, .58) 48%,
            rgba(6, 25, 52, .22) 74%,
            rgba(6, 25, 52, .14) 100%),
        linear-gradient(180deg,
            rgba(6, 25, 52, .5) 0%,
            rgba(6, 25, 52, 0) 22%,
            rgba(6, 25, 52, .18) 58%,
            rgba(4, 16, 34, .72) 100%);
}

.hero-shot .hero-content {
    position: relative; z-index: 2;
    display: block;
    width: min(1180px, 90%);
    margin: 0 auto;
    padding: 132px 0 42px;
}

.hero-copy { max-width: 620px; }

.hero-shot h1 { color: #fff; text-shadow: 0 2px 26px rgba(3, 14, 32, .5); }
.hero-shot h1 span { color: var(--gold-soft); }
.hero-shot p.lead { color: rgba(255, 255, 255, .82); max-width: 548px; }
.hero-shot .eyebrow { color: var(--gold-soft); }
.hero-shot .eyebrow:before { background: var(--gold-soft); }

.hero-shot .btn.gold { box-shadow: 0 12px 30px rgba(4, 16, 34, .45); }
.hero-shot .btn.secondary { border-color: rgba(255, 255, 255, .6); color: #fff; background: rgba(255, 255, 255, .06); }
.hero-shot .btn.secondary:hover { background: #fff; color: var(--navy); border-color: #fff; }

.hero-stats { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 30px; }
.hero-stats strong {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 23px; line-height: 1.2; color: #fff;
}
.hero-stats small { color: rgba(255, 255, 255, .62); font-size: 12px; letter-spacing: .4px; }

/* The five divisions as glass tiles on the photograph - the same treatment
   the labels in the picture already use, and the jump links the old panel
   provided, without repeating the section immediately below. */
.hero-rail {
    position: relative; z-index: 2;
    width: min(1180px, 90%);
    margin: 0 auto;
    padding-bottom: 56px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

/* Smoked glass rather than white glass. White tiles look right over the dark
   left of the picture and disappear over the bright right of it; a dark tile
   holds white type wherever it lands. */
.hero-chip {
    display: block;
    padding: 15px 16px 14px;
    border-radius: 16px;
    color: #fff;
    background: rgba(7, 26, 55, .5);
    border: 1px solid rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    transition: .2s;
}
.hero-chip:hover { background: rgba(7, 26, 55, .68); border-color: rgba(255, 255, 255, .34); transform: translateY(-3px); }
.hero-chip b { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.6px; color: rgba(255, 255, 255, .6); margin-bottom: 5px; }
.hero-chip span { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.35; }

/* The division's colour, lifted to something that reads on navy - the theme
   accents themselves are dark by design and vanish here. */
.hero-chip i { display: block; height: 3px; width: 24px; border-radius: 3px; margin-top: 12px; background: #6aa9ff; }
.hero-chip:nth-child(2) i { background: #6fd08c; }
.hero-chip:nth-child(3) i { background: #b98cf0; }
.hero-chip:nth-child(4) i { background: #5ed0e6; }
.hero-chip:nth-child(5) i { background: #f1b72c; }

/* ---------------------------------------------------------------- sections */

.section { padding: 76px 6vw; }
.section.alt { background: var(--light); }

.container { width: min(1180px, 100%); margin: auto; }

.section-title { text-align: center; margin-bottom: 46px; }
.section-title .eyebrow { justify-content: center; }
.section-title h2 { font-size: clamp(24px, 2.7vw, 33px); color: var(--navy); line-height: 1.22; }
.section-title p { max-width: 660px; margin: 13px auto 0; color: var(--muted); font-size: 15px; }

.cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 27px 22px;
    box-shadow: var(--shadow);
    transition: .25s;
}
.card:hover { transform: translateY(-7px); box-shadow: 0 20px 45px rgba(15, 43, 75, .12); }

.icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: grid; place-items: center;
    background: #eef4fb;
    color: var(--navy);
    font-size: 22px;
    margin-bottom: 18px;
}
.card:nth-child(2) .icon { background: #edf8f1; color: var(--green); }
.card:nth-child(3) .icon { background: #f3edfa; color: var(--purple); }
.card:nth-child(4) .icon { background: #eaf8fa; color: var(--teal); }
.card:nth-child(5) .icon { background: #fff6df; color: #b27b00; }

.card h3 { font-size: 15.5px; color: var(--navy); margin-bottom: 10px; }
.card p { font-size: 13px; color: #66778b; margin-bottom: 15px; line-height: 1.6; }
.card ul { list-style: none; font-size: 13px; color: #334961; }
.card li { margin: 8px 0; }
.card li:before { content: "\2022"; color: var(--gold); font-weight: 900; margin-right: 8px; }

.commit {
    background: linear-gradient(110deg, var(--navy), #124e92);
    color: #fff;
    border-radius: 28px;
    padding: 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.commit:after {
    content: ""; position: absolute;
    width: 250px; height: 250px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    right: -80px; top: -80px;
}
.commit h2 { font-size: clamp(22px, 2.5vw, 30px); margin-bottom: 12px; }
.commit p { font-size: 15.5px; color: #dfeaf8; max-width: 720px; margin: auto; line-height: 1.65; }

/* Four points on the landing page, three on a division page. A fixed
   four-column grid left the division pages with an empty fourth column and
   the cards pushed off to one side; auto-fit lets whatever is there share the
   width evenly and stay centred under the heading. */
.pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    margin-top: 34px;
    justify-content: center;
}
.pillar { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.pillar { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; padding: 18px; }
.pillar strong { display: block; color: var(--gold-soft); font-size: 13.5px; margin-bottom: 4px; }
.pillar span { font-size: 12.5px; color: #cfe0f3; }

/* ----------------------------------------------------------------- offices
   Four addresses, and the number will change. Cards rather than a paragraph,
   so a new city is a new card and nothing has to be re-worded.
   ------------------------------------------------------------------------- */

.offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; justify-content: center; }

.office {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 22px;
    box-shadow: var(--shadow);
    border-top: 3px solid var(--blue);
    transition: .25s;
}
.office:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(15, 43, 75, .12); }
.office-head { border-top-color: var(--gold); }

.office-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.office-top h3 { font-size: 18px; color: var(--navy); }

.office .tag {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 800;
    color: #8a6100;
    background: #fff4d8;
    padding: 3px 9px;
    border-radius: 20px;
}

.office-country { display: block; font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); font-weight: 800; margin-bottom: 12px; }

.office address {
    font-style: normal;
    white-space: pre-line;
    color: #4a5f76;
    font-size: 14px;
    line-height: 1.65;
}

.office-links { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e6ecf3; display: flex; flex-direction: column; gap: 5px; }
.office-links a { font-size: 13.5px; color: var(--blue); font-weight: 600; overflow-wrap: anywhere; }
.office-links a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- contact */

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: start; }

.contact-box { padding: 30px; border-radius: var(--radius); background: #fff; border: 1px solid #e0e8f1; }
.contact-box h3 { color: var(--navy); margin-bottom: 12px; font-size: 16.5px; }
.contact-box p { color: #607389; font-size: 14px; }
.contact-box .line {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed #e6ecf3;
    font-size: 14px;
    align-items: flex-start;
}
.contact-box .line:last-child { border-bottom: 0; }
.contact-box .line span:first-child { color: var(--muted); flex: 0 0 82px; font-weight: 700; }

/* An email address is one long unbreakable word. Left alone it decides how
   wide the card is, and on a phone that is wider than the phone. */
.contact-box .line span:last-child { min-width: 0; overflow-wrap: anywhere; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: #33495f; margin-bottom: 6px; }
.field .req { color: #b42318; }
.field textarea.invalid { border-color: #e0a3a0; background: #fffafa; }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d9e2ec;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    background: #fbfdff;
    color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(13, 79, 156, .12);
}
.field textarea { min-height: 120px; resize: vertical; }
.field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field.two > div { margin: 0; }

/* Country and number on one row: the code is a choice, the number is typing,
   and they belong to each other. The row is the full width of the card, so
   neither is cut off. */
.phone-field { display: grid; grid-template-columns: 116px 1fr; gap: 10px; align-items: start; }

.country-pick { position: relative; }

.country-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 10px;
    border: 1px solid #d9e2ec;
    border-radius: 12px;
    background: #fbfdff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    line-height: 1.3;
}
.country-btn:hover { border-color: var(--accent); }
.country-pick.open .country-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.cc-flag { font-size: 17px; line-height: 1; }
.cc-dial { flex: 1; text-align: left; }
.cc-caret { font-size: 9px; color: var(--muted); }

.country-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    width: 320px;
    max-width: 84vw;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 22px 50px rgba(15, 43, 75, .18);
    padding: 8px;
}

.country-search {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    margin-bottom: 6px;
    background: #fbfdff;
}
.country-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

.country-list { max-height: 260px; overflow-y: auto; }

.country-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    background: none;
    border-radius: 9px;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
}
.country-item:hover { background: var(--light); }
.country-item.on { background: var(--accent-soft); font-weight: 700; }
.ci-flag { font-size: 16px; line-height: 1; }
.ci-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-dial { color: var(--muted); font-size: 12.5px; font-weight: 700; }

.country-none { padding: 14px 10px; color: var(--muted); font-size: 13px; text-align: center; }

.optional { font-weight: 500; color: var(--muted); font-size: 11.5px; text-transform: none; letter-spacing: 0; }

/* Said under the field it belongs to, in words rather than a red outline
   alone - "India numbers have 10 digits" is a fix; a red box is a puzzle. */
.field-error { display: none; font-size: 12.5px; color: #b42318; margin-top: 6px; font-weight: 600; }
.field-error.show { display: block; }
.field input.invalid, .field select.invalid { border-color: #e0a3a0; background: #fffafa; }
.field input.invalid:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); border-color: #b42318; }

/* The honeypot. Off screen rather than display:none, because some robots skip
   anything that is hidden the obvious way. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: 13px; padding: 11px 14px; border-radius: 11px; margin-bottom: 14px; display: none; }
.form-note.ok { display: block; background: #e9f7ef; color: #135c33; border: 1px solid #bfe6cf; }
.form-note.bad { display: block; background: #fdecea; color: #8a231a; border: 1px solid #f5c6c1; }

/* ------------------------------------------------------------------ footer */

footer {
    background: var(--navy-deep);
    color: #dce7f4;
    padding: 46px 6vw 30px;
}
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; max-width: 1180px; margin: 0 auto 26px; }
.foot-grid.four { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; }
.foot-grid h4 { color: #fff; font-size: 14px; margin-bottom: 12px; }
.foot-grid a, .foot-grid p { color: #aebed1; font-size: 13px; display: block; margin: 6px 0; }
.foot-grid a:hover { color: var(--gold-soft); }
.foot-base { text-align: center; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 20px; }
.foot-base strong { color: #fff; letter-spacing: .8px; font-size: 13.5px; }
.foot-base small { display: block; margin-top: 6px; color: #93a7bd; font-size: 12px; }

/* ------------------------------------------------------------ credit line
   Who built it. One partial, three places - the website footer, the sign-in
   page and the admin sidebar - so the number only lives in one file.
   ------------------------------------------------------------------------- */

.credit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 14px;
}
.credit strong { color: var(--navy); font-weight: 800; }
.credit a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1d9d55;
    font-weight: 700;
}
.credit a:hover { text-decoration: underline; }
.credit svg { width: 15px; height: 15px; fill: #25d366; }

/* On the navy footer the same line has to read the other way round. */
footer .credit { margin-top: 16px; color: #93a7bd; }
footer .credit strong { color: #fff; }
footer .credit a { color: #43d67f; }
footer .credit svg { fill: #43d67f; }

/* On the sign-in card it sits under a rule rather than in the middle. */
.auth-card .credit {
    justify-content: flex-start;
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------- text pages */

.page-head { padding: 150px 6vw 50px; background: linear-gradient(135deg, #fff, #f2f7fd); border-bottom: 1px solid var(--line); }
.page-head h1 { color: var(--navy); font-size: clamp(25px, 2.8vw, 34px); }
.page-head p { color: var(--muted); margin-top: 10px; font-size: 15px; }
.page-body { padding: 55px 6vw 90px; }

/* The body of a page lines up with its own title above it. They used to
   disagree - a title at the site's full width over a column half as wide,
   starting 200px further in - which read as two pages stacked. */
.page-body .container { width: min(1180px, 100%); max-width: none; }

/* Plain writing still gets a comfortable measure, but measured from the same
   left edge as the title rather than centred inside the column. */
.rich.prose { max-width: 820px; }

/* A page that brings its own design gets out of the way: no reading column,
   no padding, nothing but the site header above and the footer below. The
   nav is fixed, so the top is cleared for it. */
.page-free { padding-top: 78px; }
.page-free .rich { max-width: none; font-size: inherit; line-height: inherit; color: inherit; }
.page-body p { margin-bottom: 16px; color: #35485e; font-size: 15.5px; line-height: 1.75; }

/* Page text written as HTML in the admin panel. Only the tags the cleaner
   allows can arrive here, so this is the whole vocabulary. */
.rich { color: #35485e; font-size: 15.5px; line-height: 1.75; }
.rich h2 { color: var(--navy); font-size: clamp(21px, 2.2vw, 26px); margin: 34px 0 12px; }
.rich h3 { color: var(--navy); font-size: clamp(17px, 1.8vw, 20px); margin: 26px 0 10px; }
.rich h4 { color: var(--navy); font-size: 16px; margin: 22px 0 8px; }
.rich h2:first-child, .rich h3:first-child { margin-top: 0; }
.rich p { margin-bottom: 16px; }
.rich ul, .rich ol { margin: 0 0 18px 22px; }
.rich li { margin-bottom: 8px; }
.rich a { color: var(--blue); font-weight: 600; text-decoration: underline; }
.rich a:hover { color: var(--gold); }
.rich strong, .rich b { color: var(--ink); }
.rich hr { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }
.rich blockquote {
    margin: 22px 0;
    padding: 14px 22px;
    border-left: 3px solid var(--gold);
    background: var(--light);
    border-radius: 0 12px 12px 0;
    color: #4a5f76;
}
.rich blockquote p:last-child { margin-bottom: 0; }
.rich img { max-width: 100%; height: auto; border-radius: 14px; margin: 10px 0; }
.rich figure { margin: 22px 0; }
.rich figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.rich pre {
    background: #0f2748;
    color: #dce7f4;
    padding: 16px 18px;
    border-radius: 12px;
    overflow-x: auto;
    font-size: 13px;
    margin-bottom: 18px;
}
.rich code { font-size: .92em; background: var(--light); padding: 2px 6px; border-radius: 5px; }
.rich pre code { background: none; padding: 0; }

/* A table on a phone is the one thing that cannot be made to fit, so it is
   allowed to scroll inside its own box rather than widening the page. */
.rich table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; display: block; overflow-x: auto; }
.rich th, .rich td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.rich th { background: var(--light); color: var(--navy); font-weight: 700; }

/* -------------------------------------------------------------- sign in */

.auth-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: #fff;
}

.auth-side {
    background:
        radial-gradient(circle at 20% 20%, rgba(215, 154, 18, .18), transparent 30%),
        linear-gradient(140deg, var(--navy) 0%, #0d3f80 100%);
    color: #fff;
    padding: 60px 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.auth-side:after {
    content: ""; position: absolute;
    width: 460px; height: 460px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    right: -160px; bottom: -180px;
}
.auth-side h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; margin-bottom: 14px; }
.auth-side h2 span { color: var(--gold-soft); }
.auth-side p { color: #cfe0f3; max-width: 440px; font-size: 15px; }
.auth-side ul { list-style: none; margin-top: 26px; }
.auth-side li { padding: 6px 0; color: #dfeaf8; font-size: 13.5px; }
.auth-side li:before { content: "\2713"; color: var(--gold-soft); font-weight: 900; margin-right: 10px; }

.auth-form { display: flex; align-items: center; justify-content: center; padding: 50px 6vw; }
.auth-card { width: min(430px, 100%); }
.auth-card h1 { color: var(--navy); font-size: 25px; margin-bottom: 6px; }
.auth-card > p { color: var(--muted); margin-bottom: 24px; font-size: 14px; }

.alert { padding: 12px 15px; border-radius: 12px; font-size: 14px; margin-bottom: 16px; }
.alert-success { background: #e9f7ef; color: #135c33; border: 1px solid #bfe6cf; }
.alert-danger { background: #fdecea; color: #8a231a; border: 1px solid #f5c6c1; }

.check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; }
.check input { margin-top: 3px; }
.check label { font-size: 13.5px; color: #35485e; }
.check small { display: block; color: var(--muted); }

.text-danger { color: #b42318; font-size: 13px; }
.text-muted { color: var(--muted); }

/* ----------------------------------------------------------------- phones */

@media (max-width: 1000px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
    .hero-content { grid-template-columns: 1fr; }
    .hero-card { max-width: 650px; }
    .contact { grid-template-columns: 1fr; }
    .pillars { grid-template-columns: repeat(2, 1fr); }
    .foot-grid, .foot-grid.four { grid-template-columns: 1fr 1fr; }
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-side { display: none; }
}

/* The menu folds away well before a phone. Five links, a sign-in button and
   the brand stop fitting on one line at around 900px, and a bar that does not
   fit is what drags the whole page sideways. */
@media (max-width: 900px) {
    .nav-toggle { display: block; flex: 0 0 auto; }
    .navlinks {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 6vw 18px;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 18px 30px rgba(15, 43, 75, .08);
        display: none;
    }
    .navlinks.open { display: flex; }
    .navlinks a { padding: 12px 0; border-bottom: 1px solid #f0f4f9; }
    .navlinks .btn-signin { text-align: center; margin-top: 10px; border-bottom: 1.5px solid var(--navy); }
}

@media (max-width: 700px) {
    .nav { padding: 14px 5vw; }
    /* Small enough that the whole registered name - suffix and all - stays
       on one line beside the hamburger, on every phone width. */
    .logo { font-size: 13.5px; gap: 9px; }
    .logo small { letter-spacing: 2px; }

    .hero-content { width: 90%; padding: 104px 0 60px; gap: 34px; }
    .hero p.lead { font-size: 15.5px; }
    .hero-card { padding: 22px; }
    .stats { gap: 16px; }

    .cards { grid-template-columns: 1fr; }
    .section { padding: 58px 5vw; }
    .commit { padding: 32px 22px; }
    .mini-grid { grid-template-columns: 1fr; }
    .mini:nth-child(5) { grid-column: auto; }
    .pillars { grid-template-columns: 1fr; }
    .foot-grid, .foot-grid.four { grid-template-columns: 1fr; }
    .offices { grid-template-columns: 1fr; }

    .contact-box { padding: 22px 20px; }
    .contact-box .line { flex-direction: column; gap: 2px; padding: 10px 0; }
    .contact-box .line span:first-child { flex: none; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }

    .field.two { grid-template-columns: 1fr; }
    .phone-field { grid-template-columns: 104px 1fr; }
    .country-btn { padding: 13px 8px; font-size: 14px; }
    .country-panel { width: 300px; }
    .country-search { font-size: 16px; }

    /* 16px is the line iOS draws: anything smaller and Safari zooms the page
       in when the field is tapped, which leaves the form wider than the
       screen and the visitor scrolling to find the send button. */
    .field input, .field select, .field textarea { font-size: 16px; padding: 13px 14px; }

    .btn { width: 100%; text-align: center; }
    .buttons { flex-direction: column; align-items: stretch; }

    .page-head { padding: 118px 5vw 40px; }
    .page-body { padding: 44px 5vw 70px; }

    .auth-form { padding: 40px 6vw; }
    .credit { justify-content: center; text-align: center; }
}

/* The narrow end - a 320px phone, and anything folded.

   "PVT. LTD." used to be hidden here, which quietly dropped it on every 360px
   Android and 375px iPhone - most phones, in other words. It is part of the
   registered name, so it stays; the type comes down a step instead, which
   still leaves the bar comfortably inside a 320px screen. */
@media (max-width: 380px) {
    .nav { padding: 13px 4vw; gap: 8px; }
    .logo { font-size: 11.5px; gap: 7px; letter-spacing: .3px; }
    .logo small { letter-spacing: 1px; margin-left: 5px; }
    .nav-toggle { width: 36px; }
    .hero h1 { letter-spacing: -1px; }
    .stats { flex-wrap: wrap; }
}

/* ------------------------------------------- landing hero on smaller screens

   Kept together and placed after the general phone rules above, because those
   set .hero-content padding for every hero and this one needs its own.       */

@media (max-width: 1100px) {
    .hero-copy { max-width: 560px; }
    .hero-rail { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
    .hero-shot .hero-content { width: 90%; padding: 112px 0 28px; }
    .hero-copy { max-width: 100%; }

    /* A 2.5:1 photograph poured into a portrait screen is mostly crop: what
       survives is a slice of somebody's shoulder and half a caption blown up
       to headline size. Softened and darkened it becomes the atmosphere the
       words sit in, which is the only honest use for it at this width. */
    .hero-bg img {
        object-position: 58% 48%;
        filter: blur(2px) saturate(.92) brightness(.9);

        /* Blur samples past the edges and leaves them pale; the scale hides
           that beyond the frame. */
        transform: scale(1.07);
    }
    .hero-veil {
        background:
            linear-gradient(180deg, rgba(6, 25, 52, .9) 0%, rgba(6, 25, 52, .8) 42%, rgba(4, 16, 34, .92) 100%);
    }

    /* Both labels are two words. Stacked full width they cost a third of a
       phone screen and say nothing more than they do side by side. */
    .hero-shot .buttons { flex-direction: row; gap: 10px; }
    .hero-shot .buttons .btn { width: auto; flex: 1 1 0; padding: 12px 10px; }

    .hero-shot .eyebrow { font-size: 10.5px; letter-spacing: 1.2px; margin-bottom: 14px; }
    .hero-shot p.lead { margin: 16px 0 24px; }

    .hero-stats { gap: 24px; margin-top: 24px; }
    .hero-stats strong { font-size: 20px; }

    .hero-rail { grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 44px; }
    .hero-chip { padding: 13px 14px 12px; }
    .hero-chip:nth-child(5) { grid-column: 1 / 3; }
    .hero-chip i { margin-top: 9px; }
}

@media (max-width: 380px) {
    .hero-shot .hero-content { padding: 104px 0 24px; }
    .hero-stats { gap: 18px; }
    .hero-chip span { font-size: 12.5px; }
}

/* ============================================================================
   DIVISION THEMES
   ----------------------------------------------------------------------------
   Each division owns a colour. Rather than five stylesheets, the palette is
   re-pointed by one class on a wrapper: --accent and friends change, and every
   rule below that already speaks in those variables follows.

   The house navy stays for body text and the footer, so five themed pages
   still read as one company.
   ========================================================================== */

:root {
    --accent: var(--navy);
    --accent-dark: #061f47;
    --accent2: var(--gold);
    --accent2-soft: #fff6df;
    --accent-soft: #eef4fb;
    --accent-line: #dbe6f3;
    --accent-glow: rgba(8, 45, 99, .13);
}

/* Each division is a PAIR: a deep colour that carries the headings and the
   buttons, and a brighter partner used sparingly - the service numbers, the
   rule under an eyebrow, the edge of a card, the far end of the approach
   band. Two colours is enough to tell five divisions apart; a third would
   start to look like decoration. */

.theme-blue {
    --accent: #123f87; --accent-dark: #0b2f68;
    --accent2: #3f9c35; --accent2-soft: #eaf6e7;
    --accent-soft: #edf4ff; --accent-line: #dfe7f2; --accent-glow: rgba(18, 63, 135, .13);
}
.theme-green {
    --accent: #16723b; --accent-dark: #0d542c;
    --accent2: #86c045; --accent2-soft: #f1f8e6;
    --accent-soft: #e7f4eb; --accent-line: #d7e7dc; --accent-glow: rgba(22, 114, 59, .13);
}
.theme-purple {
    --accent: #5a2397; --accent-dark: #3f1470;
    --accent2: #9a5cd8; --accent2-soft: #f3ecfc;
    --accent-soft: #eee4f8; --accent-line: #e5dcef; --accent-glow: rgba(90, 35, 151, .13);
}
.theme-teal {
    --accent: #08768f; --accent-dark: #055668;
    --accent2: #d9922f; --accent2-soft: #fdf3e3;
    --accent-soft: #e7f7fa; --accent-line: #cfe4e9; --accent-glow: rgba(8, 118, 143, .13);
}
.theme-gold {
    --accent: #a86d00; --accent-dark: #7d5100;
    --accent2: #2c5a8a; --accent2-soft: #eaf1f8;
    --accent-soft: #fff5df; --accent-line: #eadfc9; --accent-glow: rgba(168, 109, 0, .14);
}

/* Inside a themed page, the pieces that carry colour take the accent. */
.theme .eyebrow { color: var(--accent); }

/* The little rule before an eyebrow is where the two colours meet. */
.theme .eyebrow:before {
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    width: 30px;
}
.theme .section-title h2,
.theme .hero h1,
.theme .hero-card h3,
.theme .contact-box h3 { color: var(--accent); }
.theme .btn.primary { background: var(--accent); box-shadow: 0 10px 25px var(--accent-glow); }
.theme .btn.primary:hover { background: var(--accent-dark); }
.theme .btn.secondary { border-color: var(--accent); color: var(--accent); }
.theme .btn.secondary:hover { background: var(--accent); color: #fff; }
.theme .commit { background: linear-gradient(115deg, var(--accent-dark) 0%, var(--accent) 58%, var(--accent2) 165%); }
.theme .commit .pillar strong { color: #fff; }
.theme .commit .eyebrow { color: #fff; }
.theme .commit .eyebrow:before { background: rgba(255, 255, 255, .6); }
.theme .office { border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--accent), var(--accent2)) 1; border-image-slice: 1; }
.theme .office { border-top-color: var(--accent); }
.theme .office-head .tag { background: var(--accent2-soft); color: var(--accent-dark); }
.theme .office-country { color: var(--accent); }
.theme .office-links a { color: var(--accent); }
.theme .field input:focus,
.theme .field select:focus,
.theme .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.theme .section.alt { background: var(--accent-soft); }
.theme .stat strong { color: var(--accent); }
.theme .card-link { color: var(--accent); }

.division-hero {
    min-height: auto;
    background:
        radial-gradient(circle at 12% 18%, var(--accent-glow), transparent 30%),
        linear-gradient(135deg, var(--accent-soft) 0%, #fff 55%, var(--accent-soft) 100%);
}
.division-hero .hero-content { padding: 128px 0 74px; }
.division-hero h1 { font-size: clamp(28px, 3.4vw, 43px); }
.hero-tagline {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-dark);
    margin-top: 12px;
    letter-spacing: .2px;
}
.hero-mark {
    width: 60px; height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent-soft), var(--accent2-soft));
    border: 1px solid var(--accent-line);
    display: grid; place-items: center;
    font-size: 27px;
    margin-bottom: 16px;
}

/* A two-tone hairline where the hero ends. It is the whole dual-colour idea
   in four pixels, and it tells you which division you are standing in even
   after you have scrolled past the heading. */
.division-hero { position: relative; }
.division-hero:after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;

    /* The plain hero puts a decorative circle in this pseudo-element, so its
       width and border have to be undone or the rule is 420px of nothing. */
    width: auto;
    border: 0;
    border-radius: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 42%, var(--accent2) 100%);
}
.hero-card-text { color: var(--muted); font-size: 14px; }

/* The services a division offers. Numbered, because the order is the story. */
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 18px; justify-content: center; }

.service-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 22px;
    box-shadow: var(--shadow);
    transition: .25s;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 45px var(--accent-glow); border-color: var(--accent-line); }

/* The number is the partner colour, in its own soft chip - two tones on one
   card, without either shouting. */
.service-card .num {
    display: inline-grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--accent2-soft);
    color: var(--accent2);
    font-weight: 800;
    font-size: 11.5px;
    letter-spacing: .5px;
    margin-bottom: 14px;
}
.service-card h3 { font-size: 15.5px; color: var(--accent); margin-bottom: 9px; }
.service-card p { font-size: 13px; color: #66778b; line-height: 1.6; }

/* "Read more" on the landing page cards. */
.card-link { display: inline-block; margin-top: 15px; font-size: 13px; font-weight: 800; color: var(--accent); }
.card-link:hover { text-decoration: underline; }

/* Two tones on the top edge, so the five cards are told apart at a glance
   and each one previews the page it opens. */
.cards .card { position: relative; overflow: hidden; }
.cards .card:before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 45%, var(--accent2) 100%);
}
.card .icon { background: var(--accent-soft); color: var(--accent); }
.card h3 { color: var(--accent); }
.card li:before { color: var(--accent2); }

.mini-grid .mini { border-left-color: var(--accent); }
.mini-grid .mini:hover { background: var(--accent-soft); }

/* The way out of a division page: the other four. */
.division-nav { background: var(--light); border-top: 1px solid var(--line); padding: 46px 6vw 56px; }
.division-nav .container { max-width: 1180px; }
.division-nav-label {
    display: block;
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 800;
    margin-bottom: 18px;
}
.division-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; }
.division-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    transition: .2s;
}
.division-links a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 43, 75, .1); }
.division-links a:hover { border-color: var(--accent); color: var(--accent); }
.division-links a .dn-icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent-soft), var(--accent2-soft));
}
.dn-icon { font-size: 19px; flex: none; }
.division-links small { display: block; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); font-weight: 800; }

/* ------------------------------------------------------- the divisions menu */

.has-menu { position: relative; }
.has-menu .caret { font-size: 9px; opacity: .6; }

.submenu {
    position: absolute;
    top: 100%; left: 50%;
    transform: translate(-50%, 8px);
    min-width: 320px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 22px 50px rgba(15, 43, 75, .14);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transition: .18s;
    z-index: 50;
}
.has-menu:hover .submenu,
.has-menu:focus-within .submenu { opacity: 1; visibility: visible; transform: translate(-50%, 2px); }

.submenu a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 11px;
    border-bottom: 0;
    font-size: 13.5px;
    color: var(--ink);
}
.submenu a:hover { background: var(--light); border-bottom: 0; }
.submenu a:hover { color: var(--accent); }
.submenu a .sm-icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent-soft), var(--accent2-soft));
    font-size: 15px;
}
.submenu small { display: block; font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.sm-icon { flex: none; }

@media (max-width: 900px) {
    .has-menu { width: 100%; }
    .has-menu .caret { display: none; }
    .submenu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        border: 0;
        box-shadow: none;
        padding: 0 0 6px 12px;
        border-left: 2px solid var(--line);
        margin: 2px 0 6px;
    }
    .submenu a { padding: 9px 8px; }
}

@media (max-width: 700px) {
    .service-grid, .division-links { grid-template-columns: 1fr; }

    /* On a phone every card is full width, so stacking the icon above the
       title wastes a line and leaves a lot of air down the left. Icon and
       title share the first row instead; the text below spans both columns. */
    .cards .card {
        display: grid;
        grid-template-columns: 46px 1fr;
        column-gap: 13px;
        align-items: center;
        padding: 20px 18px;
    }
    .cards .card .icon { grid-column: 1; grid-row: 1; width: 46px; height: 46px; margin-bottom: 0; font-size: 21px; }
    .cards .card h3 { grid-column: 2; grid-row: 1; margin-bottom: 0; font-size: 15px; }
    .cards .card p,
    .cards .card ul,
    .cards .card .card-link { grid-column: 1 / -1; }
    .cards .card p { margin-top: 14px; margin-bottom: 12px; }

    .service-card {
        display: grid;
        grid-template-columns: 32px 1fr;
        column-gap: 12px;
        align-items: center;
        padding: 20px 18px;
    }
    .service-card .num { grid-column: 1; grid-row: 1; width: 32px; height: 32px; margin-bottom: 0; }
    .service-card h3 { grid-column: 2; grid-row: 1; margin-bottom: 0; font-size: 14.5px; }
    .service-card p { grid-column: 1 / -1; margin-top: 11px; }
    .division-hero .hero-content { padding: 104px 0 56px; }
    .division-nav { padding: 36px 5vw 46px; }
}

/* ============================================================================
   CURRENT VACANCIES
   ----------------------------------------------------------------------------
   Recruitment's own colour, because that is whose page this is. Everything
   below speaks in --accent and --accent2, so the .theme-purple wrapper on the
   page decides the palette and nothing here names a colour twice.
   ========================================================================== */

.careers-hero .hero-content { padding: 126px 0 66px; }
.careers-hero .badges { margin: 18px 0 4px; }

/* The filter bar. Search takes the room, because it is the one people use. */
.job-filters {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px;
    box-shadow: var(--shadow);
    margin-bottom: 18px;
}

.job-filters input,
.job-filters select {
    width: 100%;
    padding: 13px 15px;
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: .15s;
}
.job-filters input:focus,
.job-filters select:focus {
    outline: 0;
    border-color: var(--accent, var(--navy));
    box-shadow: 0 0 0 3px rgba(100, 49, 155, .1);
}

.job-count { color: var(--muted); font-size: 13.5px; margin: 0 0 18px 4px; }

.jobs { display: grid; gap: 18px; }

.job {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent, var(--navy));
    border-radius: 18px;
    padding: 26px 28px;
    box-shadow: var(--shadow);
    transition: .2s;
}
.job:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.job[hidden] { display: none; }

.job-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }

.job h2 { font-size: 21px; color: var(--accent, var(--navy)); margin: 0; }
.job h2 a { transition: .15s; }
.job h2 a:hover { color: var(--accent2, var(--gold)); }

.job-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 7px; color: var(--muted); font-size: 13.5px; }
.job-meta span { display: inline-flex; align-items: center; gap: 6px; }

/* A dot between the facts rather than a pipe: quieter, and it disappears
   politely when they wrap onto separate lines. */
.job-meta span + span:before {
    content: "";
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #c8d2de;
    margin-right: 4px;
}

.job-flag {
    flex: 0 0 auto;
    font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
    color: #7a5300;
    background: rgba(215, 154, 18, .16);
    border: 1px solid rgba(215, 154, 18, .3);
    padding: 5px 11px;
    border-radius: 20px;
}

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
.badge {
    background: color-mix(in srgb, var(--accent, #082d63) 10%, #fff);
    color: var(--accent, var(--navy));
    border: 1px solid color-mix(in srgb, var(--accent, #082d63) 18%, #fff);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
}

/* The hero is dark on the division pages, so the badges there invert. */
.division-hero .badge {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .26);
    color: #fff;
}

.job > p { color: var(--muted); line-height: 1.65; margin: 0; font-size: 14.8px; }

.job-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.job-posted { color: var(--muted); font-size: 12.5px; }

.job.compact { padding: 22px 24px; }
.job.compact h2 { font-size: 17.5px; }

.job-empty {
    background: #fff;
    border: 1px dashed var(--line);
    border-radius: 18px;
    padding: 44px 28px;
    text-align: center;
}
.job-empty h3 { color: var(--navy); font-size: 19px; margin-bottom: 8px; }
.job-empty p { color: var(--muted); max-width: 520px; margin: 0 auto 18px; line-height: 1.65; }

/* ------------------------------------------------------------- one vacancy */

.job-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }

.job-block {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--shadow);
}
.job-block h2 { font-size: 22px; color: var(--navy); margin-bottom: 16px; }

.ticks { list-style: none; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: #45586e; line-height: 1.6; font-size: 14.8px; }
.ticks li:before {
    content: "";
    position: absolute;
    left: 0; top: 7px;
    width: 16px; height: 9px;
    border-left: 2px solid var(--accent2, var(--gold));
    border-bottom: 2px solid var(--accent2, var(--gold));
    transform: rotate(-45deg);
}

/* The facts panel in the hero. Label left, answer right, like a spec sheet. */
.job-facts { display: grid; gap: 2px; }
.job-facts div {
    display: flex; gap: 14px; align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid #eef2f7;
}
.job-facts div:last-child { border-bottom: 0; }
.job-facts span { flex: 0 0 108px; color: var(--muted); font-size: 12px; letter-spacing: .8px; text-transform: uppercase; font-weight: 700; }
.job-facts strong { font-size: 14.5px; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }

/* ------------------------------------------------------------- apply form */

.apply-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 32px;
    box-shadow: var(--shadow-lg);
    max-width: 760px;
    margin: 0 auto;
}
.apply-box h3 { color: var(--navy); font-size: 19px; margin-bottom: 6px; }
.apply-for { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.apply-for strong { color: var(--accent, var(--navy)); }

.field-hint { color: var(--muted); font-size: 12.5px; margin-top: 6px; }

.apply-privacy { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin-top: 16px; }

/* The CV box. A label wrapping a real file input, so the browser's own
   keyboard handling and screen-reader wiring are kept rather than rebuilt. */
.cv-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1.5px dashed #cfd9e6;
    border-radius: 14px;
    background: #fafcfe;
    cursor: pointer;
    transition: .15s;
}
.cv-drop:hover, .cv-drop.over { border-color: var(--accent, var(--navy)); background: #f4f8fd; }

/* Off-screen rather than display:none - hidden inputs cannot be focused, and
   this one is how a keyboard reaches the file picker. */
.cv-drop input[type=file] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    inset: 0;
}
.cv-drop input[type=file]:focus-visible + .cv-icon { outline: 2px solid var(--accent, var(--navy)); outline-offset: 4px; }

.cv-icon { font-size: 22px; line-height: 1; }
.cv-words { display: grid; gap: 3px; min-width: 0; }
.cv-words strong { font-size: 14px; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.cv-words small { color: var(--muted); font-size: 12.5px; }

.cv-clear {
    margin-left: auto;
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.cv-clear:hover { color: #b42318; border-color: #f0c2bd; }

/* Said to a screen reader, not shown - the filter boxes carry their own
   placeholder text, but a placeholder is not a label. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px) {
    .job-filters { grid-template-columns: 1fr 1fr; }
    .job-filters .jf-search { grid-column: 1 / -1; }
    .job-detail { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .careers-hero .hero-content { padding: 104px 0 44px; }

    .job-filters { grid-template-columns: 1fr; padding: 12px; }
    .job-filters input, .job-filters select { font-size: 16px; }

    .job { padding: 22px 20px; }
    .job h2 { font-size: 19px; }
    .job-top { flex-direction: column; }
    .job-foot { flex-direction: column; align-items: stretch; text-align: center; }

    .job-block { padding: 24px 20px; }
    .apply-box { padding: 24px 20px; }

    .job-facts div { flex-direction: column; gap: 2px; padding: 9px 0; }
    .job-facts span { flex: none; }

    .cv-drop { padding: 16px; }
}

/* ============================================================================
   POPUP
   ----------------------------------------------------------------------------
   The "that worked" moment. A tick that draws itself, one button, and a bar
   that drains so the wait is visible rather than a surprise disappearance.
   ========================================================================== */

.pop-back {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 24, 48, .5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .18s ease;
}
.pop-back.in { opacity: 1; }

/* The page behind must not scroll under a modal - on a phone that is the
   difference between a dialog and a thing floating over a moving page. */
body.pop-shown { overflow: hidden; }

.pop-box {
    background: #fff;
    border-radius: 24px;
    padding: 38px 34px 26px;
    width: min(420px, 100%);
    text-align: center;
    box-shadow: 0 30px 80px rgba(9, 26, 51, .3);
    transform: translateY(14px) scale(.96);
    transition: transform .22s cubic-bezier(.2, .9, .3, 1.2);
}
.pop-back.in .pop-box { transform: none; }

.pop-box h3 { font-size: 21px; color: var(--navy); margin: 20px 0 0; }
.pop-box p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-top: 10px; }
.pop-box .btn { margin-top: 22px; min-width: 130px; }

/* The tick. Drawn with stroke-dashoffset so it writes itself on, which reads
   as "done" in a way a static image does not. */
.pop-tick { width: 76px; height: 76px; display: block; margin: 0 auto; }
.pop-tick-ring, .pop-tick-mark { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

.pop-good .pop-tick-ring { stroke: #b8e6cb; }
.pop-good .pop-tick-mark { stroke: #12874a; }
.pop-bad .pop-tick-ring { stroke: #f3c6c1; }
.pop-bad .pop-tick-mark { stroke: #b42318; }

.pop-tick-ring { stroke-dasharray: 152; stroke-dashoffset: 152; }
.pop-tick-mark { stroke-dasharray: 60; stroke-dashoffset: 60; }

.pop-back.in .pop-tick-ring { animation: pop-draw .45s .05s ease-out forwards; }
.pop-back.in .pop-tick-mark { animation: pop-draw .3s .4s ease-out forwards; }

@keyframes pop-draw { to { stroke-dashoffset: 0; } }

/* How long is left. Quiet enough to ignore, there if you look. */
.pop-timer { height: 3px; border-radius: 3px; background: #eef2f7; margin-top: 20px; overflow: hidden; }
.pop-timer i { display: block; height: 100%; width: 100%; background: var(--accent2, var(--gold)); animation: pop-drain linear forwards; }

@keyframes pop-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.pop-timer i { transform-origin: left; }

/* Somebody who has asked for less movement still gets the popup, just without
   anything sliding or drawing itself. */
@media (prefers-reduced-motion: reduce) {
    .pop-back, .pop-box { transition: none; }
    .pop-box { transform: none; }
    .pop-tick-ring, .pop-tick-mark { stroke-dashoffset: 0; animation: none !important; }
}

@media (max-width: 700px) {
    .pop-box { padding: 32px 24px 22px; border-radius: 20px; }
    .pop-box h3 { font-size: 19px; }
    .pop-tick { width: 66px; height: 66px; }
    .pop-box .btn { width: 100%; }
}

/* ============================================================================
   SOCIAL ACCOUNTS
   ----------------------------------------------------------------------------
   A row of icons, used in the footer and beside the contact form. The name
   travels with each one but is only shown to a screen reader - five words in a
   row would read as a menu, and the icons are recognised faster than they can
   be read.
   ========================================================================== */

.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 11px;
    transition: .18s;
}
.social svg { width: 19px; height: 19px; }

/* Off-screen rather than hidden: still read out, still searched for on the
   page, just not taking a line of its own. */
.social-name {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* On the navy footer. */
.socials-dark .social { background: rgba(255, 255, 255, .1); color: #d8e3f0; }
.socials-dark .social svg { fill: currentColor; }
.socials-dark .social:hover { transform: translateY(-2px); }

/* On the white contact card. */
.socials-light { margin-top: 0; gap: 8px; }
.socials-light .social { background: #f2f6fb; color: var(--navy); border: 1px solid var(--line); }
.socials-light .social svg { fill: currentColor; }
.socials-light .social:hover { transform: translateY(-2px); }

/* Each platform in its own colour on hover - recognised before it is read,
   and it confirms the icon was the one expected. */
.social:hover { color: #fff; }
.social-linkedin:hover  { background: #0a66c2; border-color: #0a66c2; }
.social-instagram:hover { background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888); border-color: #dc2743; }
.social-facebook:hover  { background: #1877f2; border-color: #1877f2; }
.social-youtube:hover   { background: #ff0000; border-color: #ff0000; }
.social-whatsapp:hover  { background: #25d366; border-color: #25d366; }
.social-x:hover,
.social-twitter:hover   { background: #0f1419; border-color: #0f1419; }
.social-telegram:hover  { background: #29a9eb; border-color: #29a9eb; }
.social-threads:hover   { background: #000; border-color: #000; }

/* The contact card's rows are label-left, value-right; this one holds a row of
   icons rather than a line of text, so it sits on the baseline of the label. */
.contact-box .line-social { align-items: center; }

@media (max-width: 700px) {
    .socials { justify-content: flex-start; }
    .social { width: 42px; height: 42px; }
    .social svg { width: 20px; height: 20px; }
}