/* ==========================================================================
   Eagle Africa Energy
   --------------------------------------------------------------------------
   Design direction: "the register".

   The company is a Botswana-incorporated development platform whose audience is
   sovereign counterparts and development finance institutions. The visual
   language is therefore drawn from the documents those readers already work in
   — incorporation certificates, registry extracts, offering memoranda: a
   hairline rules opening each section, mono-set registry data, and a restrained
   type hierarchy that reads as a document rather than a brochure.

   Palette      Taken from the logo. Navy #1B3459 and gold #DAB543 are the
                brand colours sampled from the artwork; ink #0C1A2E is that
                navy pushed to near-black for the dark panels, and gold is
                darkened to #A07914 where it must hold contrast on paper.
   Typography   Spectral (display) · Public Sans (body) · IBM Plex Mono (data)
   Signature    The hairline rule opening each section, tipped with a short gold
                lead-in, the way a clause opens in a registry document.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Sampled from the logo artwork: navy #1B3459, gold #DAB543. */
    --ink:          #0C1A2E;
    --ink-soft:     #16294A;
    --navy:         #1B3459;
    --paper:        #FBFAF8;
    --paper-band:   #EFEFEC;
    --gold:         #A07914;   /* darkened so it holds contrast on paper */
    --gold-soft:    #DAB543;   /* brand gold, used on the dark panels */
    --rule:         #DBD7CE;
    --rule-dark:    #24405F;
    --muted:        #5A6472;
    --muted-dark:   #9DAEC4;

    --display: 'Spectral', 'Iowan Old Style', Georgia, serif;
    --body:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

    --shell:    1200px;
    --gutter:   clamp(1.25rem, 4vw, 3rem);
    --section:  clamp(4rem, 9vw, 7.5rem);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
svg {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration-color: var(--gold);
    text-underline-offset: 0.2em;
}

p {
    margin: 0 0 1.1em;
}

p:last-child {
    margin-bottom: 0;
}

/* Ordered lists are used where the source is genuinely a sequence, but the
   browser's own markers are suppressed — the site carries no visible
   numbering. */
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: 0;
}

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 0;
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--ink);
    color: var(--paper);
    padding: 0.75rem 1.25rem;
    font-family: var(--mono);
    font-size: 0.8125rem;
}

