/*
Qurrah Creative V21.2.1
Homepage Editorial Section Header Refinement
Scope: Home only. Content/layout sections stay in the same order.

Fixes the four highlighted areas:
1. Cara Kami Berpikir
2. Selected Works
3. Layanan Digital
4. Insight
*/

.route-home{
  --v2121-label-col:150px;
  --v2121-heading-max:680px;
}

/* ===== 1. Cara Kami Berpikir ===== */
.route-home .qc-cream > .qc-container.qc-statement{
  width:min(var(--max),calc(100% - 40px));
  max-width:none;
  padding:18px 0;
  display:grid;
  grid-template-columns:var(--v2121-label-col) minmax(0,1fr);
  column-gap:44px;
  row-gap:18px;
  align-items:start;
}

.route-home .qc-statement > .qc-eyebrow{
  grid-column:1;
  grid-row:1 / span 2;
  margin:8px 0 0;
  line-height:1.45;
}

.route-home .qc-statement > h2{
  grid-column:2;
  max-width:var(--v2121-heading-max);
  font-size:clamp(36px,4vw,52px);
  line-height:1.04;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.route-home .qc-statement > p:last-child{
  grid-column:2;
  max-width:650px;
  margin:0;
  font-size:16px;
  line-height:1.7;
}

/* ===== 2–4. Shared editorial section header ===== */
.route-home .qc-section-head{
  display:grid;
  grid-template-columns:var(--v2121-label-col) minmax(0,1fr) auto;
  align-items:end;
  column-gap:44px;
  row-gap:12px;
  margin-bottom:40px;
  padding:0;
}

.route-home .qc-section-head > .qc-eyebrow{
  grid-column:1;
  margin:0 0 7px;
  align-self:end;
  line-height:1.45;
}

.route-home .qc-section-head > h2{
  grid-column:2;
  max-width:var(--v2121-heading-max);
  font-size:clamp(35px,3.9vw,50px);
  line-height:1.04;
  letter-spacing:-.043em;
  text-wrap:balance;
}

.route-home .qc-section-head > a{
  grid-column:3;
  align-self:end;
  justify-self:end;
  margin-bottom:5px;
  padding-bottom:3px;
  font-size:12px;
  white-space:nowrap;
  border-bottom:1px solid currentColor;
}

/* Services has no right-side link; keep the heading in the editorial middle column */
.route-home .qc-light .qc-section-head > h2:last-child{
  padding-right:40px;
}

/* Selected Works: cleaner breathing room before the grid */
.route-home .qc-dark .qc-section-head{
  margin-bottom:34px;
}

/* Insight: heading should not visually overpower its cards */
.route-home .qc-cream .qc-section-head > h2{
  max-width:620px;
}

/* Keep labels understated and consistent */
.route-home .qc-section-head .qc-eyebrow,
.route-home .qc-statement .qc-eyebrow{
  font-size:10px;
  letter-spacing:.18em;
  font-weight:850;
}

/* More deliberate section rhythm without changing section order */
.route-home .qc-section.qc-cream,
.route-home .qc-section.qc-light,
.route-home .qc-section.qc-dark{
  scroll-margin-top:84px;
}

/* ===== Tablet ===== */
@media(max-width:1000px){
  .route-home{
    --v2121-label-col:122px;
  }

  .route-home .qc-cream > .qc-container.qc-statement,
  .route-home .qc-section-head{
    column-gap:30px;
  }

  .route-home .qc-statement > h2,
  .route-home .qc-section-head > h2{
    font-size:clamp(34px,4.7vw,46px);
  }
}

/* ===== Mobile ===== */
@media(max-width:760px){
  .route-home .qc-cream > .qc-container.qc-statement{
    width:min(100% - 28px,var(--max));
    display:block;
    padding:4px 0;
  }

  .route-home .qc-statement > .qc-eyebrow{
    margin:0 0 13px;
  }

  .route-home .qc-statement > h2{
    max-width:14ch;
    font-size:34px;
    line-height:1.03;
  }

  .route-home .qc-statement > p:last-child{
    margin-top:18px;
    max-width:100%;
    font-size:15px;
    line-height:1.68;
  }

  .route-home .qc-section-head{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:end;
    gap:10px 18px;
    margin-bottom:28px;
  }

  .route-home .qc-section-head > .qc-eyebrow{
    grid-column:1 / -1;
    grid-row:auto;
    margin:0;
  }

  .route-home .qc-section-head > h2{
    grid-column:1;
    max-width:14ch;
    padding:0!important;
    font-size:34px;
    line-height:1.03;
  }

  .route-home .qc-section-head > a{
    grid-column:2;
    align-self:end;
    margin-bottom:4px;
    font-size:11px;
  }

  /* Services has no link: heading can use the full row */
  .route-home .qc-light .qc-section-head > h2:last-child{
    grid-column:1 / -1;
    max-width:15ch;
  }
}

/* ===== Small phones ===== */
@media(max-width:480px){
  .route-home .qc-statement > h2,
  .route-home .qc-section-head > h2{
    font-size:31px;
  }

  .route-home .qc-section-head{
    grid-template-columns:1fr;
  }

  .route-home .qc-section-head > .qc-eyebrow,
  .route-home .qc-section-head > h2,
  .route-home .qc-section-head > a{
    grid-column:1;
  }

  .route-home .qc-section-head > a{
    justify-self:start;
    margin-top:2px;
  }

  .route-home .qc-section-head > h2,
  .route-home .qc-light .qc-section-head > h2:last-child{
    max-width:100%;
  }
}