/* =========================================================================
   Yuvau V1 — Homepage content sections (Stage 5)
   Proof · Growth System · Selected Work · Why Yuvau · Approach · UAE · Final CTA.
   Reuses Stage 2 cards/type/buttons + Stage 3 glass; only section-specific
   structure lives here. Values from reference/yuvau-v1-final.html; colours via tokens.
   Depends on: tokens.css, base.css, glass.css, buttons.css, cards.css, global-ui.css.
   ========================================================================= */

/* Shared section intro */
.yv-sec__kicker { /* uses .yv-kicker */ }
.yv-sec__title  { margin: 12px 0 22px; max-width: 820px; }
.yv-sec__lead   { max-width: 620px; color: var(--yv-text-mid); }
.yv-accent-blue    { color: var(--yv-blue); }
.yv-accent-magenta { color: var(--yv-magenta); }
.yv-accent-gradient {
  background: linear-gradient(90deg, var(--yv-blue), #4C8FFF, var(--yv-magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================ PROOF ============================ */
.yv-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 46px; }
.yv-proof .yv-card:nth-child(2) { transform: translateY(-10px); }
.yv-proof .yv-card:nth-child(3) { transform: translateY(6px); }
.yv-proof__value { display: block; font-size: 60px; letter-spacing: -3px; font-weight: 850; margin: 20px 0 12px; color: #4D8FFF; font-variant-numeric: tabular-nums; line-height: 1; }
/* Provisional state when a verified metric hasn't been supplied yet */
.yv-proof__pending {
  display: inline-block; margin: 20px 0 12px; padding: 8px 12px; border-radius: var(--yv-radius-pill);
  font-size: var(--yv-fs-small); font-weight: 700; color: var(--yv-text-muted);
  background: var(--yv-bg-2); border: 1px dashed var(--yv-line);
}

/* ======================= GROWTH SYSTEM ======================= */
.yv-growth {
  background: linear-gradient(180deg, rgba(15,58,143,.10), rgba(2,16,43,.06));
}
.yv-system { position: relative; margin-top: 42px; border-top: 1px solid var(--yv-line); }
/* connective spine — makes six stages read as ONE system */
.yv-system::before {
  content: ""; position: absolute; left: 34px; top: 18px; bottom: 18px; width: 2px;
  background: linear-gradient(180deg, var(--yv-blue), var(--yv-magenta) 60%, var(--yv-yellow));
  opacity: .28; border-radius: 2px;
}
.yv-system__row {
  display: grid; grid-template-columns: 70px 1fr 330px; gap: 22px; align-items: center;
  padding: 28px 0; border-bottom: 1px solid var(--yv-line);
}
.yv-system__num {
  position: relative; z-index: 1; font-family: var(--yv-font-display);
  font-size: clamp(20px, 2.4vw, 30px); font-weight: 850; color: var(--yv-yellow-text);
  font-variant-numeric: tabular-nums;
}
.yv-system__name { font-family: var(--yv-font-display); font-size: clamp(24px, 3vw, 34px); letter-spacing: -.045em; margin: 0; }
.yv-system__cap  { margin: 0; color: var(--yv-text-mid); text-align: right; font-size: var(--yv-fs-small); line-height: 1.5; }

/* ======================== SELECTED WORK ======================== */
.yv-work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 46px; }
.yv-work .yv-card:nth-child(2) { transform: translateY(-10px); }
.yv-work .yv-card:nth-child(3) { transform: translateY(6px); }
.yv-work__pill { display: inline-block; margin-top: 12px; color: var(--yv-yellow-text); font-weight: 800; font-size: var(--yv-fs-small); }
.yv-work__pill--pending { color: var(--yv-text-muted); font-weight: 700; }
/* Homepage casework grid sits a touch lower and centres its "See all work" CTA. */
#work .yv-work-index { margin-top: 46px; }
.yv-work-more { display: flex; justify-content: center; margin-top: 34px; }

/* Case-study cards on the homepage (these styles also live in inner.css for the
   Work page; sections.css and inner.css never load together, so no conflict).
   Fixes runaway logo sizing — every logo is framed and capped uniformly. */
.yv-work-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.yv-case-card { padding: 0; gap: 0; overflow: hidden; }
.yv-case-card__logo-wrap { height: 178px; display: grid; place-items: center; padding: 26px; background: linear-gradient(135deg, #d7e8ff 0%, #f0f7ff 48%, #fbeeff 100%); border-bottom: 1px solid rgba(114, 166, 255, .18); }
.yv-case-card__logo { max-width: 66%; max-height: 84px; width: auto; height: auto; object-fit: contain; }
.yv-case-card__logo--text { font-family: var(--yv-font-display); font-weight: 800; font-size: clamp(18px, 2.6vw, 26px); color: var(--yv-blue); text-align: center; }
.yv-case-card__body { display: flex; flex-direction: column; gap: 10px; padding: var(--yv-space-lg); }
.yv-case-card__client { font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--yv-text-muted); font-weight: 850; }
.yv-case-card .yv-card__title { margin: 0; }
.yv-case-card .yv-work__pill { align-self: flex-start; }
:root[data-theme="dark"] .yv-case-card__logo-wrap,
.dark-theme .yv-case-card__logo-wrap { background: linear-gradient(135deg, rgba(12,41,82,.5), rgba(8,26,56,.4), rgba(68,19,72,.3)); border-color: rgba(111,166,255,.2); }

/* ========================= WHY YUVAU ========================= */
.yv-why {
  display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 46px;
  border-top: 1px solid var(--yv-line); border-left: 1px solid var(--yv-line);
}
.yv-why__cell {
  min-height: 220px; padding: 28px; transform: none !important;
  border-right: 1px solid var(--yv-line); border-bottom: 1px solid var(--yv-line);
  background: var(--yv-glass-bg-soft);
}
.yv-why__num { display: block; color: var(--yv-text-muted); text-transform: uppercase; letter-spacing: .12em; font-size: var(--yv-fs-kicker); font-weight: 850; }
.yv-why__title { font-size: 20px; margin: 48px 0 8px; background: linear-gradient(90deg, #0B1C3C, var(--yv-blue), var(--yv-magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.yv-why__text { color: var(--yv-text-mid); font-size: var(--yv-fs-small); line-height: 1.6; margin: 0; }

/* ========================== APPROACH ========================== */
.yv-approach { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 46px; border-top: 1px solid var(--yv-line); }
.yv-step {
  padding: 28px; border-left: 1px solid var(--yv-line); border-bottom: 1px solid var(--yv-line);
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(232,243,255,.18));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.yv-step:last-child { border-right: 1px solid var(--yv-line); }
.yv-step__num { font-size: 46px; letter-spacing: -3px; font-weight: 850; background: linear-gradient(90deg, var(--yv-blue), var(--yv-magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.yv-step__title { font-size: 24px; margin: 40px 0 10px; }
.yv-step__text { color: var(--yv-text-mid); line-height: 1.6; margin: 0; font-size: var(--yv-fs-small); }

/* ============================ UAE ============================ */
.yv-uae {
  padding: clamp(72px, 11vw, 128px) 0; position: relative; overflow: hidden;
  background:
    radial-gradient(650px 360px at 82% 42%, rgba(21,87,232,.12), transparent 66%),
    radial-gradient(560px 340px at 18% 80%, rgba(232,60,240,.09), transparent 68%),
    linear-gradient(180deg, rgba(246,250,255,.72), rgba(238,247,255,.88));
}
.yv-uae::before { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; right: -120px; top: 80px; background: radial-gradient(circle, rgba(232,60,240,.10), transparent 70%); filter: blur(18px); pointer-events: none; }
.yv-uae__grid { display: grid; grid-template-columns: 1fr .95fr; gap: 72px; align-items: center; }
.yv-uae__title span { display: block; background: linear-gradient(90deg, var(--yv-blue), #4C8FFF, var(--yv-magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.yv-uae__lead { margin: 22px 0 28px; max-width: 520px; color: var(--yv-text-mid); }
.yv-uae__panel {
  position: relative; border: 1px solid rgba(21,87,232,.14); border-radius: 24px; padding: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(234,244,255,.44) 62%, rgba(250,235,255,.34));
  box-shadow: 0 24px 60px rgba(21,87,232,.09), 0 7px 24px rgba(232,60,240,.05), inset 0 1px rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(18px) saturate(145%); backdrop-filter: blur(18px) saturate(145%);
}
.yv-uae__panel-top { display: flex; align-items: center; gap: 8px; color: #657792; font-size: 9px; font-weight: 850; letter-spacing: .16em; }
.yv-uae__status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--yv-magenta); box-shadow: 0 0 10px rgba(232,60,240,.25); }
.yv-uae__map { margin: 18px 0 10px; position: relative; height: 290px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(21,87,232,.10);
  background: radial-gradient(circle at 54% 50%, rgba(21,87,232,.14), transparent 37%), linear-gradient(180deg, rgba(226,239,255,.58), rgba(250,244,255,.52)); }
.yv-uae__map-grid { position: absolute; inset: 0; opacity: .38;
  background: linear-gradient(rgba(21,87,232,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(21,87,232,.08) 1px, transparent 1px); background-size: 32px 32px; }
.yv-uae__ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid rgba(21,87,232,.16); }
.yv-uae__ring--1 { width: 88px; height: 88px; }
.yv-uae__ring--2 { width: 156px; height: 156px; }
.yv-uae__ring--3 { width: 230px; height: 230px; border-style: dashed; opacity: .7; }
.yv-uae__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 78px; height: 78px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #0C2040;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(224,238,255,.86)); border: 1px solid rgba(21,87,232,.16);
  box-shadow: 0 13px 28px rgba(21,87,232,.12), inset 0 1px rgba(255,255,255,.96); }
.yv-uae__core span { font-size: 22px; line-height: 1; font-weight: 850; letter-spacing: -.06em; }
.yv-uae__core small { margin-top: 5px; font-size: 6px; letter-spacing: .12em; font-weight: 850; color: #6A7D9B; }
.yv-uae__node { position: absolute; padding: 7px 9px; border-radius: 8px; color: #233A5A; font-size: 9px; font-weight: 800;
  background: rgba(255,255,255,.65); border: 1px solid rgba(21,87,232,.10); box-shadow: 0 8px 22px rgba(21,87,232,.07);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.yv-uae__node--dubai   { left: 13%; top: 24%; }
.yv-uae__node--abu     { right: 12%; top: 31%; }
.yv-uae__node--sharjah { right: 15%; bottom: 20%; }
.yv-uae__tags { display: flex; gap: 7px; flex-wrap: wrap; padding-top: 10px; }
.yv-uae__tags span { padding: 7px 9px; border-radius: var(--yv-radius-pill); font-size: 8px; letter-spacing: .2px; font-weight: 800; color: #55708F; background: rgba(255,255,255,.56); border: 1px solid rgba(21,87,232,.10); }

/* =========================== FINAL CTA =========================== */
.yv-final-cta-sec { padding-block: var(--yv-section-y); }
.yv-final-cta {
  position: relative; overflow: hidden; border: 1px solid rgba(117,173,255,.3); border-radius: 24px; padding: clamp(28px, 5vw, 52px);
  display: flex; justify-content: space-between; align-items: end; gap: 30px;
  background: linear-gradient(120deg, rgba(225,237,255,.9), rgba(255,255,255,.82));
}
.yv-final-cta::before { content: ""; position: absolute; width: 500px; height: 260px; right: -140px; bottom: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(53,122,255,.6), transparent 65%); filter: blur(12px); pointer-events: none; }
.yv-final-cta::after  { content: ""; position: absolute; inset: auto -80px -160px auto; width: 520px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(232,60,240,.15), transparent 70%); filter: blur(10px); pointer-events: none; }
.yv-final-cta > * { position: relative; z-index: 2; }
.yv-final-cta__title { font-family: var(--yv-font-display); font-size: clamp(38px, 5vw, 72px); letter-spacing: -3px; line-height: .95; margin: 0; max-width: 710px; font-weight: var(--yv-fw-h2); }
.yv-final-cta__lead { color: var(--yv-text-mid); max-width: 390px; margin: 0 0 20px; }
.yv-final-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================ DARK THEME ============================ */
:root[data-theme="dark"] .yv-growth, .dark-theme .yv-growth { background: linear-gradient(180deg, rgba(15,58,143,.28), rgba(2,16,43,.20)); }
:root[data-theme="dark"] .yv-why__cell, .dark-theme .yv-why__cell { background: linear-gradient(180deg, rgba(11,35,74,.42), rgba(8,22,49,.24)); }
:root[data-theme="dark"] .yv-why__title, .dark-theme .yv-why__title { background: linear-gradient(90deg, #EAF1FF, var(--yv-blue), var(--yv-magenta)); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="dark"] .yv-step, .dark-theme .yv-step { background: linear-gradient(180deg, rgba(11,35,74,.42), rgba(8,22,49,.24)); }
:root[data-theme="dark"] .yv-final-cta, .dark-theme .yv-final-cta { background: linear-gradient(120deg, rgba(18,64,137,.60), rgba(8,27,58,.56)); border-color: rgba(111,166,255,.24); }
:root[data-theme="dark"] .yv-uae, .dark-theme .yv-uae {
  background: radial-gradient(650px 360px at 82% 42%, rgba(21,87,232,.22), transparent 66%), radial-gradient(560px 340px at 18% 80%, rgba(232,60,240,.12), transparent 68%), linear-gradient(180deg, #071323 0%, #06101E 100%);
}
:root[data-theme="dark"] .yv-uae__panel, .dark-theme .yv-uae__panel {
  background: linear-gradient(145deg, rgba(10,38,79,.56), rgba(7,25,52,.42) 62%, rgba(61,20,67,.26)); border-color: rgba(111,166,255,.18);
  box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 7px 24px rgba(232,60,240,.06), inset 0 1px rgba(255,255,255,.06);
}
:root[data-theme="dark"] .yv-uae__panel-top, .dark-theme .yv-uae__panel-top { color: #9BADC7; }
:root[data-theme="dark"] .yv-uae__map, .dark-theme .yv-uae__map { background: radial-gradient(circle at 54% 50%, rgba(21,87,232,.22), transparent 37%), linear-gradient(180deg, rgba(11,36,72,.66), rgba(31,18,46,.50)); border-color: rgba(111,166,255,.16); }
:root[data-theme="dark"] .yv-uae__node, .dark-theme .yv-uae__node { color: #dce7f7; background: rgba(8,28,59,.62); border-color: rgba(111,166,255,.18); }
:root[data-theme="dark"] .yv-uae__core, .dark-theme .yv-uae__core { color: #F4F8FF; background: linear-gradient(135deg, rgba(17,43,82,.98), rgba(8,26,56,.92)); border-color: rgba(111,166,255,.22); }
:root[data-theme="dark"] .yv-uae__tags span, .dark-theme .yv-uae__tags span { color: #9fb4d2; background: rgba(8,28,59,.5); border-color: rgba(111,166,255,.16); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 900px) {
  .yv-proof, .yv-work, .yv-why, .yv-approach { grid-template-columns: 1fr; }
  .yv-proof .yv-card, .yv-work .yv-card, .yv-why__cell { transform: none; }
  .yv-system__row { grid-template-columns: 48px 1fr; gap: 12px; }
  .yv-system__cap { grid-column: 2; text-align: left; }
  .yv-system::before { left: 23px; }
  .yv-uae__grid { grid-template-columns: 1fr; gap: 40px; }
  .yv-final-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .yv-why__cell { min-height: 0; }
  .yv-uae__map { height: 240px; }
}

/* ========================= Stage 8.5C — Internal-link affordances ========================= */
.yv-system__row--link { display: grid; text-decoration: none; color: inherit; transition: transform var(--yv-dur) var(--yv-ease), background var(--yv-dur) var(--yv-ease); }
.yv-system__row--link:hover { transform: translateX(8px); background: linear-gradient(90deg,rgba(21,87,232,.04),rgba(232,60,240,.03)); border-radius: 12px; }
.yv-system__row--link:focus-visible { outline: 2px solid var(--yv-focus); outline-offset: 4px; }

.yv-uae__node--ajman { right: 15%; bottom: 20%; }
.yv-uae__node--dubai,
.yv-uae__node--abu,
.yv-uae__node--ajman { color: #233A5A; cursor: pointer; }
.yv-uae__node--dubai:hover,
.yv-uae__node--abu:hover,
.yv-uae__node--ajman:hover { border-color: rgba(21,87,232,.24); color: var(--yv-blue); text-decoration: none; }

.yv-uae__cities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; }
.yv-uae__city-card {
	position: relative; display:flex; flex-direction:column; gap:9px; min-height:170px; padding:24px;
	border:1px solid var(--yv-line); border-radius:18px; background:var(--yv-glass-bg-soft);
	box-shadow:var(--yv-glass-shadow); transition:transform var(--yv-dur) var(--yv-ease), border-color var(--yv-dur) var(--yv-ease);
}
.yv-uae__city-card:hover { transform:translateY(-3px); border-color:rgba(21,87,232,.28); text-decoration:none; }
.yv-uae__city-label { font-size:24px; font-weight:800; letter-spacing:-.04em; }
.yv-uae__city-copy { color:var(--yv-text-mid); font-size:var(--yv-fs-small); line-height:1.55; max-width:38ch; }
.yv-uae__city-arrow { margin-top:auto; color:var(--yv-blue); font-size:18px; }

@media(max-width:900px) {
	.yv-uae__cities { grid-template-columns:1fr; }
	.yv-system__row--link:hover { transform:none; }
}

/* ========================= Homepage Industries section =========================
   Mirrors the UAE section pattern — real crawlable links to /industries/ and
   every industry sub-page from the homepage, so search crawlers see them
   without depending on the header dropdown. */
.yv-industries-home { padding: clamp(56px, 8vw, 96px) 0; }
.yv-industries-home__head { display: grid; grid-template-columns: 1.4fr auto; align-items: end; gap: 24px 40px; margin: 14px 0 32px; }
.yv-industries-home__title { margin: 0; }
.yv-industries-home__lead { grid-column: 1 / 2; color: var(--yv-text-mid); max-width: 62ch; margin: 8px 0 0; }
.yv-industries-home__cta { grid-column: 2 / 3; grid-row: 1 / 3; align-self: end; white-space: nowrap; }
.yv-industries-home__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.yv-industries-home__card {
	position: relative; display: flex; flex-direction: column; gap: 9px; min-height: 170px; padding: 24px;
	border: 1px solid var(--yv-line); border-radius: 18px; background: var(--yv-glass-bg-soft);
	box-shadow: var(--yv-glass-shadow);
	transition: transform var(--yv-dur) var(--yv-ease), border-color var(--yv-dur) var(--yv-ease);
}
.yv-industries-home__card:hover { transform: translateY(-3px); border-color: rgba(21,87,232,.28); text-decoration: none; }
.yv-industries-home__card-label { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.yv-industries-home__card-copy { color: var(--yv-text-mid); font-size: var(--yv-fs-small); line-height: 1.55; max-width: 38ch; }
.yv-industries-home__card-arrow { margin-top: auto; color: var(--yv-blue); font-size: 18px; }
@media (max-width: 900px) {
	.yv-industries-home__head { grid-template-columns: 1fr; }
	.yv-industries-home__cta { grid-column: 1 / 2; grid-row: auto; align-self: start; }
	.yv-industries-home__grid { grid-template-columns: 1fr; }
}

/* ========================= Stage 8.5D — Floating WhatsApp ========================= */
.yv-whatsapp {
  position: fixed;
  right: 72px;
  bottom: 22px;
  z-index: var(--yv-z-float);

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;

  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;

  color: #fff;
  background: linear-gradient(105deg, var(--yv-blue), #4F91FF 54%, var(--yv-magenta));

  box-shadow:
    0 14px 30px rgba(21,87,232,.20),
    0 5px 18px rgba(232,60,240,.08),
    inset 0 1px rgba(255,255,255,.22);

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;

  transition:
    opacity var(--yv-dur) var(--yv-ease),
    transform var(--yv-dur) var(--yv-ease),
    visibility var(--yv-dur) var(--yv-ease);
}

.yv-whatsapp.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.yv-whatsapp__icon {
  width: 20px;
  height: 20px;
  display: block;
  font-size: 0;            /* neutralise any legacy text glyph */
  background-color: #fff;  /* mask paints the mark solid white */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203C6.9%203%203%206.6%203%2011c0%202.4%201.2%204.6%203.2%206-.1%201-.6%202.3-1.4%203.3%201.5-.2%203-.8%204.1-1.6%201%20.2%202%20.3%203.1.3%205.1%200%209-3.6%209-8s-3.9-8-9-8Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203C6.9%203%203%206.6%203%2011c0%202.4%201.2%204.6%203.2%206-.1%201-.6%202.3-1.4%203.3%201.5-.2%203-.8%204.1-1.6%201%20.2%202%20.3%203.1.3%205.1%200%209-3.6%209-8s-3.9-8-9-8Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.yv-whatsapp__label {
  font-size: 12px;
  font-weight: 850;
}

.yv-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 36px rgba(21,87,232,.24),
    0 8px 20px rgba(232,60,240,.10);
  text-decoration: none;
}

@media(max-width:900px) {
  .yv-whatsapp {
    right: 58px;
    bottom: 16px;
  }
}

@media(max-width:600px) {
  .yv-whatsapp {
    right: 54px;
    bottom: 12px;
    width: 46px;
    height: 46px;
    padding: 10px;
    justify-content: center;
  }

  .yv-whatsapp__label {
    display: none;
  }

  .yv-whatsapp__icon {
    width: 22px;
    height: 22px;
  }
}

/* Stage 9A — Homepage SEO content refinements */

.yv-proof--seo .yv-card__label {
  display: block;
  margin-bottom: 12px;
  color: var(--yv-text-muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--yv-fs-kicker);
  font-weight: 850;
}
.yv-proof--seo .yv-h3 {
  margin: 0 0 12px;
}
.yv-proof--seo .yv-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}
.yv-proof--seo .yv-card__pills span {
  padding: 6px 9px;
  border: 1px solid var(--yv-line);
  border-radius: var(--yv-radius-pill);
  background: var(--yv-glass-bg-soft);
  color: var(--yv-text-mid);
  font-size: var(--yv-fs-kicker);
  font-weight: 800;
}


/* =========================================================
   Stage 9 homepage visual/content sync — client proof + selected work
   ========================================================= */
.yv-section-intro{max-width:760px}
.yv-proof-intro{margin-bottom:34px}
/* ---- Client logo marquee (auto-scroll, grayscale → colour on hover) ---- */
.yv-logo-marquee{position:relative;overflow:hidden;margin:0 0 34px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.yv-logo-marquee__track{display:flex;width:max-content;animation:yvLogoScroll 40s linear infinite;will-change:transform}
.yv-logo-marquee:hover .yv-logo-marquee__track,.yv-logo-marquee:focus-within .yv-logo-marquee__track{animation-play-state:paused}
.yv-logo-marquee__set{display:flex;flex:0 0 auto}
.yv-logo-marquee__item{flex:0 0 auto;margin:0 9px;width:186px;height:96px;display:grid;place-items:center;padding:20px 26px;border-radius:var(--yv-radius-card);border:1px solid rgba(255,255,255,.74);background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(232,243,255,.42) 60%,rgba(251,239,255,.30));box-shadow:0 14px 30px rgba(21,87,232,.06),inset 0 1px rgba(255,255,255,.9)}
.yv-logo-marquee__item img{max-width:100%;max-height:50px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .35s ease,opacity .35s ease,transform .35s ease}
.yv-logo-marquee__item:hover img{filter:none;opacity:1;transform:scale(1.05)}
@keyframes yvLogoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.yv-proof-client-card{min-height:290px;display:flex;flex-direction:column;justify-content:space-between}.yv-proof-client-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.yv-proof-sector{font-size:10px;font-weight:850;letter-spacing:1.6px;text-transform:uppercase;color:#5f718c}.yv-proof-mark{font-size:11px;color:#8393aa;font-weight:850}.yv-proof-client-logo{width:min(180px,70%);height:72px;object-fit:contain;margin:18px 0 10px}.yv-proof-client-card h3{margin:0 0 8px;font-size:25px}.yv-proof-client-card p{margin:0;max-width:360px}
.yv-work--clients .yv-work-client{min-height:360px;justify-content:flex-start;gap:22px}.yv-work-client-logo-wrap{height:180px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#d7e8ff 0%,#f0f7ff 48%,#fbeeff 100%);border:1px solid rgba(114,166,255,.18);box-shadow:inset 0 1px rgba(255,255,255,.78);overflow:hidden}.yv-work-client-logo{width:68%;height:68%;object-fit:contain}.yv-work-client .yv-work-copy{padding-top:0}.yv-work-label{display:inline-flex;margin-top:13px;font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:#7c8ca4;font-weight:850}
:root[data-theme="dark"] .yv-proof-sector,:root[data-theme="dark"] .yv-proof-mark,:root[data-theme="dark"] .yv-work-label,.dark-theme .yv-proof-sector,.dark-theme .yv-proof-mark,.dark-theme .yv-work-label{color:#a9b8cf}
:root[data-theme="dark"] .yv-logo-marquee__item,.dark-theme .yv-logo-marquee__item{background:linear-gradient(145deg,rgba(12,41,82,.55),rgba(8,26,56,.4),rgba(68,19,72,.24));border-color:rgba(111,166,255,.20)}
:root[data-theme="dark"] .yv-logo-marquee__item img,.dark-theme .yv-logo-marquee__item img{opacity:.5}
@media(max-width:900px){.yv-logo-marquee__item{width:154px;height:86px;padding:16px 20px}.yv-logo-marquee__item img{max-height:42px}.yv-work--clients{grid-template-columns:1fr}.yv-work--clients .yv-work-client{min-height:0}.yv-work-client-logo-wrap{height:165px}}
@media(max-width:600px){.yv-logo-marquee__item{width:132px;height:76px;padding:14px 18px}.yv-proof-client-card{min-height:250px}.yv-proof-client-logo{height:58px}.yv-work-client-logo-wrap{height:150px}}
@media(prefers-reduced-motion:reduce){.yv-logo-marquee__track{animation:none;flex-wrap:wrap;justify-content:center}.yv-logo-marquee__set{flex-wrap:wrap;justify-content:center}.yv-logo-marquee__set--dupe{display:none}}


/* ========================= Mobile homepage refinement ========================= */
@media (max-width:600px) {
  .yv-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .yv-sec__title,
  .yv-h2 {
    max-width: 100%;
  }

  .yv-proof .yv-card,
  .yv-work .yv-card {
    margin-bottom: 2px;
  }

  .yv-system__row {
    padding: 20px 0;
  }

  .yv-system__name {
    font-size: clamp(21px, 7vw, 27px);
  }

  .yv-system__cap {
    font-size: 12px;
    line-height: 1.55;
  }

  .yv-card__title {
    font-size: 22px;
  }

  .yv-card__text {
    font-size: 13px;
    line-height: 1.55;
  }
}

/* Footer layout is owned solely by global-ui.css (single source of truth). */

/* ========================= Mobile wheel refinement ========================= */
@media(max-width:600px) {
  /* Prevent the wheel's desktop detail cards from opening sideways on phones. */
  .yv-stage-summary {
    display: none !important;
  }

  /* Keep the wheel centered and contained in the viewport. */
  .yv-wheel-wrap {
    min-height: 350px;
    overflow: visible;
  }

  .yv-orbit {
    width: min(300px, 84vw);
    height: min(300px, 84vw);
  }

  .yv-orbit-stage {
    min-width: 92px;
    max-width: 102px;
  }
}

/* Keep floating WhatsApp in the lower-right safe zone, away from the rail. */
@media(max-width:600px) {
  .yv-whatsapp {
    bottom: 10px;
  }
}

/* Client-logo text fallback — shown only when a logo file is not in the Media Library */
.yv-logo-chip__text{font-family:var(--yv-font-display);font-weight:850;font-size:15px;letter-spacing:.02em;color:#3a4a63;text-align:center;line-height:1.05}
.yv-proof-client-logo--text{display:inline-flex;align-items:center;width:auto;font-family:var(--yv-font-display);font-weight:800;font-size:22px;color:var(--yv-blue)}
.yv-work-client-logo--text{display:inline-flex;align-items:center;justify-content:center;width:80%;height:auto;text-align:center;font-family:var(--yv-font-display);font-weight:800;font-size:clamp(18px,2.4vw,26px);color:var(--yv-blue)}
:root[data-theme="dark"] .yv-logo-chip__text,.dark-theme .yv-logo-chip__text{color:#cfe0ff}


/* ========================= Homepage proof optimization ========================= */
.yv-proof-section{padding-top:clamp(4.5rem,6vw,6.5rem);padding-bottom:clamp(4rem,5vw,5.5rem)}
.yv-proof-heading-row{margin-bottom:28px}
.yv-proof-trustline{display:grid;grid-template-columns:repeat(3,1fr) auto;align-items:center;border-top:1px solid var(--yv-line);border-bottom:1px solid var(--yv-line);background:rgba(255,255,255,.24)}
.yv-proof-trustline>span,.yv-proof-trustline>a{min-height:66px;display:flex;align-items:center;padding:14px 18px;border-right:1px solid var(--yv-line);font-size:12px;color:var(--yv-text-muted);line-height:1.35}
.yv-proof-trustline strong{margin-right:5px;color:var(--yv-text);font-weight:750}
.yv-proof-trustline a{justify-content:center;color:var(--yv-blue);font-weight:750;white-space:nowrap}
.yv-proof-trustline a span{margin-left:5px;font-size:15px}
@media(max-width:900px){.yv-proof-trustline{grid-template-columns:1fr 1fr}.yv-proof-trustline>span,.yv-proof-trustline>a{border-bottom:1px solid var(--yv-line)}.yv-proof-trustline>a{grid-column:1/-1}}
@media(max-width:600px){.yv-proof-heading-row{margin-bottom:22px}.yv-proof-trustline{grid-template-columns:1fr}.yv-proof-trustline>span,.yv-proof-trustline>a{border-right:0;min-height:52px}.yv-proof-trustline>a{grid-column:auto}}


/* ========================= Mobile edge-to-edge refinement ========================= */
@media (max-width:600px) {
  /* Keep the homepage content on the normal 18px container rhythm.
     The section navigation is intentionally a floating overlay, not a layout gutter. */
  body.home #main .yv-container {
    padding-right: 0;
  }

  .yv-section-nav {
    right: 6px;
    width: 20px;
  }

  .yv-section-nav__dots {
    gap: 5px;
  }

  .yv-section-dot {
    width: 12px;
    height: 12px;
  }
}