.skip-link:focus {
    left: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.section {
    padding-top: var(--section);
    padding-bottom: var(--section);
}

.section--band {
    background: var(--paper-band);
}

.section--dark {
    background: var(--ink);
    color: var(--paper);
}

.section--tight {
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Each section opens on a hairline rule, the way a clause opens in a registry
   document. A short gold lead-in marks where the rule starts. */

.spine {
    display: block;
}

.spine__body {
    border-top: 1px solid var(--rule);
    padding-top: 2.25rem;
    position: relative;
}

.spine__body::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 3.5rem;
    height: 1px;
    background: var(--gold);
}

.section--dark .spine__body::before {
    background: var(--gold-soft);
}

.section--dark .spine__body {
    border-top-color: var(--rule-dark);
}

/* --------------------------------------------------------------------------
   4. Typographic scale
   -------------------------------------------------------------------------- */

.eyebrow {
    display: block;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 1.75rem;
}

.section--dark .eyebrow {
    color: var(--muted-dark);
}

.h-display {
    font-size: clamp(2.4rem, 5.6vw, 4.35rem);
    line-height: 1.04;
    letter-spacing: 0;
}

.h-section {
    font-size: clamp(1.85rem, 3.6vw, 2.85rem);
    max-width: 22ch;
}

.h-sub {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.lede {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    line-height: 1.62;
    color: var(--muted);
    max-width: 62ch;
}

.section--dark .lede {
    color: var(--muted-dark);
}

.prose {
    max-width: 68ch;
}

.prose p + p {
    margin-top: 1.1em;
}

.prose strong {
    font-weight: 600;
}

.measure {
    max-width: 60ch;
}

.data {
    font-family: var(--mono);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   5. Masthead and navigation
   -------------------------------------------------------------------------- */

.masthead {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(251, 250, 248, 0.94);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--rule);
}

.masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 4.75rem;
}

.mark {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex-shrink: 0;
}

/* Horizontal lockup, sized by height so it holds the masthead's optical centre.
   The vertical stack in the source artwork puts the wordmark at around 8px tall
   at this scale, which is why the header uses the composed horizontal version. */
.mark__logo {
    height: 2.75rem;
    width: auto;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.nav__link {
    display: inline-block;
    padding: 0.55rem 0.8rem;
    font-size: 0.9375rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 160ms var(--ease), color 160ms var(--ease);
}

.nav__link:hover {
    border-bottom-color: var(--gold);
}

.nav__link.is-current {
    border-bottom-color: var(--ink);
}

.nav__cta {
    display: inline-block;
    margin-left: 0.6rem;
    padding: 0.6rem 1.15rem;
    background: var(--navy);
    color: var(--paper);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background 160ms var(--ease);
}

.nav__cta:hover,
.nav__cta.is-current {
    background: var(--ink);
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.55rem;
    background: none;
    border: 1px solid var(--rule);
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 16px;
    height: 1px;
    background: var(--ink);
}

.nav-toggle__bars {
    position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after  { top: 5px; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
    padding-top: clamp(4.5rem, 10vw, 8rem);
    padding-bottom: 0;
}

/* Ambient schematic: the isometric flow lines of a process drawing, held at a
   low enough opacity to read as paper texture rather than illustration. */
.hero__schematic {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    pointer-events: none;
}

.hero__schematic svg {
    width: 100%;
    height: 100%;
}

.hero__schematic path,
.hero__schematic line,
.hero__schematic circle {
    stroke: var(--gold-soft);
    fill: none;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.hero__inner {
    position: relative;
    z-index: 1;
}

.hero__eyebrow {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin: 0 0 1.75rem;
}

.hero__title {
    font-size: clamp(2.5rem, 6vw, 4.6rem);
    line-height: 1.03;
    letter-spacing: 0;
    max-width: 17ch;
    margin-bottom: 1.75rem;
}

.hero__title em {
    font-style: italic;
    color: var(--gold-soft);
}

.hero__lede {
    font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
    line-height: 1.6;
    color: #BFCDDF;
    max-width: 56ch;
    margin-bottom: 2.5rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

/* --------------------------------------------------------------------------
   7. Registry strip — the incorporation record, set as data
   -------------------------------------------------------------------------- */

.registry {
    margin: 0;
    display: grid;
    gap: 0;
}

.registry__row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.registry__row dt {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.registry__row dd {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.875rem;
    color: var(--ink);
}

.registry-strip {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--rule-dark);
}

.registry-strip .registry {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 1.75rem 0 2.25rem;
}

.registry-strip .registry__row dt {
    color: var(--muted-dark);
}

.registry-strip .registry__row dd {
    color: var(--paper);
}

.registry--footer {
    gap: 0.9rem;
}

.registry--footer .registry__row dt {
    color: var(--muted-dark);
}

.registry--footer .registry__row dd {
    color: var(--paper);
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: 0.9rem 1.6rem;
    font-family: var(--body);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 170ms var(--ease), color 170ms var(--ease), border-color 170ms var(--ease);
}

.btn--primary {
    background: var(--gold);
    color: #10192B;
    border-color: var(--gold);
}

.btn--primary:hover {
    background: var(--gold-soft);
    border-color: var(--gold-soft);
}

.btn--ghost {
    background: transparent;
    color: var(--paper);
    border-color: rgba(251, 250, 248, 0.35);
}

.btn--ghost:hover {
    border-color: var(--paper);
}

.btn--outline {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

.btn--outline:hover {
    background: var(--ink);
    color: var(--paper);
}

/* Inline text link with a brass rule that draws in on hover. */
.link {
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
    transition: border-color 170ms var(--ease);
}

.link:hover {
    border-bottom-color: var(--ink);
}

.section--dark .link:hover {
    border-bottom-color: var(--paper);
}

/* --------------------------------------------------------------------------
   9. Split heading + body layout
   -------------------------------------------------------------------------- */

.split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}

.split--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --------------------------------------------------------------------------
   10. Capability grid
   -------------------------------------------------------------------------- */

.capabilities {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    margin-top: 3rem;
}

.capability {
    background: var(--paper);
    padding: 1.75rem 1.5rem 1.9rem;
    transition: background 200ms var(--ease);
}

.capability:hover {
    background: #FFFFFF;
}

.capability__title {
    font-family: var(--display);
    font-size: 1.1875rem;
    line-height: 1.25;
    margin: 0 0 0.7rem;
}

.capability__summary {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 1.1rem;
}

.capability__by {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--gold);
    display: block;
    padding-top: 0.85rem;
    border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   11. Ledger — strategic partners, indexed by profile reference
   -------------------------------------------------------------------------- */

.ledger {
    margin-top: 3rem;
    border-top: 1px solid var(--rule);
}

.ledger__entry {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    padding: 2.25rem 0;
    border-bottom: 1px solid var(--rule);
    transition: background 200ms var(--ease);
}

.ledger__entry:hover {
    background: rgba(160, 121, 20, 0.05);
}

.ledger__logo {
    background: var(--ink);
    border: 1px solid var(--rule-dark);
    min-height: 6rem;
    margin: 0 0 1.25rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ledger__logo-image {
    max-width: 100%;
    max-height: 5rem;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ledger__name {
    font-family: var(--display);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.22;
    margin: 0 0 0.35rem;
}

.ledger__role {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: 1rem;
}

.ledger__summary {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
}

.ledger__meta {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--muted);
    margin-top: 1rem;
    line-height: 1.7;
}

.ledger__meta span {
    display: block;
}

.ledger__caps {
    padding-top: 0.4rem;
}

.ledger__caps li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 0.7rem;
}

.ledger__caps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.45rem;
    height: 1px;
    background: var(--gold);
}

/* --------------------------------------------------------------------------
   12. Executive list
   -------------------------------------------------------------------------- */

.people {
    margin-top: 3rem;
    border-top: 1px solid var(--rule);
}

.person {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: clamp(1rem, 4vw, 3rem);
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--rule);
}

/* No stock portraits: initials set in the display face act as a plate, which is
   honest about what we have and reads better than a placeholder silhouette. */
.person__plate {
    font-family: var(--display);
    font-size: 1.375rem;
    letter-spacing: 0.02em;
    color: var(--gold);
    border: 1px solid var(--rule);
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.person__name {
    font-family: var(--display);
    font-size: clamp(1.3rem, 2.1vw, 1.625rem);
    line-height: 1.2;
    margin: 0 0 0.3rem;
}

.person__role {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: 1.1rem;
}

.person__bio {
    font-size: 0.9688rem;
    line-height: 1.68;
    color: var(--muted);
    max-width: 66ch;
    margin: 0 0 1.25rem;
}

.person__credentials {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--ink);
    padding-top: 0.9rem;
    border-top: 1px solid var(--rule);
    max-width: 66ch;
}

/* --------------------------------------------------------------------------
   13. Programme records
   -------------------------------------------------------------------------- */

.programmes {
    margin-top: 3rem;
    display: grid;
    gap: 1.5rem;
}

.programme {
    border: 1px solid var(--rule);
    background: var(--paper);
    padding: clamp(1.75rem, 4vw, 2.75rem);
}

.programme__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.programme__jurisdiction {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}

.programme__status {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    border: 1px solid var(--rule);
    padding: 0.35rem 0.7rem;
}

.programme__title {
    font-family: var(--display);
    font-size: clamp(1.375rem, 2.4vw, 1.875rem);
    line-height: 1.2;
    margin: 0 0 1rem;
    max-width: 30ch;
}

.programme__summary {
    color: var(--muted);
    max-width: 62ch;
    margin: 0 0 1.75rem;
}

.programme__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   14. Notice — used where the source documents require a caveat
   -------------------------------------------------------------------------- */

.notice {
    border-left: 2px solid var(--gold);
    padding: 0.35rem 0 0.35rem 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--muted);
    max-width: 64ch;
}

.section--dark .notice {
    color: var(--muted-dark);
}

/* --------------------------------------------------------------------------
   15. Call to action band
   -------------------------------------------------------------------------- */

.cta-band {
    background: var(--navy);
    color: var(--paper);
}

.cta-band__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-top: clamp(3rem, 6vw, 4.5rem);
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.cta-band__title {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    max-width: 20ch;
    margin: 0;
}

.cta-band__aside {
    max-width: 34ch;
    color: #B6C6DB;
    font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   16. Contact form
   -------------------------------------------------------------------------- */

.form {
    margin-top: 2.5rem;
    max-width: 40rem;
}

.field {
    margin-bottom: 1.5rem;
}

.field__label {
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.55rem;
}

.field__optional {
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--muted);
    opacity: 0.75;
}

.field__input,
.field__select,
.field__textarea {
    width: 100%;
    font-family: var(--body);
    font-size: 1rem;
    color: var(--ink);
    background: #FFFFFF;
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 0.8rem 0.95rem;
    transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
    -webkit-appearance: none;
    appearance: none;
}

.field__textarea {
    min-height: 10rem;
    resize: vertical;
    line-height: 1.6;
}

.field__select {
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) 1.35rem, calc(100% - 14px) 1.35rem;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.75rem;
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(160, 121, 20, 0.16);
}

.field__hint {
    font-size: 0.8125rem;
    color: var(--muted);
    margin: 0.5rem 0 0;
}

/* Honeypot: present for scripted submitters, removed from the accessible tree
   and the visual flow for everyone else. */
.field--trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form__error {
    border-left: 2px solid #A3341F;
    background: rgba(163, 52, 31, 0.05);
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    font-size: 0.9375rem;
    color: #7C2716;
}

.form__error p {
    margin: 0;
}

.form__error ul {
    margin: 0.5rem 0 0;
}

.form__error li {
    padding-left: 1rem;
    position: relative;
    margin-bottom: 0.3rem;
}

.form__error li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 0.4rem;
    height: 1px;
    background: currentColor;
}

