/* BTS site — shared stylesheet, v1 */

/* ============================================================
   BTS home — v19
   A1School slide rewritten around gate security and parent notification.
   Photography runs clean and full-strength; darkening is confined to a
   feathered bottom-left corner and a halo behind the medallion.
   Centred logo as the single route home; all navigation recessed into the menu.
   Hero pattern after esade.edu; palette and language are BTS house.
   ============================================================ */

:root{
  --navy:#264563;
  --navy-deep:#132A40;
  --navy-ink:#0B1B2B;
  --teal:#50C4C5;
  --bts-blue:#0999D6;      /* the logo blue, as published by consulting.bts.com.ng */
  --bts-blue-deep:#0A7CB4; /* panels — one step deeper, so white type clears AA */
  --bts-blue-ink:#06598A;  /* footer and menu — the page still needs a dark anchor */
  --tile:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIiB2aWV3Qm94PSIwIDAgMzAwIDMwMCI+CjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgb3BhY2l0eT0iMC4xNiI+CiAgPCEtLSBpZCBjYXJkIC0tPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4LDIyKSI+CiAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iNTIiIGhlaWdodD0iMzQiIHJ4PSIzIi8+CiAgICA8Y2lyY2xlIGN4PSIxNCIgY3k9IjEzIiByPSI2Ii8+PHBhdGggZD0iTTUgMjdjMi02IDE2LTYgMTggMCIvPgogICAgPHBhdGggZD0iTTMwIDExaDE2TTMwIDE3aDE2TTMwIDIzaDEwIi8+CiAgPC9nPgogIDwhLS0gZmluZ2VycHJpbnQgLS0+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEyLDE2KSI+CiAgICA8cGF0aCBkPSJNNCAyNmExOCAxOCAwIDAgMSAzNiAwIi8+CiAgICA8cGF0aCBkPSJNMTEgMjhhMTEgMTEgMCAwIDEgMjIgMHY4Ii8+CiAgICA8cGF0aCBkPSJNMTggMzBhNCA0IDAgMCAxIDggMHYxMiIvPgogICAgPHBhdGggZD0iTTQgMzR2Nk00MCAzNHY2Ii8+CiAgPC9nPgogIDwhLS0gbW9ydGFyYm9hcmQgLS0+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTk2LDI0KSI+CiAgICA8cGF0aCBkPSJNMCAxMiAyNiAybDI2IDEwLTI2IDEweiIvPgogICAgPHBhdGggZD0iTTEwIDE3djExYzAgNCAzMiA0IDMyIDBWMTciLz4KICAgIDxwYXRoIGQ9Ik01MCAxM3YxMyIvPgogIDwvZz4KICA8IS0tIGJhciBjaGFydCAtLT4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOCwxMDgpIj4KICAgIDxwYXRoIGQ9Ik0wIDQwaDQ4Ii8+CiAgICA8cmVjdCB4PSI0IiB5PSIyMiIgd2lkdGg9IjkiIGhlaWdodD0iMTYiLz4KICAgIDxyZWN0IHg9IjE5IiB5PSIxMiIgd2lkdGg9IjkiIGhlaWdodD0iMjYiLz4KICAgIDxyZWN0IHg9IjM0IiB5PSI0IiB3aWR0aD0iOSIgaGVpZ2h0PSIzNCIvPgogIDwvZz4KICA8IS0tIG5mYyB3YXZlcyAtLT4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjAsMTEwKSI+CiAgICA8cGF0aCBkPSJNNiA2YTI2IDI2IDAgMCAxIDAgMzQiLz4KICAgIDxwYXRoIGQ9Ik0xNiAxMmExNiAxNiAwIDAgMSAwIDIyIi8+CiAgICA8cGF0aCBkPSJNMjYgMThhNyA3IDAgMCAxIDAgMTAiLz4KICA8L2c+CiAgPCEtLSByZWNlaXB0IC0tPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5OCwxMDQpIj4KICAgIDxwYXRoIGQ9Ik0yIDJoNDB2NDJsLTctNS03IDUtNi01LTcgNS02LTUtNyA1eiIvPgogICAgPHBhdGggZD0iTTEwIDEzaDI0TTEwIDIxaDI0TTEwIDI5aDE0Ii8+CiAgPC9nPgogIDwhLS0gbG9jayAtLT4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMiwyMDQpIj4KICAgIDxyZWN0IHg9IjAiIHk9IjE2IiB3aWR0aD0iMzYiIGhlaWdodD0iMjYiIHJ4PSIzIi8+CiAgICA8cGF0aCBkPSJNOCAxNnYtNmExMCAxMCAwIDAgMSAyMCAwdjYiLz4KICAgIDxjaXJjbGUgY3g9IjE4IiBjeT0iMjkiIHI9IjMiLz4KICA8L2c+CiAgPCEtLSBib29rIC0tPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwOCwyMDYpIj4KICAgIDxwYXRoIGQ9Ik0wIDRoMjBhNiA2IDAgMCAxIDYgNnYzMGE2IDYgMCAwIDAtNi02SDB6Ii8+CiAgICA8cGF0aCBkPSJNNTIgNEgzMmE2IDYgMCAwIDAtNiA2djMwYTYgNiAwIDAgMSA2LTZoMjB6Ii8+CiAgPC9nPgogIDwhLS0gY29pbiAtLT4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDYsMjA2KSI+CiAgICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIxOSIvPgogICAgPHBhdGggZD0iTTEyIDEydjE2TTI4IDEydjE2TTEwIDE3aDIwTTEwIDIzaDIwIi8+CiAgPC9nPgo8L2c+Cjwvc3ZnPg==");               /* line-art texture, shared by every blue surface */
  --green:#037146;
  --sand:#DFD581;
  --olive:#717B3A;
  --bone:#F5F6F4;
  --paper:#FFFFFF;
  --ink:#101A22;
  --ink-60:rgba(16,26,34,.62);
  --line:rgba(16,26,34,.14);
  --line-light:rgba(255,255,255,.28);

  --shell:min(1440px, 92vw);
  --gutter:clamp(20px, 4vw, 64px);

  --f-display:'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --step:clamp(56px, 8vw, 128px);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-display);
  font-weight:500;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}

