/* DocuSoft Nigeria Limited — site styles
   Brand: DocuSoft Group asset suite, 14 August 2026
   Bar height (12 units of the 100-unit symbol) is the layout unit. */

@font-face{font-family:'Source Serif 4';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/source-serif-4-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:600;font-style:normal;font-display:swap;
  src:url('../fonts/source-serif-4-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:500;font-style:normal;font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-style:normal;font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}

:root{
  --ink:#0B1B2C; --navy:#14304F; --brass:#C58C2B; --brass-dark:#D19A33;
  --forest:#0E4A3A; --stone:#DCD8D0; --paper:#F6F4F0; --white:#FFFFFF;
  --body:#2A3742; --muted:#5C6875;
  --serif:'Source Serif 4',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --max:1180px; --gut:clamp(20px,4vw,40px);
  --u:12px;               /* the bar height: the layout unit */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--brass)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;color:var(--ink);
  line-height:1.14;letter-spacing:-.012em;margin:0}
p{margin:0 0 1.05em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 calc(var(--u)*1.2)}
.lede{font-size:clamp(18px,2.1vw,20.5px);color:#37454F;max-width:62ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:12px 20px;z-index:100}
.skip:focus{left:0}

/* ---------- header ---------- */
.site-head{background:var(--navy);position:sticky;top:0;z-index:50}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:88px}
.brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none;color:var(--paper)}
.brand-name{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.1vw,29px);letter-spacing:-.025em;color:var(--paper);line-height:1;white-space:nowrap}
.brand:hover .brand-name{color:#fff}
@media(max-width:520px){.brand-name{font-size:22px}}
/* header lockup, composed to the brand construction but without the descriptor:
   at this height the two descriptor lines fall below their legible minimum. */
.brand-mark{height:36px;width:36px}
.brand-rule{width:1px;height:38px;background:#2A3B4D;display:block}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav a{font-size:14.5px;font-weight:500;color:#DCE4EC;text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{color:#fff;border-bottom-color:var(--brass-dark)}
.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--brass-dark)}
.nav .btn-sm{border:1px solid rgba(255,255,255,.28);border-radius:2px;
  padding:9px 17px;color:#fff}
.nav .btn-sm:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px;
  width:46px;height:46px}
.burger span{display:block;height:2px;background:#fff;margin:5px 0;transition:.2s}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:15.5px;
  padding:15px 28px;border-radius:2px;text-decoration:none;border:1px solid transparent;
  transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--brass);color:var(--ink)}
.btn-primary:hover{background:#B37D22;color:var(--ink)}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--ink);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:calc(var(--u)*2.4)}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:#E9EEF3;padding:clamp(64px,9vw,112px) 0 clamp(56px,7vw,88px);
  position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-14%;top:-40%;width:60%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(209,154,51,.16),transparent 66%);
  pointer-events:none}
