letter-spacing: -1px;

:root{
  --ilf-blue: #2c5f8d;    
  --chev: rgba(255,255,255,.55);
  --chev2: rgba(255,255,255,.35);
    --ilf-blue: #255c8c;
  --chev-front: #e8edf6;
  --chev-back:  #f2f5fb;
    --brand: rgb(241, 89, 47);    
  --brand-2: rgb(5, 73, 79);    

  /* modern browsers */
  --brand-mix: 
 color-mix(in srgb, rgb(210 182 174) 50%, rgb(19 77 82) 50%);
}

/* HERO */
.hero-slim{
  position: relative;
  height: clamp(240px, 28vw, 320px);
  overflow: hidden;
}
.hero-slim .hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter: saturate(105%) contrast(98%);
}
.hero-slim .chevrons{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, transparent 0 40%, rgba(0,0,0,.08)),
    /* three translucent right chevrons */
    conic-gradient(from 315deg at 65% 50%, transparent 0 75%, var(--chev) 75% 85%, transparent 85% 100%),
    conic-gradient(from 315deg at 78% 50%, transparent 0 75%, var(--chev2) 75% 85%, transparent 85% 100%),
    conic-gradient(from 315deg at 90% 50%, transparent 0 75%, var(--chev2) 75% 85%, transparent 85% 100%);
  mix-blend-mode: screen;
}
.hero-slim .hero-inner{
  position:absolute; inset:0;
  display:grid; place-items:center;
}
.hero-slim h1{
  color:var(--brand); text-align:center;
  font-weight:800; letter-spacing:.02em;
  text-transform:uppercase;
  font-size: clamp(28px, 4.2vw, 48px);
    text-shadow: 1px -5px 20px rgb(0 0 0);
}

/* BREADCRUMB */
.bc-clean{ --bs-breadcrumb-divider: '›'; }
.bc-clean .breadcrumb-item + .breadcrumb-item::before{ color:#9aa9bb; }
.bc-clean a{ color:#5b6f86; text-decoration:none; }
.bc-clean a:hover{ text-decoration:underline; }

/* DECORATED TITLES (» prefix like reference) */
.decor-title{
  position:relative; padding-left:58px;
  color: var(--ilf-blue);
  font-weight:800; text-transform: none;
  letter-spacing:.5px;
}
.decor-title::before{
  content:"»";
  position:absolute; left:0; top:.08em;
  color:#c9d3e0;
  font-weight:900;
  font-size: 44px;
  line-height:1;
}
/* divider between col-5 (label) and col-7 (value) */
.meta .row{
  align-items: flex-start;      /* nice top align */
  position: relative;
}

.meta .label{
  position: relative;
  padding-right: 14px;          /* space before divider */
}

/* thin vertical divider */
.meta .label::after{
  content: "";
  position: absolute;
  right: 4px;                   /* adjust distance from text */
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: #dfe6ed;          /* divider color */
  /* dashed look? use this instead: */
  /* background: repeating-linear-gradient(
       to bottom, #dfe6ed, #dfe6ed 4px, transparent 4px, transparent 8px
     ); */
}

/* BUTTON */
.btn-ilf{
  background: var(--brand-2); border-color: var(--brand-2);
  font-weight:600; padding:.55rem 1.5rem; border-radius:.35rem;
    color: white;
}
.btn-ilf:hover{ background-color: var(--brand);; border-color: var(--brand);
    color: white; }

/* Paragraph rhythm */
section p {
    color: #3735359c;
    line-height: 1.9;
    margin-bottom: 1rem;
    font-family: "Roboto Condensed", "Open Sans Condensed", Arial, sans-serif;
    font-size: 20px;
    letter-spacing: -1px;
        text-align: justify;
}


section .texttttttttt {
    letter-spacing: 0px;
    word-spacing: 1px;
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Tablet */
@media (max-width: 991.98px) {
    section .texttttttttt {
        font-size: 16px;
        line-height: 1.55;
        word-spacing: 0.8px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    section .texttttttttt {
        font-size: 15px;
        line-height: 1.5;
        letter-spacing: 0;
        word-spacing: 0.5px;
        text-align: left;
    }
}

/* Small Mobile */
@media (max-width: 575.98px) {
    section .texttttttttt {
        font-size: 14px;
        line-height: 1.45;
        word-spacing: 0;
    }
}
section em{ font-style: italic; }

/* Spacing on small screens */
@media (max-width: 991.98px){
  .decor-title{ padding-left:44px; }
  .decor-title::before{ font-size:36px; top: .04em; }
}
/* Wrapper */
.ilf-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 10px 0 25px;
}

/* Chevron wrapper */
.ilf-chevrons {
  position: relative;
  width: 44px;   /* adjust for size */
  height: 36px;
}

/* Base chevron */
.chev {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0% 0%, 65% 0%, 100% 50%, 65% 100%, 0% 100%, 35% 50%);
  border-radius: 2px;
}

/* Back chevron (lighter, slightly left) */
.chev-back {
  background: var(--brand);
  transform: translateX(-10px);
}

/* Front chevron (slightly darker) */
.chev-front {
  background: var(--brand-2);
}

/* Text style */
.ilf-text {
  margin: 0;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--brand-mix);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

/* divider line
.ilf-hr{
  border: 0;
  border-top: 2px solid var(--brand);
  width: 100%;
  max-width: 1100px;
  display: block;      
  margin: 12px auto;  
} */

/* paragraph + sub text */
.ilf-lead{
    color: #3735359c;
    line-height: 1.9;
    margin-bottom: 1rem;
    font-family: "Roboto Condensed", "Open Sans Condensed", Arial, sans-serif;
    font-size: 20px;
    letter-spacing: -1px;
}
.ilf-sub{
  color: var(--muted);
  margin: -6px 0 14px;
}


/* ===== chevron title (same as before) ===== */
.ilf-title{ display:flex; align-items:center; gap:16px; }
.ilf-chevrons{ position:relative; width:44px; height:36px; }
.chev{
  position:absolute; inset:0;
  clip-path: polygon(0% 0%, 65% 0%, 100% 50%, 65% 100%, 0% 100%, 35% 50%);
  border-radius:2px;
}

.ilf-text{
  margin:0;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 800;
  color: var(--ilf-blue);
  letter-spacing:.02em;
}

/* ===== Flagship project cards ===== */
.fp-card{
  border-top: 0; background:#fff;
}
.fp-card .thumb{
  height: 180px; border-radius:2px; overflow:hidden; margin-bottom:.5rem;
  background:#e9eef4;
}
.fp-card .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .3s ease;
}
.fp-card:hover .thumb img{ transform: scale(1.03); }

.fp-card .meta{ font-size: .95rem; color:#303a45; }
.fp-card .label{ color:#6f7f93; }
.fp-card .value{ color:#2a3b50; }
.fp-card .value.strong{ font-weight:700; }

.fp-card .details{
  display:inline-flex; align-items:center; gap:6px;
  color: var(--ilf-blue); text-decoration:none; margin-top:.4rem;
}
.fp-card .details::before{
  content:"›"; font-weight:800; line-height:1; transform: translateY(-1px);
  color: var(--ilf-blue);
}
.fp-card .details:hover{ text-decoration:underline; }

/* image right alignment on desktop */
@media (min-width: 992px){
  .col-lg-5 > img{ margin-left:auto; max-width:520px; }
}