.shell{width:var(--shell);margin-inline:auto;}

/* Visually hidden, still read by search engines and screen readers. */
.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;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:#fff;color:var(--ink);padding:12px 20px;font-weight:700;
}
.skip:focus{left:12px;top:12px;}

/* ---------- shared type ---------- */
.eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.06em;
  color:var(--teal);text-transform:lowercase;margin:0 0 18px;
}
.eyebrow--ink{color:var(--green);}
h1,h2,h3,h4{font-weight:900;letter-spacing:-.03em;line-height:1.02;margin:0;}
h2{font-size:clamp(32px,4.4vw,60px);}
h3{font-size:clamp(21px,2vw,27px);letter-spacing:-.02em;line-height:1.14;}
p{margin:0 0 1em;}
.lede{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--ink-60);max-width:60ch;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 30px;border:1px solid currentColor;
  font-weight:700;font-size:14px;letter-spacing:.09em;text-transform:uppercase;
  transition:background .25s ease,color .25s ease,gap .25s ease;
}
.btn:hover{gap:22px;}
.btn--ghost{color:#fff;border-color:rgba(255,255,255,.7);}
.btn--ghost:hover{background:#fff;color:var(--bts-blue-ink);}
.btn--solid{background:var(--green);color:#fff;border-color:var(--green);}
.btn--solid:hover{background:var(--bts-blue-deep);border-color:var(--bts-blue-deep);}
.btn--ink{color:var(--ink);}
.btn--ink:hover{background:var(--ink);color:#fff;}

/* ============================================================
   HEADER — transparent over the hero, solid once scrolled
   ============================================================ */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:80;
  transition:background .35s ease, box-shadow .35s ease;
}
/* three-column grid: menu | logo | utility.
   The logo sits dead centre and is the only permanent way home. */
.hdr__in{
  width:var(--shell);margin-inline:auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  height:82px;
}

/* --- menu trigger (left) --- */
.hdr__menu{
  justify-self:start;
  display:inline-flex;align-items:center;gap:13px;
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:10px 2px;transition:color .3s ease;
}
.hdr__bars{display:flex;flex-direction:column;gap:5px;width:24px;}
.hdr__bars span{
  display:block;height:2px;background:currentColor;width:100%;
  transition:width .3s cubic-bezier(.6,0,.2,1);
}
.hdr__bars span:nth-child(2){width:16px;}
.hdr__menu:hover .hdr__bars span:nth-child(2){width:100%;}
.hdr__menu:hover .hdr__bars span:nth-child(3){width:16px;}

/* --- logo (centre) --- */
.hdr__logo{justify-self:center;display:block;}
.hdr__logo img{height:38px;width:auto;transition:height .35s ease;}
.hdr__logo .logo-light{display:block;}
.hdr__logo .logo-dark{display:none;}

/* --- utility (right) --- */
.hdr__util{justify-self:end;display:inline-flex;align-items:center;gap:10px;}
.hdr__util a{
  display:inline-flex;align-items:center;gap:9px;
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:10px 2px;transition:color .3s ease;
}
.hdr__util a:hover{color:var(--teal);}
.hdr__util svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none;}

.hdr.is-solid,
.hdr.is-stuck{background:var(--paper);box-shadow:0 1px 0 var(--line);}
.hdr.is-solid,
.hdr.is-stuck .hdr__in{height:70px;}
.hdr.is-solid,
.hdr.is-stuck .hdr__logo img{height:32px;}
.hdr.is-solid,
.hdr.is-stuck .hdr__logo .logo-light{display:none;}
.hdr.is-solid,
.hdr.is-stuck .hdr__logo .logo-dark{display:block;}
.hdr.is-solid,
.hdr.is-stuck .hdr__menu{color:var(--ink);}
.hdr.is-solid,
.hdr.is-stuck .hdr__util a{color:var(--ink);}
.hdr.is-solid,
.hdr.is-stuck .hdr__util a:hover{color:var(--green);}

/* ---------- the menu (now the only one) ---------- */
.drawer{
  position:fixed;inset:0;z-index:90;color:#fff;
  background-color:var(--bts-blue-ink);background-image:var(--tile);background-size:300px 300px;
  transform:translateY(-101%);transition:transform .55s cubic-bezier(.65,0,.2,1);
  display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.drawer.is-open{transform:translateY(0);}
.drawer__top{
  width:var(--shell);margin-inline:auto;flex:none;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:82px;
}
.drawer__top .drawer__logo{justify-self:center;}
.drawer__top .drawer__logo img{height:38px;}
.drawer__close{
  justify-self:start;color:#fff;
  display:inline-flex;align-items:center;gap:13px;
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:10px 2px;
}
.drawer__close svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none;}
.drawer__close:hover{color:var(--teal);}

.drawer__body{
  width:var(--shell);margin-inline:auto;
  padding:clamp(30px,6vh,72px) 0 60px;
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,6vw,90px);
  align-items:start;
}
.drawer nav{display:flex;flex-direction:column;}
.drawer nav a{
  color:#fff;font-size:clamp(30px,5.4vw,64px);font-weight:900;letter-spacing:-.04em;line-height:1.05;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.13);
  transition:color .25s ease,padding-left .35s cubic-bezier(.6,0,.2,1);
}
.drawer nav a:hover{color:var(--teal);padding-left:16px;}
.drawer nav a i{
  font-style:normal;color:var(--teal);font-size:12px;font-weight:700;letter-spacing:.11em;
  display:block;margin-bottom:6px;text-transform:lowercase;
}
.drawer nav a:hover i{color:var(--sand);}

.drawer__side{padding-top:clamp(8px,2vw,26px);}
.drawer__side h4{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin:0 0 18px;
}
.drawer__side ul{list-style:none;margin:0 0 40px;padding:0;display:flex;flex-direction:column;gap:2px;}
.drawer__side ul a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);
  font-size:16px;font-weight:700;color:rgba(255,255,255,.9);transition:color .2s ease;
}
.drawer__side ul a:hover{color:var(--teal);}
.drawer__side ul svg{width:13px;height:13px;stroke:var(--teal);stroke-width:1.8;fill:none;flex:none;}
.drawer__contact{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.7);font-style:normal;}
.drawer__contact a:hover{color:var(--teal);}