.form__actions {
    padding-top: 0.75rem;
}

.confirmation {
    border: 1px solid var(--rule);
    border-left: 2px solid var(--gold);
    background: #FFFFFF;
    padding: clamp(1.75rem, 4vw, 2.5rem);
    max-width: 40rem;
    margin-top: 2.5rem;
}

.confirmation__title {
    font-family: var(--display);
    font-size: 1.5rem;
    margin: 0 0 0.75rem;
}

.confirmation__body {
    color: var(--muted);
    margin: 0 0 1.5rem;
}

.confirmation__ref {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--muted);
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
}

/* Contact detail column */

.contact-details {
    border-top: 1px solid var(--rule);
    padding-top: 1.75rem;
}

.contact-details__block {
    margin-bottom: 2rem;
}

.contact-details__label {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 0.5rem;
}

.contact-details__value {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--ink);
    margin: 0;
}

/* --------------------------------------------------------------------------
   17. Page header (interior pages)
   -------------------------------------------------------------------------- */

.page-head {
    background: var(--ink);
    color: var(--paper);
    padding-top: clamp(3.5rem, 7vw, 5.5rem);
    padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}

.page-head__index {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin: 0 0 1.5rem;
}

.page-head__title {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: 0;
    max-width: 18ch;
    margin: 0 0 1.5rem;
}

