/* ============================================================
   OKELIS — Corporate Portfolio
   Design system  ·  A4 (210 × 297 mm)
   Rev 00 · Draft v1
   ============================================================ */

/* ---------- 1. Brand tokens ---------- */
:root{
  /* Primary — from logo mark */
  --navy:      #021849;
  --navy-2:    #0A2A66;
  --navy-3:    #143C82;
  --blue:      #1B5AA8;
  --blue-2:    #3D79C4;
  --blue-3:    #7BA3D6;
  --sky:       #B9CDE8;
  --sky-2:     #DCE6F3;

  /* Accent — used sparingly, for signal only */
  --red:       #E1330F;
  --red-dk:    #BD0A05;
  --red-lt:    #FE7C60;
  --red-wash:  #FDE8E3;

  /* Ink & neutrals */
  --ink:       #0C1A33;
  --body:      #43506B;
  --muted:     #8590A6;
  --faint:     #AEB6C4;
  --line:      #DDE1E8;
  --line-lt:   #EBEEF3;

  /* Paper */
  --paper:     #FFFFFF;
  --paper-2:   #F6F7F9;
  --paper-3:   #EDF0F4;

  /* Page geometry */
  --mx:        16mm;   /* side margin  */
  --mt:        15mm;   /* top margin   */
  --mb:        14mm;   /* bottom margin*/
  --col:       calc((210mm - (2 * 16mm) - (11 * 4mm)) / 12);
  --gut:       4mm;
}

/* ---------- 2. Typography ---------- */
@font-face{font-family:"OK Display";src:local("SF Pro Display Ultralight"),local("SFProDisplay-Ultralight");font-weight:100}
@font-face{font-family:"OK Display";src:local("SF Pro Display Thin"),local("SFProDisplay-Thin");font-weight:200}
@font-face{font-family:"OK Display";src:local("SF Pro Display Light"),local("SFProDisplay-Light");font-weight:300}
@font-face{font-family:"OK Display";src:local("SF Pro Display Regular"),local("SFProDisplay-Regular");font-weight:400}
@font-face{font-family:"OK Display";src:local("SF Pro Display Medium"),local("SFProDisplay-Medium");font-weight:500}
@font-face{font-family:"OK Display";src:local("SF Pro Display Semibold"),local("SFProDisplay-Semibold");font-weight:600}
@font-face{font-family:"OK Display";src:local("SF Pro Display Bold"),local("SFProDisplay-Bold");font-weight:700}

@font-face{font-family:"OK Text";src:local("SF Pro Text Light"),local("SFProText-Light");font-weight:300}
@font-face{font-family:"OK Text";src:local("SF Pro Text Regular"),local("SFProText-Regular");font-weight:400}
@font-face{font-family:"OK Text";src:local("SF Pro Text Medium"),local("SFProText-Medium");font-weight:500}
@font-face{font-family:"OK Text";src:local("SF Pro Text Semibold"),local("SFProText-Semibold");font-weight:600}
@font-face{font-family:"OK Text";src:local("SF Pro Text Bold"),local("SFProText-Bold");font-weight:700}

:root{
  --display:"OK Display","SF Pro Display",-apple-system,"Helvetica Neue",Helvetica,sans-serif;
  --text:"OK Text","SF Pro Text",-apple-system,"Helvetica Neue",Helvetica,sans-serif;
}

/* ---------- 3. Page frame ---------- */
*{box-sizing:border-box;margin:0;padding:0}

@page{ size:595.28pt 841.89pt; margin:0 }