/* ============================================================
   HERO — full viewport, auto-advancing carousel
   ============================================================ */
.hero{
  position:relative;
  height:100svh;min-height:600px;
  background:var(--navy-ink);
  overflow:hidden;
  color:#fff;
}
.hero__slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .9s ease, visibility .9s ease;
}
.hero__slide.is-active{opacity:1;visibility:visible;}
.hero__media{position:absolute;inset:0;}
.hero__media picture{position:absolute;inset:0;display:block;}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  /* --focus is set per slide: where the action actually happens in that frame.
     On a wide screen almost the whole frame is visible, so centre is fine. */
  object-position:center;
  transform:scale(1.06);
  transition:transform 9s linear;
}
.hero__slide.is-active .hero__media img{transform:scale(1);}
/* The photograph runs clean and full-strength. The only darkening is a
   feathered corner anchored at bottom-left, sized to the text block, plus
   a whisper at the very top so the header stays legible. */
.hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    /* text corner — soft ellipse bleeding off the bottom-left */
    radial-gradient(120% 105% at 0% 100%,
      rgba(9,22,35,.94) 0%,
      rgba(9,22,35,.86) 22%,
      rgba(9,22,35,.62) 42%,
      rgba(9,22,35,.30) 60%,
      rgba(9,22,35,.08) 76%,
      rgba(9,22,35,0) 88%),
    /* header legibility only */
    linear-gradient(180deg, rgba(9,22,35,.42) 0%, rgba(9,22,35,.12) 9%, rgba(9,22,35,0) 17%),
    /* keeps the control row readable over a bright frame */
    linear-gradient(0deg, rgba(9,22,35,.34) 0%, rgba(9,22,35,0) 13%);
}

