/* =========================================================
   Service page components (.svc-*)
   Shared by /67 MANAGEMENT & STRATEGY, /68 MARKETING, /KOREA-CHINALINK
   (those pages load this file first, then their own page CSS)
   ========================================================= */

/* sections */
.svc-sec { position: relative; padding: 130px 0; }
.svc-sec--gray  { background: #f3f3f3; }
.svc-sec--lgray { background: #e7e7e7; }
.svc-sec--pink  { background: #ffb5cb; }
.svc-sec--soft  { background: #f8f8f8; }
.svc-sec--dark  { background: #131313; color: #fff; }
.svc-sec--navy  { background: #233056; color: #fff; }
.svc-sec--head  { padding: 150px 0 60px; }
.svc-sec--rows  { padding: 0 0 125px; }

/* type */
.svc-eyebrow { font-family: var(--font-en); font-weight: 400; font-size: 24px; line-height: 1.2; color: #c6c6c6; text-transform: uppercase; margin-bottom: 20px; }
.svc-eyebrow b { font-weight: 700; }
.svc-eyebrow--dim { color: #646464; }
.svc-eyebrow--wide { font-size: 22px; letter-spacing: .12em; color: #ababab; margin-bottom: 30px; }
.svc-eyebrow--lg { font-size: 24px; color: #c6c6c6; }
/* soft line breaks: on small screens <br> inside .svc-soft-br becomes a space */
.svc-headline { font-size: 56px; line-height: 1.48; font-weight: 400; color: #010101; letter-spacing: -.01em; }
.svc-headline strong { font-weight: 700; }
.svc-lead { margin-top: 32px; font-size: 24px; line-height: 1.64; color: #010101; }
.svc-lead p + p { margin-top: 1.64em; }
.svc-lead .q { display: inline-block; font-size: 36px; line-height: 1.4; font-weight: 700; margin-bottom: 4px; }
.svc-title { font-family: var(--font-en); font-size: 64px; line-height: 1.13; font-weight: 700; letter-spacing: -.01em; }
.svc-h60 { font-size: 60px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; }
.svc-h48 { font-size: 48px; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; }
.svc-sub { margin-top: 30px; font-size: 36px; line-height: 1.6; font-weight: 700; }
.svc-sub--26 { font-size: 26px; line-height: 1.6; }
.svc-text { margin-top: 30px; font-size: 22px; line-height: 1.75; }
.svc-text p + p { margin-top: 0; }

/* feature block: heading column + icon cards (290px) */
.svc-feature { display: grid; grid-template-columns: minmax(0, 610fr) minmax(0, 290fr) minmax(0, 290fr); gap: 30px; align-items: start;
  grid-template-areas: "head a b" "head . c" "body body c"; }
.svc-feature--4 { grid-template-areas: "head a b" "head c d" "body . ."; }
.svc-feature--4 .svc-feature__head { grid-row: 1 / span 3; }
.svc-feature__head { grid-area: head; }
.svc-feature__body { grid-area: body; font-size: 22px; line-height: 1.75; }
.svc-feature--4 .svc-feature__body { display: none; }
.svc-card--a { grid-area: a; } .svc-card--b { grid-area: b; } .svc-card--c { grid-area: c; } .svc-card--d { grid-area: d; }
.svc-feature__head .svc-sub { margin-top: 30px; }
.svc-feature__head .svc-text { margin-top: 30px; }
.svc-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 208px; padding: 24px 20px 25px; border-radius: 20px; background: var(--card, #969696); color: var(--card-fg, #fff); font-size: 24px; line-height: 1.22; }
.svc-card img { width: 100px; height: 100px; object-fit: contain; align-self: flex-end; margin-top: 12px; }
.svc-card--tall { min-height: 236px; }
.svc-card--tall img { margin-top: auto; }

/* centered statement (navy) */
.svc-statement { text-align: center; padding: 138px 0 120px; }
.svc-statement__title { font-family: var(--font-en); font-size: 64px; line-height: 1.3; font-weight: 700; color: #ffb5cb; }
.svc-statement__sub { margin-top: 30px; font-size: 36px; line-height: 1.6; font-weight: 700; color: #fff; }
.svc-statement__text { margin-top: 50px; font-size: 22px; line-height: 1.77; color: #fff; }
.svc-statement__text strong { color: #ffb5cb; }

/* rows: empty left column, title + bullet list on the right */
.svc-rows { border-top: 2px solid #212121; border-bottom: 2px solid #212121; }
.svc-row { display: grid; grid-template-columns: minmax(0, 397fr) minmax(0, 823fr); column-gap: 30px; padding: 32px 0 30px; }
.svc-row + .svc-row { border-top: 1px solid #212121; }
.svc-row__title { grid-column: 2; font-size: 30px; line-height: 1.2; font-weight: 700; color: #131313; }
.svc-row__list { grid-column: 2; margin-top: 30px; padding-left: 40px; list-style: disc; font-size: 20px; line-height: 1.6; color: #212121; }
.svc-row__list li::marker { font-size: .8em; }

/* dark CTA with check items */
.svc-cta { padding: 130px 0 60px; }
.svc-cta__title { margin-top: 0; }
.svc-cta__sub { margin-top: 25px; font-size: 26px; line-height: 1.6; font-weight: 700; }
.svc-checks { margin-top: 30px; padding: 26px 0 0; border-top: 2px solid rgba(255,255,255,.92); border-bottom: 1px solid rgba(255,255,255,.92); }
.svc-checks li { display: flex; align-items: center; gap: 6px; min-height: 61px; margin-bottom: 30px; font-size: 26px; line-height: 1.4; font-weight: 700; }
.svc-checks li::before { content: ''; flex: 0 0 34px; height: 34px; background: url('/assets/img/0a62c620108ff.png') center / contain no-repeat; }
.svc-checks--grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; padding-top: 40px; }
.svc-checks--grid li { display: block; min-height: 0; margin-bottom: 40px; }
.svc-checks--grid li strong { display: flex; align-items: center; gap: 6px; font-size: 26px; }
.svc-checks--grid li strong::before { content: ''; flex: 0 0 34px; height: 34px; background: url('/assets/img/0a62c620108ff.png') center / contain no-repeat; }
.svc-checks--grid li::before { display: none; }
.svc-checks--grid li span { display: block; margin-top: 12px; font-size: 16px; line-height: 1.6; font-weight: 400; }
.svc-cta__actions { display: flex; justify-content: flex-end; padding: 30px 20px 0 0; }
.svc-pill { display: inline-flex; align-items: center; justify-content: center; width: 261px; height: 56px; border-radius: 9999px; background: #fff; color: #de8ea6; font-family: var(--font-en); font-size: 21px; transition: background .25s, color .25s; }
.svc-pill:hover { background: #de8ea6; color: #fff; }

/* hero tweaks */
.svc-hero { min-height: 447px; padding-bottom: 59px; }
.svc-hero .page-hero__title { font-size: clamp(40px, 6.7vw, 96px); }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .svc-title { font-size: 52px; }
  .svc-statement__title { font-size: 52px; }
}
@media (max-width: 960px) {
  .svc-sec { padding: 90px 0; }
  .svc-sec--head { padding: 100px 0 40px; }
  .svc-sec--rows { padding-bottom: 90px; }
  .svc-headline { font-size: 38px; }
  .svc-title { font-size: 44px; }
  .svc-h60 { font-size: 42px; }
  .svc-h48 { font-size: 36px; }
  .svc-sub { font-size: 28px; }
  .svc-lead { font-size: 20px; }
  .svc-lead .q { font-size: 28px; }
  .svc-feature, .svc-feature--4 { grid-template-columns: 1fr 1fr; grid-template-areas: "head head" "body body" "a b" "c d"; }
  .svc-feature--4 .svc-feature__head { grid-row: auto; }
  .svc-row { grid-template-columns: 1fr; }
  .svc-row__title, .svc-row__list { grid-column: 1; }
  .svc-statement { padding: 90px 0; }
  .svc-statement__title { font-size: 40px; }
  .svc-statement__sub { font-size: 26px; }
  .svc-checks--grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .svc-sec { padding: 70px 0; }
  .svc-sec--head { padding: 70px 0 30px; }
  .svc-sec--rows { padding: 0 0 70px; }
  .svc-eyebrow--lg { font-size: 16px; }
  .svc-hero { min-height: 280px; padding-bottom: 36px; }
  .svc-eyebrow { font-size: 16px; }
  .svc-eyebrow--wide { font-size: 14px; }
  .svc-headline { font-size: 28px; line-height: 1.45; }
  .svc-title { font-size: 36px; }
  .svc-h60 { font-size: 32px; line-height: 1.25; }
  .svc-h48 { font-size: 28px; }
  .svc-sub, .svc-statement__sub { font-size: 22px; }
  .svc-sub--26, .svc-cta__sub { font-size: 19px; }
  .svc-lead, .svc-text, .svc-feature__body, .svc-statement__text { font-size: 17px; }
  .svc-lead br, .svc-text br, .svc-feature__body br, .svc-card br, .svc-statement__text br { content: ""; } .svc-lead br::after, .svc-text br::after, .svc-feature__body br::after, .svc-card br::after, .svc-statement__text br::after { content: " "; }
  .svc-lead .q { font-size: 22px; }
  .svc-feature, .svc-feature--4 { grid-template-columns: 1fr 1fr; gap: 14px; }
  .svc-feature__head, .svc-feature__body { margin-bottom: 10px; }
  .svc-card { min-height: 170px; font-size: 16px; padding: 18px 16px; border-radius: 16px; }
  .svc-card img { width: 64px; height: 64px; }
  .svc-statement__title { font-size: 30px; }
  .svc-row__title { font-size: 22px; }
  .svc-row__list { font-size: 16px; padding-left: 22px; margin-top: 16px; }
  .svc-checks li, .svc-checks--grid li strong { font-size: 18px; }
  .svc-checks li::before, .svc-checks--grid li strong::before { flex-basis: 26px; height: 26px; }
  .svc-cta__actions { justify-content: center; padding-right: 0; }
}

/* audit fix: original divider lines start at x487 (400px into the 1250px container), titles 27px inside */
@media (min-width: 961px) {
  .svc-rows { margin-left: 32%; }
  .svc-row { grid-template-columns: minmax(0, 1fr); padding-left: 27px; padding-right: 0; }
  .svc-row__title, .svc-row__list { grid-column: 1; }
}

@media (min-width: 961px) {
  /* original heading/text column is 503px wide (titles like 'Offline Marketing' wrap to 2 lines) */
  .svc-feature__head { max-width: 503px; }
}

/* original hero title: Montserrat 400, letter-spacing -1px */
.svc-hero .page-hero__title { font-weight: 400; letter-spacing: -1px; }