.hero .wrap{position:relative}
.hero h1{color:#fff;font-size:clamp(36px,5.6vw,62px);max-width:17ch;letter-spacing:-.018em}
.hero .lede{color:#A9BAC8;margin-top:calc(var(--u)*2);max-width:56ch}
.hero .eyebrow{color:#7F93A5}

/* hero with the full est. 2009 lockup alongside */
.hero-brand .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) auto;
  align-items:start;gap:clamp(32px,6vw,72px)}
/* the lockup starts on the same line as the headline. The eyebrow above the h1 and the
   transparent margin inside the PNG are both subtracted so the mark, not the image box,
   lines up with the cap height of the first line. */
.hero-lockup{--eyebrow-block:33px;--png-pad:23px;
  margin-top:calc(var(--eyebrow-block) - var(--png-pad) + 22px)}
.hero-lockup img{width:380px;height:auto}
@media(max-width:1080px){.hero-lockup img{width:300px}
  .hero-lockup{--png-pad:18px}}
@media(max-width:900px){
  .hero-brand .wrap{grid-template-columns:1fr;gap:calc(var(--u)*3.5)}
  .hero-lockup{order:-1;margin-top:0}
  .hero-lockup img{width:250px}
}

/* ---------- client references ---------- */
.roster{background:linear-gradient(115deg,#0b2743 0%,var(--navy) 62%,#102943 100%);padding:clamp(34px,4vw,52px) 0;color:#eaf0f6;overflow:hidden}
.roster-carousel-wrap{width:min(100% - 40px,1440px);margin-inline:auto}
.roster-heading{text-align:center;max-width:950px;margin:0 auto 24px}
.roster .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#efb647;margin:0 0 8px}
.roster-heading h2{font-size:clamp(32px,4vw,44px);color:#fff;margin:0 0 8px}
.roster-heading>p:last-child{color:#d7e1eb;font-size:15px;line-height:1.55;margin:0 auto;max-width:80ch}
.roster-small{font-size:12px;color:#aebfd0;text-align:center;margin:15px auto 0;max-width:100ch;line-height:1.6}
.client-carousel-shell{display:flex;align-items:center;gap:14px;width:100%}
.client-carousel{flex:1;min-width:0;overflow:hidden;position:relative;padding:8px 0}
.client-track-row{overflow:hidden;width:100%}
.client-track{display:flex;align-items:center;gap:12px;width:max-content;will-change:transform;transform:translateX(0);transition:transform .35s ease}
.client-carousel:hover .client-track,.client-carousel:focus-within .client-track{animation-play-state:paused}
.client-name-card{width:190px;min-height:76px;flex:0 0 190px;display:flex;align-items:center;gap:11px;text-align:left;padding:12px 13px;background:rgba(255,255,255,.035);border:1px solid rgba(215,225,235,.18);border-radius:8px;overflow:hidden;color:#f7f9fc;text-decoration:none;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.client-name-card:hover,.client-name-card:focus-visible{background:rgba(255,255,255,.09);border-color:#efb647;outline:2px solid #efb647;outline-offset:2px;transform:translateY(-2px)}
.client-initials{width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(239,182,71,.65);border-radius:50%;color:#efb647;font-size:10px;font-weight:800;letter-spacing:.02em;line-height:1.1;text-align:center}
.client-name{font-size:12px;font-weight:650;line-height:1.3;overflow-wrap:anywhere;color:#f0f4f8}
.client-name-card-duplicate{pointer-events:none}
.client-arrow{width:38px;height:48px;flex:0 0 38px;border:1px solid rgba(239,182,71,.65);border-radius:7px;background:rgba(255,255,255,.08);color:#fff;font-size:34px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.client-arrow:hover,.client-arrow:focus-visible{background:#efb647;color:#102943;outline:2px solid #efb647;outline-offset:2px}

@media(prefers-reduced-motion:reduce){.client-track{transition:none}}
@media(max-width:820px){.roster-carousel-wrap{width:min(100% - 28px,1440px)}.client-carousel-shell{gap:8px}.client-name-card{width:172px;flex-basis:172px;min-height:72px}.client-name{font-size:11px}.client-initials{width:34px;height:34px;flex-basis:34px}.client-track{gap:12px}.client-arrow{width:30px;flex-basis:30px;height:42px}}
@media(max-width:480px){.roster{padding:34px 0}.roster-heading>p:last-child{font-size:13px}.client-name-card{width:158px;flex-basis:158px;min-height:68px;padding:9px}.client-name{font-size:10px}.client-initials{width:30px;height:30px;flex-basis:30px;font-size:9px}.client-arrow{width:25px;flex-basis:25px;height:38px;font-size:28px}.roster-small{font-size:11px}}

/* ---------- generic section ---------- */
.sec{padding:clamp(56px,7.5vw,96px) 0}
.sec.alt{background:var(--white)}
.sec.dark{background:var(--ink);color:#C7D2DB}
.sec.dark h2,.sec.dark h3{color:#fff}
.sec.dark .eyebrow{color:#7F93A5}
/* .lede and .note carry dark text by default; they must flip inside a dark section */
.sec.dark .lede{color:#AFC0CD}
.sec.dark .note{color:#B6C4CF}
.sec.dark .plat{margin-bottom:calc(var(--u)*1.6)}
.sec h2{font-size:clamp(27px,3.6vw,40px);max-width:20ch}
.sec > .wrap > .lede{margin-top:calc(var(--u)*1.5)}

/* ---------- services ---------- */
.svc-grid{display:grid;gap:calc(var(--u)*1.4);margin-top:calc(var(--u)*3.4);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
@media(min-width:1040px){.svc-grid{grid-template-columns:repeat(4,1fr)}}
.svc{background:var(--white);border:1px solid var(--stone);padding:calc(var(--u)*2.4);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s}
.svc:hover{border-color:var(--navy);transform:translateY(-2px)}
.svc img{width:52px;height:52px;margin-bottom:calc(var(--u)*1.6)}
.svc img.svc-photo{width:calc(100% + var(--u)*4.8);max-width:none;height:158px;object-fit:cover;margin:calc(var(--u)*-2.4) calc(var(--u)*-2.4) calc(var(--u)*2.1);background:#e5e7e9}
@media(max-width:560px){.svc img.svc-photo{height:180px}}
.svc h3{font-size:20px;margin-bottom:calc(var(--u)*.9)}
.svc p{font-size:15px;color:#46545F;margin:0;line-height:1.58}
.sec.alt .svc{background:var(--paper)}

/* ---------- figures ---------- */
.figs{display:grid;gap:calc(var(--u)*1.6);margin-top:calc(var(--u)*3);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.fig{border-top:2px solid var(--brass);padding-top:calc(var(--u)*1.6)}
.fig .n{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.6vw,46px);
  color:var(--ink);line-height:1;letter-spacing:-.02em}
.fig .l{font-size:14.5px;color:var(--muted);margin-top:calc(var(--u)*.8)}
.sec.dark .fig .n{color:#fff}
.sec.dark .fig .l{color:#93A5B4}

/* ---------- split ---------- */
.split{display:grid;gap:clamp(32px,5vw,64px);align-items:start;
  grid-template-columns:1fr 1fr;margin-top:calc(var(--u)*3)}
.panel{background:var(--white);border:1px solid var(--stone);padding:calc(var(--u)*3)}
.sec.alt .panel{background:var(--paper)}

/* ---------- platforms ---------- */
.plat{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1);margin-top:calc(var(--u)*2.4)}
.plat span{font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  border:1px solid var(--stone);padding:9px 16px;color:var(--body);background:var(--white)}
.sec.dark .plat span{border-color:rgba(255,255,255,.22);background:transparent;color:#C7D2DB}

/* ---------- quotes ---------- */
.quotes{display:grid;gap:calc(var(--u)*1.6);margin-top:calc(var(--u)*3);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.quote{background:var(--white);border:1px solid var(--stone);padding:calc(var(--u)*2.6)}
.quote blockquote{margin:0;font-family:var(--serif);font-size:19px;line-height:1.45;
  color:var(--ink);letter-spacing:-.008em}
.quote .who{margin-top:calc(var(--u)*1.6);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);line-height:1.55}
.quote .who b{display:block;color:var(--ink);font-weight:500}

/* ---------- list rows ---------- */
.rows{margin-top:calc(var(--u)*2.6);border-top:1px solid var(--stone)}
.row{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:clamp(16px,3vw,40px);
  padding:calc(var(--u)*1.9) 0;border-bottom:1px solid var(--stone)}
.row h3{font-size:19px}
.row p:last-child{margin-bottom:0}
.row p{font-size:15.5px}

/* ---------- appraisium band ---------- */
.appr{background:var(--forest);color:#D6E4DE;padding:clamp(52px,7vw,88px) 0}
.appr h2{color:#fff}
.appr .lede{color:#A9C4BA}
.appr img{height:58px;width:auto;margin-bottom:calc(var(--u)*2)}
.appr .eyebrow{color:#9DBDB1}

/* ---------- CTA ---------- */
.cta{background:var(--navy);color:#DCE4EC;padding:clamp(52px,7vw,84px) 0}
.cta h2{color:#fff;font-size:clamp(26px,3.4vw,38px)}
.cta .lede{color:#A9BAC8}

/* ---------- forms ---------- */
.form{display:grid;gap:calc(var(--u)*1.5);margin-top:calc(var(--u)*2.4);max-width:620px}
.field label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:16px;
  padding:13px 15px;border:1px solid var(--stone);background:var(--white);color:var(--body);
  border-radius:2px}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--navy);
  outline-offset:1px;border-color:var(--navy)}
.field textarea{min-height:140px;resize:vertical}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:#46545F}
.check input{width:18px;height:18px;margin-top:3px;flex-shrink:0}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#8FA3B4;padding:clamp(48px,6vw,72px) 0 calc(var(--u)*3)}
.foot-grid{display:grid;gap:calc(var(--u)*3);grid-template-columns:1.5fr 1fr 1fr 1fr}
.site-foot img{height:110px;width:auto;margin-bottom:calc(var(--u)*1.8)}
.site-foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:#8496A6;font-weight:400;margin-bottom:calc(var(--u)*1.3)}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:9px}
.site-foot a{color:#C0CDD8;text-decoration:none;font-size:14.5px}
.site-foot a:hover{color:var(--brass-dark)}
.site-foot address{font-style:normal;font-size:14.5px;line-height:1.6;color:#C0CDD8;margin:0}

/* footer contact: a mono label above each value, the same label language used
   for the eyebrows and the footer column headings. */
.foot-contact{display:grid;gap:calc(var(--u)*1.4);margin-top:calc(var(--u)*.5)}
.fc{display:grid;gap:5px}
.fc .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#8496A6}
.fc a{font-size:14.5px;color:#C0CDD8;text-decoration:none;justify-self:start}
.fc a:hover{color:var(--brass-dark);text-decoration:underline;text-underline-offset:3px}
.foot-base{margin-top:calc(var(--u)*3.4);padding-top:calc(var(--u)*2);
  border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:18px;
  justify-content:space-between;font-size:13px;color:#7E93A3}
.foot-base a{font-size:13px}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
}
@media(max-width:820px){
  .burger{display:block}
  .nav{position:fixed;inset:88px 0 auto 0;background:var(--navy);flex-direction:column;
    align-items:stretch;gap:0;padding:8px 0 20px;display:none;
    border-top:1px solid rgba(255,255,255,.12);max-height:calc(100vh - 88px);overflow:auto}
  .nav.open{display:flex}
  .nav a{padding:15px var(--gut);border-bottom:1px solid rgba(255,255,255,.07)}
  .nav a[aria-current="page"],.nav a:hover{border-bottom-color:rgba(255,255,255,.07);
    background:rgba(255,255,255,.05)}
  .nav .btn-sm{margin:14px var(--gut) 0;text-align:center;border-radius:2px}
  .row{grid-template-columns:1fr;gap:calc(var(--u)*.8)}
}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .brand-mark{height:30px;width:30px}
  .brand-name{font-size:24px}
  .brand-rule{height:32px}
  .site-head .wrap{min-height:76px}
  .nav{inset:76px 0 auto 0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}
@media print{
  .site-head,.burger,.cta,.btn-row{display:none}
  body{background:#fff;font-size:11pt}
}


/* ---------- media ---------- */
/* Figures carry an aspect ratio so nothing shifts while the image loads, and so a
   photograph can replace a graphic panel without touching the layout. */
.figure{margin:0}
.figure img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--stone)}
.figure figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-top:calc(var(--u)*1.1)}
.sec.dark .figure figcaption{color:#8FA3B4}
/* no frame on a dark ground: the plate is ink and a border reads as a box */
.sec.dark .media-img img{border:0}

/* full-bleed band between sections */
.band{position:relative;overflow:hidden}
.band img{width:100%;height:clamp(220px,32vw,420px);object-fit:cover;display:block}
.band .band-note{position:absolute;left:0;right:0;bottom:0;padding:calc(var(--u)*2) 0;
  background:linear-gradient(transparent,rgba(11,27,44,.86))}
.band .band-note p{margin:0;color:#DCE4EC;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase}

/* text beside an image */
.media{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,56px);
  align-items:center;margin-top:calc(var(--u)*3)}
.media.flip .media-img{order:2}
.media-img img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--stone);
  border:1px solid rgba(0,0,0,.06)}
@media(max-width:820px){
  .media{grid-template-columns:1fr}
  .media.flip .media-img{order:0}
}

/* ---------- social ---------- */
.social{display:flex;gap:10px;margin-top:calc(var(--u)*1.6)}
.social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid rgba(255,255,255,.18);color:#C0CDD8;transition:.15s}
.social a:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.social svg{width:17px;height:17px;fill:currentColor;display:block}


/* ---------- floating WhatsApp ----------
   Replaces the third-party chat widget the old site carried. No script, no cookie,
   no external request, and it lands in the tool the number already uses. */
.wa-float{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:60;
  display:inline-flex;align-items:center;gap:10px;background:var(--brass);color:var(--ink);
  font-family:var(--sans);font-weight:600;font-size:15px;text-decoration:none;
  padding:13px 20px;border-radius:2px;box-shadow:0 6px 22px rgba(11,27,44,.24);
  transition:background .15s,transform .15s}
.wa-float:hover{background:#B37D22;color:var(--ink);transform:translateY(-2px)}
.wa-float:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.wa-float svg{width:21px;height:21px;fill:currentColor;flex-shrink:0}
@media(max-width:640px){
  .wa-float{padding:14px;border-radius:50%}
  .wa-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media print{.wa-float{display:none}}

/* ------------------------------------------------------------------ figures
   The hard numbers. Ruled, not boxed: no fills, per the layout rules. */
.sec.proof{padding-top:calc(var(--u)*4);padding-bottom:calc(var(--u)*4)}
.figs{display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--stone);margin-top:calc(var(--u)*1.5)}
.fig{padding:calc(var(--u)*2) 0;border-bottom:1px solid var(--stone)}
.fig b{display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(30px,4.4vw,44px);line-height:1;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:calc(var(--u)*.8)}
.fig .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#5C6875;margin-bottom:calc(var(--u)*.7)}
.fig p{font-size:14.5px;line-height:1.6;color:#4F5D6B;margin:0;max-width:38ch}
@media(min-width:760px){
  .figs{grid-template-columns:repeat(2,1fr);column-gap:calc(var(--u)*3)}
  .fig:nth-child(2n){border-left:1px solid var(--stone);padding-left:calc(var(--u)*3)}
}
@media(min-width:1040px){
  .figs{grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--stone)}
  .fig{border-bottom:0}
  .fig + .fig{border-left:1px solid var(--stone);padding-left:calc(var(--u)*2.2)}
  .fig:nth-child(2n){padding-left:calc(var(--u)*2.2)}
}
.sec.dark .figs,.sec.dark .fig,.sec.dark .fig + .fig{border-color:rgba(255,255,255,.16)}
.sec.dark .fig b{color:var(--brass-dark)}
.sec.dark .fig .k{color:#93A3B1}
.sec.dark .fig p{color:#AFC0CD}

/* ------------------------------------------------------------------ steps */
.steps{list-style:none;counter-reset:s;margin:calc(var(--u)*2.4) 0 0;
  display:grid;grid-template-columns:1fr;gap:0}
.steps li{counter-increment:s;position:relative;padding:calc(var(--u)*1.5) 0
  calc(var(--u)*1.5) calc(var(--u)*4.6);border-top:1px solid rgba(255,255,255,.16);
  font-size:15.5px;line-height:1.6;color:#C9D4DD}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;
  top:calc(var(--u)*1.5);font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--brass-dark)}
.steps li b{display:block;color:#fff;font-weight:600;font-size:16.5px;
  margin-bottom:calc(var(--u)*.4)}
@media(min-width:860px){
  .steps{grid-template-columns:1fr 1fr;column-gap:calc(var(--u)*3.5)}
  .steps li:nth-child(2){border-top:1px solid rgba(255,255,255,.16)}
}

/* ------------------------------------------------------------- sector rows */
.sectors{margin-top:calc(var(--u)*2);border-top:1px solid var(--stone)}
.sect{padding:calc(var(--u)*2) 0;border-bottom:1px solid var(--stone)}
.sect h3{font-size:17px;font-weight:600;margin:0 0 calc(var(--u)*.7);color:var(--ink)}
.sect p{font-size:15px;line-height:1.65;color:#4F5D6B;margin:0;max-width:84ch}
@media(min-width:860px){
  .sect{display:grid;grid-template-columns:230px 1fr;gap:calc(var(--u)*3);align-items:start}
  .sect h3{margin:0}
}

/* --------------------------------------------------------------- fact list */
.facts{margin-top:calc(var(--u)*2);border-top:1px solid var(--stone)}
.facts > div{padding:calc(var(--u)*1.4) 0;border-bottom:1px solid var(--stone)}
.facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#5C6875;margin-bottom:calc(var(--u)*.5)}
.facts dd{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink)}
@media(min-width:760px){
  .facts > div{display:grid;grid-template-columns:250px 1fr;gap:calc(var(--u)*2.5);
    align-items:baseline}
  .facts dt{margin-bottom:0}
}

/* ------------------------------------------------------------- form extras */
.gotcha{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;
  pointer-events:none}
.form-note{font-size:14px;line-height:1.6;color:var(--muted);
  margin-top:calc(var(--u)*1.4);max-width:52ch}

/* light variant of the numbered steps, for pages on a paper ground.
   Single column: it is used for short sequences where a second column
   would leave a hole. */
.steps.steps-light{grid-template-columns:1fr;max-width:74ch}
.steps.steps-light li{border-top:1px solid var(--stone);color:var(--body)}
.steps.steps-light li b{color:var(--ink)}
.steps.steps-light li::before{color:#8A6A20}
@media(min-width:860px){
  .steps.steps-light{grid-template-columns:1fr}
}

/* --------------------------------------------------------------- welcome
   The Managing Director's message. Portrait and text, no panel, no fill. */
.welcome-grid{display:grid;grid-template-columns:1fr;gap:calc(var(--u)*2.6);
  margin-top:calc(var(--u)*2.4)}
.welcome-portrait{max-width:300px}
.welcome-portrait .figure img{aspect-ratio:4/5;width:100%;object-fit:cover;
  background:var(--navy)}
.welcome-text p{max-width:70ch}
.sig{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);margin-top:calc(var(--u)*2.4);padding-top:calc(var(--u)*1.6);
  border-top:1px solid var(--stone);display:inline-block}
.sig span{display:block;color:var(--muted);margin-top:calc(var(--u)*.5);letter-spacing:.14em}
@media(min-width:900px){
  .welcome-grid{grid-template-columns:300px 1fr;gap:calc(var(--u)*4);align-items:start}
}

/* ------------------------------------------------------------- assistant
   Launcher sits beside the WhatsApp button. Panel is ink, hard edged, brand
   type. No cookies, no storage, nothing loaded from a third party. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.asst{position:fixed;right:clamp(16px,3vw,28px);bottom:calc(clamp(16px,3vw,28px) + 62px);
  z-index:61;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.asst-launch{display:inline-flex;align-items:center;gap:10px;background:var(--navy);
  color:#fff;font-family:var(--sans);font-weight:600;font-size:15px;border:0;
  padding:13px 20px;border-radius:2px;cursor:pointer;
  box-shadow:0 6px 22px rgba(11,27,44,.24);transition:background .15s,transform .15s}
.asst-launch:hover{background:#1B3A5C;transform:translateY(-2px)}
.asst-launch:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.asst-launch svg{width:20px;height:20px;fill:currentColor;flex-shrink:0}
.asst.is-open .asst-launch{background:var(--ink)}

.asst-panel[hidden]{display:none}
.asst-panel{width:min(380px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 150px));
  background:var(--ink);color:#DCE4EC;display:flex;flex-direction:column;
  box-shadow:0 18px 54px rgba(11,27,44,.42);order:-1}
.asst-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.13)}
.asst-head b{display:block;font-family:var(--serif);font-weight:600;font-size:18px;color:#fff}
.asst-head span{display:block;font-size:12.5px;color:#8FA3B4;margin-top:4px;line-height:1.45}
.asst-close{background:none;border:0;cursor:pointer;padding:4px;flex-shrink:0}
.asst-close svg{width:18px;height:18px;stroke:#8FA3B4;stroke-width:2;fill:none}
.asst-close:hover svg{stroke:#fff}
.asst-close:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

.asst-log{flex:1 1 auto;overflow-y:auto;padding:16px 18px;display:flex;
  flex-direction:column;gap:14px;min-height:120px}
.asst-msg{font-size:14.5px;line-height:1.62}
.asst-msg p{margin:0}
.asst-msg b{display:block;color:#fff;font-weight:600;font-size:14.5px;margin-bottom:5px}
.asst-bot{color:#C3D0DB;border-left:2px solid var(--brass-dark);padding-left:13px}
.asst-me{align-self:flex-end;max-width:86%;background:var(--navy);color:#fff;
  padding:9px 13px;font-size:14px}
.asst-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.asst-links a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brass-dark);text-decoration:none;
  border:1px solid rgba(209,154,51,.42);padding:6px 10px}
.asst-links a:hover{background:var(--brass-dark);color:var(--ink);
  border-color:var(--brass-dark)}
.asst-links a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.asst-wait::after{content:"…";animation:asstdots 1.1s steps(4,end) infinite}
@keyframes asstdots{0%{opacity:.3}50%{opacity:1}100%{opacity:.3}}

.asst-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 14px}
.asst-chips[hidden]{display:none}
.asst-chips button{background:none;border:1px solid rgba(255,255,255,.20);color:#C3D0DB;
  font-family:var(--sans);font-size:12.5px;padding:7px 11px;cursor:pointer;
  text-align:left;line-height:1.35}
.asst-chips button:hover{border-color:var(--brass-dark);color:#fff}
.asst-chips button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

.asst-form{display:flex;gap:0;border-top:1px solid rgba(255,255,255,.13)}
.asst-form input{flex:1 1 auto;background:none;border:0;color:#fff;padding:15px 18px;
  font-family:var(--sans);font-size:14.5px}
.asst-form input::placeholder{color:#7A8B9A}
.asst-form input:focus{outline:0;background:rgba(255,255,255,.045)}
.asst-form button{background:var(--brass);border:0;padding:0 18px;cursor:pointer;
  flex-shrink:0}
.asst-form button svg{width:19px;height:19px;fill:var(--ink);display:block}
.asst-form button:hover{background:var(--brass-dark)}
.asst-form button:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.asst-foot{margin:0;padding:10px 18px 13px;font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:#7A8B9A;
  border-top:1px solid rgba(255,255,255,.09)}

@media(max-width:640px){
  .asst{bottom:calc(clamp(16px,3vw,28px) + 60px);left:clamp(16px,3vw,28px)}
  .asst-launch{padding:14px;border-radius:50%}
  .asst-launch span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .asst-panel{width:calc(100vw - 32px);max-height:calc(100vh - 210px)}
}
@media print{.asst{display:none}}

/* --------------------------------------------------------------- on site
   Photographs from live engagements. Varying sizes and quality, so they are
   laid out as a working contact sheet rather than forced to a uniform grid.
   No frames, no fills: a hairline and the caption do the work. */
.figure-wide img{width:100%;height:auto;aspect-ratio:auto;max-width:900px;
  border:1px solid rgba(0,0,0,.08)}
.figure-wide figcaption{max-width:74ch;font-family:var(--sans);font-size:14.5px;
  letter-spacing:0;text-transform:none;line-height:1.6;color:var(--muted)}

/* The frames are different shapes and different sizes, because they are the
   originals. Sitting them on a common baseline makes that read as a contact
   sheet rather than as a broken grid. */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(var(--u)*2.4);
  margin-top:calc(var(--u)*2.6);align-items:stretch}
.shot{margin:0;display:grid;grid-template-rows:1fr auto}
.shot img{display:block;width:100%;height:auto;background:var(--stone);
  align-self:end;border:1px solid rgba(0,0,0,.08)}
.shot figcaption{margin-top:calc(var(--u)*1.1);font-size:14px;line-height:1.6;
  color:var(--muted)}
.shot figcaption b{display:block;font-family:var(--sans);font-weight:600;
  font-size:15px;color:var(--ink);margin-bottom:calc(var(--u)*.4)}
@media(min-width:900px){
  .shots{grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*2)}
}
.sec.dark .shot figcaption{color:#9FB0BE}
.sec.dark .shot figcaption b{color:#fff}


/* ---------- homepage refresh: human, confident and contemporary ---------- */
h1,h2,h3,h4{font-family:var(--sans);font-weight:600;letter-spacing:-.035em;line-height:1.12}
.hero-human{padding:clamp(48px,6vw,76px) 0 clamp(52px,6.5vw,82px);background:linear-gradient(118deg,#0B1B2C 0%,#14304F 68%,#1B4262 100%)}
.hero-human::after{right:-18%;top:-45%;width:68%;background:radial-gradient(circle,rgba(209,154,51,.13),transparent 68%)}
.hero-human .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(340px,.98fr);align-items:center;gap:clamp(32px,5vw,72px)}
.hero-human .hero-copy{max-width:650px}
.hero-human h1{font-family:var(--sans);font-weight:600;font-size:clamp(38px,4.6vw,60px);max-width:15ch;letter-spacing:-.045em;line-height:1.07}
.hero-human .eyebrow{color:#E2B45F;letter-spacing:.12em;font-size:11px}
.hero-human .lede{font-size:clamp(17px,1.6vw,19px);line-height:1.72;color:#D6E0E8;max-width:56ch;margin-top:22px}
.hero-human .btn-row{margin-top:28px}
.hero-human .btn{border-radius:5px;padding:14px 22px}
.hero-human .btn-primary{background:#E3B55E;color:#14263A}
.hero-human .btn-primary:hover{background:#F0C878}
.hero-human .btn-ghost{border-color:rgba(255,255,255,.42)}
.hero-note{font-size:13px;line-height:1.55;color:#B4C5D3;margin:22px 0 0;max-width:52ch}
.hero-photo-wrap{position:relative;padding:0 0 30px 18px;min-width:0}
.hero-photo-wrap::before{content:"";position:absolute;inset:18px 0 0 0;border:1px solid rgba(227,181,94,.7);border-radius:14px;transform:translate(10px,10px);pointer-events:none}
.hero-photo{position:relative;width:100%;height:clamp(300px,35vw,445px);object-fit:cover;object-position:center 38%;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.24)}
.hero-photo-caption{position:relative;display:flex;align-items:center;gap:12px;margin:-34px 18px 0 30px;padding:15px 18px;background:#fff;color:var(--ink);border-radius:7px;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.caption-dot{flex:0 0 10px;width:10px;height:10px;background:#C58C2B;border-radius:50%}
.hero-photo-caption strong{display:block;font-size:14px;line-height:1.35;letter-spacing:-.01em}
.hero-photo-caption small{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:#5C6875}
@media(max-width:900px){.hero-human .wrap{grid-template-columns:1fr;gap:34px}.hero-human h1{max-width:17ch}.hero-photo-wrap{max-width:680px;width:100%;padding-left:8px}.hero-photo{height:clamp(260px,58vw,420px)}}
@media(max-width:520px){.hero-human{padding-top:44px}.hero-human .btn-row{align-items:stretch;flex-direction:column}.hero-human .btn-row .btn{text-align:center}.hero-photo-caption{margin-left:16px;margin-right:8px;padding:13px 14px}.hero-photo-wrap::before{transform:translate(6px,6px)}}

/* Documentary service photography supplied by DocuSoft */
.service-evidence{width:100%;max-width:760px;height:clamp(190px,30vw,340px);object-fit:cover;margin:22px 0 26px;border:1px solid var(--stone)}

/* Homepage hero banner: reference design with full-width people photograph */
.hero-human{background-image:linear-gradient(90deg,rgba(7,35,61,.97) 0%,rgba(7,35,61,.88) 34%,rgba(7,35,61,.34) 67%,rgba(7,35,61,.08) 100%),url('../img/home-hero-team.jpg');background-size:cover;background-position:center 42%;}
.hero-human .wrap{display:block;min-height:clamp(320px,36vw,440px);align-content:center;}
.hero-human .hero-copy{max-width:620px;padding:24px 0;}
.hero-human h1{max-width:14ch;font-size:clamp(38px,4.8vw,62px);}
.hero-human .lede{max-width:52ch;color:#F0F4F7;}
@media(max-width:900px){.hero-human .wrap{min-height:340px}.hero-human{background-position:58% center;background-image:linear-gradient(90deg,rgba(7,35,61,.96),rgba(7,35,61,.7)),url('../img/home-hero-team.jpg')}}