.hero__body{
  position:relative;z-index:3;height:100%;
  width:var(--shell);margin-inline:auto;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(96px,13vh,150px);
}
.hero__text{max-width:min(820px,72%);}
.hero__eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--teal);
  margin:0 0 16px;text-transform:lowercase;
}
.hero .hero__h{
  font-size:clamp(42px,7.4vw,110px);
  font-weight:900;letter-spacing:-.045em;line-height:.94;
  margin:0 0 20px;
  text-shadow:0 2px 30px rgba(9,22,35,.5);
}
.hero .hero__h em{font-style:normal;color:var(--teal);}
.hero__sub{
  font-size:clamp(16px,1.4vw,20px);line-height:1.5;
  color:rgba(255,255,255,.92);max-width:52ch;margin:0 0 30px;
  text-shadow:0 1px 18px rgba(9,22,35,.55);
}

/* --- product lockup, sitting above the copy.
       Deliberately small: it identifies the slide, it does not headline it. --- */
.hero__brand{
  display:flex;align-items:flex-end;
  min-height:clamp(20px,2.2vw,30px);
  margin:0 0 18px;
  opacity:.94;
}
.hero__brand img{
  height:clamp(20px,2.1vw,28px);width:auto;max-width:min(200px,48vw);
  object-fit:contain;object-position:left bottom;
  filter:drop-shadow(0 1px 10px rgba(9,22,35,.45));
}

/* stacked marks (icon over wordmark) need more height to read at the same
   optical weight as a wide horizontal mark */
.hero__brand img.brand--tall{height:clamp(30px,3.3vw,44px);max-width:none;}

/* BTS + letter-spaced descriptor, as used on consulting.bts.com.ng */
.lockup{display:inline-block;}
.lockup img{display:block;height:clamp(18px,1.9vw,25px);}
.lockup .lockup__word{
  display:flex;justify-content:space-between;width:100%;
  margin-top:3px;color:#fff;
  font-size:clamp(5.5px,.5vw,7px);font-weight:700;line-height:1;
  text-shadow:0 1px 8px rgba(9,22,35,.6);
}
.lockup .lockup__word i{font-style:normal;}

/* stand-in wordmark, used until a supplied logo file replaces it */
.wordmark{
  display:inline-flex;align-items:baseline;gap:8px;
  color:#fff;font-weight:900;letter-spacing:-.02em;
  font-size:clamp(17px,1.75vw,23px);line-height:1;
  text-shadow:0 1px 12px rgba(9,22,35,.6);
}
.wordmark b{font-weight:900;}
.wordmark small{
  font-size:clamp(6.5px,.55vw,8px);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal);white-space:nowrap;
}
/* the signature: a proof medallion, one product fact per slide.
   It sits over open photograph, so it carries its own soft navy halo. */
.medallion{
  position:absolute;right:0;top:50%;transform:translateY(-58%);
  width:clamp(200px,25vw,330px);aspect-ratio:1;
  display:grid;place-items:center;text-align:center;
  pointer-events:none;
}
/* halo — a soft radial pool, larger than the ring, feathering to nothing */
.medallion::before{
  content:"";position:absolute;left:50%;top:50%;
  width:190%;height:190%;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(9,22,35,.66) 0%,
    rgba(9,22,35,.52) 30%,
    rgba(9,22,35,.28) 50%,
    rgba(9,22,35,.09) 68%,
    rgba(9,22,35,0) 82%);
}
.medallion > *{position:relative;}
.medallion__ring{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);
  /* open the ring at the lower left, like a stamp */
  clip-path:polygon(0 0,100% 0,100% 100%,42% 100%,42% 78%,0 78%);
  filter:drop-shadow(0 1px 5px rgba(9,22,35,.5));
}
.medallion__fig{
  font-size:clamp(56px,7.4vw,104px);font-weight:900;letter-spacing:-.05em;
  line-height:.9;color:var(--sand);
  text-shadow:0 1px 3px rgba(9,22,35,.55), 0 2px 24px rgba(9,22,35,.7);
}
.medallion__lbl{
  font-size:clamp(11px,1vw,14px);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;margin-top:10px;max-width:74%;line-height:1.35;
  text-shadow:0 1px 3px rgba(9,22,35,.6), 0 1px 16px rgba(9,22,35,.75);
}
.medallion__proof{
  position:absolute;bottom:-6%;right:2%;
  background:rgba(255,255,255,.94);color:var(--bts-blue-ink);
  padding:9px 14px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  max-width:200px;line-height:1.3;text-align:left;
}

