/* Mint SEO — SEO Consulting page (Figma 762:4). Scoped sc-* classes. */
.sc-john, .sc-topics, .sc-fc, .sc-loc { position: relative; }
/* The hero (.sc-hero / .btn / .sc-hero__l / .sc-tag) is now the shared dark-teal panel in components.css.
   Only the consulting-specific eyebrow colour for the LIGHT sections + the rank artifact live here. */
.sc-john .eyebrow, .sc-topics .eyebrow, .sc-loc .eyebrow { font-size: 16px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 14px; }

/* ===== HERO artifact (keyword-rankings card — a white card on the shared teal panel) ===== */
.sc-hero__r { position: relative; }
.sc-rank { background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 40px 90px -50px rgba(20,20,19,0.35); padding: 22px 24px; }
.sc-rank__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sc-rank__head .t { font-size: 18px; font-weight: 800; color: var(--ink); }
.sc-rank__head .pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: var(--mint-ink); background: var(--mint-tint); padding: 6px 12px; border-radius: 999px; }
.sc-rank__head .pill i { width: 7px; height: 7px; border-radius: 50%; background: #1aa564; box-shadow: 0 0 0 3px rgba(26,165,100,0.18); }
.sc-rank__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid #eef1ef; }
.sc-rank__row .kw { font-size: 16px; color: var(--body); }
.sc-rank__row .rg { display: inline-flex; align-items: center; gap: 12px; }
.sc-rank__row .mv { font-size: 15px; font-weight: 800; color: var(--ink); }
.sc-rank__row .up { font-size: 14px; font-weight: 800; color: #1aa564; background: rgba(26,165,100,0.1); padding: 4px 9px; border-radius: 8px; }

/* ===== INTRODUCING JOHN ===== */
.sc-john { background: #fff; }
.sc-john__in { max-width: 1240px; margin: 0 auto; padding: clamp(64px, 8vh, 96px) 48px; display: grid; grid-template-columns: 440px 1fr; gap: 60px; align-items: center; }
.sc-john__portrait img { width: 100%; height: auto; border-radius: 24px; display: block; }
.sc-john__copy h2 { margin: 0 0 18px; font-size: clamp(30px, 3vw, 40px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.sc-john__copy h2 em { font-style: normal; color: var(--mint); }
.sc-john__copy p { margin: 0; font-size: 18px; line-height: 1.62; color: var(--body); }
.sc-john__creds { display: flex; gap: 40px; margin: 28px 0; padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sc-john__creds b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.sc-john__creds span { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint-ink); }

/* ===== CONSULTING TOPICS ===== */
.sc-topics { background: var(--mint-tint); }
.sc-topics__in { max-width: 1320px; margin: 0 auto; padding: clamp(64px, 8vh, 96px) 48px; display: grid; grid-template-columns: 380px 1fr; gap: 48px; align-items: start; }
.sc-topics__lead { position: sticky; top: 100px; }
.sc-topics__lead h2 { margin: 0 0 16px; font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); }
.sc-topics__lead h2 em { font-style: normal; color: var(--mint); }
.sc-topics__lead p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--body); }
.sc-topics__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sc-tile { background: #fff; border: 1px solid #dfeeeb; border-radius: 18px; padding: 26px 26px 12px; }
.sc-tile__k { margin: 0 0 8px; font-size: 15px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint-ink); }
.sc-tp { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid #eef4f2; }
.sc-tile__list .sc-tp:first-child { border-top: 0; }
.sc-tp .ck { width: 22px; height: 22px; border-radius: 50%; background: var(--mint-tint); color: var(--mint-ink); font-size: 12px; font-weight: 800; display: grid; place-items: center; margin-top: 2px; }
.sc-tp b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); }
.sc-tp span > b + text, .sc-tp span { font-size: 15px; color: var(--body); line-height: 1.4; }
.sc-tp span b { margin-bottom: 2px; }

/* ===== FREE CONSULTATION BAND ===== */
.sc-fc { background: radial-gradient(90% 140% at 82% -10%, #1c5049, #0a1f1c 60%), #0a1f1c; color: #fff; overflow: hidden; }
.sc-fc__in { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 7vh, 84px) 48px; display: grid; grid-template-columns: 1fr 490px; gap: 56px; align-items: center; }
.sc-fc__l .eyebrow { color: var(--mint-light); }
.sc-fc__l h2 { margin: 0; font-size: clamp(30px, 3.2vw, 42px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: #fff; }
.sc-fc__l p { margin: 16px 0 0; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.75); max-width: 34em; }
.sc-fc__act { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.sc-fc__act span { font-size: 15px; color: rgba(255,255,255,0.6); }
.sc-fc__panel { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 32px 34px; }
.sc-fc__panel .k { margin: 0 0 18px; font-size: 15px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint-light); }
.sc-fc__v { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; font-size: 17px; line-height: 1.4; color: rgba(255,255,255,0.92); padding: 11px 0; }
.sc-fc__v .ck { width: 26px; height: 26px; border-radius: 50%; background: rgba(143,214,207,0.15); color: var(--mint-light); font-size: 13px; font-weight: 800; display: grid; place-items: center; }

/* ===== LOCATION ===== */
.sc-loc { background: #fff; }
.sc-loc__in { max-width: 1320px; margin: 0 auto; padding: clamp(64px, 8vh, 96px) 48px; }
.sc-loc__head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.sc-loc__head h2 { margin: 0; font-size: clamp(30px, 3.2vw, 42px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.sc-loc__head h2 em { font-style: normal; color: var(--mint); }
.sc-loc__head p { margin: 14px auto 0; font-size: 18px; line-height: 1.55; color: var(--body); max-width: 46em; }
.sc-loc__map { position: relative; height: 420px; border-radius: 24px; overflow: hidden; border: 1px solid var(--border); background: #e8efec; }
.sc-loc__embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.sc-loc__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(143,214,207,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(143,214,207,0.1) 1px, transparent 1px); background-size: 62px 62px; }
.sc-loc__pin { position: absolute; top: 40%; left: 55%; width: 46px; height: 46px; border-radius: 50%; background: rgba(143,214,207,0.22); display: grid; place-items: center; transform: translate(-50%,-50%); }
.sc-loc__pin i { width: 14px; height: 14px; border-radius: 50%; background: var(--mint-light); box-shadow: 0 0 0 6px rgba(143,214,207,0.25); }
.sc-loc__label { position: absolute; top: calc(40% - 46px); left: 55%; transform: translateX(-50%); background: #fff; color: var(--ink); font-size: 15px; font-weight: 800; padding: 7px 14px; border-radius: 999px; box-shadow: 0 12px 30px -14px rgba(0,0,0,0.5); }
.sc-loc__facts { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; flex-wrap: wrap; gap: 10px 34px; background: rgba(10,31,28,0.62); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 16px 22px; }
.sc-loc__facts .f { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; color: #fff; }
.sc-loc__facts .ck { width: 24px; height: 24px; border-radius: 50%; background: rgba(143,214,207,0.15); color: var(--mint-light); font-size: 12px; font-weight: 800; display: grid; place-items: center; }

/* ===== RESPONSIVE ===== */
@media (max-width: 980px) {
  .sc-john__in, .sc-topics__in, .sc-fc__in { grid-template-columns: 1fr; gap: 40px; min-height: 0; }
  .sc-topics__lead { position: static; }
  .sc-topics__grid { grid-template-columns: 1fr; }
  .sc-john__portrait { max-width: 420px; }
}
@media (max-width: 560px) {
  .sc-john__in, .sc-topics__in, .sc-fc__in, .sc-loc__in { padding-left: 20px; padding-right: 20px; }
  .sc-john__creds { gap: 24px; flex-wrap: wrap; }
  .sc-loc__facts { position: static; margin-top: 16px; background: var(--mint-tint); border-color: #dfeeeb; }
  .sc-loc__facts .f { color: var(--ink); }
  .sc-loc__map { height: 260px; }
}