.page-head__lede {
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
    line-height: 1.62;
    color: #BFCDDF;
    max-width: 60ch;
    margin: 0;
}

/* --------------------------------------------------------------------------
   18. Statement list — used for the "how we work" sequence
   -------------------------------------------------------------------------- */

.steps {
    margin-top: 3rem;
}

.steps__item {
    padding: 2rem 0;
    border-top: 1px solid var(--rule);
}

.steps__item:last-child {
    border-bottom: 1px solid var(--rule);
}

.steps__title {
    font-family: var(--display);
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
}

.steps__body {
    color: var(--muted);
    font-size: 0.9375rem;
    max-width: 60ch;
    margin: 0;
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.footer {
    background: var(--ink);
    color: var(--paper);
    padding-top: clamp(3.5rem, 7vw, 5rem);
    padding-bottom: 2.5rem;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(2rem, 5vw, 3.5rem);
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--rule-dark);
}

.footer__logo {
    height: 6.5rem;
    width: auto;
    margin-bottom: 1.25rem;
}

.footer__label {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin: 0 0 0.6rem;
}

.footer__label--spaced {
    margin-top: 1.6rem;
}

.footer__line {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--muted-dark);
    margin: 0;
}

.footer__line a {
    color: var(--paper);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-soft);
    padding-bottom: 1px;
}

.footer__nav li {
    margin-bottom: 0.45rem;
}

.footer__nav a {
    font-size: 0.875rem;
    color: var(--muted-dark);
    text-decoration: none;
    transition: color 150ms var(--ease);
}

.footer__nav a:hover {
    color: var(--paper);
}

.footer__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 2rem;
}

.footer__base p {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--muted-dark);
    margin: 0;
}

