/* ============================================================
   First Builders — BRAND BOOK  (standalone · landscape · premium)
   Self-contained. No dependency on the website stylesheet.
   A4 landscape spreads (297 × 210 mm). Negative-space driven.
   ============================================================ */
:root{
  --blue:#0E76BD; --blue-d:#0C5A91; --gold:#C9A84C; --gold-soft:#d9bd74;
  --ink:#171b21; --ink-2:#4d545f; --ink2:#0a1420; --navy:#0e2036;
  --paper:#ffffff; --soft:#f5f6f8; --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.05}
p{margin:0}
a{color:inherit;text-decoration:none}

/* 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,40px);background:rgba(12,14,17,.94);backdrop-filter:blur(6px);color:#fff}
.bar .b-brand{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:800;font-size:14px}
.bar img{height:32px;filter:brightness(0) invert(1)}
.bar .b-act{display:flex;gap:10px}
.bar a.btn{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.02em;padding:9px 16px;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:34px 0 60px}
.page{position:relative;width:297mm;height:210mm;margin:0 auto 24px;background:var(--paper);color:var(--ink);
  box-shadow:0 26px 64px rgba(0,0,0,.42);overflow:hidden;display:flex}
.page.dark{background:var(--ink2);color:#fff}
.page.navy{background:var(--navy);color:#fff}
/* page number lives INSIDE the content side (never over an image) */
.folio{position:absolute;bottom:13mm;right:26mm;font-size:9.5px;letter-spacing:.18em;color:var(--muted);z-index:5}
.page.dark .folio,.page.navy .folio{color:rgba(255,255,255,.5)}
/* premium logo lockup — full-colour logo on brand off-white inside a gold hairline.
   Used identically on the cover AND back cover so both read as one brand device
   (colour-balanced with the palette, never a bare white box, aspect never stretched). */
.logo-lockup{align-self:flex-start;display:inline-block;
  background:#fff;border:1px solid rgba(201,168,76,.45);border-radius:8px;
  padding:7mm 11mm;box-shadow:0 18px 50px rgba(0,0,0,.36)}
.logo-lockup img{height:104px;width:auto;display:block}

/* ---- split (image panel + content) ---- */
.split{display:flex;width:100%;height:100%}
.split.rev{flex-direction:row-reverse}
.panel{flex:0 0 50%;position:relative;overflow:hidden;background:#0b1622}
.panel.lt{background:#eceef1}
/* CONTAIN so branding posters are never cropped; the matched panel colour fills the rest */
.panel .fill{position:absolute;inset:0;background-position:center;background-size:contain;background-repeat:no-repeat}
.panel .edge{position:absolute;top:0;bottom:0;width:3px;background:var(--gold);z-index:2}
.split .panel .edge{right:0}.split.rev .panel .edge{left:0}
.side{flex:1;padding:24mm 26mm;display:flex;flex-direction:column;justify-content:center;position:relative}

/* ---- type system ---- */
.kick{display:flex;align-items:center;gap:11px;margin-bottom:8mm}
.kick i{width:26px;height:2px;background:var(--gold);display:block}
.kick span{font-family:var(--body);font-weight:700;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
.page.dark .kick span,.page.navy .kick span{color:var(--gold)}
.h1{font-family:var(--disp);font-weight:900;font-size:40px;line-height:1.02;letter-spacing:-.025em}
.h1.sm{font-size:32px}
.lead{font-size:14.5px;line-height:1.9;color:var(--ink-2);max-width:104mm;margin-top:6mm}
.page.dark .lead,.page.navy .lead{color:rgba(255,255,255,.8)}
.rule{width:46mm;height:2px;background:var(--gold);margin:7mm 0}
.big-n{position:absolute;top:16mm;right:22mm;font-family:var(--disp);font-weight:900;font-size:54px;color:rgba(14,118,189,.10);line-height:1}
.page.dark .big-n{color:rgba(255,255,255,.06)}
.overline{font-family:var(--body);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ---- cover ---- */
.cover .side{background:var(--navy);color:#fff;justify-content:space-between;padding:26mm 26mm}
.cover .rule-v{position:absolute;left:26mm;top:60mm;bottom:44mm;width:2px;background:linear-gradient(var(--gold),transparent)}
.cover h1{font-size:56px;line-height:1;margin-left:12mm}
.cover .sub{margin-left:12mm}

/* ---- stats strip ---- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:9mm;border-top:1px solid var(--line)}
.page.dark .stats,.page.navy .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:30px;color:var(--blue);letter-spacing:-.02em}
.page.dark .stat b,.page.navy .stat b{color:var(--gold)}
.stat span{display:block;font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-top:3px;line-height:1.4}
.page.dark .stat span,.page.navy .stat span{color:rgba(255,255,255,.6)}

/* ---- contents ---- */
.toc{list-style:none;margin:8mm 0 0;padding:0;max-width:150mm}
.toc li{display:flex;align-items:baseline;gap:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.toc .n{font-family:var(--disp);font-weight:800;font-size:13px;color:var(--gold);flex:0 0 30px}
.toc .t{font-family:var(--disp);font-weight:600;font-size:15px}
.toc .d{flex:1;border-bottom:1px dotted rgba(20,24,32,.22);transform:translateY(-4px)}
.toc .p{font-size:11px;color:var(--muted)}

/* ---- timeline ---- */
.tl{margin-top:6mm}
.tl .it{position:relative;padding:0 0 5.5mm 12px;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}
.tl .yr{font-family:var(--disp);font-weight:800;font-size:13px;color:var(--blue)}
.tl .tx{font-size:11.5px;line-height:1.6;color:var(--ink-2);margin-top:1px;max-width:110mm}

/* ---- vision / mission ---- */
.vm{margin-top:2mm}
.vm .blk+.blk{margin-top:9mm}
.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.15;margin:3mm 0 3mm}
.vm p{font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.8);max-width:118mm}

/* ---- pillars / values ---- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6mm 8mm;margin-top:6mm}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6mm;margin-top:6mm}
.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:15px;margin:2mm 0 1.5mm}
.blkc p{font-size:11px;line-height:1.55;color:var(--ink-2)}
.page.dark .blkc p,.page.navy .blkc p{color:rgba(255,255,255,.68)}

/* ---- leadership ---- */
.lead-wrap{display:flex;gap:14mm;align-items:flex-start;margin-top:4mm}
.lead-wrap img{width:52mm;height:64mm;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:24px}
.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:12px;line-height:1.7;color:var(--ink-2);margin-bottom:3mm;max-width:120mm}
.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:5mm;column-count:1}
.svc .row{display:flex;gap:5mm;padding:3.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:13.5px}
.svc p{font-size:10.5px;line-height:1.45;color:var(--ink-2);margin-top:1px}

/* ---- capabilities / sectors cards ---- */
.cap{display:grid;grid-template-columns:1fr 1fr;gap:7mm;margin-top:5mm}
.cap h3{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--blue);margin-bottom:2mm}
.cap p{font-size:11px;line-height:1.6;color:var(--ink-2);margin-bottom:2mm}
.sect{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6mm;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:13.5px;margin-bottom:1.5mm}
.sect p{font-size:10.5px;line-height:1.5;color:var(--ink-2)}

/* ---- full-bleed image spread ---- */
.page.full{padding:0}
.page.full .fill{position:absolute;inset:0;background-position:center;background-size:cover;background-color:#0a1420}
.page.full.contain .fill{background-size:contain;background-repeat:no-repeat}
.page.full .frame{position:absolute;inset:8mm;border:1px solid rgba(201,168,76,.3);z-index:3;pointer-events:none}
.page.full .cap{position:absolute;left:16mm;bottom:14mm;z-index:4;color:#fff}
.page.full .cap .k{font-family:var(--body);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.page.full .cap h2{font-family:var(--disp);font-weight:900;font-size:30px;margin-top:2mm}

/* ---- featured project (full-bleed real photo + data) ---- */
.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(90deg,rgba(8,12,17,.9) 0%,rgba(8,12,17,.35) 50%,transparent 100%)}
.feat .in{position:absolute;left:22mm;top:50%;transform:translateY(-50%);max-width:150mm;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:38px;margin:3mm 0 0;line-height:1.02}
.feat .facts{display:flex;gap:20px;flex-wrap:wrap;margin-top:6mm}
.feat .facts div{font-size:11px;color:rgba(255,255,255,.78)}
.feat .facts b{display:block;font-family:var(--disp);font-weight:800;font-size:17px;color:#fff;margin-top:2px}

/* ---- project grid (real photos) ---- */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:5mm;margin-top:6mm}
.pj{position:relative;height:64mm;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 gallery ---- */
.showc{margin-top:5mm}
.showc h3{font-family:var(--disp);font-weight:800;font-size:15px}
.showc .loc{font-size:10.5px;color:var(--muted);margin:1mm 0 2.5mm}
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:3mm}
.gal .cell{position:relative}
.gal .fill{width:100%;height:34mm;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:8mm;margin-top:6mm}
.numbers .n b{font-family:var(--disp);font-weight:900;font-size:40px;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:11px;line-height:1.5;color:rgba(255,255,255,.65)}

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

/* ---- brand identity ---- */
.sw{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm;margin-top:5mm}
.sw .s{border:1px solid var(--line)}
.sw .chip2{height:24mm}
.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;line-height:1.6}
.tsp{border:1px solid var(--line);padding:4.5mm;margin-top:4mm}
.tsp .fam{font-family:var(--disp);font-weight:900;font-size:34px;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}
.logos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4mm;margin-top:5mm}
.logos .b{height:40mm;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.logos .b.dk{background:var(--ink2);border-color:var(--ink2)}
.logos .b.bl{background:var(--blue)}
.logos .b img{max-height:22mm;max-width:70%}
.logos .b.dk img,.logos .b.bl img{filter:brightness(0) invert(1)}

/* ---- contact ---- */
.cinfo{margin-top:6mm}
.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:30px;line-height:1.08;color:#fff;margin-top:auto}
.back .gd{color:var(--gold)}

/* ---- print / online converter ---- */
@media print{
  @page{size:A4 landscape;margin:0}
  html,body{background:#fff}
  .book{padding:0}
  .bar{display:none!important}
  .page{margin:0;box-shadow:none;width:297mm;height:210mm;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: tablets / small laptops ----
   Phones & portrait tablets are routed to the portrait edition (see /profile/ head script).
   Here the fixed landscape spread is scaled to fit 821–1120px with no clipping. */
@media (max-width:1120px) and (min-width:821px){
  html,body{overflow-x:hidden}
  .page{transform:scale(var(--pscale,1));transform-origin:top left;
    margin-left:calc((100vw - 297mm*var(--pscale,1))/2);margin-right:0;
    margin-bottom:calc(20px - 210mm*(1 - var(--pscale,1)))}
}