/* controls */
.hero__ctrl{
  position:absolute;left:0;right:0;bottom:clamp(26px,4vh,48px);z-index:4;
}
.hero__ctrl-in{
  width:var(--shell);margin-inline:auto;
  display:flex;align-items:center;justify-content:flex-end;gap:20px;
}
.ctrl-btn{
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  display:grid;place-items:center;color:#fff;
  transition:background .25s ease,color .25s ease;
}
.ctrl-btn:hover{background:#fff;color:var(--bts-blue-ink);}
.ctrl-btn svg{width:15px;height:15px;fill:currentColor;}
.hero__track{
  position:relative;width:clamp(120px,26vw,320px);height:1px;
  background:rgba(255,255,255,.35);
}
.hero__fill{
  position:absolute;inset:0 auto 0 0;width:0;background:#fff;
}
.hero__count{font-size:13px;font-weight:700;letter-spacing:.12em;color:#fff;min-width:52px;text-align:center;}
.hero__arrows{display:flex;gap:6px;}
.hero__arrows button{width:40px;height:40px;display:grid;place-items:center;color:#fff;}
.hero__arrows button:hover{color:var(--teal);}
.hero__arrows svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.4;fill:none;}

/* ============================================================
   QUICK BAR — the dark strip that sits under the Esade hero
   ============================================================ */
.quickbar{
  background-color:var(--bts-blue-deep);
  background-image:var(--tile);
  background-repeat:repeat;
  background-size:300px 300px;
  color:#fff;
}
.quickbar__in{
  width:var(--shell);margin-inline:auto;
  display:grid;grid-template-columns:repeat(5,1fr);
}
.quickbar a{
  padding:26px 18px;font-size:14px;font-weight:700;letter-spacing:.02em;
  border-left:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;
  transition:background .25s ease;
}
.quickbar a:first-child{border-left:0;}
.quickbar a:hover{background:rgba(11,27,43,.32);}
.quickbar a svg{width:13px;height:13px;stroke:#fff;stroke-width:1.8;fill:none;flex:none;opacity:.85;}
.quickbar a:hover svg{opacity:1;}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding:var(--step) 0;}
.sec--bone{background:var(--bone);}
.sec--navy{background-color:var(--bts-blue-deep);background-image:var(--tile);background-size:300px 300px;color:#fff;}
.sec__head{max-width:760px;margin-bottom:clamp(36px,5vw,64px);}
.sec--navy .lede{color:#fff;}
.sec--navy .eyebrow{color:var(--teal);}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);}
.rv.in{opacity:1;transform:none;}

/* intro split */
.intro{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,90px);align-items:start;}
.intro__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.intro__stats div{background:var(--paper);padding:28px 24px;}
.intro__stats b{display:block;font-size:clamp(34px,4vw,52px);font-weight:900;letter-spacing:-.04em;color:var(--bts-blue-deep);line-height:1;}
.intro__stats span{display:block;margin-top:8px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink-60);}

