/* ─────────────────────────────────────────────────────────────
   HR Blizz homepage · "One modern experience"
   Light, spacious split: big header, vertical tab list on the
   left (large type), and a large photo stage on the right with
   an animated UI overlay. The people/photos are the heart.
   ──────────────────────────────────────────────────────────── */

.me-section {
  background: #F4F6FA;
  color: var(--ink);
  padding: clamp(72px, 11vh, 132px) 0;
  position: relative;
  overflow: hidden;
}
.me-section::before {
  content: "";
  position: absolute;
  inset: -28% -18% auto auto;
  width: 58%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,95,31,0.06), transparent 62%);
  pointer-events: none;
}
.me-section .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ── header ─────────────────────────────────────────── */
.me-head { margin-bottom: clamp(40px, 6vh, 76px); }
.me-eyebrow { display: block; margin-bottom: 18px; }
.me-h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 66px);
  line-height: 1.02;
  font-weight: 660;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
@media (max-width: 760px) {
  .me-h2 { font-size: clamp(30px, 8vw, 42px); }
  .me-h2 br { display: none; }
}

/* ── split layout ───────────────────────────────────── */
.me-split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: stretch;
}

/* ── vertical tab list (left) ───────────────────────── */
.me-tabs {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 18px);
  align-self: center;
}
.me-blurb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px) clamp(24px, 2.6vw, 34px);
  border-radius: 18px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard);
  outline: none;
}
.me-blurb:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.me-blurb-rule {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  width: 4px;
  height: calc(100% - 30px);
  border-radius: 4px;
  background: var(--accent);
  transition: transform 0.5s var(--ease-emphasized);
  opacity: 0;
}
.me-blurb.is-on {
  background: #fff;
  border-color: var(--rule);
  box-shadow: 0 24px 48px -28px rgba(0,23,56,0.22), 0 6px 16px -12px rgba(0,23,56,0.10);
}
.me-blurb.is-on .me-blurb-rule { transform: translateY(-50%) scaleY(1); opacity: 1; }
.me-blurb:hover:not(.is-on) { background: rgba(255,255,255,0.55); }

.me-blurb-title {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.12;
  font-weight: 640;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.me-blurb-text {
  font: 400 clamp(14.5px, 1.05vw, 16.5px)/1.55 var(--font-body);
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-emphasized), opacity 0.4s var(--ease-standard);
}
.me-blurb.is-on .me-blurb-text { max-height: 240px; opacity: 1; }
.me-blurb-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 14.5px var(--font-body);
  color: var(--accent);
  align-self: flex-start;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-emphasized), opacity 0.4s var(--ease-standard), gap var(--motion-base) var(--ease-emphasized);
}
.me-blurb.is-on .me-blurb-link { max-height: 40px; opacity: 1; }
.me-blurb-link svg { transition: transform var(--motion-base) var(--ease-emphasized); }
.me-blurb-link:hover { gap: 11px; }
.me-blurb-link:hover svg { transform: translateX(2px); }

/* ── stage with cross-fading tab panels (right) ─────── */
.me-stage {
  position: relative;
  width: 100%;
  min-height: clamp(420px, 62vh, 620px);
  border-radius: 24px;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
  box-shadow: 0 40px 80px -40px rgba(0,23,56,0.40), 0 10px 28px -18px rgba(0,23,56,0.18);
}
.me-tab {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease-emphasized), transform 0.7s var(--ease-emphasized);
  transform: scale(1.03);
}
.me-tab.is-on { opacity: 1; pointer-events: auto; transform: scale(1); }

.me-tab-img-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
}
.me-tab-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transform: scale(1.04);
  transition: transform 8s linear;
}
.me-tab.is-on .me-tab-img { transform: scale(1.10); }
.me-tab-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

.me-stage-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,23,56,0.52) 0%, rgba(0,23,56,0.16) 44%, transparent 72%),
    linear-gradient(0deg, rgba(0,23,56,0.28), transparent 60%);
  pointer-events: none;
}

