/*
 * ═══════════════════════════════════════════════════════════════════
 * Makaya Consult LTD — ltd.css
 * Override layer over the shared site.css / inner.css.
 *
 * The FZE site runs the established foliage-green palette. The LTD is
 * the newer entity and is built on the settled 27 August 2026 lockup
 * palette: heritage green #0E4A39, signal green #1A6B50, antique gold
 * #A8823C, bright gold #C9A227. Accents on dark ground use a lightened
 * derivative of the signal green so contrast clears WCAG AA.
 *
 * Load AFTER site.css or inner.css.
 * ═══════════════════════════════════════════════════════════════════
 */

:root{
  /* Ground: cooler and deeper than the FZE stack */
  --dark:#0C1512; --dark2:#101B17; --dark3:#16241F; --dark4:#1D2E28; --dark5:#080F0D;

  /* Brand greens */
  --green:#1A6B50;   /* signal green, button fills. Cream on this = 5.75:1 */
  --glt:#5FBE9A;     /* lightened accent for text and links. On --dark = 8.36:1 */
  --gdk:#0E4A39;     /* heritage green */

  /* Brand golds */
  --gold:#A8823C; --gold2:#C9A227;

  --muted:#93A79D; --muted2:#7C8F86;
  --cream:#F5F2E8; --white:#FAFAF8; --light:#E2E2E2;

  --bdr:rgba(26,107,80,.18); --bdrg:rgba(26,107,80,.34);

  /* Text layers. .35 in the base sheet lands at 3.03:1, below AA for body
     copy, so the muted layer is lifted to .48 which clears at 4.64:1. */
  --t100:rgba(245,242,232,1);
  --t78:rgba(245,242,232,.78);
  --t55:rgba(245,242,232,.55);
  --t35:rgba(245,242,232,.48);
}

body{background:var(--dark)}

/* ── Chrome ───────────────────────────────────────────────────────
   site.css and inner.css both end with a light-chrome block: ivory nav
   and ivory footer, with the text wordmark hidden and the lockup carried
   as an image. The LTD keeps that convention and swaps in its own lockup,
   so the two sites read as one family at the top and bottom of the page.
   Everything below is written for that ivory ground, not for dark.      */

.nav-logo-img,.fb-logo img{height:46px;width:auto}
@media(max-width:520px){.nav-logo-img{height:38px}}
@media(min-width:821px) and (max-width:1279px){.nav-logo-img{height:38px}}

/* Sister-entity link, on the ivory footer */
.sister-link{display:inline-flex;flex-direction:column;gap:3px;margin-top:1.5rem;padding:.85rem 1.1rem;
  border:1px solid rgba(14,74,57,.28);text-decoration:none;transition:border-color .25s,background .25s}
.sister-link:hover{border-color:#0E4A39;background:rgba(14,74,57,.06)}
.sister-k{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:#5C5C52}
.sister-w{font-family:var(--dp,'Playfair Display',Georgia,serif);font-size:1rem;color:#0E4A39}
.foot-lbl{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:#0E4A39}

/* Makaya Group endorsement band, dark register on the ivory footer */
.mkg-band{display:flex;justify-content:center;padding:0 0 1.7rem;margin-bottom:1.5rem;
  border-bottom:1px solid rgba(14,74,57,.14)}
.mkg-endorse{display:inline-flex;align-items:center;gap:13px;color:#6b6b68;text-decoration:none;line-height:1;
  transition:color .25s;font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.mkg-endorse:hover{color:#151619}
.mkg-endorse .mkg-seal{width:44px;height:44px;flex:none}
.mkg-endorse .mkg-t{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left}
.mkg-endorse .mkg-k{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;opacity:.92}
.mkg-endorse .mkg-w{font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;letter-spacing:.14em;color:#151619}

/* site.css paints #philosophy in the accent green with white text, which is a
   2.5:1 combination. The LTD band carries running copy, so it goes dark.     */
#philosophy{background:var(--dark2);border-top:1px solid var(--bdr);
  border-bottom:1px solid var(--bdr);padding:clamp(3rem,6vw,4.5rem) 0}

/* ── Licence panel: why there are two companies ─────────────────── */
.lic{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--bdr);margin-top:2.5rem}
.lic-col{padding:2.2rem 2rem}
.lic-col + .lic-col{border-left:1px solid var(--bdr)}
.lic-col.here{background:rgba(26,107,80,.12)}
.lic-suffix{font-family:var(--dp,'Playfair Display',Georgia,serif);font-size:1.55rem;color:var(--cream);margin-bottom:.2rem}
.lic-suffix em{font-style:normal;color:var(--gold2);font-size:.72em;letter-spacing:.08em;margin-left:.35em}
.lic-scope{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
.lic-body{font-size:.95rem;color:var(--t55);line-height:1.75}
.lic-tag{display:inline-block;margin-top:1.1rem;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--glt)}
.lic-tag.you{color:var(--gold2)}
@media(max-width:760px){.lic{grid-template-columns:1fr}.lic-col + .lic-col{border-left:none;border-top:1px solid var(--bdr)}}

/* ── Pillars ─────────────────────────────────────────────────────── */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;border-top:1px solid var(--bdr)}
.pil{padding:2.4rem 2rem 2.6rem;border-bottom:1px solid var(--bdr);border-right:1px solid var(--bdr);position:relative}
.pil:hover{background:var(--dark2)}
.pil-n{font-size:.6rem;letter-spacing:.24em;color:var(--gold);margin-bottom:1rem}
.pil h3{font-size:1.5rem;margin-bottom:.9rem;color:var(--cream)}
.pil p{font-size:.95rem;color:var(--t55);line-height:1.75;margin-bottom:1rem}
.pil ul{list-style:none;margin:0 0 1.2rem}
.pil li{font-size:.86rem;color:var(--t78);padding-left:1.05rem;position:relative;line-height:1.62;margin-bottom:.38rem}
.pil li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--gold);
  transform:rotate(45deg)}

/* ── Stage ladder ────────────────────────────────────────────────── */
.stages{counter-reset:stg;margin-top:2.5rem}
.stg{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;padding:1.9rem 0;border-top:1px solid var(--bdr)}
.stg:last-child{border-bottom:1px solid var(--bdr)}
.stg-n{counter-increment:stg;font-family:var(--dp,'Playfair Display',Georgia,serif);font-size:2.2rem;
  color:var(--gold2);line-height:1;min-width:2.4rem}
.stg-n::before{content:counter(stg,decimal-leading-zero)}
.stg h3{font-size:1.3rem;margin-bottom:.55rem;color:var(--cream)}
.stg p{font-size:.96rem;color:var(--t55);line-height:1.75}
.stg .stg-fee{display:block;margin-top:.7rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--glt)}

/* ── Record cards ────────────────────────────────────────────────── */
.recs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-top:2.5rem}
.rec{border:1px solid var(--bdr);padding:2rem 1.8rem;background:var(--dark2)}
.rec-k{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem}
.rec h3{font-size:1.35rem;margin-bottom:.7rem;color:var(--cream)}
.rec p{font-size:.93rem;color:var(--t55);line-height:1.75}
.rec .rec-fig{font-family:var(--dp,'Playfair Display',Georgia,serif);font-size:2.6rem;color:var(--glt);
  line-height:1;margin-bottom:.5rem;display:block}