/* core values — numbered, because they are a fixed set the company recites in order */
.values{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2.4vw,34px);}
.value{text-align:left;}
.value__num{
  width:clamp(66px,7vw,98px);aspect-ratio:1;margin:0 0 18px;
  border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;
  font-size:clamp(15px,1.4vw,19px);font-weight:900;letter-spacing:.01em;color:var(--bts-blue-deep);
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.value:hover .value__num,
.value:focus-visible .value__num{background:var(--bts-blue-deep);border-color:var(--bts-blue-deep);color:#fff;}
.value h3{font-size:clamp(14px,1.25vw,18px);letter-spacing:-.01em;}
.value h3 em{font-style:normal;color:var(--green);}
.value__note{
  font-size:13.5px;line-height:1.55;color:var(--ink-60);
  margin:12px 0 0;max-width:28ch;
}
.value__note strong{font-weight:700;color:var(--ink);}
/* On a pointer device the note is held back until the value is hovered or
   focused. On touch, where there is no hover, it is simply always there. */
@media (hover:hover) and (pointer:fine){
  .value__note{
    opacity:0;transform:translateY(-6px);
    transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .value:hover .value__note,
  .value:focus-visible .value__note{opacity:1;transform:none;}
}
.values-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(36px,5vw,58px);}
.values-head .mantra{
  font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink-60);
  border-left:2px solid var(--teal);padding-left:14px;margin:0;
}
.values-head .mantra b{color:var(--green);letter-spacing:.16em;}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.pcard{
  background:var(--paper);padding:34px 30px 30px;
  display:flex;flex-direction:column;min-height:290px;
  transition:background .3s ease;
}
.pcard:hover{background:var(--bts-blue-deep);color:#fff;}
.pcard__tag{
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--green);margin-bottom:20px;
}
.pcard:hover .pcard__tag{color:var(--teal);}
.pcard h3{margin-bottom:12px;}
.pcard p{font-size:15px;line-height:1.55;color:var(--ink-60);margin-bottom:22px;}
.pcard:hover p{color:rgba(255,255,255,.8);}
.pcard__go{
  margin-top:auto;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;transition:gap .25s ease;
}
.pcard:hover .pcard__go{gap:18px;}
.pcard__go svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;}

/* consulting wide card */
.wide{
  margin-top:1px;color:#fff;
  background-color:var(--bts-blue-deep);background-image:var(--tile);background-size:300px 300px;
  padding:clamp(34px,4vw,54px);
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center;
  border:1px solid var(--line);border-top:0;
}
.wide h3{font-size:clamp(24px,2.6vw,36px);margin-bottom:14px;}
.wide p{color:#fff;font-size:15.5px;margin-bottom:0;}
.wide__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.wide__steps div{
  border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.07);
  padding:18px 12px;text-align:center;
}
.wide__steps b{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sand);}