/* ── OVERLAY 1 · currency pills ────────────────────── */
.me-pills {
  position: absolute;
  left: clamp(20px, 3vw, 56px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
}
.me-pill {
  --me-pill-i: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  min-width: 204px;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.3);
  font: 600 16px/1 var(--font-display);
  letter-spacing: -0.005em;
  cursor: pointer;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.4);
  opacity: 0.55;
  transform: translateX(0) scale(0.96);
  transition: transform 0.55s var(--ease-emphasized),
              opacity 0.45s var(--ease-standard),
              background 0.45s var(--ease-standard),
              box-shadow 0.45s var(--ease-standard);
}
.me-pill.is-on {
  background: #fff;
  border-color: #fff;
  opacity: 1;
  transform: translateX(18px) scale(1.05);
  box-shadow: 0 18px 36px -12px rgba(0,0,0,0.55), 0 0 0 4px rgba(255,255,255,0.1);
  z-index: 3;
}
.me-pill:hover { opacity: 0.92; }
.me-pill-code { flex: 1; text-align: left; }
.me-pill-check {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,23,56,0.08);
  color: rgba(0,23,56,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.45s var(--ease-standard), color 0.45s var(--ease-standard), transform 0.45s var(--ease-spring);
  flex: none;
}
.me-pill.is-on .me-pill-check {
  background: var(--hrb-green-60);
  color: #fff;
  transform: scale(1.06);
  animation: mePop 0.55s var(--ease-spring);
}
@keyframes mePop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1.06); }
}
.me-flag {
  position: relative;
  width: 28px; height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  border: 1px solid rgba(0, 23, 56, 0.12);
  background: #f0f3f8;
}
.me-flag > span { position: absolute; inset: 0; width: 100%; height: 100%; }
.me-flag > i, .me-flag > b, .me-flag > em { position: absolute; display: block; font-style: normal; }
.me-flag > b { left: 0; top: 0; width: 100%; height: 100%; }
.me-flag > em { inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; }

