/* ==========================================================================
   Stellaspire home v2 (14 Oct 2026): client feedback "font too big, too much text, make it visual".
   Loads after home.css on the home page only, so the other pages are untouched until they are redone.
   Type scale: H1 36 to 54px (DM Sans), everything in DM Sans, H2 22 to 30px (Montserrat semibold), body 16px.
   ========================================================================== */
:root { --sky: #eaf4fd; --lav2: #f3effc; --indigo: #1d2142; --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --serif: var(--sans); }

body { font-size: 16px; line-height: 1.6; }

/* ---------- type ---------- */
.v2-h1 { max-width: 17em; margin-bottom: 20px; font: 500 clamp(36px, 4vw, 54px)/1.1 var(--sans); letter-spacing: -.02em; color: var(--indigo); }
.v2-h1 .grad { display: block; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.v2-h2 { font: 600 clamp(22px, 2vw, 30px)/1.25 var(--sans); letter-spacing: -.015em; color: var(--indigo); }
.v2-h3 { font: 600 18px/1.3 var(--sans); color: var(--indigo); }
.v2-label { margin-bottom: 24px; color: var(--muted); font: 500 14px/1.5 var(--sans); text-align: center; }
.v2-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 8px 32px; margin-bottom: 28px; }
.v2-head p { color: var(--muted); font-size: 15px; }
.v2-links { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.v2 .textlink { font-size: 14px; }
.v2 .button { min-height: 48px; padding: 12px 24px; font-size: 14px; }

/* ---------- 1. hero: one big line, one real face. Nothing else competes. ---------- */
.v2-hero { padding: clamp(48px, 6vw, 96px) 0 clamp(56px, 6vw, 96px); background: #ffffff; }
.v2-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(40px, 6vw, 104px); align-items: center; }
.v2-hero .v2-h1 { max-width: 12em; margin-bottom: 24px; font: 500 clamp(40px, 4.6vw, 64px)/1.06 var(--sans); letter-spacing: -.025em; }
.v2-lead { max-width: 29em; margin-bottom: 36px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.v2-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.v2-hero-actions .button { min-height: 52px; padding: 12px 26px; font-size: 15px; font-weight: 600; text-decoration: none; }
/* colour roles (60-30-10): white and mist are the base, indigo and the lavender/sky washes carry the brand,
   violet is the accent and is kept for things you can click */
.button--primary { background: var(--violet); border-color: var(--violet); color: #ffffff; }
.button--primary:hover { background: var(--violet-d); border-color: var(--violet-d); color: #ffffff; }
.button--soft { background: var(--purple-t); border-color: var(--purple-t); color: var(--indigo); }
.button--soft:hover { background: #d8cbf0; border-color: #d8cbf0; color: var(--indigo); }
.v2-aside { color: var(--muted); font-size: 15px; }
.v2-aside a { color: var(--indigo); font-weight: 500; text-decoration: underline; text-decoration-color: var(--purple); text-underline-offset: 3px; }
.v2-aside a:hover { color: var(--violet); }

/* hero graphic: what a search looks like, as one 15 second loop.
   brief fills in, the market appears, a lens sweeps it, three people are assessed,
   they become the shortlist, one joins. Static end state for reduced motion. */
.v2-hero-media { width: 100%; }
.mg { --T: 15s; --off: rgba(29, 33, 66, .12); position: relative; display: flex; flex-direction: column; gap: 14px; aspect-ratio: 44 / 50; padding: 22px; overflow: hidden; background: var(--lav2); }
.mg-k { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 500; }
.mg-brief { padding: 16px 18px; border: 1px solid rgba(29, 33, 66, .08); background: #fff; animation: mg-brief var(--T) infinite both; }
.mg-brief strong { display: block; margin-bottom: 10px; color: var(--indigo); font-size: 17px; font-weight: 600; }
.mg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-chips span, .mg-checks span { position: relative; padding: 4px 10px 4px 24px; background: var(--lav2); color: var(--indigo); font-size: 12px; font-weight: 500; line-height: 1.4; animation: mg-chip var(--T) infinite both; }
.mg-chips span::before, .mg-checks span::before, .mg-joined::before { content: ""; position: absolute; left: 10px; top: 50%; width: 4px; height: 8px; margin-top: -6px; border: solid var(--violet); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mg-chips span:nth-child(2) { animation-delay: .35s; }
.mg-chips span:nth-child(3) { animation-delay: .7s; }
.mg-chips span:nth-child(4) { animation-delay: 1.05s; }

.mg-area { position: relative; flex: 1; }
.mg-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; opacity: 0; animation: mg-dot var(--T) infinite both; animation-delay: calc(var(--i) * 55ms); }
.mg-dot--pick { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: var(--violet); animation-name: mg-pick; animation-delay: calc(var(--i) * .25s); }
.mg-lens { position: absolute; width: 66px; height: 66px; margin: -33px 0 0 -33px; border: 3px solid var(--indigo); border-radius: 50%; background: rgba(255, 255, 255, .4); opacity: 0; animation: mg-lens var(--T) infinite both; }
.mg-lens::after { content: ""; position: absolute; right: -22px; bottom: -8px; width: 26px; height: 5px; border-radius: 3px; background: var(--indigo); transform: rotate(45deg); }
.mg-checks { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mg-checks span { background: #fff; opacity: 0; animation-name: mg-check; }
.mg-checks span:nth-child(2) { animation-delay: .4s; }
.mg-checks span:nth-child(3) { animation-delay: .8s; }

.mg-list { position: absolute; inset: 0; }
.mg-list .mg-k { animation: mg-card var(--T) infinite both; }
.mg-note { padding: 2px 8px; background: var(--purple-t); color: var(--indigo); font-size: 11.5px; }
.mg-card { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; border: 1px solid rgba(29, 33, 66, .08); background: #fff; animation: mg-card var(--T) infinite both; animation-delay: calc(var(--i) * .3s); }
.mg-av { flex: none; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 50% 36%, #fff 0 17%, transparent 18%), radial-gradient(ellipse 46% 34% at 50% 100%, #fff 0 99%, transparent 100%), var(--c); }
.mg-lines { display: grid; flex: 1; gap: 6px; }
.mg-lines b { display: block; height: 7px; background: #e6e3ef; }
.mg-lines b:first-child { width: 58%; background: #d6d1e6; }
.mg-lines b:last-child { width: 84%; }
.mg-tag { padding: 3px 8px; background: var(--sky); color: var(--indigo); font-size: 11.5px; white-space: nowrap; }
.mg-joined { position: absolute; right: 10px; top: 43px; padding: 5px 10px 5px 24px; background: var(--indigo); color: #fff; font-size: 12px; font-weight: 600; animation: mg-joined var(--T) infinite both; }
.mg-joined::before { border-color: #fff; }
/* the first person joins: their "Spoken to" tag gives way to the Joined badge */
.mg-card:first-of-type .mg-tag { opacity: 0; animation: mg-tagout var(--T) infinite both; }

.mg-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.mg-steps li { padding-top: 8px; border-top: 3px solid var(--off); color: var(--muted); font-size: 12px; font-weight: 500; animation: var(--T) infinite both; }
.mg-steps li:last-child { border-top-color: var(--indigo); color: var(--indigo); }
.mg-steps li:nth-child(1) { animation-name: mg-s1; }
.mg-steps li:nth-child(2) { animation-name: mg-s2; }
.mg-steps li:nth-child(3) { animation-name: mg-s3; }
.mg-steps li:nth-child(4) { animation-name: mg-s4; }
.mg-steps li:nth-child(5) { animation-name: mg-s5; }

@keyframes mg-brief { 0% { opacity: 0; transform: translateY(12px); } 4%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes mg-chip { 0%, 4% { opacity: 0; transform: scale(.85); } 7%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes mg-dot { 0%, 15% { opacity: 0; transform: scale(0); } 19%, 40% { opacity: 1; transform: none; } 45% { opacity: .18; transform: scale(.8); } 58%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes mg-pick { 0%, 15% { opacity: 0; transform: scale(0); box-shadow: 0 0 0 0 rgba(107, 79, 184, 0); } 19%, 40% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(107, 79, 184, 0); } 44%, 57% { opacity: 1; transform: scale(1.35); box-shadow: 0 0 0 10px rgba(107, 79, 184, .18); } 62%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes mg-lens { 0%, 16% { opacity: 0; left: 20%; top: 30%; } 20% { opacity: 1; left: 20%; top: 30%; } 27% { left: 52%; top: 58%; } 34% { left: 79%; top: 26%; } 39% { opacity: 1; left: 50%; top: 42%; } 43%, 100% { opacity: 0; left: 50%; top: 42%; } }
@keyframes mg-check { 0%, 43% { opacity: 0; transform: translateY(8px); } 46%, 59% { opacity: 1; transform: none; } 63%, 100% { opacity: 0; } }
@keyframes mg-card { 0%, 61% { opacity: 0; transform: translateY(14px); } 65%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes mg-tagout { 0%, 76% { opacity: 1; } 79%, 100% { opacity: 0; } }
@keyframes mg-joined { 0%, 78% { opacity: 0; transform: scale(.7); } 82%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes mg-s1 { 0%, 15% { border-top-color: var(--indigo); color: var(--indigo); } 17%, 100% { border-top-color: var(--off); color: var(--muted); } }
@keyframes mg-s2 { 0%, 15% { border-top-color: var(--off); color: var(--muted); } 17%, 39% { border-top-color: var(--indigo); color: var(--indigo); } 41%, 100% { border-top-color: var(--off); color: var(--muted); } }
@keyframes mg-s3 { 0%, 39% { border-top-color: var(--off); color: var(--muted); } 41%, 59% { border-top-color: var(--indigo); color: var(--indigo); } 61%, 100% { border-top-color: var(--off); color: var(--muted); } }
@keyframes mg-s4 { 0%, 59% { border-top-color: var(--off); color: var(--muted); } 61%, 79% { border-top-color: var(--indigo); color: var(--indigo); } 81%, 100% { border-top-color: var(--off); color: var(--muted); } }
@keyframes mg-s5 { 0%, 79% { border-top-color: var(--off); color: var(--muted); } 81%, 97% { border-top-color: var(--indigo); color: var(--indigo); } 99%, 100% { border-top-color: var(--off); color: var(--muted); } }
@media (prefers-reduced-motion: reduce) { .mg, .mg * { animation: none !important; } }
@media (max-width: 720px) { .mg { aspect-ratio: auto; min-height: 500px; padding: 18px; } }

/* ---------- 2. proof ---------- */
.v2-proof { padding: 40px 0 48px; border-top: 1px solid var(--line); }
.v2-proof .logo-group img { width: 110px; height: 36px; }
.v2-stats { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 32px; padding: 0; list-style: none; }
.v2-stats li { display: flex; align-items: baseline; gap: 8px; padding: 4px 32px; color: var(--muted); font-size: 14.5px; }
.v2-stats li + li { border-left: 1px solid var(--line); }
.v2-stats strong { color: var(--indigo); font: 600 26px/1 var(--sans); letter-spacing: -.02em; }

/* ---------- 3. who we hire: same graphic tiles, quieter text ---------- */
.v2-hire { padding: clamp(56px, 6vw, 80px) 0; background: var(--lav2); }
.v2-hire .g-art { height: 118px; padding: 14px 18px 0; }
.v2-hire .gtile-body { padding: 4px 60px 18px 20px; }
.v2-hire .gtile h3 { margin-bottom: 4px; font: 600 16px/1.3 var(--sans); letter-spacing: 0; }
.v2-hire .gtile--fin h3 { font-size: 19px; }
.v2-hire .gtile p { font-size: 13px; }
.v2-hire .tile-arrow { width: 34px; height: 34px; font-size: 15px; }

/* ---------- 4. how a search works ---------- */
.v2-how { padding: clamp(56px, 6vw, 80px) 0; }
.v2-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.v2-steps::before { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 1px; background: repeating-linear-gradient(90deg, var(--purple) 0 6px, transparent 6px 12px); opacity: .6; }
.v2-steps li { position: relative; }
.v2-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; background: var(--indigo); transition: background .25s; }
.v2-ico svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.v2-steps h3 { margin-bottom: 6px; font: 600 17px/1.3 var(--sans); color: var(--indigo); }
.v2-steps p { max-width: 22em; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* ---------- 5. people + videos ---------- */
.v2-people { padding: clamp(56px, 6vw, 80px) 0; background: var(--sky); }
.v2-people-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(28px, 5vw, 64px); align-items: center; margin-bottom: clamp(48px, 5vw, 64px); }
.v2-people-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.v2-people-copy .v2-h2 { margin-bottom: 14px; }
.v2-people-copy p { max-width: 30em; margin-bottom: 20px; color: var(--muted); }
.v2-people-copy strong { color: var(--indigo); font-weight: 600; }
.v2-reels-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 18px; }
.v2-reels-head p { color: var(--muted); font-size: 14px; }
.v2-reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.v2-reel { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; overflow: hidden; border: 0; background: var(--grey); cursor: pointer; text-align: left; }
.v2-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .6s var(--ease); }
.v2-reel:hover img { transform: scale(1.05); }
.v2-reel-tag { position: absolute; left: 10px; top: 10px; padding: 3px 9px; background: var(--indigo); color: #fff; font-size: 12px; font-weight: 600; }
.v2-reel-tag--c { background: #ffffff; color: var(--indigo); }
.v2-reel-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,.96); color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.v2-reel-cap::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M12 9.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center / 30px no-repeat; transition: background-color .2s; }
.v2-reel:hover .v2-reel-cap::before { background-color: var(--violet); }
.v2-reel-cap span { flex: 1; }
.v2-reel-cap small { color: var(--muted); font-size: 12px; font-weight: 500; }

/* ---------- 6. reviews: smaller cards, sans text ---------- */
.v2-reviews { padding: clamp(56px, 6vw, 80px) 0; }
.v2-reviews .gr-head { justify-content: space-between; margin-bottom: 24px; }
.v2-reviews .gr-tools { gap: 16px; }
.v2-reviews .gr-pause { min-height: 40px; padding: 6px 14px; border-color: var(--purple-t); background: var(--purple-t); color: var(--indigo); }
.v2-reviews .gr-pause:hover { border-color: #d8cbf0; background: #d8cbf0; color: var(--indigo); }
.v2-reviews .gr-card { width: 360px; padding: 26px 26px 22px; }
.v2-reviews .gr-q { font-size: 56px; height: 28px; }
.v2-reviews .gr-card blockquote p { -webkit-line-clamp: 9; font: 400 15px/1.6 var(--sans); }
.v2-reviews .gr-card figcaption { padding-top: 20px; }
.v2-reviews .gr-av { width: 38px; height: 38px; font-size: 12px; }
.v2-reviews .gr-who strong { font-size: 14px; }
.v2-reviews .gr-who span { font-size: 12.5px; }

/* ---------- 7. two doors ---------- */
.v2-doors { padding: clamp(56px, 6vw, 80px) 0; border-top: 1px solid var(--line); }
.v2-doors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.v2-door { padding: clamp(28px, 3.5vw, 44px); }
.v2-door--hire { background: var(--lav2); }
.v2-door--find { background: var(--sky); }
.v2-door-tag { margin-bottom: 8px; color: var(--muted); font-size: 14px; font-weight: 600; }
.v2-door-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.v2-door .v2-h2 { margin-bottom: 10px; }
.v2-door > p { max-width: 28em; margin-bottom: 22px; color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .v2-hero-grid, .v2-people-grid { grid-template-columns: 1fr; }
  .v2-hero-media { max-width: 440px; }
  .v2-steps { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .v2-steps::before { display: none; }
  .v2-reels { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .v2-lead { font-size: 16.5px; }
  .v2-hero-actions .button { flex: 1 1 220px; }
  .v2-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
  .v2-stats li { flex-direction: column; gap: 4px; padding: 0 12px; font-size: 13px; text-align: center; align-items: center; }
  .v2-stats strong { font-size: 22px; }
  .v2-doors-grid { grid-template-columns: 1fr; }
  .v2-reviews .gr-card { width: 290px; }
}
@media (max-width: 560px) {
  .v2-hire .gtile--data, .v2-hire .gtile--gcc, .v2-hire .gtile--cfo, .v2-hire .gtile--ai, .v2-hire .gtile--div, .v2-hire .gtile--ret { grid-column: span 6; }
  .v2-hire .bento { gap: 10px; }
  .v2-hire .g-art { height: 72px; padding: 10px 10px 0; }
  .v2-hire .gtile-body { padding: 4px 12px 46px; }
  .v2-hire .gtile h3 { font-size: 14px; }
  .v2-hire .gtile p { display: none; }
  .v2-hire .tile-arrow { right: 10px; bottom: 10px; width: 28px; height: 28px; font-size: 13px; }
}
@media (max-width: 480px) {
  .v2-steps { grid-template-columns: 1fr; }
  .v2-reels { gap: 10px; }
  .v2-reel-cap { font-size: 12px; padding: 8px; gap: 8px; }
  .v2-reel-cap::before { width: 24px; height: 24px; background-size: 24px; }
  .v2-reel-cap small { display: none; }
}