/* services */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);}
.svc{border-top:2px solid var(--teal);padding-top:24px;}
.svc h3{margin-bottom:12px;}
.svc p{font-size:15px;color:var(--ink-60);margin:0;}
.sec--navy .svc p{color:#fff;}
.sec--navy .svc{border-top-color:var(--sand);}

/* clients */
.clients{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.client{background:var(--paper);padding:32px 24px;display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.client img{
  height:40px;max-width:170px;width:auto;object-fit:contain;object-position:left center;
  filter:grayscale(1);opacity:.72;transition:filter .3s ease,opacity .3s ease;
}
.client:hover img{filter:none;opacity:1;}
.client b{font-size:15px;font-weight:700;}
.client span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);}

/* cta band */
.cta{background:var(--green);color:#fff;padding:clamp(48px,6vw,86px) 0;}
.cta__in{width:var(--shell);margin-inline:auto;display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;}
.cta h2{font-size:clamp(28px,3.6vw,50px);max-width:18ch;}

/* footer */
.ftr{
  background-color:var(--bts-blue-ink);background-image:var(--tile);background-size:300px 300px;
  color:rgba(255,255,255,.82);padding:clamp(48px,6vw,80px) 0 34px;font-size:14.5px;
}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,4vw,56px);}
.ftr img{height:36px;margin-bottom:20px;}
.ftr h4{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:18px;}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.ftr a:hover{color:var(--teal);}
.ftr address{font-style:normal;line-height:1.65;}
.ftr__base{
  margin-top:clamp(34px,5vw,56px);padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .intro{grid-template-columns:1fr;}
  .pgrid{grid-template-columns:repeat(2,1fr);}
  .wide{grid-template-columns:1fr;}
  .ftr__grid{grid-template-columns:1fr 1fr;}
  .quickbar__in{grid-template-columns:repeat(3,1fr);}
  .quickbar a{border-top:1px solid rgba(255,255,255,.22);}
}
@media (max-width:900px){
  /* A 16:9 frame cropped to a portrait screen loses roughly half its width.
     These photographs were composed with the subject in the right two-thirds,
     so a centred crop would cut the action out. Each slide declares its own
     --focus and the crop holds that point instead. */
  .hero__media img{object-position:var(--focus, 66% 48%);}
  .drawer__body{grid-template-columns:1fr;gap:44px;}
  .hero__text{max-width:100%;}
  .medallion{
    position:relative;transform:none;margin:0 0 26px auto;
    width:clamp(140px,38vw,190px);
  }
  .medallion__proof{position:static;margin:14px 0 0 auto;display:inline-block;}
  .hero__body{justify-content:flex-end;}
  .values{grid-template-columns:repeat(3,1fr);row-gap:36px;}
  .svcs{grid-template-columns:1fr;}
  .clients{grid-template-columns:repeat(2,1fr);}
  .client img{height:34px;max-width:140px;}
  .wide__steps{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  body{font-size:16px;}
  /* text runs full width on a phone, so the feather widens with it */
  /* phones are served the 9:16 frame, composed for this shape — centre it */
  .hero__media img{object-position:center;transform:scale(1.02);}
  .hero__media::after{
    background:
      radial-gradient(150% 78% at 12% 100%,
        rgba(9,22,35,.94) 0%,
        rgba(9,22,35,.86) 28%,
        rgba(9,22,35,.58) 50%,
        rgba(9,22,35,.24) 70%,
        rgba(9,22,35,0) 88%),
      linear-gradient(180deg, rgba(9,22,35,.5) 0%, rgba(9,22,35,.14) 11%, rgba(9,22,35,0) 20%);
  }
  .hdr__menu-label,.hdr__util-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .hdr__util svg{width:20px;height:20px;}
  .hdr__logo img{height:32px;}
  .drawer__close span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .drawer__top .drawer__logo img{height:32px;}
  .hero__body{padding-bottom:118px;}
  .hero .hero__h{font-size:clamp(34px,10vw,52px);}
  .hero__brand{margin-bottom:14px;min-height:0;}
  .hero__brand img{height:22px;max-width:46vw;}
  .hero__brand img.brand--tall{height:34px;}
  .lockup img{height:19px;}
  .wordmark{font-size:19px;gap:7px;}
  .medallion{display:none;}
  .values{grid-template-columns:repeat(2,1fr);row-gap:30px;}
  .value__num{width:64px;}
  .pgrid{grid-template-columns:1fr;}
  .quickbar__in{grid-template-columns:repeat(2,1fr);}
  .hero__count{display:none;}
  .hero__track{width:90px;}
  .ftr__grid{grid-template-columns:1fr;}
  .cta__in{flex-direction:column;align-items:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important;}
  .value__note{transform:none !important;}
  html{scroll-behavior:auto;}
  .rv{opacity:1;transform:none;}
}

/* ============================================================
   INTERIOR PAGES — added for the full site build
   ============================================================ */
/* The header floats over the page hero exactly as it floats over the home
   carousel, so the centred logo reads the same way on every page. The offset
   lives on the panel, not on the body. */
body.page{padding-top:0;}

/* page hero — the blue panel that opens every interior page */
.phero{
  background-color:var(--bts-blue-deep);
  background-image:var(--tile);background-size:300px 300px;
  color:#fff;
  padding:calc(82px + clamp(48px,8vw,104px)) 0 clamp(44px,7vw,88px);
}
.phero .crumb{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.75);margin:0 0 20px;
}
.phero .crumb a:hover{color:#fff;text-decoration:underline;}
.phero h1{font-size:clamp(34px,5.4vw,74px);letter-spacing:-.04em;line-height:.98;margin:0;}
.phero h1 em{font-style:normal;color:var(--sand);}
.phero .lede{color:#fff;margin:22px 0 0;max-width:58ch;}
.phero__brand{margin:0 0 22px;}
.phero__brand img{height:clamp(26px,2.6vw,36px);width:auto;max-width:220px;
  filter:drop-shadow(0 1px 10px rgba(9,22,35,.45));}
.phero__brand img.brand--tall{height:clamp(34px,3.6vw,48px);max-width:none;}

/* two-column split with a photograph */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,72px);align-items:center;}
.split--flip .split__media{order:2;}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover;}

/* the problem list — what is broken before the product arrives */
.probs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3.4vw,44px);}
.prob{border-left:2px solid var(--sand);padding-left:22px;}
.prob h3{font-size:clamp(17px,1.5vw,21px);margin-bottom:10px;}
.prob p{font-size:15px;color:var(--ink-60);margin:0;}
.sec--navy .prob p{color:#fff;}

/* feature grid */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.feat{background:var(--paper);padding:30px 26px;}
.feat__n{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--green);margin-bottom:14px;}
.feat h3{margin-bottom:10px;}
.feat p{font-size:15px;line-height:1.55;color:var(--ink-60);margin:0;}