.footer__note {
    max-width: 52ch;
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   20. Scroll reveal
   -------------------------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Page-load sequence for the hero, staggered by a small delay so the mandate
   line lands before the supporting detail. */
.hero__eyebrow,
.hero__title,
.hero__lede,
.hero__actions {
    animation: rise 780ms var(--ease) both;
}

.hero__title   { animation-delay: 90ms; }
.hero__lede    { animation-delay: 180ms; }
.hero__actions { animation-delay: 260ms; }

@keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .capabilities {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .nav-toggle {
        display: inline-flex;
    }

    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--rule);
        display: none;
        padding: 0.75rem var(--gutter) 1.5rem;
    }

    .nav.is-open {
        display: block;
    }

    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav__link {
        padding: 0.9rem 0;
        border-bottom: 1px solid var(--rule);
    }

    .nav__link.is-current {
        color: var(--gold);
    }

    .nav__cta {
        margin: 1rem 0 0;
        text-align: center;
    }

    .split,
    .split--even {
        grid-template-columns: minmax(0, 1fr);
    }

    .ledger__entry {
        grid-template-columns: minmax(0, 1fr);
    }

    .ledger__caps {
        padding-top: 1.25rem;
        margin-top: 0.25rem;
        border-top: 1px solid var(--rule);
    }

    .ledger__logo {
        max-width: 26rem;
    }

    .registry-strip .registry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    body {
        font-size: 1rem;
    }

    .capabilities {
        grid-template-columns: minmax(0, 1fr);
    }

    .spine__body {
        padding-top: 1.75rem;
    }

    .person,
    .ledger__entry {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .person__plate {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.125rem;
    }

    .programme__facts,
    .footer__grid,
    .registry-strip .registry {
        grid-template-columns: minmax(0, 1fr);
    }

    .mark__logo {
        height: 2.1rem;
    }

    .media-carousel__caption {
        padding: 0.9rem 1rem 1rem;
    }

    .media-carousel__controls {
        padding: 0.85rem 1rem;
    }
}

/* --------------------------------------------------------------------------
   22. Motion and print preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

@media print {
    .masthead,
    .nav-toggle,
    .hero__schematic,
    .cta-band {
        display: none;
    }

    body {
        background: #FFFFFF;
        color: #000000;
        font-size: 11pt;
    }

    .hero,
    .page-head,
    .footer,
    .section--dark {
        background: #FFFFFF;
        color: #000000;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   23. Process flow
   --------------------------------------------------------------------------
   Built in HTML rather than as one SVG so it reflows to a vertical stack on a
   phone. A fixed-viewBox diagram would force the reader to pinch and pan.
   -------------------------------------------------------------------------- */

.flow {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}

.section--dark .flow {
    background: var(--rule-dark);
    border-color: var(--rule-dark);
}

.flow__stage {
    position: relative;
    background: var(--paper);
    padding: 1.75rem 1.5rem 1.9rem;
}

.section--band .flow__stage {
    background: var(--paper-band);
}

.section--dark .flow__stage {
    background: var(--ink);
}

.flow__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 1.25rem;
    stroke: var(--navy);
    fill: none;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.section--dark .flow__icon {
    stroke: var(--gold-soft);
}

.flow__title {
    font-family: var(--display);
    font-size: 1.0625rem;
    line-height: 1.3;
    margin: 0 0 0.6rem;
}

.flow__note {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

.section--dark .flow__note {
    color: var(--muted-dark);
}

/* Direction marker between stages. Hidden on the last item and rotated when
   the grid wraps to a single column. */
.flow__stage::after {
    content: "";
    position: absolute;
    top: 2.35rem;
    right: -1px;
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--gold);
    border-right: 1px solid var(--gold);
    transform: translateX(50%) rotate(45deg);
    background: var(--paper);
}

.section--band .flow__stage::after { background: var(--paper-band); }
.section--dark .flow__stage::after {
    background: var(--ink);
    border-color: var(--gold-soft);
}

.flow__stage:last-child::after {
    display: none;
}

.flow__aside {
    margin-top: 1.75rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    line-height: 1.9;
    color: var(--muted);
}

.section--dark .flow__aside {
    color: var(--muted-dark);
}

.flow__aside span {
    color: var(--gold);
}

.section--dark .flow__aside span {
    color: var(--gold-soft);
}