/* ── OVERLAY 2 · workflow trigger + actions ─────── */
.me-wf {
  position: absolute;
  left: clamp(20px, 3vw, 56px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2;
  max-width: min(440px, 64%);
}
.me-wf-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.45);
  padding: 0;
  overflow: hidden;
  animation: meCardIn 0.55s var(--ease-emphasized);
}
.me-wf-card:nth-child(2) { animation-delay: 0.12s; animation-fill-mode: backwards; }
@keyframes meCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.me-wf-eyebrow {
  display: block;
  font: 600 12.5px var(--font-display);
  padding: 9px 15px 8px;
  color: #4A2D00;
}
.me-wf-eyebrow.t-peach { background: #FFE5D6; }
.me-wf-eyebrow.t-lilac { background: #ECDDFF; color: #3B1A6A; }

.me-wf-row { display: flex; align-items: center; gap: 7px; padding: 13px 15px 15px; flex-wrap: wrap; }
.me-wf-tag {
  font: 500 13px var(--font-body);
  color: var(--ink-2);
  padding: 5px 9px;
  border-radius: 6px;
  background: #F6F7FB;
}
.me-wf-tag.t-yellow { background: #FFF0C7; color: #6A4A00; font-weight: 600; }
.me-wf-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 13px var(--font-body);
  padding: 5px 11px 5px 5px;
  border-radius: 999px;
  background: #F0F3F8;
  color: var(--ink);
}
.me-wf-av {
  width: 23px; height: 23px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 10.5px var(--font-body);
  color: #7A2C00;
}

.me-wf-list { list-style: none; margin: 0; padding: 9px 15px 15px; position: relative; }
.me-wf-list::before {
  content: "";
  position: absolute;
  left: 25px; top: 23px; bottom: 23px;
  width: 1.5px;
  background: linear-gradient(180deg, transparent, #C7B8E0 14%, #C7B8E0 86%, transparent);
}
.me-wf-item {
  display: grid;
  grid-template-columns: 31px 1fr 19px;
  align-items: center;
  gap: 11px;
  padding: 8px 0;
  position: relative;
  z-index: 1;
  opacity: 0.45;
  transition: opacity 0.4s var(--ease-standard);
}
.me-wf-item.is-on { opacity: 1; }
.me-wf-icn {
  width: 31px; height: 31px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 14px var(--font-display);
  position: relative; z-index: 1;
}
.me-wf-icn.t-g { background: #fff; color: #4285F4; border: 1px solid #E3E6EC; }
.me-wf-icn.t-b { background: #ECDDFF; color: #5B2A9A; }
.me-wf-icn.t-p { background: #ECDDFF; color: #5B2A9A; }
.me-wf-icn.t-o { background: #ECDDFF; color: #5B2A9A; }
.me-wf-label {
  font: 500 13.5px var(--font-body);
  color: var(--ink);
}
.me-wf-check {
  width: 19px; height: 19px; border-radius: 50%;
  background: #ECDDFF;
  color: #5B2A9A;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.4s var(--ease-standard), background 0.4s var(--ease-standard), color 0.4s var(--ease-standard);
}
.me-wf-item.is-on .me-wf-check { opacity: 1; background: var(--hrb-green-60); color: #fff; animation: mePop 0.5s var(--ease-spring); }

/* ── OVERLAY 3 · compliance experts ─────── */
.me-cx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.me-cx-risks, .me-cx-law {
  position: absolute;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.5);
  padding: 13px 15px;
  animation: meCardIn 0.55s var(--ease-emphasized);
  pointer-events: auto;
}
.me-cx-risks {
  left: clamp(56px, 8vw, 132px);
  bottom: clamp(220px, 44%, 360px);
  top: auto;
  min-width: 248px;
}
.me-cx-law {
  left: clamp(56px, 8vw, 132px);
  bottom: clamp(24px, 6%, 56px);
  top: auto;
  min-width: 232px;
  animation-delay: 0.16s;
  animation-fill-mode: backwards;
}
.me-cx-risks-head {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 12px var(--font-body);
  color: #6A3F00;
  background: #FFEFD0;
  padding: 5px 11px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.me-cx-warn { font-size: 12px; color: #C57A00; }
.me-cx-warn-sm { color: var(--accent); font-size: 13px; }
.me-cx-person {
  display: grid;
  grid-template-columns: 31px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 7px 0;
}
.me-cx-person + .me-cx-person { border-top: 1px solid #F0F3F8; }
.me-cx-av {
  width: 31px; height: 31px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 11.5px var(--font-body);
  flex: none;
}
.me-cx-person span:nth-child(2) { font: 600 13.5px var(--font-body); color: var(--ink); }
.me-cx-region { font: 500 11px var(--font-mono); color: var(--ink-3); }

.me-cx-law-head {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 11px var(--font-mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 6px;
}
.me-cx-law-num {
  font: 660 42px/1 var(--font-display);
  color: var(--ink);
  letter-spacing: -0.02em;
}
.me-cx-law-line {
  height: 2px;
  margin: 10px 0 12px;
  background: linear-gradient(90deg, var(--accent), #FFD9C2);
  border-radius: 2px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-emphasized) 0.25s;
}
.me-cx-law.is-active .me-cx-law-line { transform: scaleX(1); }
.me-cx-avs {
  display: flex;
  align-items: center;
}
.me-cx-av-sm {
  width: 27px; height: 27px; border-radius: 50%;
  border: 2px solid #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 10px var(--font-body);
}
.me-cx-av-sm + .me-cx-av-sm { margin-left: -8px; }
.me-cx-av-more { background: var(--hrb-orange-00) !important; color: var(--accent) !important; font-weight: 700; border-color: var(--hrb-orange-20); }

/* ── responsive ──────────────────────────────────── */
@media (max-width: 960px) {
  .me-split { grid-template-columns: 1fr; gap: 28px; }
  .me-tabs { align-self: stretch; }
  .me-blurb-text { max-height: 240px; opacity: 1; }
  .me-blurb-link { max-height: 40px; opacity: 1; }
  .me-stage { min-height: clamp(360px, 56vh, 520px); }
  .me-wf { max-width: 70%; }
  .me-cx-law { left: clamp(20px, 3vw, 56px); bottom: clamp(24px, 6%, 56px); top: auto; }
}
@media (max-width: 640px) {
  .me-stage { min-height: 0; aspect-ratio: 4 / 5; }
  .me-pills { left: 16px; gap: 7px; }
  .me-pill { min-width: 140px; font-size: 13px; padding: 6px 10px 6px 6px; }
  .me-flag { width: 22px; height: 22px; }
  .me-pill-check { width: 17px; height: 17px; }
  .me-wf { left: 16px; max-width: 80%; }
  .me-cx-risks, .me-cx-law { min-width: 0; max-width: 72%; }
  .me-cx-law-num { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .me-tab, .me-tab-img, .me-wf-card, .me-cx-risks, .me-cx-law, .me-pill, .me-cx-law-line, .me-wf-item.is-on .me-wf-check, .me-pill.is-on .me-pill-check {
    animation: none !important;
    transition: none !important;
  }
}