/* ==============================
   Vars
   ============================== */
:root{
  --edge: clamp(16px, 4vw, 40px);          /* horizontal page padding */
  --content-max: 1500px;                   /* width for kicker + content */
  --ink: #0f172a;                          /* text color */
  --white: #ffffff;
  --grey-50: #f6f7fa;                      /* light grey section */
  --link: #0a66c2;

  --h1: clamp(36px, 7vw, 96px);
  --h3: clamp(30px, 5vw, 70px);
  --h2: clamp(22px, 4vw, 36px);
  --p:  clamp(15px, 2.3vw, 20px);
}

/* =================================================================
   Section base (applies to both white & grey)
   - You can use .section--white or .section--grey
   - Also supports your existing: .about-section, .about-sectionGrey
   ================================================================= */
.section,
.about-section,
.about-sectionGrey{
  /* background is supplied via CSS var below */
  background: var(--section-bg, var(--white));
  color: var(--ink);
  padding-block: clamp(24px, 5vh, 48px) clamp(48px, 8vh, 96px);
}

.section .container,
.about-section .container,
.about-sectionGrey .container{
  width: min(var(--content-max), 100%);
  margin-inline: auto;
  padding-inline: var(--edge);
}

/* White vs Grey variants */
.section--white,
.about-section{ --section-bg: var(--white); }

.section--grey,
.about-sectionGrey{ --section-bg: var(--grey-50); }

/* =================================================================
   Fullscreen Kicker (outline title that aligns with content width)
   Place it above the section, or inside if you prefer that look.
   ================================================================= */
.fullscreen-kicker{
  width: min(var(--content-max), 100%);
  margin-inline: auto;
  padding-inline: var(--edge);
  padding-block: clamp(28px, 7vh, 64px) clamp(20px, 5vh, 40px);
  display: flex; align-items: flex-start; justify-content: flex-start;

  /* If kicker sits inside a section, inherit that background */
  background: var(--section-bg, var(--white));
}

.fullscreen-kicker h1{
  margin: 0;
  font-weight: 800;
  font-size: var(--h1);
  color: transparent;
  -webkit-text-stroke: 2px #8d919a;
  letter-spacing: .5px;
  line-height: 1.05;
}

.fullscreen-kicker h3{
  margin: 0;
  font-weight: 800;
  font-size: var(--h3);
  color: transparent;
  -webkit-text-stroke: 2px #8d919a;
  letter-spacing: .5px;
  line-height: 1.05;
}

/* =================================================================
   Typography inside sections
   ================================================================= */
.section h2,
.about-section h2,
.about-sectionGrey h2{
  margin: 0 0 16px;
  font-weight: 800;
  font-size: var(--h2);
  line-height: 1.2;
}

.section p,
.about-section p,
.about-sectionGrey p{
  margin: 0 0 18px;
  font-size: var(--p);
  line-height: 1.75;
}

.section a,
.about-section a,
.about-sectionGrey a{
  color: var(--link);
  font-weight: 600;
  text-decoration: none;
}
.section a:hover,
.about-section a:hover,
.about-sectionGrey a:hover{ text-decoration: underline; }

/* =================================================================
   KPI / bullet list (shared)
   ================================================================= */
.kpi-list{
  list-style: disc;
  padding-left: 1.25em;      /* ensures bullets are inside the text block */
  margin: 0;
  display: grid;
  row-gap: 12px;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.8;
}
.kpi-list li::marker{
  color: var(--ink);
  font-size: 1.1em;
}

/* Optional: 2-column variant on wider screens */
@media (min-width: 900px){
  .kpi-list.cols-2{
    grid-template-columns: repeat(2, minmax(0,1fr));
    column-gap: clamp(16px, 4vw, 40px);
  }
}

/* Small-screen polish */
@media (max-width: 480px){
  .kpi-list{ row-gap: 10px; }
  .fullscreen-kicker h1{ -webkit-text-stroke-width: 1.5px; }
}

/* Motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}

.btn-inquire{
  display:inline-flex;
  align-items:right;
  justify-content:right;
  padding:8px 30px;
  border-radius:8px;
  background: transparent;
  color:#000;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  white-space:nowrap;
  margin-top: 30px;
}
/* .btn-inquire:hover{ background:#001a33; } */
.btn-inquire:hover{ background:#d9dbde; }


.btn-apply{
  display:inline-flex;
  align-items:right;
  justify-content:right;
  padding:8px 30px;
  border-radius:8px;
  background:#C5A47E;;
  color:#000;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  white-space:nowrap;
  margin-top: 30px;
}
/* .btn-inquire:hover{ background:#001a33; } */
.btn-apply:hover{ background:#c8b49a; }