/* ============================================================
   First Builders — BRAND BOOK · PORTRAIT / MOBILE edition
   Self-contained. A4 PORTRAIT spreads (210 × 297 mm).
   Full-bleed poster pages alternate with clean text pages so
   every page fills a phone screen top-to-bottom.
   ============================================================ */
:root{
  --blue:#0E76BD; --blue-d:#0C5A91; --gold:#C9A84C;
  --ink:#171b21; --ink-2:#4d545f; --navy:#0e2036; --navy-2:#0b1622;
  --paper:#ffffff; --soft:#eceef1; --line:rgba(20,24,32,.12); --muted:#8b909b;
  --disp:"Montserrat",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:#22252c;font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-family:var(--disp);letter-spacing:-.02em;line-height:1.06}
p{margin:0}
a{color:inherit;text-decoration:none}
strong{font-weight:700}

/* top bar (screen only) */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px clamp(16px,4vw,32px);background:rgba(12,14,17,.94);backdrop-filter:blur(6px);color:#fff}
.bar .b-brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:13px}
.bar img{height:28px;filter:brightness(0) invert(1)}
.bar .b-act{display:flex;gap:8px}
.bar a.btn{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.02em;padding:8px 14px;border:1px solid transparent}
.bar a.ghost{border-color:rgba(255,255,255,.35);color:#fff}
.bar a.gold{background:var(--gold);color:#231f20}

/* ---- book & page ---- */
.book{padding:28px 0 52px}
.page{position:relative;width:210mm;height:297mm;margin:0 auto 20px;background:var(--paper);color:var(--ink);
  box-shadow:0 20px 54px rgba(0,0,0,.42);overflow:hidden;display:flex;flex-direction:column}
.page.navy{background:var(--navy);color:#fff}
.page.dark{background:var(--navy-2);color:#fff}
.page.soft{background:var(--soft)}

/* ---- full-bleed poster page (portrait posters fit ~A4 portrait) ---- */
.poster-page{padding:0}
.poster-page.dk{background:var(--navy-2)}
.poster-page.lt{background:var(--soft)}
.poster-page .fill{position:absolute;inset:0;background-position:center;background-repeat:no-repeat;background-size:contain}
.poster-page.bleed .fill{background-size:cover}

/* logo lockup — colour logo on brand off-white with a gold hairline (cover + back) */
.logo-lockup{display:inline-block;background:#fff;border:1px solid rgba(201,168,76,.45);border-radius:7px;
  padding:6mm 9mm;box-shadow:0 16px 40px rgba(0,0,0,.36)}
.logo-lockup img{height:82px;width:auto;display:block}
.cover-logo{position:absolute;left:15mm;top:14mm;z-index:4}

/* ---- text page shell ---- */
.wrap{flex:1;display:flex;flex-direction:column;justify-content:center;padding:26mm 22mm;position:relative}
.wrap.top{justify-content:flex-start;padding-top:28mm}

/* ---- type system ---- */
.kick{display:flex;align-items:center;gap:10px;margin-bottom:7mm}
.kick i{width:24px;height:2px;background:var(--gold);display:block}
.kick span{font-family:var(--body);font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.page.navy .kick span,.page.dark .kick span{color:var(--gold)}
.h1{font-family:var(--disp);font-weight:900;font-size:33px;line-height:1.04;letter-spacing:-.025em}
.h1.sm{font-size:27px}
.lead{font-size:14px;line-height:1.85;color:var(--ink-2);margin-top:6mm}
.page.navy .lead,.page.dark .lead{color:rgba(255,255,255,.82)}
.rule{width:42mm;height:2px;background:var(--gold);margin:6mm 0}
.overline{font-family:var(--body);font-weight:700;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-top:9mm;border-top:1px solid var(--line)}
.page.navy .stats,.page.dark .stats{border-top-color:rgba(255,255,255,.2)}
.stat{padding:6mm 4mm 0 0}
.stat b{display:block;font-family:var(--disp);font-weight:900;font-size:25px;color:var(--blue);letter-spacing:-.02em}
.page.navy .stat b,.page.dark .stat b{color:var(--gold)}
.stat span{display:block;font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-top:3px;line-height:1.4}
.page.navy .stat span,.page.dark .stat span{color:rgba(255,255,255,.6)}

/* ---- contents ---- */
.toc{list-style:none;margin:9mm 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 14mm}
.toc li{display:flex;align-items:baseline;gap:11px;padding:7.5px 0;border-bottom:1px solid var(--line)}
.toc .n{font-family:var(--disp);font-weight:800;font-size:12px;color:var(--gold);flex:0 0 26px}
.toc .t{font-family:var(--disp);font-weight:600;font-size:13.5px}

/* ---- timeline ---- */
.tl{margin-top:6mm}
.tl .it{position:relative;padding:0 0 6mm 14px;border-left:2px solid rgba(14,118,189,.25)}
.tl .it::before{content:"";position:absolute;left:-6px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--blue)}
.tl .it:last-child{border-left-color:transparent;padding-bottom:0}
.tl .yr{font-family:var(--disp);font-weight:800;font-size:13px;color:var(--blue)}
.tl .tx{font-size:12px;line-height:1.6;color:var(--ink-2);margin-top:1px}

/* ---- vision / mission ---- */
.vm{margin-top:3mm}
.vm .blk+.blk{margin-top:10mm}
.vm .lbl{font-family:var(--body);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.vm .st{font-family:var(--disp);font-weight:800;font-size:23px;line-height:1.16;margin:3mm 0}
.vm p{font-size:13px;line-height:1.72;color:rgba(255,255,255,.82)}

/* ---- pillars / values ---- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8mm;margin-top:7mm}
.blkc .n{font-family:var(--disp);font-weight:900;font-size:20px;color:var(--gold)}
.blkc h3{font-family:var(--disp);font-weight:800;font-size:15.5px;margin:2mm 0 1.5mm}
.blkc p{font-size:12px;line-height:1.55;color:var(--ink-2)}
.page.navy .blkc p,.page.dark .blkc p{color:rgba(255,255,255,.7)}

/* ---- leadership ---- */
.lead-wrap{display:flex;gap:11mm;align-items:flex-start;margin-top:6mm}
.lead-wrap img{width:46mm;height:56mm;object-fit:cover;filter:grayscale(.12) contrast(1.05);flex:0 0 auto}
.lead-wrap .nm{font-family:var(--disp);font-weight:900;font-size:23px}
.lead-wrap .rl{font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin:2mm 0 4mm}
.lead-wrap p{font-size:12.5px;line-height:1.7;color:var(--ink-2);margin-bottom:3mm}
.creds{display:flex;flex-wrap:wrap;gap:6px;margin-top:3mm}
.creds span{font-size:10px;font-weight:600;color:var(--blue-d);background:rgba(14,118,189,.09);padding:4px 9px}

/* ---- services ---- */
.svc{margin-top:6mm}
.svc .row{display:flex;gap:5mm;padding:4mm 0;border-bottom:1px solid var(--line);align-items:baseline}
.svc .no{font-family:var(--disp);font-weight:900;font-size:16px;color:var(--blue);flex:0 0 26px}
.svc h3{font-family:var(--disp);font-weight:700;font-size:14px}
.svc p{font-size:11.5px;line-height:1.45;color:var(--ink-2);margin-top:1px}

/* ---- capabilities / sectors ---- */
.cap{display:grid;grid-template-columns:1fr 1fr;gap:9mm;margin-top:6mm}
.cap h3{font-family:var(--disp);font-weight:800;font-size:15.5px;color:var(--blue);margin-bottom:2.5mm}
.cap p{font-size:12px;line-height:1.6;color:var(--ink-2);margin-bottom:2.5mm}
.sect{display:grid;grid-template-columns:1fr 1fr;gap:7mm 8mm;margin-top:6mm}
.sect .c{border-top:2px solid var(--blue);padding-top:3mm}
.sect h3{font-family:var(--disp);font-weight:800;font-size:14px;margin-bottom:1.5mm}
.sect p{font-size:11.5px;line-height:1.5;color:var(--ink-2)}

/* ---- featured project ---- */
.feat{position:relative;width:100%;height:100%}
.feat .fill{position:absolute;inset:0;background-position:center;background-size:cover}
.feat .sc{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,12,17,.94) 10%,rgba(8,12,17,.45) 55%,rgba(8,12,17,.28) 100%)}
.feat .in{position:absolute;left:18mm;right:18mm;bottom:26mm;color:#fff}
.feat .loc{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.feat h2{font-family:var(--disp);font-weight:900;font-size:33px;margin:3mm 0 0;line-height:1.03}
.feat .facts{display:grid;grid-template-columns:1fr 1fr;gap:6mm 8mm;margin-top:8mm}
.feat .facts div{font-size:11.5px;color:rgba(255,255,255,.8)}
.feat .facts b{display:block;font-family:var(--disp);font-weight:800;font-size:16px;color:#fff;margin-top:2px}

/* ---- divider (photographic) ---- */
.divider{position:relative;width:100%;height:100%}
.divider .fill{position:absolute;inset:0;background-position:center;background-size:cover;background-color:#0a1420}
.divider .sc{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,12,17,.9),rgba(8,12,17,.15) 55%,rgba(8,12,17,.55))}
.divider .frame{position:absolute;inset:8mm;border:1px solid rgba(201,168,76,.32);z-index:2}
.divider .cap{position:absolute;left:18mm;right:18mm;bottom:24mm;color:#fff;z-index:3}
.divider .cap .k{font-family:var(--body);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.divider .cap h2{font-family:var(--disp);font-weight:900;font-size:31px;margin-top:2mm;line-height:1.04}

/* ---- projects grid ---- */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:5mm;margin-top:6mm}
.pj{position:relative;height:58mm;overflow:hidden}
.pj .fill{position:absolute;inset:0;background-position:center;background-size:cover}
.pj .sc{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,12,17,.85),rgba(8,12,17,.05) 60%,transparent)}
.pj .in{position:absolute;left:4mm;right:4mm;bottom:4mm;color:#fff}
.pj .loc{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700}
.pj h4{font-family:var(--disp);font-weight:800;font-size:14px;margin:1mm 0 0}
.pj p{font-size:9.5px;color:rgba(255,255,255,.8);margin-top:1mm}

/* ---- showcase ---- */
.showc{margin-top:6mm}
.showc+.showc{margin-top:8mm}
.showc h3{font-family:var(--disp);font-weight:800;font-size:15px}
.showc .loc{font-size:10.5px;color:var(--muted);margin:1mm 0 3mm}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:3mm}
.gal .cell{position:relative}
.gal .fill{width:100%;height:32mm;background-position:center;background-size:cover}
.gal .cap{font-size:8.5px;color:var(--muted);margin-top:1.5mm}
.chip{display:inline-block;font-size:8.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);background:rgba(14,118,189,.1);padding:2px 7px;margin:0 4px 3px 0}

/* ---- numbers ---- */
.numbers{display:grid;grid-template-columns:1fr 1fr;gap:10mm;margin-top:7mm}
.numbers .n b{font-family:var(--disp);font-weight:900;font-size:34px;color:var(--gold);line-height:1;letter-spacing:-.02em}
.numbers .n h4{font-family:var(--disp);font-weight:800;font-size:14px;margin:2mm 0 1mm;color:#fff}
.numbers .n p{font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.65)}

/* ---- clients ---- */
.clients{display:flex;gap:7mm;margin-top:7mm}
.clients .c{flex:1;height:50mm;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--soft)}
.clients .c.dk{background:var(--navy-2);border-color:var(--navy-2)}
.clients .c img{max-height:28mm;max-width:66%;object-fit:contain}

/* ---- brand identity ---- */
.logos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4mm;margin-top:6mm}
.logos .b{height:36mm;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.logos .b.dk{background:var(--navy-2);border-color:var(--navy-2)}
.logos .b.bl{background:var(--blue)}
.logos .b img{max-height:19mm;max-width:72%}
.logos .b.dk img,.logos .b.bl img{filter:brightness(0) invert(1)}
.sw{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm;margin-top:6mm}
.sw .s{border:1px solid var(--line)}
.sw .chip2{height:22mm}
.sw .i{padding:2.5mm 3mm}
.sw .nm{font-family:var(--disp);font-weight:700;font-size:11.5px}
.sw .hx{font-size:10px;color:var(--muted);margin-top:2px}
.tsp{border:1px solid var(--line);padding:5mm;margin-top:5mm}
.tsp .fam{font-family:var(--disp);font-weight:900;font-size:33px;line-height:1}
.tsp .fam.i{font-family:var(--body)}
.tsp .u{font-size:10.5px;color:var(--muted);margin-top:2.5mm;letter-spacing:.04em}
.tsp .g{font-size:12px;color:var(--ink-2);margin-top:2mm}

/* ---- contact ---- */
.contact-logo{margin-bottom:10mm}
.cinfo{margin-top:2mm}
.cinfo .b+.b{margin-top:5mm}
.cinfo .l{font-family:var(--body);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.cinfo .v{font-size:13px;color:#fff;margin-top:1.5mm;line-height:1.65}
.back{font-family:var(--disp);font-weight:900;font-size:27px;line-height:1.1;color:#fff;margin-top:10mm}
.back .gd{color:var(--gold)}

/* ---- print / online converter ---- */
@media print{
  @page{size:A4 portrait;margin:0}
  html,body{background:#fff}
  .book{padding:0}
  .bar{display:none!important}
  .page{margin:0;box-shadow:none;width:210mm;height:297mm;overflow:hidden;page-break-after:always;break-after:page;page-break-inside:avoid}
  .page:last-child{page-break-after:auto}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---- screen small (phones viewing the web build) ---- */
@media (max-width:760px){
  .page{width:94vw;height:auto;aspect-ratio:210/297}
  .wrap{padding:6% 7%}
}