:root {
    --red:   #c20c0c;
    --black: #333333;
    --gray:  #888;
    --light: #f5f5f5;
    --white: #fff;
    --fs-hero:    clamp(40px, 6vw, 80px);
    --fs-h2:      clamp(30px, 3vw, 60px);   
    --fs-h3:      clamp(20px, 2.5vw, 32px);
    --fs-body:    clamp(14px, 1vw, 18px);
    --fs-eyebrow: clamp(19px, 1.8vw, 24px);
    --fs-nav:     13px;
    --fs-footer:  12px;
    --fw-black:  900;
    --fw-bold:   700;
    --fw-medium: 500;
    --fw-normal: 400;
    --max-w: 1200px;
    --section-py: clamp(60px, 8vw, 120px);
  }

.skillos-density-content h2{font-size: var(--fs-h2);     font-family: var(--font-display);    font-weight: 500; }

.skillos-density-content p { font-family: var(--font-caption);  font-size: clamp(20px, 1.6vw, 30px); line-height: 1.5; }

.skillos-density-content a{      color: var(--red);  font-size: clamp(14px, 1vw, 18px);}

  /* ─── HERO ─── */
  .hero {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;  /* ADD this */
  overflow: hidden;
  padding: 80px 40px;
  background: var(--white);
  text-align: center;       /* ADD this */
}

.hero-text {
  position: relative;
  z-index: 2;
  max-width: 680px;         /* widen slightly for centered layout */
}

.hero-text h1 {
  font-size: clamp(56px, 8vw, 110px);   /* bigger */
  font-weight: 300;                      /* light, not black */
  line-height: 1.0;
  letter-spacing: -2px;
  color: var(--black);
  margin-bottom: 24px;
}

/* UPDATE hero subtitle */
.hero-text p {
  font-size: clamp(15px, 1.6vw, 20px);
  color: var(--black);
  font-weight: 400;                      /* normal weight */
  margin-bottom: 8px;
  text-align: center;
}

/* UPDATE hero sub-line */
.hero-text .sub {
  font-size: clamp(12px, 1vw, 14px);
  color: var(--black);                   /* black not red */
  font-weight: 400;
  opacity: .6;
  text-align: center;
  display: block;
}
  /* Red geometric triangles in hero */
  .hero-shapes {
    position: absolute;
    top: 0; right: 0;
    width: 50%;
    height: 100%;
    z-index: 1;
  }
  .hero-bg-img {
    position: absolute;
    top: 0; right: 0;
    width: 55%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: .18;
  }
  /* Stacked red triangle shapes */
  .shape-wrap {
    position: absolute;
    top: 0; right: 0;
    width: 100%;
    height: 100%;
  }
  .shape-wrap svg {
    width: 100%;
    height: 100%;
  }

  /* ─── DARK IMAGE STRIP ─── */
  .image-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: auto; gap: 13px;
  }
  .image-strip-cell {
    position: relative;
    overflow: hidden;
  }


  /* ─── CYBER OVERVIEW ─── */
  .cyber-overview {
    display: grid;
    grid-template-columns: 669px 1fr;
    min-height: auto; margin-top: 15px;
  }
  .cyber-overview-left {
    display: grid;
        grid-template-columns: repeat(2, 1fr);
    height: auto;
    gap: 13px;
  }
  .hex-diagram {
    width: 120px;
    height: 120px;
    position: relative;
  }
  .cyber-overview-right {
    padding: 5%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .cyber-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .06;
  }
  .cyber-overview-right h2 {
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -1px;
    position: relative;
    z-index: 1;
    margin-bottom: 16px;
  }
  .cyber-overview-right p {
    font-size: var(--fs-body);
    color: #444;
    position: relative;
    z-index: 1;
    max-width: 420px;
    line-height: 1.7;
  }

  /* ─── SERVICE SECTIONS ─── */
  .service-section {
    padding: 5% 0;
  }

  .service-eyebrow {
    font-size: var(--fs-eyebrow);
    color: var(--gray);
    text-transform: none;
    padding: 0 0px;
    margin-bottom: 5%; padding-bottom:25px;     border-bottom: 1px solid #2b2b2b;
  }
  .service-inner {
  display: grid;
  grid-template-columns: 340px 1fr;  /* was 220px, give title more space */
  gap: 0 40px;                        /* add column gap */
  padding: 0 0px;
  margin-top: 16px;
  align-items: start;                 /* add this — prevents title stretching */
}
  .service-title {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -1px;
  padding-right: 0;        /* remove the old padding-right */
  padding-top: 4px;
  word-break: keep-all;    /* add this */
  overflow-wrap: normal;   /* add this */
}
  .service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 48px;
  }
  .service-item h4 {
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    color: var(--black);
    margin-bottom: 8px;
    line-height: normal;
  }
  .service-item p {
  font-size: var(--fs-body);
  color: #444;             /* was #555, but more importantly... */
  line-height: 1.65;
  text-decoration: none;   /* add this in case a parent link style is bleeding */
}
  .inquiry-btn {
    display: inline-block;
    margin-top: 40px;
    background: var(--red);
    color: var(--white);
    font-size: 16px;
    padding: 9px 32px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .2s; text-transform: uppercase;
    cursor: pointer;
    border: none;    border-radius: 10px;
  }
  .inquiry-btn:hover { background: #a80015; }
  .btn-wrap {
    grid-column: 1 / -1;
    margin-top: 8px;
  }

  #cyber-security { background: url(../images/ai-human-capital-bg.webp) no-repeat bottom right; background-size: 40%; margin-bottom:10%; }

    #cyber-security { background: url(../images/ai-human-capital-bg.webp) no-repeat bottom right; background-size: 40%; margin-bottom:10%; }

     #cyber-security .pillar__title{ font-size: clamp(60px, 9vw, 175px);     color: var(--ink); }

     .support-line { font-size: clamp(30px, 3vw, 48px);  color: var(--ink);     text-align: center;
    margin-top: 1%; }

   #cyber-security .s-9 p {  font-size: clamp(16px, 1vw, 24px);  color: var(--ink); text-align: center;   margin-top: 1%; }


  /* ─── MOBILE RESPONSIVENESS ─── */
@media (max-width: 768px) {

  /* HERO */
  .hero {
    padding: 60px 24px 60px 24px;
    min-height: 420px;
  }
  .hero-text {
    max-width: 100%;
  }
  .hero-shapes {
    width: 100%;
    opacity: 0.5;
  }

  /* DARK IMAGE STRIP */
  .image-strip {
    grid-template-columns: repeat(2, 1fr);
    height: auto;     
  }

  /* CYBER OVERVIEW */
  .cyber-overview {
    grid-template-columns: 1fr;
  }
  .cyber-overview-left {

        margin-top: 13px;
  }
  .cyber-overview-right {
    padding: 40px 24px;
  }


  .service-inner {
    grid-template-columns: 1fr;

    gap: 24px 0;
  }
  .service-title {
    font-size: clamp(36px, 8vw, 48px);
    padding-right: 0;
  }
  .service-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 480px) {

  /* HERO */
  .hero {
    padding: 48px 16px;
    min-height: 360px;
  }

  /* IMAGE STRIP */
  .image-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  /* CYBER OVERVIEW */
  .cyber-overview-right {
    padding: 32px 16px;
  }
  .cyber-overview-right h2 {
    font-size: clamp(28px, 7vw, 40px);
  }

  /* SERVICE SECTIONS */
  .service-section {
    padding: 40px 0;
  }


  .service-title {
    font-size: clamp(30px, 9vw, 42px);
  }

}s