/* ── Standing / candour block ────────────────────────────────────── */
.standing{border-left:2px solid var(--gold);padding:.4rem 0 .4rem 1.6rem;margin:2.2rem 0}
.standing p{font-size:1.02rem;color:var(--t78);line-height:1.78}
.standing p + p{margin-top:1rem}

/* ── Corporate record table ──────────────────────────────────────── */
.crec{width:100%;border-collapse:collapse;margin-top:2rem}
.crec th,.crec td{text-align:left;padding:.85rem 0;border-bottom:1px solid var(--bdr);vertical-align:top}
.crec th{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--glt);font-weight:500;
  width:38%;padding-right:1.5rem}
.crec td{font-size:.95rem;color:var(--t78)}

/* Focus visibility across the whole site */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold2);outline-offset:3px}

/* site.css and inner.css set the footer copyright line at #7A7A6E on ivory,
   which is 3.82:1 and below AA for 11px text. Darkened to 5.66:1. */
.foot-copy,.foot-copy a{color:#5C5C52}
.foot-copy a:hover{color:#0E4A39}

/* ── Hero ─────────────────────────────────────────────────────────
   The LTD hero photographs are documentary rather than architectural,
   so the scrim is carried further up the frame than on the FZE site to
   keep the eyebrow and headline legible over a bright sky.           */
.hero-slide::after{background:linear-gradient(165deg,
  rgba(12,21,18,.34) 0%, rgba(12,21,18,.66) 42%, rgba(12,21,18,.97) 100%)}
.hero-tag{color:#8FD9BC;text-shadow:0 1px 12px rgba(8,15,13,.85)}
.hero-caption{padding-right:4.2rem}
@media(max-width:640px){.hero-caption{padding-right:4.6rem;max-width:78vw;text-align:right}}

/* The scope line beside the lockup was tried and dropped. It and the FZE
   switch competed for the same strip of nav, and at 1440px they collided.
   The switch wins: naming the company you are already on is worth less than
   a way off it, and the wordmark carries the LTD suffix regardless. */
.nav-brand-text{display:none}

/* On a phone the hero actions land under the floating WhatsApp button.
   Extra foot room on the hero clears it. */
@media(max-width:640px){#hero{padding-bottom:9rem}}

/* ── The way back ─────────────────────────────────────────────────
   Two companies share one domain, so a visitor can take the wrong door.
   Recovery cannot live only in the footer: it belongs at the top of every
   page, sitting before the LTD's own navigation and reading as a way out
   rather than as another section of this site. It goes straight to the FZE
   home, not back to the chooser, because the visitor has already chosen. */
.nav-ul li.nav-switch a{
  color:#0E4A39!important; font-size:.6rem!important; font-weight:600!important;
  letter-spacing:.15em; white-space:nowrap; opacity:.82; transition:opacity .2s}
.nav-ul li.nav-switch a::before{content:"←"; margin-right:.4em; font-weight:400}
.nav-ul li.nav-switch a:hover{opacity:1}
@media(min-width:821px) and (max-width:899px){
  .nav-ul li.nav-switch{padding-right:1.1rem;
    border-right:1px solid rgba(14,74,57,.18)}
}
@media(max-width:820px){
  .nav-ul li.nav-switch a{font-size:.72rem!important; color:#0E4A39!important; opacity:1}
  .nav-ul li.nav-switch{order:-1; margin-bottom:.6rem; padding-bottom:1rem;
    border-bottom:1px solid rgba(14,74,57,.18); width:min(78%,320px); text-align:center}
}

/* Nothing in the nav may overlap when the row runs out of room. */
#nav{gap:1rem}
.nav-brand{flex:0 0 auto}
.nav-ul{min-width:0}
.nav-ul{flex-wrap:nowrap}
/* Roomier gaps only where there is room. Below this, site.css tightens the
   row for both companies and ltd.css must not undo it. */
@media(min-width:1280px){.nav-ul{gap:1.6rem}}