/* --------------------------------------------------------------------------
   24. Media carousel
   --------------------------------------------------------------------------
   The carousel uses prepared crops from the supplied Botswana CTL deck. The
   controls are deliberately spare, so the figure still reads like part of the
   register rather than a marketing gallery.
   -------------------------------------------------------------------------- */

.media-band {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(2.25rem, 5vw, 4rem) 0;
}

.media-band--dark {
    background: var(--ink);
}

.media-carousel {
    border: 1px solid var(--rule-dark);
    background: #071323;
}

.media-carousel__viewport {
    position: relative;
    overflow: hidden;
}

.media-carousel__slide {
    margin: 0;
}

.media-carousel__slide:not(.is-active) {
    display: none;
}

.media-carousel__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    background: var(--ink);
}

.media-carousel__caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    padding: 1rem 1.25rem 1.15rem;
    border-top: 1px solid var(--rule-dark);
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.7;
    color: var(--muted-dark);
}

.media-carousel__caption strong {
    color: var(--gold-soft);
    font-weight: 500;
}

.media-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--rule-dark);
}

.media-carousel__button {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(251, 250, 248, 0.3);
    background: transparent;
    color: var(--paper);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 170ms var(--ease), color 170ms var(--ease), background 170ms var(--ease);
}

.media-carousel__button:hover {
    border-color: var(--gold-soft);
    color: var(--gold-soft);
}

.media-carousel__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.media-carousel__dot {
    width: 0.55rem;
    height: 0.55rem;
    border: 1px solid rgba(251, 250, 248, 0.55);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 170ms var(--ease), border-color 170ms var(--ease), transform 170ms var(--ease);
}

.media-carousel__dot.is-active {
    background: var(--gold-soft);
    border-color: var(--gold-soft);
    transform: scale(1.15);
}

/* --------------------------------------------------------------------------
   25. Illustration plates
   --------------------------------------------------------------------------
   Line drawings rather than photography. The subject is engineering, the rest
   of the site is set like a technical document, and a drawing states what a
   facility is without implying Eagle already operates one.
   -------------------------------------------------------------------------- */

.plate {
    background: var(--ink);
    overflow: hidden;
    position: relative;
}

.plate__art {
    display: block;
    width: 100%;
    height: auto;
}

.plate__art .line {
    fill: none;
    stroke: var(--gold-soft);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.plate__art .line--soft {
    stroke: #4E6E92;
    stroke-width: 1;
}

.plate__art .line--hatch {
    stroke: var(--gold-soft);
    stroke-width: 0.9;
    opacity: 0.5;
}

.plate__art .fill-soft {
    fill: rgba(78, 110, 146, 0.16);
    stroke: none;
}

.plate__art .fill-seam {
    fill: rgba(218, 181, 67, 0.1);
    stroke: none;
}

.plate__caption {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    padding: 1.1rem 0 1.4rem;
    border-top: 1px solid var(--rule-dark);
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-dark);
}

.plate__caption strong {
    color: var(--gold-soft);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   26. Engineering record
   -------------------------------------------------------------------------- */

.record {
    margin-top: 3rem;
    border-top: 1px solid var(--rule);
}

.record__row {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
}

.record__year {
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--gold);
}

.record__client {
    font-weight: 500;
    font-size: 0.9375rem;
}

.record__scope {
    font-size: 0.9375rem;
    color: var(--muted);
}

.record__note {
    margin-top: 1.75rem;
    font-size: 0.8125rem;
    color: var(--muted);
    max-width: 60ch;
}

/* --------------------------------------------------------------------------
   27. Figure — for photography, once it exists
   --------------------------------------------------------------------------
   Drop an <img> in and it is styled. See Assets/img/README.txt for the sizes
   and the licensing note before adding any.
   -------------------------------------------------------------------------- */

.figure {
    margin: 3rem 0 0;
}

.figure__image {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--rule);
}

.figure__caption {
    margin-top: 0.85rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--muted);
    line-height: 1.7;
}

.figure__caption strong {
    color: var(--gold);
    font-weight: 500;
}

@media (max-width: 900px) {
    .record__row {
        grid-template-columns: 5rem minmax(0, 1fr);
    }

    .record__scope {
        grid-column: 2;
    }

    /* The grid may be one, two or three columns here depending on viewport, so
       a rotated marker would point the wrong way. The 01–07 refs carry the
       sequence on their own. */
    .flow__stage::after {
        display: none;
    }
}