/* numbered how-it-works */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,34px);counter-reset:st;}
.step{border-top:2px solid var(--bts-blue-deep);padding-top:20px;}
.step b{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--bts-blue-deep);margin-bottom:10px;}
.step h3{font-size:clamp(16px,1.4vw,20px);margin-bottom:8px;}
.step p{font-size:14.5px;color:var(--ink-60);margin:0;}

/* case study card */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.case{background:var(--paper);padding:clamp(28px,3.4vw,44px);}
.case__tag{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--green);margin-bottom:16px;}
.case h3{margin-bottom:14px;}
.case p{font-size:15px;color:var(--ink-60);}
.case dl{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:22px 0 0;}
.case dt{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-60);}
.case dd{margin:4px 0 0;font-size:clamp(20px,2vw,28px);font-weight:900;letter-spacing:-.03em;color:var(--bts-blue-deep);}

/* contact */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);align-items:start;}
.form{display:grid;gap:18px;}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-60);margin-bottom:8px;}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line);background:var(--paper);
  font:inherit;font-size:16px;color:var(--ink);border-radius:0;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--bts-blue-deep);outline-offset:-1px;}
.field textarea{min-height:150px;resize:vertical;}
.form__note{font-size:13px;color:var(--ink-60);margin:0;}
.offices{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
.office{background:var(--paper);padding:28px 26px;}
.office h3{font-size:17px;margin-bottom:12px;}
.office address{font-style:normal;font-size:15px;line-height:1.7;color:var(--ink-60);}
.office address a:hover{color:var(--bts-blue-deep);}

/* small print / legal-ish prose */
.prose{max-width:70ch;}
.prose h2{margin-top:clamp(32px,4vw,54px);}
.prose h3{margin-top:28px;}

@media (max-width:1080px){
  .split{grid-template-columns:1fr;}
  .split--flip .split__media{order:0;}
  .feats{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .contact{grid-template-columns:1fr;}
  .cases{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .probs{grid-template-columns:1fr;}
  .feats{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .case dl{grid-template-columns:1fr 1fr;}
}

/* ============================================================
   FAQ — <details>/<summary>, no JavaScript. Content stays in the
   DOM whether open or closed, so crawlers read all of it.
   ============================================================ */
.faqs{border-top:1px solid var(--line);}
.sec--navy .faqs{border-top-color:rgba(255,255,255,.3);}
.faq{border-bottom:1px solid var(--line);}
.sec--navy .faq{border-bottom-color:rgba(255,255,255,.3);}
.faq summary{
  cursor:pointer;list-style:none;
  padding:22px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  font-weight:900;font-size:clamp(16px,1.45vw,20px);letter-spacing:-.015em;line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";flex:none;font-size:24px;line-height:1;font-weight:700;
  color:var(--bts-blue-deep);transition:transform .25s ease;
}
.sec--navy .faq summary::after{color:var(--sand);}
.faq[open] summary::after{content:"\2013";}
.faq summary:hover{color:var(--bts-blue-deep);}
.sec--navy .faq summary:hover{color:var(--sand);}
.faq__a{padding:0 0 24px;max-width:76ch;}
.faq__a p{font-size:15.5px;line-height:1.6;color:var(--ink-60);margin:0 0 .85em;}
.faq__a p:last-child{margin-bottom:0;}
.sec--navy .faq__a p{color:#fff;}
.faq__a a{color:var(--bts-blue-deep);text-decoration:underline;}
.sec--navy .faq__a a{color:var(--sand);}


/* A client card without a logo file: the name carries it instead of leaving
   a gap where an image used to be. */
.client:not(:has(img)) b{
  font-size:clamp(18px,1.7vw,23px);font-weight:900;letter-spacing:-.02em;
  padding-top:8px;border-top:2px solid var(--bts-blue-deep);
}
.client:not(:has(img)){justify-content:flex-end;}


/* --- client marks that do not behave like the others
   (mark--plate is currently unused: Ecobank now supplies a positive mark) ---------------------
   A square mark sized by height alone reads at half the visual weight of a
   wide wordmark, so it gets more height. A mark that carries its own
   background colour is exempt from the greyscale wash, which would otherwise
   turn it into a muddy grey tile. --- */
.client img.mark--square{height:56px;max-width:none;}
.client img.mark--plate{filter:none;opacity:1;}
@media (max-width:1080px){ .client img.mark--square{height:48px;} }