html{ background:#8A8F98 }

body{
  font-family:var(--text);
  font-size:9.1pt;
  line-height:1.58;
  color:var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  font-feature-settings:"kern" 1,"liga" 1;
}

.page{
  position:relative;
  width:210mm;
  height:297mm;
  overflow:hidden;
  background:var(--paper);
  page-break-after:always;
  break-after:page;
  margin:0 auto;
}
.page:last-child{page-break-after:auto;break-after:auto}

/* screen-only preview separation */
@media screen{
  body{padding:14mm 0}
  .page{margin:0 auto 10mm;box-shadow:0 2mm 8mm rgba(0,0,0,.28)}
}

.pad{
  position:absolute;
  top:var(--mt); right:var(--mx); bottom:var(--mb); left:var(--mx);
}

/* Themes */
.page.dark{background:var(--navy);color:#C7D0E0}
.page.dark .h1,.page.dark .h2,.page.dark .stat-n{color:#fff}
.page.dark .eyebrow{color:var(--blue-3)}
.page.dark .rule{background:rgba(255,255,255,.18)}
.page.dark .lead{color:#DCE4F0}
.page.tint{background:var(--paper-2)}

/* ---------- 4. Type components ---------- */
/* Section label. Sentence case, no tracking, short leading rule.
   Replaces the tracked all-caps kicker, which reads as a template default. */
.eyebrow{
  font-family:var(--text);
  font-size:8.2pt;font-weight:500;
  letter-spacing:-.002em;text-transform:none;
  color:var(--red);
  display:flex;align-items:center;gap:2.6mm;
}
.eyebrow::before{
  content:"";width:6mm;height:.45mm;
  background:currentColor;flex:none;
}
.eyebrow.bare{gap:0}
.eyebrow.bare::before{display:none}
.eyebrow.blue{color:var(--blue)}
.eyebrow.mute{color:var(--muted)}

.h1{
  font-family:var(--display);
  font-size:31pt;font-weight:600;line-height:1.06;
  letter-spacing:-.028em;color:var(--ink);
}
.h1.light{font-weight:300;letter-spacing:-.024em}
.h2{
  font-family:var(--display);
  font-size:18pt;font-weight:600;line-height:1.14;
  letter-spacing:-.022em;color:var(--ink);
}
.h3{
  font-family:var(--display);
  font-size:11.4pt;font-weight:600;line-height:1.2;
  letter-spacing:-.014em;color:var(--ink);
}
.h4{
  font-family:var(--display);
  font-size:10pt;font-weight:600;line-height:1.26;
  letter-spacing:-.012em;color:var(--ink);
}
.lead{
  font-family:var(--display);
  font-size:11.8pt;font-weight:300;line-height:1.42;
  letter-spacing:-.016em;color:var(--navy-2);
}
p{margin-bottom:2.6mm}
p:last-child{margin-bottom:0}
.small{font-size:8pt;line-height:1.52}
.cap{
  font-size:6.6pt;font-weight:600;line-height:1.35;
  letter-spacing:.045em;text-transform:uppercase;color:var(--muted);
}
strong{font-weight:600;color:var(--ink)}
.dark strong{color:#fff}
em{font-style:normal;color:var(--red)}

/* Rules */
.rule{height:.35mm;background:var(--line);width:100%}
.rule.ink{background:var(--navy);height:.6mm}
.rule.red{background:var(--red);height:.6mm;width:14mm}
.rule.short{width:12mm;height:.6mm;background:var(--navy)}

/* ---------- 5. Grid ---------- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut)}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}
.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}
.c8{grid-column:span 8}.c9{grid-column:span 9}.c12{grid-column:span 12}

/* ---------- 6. Page furniture ---------- */
.folio{
  position:absolute;left:var(--mx);right:var(--mx);bottom:8mm;
  display:flex;align-items:center;justify-content:space-between;
  font-size:6.6pt;font-weight:500;letter-spacing:.04em;text-transform:none;
  color:var(--faint);
}
.folio .n{font-family:var(--display);font-weight:500;color:var(--navy);letter-spacing:.06em}
.dark .folio{color:rgba(255,255,255,.42)}
.dark .folio .n{color:#fff}
.folio::before{
  content:"";position:absolute;top:-3.5mm;left:0;right:0;
  height:.3mm;background:var(--line-lt);
}
.dark .folio::before{background:rgba(255,255,255,.14)}

.sect-no{
  font-family:var(--display);
  font-size:9pt;font-weight:500;letter-spacing:.02em;color:var(--red);
}

/* Header block used on interior pages */
.phead{display:flex;align-items:flex-start;justify-content:space-between;gap:8mm}
.phead .rule{margin:3.2mm 0 4mm}

/* ---------- 7. Components ---------- */

/* Stat */
.stat-n{
  font-family:var(--display);
  font-size:29pt;font-weight:200;line-height:1;
  letter-spacing:-.038em;color:var(--navy);
}
.stat-n .u{font-size:13pt;font-weight:400;letter-spacing:-.01em}
.stat-n.red{color:var(--red)}
.stat-l{
  margin-top:1.6mm;font-size:7.4pt;font-weight:500;line-height:1.3;
  letter-spacing:0;text-transform:none;color:var(--muted);
}

/* Card */
.card{
  border:.3mm solid var(--line);
  padding:5mm;
  background:var(--paper);
}
.card.fill{background:var(--paper-2);border-color:transparent}
.card.ink{background:var(--navy);border-color:transparent;color:#C7D0E0}
.card.ink .h3,.card.ink .h4{color:#fff}

/* List */
ul.tick{list-style:none}
ul.tick li{
  position:relative;padding-left:4.2mm;margin-bottom:1.5mm;
  font-size:8.1pt;line-height:1.44;
}
ul.tick li::before{
  content:"";position:absolute;left:0;top:1.5mm;
  width:1.5mm;height:1.5mm;border:.35mm solid var(--red);
  transform:rotate(45deg);
}
ul.tick.blue li::before{border-color:var(--blue)}
.dark ul.tick li::before{border-color:var(--blue-3)}
ul.tick.tight li{margin-bottom:.9mm}

/* Two-col list */
.cols2{column-count:2;column-gap:6mm}
.cols2 li{break-inside:avoid}

/* Tag / chip */
.chip{
  display:inline-block;
  font-size:7.4pt;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--navy);border:.3mm solid var(--line);
  padding:1.2mm 2.6mm;margin:0 1.2mm 1.2mm 0;
}
.chip.solid{background:var(--navy);color:#fff;border-color:var(--navy)}
.dark .chip{color:#DCE4F0;border-color:rgba(255,255,255,.24)}

/* Numbered step marker */
.step-no{
  font-family:var(--display);font-size:7pt;font-weight:600;
  letter-spacing:.04em;color:var(--red);
}

/* ---------- 8. CERTIFY → MEASURE → OPTIMIZE → DECARBONIZE rail ---------- */
.rail{display:flex;align-items:stretch;gap:0;width:100%}
.rail .r-step{
  flex:1;position:relative;
  padding:2.4mm 0 0;
  border-top:.6mm solid var(--line);
}
.rail .r-step .rl{
  font-size:6.8pt;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);
}
.rail .r-step.on{border-top-color:var(--red)}
.rail .r-step.on .rl{color:var(--navy)}
.dark .rail .r-step{border-top-color:rgba(255,255,255,.2)}
.dark .rail .r-step .rl{color:rgba(255,255,255,.4)}
.dark .rail .r-step.on{border-top-color:var(--red)}
.dark .rail .r-step.on .rl{color:#fff}

/* ---------- 9. Imagery slots ---------- */
.imgslot{
  position:relative;background:var(--paper-3);overflow:hidden;
}
.imgslot .ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.5mm;text-align:center;
}
.imgslot .ph .t{
  font-size:7pt;font-weight:600;letter-spacing:.02em;text-transform:none;
  color:#9AA5B6;
}
.imgslot .ph .s{font-size:6pt;color:#B4BDCA;letter-spacing:.04em;max-width:60mm}
.imgslot::after{
  content:"";position:absolute;inset:0;
  border:.3mm solid rgba(2,24,73,.10);
}

/* ---------- 10. Utility ---------- */
.abs{position:absolute}
.flex{display:flex}
.between{justify-content:space-between}
.aic{align-items:center}
.aie{align-items:flex-end}
.col{flex-direction:column}
.mt1{margin-top:2mm}.mt2{margin-top:4mm}.mt3{margin-top:6mm}
.mt4{margin-top:8mm}.mt5{margin-top:11mm}.mt6{margin-top:14mm}
.mb1{margin-bottom:2mm}.mb2{margin-bottom:4mm}.mb3{margin-bottom:6mm}
.mb4{margin-bottom:8mm}
.tr{text-align:right}
.nowrap{white-space:nowrap}
svg{display:block;overflow:visible}

/* Watermark mark */
.wm{position:absolute;opacity:.05;pointer-events:none}

/* dark-page overrides that must beat `.page.dark .rule` */
.page.dark .rule.red{background:var(--red)}
.page.dark .rule.ink{background:#fff}
.page.dark .rule.short{background:#fff}

/* ---------- 11. Process rail (Concept → Design → …) ---------- */
.proc{position:relative;display:flex;align-items:flex-start;gap:0}
.proc::before{
  content:"";position:absolute;top:3.1mm;left:3.1mm;right:3.1mm;
  height:.35mm;background:var(--line);
}
.proc .p-step{flex:1;position:relative;padding-right:4mm}
.proc .p-dot{
  width:6.2mm;height:6.2mm;border-radius:50%;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:7pt;font-weight:600;
  position:relative;z-index:2;
}
.proc .p-step:last-child .p-dot{background:var(--red)}
.proc .p-t{
  margin-top:3mm;font-family:var(--display);font-size:9.8pt;font-weight:600;
  letter-spacing:-.014em;color:var(--ink);
}
.proc .p-d{margin-top:1.2mm;font-size:7.4pt;line-height:1.4;color:var(--body);padding-right:3mm}
.dark .proc::before{background:rgba(255,255,255,.2)}
.dark .proc .p-dot{background:#fff;color:var(--navy)}
.dark .proc .p-t{color:#fff}
.dark .proc .p-d{color:#9FB2CE}

/* ---------- 12. Service page furniture ---------- */
.svc-icon{width:13mm;height:13mm}
.svc-letter{
  font-family:var(--display);font-size:8.8pt;font-weight:600;
  letter-spacing:.01em;color:var(--red);
}
.ghost{
  position:absolute;font-family:var(--display);font-weight:200;
  font-size:150pt;line-height:.8;letter-spacing:-.06em;
  color:var(--paper-3);z-index:0;pointer-events:none;
}
.dark .ghost{color:rgba(255,255,255,.045)}

/* Key-value spec rows */
.kv{width:100%;border-collapse:collapse}
.kv td{
  padding:2.1mm 0;border-bottom:.3mm solid var(--line-lt);
  font-size:8pt;vertical-align:top;
}
.kv td:first-child{
  width:34%;color:var(--muted);font-weight:500;
  letter-spacing:0;text-transform:none;font-size:7.6pt;padding-top:2.4mm;
}
.kv td:last-child{color:var(--ink)}
.kv tr:last-child td{border-bottom:0}
.dark .kv td{border-color:rgba(255,255,255,.14)}
.dark .kv td:last-child{color:#fff}

/* Deliverables block */
.deliv{border-top:.6mm solid var(--navy);padding-top:3.5mm}
.dark .deliv{border-top-color:#fff}

/* Figure caption under a graphic */
figure{margin:0}
figcaption{
  margin-top:2.5mm;font-size:7pt;font-weight:400;line-height:1.4;
  letter-spacing:0;text-transform:none;color:var(--muted);
}

/* ---------- 13. Service × stage matrix ---------- */
.mx{width:100%;border-collapse:collapse;table-layout:fixed}
.mx th{
  font-size:7.4pt;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--navy);text-align:center;padding:0 0 3mm;vertical-align:bottom;
}
.mx th:first-child{text-align:left;width:29%}
.mx td{
  padding:3mm 0;border-top:.3mm solid var(--line-lt);text-align:center;vertical-align:middle;
}
.mx td:first-child{
  text-align:left;font-family:var(--display);font-size:9pt;font-weight:600;
  letter-spacing:-.012em;color:var(--ink);padding-right:4mm;
}
.mx tr:last-child td{border-bottom:.3mm solid var(--line-lt)}
.dot{display:inline-block;width:2.6mm;height:2.6mm;border-radius:50%;background:var(--line)}
.dot.on{background:var(--navy)}
.dot.key{background:var(--red)}
.mx thead th{border-bottom:.6mm solid var(--navy)}

/* ---------- 14. Sector icon grid ---------- */
.sect-item{text-align:left}
.sect-item img{width:11mm;height:11mm;margin-bottom:2.5mm}
.sect-item .nm{
  font-family:var(--display);font-size:9pt;font-weight:600;
  letter-spacing:-.012em;color:var(--ink);
}
.sect-item .ds{font-size:7.2pt;line-height:1.4;color:var(--body);margin-top:1mm}

/* ---------- 15. Standards grid ---------- */
.std{
  border:.3mm solid var(--line);padding:4mm;height:100%;
  display:flex;flex-direction:column;justify-content:space-between;
}
.std .n{
  font-family:var(--display);font-size:11pt;font-weight:600;
  letter-spacing:-.018em;color:var(--navy);
}
.std .d{font-size:6.9pt;line-height:1.38;color:var(--muted);margin-top:2mm}

/* ---------- 16. Case study ---------- */
.cs-meta{display:flex;gap:0;border-top:.6mm solid var(--navy);border-bottom:.3mm solid var(--line)}
.cs-meta > div{flex:1;padding:3.5mm 4mm 3.5mm 0}
.cs-meta .k{
  font-size:7.2pt;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);
}
.cs-meta .v{
  font-family:var(--display);font-size:9pt;font-weight:600;
  letter-spacing:-.012em;color:var(--ink);margin-top:1.4mm;
}
.result{border-top:.6mm solid var(--red);padding-top:3.5mm}
.result .n{
  font-family:var(--display);font-size:22pt;font-weight:200;line-height:1;
  letter-spacing:-.04em;color:var(--red);
}
.result .l{
  margin-top:1.6mm;font-size:7.4pt;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--muted);
}
.tbc{
  display:inline-block;font-size:6pt;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red);border:.3mm dashed var(--red);
  padding:.8mm 2mm;margin-left:2mm;vertical-align:middle;
}

/* ---------- 17. Design-direction document ---------- */
.sw{height:26mm;position:relative}
.sw .hex{
  position:absolute;left:2.5mm;bottom:2mm;
  font-size:7pt;font-weight:500;letter-spacing:0;color:#fff;
}
.sw.lt .hex{color:var(--navy)}
.sw-n{
  margin-top:2mm;font-family:var(--display);font-size:8.6pt;font-weight:600;
  letter-spacing:-.01em;color:var(--ink);
}
.sw-d{font-size:6.8pt;line-height:1.35;color:var(--muted);margin-top:.8mm}

.tocrow{
  display:flex;align-items:baseline;gap:4mm;
  padding:1.05mm 0;border-bottom:.3mm solid var(--line-lt);
}
.tocrow .p{
  font-family:var(--display);font-size:8.4pt;font-weight:600;
  color:var(--red);width:15mm;flex:none;letter-spacing:.02em;white-space:nowrap;
}
.tocrow .t{
  font-family:var(--display);font-size:8.6pt;font-weight:600;
  letter-spacing:-.012em;color:var(--ink);flex:none;width:52mm;
}
.tocrow .d{font-size:7.2pt;line-height:1.35;color:var(--body);flex:1}
.tocrow.sec{border-bottom:.6mm solid var(--navy);padding-top:3mm}
.tocrow.sec .t{color:var(--navy)}

.spec{font-size:7.4pt;line-height:1.5}
.spec b{font-weight:600;color:var(--ink)}


/* ---------- 18. Statement block ----------
   Replaces the left accent border, which is a documented generated-UI signature.
   A short rule above carries the same emphasis without the tell. */
.stmt{padding-top:4mm;border-top:.7mm solid var(--red)}
.stmt .q{
  font-family:var(--display);font-weight:300;
  line-height:1.34;letter-spacing:-.022em;color:var(--navy);
}
.dark .stmt .q{color:#fff}

/* ---------- 19. Project register ---------- */
.reg{width:100%;border-collapse:collapse;table-layout:fixed}
.reg th{
  font-size:7pt;font-weight:600;letter-spacing:0;color:var(--navy);
  text-align:left;padding:0 3mm 2.4mm 0;vertical-align:bottom;
  border-bottom:.6mm solid var(--navy);
}
.reg td{
  font-size:7pt;line-height:1.3;padding:1.36mm 2.5mm 1.36mm 0;
  border-bottom:.25mm solid var(--line-lt);vertical-align:middle;color:var(--body);
}
.reg td.no{color:var(--faint);font-family:var(--display);font-weight:500;font-size:7.2pt}
.reg td.nm{color:var(--ink);font-weight:500}
.reg tr:last-child td{border-bottom:0}
.pill{
  display:inline-block;font-size:6.6pt;font-weight:600;line-height:1;
  padding:1.1mm 1.8mm;white-space:nowrap;
}
.pill.done{background:var(--sky-2);color:var(--navy-2)}
.pill.live{background:var(--red-wash);color:var(--red-dk)}

/* ---------- 20. Bento grid ---------- */
.bento{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:3.4mm;grid-auto-rows:29.2mm;
}
.bt{
  position:relative;overflow:hidden;border-radius:3mm;
  background:var(--paper-2);padding:5mm;
  display:flex;flex-direction:column;justify-content:space-between;
}
.bt.ink{background:var(--navy);color:#B7C6DE}
.bt.line{background:var(--paper);border:.3mm solid var(--line)}
.bt.shot{background:var(--paper-3);padding:0;justify-content:flex-end}

/* project image tile */
.bt.shot .cap-in{
  position:relative;z-index:2;padding:4.5mm;
  background:linear-gradient(180deg,rgba(2,24,73,0) 0%,rgba(2,24,73,.72) 58%,rgba(2,24,73,.88) 100%);
}
.bt.shot .cap-in .t{
  font-family:var(--display);font-size:9.6pt;font-weight:600;
  letter-spacing:-.014em;color:#fff;line-height:1.18;
}
.bt.shot .cap-in .s{font-size:7pt;color:#B7C6DE;margin-top:1.2mm}
.bt.shot .ph{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
}
.bt.shot .ph span{
  font-size:6.8pt;font-weight:600;letter-spacing:.02em;color:#9AA5B6;
}
.bt.shot::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    repeating-linear-gradient(90deg,rgba(2,24,73,.05) 0 1px,transparent 1px 14px),
    repeating-linear-gradient(0deg,rgba(2,24,73,.05) 0 1px,transparent 1px 14px);
}

.bt .kn{
  font-family:var(--display);font-size:30pt;font-weight:200;line-height:.94;
  letter-spacing:-.04em;color:var(--navy);
}
.bt.ink .kn{color:#fff}
.bt .kn.red{color:var(--red)}
.bt .kl{font-size:7.4pt;line-height:1.3;color:var(--muted);margin-top:2mm}
.bt.ink .kl{color:#7BA3D6}
.bt .kt{
  font-family:var(--display);font-size:9.4pt;font-weight:600;
  letter-spacing:-.014em;color:var(--ink);
}
.bt.ink .kt{color:#fff}

/* mini stacked bar used inside a tile */
.msb{display:flex;height:4.2mm;border-radius:1mm;overflow:hidden;margin-top:2mm}
.msb i{display:block;height:100%}
.mkey{display:flex;flex-wrap:wrap;gap:1mm 4mm;margin-top:2.6mm}
.mkey span{font-size:6.8pt;color:var(--body);display:flex;align-items:center;gap:1.4mm}
.mkey b{width:2mm;height:2mm;border-radius:.4mm;display:inline-block}
.bt.ink .mkey span{color:#B7C6DE}

/* ---------- 21. Filled image slots ---------- */
.imgslot.has{
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:var(--paper-3);
}
.imgslot.has .ph{display:none}
.imgslot.has::after{border-color:rgba(2,24,73,.14)}