/* =========================================
/* =========================================
   YUKTIRA HEADER (GLOBAL) — put in style.css
   Beautiful + stable + active highlight
========================================= */
body{
  font-family: var(--font-primary);
}

:root{
  --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

/* Aliases (so older CSS vars still work) */
--primary:   var(--yk-primary);
--secondary: var(--yk-secondary);
--accent:    var(--yk-accent);

/* Gradients used across components */
--gradSecondary: linear-gradient(135deg, rgba(126,87,194,.20), rgba(126,87,194,.06));
--gradAccent:    linear-gradient(135deg, rgba(255,140,0,.22), rgba(255,140,0,.06));

--yk-primary:#2B3A67;
  --yk-secondary:#7E57C2;
  --yk-accent:#FF8C00;

  --yk-ink:#0b1220;
  --yk-muted:rgba(15,23,42,.68);

  --yk-white:#fff;
  --yk-radius:16px;
  --yk-shadow: 0 16px 50px rgba(0,0,0,.16);
  --yk-border: 1px solid rgba(255,255,255,.14);

  /* ✅ NEW: control header height + logo size from one place */
  --yk-header-h: 72px;     /* fixed navbar height */
  --yk-logo-h: 56px;       /* increase only this to grow logo */
}
/* =========================================
   HEADER FULL-WIDTH FIX (remove white gaps)
========================================= */

/* 1) Kill default browser margin */
html, body{
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) Some WP themes add padding/margins on wrappers */
.site, .site-content, .site-main,
.wp-site-blocks, .entry-content, .content-area,
.container, .elementor-section, .elementor-container{
  max-width: 100%;
}

/* If your theme adds side padding to main wrappers, neutralize it */
.site, .wp-site-blocks, .entry-content{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3) Make header full-bleed even if it's inside a container */
.ykHeader{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  left: 0;
  right: 0;
}

/* 4) If WP admin bar is present (logged-in), keep sticky correct */
body.admin-bar .ykHeader{
  top: 32px;
}
@media (max-width: 782px){
  body.admin-bar .ykHeader{ top: 46px; }
}

.ykHeader, .ykHeader *{
  box-sizing:border-box;
}

/* sticky glass header */
.ykHeader{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(43,58,103,.98), rgba(43,58,103,.92));
  border-bottom: var(--yk-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ✅ FIX: header height locked, no vertical padding that changes height */
.ykHeader__inner{
  max-width: 1240px;
  margin: 0 auto;

  height: var(--yk-header-h);      /* ✅ fixed height */
  padding: 0 20px;                /* ✅ only left/right padding */

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

/* LOGO */
.ykLogo{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color: var(--yk-white);
  min-width: 200px;

  height: 100%;                   /* ✅ logo container same as header height */
}

/* ✅ IMPORTANT: increase logo size here without increasing header */
.ykLogo img{
  height: var(--yk-logo-h);        /* ✅ change this only */
  width: auto;
  max-height: 100%;               /* ✅ prevents header expansion */
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

/* ✅ keep text from stretching header */
.ykLogo__text{ line-height:1.05; }
.ykLogo__name{
  display:block;
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 18px;
}
.ykLogo__tag{
  display:block;
  margin-top: 3px;
  font-size: 12px;
  opacity: .78;
}

/* DESKTOP MENU */
.ykNav{ flex: 1; display:flex; justify-content:center; }
.ykMenu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap: 22px;
  align-items:center;
}

/* menu links */
.ykMenu > li > a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 10px;
  text-decoration:none;
  color: rgba(255,255,255,.92);
  font-weight: 850;
  font-size: 15px;
  line-height: 1;
  letter-spacing:.2px;
  border-radius: 12px;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

/* hover pill */
.ykMenu > li > a:hover{
  color: var(--yk-primary) !important;
  background:white;
  transform: translateY(-1px);
}

/* underline glow */
.ykMenu > li > a::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(.2);
  transform-origin: left;
  background: linear-gradient(90deg, var(--yk-secondary), var(--yk-accent));
  transition: .22s ease;
}
.ykMenu > li > a:hover::after{
  opacity: 1;
  transform: scaleX(1);
}

/* ACTIVE state (WordPress adds these classes automatically) */
.ykMenu li.current-menu-item > a,
.ykMenu li.current-menu-parent > a,
.ykMenu li.current_page_item > a,
.ykMenu li.current_page_parent > a{
  color:#ff900f;
  background: rgba(255,255,255,.14);
}
.ykMenu li.current-menu-item > a::after,
.ykMenu li.current-menu-parent > a::after,
.ykMenu li.current_page_item > a::after,
.ykMenu li.current_page_parent > a::after{
  opacity: 1;
  transform: scaleX(1);
}

/* RIGHT ACTIONS */
.ykActions{
  display:flex;
  align-items:center;
  gap: 12px;
}
.ykBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 16px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 950;
  color:#fff;
  background: linear-gradient(135deg, var(--yk-secondary), #9b7bdc);
  box-shadow: 0 10px 25px rgba(126,87,194,.25);
  transition: transform .18s ease, filter .18s ease;
}
.ykBtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  color:#fff!important;
}

/* BURGER */
.ykBurger{
  width: 44px;
  height: 42px;
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.14);
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease;
}
.ykBurger:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.18);
}
.ykBurger span{
  position:relative;
  width: 22px;
  height: 2px;
  background: #fff;
  display:block;
  border-radius: 999px;
}
.ykBurger span::before,
.ykBurger span::after{
  content:"";
  position:absolute;
  left:0;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 999px;
}
.ykBurger span::before{ top:-7px; }
.ykBurger span::after{ top: 7px; }

/* =========================
   MOBILE DRAWER (slow slide)
========================= */
.ykOverlay{
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s ease;
}

.ykMobile{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: min(340px, 86vw);
  height: 100vh;
  background: #fff;
  box-shadow: var(--yk-shadow);
  transform: translateX(-102%);
  transition: transform .42s cubic-bezier(.2,.9,.2,1);
  display:flex;
  flex-direction:column;
  padding: 16px;
  border-right: 1px solid rgba(2,6,23,.08);
}

.ykMobile__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 6px 4px 12px;
  border-bottom: 1px solid rgba(2,6,23,.08);
}
.ykMobile__brand{
  display:flex;
  align-items:center;
  gap: 10px;
  color: #0f172a;
  font-weight: 950;
  letter-spacing:.2px;
}
.ykDot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--yk-secondary), var(--yk-accent));
  box-shadow: 0 10px 18px rgba(255,140,0,.18);
}
.ykClose{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(2,6,23,.10);
  background: #fff;
  cursor:pointer;
  font-size: 18px;
}

.ykMobile__nav{
  padding: 12px 2px;
  overflow:auto;
  flex: 1;
}

/* WP menu in mobile */
.ykMobileMenu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.ykMobileMenu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px;
  border-radius: 14px;
  text-decoration:none;
  color: #0b1220;
  font-weight: 900;
  background: #f7f8fb;
  border: 1px solid rgba(2,6,23,.06);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.ykMobileMenu a:hover{
  transform: translateY(-1px);
  background: #f2efff;
  border-color: rgba(126,87,194,.25);
}

/* Active in mobile */
.ykMobileMenu li.current-menu-item > a,
.ykMobileMenu li.current_page_item > a{
  background: linear-gradient(135deg, rgba(126,87,194,.16), rgba(255,140,0,.10));
  border-color: rgba(126,87,194,.28);
}

/* Mobile CTA */
.ykMobileBtn{
  display:block;
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  text-align:center;
  text-decoration:none;
  font-weight: 950;
  color:#fff;
  background: linear-gradient(135deg, var(--yk-accent), #ffb04a);
  box-shadow: 0 14px 32px rgba(255,140,0,.22);
}

/* OPEN STATE */
html.ykMenuOpen .ykOverlay{
  opacity: 1;
  pointer-events: auto;
}
html.ykMenuOpen .ykMobile{
  transform: translateX(0);
}

/* RESPONSIVE */
@media (max-width: 980px){
  .ykNav{ display:none; }
  .ykBurger{ display:flex; }
  .ykBtn{ display:none; }
}

/* ✅ UPDATED MOBILE: keep fixed header height + smaller logo */
@media (max-width: 420px){
  :root{
    --yk-header-h: 64px;
    --yk-logo-h: 44px;
  }

  .ykHeader__inner{ padding: 0 14px; }
  .ykLogo__name{ font-size: 17px; }
}

/* ===============================
   ACTIVE MENU STATE (HARDCODED)
================================ */

/* Desktop active */
.ykMenu a.is-active{
  color: linear-gradient(180deg, rgba(43,58,103,.98), rgba(43,58,103,.92))!important;
  background: rgba(255,255,255,.16);
}
.ykMenu a.is-active::after{
  opacity:1;
  transform: scaleX(1);
}

/* Mobile active */
.ykMobileMenu a.is-active{
  background: linear-gradient(
    135deg,
    rgba(126,87,194,.18),
    rgba(255,140,0,.14)
  );
  border-color: rgba(126,87,194,.35);
}
/* =========================================================
   GLOBAL MOBILE HEADER — SAME ON ALL PAGES (FORCE)
   Put this at the END of style.css
========================================================= */
@media (max-width: 980px){

  /* Force header sizing/layout everywhere */
  header.ykHeader{
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
  }

  header.ykHeader .ykHeader__inner{
    height: 64px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  /* Keep logo clean */
  header.ykHeader .ykLogo{
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  header.ykHeader .ykLogo img{
    height: 36px !important;
    width: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  header.ykHeader .ykLogo__tag{
    display: none !important;       /* hide tagline on all pages mobile */
  }

  header.ykHeader .ykLogo__name{
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Hide CTA in header on mobile (same everywhere) */
  header.ykHeader .ykBtn{
    display: none !important;
  }

  /* Burger fixed size + center */
  header.ykHeader .ykBurger{
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  header.ykHeader .ykBurger span,
  header.ykHeader .ykBurger span::before,
  header.ykHeader .ykBurger span::after{
    height: 2.5px !important;
    border-radius: 999px !important;
  }
}
/* keep name compact */
  header.ykHeader .ykLogo__name{
    font-size: 15.5px !important;
    line-height: 1 !important;
  }

  /* ensure logo area doesn't push burger */
  header.ykHeader .ykLogo__text{
    max-width: 165px;                  /* adjust 150-190 */
    overflow: hidden;
  }
}
/* =========================
   LOGO: only image clickable + hover
========================= */

.ykLogo{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 200px;
  height: 100%;
}

/* Only the <a> around the image is interactive */
.ykLogo__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  line-height: 0;
}

/* hover only on image */
.ykLogo__link:hover img{
  transform: translateY(-1px);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.28));
}

.ykLogo__link img{
  height: var(--yk-logo-h);
  width: auto;
  max-height: 100%;
  object-fit: contain;
  transition: transform .18s ease, filter .18s ease;
}

/* text is NOT link, no hover */
.ykLogo__text{
  line-height:1.05;
  color:#fff;
  user-select:none;
}

.ykLogo__name{
  display:block;
  font-weight:950;
  font-size:18px;
  margin:0;
}

.ykLogo__tag{
  display:block;
  margin-top:3px;
  font-size:12px;
  opacity:.78;
}
/* ==================================================
   GLOBAL PRIMARY BUTTON — ykBtn1
   (Purple pill style like "View Details")
================================================== */

.ykBtn1{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 28px;
  min-height: 48px;

  background: linear-gradient(135deg, #7E57C2, #6A4BBE);
  color: #fff !important;

  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
  text-decoration: none;

  border-radius: 999px; /* pill shape */
  border: none;
  cursor: pointer;

  box-shadow:
    0 10px 24px rgba(126,87,194,.35),
    inset 0 -1px 0 rgba(255,255,255,.25);

  transition: 
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

/* Hover */
.ykBtn1:hover{
   
  transform: translateY(-2px);
  background: linear-gradient(135deg, #8E6BE0, #7358D6);

  box-shadow:
    0 14px 32px rgba(126,87,194,.45),
    inset 0 -1px 0 rgba(255,255,255,.35);
}

/* Active / Click */
.ykBtn1:active{
  transform: translateY(0);
  box-shadow:
    0 6px 16px rgba(126,87,194,.35),
    inset 0 2px 4px rgba(0,0,0,.12);
}

/* Focus (accessibility) */
.ykBtn1:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(126,87,194,.35),
    0 12px 28px rgba(126,87,194,.45);
}

/* =========================================================
   FRONT PAGE CSS (NO ROOT HERE)
   Root variables must come from style.css only.
========================================================= */

/* =========================================================
   PAGE BASE (front page only)
========================================================= */


/* =========================================================
   HERO — FULL CSS (LEFT + RIGHT)
========================================================= */

.hero{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  position:relative;
  margin-top: 18px;
  overflow:hidden;

  border-top: 1px solid rgba(43,58,103,.16);
  border-bottom: 1px solid rgba(43,58,103,.16);

  background: white;
  box-shadow: 0 24px 70px rgba(30,30,46,.12);
}

.hero::before{
  content:"";
  position:absolute;
  inset:-160px;
  background:
    white;
  z-index:0;
}

.hero > *{ position:relative; z-index:1; }

/* ===== Animated bg blobs ===== */
.blob{
  position:absolute;
  filter: blur(34px);
  opacity:.50;
  pointer-events:none;
  z-index:0;
  animation: floaty 10s ease-in-out infinite;
}
.blob.b1{
  width:520px;height:520px;
  left:-180px; top:-210px;
  background: white;
  animation-duration: 11s;
}
.blob.b2{
  width:520px;height:520px;
  right:-220px; top:-180px;
  background:white;
  animation-duration: 12.5s;
}
.blob.b3{
  width:560px;height:560px;
  left:10%; bottom:-340px;
  background:white;
  animation-duration: 13.5s;
}

@keyframes floaty{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,-16px,0) scale(1.03); }
}

.heroGrid{
  max-width:1180px;
  margin:0 auto;

  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 34px;
  align-items:center;

  padding: clamp(28px, 3.6vw, 56px);
}

/* LEFT */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 9px 14px;
  border-radius: 999px;

  background: rgba(255,255,255,.78);
  border: 1px solid rgba(126,87,194,.18);

  color: var(--secondary);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .6px;
  text-transform: uppercase;

  box-shadow: 0 10px 26px rgba(126,87,194,.14);
}

.title{
  margin-top: 16px;
  font-size: clamp(36px, 4.15vw, 58px);
  line-height: 1.03;
  letter-spacing: -1.05px;
  font-weight: 950;
  color:#121225;
  max-width: 18ch;
  text-wrap: balance;
}

.title .grad{
  background: var(--gradSecondary)!important;
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  white-space: nowrap;
}

.heroSub{
  margin-top: 14px;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.34;
  font-weight: 900;
  color: rgba(18,18,37,.92);
  max-width: 58ch;
}

.sub{
  margin-top: 12px;
  max-width: 56ch;
  color: rgba(18,18,37,.72);
  line-height: 1.65;
  font-weight: 650;
  font-size: 16px;
}

/* Bullet points (chips) */
.hero-points{
  margin-top: 16px;
  margin-bottom: 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  max-width: 56ch;
}

.hero-points li{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(43,58,103,.14);
  box-shadow: 0 14px 38px rgba(30,30,46,.08);
  color: rgba(18,18,37,.86);
  font-weight: 800;
  line-height: 1.45;
}

.hero-points strong{ color:#121225; font-weight: 950; }

.hero-points .dot{
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--gradSecondary);
  box-shadow: 0 0 0 5px rgba(126,87,194,.16);
  flex-shrink: 0;
}

.actions{
  margin-top: 10px;
  display:flex;
  gap: 14px;
  align-items:center;
  flex-wrap:wrap;
}

/* Primary CTA */
.btn2{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 13px 20px;
  border-radius: 14px;

  color: white;
  text-decoration:none;
  font-weight: 950;

  background:#7e57c2;

  border: 1.6px solid rgba(43,58,103,.40);
  box-shadow:
    0 16px 44px rgba(43,58,103,.22),
    inset 0 0 0 1px rgba(255,255,255,.60);

  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  isolation:isolate;
}

.btn2::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: inherit;
  
  opacity:0;
  filter: blur(22px);
  z-index:-1;
  transition: opacity .22s ease;
}

.btn2:hover{
  transform: translateY(-3px);
  box-shadow:
    0 26px 68px rgba(43,58,103,.30),
    inset 0 0 0 1px rgba(255,255,255,.78);
}
.btn2:hover::after{ opacity:.78; }

/* Secondary CTA */
.ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 13px 20px;
  border-radius: 14px;

  background:#fb8c00;
  color:white;
  text-decoration:none;
  font-weight: 950;

  border: 1.6px solid rgba(126,87,194,.22);
  box-shadow: 0 12px 34px rgba(30,30,46,.10);

  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.ghost:hover{
  transform: translateY(-3px);
  background: #fb8c00;
  box-shadow: 0 20px 52px rgba(126,87,194,.18);
  color:white;
}
/* RIGHT SIDE (Simple Image Card — NO 3D, NO ANIMATION) */

.scene{
  position:relative;
  height: clamp(320px, 46vw, 520px);
}

/* remove 3D rig behavior */
.rig{
  position:absolute;
  inset:0;
  transform: none !important;
}

/* remove rings completely (no circles) */
.ring{ display:none !important; }

/* remove decorative pills (optional). If you still want soft bg blobs, tell me. */
.pill{ display:none !important; }

/* simple card */
.card3d{
  position:absolute;
  inset: 10% 8% 10% 8%;
  border-radius: 28px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(43,58,103,.14);
  box-shadow: 0 26px 70px rgba(30,30,46,.12);

  overflow:hidden;
  transform: none !important;
  backdrop-filter: none !important;
}

/* image wrapper */
.pic{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}

.pic img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;

  filter: none !important;        /* ✅ no blur, no drop-shadow */
  transform: none !important;
}

/* simple badge */
.badge{
  position:absolute;
  right: 16px;
  bottom: 16px;

  padding: 12px 14px;
  border-radius: 18px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(43,58,103,.14);
  box-shadow: 0 18px 50px rgba(30,30,46,.10);

  display:flex;
  gap:10px;
  align-items:center;

  transform: none !important;
}

/* optional small badge icon box */
.badge .stars{
  background: rgba(255,140,0,.12);
  border: 1px solid rgba(255,140,0,.22);
  color: #FF8C00;
  border-radius: 14px;
  padding: 8px 10px;
  font-weight: 950;
  letter-spacing: .4px;
}

.badge b{
  display:block;
  font-weight:950;
  color:#0f1020;
}
.badge span{
  display:block;
  color: rgba(15,16,32,.65);
  font-weight:800;
  font-size:12px;
}

/* OPTIONAL: simple hover (very minimal) */
.card3d:hover{
  transform: translateY(-4px);
  transition: transform .22s ease, box-shadow .22s ease;
  box-shadow: 0 34px 90px rgba(30,30,46,.14);
}

/* MOBILE */
@media (max-width: 980px){
  .scene{ height: 420px; }
  .card3d{ inset: 8% 6% 10% 6%; }
}
/* =========================================================
   HERO — MOBILE FIX (NO BREAK / NO HORIZONTAL SCROLL)
   Paste at the END of your hero CSS
========================================================= */

/* 1) Prevent 100vw overflow issues */
.hero{
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  overflow-x: clip;            /* modern */
}
@supports not (overflow: clip){
  .hero{ overflow-x:hidden; }
}

/* 2) Stack layout on mobile */
@media (max-width: 980px){
  .heroGrid{
    grid-template-columns: 1fr !important;  /* ✅ stack */
    gap: 22px !important;
    padding: 26px 16px !important;
  }

  .title{
    max-width: 22ch !important;
    white-space: normal !important;
  }

  /* If your gradient span forces single-line, allow wrap */
  .title .grad{
    white-space: normal !important;
  }

  .heroSub, .sub, .hero-points{
    max-width: 100% !important;
  }

  .actions{
    gap: 10px !important;
  }
  .btn2, .ghost{
    width: 100% !important;          /* ✅ full width buttons */
    justify-content: center !important;
  }

  /* Right card area sizing */
  .scene{
    height: 420px !important;
  }
  .card3d{
    inset: 10% 6% 10% 6% !important;
  }

  /* Reduce blur blobs to avoid overflow paint */
  .blob{
    filter: blur(26px) !important;
    opacity: .42 !important;
  }
  .blob.b1{ left:-260px !important; top:-260px !important; }
  .blob.b2{ right:-280px !important; top:-260px !important; }
  .blob.b3{ left:-40px !important; bottom:-420px !important; }
}

/* 3) Extra small phones */
@media (max-width: 480px){
  .heroGrid{ padding: 22px 14px !important; }
  .scene{ height: 380px !important; }
  .badge{ left: 14px !important; right: 14px !important; }
}

/* =========================================================
   TRUST INDICATORS
========================================================= */

.yk-trust{
  position: relative;
  padding: clamp(2px, 0vw, 54px) 0;
}

.yk-trust__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

.yk-trust__head{
  max-width: 640px;
  margin-bottom: 26px;
}

.yk-trust__title{
  margin: 0;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.6px;
  color: #121225;
}
.yk-trust__grad{
  background: var(--gradSecondary);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.yk-trust__sub{
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 650;
  color: rgba(18,18,37,.70);
  max-width: 52ch;
}

.yk-trust__grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.yk-trustCard{
  position: relative;
  border-radius: 18px;
  padding: 16px 14px 14px;

  background: rgba(255,255,255,.68);
  border: 1px solid rgba(43,58,103,.14);
  backdrop-filter: blur(10px);

  box-shadow: 0 16px 44px rgba(30,30,46,.08), inset 0 0 0 1px rgba(255,255,255,.50);

  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow:hidden;
}

.yk-trustCard::before{
  content:"";
  position:absolute;
  inset:-80px;
  background:
    radial-gradient(380px 220px at 18% 22%, rgba(126,87,194,.18), transparent 65%),
    radial-gradient(320px 220px at 88% 28%, rgba(43,58,103,.14), transparent 70%);
  opacity:.55;
  pointer-events:none;
}

.yk-trustCard:hover{
  transform: translateY(-6px);
  border-color: rgba(126,87,194,.22);
  box-shadow:
    0 24px 70px rgba(126,87,194,.16),
    0 18px 44px rgba(30,30,46,.10),
    inset 0 0 0 1px rgba(255,255,255,.62);
}

.yk-trustIcon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;

  color: var(--secondary);
  background: linear-gradient(180deg, rgba(126,87,194,.18), rgba(255,255,255,.55));
  border: 1px solid rgba(126,87,194,.22);

  box-shadow: 0 14px 32px rgba(126,87,194,.16), inset 0 0 0 1px rgba(255,255,255,.65);
  margin-bottom: 12px;
}

.yk-trustIcon svg{ width: 22px; height: 22px; }

.yk-trustCard h3{
  margin: 0;
  font-size: 14px;
  letter-spacing: -.2px;
  font-weight: 950;
  color: #121225;
}

.yk-trustCard p{
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 650;
  color: rgba(18,18,37,.70);
}

@media (max-width: 1100px){
  .yk-trust__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 740px){
  .yk-trust{ padding: 22px 0 34px; }
  .yk-trust__grid{ grid-template-columns: 1fr; gap: 12px; }
  .yk-trustCard{ padding: 16px; }
}

/* =========================================================
   PROBLEM / PAIN POINTS
========================================================= */

.yk-pain{
  position: relative;
  padding: clamp(34px, 5vw, 72px) 0;
}

.yk-pain__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

.yk-pain__grid{
  position: relative;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 24px;
  align-items: start;

  border-radius: 26px;
  padding: clamp(18px, 2.6vw, 34px);

  background: rgba(255,255,255,.64);
  border: 1px solid rgba(43,58,103,.14);
  box-shadow: 0 28px 80px rgba(30,30,46,.10);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.yk-pain__grid::before{
  content:"";
  position:absolute;
  inset:-140px;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(126,87,194,.18), transparent 62%),
    radial-gradient(900px 520px at 88% 20%, rgba(43,58,103,.14), transparent 66%),
    radial-gradient(720px 460px at 50% 92%, rgba(255,140,0,.10), transparent 62%);
  pointer-events:none;
  opacity: .80;
}

.yk-pain__grid::after{
  content:"";
  position:absolute;
  width: 14px;
  height: 14px;
  right: 18px;
  top: 18px;
  border-radius: 999px;
  background: var(--gradAccent);
  box-shadow: 0 0 0 10px rgba(255,140,0,.14);
  animation: ykPulse 2.4s ease-in-out infinite;
  pointer-events:none;
}

@keyframes ykPulse{
  0%,100%{ transform: scale(1); opacity:.95; }
  50%{ transform: scale(1.15); opacity:.7; }
}

.yk-pain__copy,
.yk-pain__list{ position: relative; z-index: 1; }

.yk-pain__kicker{
  display:inline-flex;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(126,87,194,.18);
  color: var(--secondary);
  font-weight: 950;
  font-size: 15px;
  letter-spacing: .6px;
  text-transform: uppercase;
  box-shadow: 0 12px 28px rgba(126,87,194,.14);
}

.yk-pain__title{
  margin: 14px 0 0;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.7px;
  font-weight: 950;
  color: #121225;
  max-width: 18ch;
  text-wrap: balance;
}

.yk-pain__grad{
  background: var(--gradSecondary);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  white-space: nowrap;
}

.yk-pain__sub{
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 650;
  color: rgba(18,18,37,.72);
  max-width: 50ch;
}

.yk-pain__close{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(43,58,103,.14);
  box-shadow: 0 14px 36px rgba(30,30,46,.08);
  color: rgba(18,18,37,.80);
  font-weight: 750;
}

.yk-pain__list{
  display: grid;
  gap: 12px;
}

.yk-painCard{
  display:flex;
  gap: 12px;
  align-items:flex-start;

  padding: 14px 14px;
  border-radius: 18px;

  background: rgba(255,255,255,.72);
  border: 1px solid rgba(43,58,103,.12);
  box-shadow: 0 16px 42px rgba(30,30,46,.08);

  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position: relative;
  overflow: hidden;
}

.yk-painCard::before{
  content:"";
  position:absolute;
  inset:-80px;
  background: radial-gradient(360px 240px at 18% 20%, rgba(126,87,194,.14), transparent 65%);
  opacity:.55;
  pointer-events:none;
}

.yk-painCard:hover{
  transform: translateY(-5px);
  border-color: rgba(126,87,194,.20);
  box-shadow: 0 26px 70px rgba(126,87,194,.16), 0 18px 44px rgba(30,30,46,.10);
}

.yk-painIco{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: linear-gradient(180deg, rgba(126,87,194,.16), rgba(255,255,255,.55));
  border: 1px solid rgba(126,87,194,.22);
  box-shadow: 0 14px 32px rgba(126,87,194,.14), inset 0 0 0 1px rgba(255,255,255,.60);

  font-size: 18px;
  flex: 0 0 auto;
}

.yk-painCard h3{
  margin: 1px 0 0;
  font-size: 14px;
  font-weight: 950;
  color: #121225;
  letter-spacing: -0.2px;
}

.yk-painCard p{
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 650;
  color: rgba(18,18,37,.70);
}

@media (max-width: 980px){
  .yk-pain__grid{ grid-template-columns: 1fr; gap: 16px; }
  .yk-pain__title{ max-width: 100%; }
}

/* =========================================================
   INDUSTRIES — ORBIT + PANEL
========================================================= */

.yk-industries{
  position:relative;
  padding: clamp(38px, 6vw, 84px) 0;
}

.yk-industries__inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
}

.yk-industries__head{
  max-width:720px;
  margin-bottom: 22px;
}

.yk-industries__title{
  margin:0;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: -0.7px;
  color:#121225;
}

.yk-industries__grad{
  background: var(--gradSecondary);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.yk-industries__sub{
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 650;
  color: rgba(18,18,37,.70);
}

.yk-industries__layout{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 18px;
  align-items: stretch;
}

/* LEFT orbit */
.yk-orbit{
  position:relative;
  border-radius: 28px;
  padding: 18px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(43,58,103,.14);
  backdrop-filter: blur(12px);
  box-shadow: 0 26px 76px rgba(30,30,46,.10);
  overflow:hidden;
}

.yk-orbit__rail{
  position:absolute;
  inset:-120px -120px -120px -80px;
  pointer-events:none;
  opacity:.95;
}

.yk-orbit__rail::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 999px;
  border: 2px dashed rgba(126,87,194,.22);
  transform: rotate(-18deg);
}

.yk-orbit__glow{
  position:absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--gradAccent);
  box-shadow: 0 0 0 10px rgba(255,140,0,.14);
  left: 22%;
  top: 22%;
  animation: ykOrbitDot 4.8s linear infinite;
}

@keyframes ykOrbitDot{
  0%   { transform: translate(0,0) }
  25%  { transform: translate(120px, 40px) }
  50%  { transform: translate(220px, 160px) }
  75%  { transform: translate(120px, 260px) }
  100% { transform: translate(0,0) }
}

.yk-orbit__list{
  position:relative;
  display:grid;
  gap: 10px;
  z-index:1;
}

.yk-orbItem{
  display:flex;
  align-items:center;
  gap: 12px;

  width:100%;
  text-align:left;

  padding: 12px 14px;
  border-radius: 999px;
  cursor:pointer;

  background: rgba(255,255,255,.76);
  border: 1px solid rgba(43,58,103,.12);
  box-shadow: 0 14px 34px rgba(30,30,46,.08);

  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.yk-orbItem:hover{
  transform: translateY(-3px);
  border-color: rgba(126,87,194,.22);
  box-shadow: 0 24px 60px rgba(126,87,194,.14);
}

.yk-orbItem__ico{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: linear-gradient(180deg, rgba(126,87,194,.14), rgba(255,255,255,.62));
  border: 1px solid rgba(126,87,194,.18);
  box-shadow: 0 14px 32px rgba(126,87,194,.12);
  font-size: 18px;
}

.yk-orbItem__text{
  font-weight: 950;
  color: #121225;
  letter-spacing: -0.2px;
}

.yk-orbItem.is-active{
  border-color: rgba(126,87,194,.28);
  box-shadow: 0 28px 70px rgba(126,87,194,.16), inset 0 0 0 1px rgba(255,255,255,.65);
  position:relative;
}

.yk-orbItem.is-active::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 999px;
  background: var(--gradSecondary);
  filter: blur(22px);
  opacity:.18;
  z-index:-1;
}

.yk-orbitCta{
  margin-top: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 13px 18px;
  border-radius: 16px;
  text-decoration:none;
  font-weight: 950;

  color: white;
  background: #7e57c2;
  border: 1px solid rgba(43,58,103,.35);
  box-shadow: 0 18px 50px rgba(43,58,103,.18);

  position: relative;
  isolation:isolate;
  transition: transform .22s ease, box-shadow .22s ease;
}

.yk-orbitCta::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: inherit;
  
  filter: blur(22px);
  opacity:0;
  z-index:-1;
  transition: opacity .22s ease;
}

.yk-orbitCta:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 70px rgba(43,58,103,.26);
}
.yk-orbitCta:hover::after{ opacity:.65; }

/* RIGHT panel */
.yk-panelX{
  display:flex;
  flex-direction:column;
  gap: 12px;

  border-radius: 28px;
  padding: clamp(16px, 2.4vw, 28px);

  background: rgba(255,255,255,.64);
  border: 1px solid rgba(43,58,103,.14);
  backdrop-filter: blur(12px);
  box-shadow: 0 26px 76px rgba(30,30,46,.10);
}

.yk-panelX__thumb{
  width: 100%;
  max-width: 320px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(43,58,103,.14);
  box-shadow: 0 12px 32px rgba(30,30,46,.12);
}

.yk-panelX__thumb img{
  width:100%;
  display:block;
  object-fit: cover;
}

.yk-panelX__title{
  margin:0;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -0.3px;
  color:#121225;
}

.yk-panelX__desc{
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 650;
  color: rgba(18,18,37,.72);
  max-width: 46ch;
}

.yk-panelX__points{
  margin-top: 6px;
  padding-left: 18px;
  list-style: disc;
  display:grid;
  gap: 6px;
}

.yk-panelX__points li{
  font-size: 14px;
  font-weight: 800;
  color: rgba(18,18,37,.88);
}

@media (max-width: 980px){
  .yk-industries__layout{ grid-template-columns: 1fr; }
  .yk-orbit__rail{ opacity:.45; }
  .yk-panelX__thumb{ max-width: 100%; }
}
/* =========================================================
   SERVICES — Clean Glass Cards (Simple Hover, No Floating)
========================================================= */

.yk-services{
    margin-top:-66px;
  position:relative;
  padding: clamp(44px, 5vw, 92px) 0;
}

.yk-services__inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
}

.yk-services__head{
  max-width:760px;
  margin-bottom: 18px;
}

.yk-services__kicker{
  display:inline-flex;
  align-items:center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(126,87,194,.18);
 
  font-weight: 950;
  font-size: 15px;
  letter-spacing:.6px;
}

.yk-services__title{
  margin: 14px 0 0;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.8px;
  font-weight: 980;
  color:#7e57c2; /* heading color */
}

.yk-services__sub{
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 650;
  color: rgba(18,18,37,.72);
}

/* grid */
.yk-services__grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 980px){
  .yk-services__grid{ grid-template-columns: 1fr; }
}

/* card */
.yk-svc{
  position:relative;
  border-radius: 28px;
  padding: 16px 16px 18px;

  background: rgba(255,255,255,.70);
  border: 1px solid rgba(43,58,103,.14);
  backdrop-filter: blur(10px);

  box-shadow: 0 22px 60px rgba(30,30,46,.10);
  overflow:hidden;
  isolation:isolate;

  transform: none;               /* ✅ no floating movement */
  animation: none !important;    /* ✅ force stop */
  will-change: transform;

  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* subtle background glow (static) */
.yk-svc::before{
  content:"";
  position:absolute;
  inset:-160px;
  background:
    radial-gradient(900px 420px at 20% 18%, rgba(126,87,194,.12), transparent 62%),
    radial-gradient(900px 420px at 85% 20%, rgba(43,58,103,.10), transparent 66%),
    radial-gradient(700px 380px at 55% 92%, rgba(255,140,0,.08), transparent 62%);
  opacity:.9;
  pointer-events:none;
  z-index:-2;
}

/* remove extra heavy overlay */
.yk-svc::after{ display:none; }

/* remove shine animation completely */
.yk-svc__shine{ display:none; }

.yk-svc__media{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(43,58,103,.14);
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 36px rgba(30,30,46,.10);
}

.yk-svc__media img{
  width:100%;
  height: 170px;
  object-fit: cover;
  display:block;
  transition: transform .22s ease;
}

.yk-svc__title{
  margin: 14px 4px 0;
  font-size: 18px;
  font-weight: 980;
  letter-spacing: -0.3px;
  color:#121225;
}

.yk-svc__desc{
  margin: 8px 4px 0;
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 650;
  color: rgba(18,18,37,.72);
}

.yk-svc__points{
  margin: 12px 4px 0;
  padding-left: 18px;
  list-style: disc;
  display:grid;
  gap: 8px;
}

.yk-svc__points li{
  font-size: 14px;
  font-weight: 850;
  color: rgba(18,18,37,.88);
}

.yk-svc__actions{
  margin-top: 14px;
  padding: 0 4px;
}

.yk-svc__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 950;
  color: #fff;

  background:#7e57c2;                 /* ✅ your button color */
  border: 1px solid rgba(126,87,194,.35);
  box-shadow: 0 14px 36px rgba(126,87,194,.22);

  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* ✅ SIMPLE HOVER ONLY */
.yk-svc:hover{
  transform: translateY(-6px);
  border-color: rgba(126,87,194,.24);
  box-shadow: 0 34px 90px rgba(30,30,46,.14);
}

.yk-svc:hover .yk-svc__media img{
  transform: scale(1.03);
}

.yk-svc:hover .yk-svc__btn{
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 22px 60px rgba(126,87,194,.28);
}

/* reveal helper (keep) */
.yk-reveal{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}
.yk-reveal.is-in{
  opacity:1;
  transform: translateY(0);
}

@media (max-width: 980px){
  .yk-svc__media img{ height: 190px; }
  .yk-svc__btn{ width:100%; }
}

/* =========================================================
   YK FLOW – Arrow Steps (ISOLATED VERSION)
========================================================= */

/* ===== FULL WIDTH BACKGROUND ===== */
.yk-flow{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  overflow-x:clip;
  padding:clamp(50px,0vw,110px) 0;
  background:
    radial-gradient(900px 420px at 18% 22%, rgba(126,87,194,.14), transparent 62%),
    radial-gradient(900px 420px at 85% 20%, rgba(43,58,103,.12), transparent 64%),
    linear-gradient(180deg,#fff,rgba(126,87,194,.12));
  border-top:1px solid rgba(43,58,103,.10);
  border-bottom:1px solid rgba(43,58,103,.10);
}

.yk-flow::before{
  content:"";
  position:absolute;
  inset:-240px;
  background:
    radial-gradient(900px 420px at 55% 90%, rgba(255,140,0,.12), transparent 62%);
  z-index:0;
}

.yk-flow__inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
  position:relative;
  z-index:2;
}

/* ================= HEAD ================= */

.yk-flow__head{
  max-width:820px;
  margin-bottom:38px;
}

.yk-flow__badge{
  display:inline-flex;
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(126,87,194,.18);
  font-size:12px;
  font-weight:900;
  letter-spacing:.5px;
  color:#6b4bbd;
}

.yk-flow__title{
  margin:14px 0 8px;
  font-size:clamp(30px,3.4vw,46px);
  font-weight:1000;
  letter-spacing:-.02em;
  color:#7e57c2;
}

.yk-flow__sub{
  max-width:62ch;
  font-size:16px;
  font-weight:650;
  color:rgba(18,18,37,.65);
}

/* ================= GRID ================= */

.yk-flow__steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

@media (min-width:980px){
  .yk-flow-step:nth-child(2){ margin-top:26px; }
  .yk-flow-step:nth-child(3){ margin-top:52px; }
  .yk-flow-step:nth-child(4){ margin-top:78px; }
}

/* ================= STEP ================= */

.yk-flow-step{
  border-radius:18px;
  transition:transform .25s ease, box-shadow .25s ease;
}

/* TOP */
.yk-flow-step__top{
  height:60px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(126,87,194,.18),#fff);
  border:1px solid rgba(43,58,103,.14);
  box-shadow:0 18px 40px rgba(30,30,46,.14);
  position:relative;
}

.yk-flow-step__top::after{
  content:"";
  position:absolute;
  right:-28px;
  top:50%;
  transform:translateY(-50%);
  border-top:30px solid transparent;
  border-bottom:30px solid transparent;
  border-left:28px solid rgba(126,87,194,.22);
}

.yk-flow-step__label{
  font-size:20px;
  font-weight:1000;
  color:#2b2f55;
}

.yk-flow-step__icon{
  width:36px;
  height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid rgba(43,58,103,.14);
  box-shadow:0 12px 26px rgba(30,30,46,.12);
}

/* BODY */
.yk-flow-step__body{
  background:#fff;
  border:1px solid rgba(43,58,103,.14);
  border-top:0;
  border-radius:0 0 18px 18px;
  padding:16px;
  box-shadow:0 22px 60px rgba(30,30,46,.14);
}

.yk-flow-step__no{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:rgba(126,87,194,.12);
  color:#6b4bbd;
  margin-bottom:8px;
}

.yk-flow-step__body h3{
  margin:0 0 6px;
  font-size:16px;
  font-weight:1000;
  color:#6b4bbd;
}

.yk-flow-step__body p{
  margin:0;
  font-size:13px;
  line-height:1.65;
  font-weight:650;
  color:rgba(18,18,37,.65);
}

/* HOVER */
.yk-flow-step:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 90px rgba(126,87,194,.28);
}

/* MOBILE */
@media(max-width:980px){
  .yk-flow__steps{
    grid-template-columns:1fr;
    max-width:560px;
    margin:auto;
  }
}

/* =========================================================
   YK WHY – PREMIUM DIFFERENTIATION (ACF BLOCK READY)
========================================================= */

/* ===== SECTION ===== */

.ykdiff{
  padding: clamp(60px,7vw,100px) 0;
  background:#fff;
}

.ykdiff__inner{
  max-width:1180px;
  margin:auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:34px;
}

@media(max-width:980px){
  .ykdiff__inner{grid-template-columns:1fr;}
}

/* LEFT */

.ykdiff__pill{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  color:#7E57C2;
  background:#f2ecff;
}

.ykdiff__title{
  margin:16px 0 8px;
  font-size:clamp(32px,3.5vw,46px);
  font-weight:900;
}

.ykdiff__sub{
  font-size:17px;
  line-height:1.6;
  color:#555;
}

.ykdiff__actions{
  margin-top:20px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.ykdiff__btn{
  padding:14px 20px;
  border-radius:14px;
  font-weight:800;
  text-decoration:none;
  transition:.2s;
}

.ykdiff__btn--primary{
  background:#7E57C2;
  color:#fff;
}

.ykdiff__btn--secondary{
  background:#FF8C00;
  color:#111;
}

/* RIGHT PANEL */

.ykdiff__right{
  display:flex;
  flex-direction:column;
  gap:16px;
  background:#fafafe;
  padding:18px;
  border-radius:22px;
}

/* CARD */

.ykdiff-card{
  display:flex;
  gap:16px;
  padding:18px;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  transition:.2s;
}

.ykdiff-card:hover{
  transform:translateY(-2px);
}

.ykdiff-card__num{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-weight:900;
  color:#fff;
  background:#7E57C2;
  flex-shrink:0;
}

.ykdiff-card.is-hot .ykdiff-card__num{
  background:#FF8C00;
}

.ykdiff-card__content h4{
  margin:0 0 4px;
  font-size:17px;
  font-weight:800;
}

.ykdiff-card__content p{
  margin:0;
  font-size:14px;
  color:#555;
}



/* ================================
   WHY – TYPOGRAPHY & COLOR FIX
   (MATCHING REFERENCE DESIGN)
================================ */

/* Badge */
.yk-pill{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .12em;
  color: #7E57C2;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(126,87,194,.25);
}

/* Main Heading */
.yk-why__title{
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 1000;
  letter-spacing: -1px;
  line-height: 1.08;
  color: #121225;
}

.yk-why__title span,
.yk-why__title strong{
  background: linear-gradient(135deg, #7E57C2, #2B3A67);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Sub text */
.yk-why__sub{
  font-size: 17px;
  font-weight: 650;
  line-height: 1.65;
  color: rgba(18,18,37,.72);
  max-width: 58ch;
}

/* ================================
   RIGHT CARDS TEXT FIX
================================ */

.yk-whyCard__content h4{
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: -0.3px;
  margin: 0 0 6px;
  color: #121225;
}

/* Purple titles (match left) */
.yk-whyCard:not(.is-hot) h4{
  color: #7E57C2;
}

/* Orange highlighted card */
.yk-whyCard.is-hot h4{
  color: #FF8C00;
}

/* Card paragraph */
.yk-whyCard__content p{
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.55;
  color: rgba(18,18,37,.70);
}

/* Number circle */
.yk-whyCard__num{
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .6px;
}

/* ================================
   BUTTON TEXT MATCH
================================ */

.yk-btn,
.yk-btn--primary,
.yk-btn--secondary{
  font-weight: 950;
  font-size: 15px;
  letter-spacing: .2px;
}

/* ================================
   FORCE IMAGE-LIKE BLACK TEXT
================================ */

/* REMOVE ALL GRADIENT TEXT */
.yk-why__title span,
.yk-why__title strong{
  background: none !important;
  -webkit-background-clip: unset !important;
  color: #0F0F1A !important;
}

/* MAIN HEADING */
.yk-why__title{
  color: #0F0F1A !important; /* deep black */
}

/* SUB TEXT */
.yk-why__sub{
  color: #4A4A5E !important; /* dark grey like image */
}

/* RIGHT CARD TITLES */
.yk-whyCard__content h4{
  color: #0F0F1A !important;
  font-weight: 800;
}

/* RIGHT CARD DESCRIPTION */
.yk-whyCard__content p{
  color: #5A5A70 !important;
}

/* NUMBER CIRCLE TEXT */
.yk-whyCard__num{
  color: #ffffff !important;
}

/* BUTTON TEXT */
.yk-btn,
.yk-btn--primary,
.yk-btn--secondary{
  color: #ffffff !important;
}

/* =========================================================
   SEO • LOCAL VISIBILITY (MATCHED DESIGN)
========================================================= */

.yk-seo{
  position:relative;
  padding: clamp(56px, 0vw, 96px) 0;
  overflow:hidden;
  background:#fff;
}

/* soft background glow */
.yk-seo::before{
  content:"";
  position:absolute;
  inset:-220px;
  background:
    radial-gradient(900px 420px at 15% 18%, rgba(126,87,194,.14), transparent 62%),
    radial-gradient(900px 420px at 85% 22%, rgba(255,140,0,.12), transparent 64%),
    radial-gradient(800px 420px at 55% 90%, rgba(43,58,103,.10), transparent 62%);
  pointer-events:none;
}

.yk-seo__inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
  position:relative;
  z-index:1;

  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 32px;
}

@media(max-width:980px){
  .yk-seo__inner{ grid-template-columns:1fr; }
}

/* ================= LEFT ================= */

.yk-seo__left{
  max-width: 620px;
}

.yk-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(126,87,194,.18);
  font-weight: 950;
  font-size: 14px;
  letter-spacing:.08em;
  color:#7E57C2;
}

.yk-seo__title{
  margin: 14px 0 8px;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.1;
  font-weight: 1000;
  letter-spacing:-.8px;
  color:#121225;
}

.yk-seo__desc{
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 650;
  color: rgba(18,18,37,.72);
  max-width: 65ch;
}

/* checklist */
.yk-seo__list{
  margin-top: 16px;
  padding:0;
  list-style:none;
  display:grid;
  gap: 10px;
}

.yk-seo__list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size: 15px;
  font-weight: 700;
  color: rgba(18,18,37,.78);
}

.yk-seo__list li::before{
  content:"✓";
  width:18px;
  height:18px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:1000;
  color:#2B3A67;
  background: linear-gradient(180deg, rgba(126,87,194,.18), rgba(255,255,255,.6));
  border:1px solid rgba(126,87,194,.22);
  box-shadow: 0 10px 26px rgba(126,87,194,.12);
}

.yk-seo__list li.is-hot::before{
  color:#FF8C00;
  background: linear-gradient(180deg, rgba(255,140,0,.22), rgba(255,255,255,.6));
  border-color: rgba(255,140,0,.28);
  box-shadow: 0 12px 30px rgba(255,140,0,.16);
}

/* ================= RIGHT ================= */

.yk-seo__right{
  position:relative;
}

/* tabs */
.yk-seo__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
}

.yk-seo__tabs span{
  padding: 8px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(126,87,194,.18);
  font-weight:850;
  font-size:13px;
  color: rgba(18,18,37,.78);
  transition:.2s ease;
}
.yk-seo__tabs span:hover{
  transform: translateY(-2px);
  box-shadow:0 18px 40px rgba(126,87,194,.14);
}

/* glass card */
.yk-seo__card{
  position:relative;
  border-radius: 28px;
  padding: 16px;
  background: rgba(255,255,255,.70);
  border:1px solid rgba(43,58,103,.14);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 90px rgba(30,30,46,.12);
  overflow:hidden;
}

.yk-seo__card::before{
  content:"";
  position:absolute;
  inset:-140px;
  background:
    radial-gradient(520px 320px at 18% 18%, rgba(126,87,194,.18), transparent 62%),
    radial-gradient(520px 320px at 82% 24%, rgba(255,140,0,.12), transparent 62%);
  pointer-events:none;
}

/* feature rows */
.yk-seo__feature{
  position:relative;
  z-index:1;
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  border:1px solid rgba(43,58,103,.10);
}
.yk-seo__feature + .yk-seo__feature{ margin-top:10px; }

.yk-seo__icon{
  width:42px;
  height:42px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  background: linear-gradient(180deg, rgba(126,87,194,.16), rgba(255,255,255,.62));
  border:1px solid rgba(126,87,194,.22);
  box-shadow:0 14px 32px rgba(126,87,194,.12);
  flex:0 0 auto;
}

.yk-seo__feature h4{
  margin:0;
  font-size:17px;
  font-weight:1000;
  color:#121225;
}

.yk-seo__feature p{
  margin-top:4px;
  font-size:14px;
  line-height:1.5;
  font-weight:650;
  color: rgba(18,18,37,.72);
}

/* ================================
   REMOVE ALL BACKGROUND / GLOWS
================================ */

/* section bg remove */
.yk-seo{
  background: transparent !important;
}

/* glow layer remove */
.yk-seo::before{
  display: none !important;
}

/* right glass panel bg simplify */
.yk-seo__card{
  background: #ffffff !important;
  backdrop-filter: none !important;
}

/* remove panel glow */
.yk-seo__card::before{
  display: none !important;
}

/* tabs bg clean */
.yk-seo__tabs span{
  background: #fff !important;
}

/* feature rows clean */
.yk-seo__feature{
  background: #fff !important;
}

/* =========================================================
   PRIMARY CTA — High Intent
========================================================= */

.yk-cta{
  position:relative;
  padding: clamp(34px, 5vw, 72px) 0;
}

.yk-cta__inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
}

.yk-ctaBox{
  position:relative;
  border-radius: 28px;
  padding: clamp(18px, 2.8vw, 32px);

  background: rgba(255,255,255,.64);
  border: 1px solid rgba(43,58,103,.14);
  backdrop-filter: blur(12px);

  box-shadow: 0 28px 90px rgba(30,30,46,.12);
  overflow:hidden;
  text-align:center;
}

.yk-ctaGlow{
  position:absolute;
  inset:-160px;
  background:
    radial-gradient(720px 420px at 20% 18%, rgba(43,58,103,.18), transparent 62%),
    radial-gradient(720px 420px at 82% 24%, rgba(126,87,194,.18), transparent 66%),
    radial-gradient(720px 480px at 50% 92%, rgba(255,140,0,.14), transparent 62%);
  opacity:.9;
  pointer-events:none;
}

.yk-ctaTop{ position:relative; z-index:1; }

.yk-ctaPill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(126,87,194,.18);
  color: var(--secondary);
  font-weight: 950;
  font-size: 12px;
  letter-spacing:.6px;
}

.yk-ctaDot{
  width:9px;height:9px;border-radius:999px;
  background: var(--gradAccent);
  box-shadow: 0 0 0 4px rgba(255,140,0,.14);
}

.yk-ctaTitle{
  margin: 14px 0 0;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.8px;
  font-weight: 1000;
  color:#121225;
}

.yk-ctaSub{
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.7;
  font-weight: 650;
  color: rgba(18,18,37,.72);
}

.yk-ctaActions{
  position:relative;
  z-index:1;
  margin-top: 16px;
  display:flex;
  justify-content:center;
  gap: 14px;
  flex-wrap:wrap;
}

.yk-ctaBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 13px 18px;
  border-radius: 16px;
  text-decoration:none;
  font-weight: 950;
  color: white;

  background: #7e57c2;
  border: 1px solid rgba(43,58,103,.35);
  box-shadow: 0 18px 50px rgba(43,58,103,.18);

  transition: transform .22s ease, box-shadow .22s ease;
}

.yk-ctaBtn:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 70px rgba(43,58,103,.26);
}

.yk-ctaGhost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 13px 18px;
  border-radius: 16px;
  text-decoration:none;
  font-weight: 950;
  color: white;

  background: #fb8c00;
  border: 1px solid rgba(255,140,0,.34);
  box-shadow: 0 18px 50px rgba(255,140,0,.16);

  transition: transform .22s ease, box-shadow .22s ease;
}

.yk-ctaGhost:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 70px rgba(255,140,0,.22);
}

.yk-ctaTrust{
  position:relative;
  z-index:1;
  margin-top: 14px;
  color: rgba(18,18,37,.70);
  font-weight: 700;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}

.yk-ctaShield{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(126,87,194,.16), rgba(255,255,255,.60));
  border: 1px solid rgba(126,87,194,.18);
  box-shadow: 0 12px 28px rgba(126,87,194,.12);
  position:relative;
}

.yk-ctaShield::after{
  content:"";
  position:absolute;
  left: 6px;
  top: 4px;
  width: 5px;
  height: 9px;
  border-right: 2px solid rgba(43,58,103,.70);
  border-bottom: 2px solid rgba(43,58,103,.70);
  transform: rotate(38deg);
}

@media (max-width: 980px){
  .yk-ctaActions a{ width: 100%; }
}
.yk-trust__title,
.yk-pain__title,
.yk-industries__title,
.yk-services__title,
.yk-why__title,
.yk-seo__title,
.yk-ctaTitle,
.peRail__title,
.title{
  color: #7E57C2 !important;
}

/* stop gradient text if you used it anywhere */
.yk-trust__grad,
.yk-pain__grad,
.yk-industries__grad,
.yk-why__grad,
.yk-seo__grad,
.title .grad{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #7E57C2 !important;
}
/* =========================================================
   FRONT PAGE — FORCE SECONDARY COLOR (#7E57C2)
   (Overrides all section-level styles)
========================================================= */

/* -----------------------------
   HEADINGS (ALL SECTIONS)
------------------------------ */
.front-page h1,
.front-page h2,
.front-page h3,
.front-page h4,
.front-page h5,
.front-page h6,
.front-page .title,
.front-page .yk-trust__title,
.front-page .yk-pain__title,
.front-page .yk-industries__title,
.front-page .yk-services__title,
.front-page  .yk-why__title,
.front-page .yk-seo__title,
.front-page .yk-ctaTitle,
.front-page .peRail__title{
  color: #7E57C2 !important;
}

/* REMOVE gradient text on front page */
.front-page .grad,
.front-page [class*="__grad"]{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #7E57C2 !important;
}

/* -----------------------------
   HOVER STATES (TEXT)
------------------------------ */
.front-page a:hover,
.front-page .menu a:hover,
.front-page .st-nav__link:hover,
.front-page .yk-chip:hover,
.front-page .yk-orbItem:hover{
  color: #7E57C2 !important;
}

/* underline / active indicators */
.front-page .st-nav__link::after,
.front-page .yk-whyItem::after{
  background: #7E57C2 !important;
}

/* -----------------------------
   UI ELEMENTS (BORDERS + ICONS)
------------------------------ */
.front-page button,
.front-page .card,
.front-page .panel,
.front-page .box,
.front-page .yk-svc,
.front-page .yk-trustCard,
.front-page .yk-painCard,
.front-page .yk-orbit,
.front-page .yk-panelX{
  border-color: rgba(126,87,194,.35) !important;
}

/* icons */
.front-page svg,
.front-page svg path,
.front-page i{
  color: #7E57C2 !important;
  fill: currentColor !important;
}

/* pills / chips / badges */
.front-page .badge,
.front-page .tag,
.front-page .pill,
.front-page .yk-chip,
.front-page .pePill{
  color: #7E57C2 !important;
  border-color: rgba(126,87,194,.35) !important;
}

/* -----------------------------
   FOCUS STATES
------------------------------ */
.front-page a:focus,
.front-page button:focus,
.front-page input:focus,
.front-page textarea:focus{
  outline: none;
  border-color: #7E57C2 !important;
  box-shadow: 0 0 0 3px rgba(126,87,194,.22) !important;
}

/* =========================================================
   SERVICES PAGE (page-services.php) — MOTION / PREMIUM / WOW
   Scoped to avoid affecting other pages
========================================================= */

.page-template-page-services-php{
  background:#fff;
}

/* UTILITIES */
.page-template-page-services-php .yk-wrap,
.page-template-page-services-php .ykWrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
}

/* Services-only primary button (old .yk-btn) */
.page-template-page-services-php .yk-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:20px;
  font-weight:950;
  text-decoration:none;
  color:#fff;
  background:#7E57C2;
  box-shadow:0 20px 70px rgba(126,87,194,.45);
  transition:.35s cubic-bezier(.16,.84,.44,1);
}
.page-template-page-services-php .yk-btn:hover{
  transform:translateY(-6px) scale(1.04);
  box-shadow:0 36px 110px rgba(126,87,194,.55);
}

/* =========================================================
   HERO
========================================================= */
.page-template-page-services-php .ykHero{
  position:relative;
  padding: clamp(34px, 4.2vw, 62px) 0 clamp(22px, 3vw, 42px);
  border-bottom: 1px solid rgba(43,58,103,.10);
  overflow:hidden;
  background:#fff;
  isolation:isolate;
}
.page-template-page-services-php .ykHero::before{
  content:"";
  position:absolute;
  inset:-220px;
  background:
    radial-gradient(900px 520px at 16% 18%, rgba(126,87,194,.16), transparent 62%),
    radial-gradient(900px 520px at 88% 18%, rgba(43,58,103,.14), transparent 64%),
    radial-gradient(720px 520px at 50% 92%, rgba(255,140,0,.12), transparent 62%);
  pointer-events:none;
  z-index:0;
}

.page-template-page-services-php .ykHeroGrid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items:center;
}
@media(max-width:980px){
  .page-template-page-services-php .ykHeroGrid{ grid-template-columns:1fr; gap:16px; }
}

.page-template-page-services-php .ykKicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(126,87,194,.18);
  box-shadow: 0 14px 32px rgba(126,87,194,.10);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--secondary);
}
.page-template-page-services-php .ykKickerDot{
  width:9px;height:9px;border-radius:999px;
  background: var(--secondary);
  box-shadow: 0 0 0 5px rgba(126,87,194,.16);
}

.page-template-page-services-php .ykHeroTitle{
  margin: 14px 0 0;
  font-size: clamp(34px, 4.1vw, 58px);
  line-height: 1.03;
  letter-spacing: -1px;
  font-weight: 950;
  color: var(--ink) !important;
}
.page-template-page-services-php .ykHeroTitle span{
  background: var(--gradSecondary);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.page-template-page-services-php .ykHeroSub{
  margin-top: 12px;
  color: rgba(30,30,46,.72);
  font-weight: 650;
  line-height: 1.7;
  font-size: 18px;
  max-width: 62ch;
}

.page-template-page-services-php .ykHeroActions{
  margin-top: 16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* IMPORTANT: scope .ykBtn to hero actions only (avoid global .ykBtn conflicts) */
.page-template-page-services-php .ykHeroActions .ykBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 16px;
  font-weight: 950;
  border: 1px solid rgba(126,87,194,.30);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  will-change: transform;
}
.page-template-page-services-php .ykHeroActions .ykBtn--primary{
  background:#7e57c2;
  color:#fff;
  box-shadow: 0 18px 48px rgba(126,87,194,.22);
}
.page-template-page-services-php .ykHeroActions .ykBtn--primary:hover{
  transform: translateY(-3px);
  filter: brightness(1.03);
}
.page-template-page-services-php .ykHeroActions .ykBtn--ghost{
  background:#fb8c00;
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(30,30,46,.10);
}
.page-template-page-services-php .ykHeroActions .ykBtn--ghost:hover{
  transform: translateY(-3px);
}
@media(max-width:980px){
  .page-template-page-services-php .ykHeroActions .ykBtn{ width:100%; }
}

/* Hero visual */
.page-template-page-services-php .ykHeroCard{
  position:relative;
  border-radius: 28px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(43,58,103,.14);
  box-shadow: 0 26px 80px rgba(30,30,46,.12);
  overflow:hidden;
  min-height: 340px;
}
.page-template-page-services-php .ykHeroCard::before{
  content:"";
  position:absolute;
  inset:-140px;
  background:
    radial-gradient(520px 320px at 18% 18%, rgba(126,87,194,.18), transparent 62%),
    radial-gradient(520px 320px at 82% 24%, rgba(43,58,103,.14), transparent 66%),
    radial-gradient(520px 360px at 45% 92%, rgba(255,140,0,.12), transparent 62%);
  opacity:.95;
}

/* HERO IMAGE CARD */
.page-template-page-services-php .ykHeroImgWrap{
  position:absolute;
  inset: 14px;
  border-radius: 24px;
  overflow:hidden;
  border: 1px solid rgba(43,58,103,.14);
  box-shadow: 0 22px 60px rgba(30,30,46,.18);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  z-index: 1;
}
.page-template-page-services-php .ykHeroImg{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .7s ease, filter .7s ease;
  filter: saturate(1.05) contrast(1.02);
}
.page-template-page-services-php .ykHeroCard:hover .ykHeroImg{
  transform: scale(1.08);
  filter: saturate(1.12) contrast(1.05);
}

/* Orbs */
.page-template-page-services-php .ykOrb{
  position:absolute;
  width: 280px; height: 280px;
  border-radius: 999px;
  border: 2px dashed rgba(126,87,194,.22);
  left: -80px; top: 30px;
  animation: ykSpin 18s linear infinite;
}
.page-template-page-services-php .ykOrb2{
  position:absolute;
  width: 360px; height: 360px;
  border-radius: 999px;
  border: 2px dashed rgba(43,58,103,.18);
  right: -140px; top: -20px;
  animation: ykSpin 22s linear infinite reverse;
  opacity:.85;
}
@keyframes ykSpin{ to{ transform: rotate(360deg); } }

/* Badge */
.page-template-page-services-php .ykHeroBadge{
  position:absolute;
  right: 18px; bottom: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(43,58,103,.14);
  box-shadow: 0 18px 50px rgba(30,30,46,.12);
  padding: 12px 14px;
  display:flex;
  gap:10px;
  align-items:center;
  z-index: 2;
}
.page-template-page-services-php .ykHeroBadge .t{ font-weight: 950; color: var(--ink); }
.page-template-page-services-php .ykHeroBadge .s{ color: rgba(30,30,46,.70); font-weight: 750; font-size: 12px; }
.page-template-page-services-php .ykHeroBadge .p{
  width:42px;height:42px;border-radius:14px;
  background: rgba(126,87,194,.12);
  border: 1px solid rgba(126,87,194,.22);
  display:flex;align-items:center;justify-content:center;
  font-weight: 950;
  color: var(--secondary);
}

/* HERO moving chips */
.page-template-page-services-php .ykMarquee{
  margin-top: 18px;
  position:relative;
  overflow:hidden;
  border-radius: 999px;
  border: 1px solid rgba(126,87,194,.14);
  background: rgba(255,255,255,.70);
  box-shadow: 0 14px 40px rgba(30,30,46,.08);
}
.page-template-page-services-php .ykMarqueeTrack{
  display:flex;
  gap: 10px;
  padding: 10px;
  width:max-content;
  animation: ykMarq 22s linear infinite;
}
.page-template-page-services-php .ykChip{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(126,87,194,.16);
  color: rgba(30,30,46,.78);
  font-weight: 850;
  font-size: 13px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.page-template-page-services-php .ykChip:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(126,87,194,.14);
}
@keyframes ykMarq{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .page-template-page-services-php .ykMarqueeTrack{ animation:none !important; }
}

/* =========================================================
   SERVICES – GLASS GRID (PIXEL MATCH)
========================================================= */

.yk-services{
  padding: clamp(80px, 8vw, 120px) 0;
}

.yk-services__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

/* GRID */
.yk-servicesGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

@media (max-width: 980px){
  .yk-servicesGrid{
    grid-template-columns: 1fr;
  }
}

/* CARD */
.yk-svc{
  position: relative;
  padding: 34px 34px 38px;
  border-radius: 32px;

  background: linear-gradient(
    180deg,
    rgba(245,242,255,.92),
    rgba(255,255,255,.96)
  );

  border: 1px solid rgba(126,87,194,.18);
  box-shadow:
    0 22px 70px rgba(30,30,46,.12),
    inset 0 1px 0 rgba(255,255,255,.65);

  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.yk-svc:hover{
  transform: translateY(-10px);
  border-color: rgba(126,87,194,.35);
  box-shadow:
    0 38px 120px rgba(126,87,194,.22),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* ICON CHIP */
.yk-svcIcon{
  width: 56px;
  height: 56px;
  border-radius: 18px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size: 26px;

  background: linear-gradient(
    180deg,
    rgba(126,87,194,.22),
    rgba(255,255,255,.98)
  );

  box-shadow:
    0 14px 36px rgba(126,87,194,.28),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* TITLE */
.yk-svc h3{
  margin-top: 18px;
  margin-bottom: 8px;

  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.3px;

  color: #7E57C2;
}

/* DESCRIPTION */
.yk-svc p{
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.65;
  font-weight: 600;

  color: rgba(30,30,46,.75);
}

/* LIST */
.yk-svc ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.yk-svc li{
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;

  font-size: 14.5px;
  font-weight: 800;
  color: #2B3A67;
}

/* BULLET DOT */
.yk-svc li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;

  width:6px;
  height:6px;
  border-radius:999px;

  background:#2B3A67;
}


/* =========================================================
   PROCESS (yk-process) — PROINF DESIGN APPLIED
========================================================= */

.yk-process{
  position:relative;
  padding: clamp(56px, 6vw, 96px) 0;
  background:#fff;
  overflow:hidden;
}

.yk-process::before{
  content:"";
  position:absolute;
  inset:-220px;
  background:
    radial-gradient(700px 360px at 18% 20%, rgba(126,87,194,.14), transparent 65%),
    radial-gradient(700px 360px at 82% 24%, rgba(43,58,103,.12), transparent 66%),
    radial-gradient(800px 420px at 50% 92%, rgba(255,140,0,.12), transparent 70%);
  pointer-events:none;
  opacity:.9;
}

/* ================= HEADER ================= */

.yk-process__head{
  position:relative;
  z-index:1;
  text-align:center;
  max-width:860px;
  margin:0 auto clamp(28px,4vw,44px);
}

.yk-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(126,87,194,.18);
  font-weight:900;
  letter-spacing:.6px;
  font-size:14px;
  color:#2B3A67;
  box-shadow:0 18px 50px rgba(30,30,46,.10);
}

.yk-process__title{
  margin:14px 0 8px;
  font-size:clamp(28px,3.3vw,44px);
  font-weight:900;
  letter-spacing:-.02em;
  color:#7E57C2;
}

.yk-process__sub{
  max-width:66ch;
  margin:0 auto;
  font-size:18px;
  line-height:1.7;
  font-weight:600;
  color:rgba(30,30,46,.72);
}

/* ================= GRID ================= */

.yk-process__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

@media (max-width:1100px){
  .yk-process__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .yk-process__grid{grid-template-columns:1fr;}
}

/* ================= CARD ================= */

.yk-step{
  position:relative;
  border-radius:22px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(43,58,103,.14);
  box-shadow:0 28px 90px rgba(30,30,46,.14);
  padding:56px 22px 18px;
  overflow:hidden;
  isolation:isolate;
  transition:transform .3s cubic-bezier(.16,.84,.44,1),
             box-shadow .3s cubic-bezier(.16,.84,.44,1);
}

.yk-step::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:-18px;
  height:30px;
  background:radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,.18), transparent 70%);
  filter:blur(10px);
  opacity:.28;
  z-index:-2;
}

.yk-step:hover{
  transform:translateY(-10px);
  box-shadow:0 38px 120px rgba(126,87,194,.22);
}

/* ================= STEP NO (RIGHT CORNER) ================= */

.yk-step__top{
  position:absolute;
  top:0;
  right:0;
  width:110px;
  height:70px;
  border-top-right-radius:22px;
  border-bottom-left-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 20px 55px rgba(30,30,46,.16);
}

.yk-step__top::before{
  content:"";
  position:absolute;
  left:-36px;
  top:0;
  width:36px;
  height:70px;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0));
  opacity:.35;
  transform:skewX(-18deg);
}

.yk-step__no{
  font-size:28px;
  font-weight:900;
  letter-spacing:.6px;
  color:#fff;
}

/* ================= ACCENTS ================= */

.yk-step[data-accent="primary"] .yk-step__top{
  background:linear-gradient(135deg,#2B3A67,#1f2a4d);
}
.yk-step[data-accent="accent"] .yk-step__top{
  background:linear-gradient(135deg,#FF8C00,#ffb14a);
}
.yk-step[data-accent="secondary"] .yk-step__top{
  background:linear-gradient(135deg,#7E57C2,#5f3fb1);
}
.yk-step[data-accent="soft"] .yk-step__top{
  background:linear-gradient(135deg,rgba(126,87,194,.7),rgba(43,58,103,.7));
}

/* ================= CONTENT ================= */

.yk-step h3{
  margin:18px 0 8px;
  font-size:23px;
  font-weight:900;
  color:#7E57C2;
  line-height:1.2;
}

.yk-step p{
  margin:0 0 12px;
  font-size:18px;
  line-height:1.7;
  color:rgba(30,30,46,.74);
  font-weight:600;
}

.yk-step ul{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
}

.yk-step li{
  font-size:15px;
  font-weight:800;
  color:#2B3A67;
}

/* ================= STAGGER ================= */

@media (min-width:1100px){
  .yk-step:nth-child(2){transform:translateY(10px);}
  .yk-step:nth-child(3){transform:translateY(18px);}
  .yk-step:nth-child(4){transform:translateY(26px);}

  .yk-step:nth-child(2):hover,
  .yk-step:nth-child(3):hover,
  .yk-step:nth-child(4):hover{
    transform:translateY(-10px);
  }
}

/* =========================================================
   PROCESS — FLAT STYLE (RIGHT IMAGE VERSION)
========================================================= */

.yk-process-flat{
  padding:70px 0;
  background:#f6f6f8;
}

.yk-process-flat .yk-process__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

@media(max-width:1100px){
  .yk-process-flat .yk-process__grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){
  .yk-process-flat .yk-process__grid{
    grid-template-columns:1fr;
  }
}

/* CARD */

.yk-process-flat .yk-step{
  background:#ffffff;
  border-radius:18px;
  border:1px solid #e6e6ea;
  padding:26px;
  box-shadow:none;
  transform:none !important;
  transition:all .2s ease;
}

.yk-process-flat .yk-step:hover{
  border-color:#7E57C2;
}

/* NUMBER TOP */

.yk-process-flat .yk-step__top{
  position:relative;
  width:64px;
  height:48px;
  border-radius:12px;
  margin-bottom:14px;
  box-shadow:none;
}

.yk-process-flat .yk-step__top::before{
  display:none;
}

.yk-process-flat .yk-step__no{
  font-size:20px;
  font-weight:900;
  color:#fff;
}

/* ACCENT COLORS */

.yk-process-flat .yk-step[data-accent="primary"] .yk-step__top{
  background:#2B3A67;
}

.yk-process-flat .yk-step[data-accent="accent"] .yk-step__top{
  background:#FF8C00;
}

.yk-process-flat .yk-step[data-accent="secondary"] .yk-step__top{
  background:#7E57C2;
}

.yk-process-flat .yk-step[data-accent="soft"] .yk-step__top{
  background:#8c83b5;
}

/* CONTENT */

.yk-process-flat h3{
  font-size:22px;
  font-weight:800;
  color:#7E57C2;
  margin:8px 0;
}

.yk-process-flat p{
  font-size:16px;
  line-height:1.6;
  color:#555;
  margin-bottom:10px;
}

.yk-process-flat ul{
  padding-left:18px;
  display:grid;
  gap:6px;
}

.yk-process-flat li{
  font-size:15px;
  font-weight:600;
  color:#2B3A67;
}
/* ===== PROCESS FLAT — CONTAINER FIX ===== */

.yk-process-flat{
  padding:70px 0;
  background:#f6f6f8;
}

/* MAIN CONTAINER */
.yk-process-flat .yk-process__inner{
  max-width:1200px;   /* adjust if needed */
  margin:0 auto;
  padding:0 20px;
}

/* GRID */
.yk-process-flat .yk-process__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

/* RESPONSIVE */
@media(max-width:1100px){
  .yk-process-flat .yk-process__grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){
  .yk-process-flat .yk-process__grid{
    grid-template-columns:1fr;
  }
}

/* ===== STEP NUMBER — CORNER BADGE FIX ===== */

.yk-process-flat .yk-step{
  position:relative;
  padding-top:64px; /* space for badge */
}

.yk-process-flat .yk-step__top{
  position:absolute;
  top:0;
  right:0;
  width:70px;
  height:54px;
  border-top-right-radius:18px;
  border-bottom-left-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.yk-process-flat .yk-step__no{
  font-size:22px;
  font-weight:900;
  color:#fff;
}
/* ===== FORCE STEP NUMBER VISIBILITY ===== */

.yk-process-flat .yk-step{
  position:relative !important;
  padding-top:70px !important;
  overflow:visible !important;
}

.yk-process-flat .yk-step__top{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  width:72px !important;
  height:56px !important;
  border-top-right-radius:18px !important;
  border-bottom-left-radius:18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:5 !important;
}

/* background colors — force visible */

.yk-process-flat .yk-step[data-accent] .yk-step__top{
  background:#7E57C2 !important;
}

.yk-process-flat .yk-step__no{
  font-size:24px !important;
  font-weight:900 !important;
  color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
  line-height:1 !important;
}


/* ===== SAFE RIGHT CORNER NUMBER ===== */

.yk-process-flat .yk-step{
  position:relative;
  padding-top:60px;
  overflow:visible; /* important */
}

/* badge */

.yk-process-flat .yk-step__top{
  position:absolute;
  top:-1px;
  right:-1px;
  width:100px;
  height:60px;
  border-top-right-radius:18px;
  border-bottom-left-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

/* shine strip */

.yk-process-flat .yk-step__top::before{
  content:"";
  position:absolute;
  left:-30px;
  top:0;
  width:30px;
  height:100%;
  background:linear-gradient(135deg,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);
  pointer-events:none;
}

/* gradients */

.yk-process-flat .yk-step[data-accent] .yk-step__top{
  background:linear-gradient(135deg,#7E57C2,#5f3fb1);
}

/* number */

.yk-process-flat .yk-step__no{
  font-size:24px;
  font-weight:900;
  color:#fff;
  line-height:1;
}

/* ============================
   FAQ SECTION
============================ */
.yk-faq{
  padding: 0px 0;
}

.yk-faq__inner{
  max-width: 920px;
  margin: 0 auto;
  padding: 0 18px;
}

.yk-faq__head{
  text-align:center;
  margin-bottom: 42px;
}

.yk-faq__title{
  font-size: 32px;
  font-weight: 900;
  color: #121225;
}

.yk-faq__sub{
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(30,30,46,.70);
}

/* Grid */
.yk-faq__grid{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: 18px;
}

@media(max-width:800px){
  .yk-faq__grid{ grid-template-columns:1fr; }
}

/* Card */
.yk-faqItem{
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(126,87,194,.18);
  box-shadow:0 18px 60px rgba(30,30,46,.10);
  overflow:hidden;
}

/* Question */
.yk-faqQ{
  width:100%;
  padding:18px;
  background:none;
  border:0;
  display:flex;
  align-items:center;
  gap:14px;
  cursor:pointer;
  text-align:left;
}

.yk-faqIcon{
  width:38px;
  height:38px;
  border-radius:12px;
  background: rgba(126,87,194,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  color:#7E57C2;
  font-weight:900;
}

.yk-faqText{
  flex:1;
  font-size:16px;
  font-weight:800;
  color:#7E57C2;
}

.yk-faqToggle{
  width:34px;
  height:34px;
  border-radius:10px;
  background: rgba(126,87,194,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:900;
  color:#7E57C2;
}

/* Answer */
.yk-faqA{
  display:none;
  padding: 0 18px 18px;
}

.yk-faqA p{
  font-size:15.5px;
  line-height:1.7;
  color: rgba(30,30,46,.78);
  font-weight:600;
}

/* Open state */
.yk-faqItem.is-open .yk-faqA{
  display:block;
}


/* =========================================================
   CTA (services page local block .ykCTA)
========================================================= */
.page-template-page-services-php .ykCTA{
  margin-top: 26px;
  border-radius: 28px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(43,58,103,.14);
  box-shadow: 0 30px 100px rgba(30,30,46,.12);
  padding: clamp(16px, 2.6vw, 28px);
  position:relative;
  overflow:hidden;
  text-align:center;
}
.page-template-page-services-php .ykCTA::before{
  content:"";
  position:absolute;
  inset:-180px;
  background:
    radial-gradient(720px 420px at 18% 18%, rgba(126,87,194,.16), transparent 62%),
    radial-gradient(720px 420px at 82% 24%, rgba(43,58,103,.14), transparent 66%),
    radial-gradient(720px 480px at 50% 92%, rgba(255,140,0,.12), transparent 62%);
  pointer-events:none;
}
.page-template-page-services-php .ykCTA > *{ position:relative; z-index:1; }

.page-template-page-services-php .ykCTATitle{
  margin:0;
  font-size: clamp(26px, 3vw, 40px);
  font-weight:1000;
  color: var(--secondary) !important;
}
.page-template-page-services-php .ykCTASub{
  margin: 10px auto 0;
  max-width: 70ch;
  color: rgba(30,30,46,.72);
  font-weight:650;
  line-height:1.7;
}
.page-template-page-services-php .ykCTAAct{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap:wrap;
}
@media(max-width:980px){
  .page-template-page-services-php .ykCTAAct a{ width:100%; }
}

/* Section wrapper helpers (services only) */
.page-template-page-services-php .ykSection{
  padding: clamp(60px, 6vw, 100px) 0;
  background:#fff;
}
.page-template-page-services-php .ykHead{
  max-width: 860px;
  margin: 0 auto 22px;
  text-align:center;
}
.page-template-page-services-php .ykHead p{
  font-size:18px;
  margin: 10px auto 0;
  max-width: 70ch;
  color: rgba(30,30,46,.72);
  font-weight: 650;
  line-height: 1.7;
}

/* Ensure hero/faq never exceed container */
.page-template-page-services-php .ykHero .ykHeroGrid,
.page-template-page-services-php .ykSection .ykFaqGrid{
  width:100%;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .page-template-page-services-php .ykOrb,
  .page-template-page-services-php .ykOrb2,
  .page-template-page-services-php .ykMarqueeTrack{
    animation:none !important;
  }
  .page-template-page-services-php .yk-reveal{
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}



/* =========================================================
   WHY BUSINESSES CHOOSE – FINAL EXACT MATCH
   (DO NOT CHANGE HTML)
========================================================= */

.yk-whyMain{
  position:relative;
  padding: clamp(56px, 6vw, 96px) 0;
  background:#fff;
  overflow:hidden;
}

.yk-whyMain::before{
  content:"";
  position:absolute;
  inset:-220px;
  background:
    radial-gradient(720px 360px at 16% 18%, rgba(126,87,194,.16), transparent 65%),
    radial-gradient(720px 360px at 84% 24%, rgba(43,58,103,.12), transparent 66%),
    radial-gradient(820px 420px at 50% 94%, rgba(255,140,0,.12), transparent 70%);
  opacity:.9;
  pointer-events:none;
}

.yk-whyMain__inner{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
  padding:38px 42px 42px;
  border-radius:34px;
  background: rgba(255,255,255,.96);
  border:1px solid rgba(43,58,103,.12);
  box-shadow:0 34px 120px rgba(30,30,46,.14);
}

/* pill */
.yk-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(126,87,194,.24);
  font-size:13px;
  font-weight:900;
  letter-spacing:.6px;
  color:#2B3A67;
}

/* heading */
.yk-whyMain__title {
    margin: 20px 0 26px;
    font-size: clamp(29px, 0.2vw, 39px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: #7E57C2;
    max-width: 60ch;
}

/* ticks */
.yk-whyMain__ticks{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px 36px;
  margin:0 0 30px;
  padding:0;
  list-style:none;
}

@media(max-width:980px){
  .yk-whyMain__ticks{
    grid-template-columns:1fr;
  }
}

.yk-whyMain__ticks li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:700;
  color:#2B3A67;
}

/*.yk-whyMain__ticks li::before{*/
/*  content:"✔";*/
/*  width:22px;*/
/*  height:22px;*/
/*  border-radius:50%;*/
/*  background:#EEE9FB;*/
/*  color:#7E57C2;*/
/*  display:flex;*/
/*  align-items:center;*/
/*  justify-content:center;*/
/*  font-size:13px;*/
/*  font-weight:900;*/
/*}*/

/* cards wrapper */
.yk-whyMain__cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-bottom:28px;
}

@media(max-width:980px){
  .yk-whyMain__cards{
    grid-template-columns:1fr;
  }
}

.yk-whyCard{
  display:flex;
  flex-direction:column;

  justify-content:flex-start; /* important */
  align-items:flex-start;

  padding:28px 32px;
  border-radius:22px;

  background:#fff;
  border:1px solid rgba(43,58,103,.12);
  box-shadow:0 14px 40px rgba(30,30,46,.08);

  gap:8px; /* spacing between h4 & p */
}

.yk-whyCard h4{
  margin:0;
  font-size:18px;
  font-weight:800;
  color:#7E57C2;
}

.yk-whyCard p{
  margin:0;
  font-size:16px;
  line-height:1.65;
  font-weight:500;
  color:rgba(30,30,46,.75);
}
/* FORCE STACK FIX */

.yk-whyCard{
  display:block !important;
  padding:28px 32px;
}

/* label text */

.yk-whyCard h4{
  display:block;
  margin:0 0 8px 0 !important;
}

/* paragraph */

.yk-whyCard p{
  display:block;
  margin:0 !important;
}

/* actions */
.yk-whyMain__actions{
  margin-top:24px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

@media(max-width:640px){
  .yk-whyMain__actions a{
    width:100%;
  }
}

/* ===== WHY CARD LAYOUT FIX ===== */

.yk-whyCard{
  display:flex !important;
  flex-direction:column !important;
  gap:8px;
}

/* force label + text stacking */

/*.yk-whyCard > *{*/
  /*width:100% !important;*/
/*}*/


/* buttons */
.yk-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 24px;
  border-radius:18px;
  font-weight:900;
  font-size:15px;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}

.yk-btn--primary{
  background:#7E57C2;
  color:#fff;
  box-shadow:0 18px 50px rgba(126,87,194,.30);
}

.yk-btn--secondary{
  background:#FF8C00;
  color:#fff;
  box-shadow:0 18px 50px rgba(255,140,0,.26);
}

.yk-btn:hover{
  transform:translateY(-3px);
}
/*===============================================
    pricing 
==================================================*/
.yk-pricingHead{
  padding: clamp(28px, 4vw, 120px) 0;
  text-align:center;
}

.yk-pricingHead__inner{
  max-width:980px;
  margin:0 auto;
  padding:0 20px;
}

.yk-pricingHead__title{
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight:1000;
  line-height:1.1;
  color:#1f1f2e;
}

.yk-pricingHead__title span{
  color:#7E57C2;
}

.yk-pricingHead__sub{
  margin-top:-19px;
  font-size:17px;
  line-height:1;
  font-weight: 600;
  color:rgba(30,30,46,.72);
  max-width:72ch;
  margin-left:auto;
  margin-right:auto;
}

.yk-pricingHead__tabs{
  margin-top:6px;
  display:inline-flex;
  gap:8px;
  padding:6px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(126,87,194,.25);
  box-shadow:0 14px 40px rgba(30,30,46,.12);
}

.yk-pricingHead__tabs button{
  padding:10px 18px;
  border-radius:999px;
  border:0;
  background:transparent;
  font-weight:900;
  cursor:pointer;
  color:#2B3A67;
}

.yk-pricingHead__tabs .is-active{
  background:#7E57C2;
  color:#fff;
}



/* =========================================================
   PRICING – ONE TIME WEBSITE PLANS (FINAL FIX)
   FULL WIDTH BG + GAP FIX
========================================================= */

.ykPricing{
  position:relative;
  padding: clamp(25px, 0vw, 30px) 0; /* 🔥 GAP FIX */
  background:#fff;
  overflow:hidden;
}

/* FULL WIDTH BACKGROUND */
.ykPricing::before{
  content:"";
  position:absolute;
  inset:-260px; /* full spread */
  background:
    radial-gradient(720px 360px at 18% 10%, rgba(126,87,194,.16), transparent 65%),
    radial-gradient(720px 360px at 82% 18%, rgba(43,58,103,.12), transparent 66%),
    radial-gradient(820px 420px at 50% 98%, rgba(255,140,0,.12), transparent 70%);
  opacity:.9;
  pointer-events:none;
}

.ykPricing__inner{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:0 auto;
  padding:0 18px;
  text-align:center;
}

/* ================= TITLE ================= */

.ykPricing__title{
  margin:0 0 10px; /* 🔥 top gap fix */
  font-size: clamp(30px, 4vw, 50px);
  font-weight:900;
  letter-spacing:-.02em;
  color:#1E1E2E;
}

.ykPricing__sub{
  max-width:760px;
  margin:0 auto 4px; /* 🔥 reduced */
  font-size:17px;
  font-weight:650;
  line-height:1.6;
  color:rgba(30,30,46,.72);
}

.ykPricing__note{
  margin:0 auto 36px; /* 🔥 reduced */
  font-size:14px;
  font-weight:800;
  color:rgba(30,30,46,.55);
}

/* ================= GRID ================= */

.ykPricing__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:26px;
  align-items:stretch;
}

@media(max-width:1024px){
  .ykPricing__grid{
    grid-template-columns:1fr;
  }
}

/* ================= PLAN CARD ================= */

.ykPlan{
  position:relative;
  padding:26px 26px 28px;
  border-radius:26px;
  background: rgba(255,255,255,.96);
  border:1px solid rgba(43,58,103,.14);
  box-shadow:0 26px 80px rgba(30,30,46,.14);
  text-align:left;
}

/* POPULAR CARD */
.ykPlan.is-popular{
  border-color:#7E57C2;
  box-shadow:0 34px 110px rgba(126,87,194,.28);
}

/* ================= HEADER ================= */

.ykPlan__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}

.ykPlan__head h3{
  font-size:20px;
  font-weight:900;
  color:#1E1E2E;
  margin:0;
}

/* TAG */
.ykPlan__tag{
  padding:6px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(126,87,194,.22);
  font-size:12px;
  font-weight:900;
  color:#2B3A67;
}

.ykPlan.is-popular .ykPlan__tag{
  background:#FF8C00;
  color:#fff;
  border:none;
}

/* ================= DESC ================= */

.ykPlan__desc{
  margin:8px 0 18px;
  font-size:15px;
  font-weight:650;
  line-height:1.55;
  color:rgba(30,30,46,.70);
}

/* ================= PRICE ================= */

.ykPlan__price{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(43,58,103,.14);
  box-shadow:0 10px 34px rgba(30,30,46,.10);
  margin-bottom:18px;
}

.ykPlan__price strong{
  font-size:22px;
  font-weight:1000;
  color:#2B3A67;
}

.ykPlan__price span{
  font-size:13px;
  font-weight:800;
  color:rgba(30,30,46,.55);
}

/* ================= FEATURES ================= */

.ykPlan__features{
  list-style:none;
  padding:0;
  margin:0 0 22px;
}

.ykPlan__features li{
  display:flex;
  gap:10px;
  font-size:15px;
  font-weight:650;
  color:#2B3A67;
  margin-bottom:10px;
}

.ykPlan__features li::before{
  content:"✔";
  width:20px;
  height:20px;
  border-radius:50%;
  background:#EDE7F6;
  color:#7E57C2;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  flex:0 0 auto;
}

.ykPlan__features li.is-highlight::before{
  background:#FFE6CC;
  color:#FF8C00;
}

/* ================= BUTTON ================= */

.ykPlan__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  border-radius:16px;
  background:#7E57C2;
  color:#fff;
  font-size:15px;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 18px 44px rgba(126,87,194,.30);
  transition:transform .2s ease, box-shadow .2s ease;
}

.ykPlan__btn:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 60px rgba(126,87,194,.38);
}




/* =========================================================
   OPTIONAL ADD-ONS (ONE-TIME)
========================================================= */

.ykAddons{
  position:relative;
  padding: clamp(48px, 5vw, 72px) 0;
  background:#fff;
}

.ykAddons__inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
}

/* Title */
.ykAddons__title{
  margin:0 0 6px;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight:900;
  color:#1E1E2E;
}

/* Sub */
.ykAddons__sub{
  margin:0 0 22px;
  font-size:16px;
  font-weight:650;
  color:rgba(30,30,46,.72);
}

/* Main box */
.ykAddons__box{
  border-radius:28px;
  background:#fff;
  border:1px solid rgba(43,58,103,.14);
  box-shadow:0 26px 90px rgba(30,30,46,.12);
  overflow:hidden;
}

/* Row */
.ykAddonRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 24px;
  border-bottom:1px solid rgba(43,58,103,.12);
}

.ykAddonRow:last-child{
  border-bottom:none;
}

.ykAddonRow__title{
  font-size:16px;
  font-weight:700;
  color:#3A3A4A;
}

.ykAddonRow__price{
  font-size:16px;
  font-weight:900;
  color:#2B3A67;
  white-space:nowrap;
}

/* Tip */
.ykAddons__tip{
  padding:18px 24px;
  font-size:15px;
  font-weight:650;
  color:rgba(30,30,46,.72);
  background:rgba(126,87,194,.04);
}



/* =========================================================
   HOW WE WORK – TIMELINE (EXACT STYLE)
========================================================= */

.yk-work{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  padding:clamp(60px,6vw,100px) 0;
  background:
    radial-gradient(900px 480px at 18% 18%, rgba(126,87,194,.14), transparent 60%),
    radial-gradient(900px 480px at 85% 22%, rgba(255,140,0,.12), transparent 62%);
}

.yk-work__inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
  background:rgba(255,255,255,.88);
  border-radius:32px;
  border:1px solid rgba(43,58,103,.12);
  box-shadow:0 40px 120px rgba(30,30,46,.12);
}

/* HEAD */

.yk-work__head{
  max-width:760px;
  padding:32px 32px 10px;
}

.yk-work__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(126,87,194,.22);
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  color:#7E57C2;
}

.yk-work__title{
  margin:16px 0 10px;
  font-size:clamp(28px,3vw,40px);
  font-weight:900;
  line-height:1.15;
  color:#7E57C2;
}

.yk-work__sub{
  font-size:16px;
  font-weight:650;
  color:rgba(18,18,37,.70);
}

/* STEPS */

.yk-work__steps{
  padding:14px 24px 8px;
}

.yk-work__step{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:16px;
  align-items:center;
  padding:18px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(43,58,103,.10);
  box-shadow:0 14px 40px rgba(30,30,46,.06);
}

.yk-work__step + .yk-work__step{
  margin-top:14px;
}

.yk-work__no{
  width:60px;
  height:60px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:18px;
  font-weight:1000;
  color:#fff;
  background:linear-gradient(135deg,#7E57C2,#2B3A67);
}

.yk-work__step.is-highlight .yk-work__no{
  background:linear-gradient(135deg,#FF8C00,#FFB14A);
}

.yk-work__content h4{
  margin:0 0 6px;
  font-size:18px;
  font-weight:900;
  color:#7E57C2;
}

.yk-work__content p{
  margin:0;
  font-size:15.5px;
  line-height:1.55;
  font-weight:650;
  color:rgba(18,18,37,.70);
}

/* ACTIONS */

.yk-work__actions{
  padding:22px 32px 32px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.yk-work__btn{
  padding:14px 22px;
  border-radius:16px;
  font-weight:900;
  text-decoration:none;
}

.yk-work__btn.primary{
  background:#7E57C2;
  color:#fff;
  box-shadow:0 18px 50px rgba(126,87,194,.28);
}

.yk-work__btn.secondary{
  background:#FF8C00;
  color:#141426;
  box-shadow:0 18px 44px rgba(255,140,0,.25);
}

@media(max-width:980px){
  .yk-work__step{
    grid-template-columns:60px 1fr;
  }
}


/* =========================================================
   OUR STORY + IMPACT (EXACT STYLE)
========================================================= */

.yk-story{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  padding:clamp(70px,7vw,110px) 0;
  background:
    radial-gradient(900px 480px at 15% 20%, rgba(126,87,194,.14), transparent 60%),
    radial-gradient(900px 480px at 85% 20%, rgba(255,140,0,.12), transparent 62%);
}

/* container */
.yk-story__inner{
  max-width:1180px;
  margin:0 auto;
  padding:32px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:34px;
  background:rgba(255,255,255,.88);
  border-radius:32px;
  border:1px solid rgba(43,58,103,.12);
  box-shadow:0 40px 120px rgba(30,30,46,.12);
}

@media(max-width:980px){
  .yk-story__inner{
    grid-template-columns:1fr;
    padding:26px 22px;
  }
}

/* ================= BADGE ================= */

.yk-story__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(126,87,194,.22);
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  color:#7E57C2;
}

/* ================= LEFT ================= */

.yk-story__left{
  max-width:560px;
}

.yk-story__title{
  margin:16px 0 12px;
  font-size:clamp(30px,3.2vw,42px);
  font-weight:1000;
  line-height:1.15;
  letter-spacing:-.02em;
  color:#7E57C2;
}

.yk-story__left p{
  margin:0 0 14px;
  font-size:16.5px;
  line-height:1.65;
  font-weight:650;
  color:rgba(18,18,37,.75);
}

/* actions */
.yk-story__actions{
  margin-top:22px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* buttons */
.yk-btn{
  padding:14px 22px;
  border-radius:16px;
  font-weight:900;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}

.yk-btn.primary{
  background:#7E57C2;
  color:#fff;
  box-shadow:0 18px 50px rgba(126,87,194,.28);
}

.yk-btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 26px 70px rgba(126,87,194,.38);
}

.yk-btn.secondary{
  background:#FF8C00;
  color:#141426;
  box-shadow:0 18px 44px rgba(255,140,0,.25);
}

.yk-btn.secondary:hover{
  transform:translateY(-2px);
  box-shadow:0 26px 60px rgba(255,140,0,.35);
}

@media(max-width:980px){
  .yk-story__actions a{ width:100%; }
}

/* ================= RIGHT ================= */

.yk-story__right{
  padding:26px;
  border-radius:26px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(43,58,103,.12);
  box-shadow:0 26px 90px rgba(30,30,46,.10);
}

.yk-story__impactTitle{
  margin:16px 0 18px;
  font-size:clamp(22px,2.2vw,30px);
  font-weight:1000;
  color:#7E57C2;
}

/* stats grid */
.yk-story__stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

@media(max-width:640px){
  .yk-story__stats{
    grid-template-columns:1fr;
  }
}

/* stat card */
.yk-storyStat{
  padding:18px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(43,58,103,.10);
  box-shadow:0 14px 40px rgba(30,30,46,.06);
}

.yk-storyStat__value{
  display:block;
  font-size:32px;
  font-weight:1000;
  color:#7E57C2;
  margin-bottom:6px;
}

.yk-storyStat strong{
  display:block;
  font-size:16px;
  font-weight:900;
  color:#141426;
  margin-bottom:4px;
}

.yk-storyStat p{
  margin:0;
  font-size:15px;
  line-height:1.55;
  font-weight:650;
  color:rgba(18,18,37,.72);
}
/* =========================================================
   OUR STORY + IMPACT (EXACT STYLE)
========================================================= */

.yk-story{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  padding:clamp(70px,7vw,110px) 0;
  background:
    radial-gradient(900px 480px at 15% 20%, rgba(126,87,194,.14), transparent 60%),
    radial-gradient(900px 480px at 85% 20%, rgba(255,140,0,.12), transparent 62%);
}

/* container */
.yk-story__inner{
  max-width:1180px;
  margin:0 auto;
  padding:32px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:34px;
  background:rgba(255,255,255,.88);
  border-radius:32px;
  border:1px solid rgba(43,58,103,.12);
  box-shadow:0 40px 120px rgba(30,30,46,.12);
}

@media(max-width:980px){
  .yk-story__inner{
    grid-template-columns:1fr;
    padding:26px 22px;
  }
}

/* ================= BADGE ================= */

.yk-story__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(126,87,194,.22);
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  color:#7E57C2;
}

/* ================= LEFT ================= */

.yk-story__left{
  max-width:560px;
}

.yk-story__title{
  margin:16px 0 12px;
  font-size:clamp(30px,3.2vw,42px);
  font-weight:1000;
  line-height:1.15;
  letter-spacing:-.02em;
  color:#7E57C2;
}

.yk-story__left p{
  margin:0 0 14px;
  font-size:16.5px;
  line-height:1.65;
  font-weight:650;
  color:rgba(18,18,37,.75);
}

/* actions */
.yk-story__actions{
  margin-top:22px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* buttons */
.yk-btn{
  padding:14px 22px;
  border-radius:16px;
  font-weight:900;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}

.yk-btn.primary{
  background:#7E57C2;
  color:#fff;
  box-shadow:0 18px 50px rgba(126,87,194,.28);
}

.yk-btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 26px 70px rgba(126,87,194,.38);
}

.yk-btn.secondary{
  background:#FF8C00;
  color:#141426;
  box-shadow:0 18px 44px rgba(255,140,0,.25);
}

.yk-btn.secondary:hover{
  transform:translateY(-2px);
  box-shadow:0 26px 60px rgba(255,140,0,.35);
}

@media(max-width:980px){
  .yk-story__actions a{ width:100%; }
}

/* ================= RIGHT ================= */

.yk-story__right{
  padding:26px;
  border-radius:26px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(43,58,103,.12);
  box-shadow:0 26px 90px rgba(30,30,46,.10);
}

.yk-story__impactTitle{
  margin:16px 0 18px;
  font-size:clamp(22px,2.2vw,30px);
  font-weight:1000;
  color:#7E57C2;
}

/* stats grid */
.yk-story__stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

@media(max-width:640px){
  .yk-story__stats{
    grid-template-columns:1fr;
  }
}

/* stat card */
.yk-storyStat{
  padding:18px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(43,58,103,.10);
  box-shadow:0 14px 40px rgba(30,30,46,.06);
}

.yk-storyStat__value{
  display:block;
  font-size:32px;
  font-weight:1000;
  color:#7E57C2;
  margin-bottom:6px;
}

.yk-storyStat strong{
  display:block;
  font-size:16px;
  font-weight:900;
  color:#141426;
  margin-bottom:4px;
}

.yk-storyStat p{
  margin:0;
  font-size:15px;
  line-height:1.55;
  font-weight:650;
  color:rgba(18,18,37,.72);
}



/* =========================================================
   MISSION / VISION / VALUES – EXACT STYLE
========================================================= */

.yk-mvv{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  padding:clamp(70px,7vw,110px) 0;
  background:
    radial-gradient(900px 480px at 15% 20%, rgba(126,87,194,.14), transparent 60%),
    radial-gradient(900px 480px at 85% 22%, rgba(255,140,0,.12), transparent 62%);
}

.yk-mvv__inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
}

/* HEAD */

.yk-mvv__head{
  max-width:640px;
  margin-bottom:38px;
}

.yk-mvv__badge{
  display:inline-flex;
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(126,87,194,.22);
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  color:#7E57C2;
}

.yk-mvv__title{
  margin:16px 0 10px;
  font-size:clamp(30px,3.2vw,42px);
  font-weight:1000;
  line-height:1.15;
  letter-spacing:-.02em;
  color:#7E57C2;
}

.yk-mvv__sub{
  font-size:16.5px;
  font-weight:650;
  line-height:1.65;
  color:rgba(18,18,37,.72);
}

/* GRID */

.yk-mvv__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

@media(max-width:980px){
  .yk-mvv__grid{
    grid-template-columns:1fr;
  }
}

/* CARD */

.yk-mvvCard{
  padding:26px;
  border-radius:26px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(43,58,103,.12);
  box-shadow:0 26px 90px rgba(30,30,46,.10);
}

.yk-mvvCard__icon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:22px;
  margin-bottom:14px;
  background:rgba(126,87,194,.12);
  color:#7E57C2;
}

.yk-mvvCard h3{
  margin:0 0 8px;
  font-size:20px;
  font-weight:1000;
  color:#7E57C2;
}

.yk-mvvCard p{
  margin:0;
  font-size:15.5px;
  line-height:1.6;
  font-weight:650;
  color:rgba(18,18,37,.75);
}


/* ===== Industries Section ===== */
.yk-industries {
  padding: 90px 0;
}

.yk-industries__inner {
  max-width: 1200px;
  margin: auto;
  /*text-align: center;*/
}

.yk-industries__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(126,87,194,.12);
  color: #7e57c2;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 14px;
}

.yk-industries__title {
  font-size: clamp(32px, 4vw, 44px);
  color: #7e57c2;
  margin-bottom: 10px;
}

.yk-industries__subtext {
  max-width: 640px;
  margin: 0 auto 50px;
  color: #555;
  font-size: 16px;
}

/* ===== Grid ===== */
.yk-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* ===== Card ===== */
.yk-industry-card {
  background: #fff;
  border-radius: 26px;
  overflow: hidden;
  box-shadow:
    0 40px 80px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.4);

  transform-style: preserve-3d;
  transition: box-shadow .35s ease;
  will-change: transform;
}

.yk-industry-card:hover {
  box-shadow:
    0 60px 120px rgba(126,87,194,.28),
    inset 0 1px 0 rgba(255,255,255,.5);
}

/* Image */
.yk-industry-card__image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transform: translateZ(35px);
}

/* Content */
.yk-industry-card__content {
  padding: 26px;
  transform: translateZ(50px);
}

.yk-industry-card h3 {
  color: #7e57c2;
  font-size: 18px;
  margin-bottom: 8px;
}

.yk-industry-card p {
  color: #555;
  font-size: 15px;
  margin-bottom: 18px;
}

/* Buttons */
.yk-industry-card__actions {
  display: flex;
  gap: 12px;
}

.btn {
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
  transition: transform .25s ease;
}

.btn-outline {
  border: 2px solid #7e57c2;
  color: #7e57c2;
  background: transparent;
}

.btn-primary {
  background: #ff9800;
  color: #fff;
}

.yk-industry-card:hover .btn {
  transform: translateZ(60px);
}

/* Highlight middle card */
.yk-industry-card.is-highlight {
  outline: 2px solid rgba(126,87,194,.25);
}

/* Responsive */
@media (max-width: 991px) {
  .yk-industries__grid {
    grid-template-columns: 1fr;
  }
}




/* FULL WIDTH FIX */
.full-width-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /*padding: 120px 0;*/
  margin-top: 18px;
  background: #f8f8fb;
}

/* CONTAINER */
.industry-container {
  max-width: 1180px;
  margin: auto;
  padding: 0 20px;
}

/* GRID */
.industry-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: center;
}

/* BADGE */
.industry-badge {
  background: rgba(126,87,194,.12);
  color: #7e57c2;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 18px;
}

/* TITLE */
.hero-title {
  font-size: clamp(42px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.1;
}

.highlight-text {

  background: linear-gradient(90deg,#7e57c2,#9c6bff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* DESCRIPTION */
.hero-desc {
  font-size: 18px;
  color: #555;
  margin: 20px 0 30px;
  max-width: 520px;
}

/* BUTTONS */
.hero-cta {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
}

.btn {
  padding: 14px 26px;
  border-radius: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

.btn-primary {
  background: linear-gradient(90deg,#7e57c2,#9c6bff);
  color: #fff;
}

.btn-secondary {
  background: #ff9800;
  color: #fff;
}

.full-btn {
  width: 86%;
  text-align: center;
  margin-top: 12px;
}

/* QUICK NAV */
.hero-quick-nav {
  background: #fff;
  border-radius: 24px;
  padding: 12px;
  box-shadow: 0 30px 60px rgba(0,0,0,.08);
}

.quick-item {
    font-weight: 600;
  display: flex;
  justify-content: space-between;
  padding: 13px 10px;
  border-radius: 12px;
  margin-bottom: 12px;
  background: #f4f4f9;
  text-decoration: none;
  color: #333;
}

/* TRUST */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.trust-box {
  background: #fff;
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,.05);
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .industry-grid {
    grid-template-columns: 1fr;
  }
}

.site-content,
.content-area,
.container {
  overflow: visible !important;
}

.industry-hero {
  position: relative;
  width: 100%;
  max-width: 100%;
}
.force-full {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}



.industry-feature {
  padding: 60px 0 100px;
}

.feature-wrapper {
  position: relative;
  background: linear-gradient(180deg,#f7f6fb,#f2f1f7);
  padding: 40px;
  border-radius: 28px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.feature-image img {
  width: 100%;
  border-radius: 24px;
  display: block;
}

.feature-badge {
  position: absolute;
  right: 40px;
  bottom: 120px;
  background: #fff3e6;
  color: #ff8800;
  padding: 10px 20px;
  border-radius: 40px;
  font-weight: 600;
  box-shadow: 0 10px 20px rgba(255,136,0,0.15);
}

.feature-boxes {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-top: 30px;
}

.feature-box {
    font-weight: 600;
  background: #ffffff;
  padding: 5px;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  transition: 0.3s ease;
}

.feature-box:hover {
  transform: translateY(-6px);
}

.feature-box h4 {
  font-size: 18px;
  margin-bottom: 6px;
  font-weight: 700;
}

.feature-box p {
  font-size: 14px;
  color: #666;
}
@media(max-width: 768px){
  .feature-boxes{
    grid-template-columns: 1fr;
  }

  .feature-badge{
    position: static;
    margin-top: 20px;
    display: inline-block;
  }
}



/* ===== SECTION WRAPPER ===== */

.industry-problems {
  padding: 25px 0;
  /*text-align: center;*/
  background: #faf9ff;
}

/* ===== BADGE ===== */

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1eaff;
  color: #7b5cff;
  padding: 8px 20px;
  border-radius: 40px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 25px;
}

.section-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #ff9f2f;
  border-radius: 50%;
}

/* ===== TITLE ===== */

.section-title {
    text-align: left;
  font-size: 27px;
  font-weight: 800;
  max-width: 900px;
  margin: 0 auto 18px;
  line-height: 1.25;
  color: #7b5cff;
}

.section-subtext {
  color: #6d6d6d;
  font-size: 16px;
  margin-bottom: 70px;
}

/* ===== GRID WRAPPER CARD ===== */

.problems-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(90deg,#fdfcfe 50%,#f5f2ff 50%);
  box-shadow: 0 25px 60px rgba(0,0,0,0.06);
}

/* ===== LEFT & RIGHT ===== */

.problems-left,
.problems-right {
  padding: 55px;
}

.problems-left h3,
.problems-right h3 {
    font-weight: 800;
  font-size: 20px;
  margin-bottom: 10px;
}

.problems-left p.intro,
.problems-right p.intro {
  font-size: 14px;
  color: #777;
  margin-bottom: 25px;
}

/* ===== ITEMS ===== */

.problem-item,
.fix-item {
  display: flex;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 18px;
  background: #ffffff;
  margin-bottom: 18px;
  transition: 0.25s ease;
  border: 1px solid #f1f1f1;
}

.problem-item:hover,
.fix-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.07);
}

.problem-item strong,
.fix-item strong {
        font-weight: 800;
    width: 240px;
  font-size: 15px;
  display: block;
  margin-bottom: 6px;
}

.problem-item p,
.fix-item p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* ===== ICONS ===== */

.icon-x,
.icon-check {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.icon-x {
  background: #fff1e8;
  color: #ff7a2f;
}

.icon-check {
  background: #efe8ff;
  color: #7b5cff;
}

/* ===== CTA ===== */

.problem-cta {
  margin-top: 20px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

/* ===== RESPONSIVE ===== */

@media(max-width: 992px){
  .problems-grid{
    grid-template-columns: 1fr;
    background: #ffffff;
  }

  .problems-left,
  .problems-right{
    padding: 40px;
  }
}

/* ===== SECTION ===== */

.yk-industry-feat-section {
  padding: 70px 0;
  background: #faf9ff;
}

.yk-industry-feat-container {
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* ===== BADGE ===== */

.yk-industry-feat-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1eaff;
  color: #7b5cff;
  padding: 7px 18px;
  border-radius: 40px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 18px;
}

.yk-industry-feat-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #ff9f2f;
  border-radius: 50%;
}

/* ===== TITLE ===== */

.yk-industry-feat-title {
  font-size: 31px;
  font-weight: 900;
  margin-bottom: 12px;
  color: #7b5cff;
}

.yk-industry-feat-subtext {
    font-weight: 600;
  font-size: 15px;
  color: #666;
  margin-bottom: 40px;
}

/* ===== WRAPPER ===== */

.yk-industry-feat-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ===== ROW ===== */

.yk-industry-feat-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  background: #ffffff;
  padding: 2px 15px 5px;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.05);
  gap: 25px;
  text-align: left;
  transition: 0.25s ease;
}

.yk-industry-feat-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}

/* ===== LEFT ===== */

.yk-industry-feat-left h3 {
    font-weight: 800;
  font-size: 18px;
  color: #7b5cff;
  margin-bottom: 6px;
}

.yk-industry-feat-left p {
    font-weight: 500;
  font-size: 18px;
  color: #555;
  margin: 0;
}

/* ===== RIGHT ===== */

.yk-industry-feat-right {
  background: #f3efff;
  padding: 16px 20px;
  border-radius: 16px;
}

.yk-industry-feat-right strong {
    font-weight: 800;
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
  color: #444;
}

.yk-industry-feat-right p {
    font-weight: 600;
  font-size: 17px;
  margin: 0;
  color: #666;
}

/* ===== RESPONSIVE ===== */

@media(max-width: 992px){
  .yk-industry-feat-row{
    grid-template-columns: 1fr;
    gap: 15px;
  }
}


/* ===== SECTION ===== */

.yk-expected-section {
  padding: 70px 0;
  background: #f9f8fc;
}

.yk-expected-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* ===== BADGE ===== */

.yk-expected-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1eaff;
  color: #7b5cff;
  padding: 7px 18px;
  border-radius: 40px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 18px;
}

.yk-expected-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #ff9f2f;
  border-radius: 50%;
}

/* ===== TITLE ===== */

.yk-expected-title {
  font-size: 29px;
  font-weight: 900;
  color: #7b5cff;
  margin-bottom: 10px;
}

.yk-expected-subtext {
    font-weight: 600;
  font-size: 15px;
  color: #666;
  margin-bottom: 45px;
}

/* ===== OUTER GRADIENT BOX ===== */

.yk-expected-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  padding: 35px;
  border-radius: 30px;
  background: linear-gradient(90deg, #e9e4ff, #f7e9da);
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

/* ===== CARD ===== */

.yk-expected-card {
  background: #ffffff;
  padding: 13px;
  border-radius: 22px;
  text-align: left;
  transition: 0.3s ease;
}

.yk-expected-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

/* ===== ICON ===== */

.yk-expected-icon {
  font-size: 20px;
  margin-bottom: 10px;
  color: #7b5cff;
}

/* ===== TEXT ===== */

.yk-expected-card h3 {
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: 790;
}

.yk-expected-card p {
    font-weight: 600;
  font-size: 14px;
  color: #555;
  margin: 0;
}

/* ===== RESPONSIVE ===== */

@media(max-width: 992px){
  .yk-expected-box {
    grid-template-columns: 1fr;
  }
}

/* ===== CTA SECTION ===== */

.yk-cta-consult {
  padding: 90px 20px;
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg,#faf9ff,#f3f0ff);
}

.yk-cta-box {
  max-width: 1050px;
  width: 100%;
  background: #ffffff;
  border-radius: 28px;
  padding: 12px -5px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  border: 1px solid rgba(124,92,255,0.1);
}

/* Badge */

.yk-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1eaff;
  color: #7c5cff;
  padding: 7px 18px;
  border-radius: 40px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 20px;
}

.yk-cta-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #ff9f2f;
  border-radius: 50%;
}

/* Title */

.yk-cta-title {
  font-size: 42px;
  font-weight: 800;
  color: #7c5cff;
  margin-bottom: 18px;
}

/* Subtext */

.yk-cta-subtext {
  font-size: 16px;
  color: #555;
  margin-bottom: 40px;
}

/* Buttons */

.yk-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.yk-btn-primary {
  background: linear-gradient(90deg,#7c5cff,#6a4de6);
  color: #fff;
  padding: 16px 28px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease;
}

.yk-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(124,92,255,0.4);
}

.yk-btn-secondary {
  background: #ff9100;
  color: #fff;
  padding: 16px 28px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease;
}

.yk-btn-secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(255,145,0,0.35);
}

/* Responsive */

@media(max-width:768px){
  .yk-cta-box{
    padding: 50px 30px;
  }

  .yk-cta-title{
    font-size: 30px;
  }
}

/* =========================================
   ABOUT US PAGE (page-about-us.php) — scoped
   Body classes (expected):
   - page-template-page-about-us
   - page-template-page-about-us-php
========================================= */

/* HARD WHITE BASE (scoped) */
body.page-template-page-about-us,
body.page-template-page-about-us-php{
  background:#fff !important;
}
body.page-template-page-about-us #page,
body.page-template-page-about-us .site,
body.page-template-page-about-us .site-content,
body.page-template-page-about-us main,
body.page-template-page-about-us .content-area,
body.page-template-page-about-us .site-main,
body.page-template-page-about-us-php #page,
body.page-template-page-about-us-php .site,
body.page-template-page-about-us-php .site-content,
body.page-template-page-about-us-php main,
body.page-template-page-about-us-php .content-area,
body.page-template-page-about-us-php .site-main{
  background:#fff !important;
}

/* WRAP */
body.page-template-page-about-us .ykWrap,
body.page-template-page-about-us-php .ykWrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
}

/* GLOBAL TYPO (scoped to .ykAbout wrapper) */
body.page-template-page-about-us .ykAbout,
body.page-template-page-about-us-php .ykAbout{
  font-family: system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial;
  color: var(--ink, #1E1E2E);
}
body.page-template-page-about-us .ykAbout h1,
body.page-template-page-about-us .ykAbout h2,
body.page-template-page-about-us .ykAbout h3,
body.page-template-page-about-us .ykAbout h4,
body.page-template-page-about-us-php .ykAbout h1,
body.page-template-page-about-us-php .ykAbout h2,
body.page-template-page-about-us-php .ykAbout h3,
body.page-template-page-about-us-php .ykAbout h4{
  color:#7E57C2 !important;
  letter-spacing:-.02em;
}
body.page-template-page-about-us .ykAbout p,
body.page-template-page-about-us-php .ykAbout p{
  color: rgba(30,30,46,.72);
  line-height:1.75;
  font-weight:650;
}

/* BUTTONS (scoped so header/global buttons don't get overridden) */
body.page-template-page-about-us .ykAbout .ykBtn,
body.page-template-page-about-us-php .ykAbout .ykBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 13px 18px;
  border-radius: 16px;
  text-decoration:none;
  font-weight: 950;
  border: 1px solid rgba(126,87,194,.28);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  will-change: transform;
}
body.page-template-page-about-us .ykAbout .ykBtn--primary,
body.page-template-page-about-us-php .ykAbout .ykBtn--primary{
  background:#7E57C2;
  color:#fff;
  box-shadow: 0 18px 48px rgba(126,87,194,.22);
}
body.page-template-page-about-us .ykAbout .ykBtn--primary:hover,
body.page-template-page-about-us-php .ykAbout .ykBtn--primary:hover{
  transform: translateY(-3px);
  filter: brightness(1.03);
  box-shadow: 0 26px 70px rgba(126,87,194,.28);
}
body.page-template-page-about-us .ykAbout .ykBtn--accent,
body.page-template-page-about-us-php .ykAbout .ykBtn--accent{
  background: var(--accent, #FF8C00);
  color:#1b1200;
  border-color: rgba(255,140,0,.35);
  box-shadow: 0 18px 48px rgba(255,140,0,.18);
}
body.page-template-page-about-us .ykAbout .ykBtn--accent:hover,
body.page-template-page-about-us-php .ykAbout .ykBtn--accent:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 70px rgba(255,140,0,.22);
}
body.page-template-page-about-us .ykAbout .ykBtn--ghost,
body.page-template-page-about-us-php .ykAbout .ykBtn--ghost{
  background:#ff8c00;
  color: var(--ink, #1E1E2E);
  box-shadow: 0 14px 34px rgba(30,30,46,.10);
  border-color: rgba(43,58,103,.14);
}
body.page-template-page-about-us .ykAbout .ykBtn--ghost:hover,
body.page-template-page-about-us-php .ykAbout .ykBtn--ghost:hover{
  transform: translateY(-3px);
}

/* SECTION SPACING */
body.page-template-page-about-us .ykSec,
body.page-template-page-about-us-php .ykSec{
  padding: clamp(44px, 6vw, 92px) 0;
}
body.page-template-page-about-us .ykSec--tight,
body.page-template-page-about-us-php .ykSec--tight{
  padding: clamp(34px, 5vw, 72px) 0;
}

/* PILL */
body.page-template-page-about-us .ykPill,
body.page-template-page-about-us-php .ykPill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(126,87,194,.18);
  box-shadow: 0 14px 32px rgba(126,87,194,.10);
  font-weight: 950;
  letter-spacing: .6px;
  font-size: 12px;
  text-transform: uppercase;
  color: #2B3A67;
}
body.page-template-page-about-us .ykPill__dot,
body.page-template-page-about-us-php .ykPill__dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background: var(--accent, #FF8C00);
  box-shadow: 0 0 0 5px rgba(255,140,0,.14);
}

/* HERO */
body.page-template-page-about-us .ykHero,
body.page-template-page-about-us-php .ykHero{
  position:relative;
  padding: clamp(34px, 4.2vw, 62px) 0 clamp(22px, 3vw, 42px);
  border-bottom: 1px solid rgba(43,58,103,.10);
  overflow:hidden;
  background:#fff;
  isolation:isolate;
}
body.page-template-page-about-us .ykHero::before,
body.page-template-page-about-us-php .ykHero::before{
  content:"";
  position:absolute;
  inset:-240px;
  background:
    radial-gradient(900px 520px at 16% 18%, rgba(126,87,194,.18), transparent 62%),
    radial-gradient(900px 520px at 88% 18%, rgba(43,58,103,.14), transparent 64%),
    radial-gradient(720px 520px at 50% 92%, rgba(255,140,0,.12), transparent 62%);
  pointer-events:none;
  z-index:0;
}
body.page-template-page-about-us .ykHeroGrid,
body.page-template-page-about-us-php .ykHeroGrid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items:center;
}
@media(max-width:980px){
  body.page-template-page-about-us .ykHeroGrid,
  body.page-template-page-about-us-php .ykHeroGrid{
    grid-template-columns:1fr;
    gap:16px;
  }
}

body.page-template-page-about-us .ykHeroTitle,
body.page-template-page-about-us-php .ykHeroTitle{
  margin: 14px 0 0;
  font-size: clamp(34px, 4.1vw, 58px);
  line-height: 1.03;
  letter-spacing: -1px;
  font-weight: 980;
  color:#7E57C2 !important;
}
body.page-template-page-about-us .ykHeroTitle span,
body.page-template-page-about-us-php .ykHeroTitle span{
  color: var(--primary, #2B3A67);
  background: none !important;
}
body.page-template-page-about-us .ykHeroSub,
body.page-template-page-about-us-php .ykHeroSub{
  margin-top: 12px;
  font-size: 16px;
  max-width: 62ch;
}
body.page-template-page-about-us .ykHeroActions,
body.page-template-page-about-us-php .ykHeroActions{
  margin-top: 16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
@media(max-width:980px){
  body.page-template-page-about-us .ykHeroActions .ykBtn,
  body.page-template-page-about-us-php .ykHeroActions .ykBtn{
    width:100%;
  }
}

/* HERO IMAGE CARD */
body.page-template-page-about-us .ykHeroMedia,
body.page-template-page-about-us-php .ykHeroMedia{
  position:relative;
  border-radius: 28px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(43,58,103,.14);
  box-shadow: 0 26px 80px rgba(30,30,46,.12);
  overflow:hidden;
  min-height: 360px;
  isolation:isolate;
}
body.page-template-page-about-us .ykHeroMedia::before,
body.page-template-page-about-us-php .ykHeroMedia::before{
  content:"";
  position:absolute;
  inset:-140px;
  background:
    radial-gradient(520px 320px at 18% 18%, rgba(126,87,194,.18), transparent 62%),
    radial-gradient(520px 320px at 82% 24%, rgba(43,58,103,.14), transparent 66%),
    radial-gradient(520px 360px at 45% 92%, rgba(255,140,0,.12), transparent 62%);
  opacity:.95;
  z-index:0;
  pointer-events:none;
}
body.page-template-page-about-us .ykHeroImg,
body.page-template-page-about-us-php .ykHeroImg{
  position:absolute;
  inset: 14px;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(43,58,103,.14);
  box-shadow: 0 18px 60px rgba(30,30,46,.12);
  z-index:1;
  transform: translateZ(0);
}
body.page-template-page-about-us .ykHeroImg img,
body.page-template-page-about-us-php .ykHeroImg img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .9s cubic-bezier(.16,.84,.44,1), filter .9s ease;
  filter: saturate(1.02) contrast(1.02);
}
body.page-template-page-about-us .ykHeroMedia:hover .ykHeroImg img,
body.page-template-page-about-us-php .ykHeroMedia:hover .ykHeroImg img{
  transform: scale(1.08);
  filter: saturate(1.08) contrast(1.05);
}
body.page-template-page-about-us .ykHeroBadge,
body.page-template-page-about-us-php .ykHeroBadge{
  position:absolute;
  right: 18px;
  bottom: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(43,58,103,.14);
  box-shadow: 0 18px 50px rgba(30,30,46,.12);
  padding: 12px 14px;
  display:flex;
  gap:10px;
  align-items:center;
  z-index:2;
}
body.page-template-page-about-us .ykHeroBadge .p,
body.page-template-page-about-us-php .ykHeroBadge .p{
  width:42px;
  height:42px;
  border-radius:14px;
  background: rgba(126,87,194,.12);
  border: 1px solid rgba(126,87,194,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 980;
  color: #7E57C2;
}
body.page-template-page-about-us .ykHeroBadge .t,
body.page-template-page-about-us-php .ykHeroBadge .t{
  font-weight: 980;
  color: var(--ink, #1E1E2E);
}
body.page-template-page-about-us .ykHeroBadge .s,
body.page-template-page-about-us-php .ykHeroBadge .s{
  color: rgba(30,30,46,.70);
  font-weight: 750;
  font-size: 12px;
}

/* HERO “moving chips” */
body.page-template-page-about-us .ykMarquee,
body.page-template-page-about-us-php .ykMarquee{
  margin-top: 18px;
  position:relative;
  overflow:hidden;
  border-radius: 999px;
  border: 1px solid rgba(126,87,194,.14);
  background: rgba(255,255,255,.70);
  box-shadow: 0 14px 40px rgba(30,30,46,.08);
}
body.page-template-page-about-us .ykMarqueeTrack,
body.page-template-page-about-us-php .ykMarqueeTrack{
  display:flex;
  gap: 10px;
  padding: 10px;
  width:max-content;
  animation: ykMarq 22s linear infinite;
}
body.page-template-page-about-us .ykChip,
body.page-template-page-about-us-php .ykChip{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(126,87,194,.16);
  color: rgba(30,30,46,.78);
  font-weight: 850;
  font-size: 13px;
  transition: transform .2s ease, box-shadow .2s ease;
}
body.page-template-page-about-us .ykChip:hover,
body.page-template-page-about-us-php .ykChip:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(126,87,194,.14);
}
/* keyframes already defined globally for services; safe to reuse */
@media (prefers-reduced-motion: reduce){
  body.page-template-page-about-us .ykMarqueeTrack,
  body.page-template-page-about-us-php .ykMarqueeTrack{
    animation:none !important;
  }
}

/* STORY + STATS */
body.page-template-page-about-us .ykStoryGrid,
body.page-template-page-about-us-php .ykStoryGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: start;
}
@media(max-width:980px){
  body.page-template-page-about-us .ykStoryGrid,
  body.page-template-page-about-us-php .ykStoryGrid{
    grid-template-columns:1fr;
  }
}

body.page-template-page-about-us .ykPanel,
body.page-template-page-about-us-php .ykPanel{
  border-radius: 28px;
  padding: clamp(16px, 2.6vw, 28px);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(43,58,103,.14);
  box-shadow: 0 26px 76px rgba(30,30,46,.10);
  overflow:hidden;
  position:relative;
}
body.page-template-page-about-us .ykPanel::before,
body.page-template-page-about-us-php .ykPanel::before{
  content:"";
  position:absolute;
  inset:-160px;
  background:
    radial-gradient(720px 420px at 18% 18%, rgba(126,87,194,.14), transparent 62%),
    radial-gradient(720px 420px at 82% 24%, rgba(43,58,103,.12), transparent 66%),
    radial-gradient(720px 480px at 50% 92%, rgba(255,140,0,.10), transparent 62%);
  opacity:.8;
  pointer-events:none;
}
body.page-template-page-about-us .ykPanel > *,
body.page-template-page-about-us-php .ykPanel > *{
  position:relative;
  z-index:1;
}

body.page-template-page-about-us .ykMiniGrid,
body.page-template-page-about-us-php .ykMiniGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media(max-width:520px){
  body.page-template-page-about-us .ykMiniGrid,
  body.page-template-page-about-us-php .ykMiniGrid{
    grid-template-columns:1fr;
  }
}

body.page-template-page-about-us .ykStat,
body.page-template-page-about-us-php .ykStat{
  border-radius: 22px;
  padding: 16px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(43,58,103,.12);
  box-shadow: 0 18px 50px rgba(30,30,46,.08);
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease;
  position:relative;
  overflow:hidden;
}
body.page-template-page-about-us .ykStat::after,
body.page-template-page-about-us-php .ykStat::after{
  content:"";
  position:absolute;
  inset:-90px;
  background: radial-gradient(420px 220px at 18% 22%, rgba(126,87,194,.12), transparent 65%);
  opacity:.75;
  pointer-events:none;
}
body.page-template-page-about-us .ykStat:hover,
body.page-template-page-about-us-php .ykStat:hover{
  transform: translateY(-8px);
  box-shadow: 0 28px 90px rgba(126,87,194,.16);
}
body.page-template-page-about-us .ykStatN,
body.page-template-page-about-us-php .ykStatN{
  font-size: 28px;
  font-weight: 1000;
  color:#7E57C2;
  letter-spacing:-.02em;
}
body.page-template-page-about-us .ykStatT,
body.page-template-page-about-us-php .ykStatT{
  margin-top: 6px;
  font-weight: 900;
  color: rgba(30,30,46,.80);
}

/* MVV */
body.page-template-page-about-us .ykMVVGrid,
body.page-template-page-about-us-php .ykMVVGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 16px;
}
@media(max-width:980px){
  body.page-template-page-about-us .ykMVVGrid,
  body.page-template-page-about-us-php .ykMVVGrid{
    grid-template-columns:1fr;
  }
}

body.page-template-page-about-us .ykMVV,
body.page-template-page-about-us-php .ykMVV{
  border-radius: 26px;
  padding: 18px 18px 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(43,58,103,.14);
  box-shadow: 0 22px 68px rgba(30,30,46,.10);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;
  overflow:hidden;
}
body.page-template-page-about-us .ykMVV::before,
body.page-template-page-about-us-php .ykMVV::before{
  content:"";
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(520px 260px at 18% 18%, rgba(126,87,194,.14), transparent 62%),
    radial-gradient(520px 260px at 82% 24%, rgba(43,58,103,.12), transparent 66%),
    radial-gradient(520px 300px at 45% 92%, rgba(255,140,0,.10), transparent 62%);
  opacity:.7;
  pointer-events:none;
}
body.page-template-page-about-us .ykMVV > *,
body.page-template-page-about-us-php .ykMVV > *{
  position:relative;
  z-index:1;
}

body.page-template-page-about-us .ykMVVIco,
body.page-template-page-about-us-php .ykMVVIco{
  width: 52px;
  height:52px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(126,87,194,.18), rgba(255,255,255,.72));
  border: 1px solid rgba(126,87,194,.20);
  box-shadow: 0 16px 40px rgba(126,87,194,.14);
  font-size: 22px;
}
body.page-template-page-about-us .ykMVV h3,
body.page-template-page-about-us-php .ykMVV h3{
  margin: 12px 0 8px;
  font-size: 18px;
  font-weight: 1000;
}
body.page-template-page-about-us .ykMVV:hover,
body.page-template-page-about-us-php .ykMVV:hover{
  transform: translateY(-10px);
  border-color: rgba(126,87,194,.22);
  box-shadow: 0 34px 120px rgba(126,87,194,.18);
}

/* TIMELINE */
body.page-template-page-about-us .ykTimeline,
body.page-template-page-about-us-php .ykTimeline{
  position:relative;
  border-radius: 28px;
  padding: clamp(16px, 2.6vw, 28px);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(43,58,103,.14);
  box-shadow: 0 26px 76px rgba(30,30,46,.10);
  overflow:hidden;
}
body.page-template-page-about-us .ykTimeline::before,
body.page-template-page-about-us-php .ykTimeline::before{
  content:"";
  position:absolute;
  inset:-160px;
  background:
    radial-gradient(720px 420px at 20% 18%, rgba(43,58,103,.14), transparent 62%),
    radial-gradient(720px 420px at 82% 24%, rgba(126,87,194,.16), transparent 66%),
    radial-gradient(720px 480px at 50% 92%, rgba(255,140,0,.10), transparent 62%);
  opacity:.85;
  pointer-events:none;
}
body.page-template-page-about-us .ykTimeline > *,
body.page-template-page-about-us-php .ykTimeline > *{
  position:relative;
  z-index:1;
}
body.page-template-page-about-us .ykLine,
body.page-template-page-about-us-php .ykLine{
  display:grid;
  gap: 12px;
  margin-top: 14px;
}
body.page-template-page-about-us .ykStep,
body.page-template-page-about-us-php .ykStep{
  display:grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items:start;
  border-radius: 22px;
  padding: 14px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(43,58,103,.12);
  box-shadow: 0 18px 50px rgba(30,30,46,.08);
  transition: transform .22s ease, box-shadow .22s ease;
}
body.page-template-page-about-us .ykStep:hover,
body.page-template-page-about-us-php .ykStep:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 90px rgba(126,87,194,.16);
}
body.page-template-page-about-us .ykStepN,
body.page-template-page-about-us-php .ykStepN{
  width:56px;
  height:56px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  color:#fff;
  background:#7E57C2;
  box-shadow: 0 18px 50px rgba(126,87,194,.22);
}
body.page-template-page-about-us .ykStep h4,
body.page-template-page-about-us-php .ykStep h4{
  margin: 2px 0 6px;
  font-size: 16px;
  font-weight: 1000;
  color:#7E57C2 !important;
}
body.page-template-page-about-us .ykStep p,
body.page-template-page-about-us-php .ykStep p{
  margin:0;
}

/* CTA (About page version) */
body.page-template-page-about-us .ykCTA,
body.page-template-page-about-us-php .ykCTA{
  position:relative;
  border-radius: 28px;
  padding: clamp(18px, 2.8vw, 32px);
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(43,58,103,.14);
  box-shadow: 0 28px 90px rgba(30,30,46,.12);
  overflow:hidden;
  text-align:center;
}
body.page-template-page-about-us .ykCTA::before,
body.page-template-page-about-us-php .ykCTA::before{
  content:"";
  position:absolute;
  inset:-180px;
  background:
    radial-gradient(720px 420px at 18% 18%, rgba(126,87,194,.16), transparent 62%),
    radial-gradient(720px 420px at 82% 24%, rgba(43,58,103,.14), transparent 66%),
    radial-gradient(720px 480px at 50% 92%, rgba(255,140,0,.12), transparent 62%);
  pointer-events:none;
  opacity:.92;
}
body.page-template-page-about-us .ykCTA > *,
body.page-template-page-about-us-php .ykCTA > *{
  position:relative;
  z-index:1;
}
body.page-template-page-about-us .ykCTATitle,
body.page-template-page-about-us-php .ykCTATitle{
  margin:0;
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 1000;
  color:#7E57C2 !important;
}
body.page-template-page-about-us .ykCTASub,
body.page-template-page-about-us-php .ykCTASub{
  margin: 10px auto 0;
  max-width: 70ch;
}
body.page-template-page-about-us .ykCTAAct,
body.page-template-page-about-us-php .ykCTAAct{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap:wrap;
}
@media(max-width:980px){
  body.page-template-page-about-us .ykCTAAct a,
  body.page-template-page-about-us-php .ykCTAAct a{
    width:100%;
  }
}

/* REVEAL */
body.page-template-page-about-us .ykReveal,
body.page-template-page-about-us-php .ykReveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}
body.page-template-page-about-us .ykReveal.is-in,
body.page-template-page-about-us-php .ykReveal.is-in{
  opacity:1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  body.page-template-page-about-us .ykReveal,
  body.page-template-page-about-us-php .ykReveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  body.page-template-page-about-us .ykTeam,
  body.page-template-page-about-us .ykStat,
  body.page-template-page-about-us .ykMVV,
  body.page-template-page-about-us .ykStep,
  body.page-template-page-about-us-php .ykTeam,
  body.page-template-page-about-us-php .ykStat,
  body.page-template-page-about-us-php .ykMVV,
  body.page-template-page-about-us-php .ykStep{
    transition:none !important;
  }
}

/* =====================================================================
   CONTACT PAGE — scoped to template: page-contact-us.php
   (page-only styles to avoid global conflicts)
===================================================================== */

/* Scope helper (covers both possible body classes) */
body.page-template-page-contact-us-php,
body.page-template-page-contact-us{
  /* page-only tokens (do NOT put in :root globally) */
  --lav-bg-0:#fbf9ff;
  --lav-bg-1:#f4efff;

  --ykc-ink:#151423;
  --ykc-muted:rgba(21,20,35,.68);

  --ykc-primary:#ff8c00;
  --ykc-primary-2:#7e57c2;
  --ykc-ring: rgba(126,87,194,.18);

  --ykc-shadow: 0 16px 50px rgba(21,20,35,.10);
  --ykc-shadow2: 0 10px 24px rgba(21,20,35,.08);
  --ykc-radius: 26px;
}

/* 1) Page-only box sizing reset (avoid touching whole site) */
body.page-template-page-contact-us-php *,
body.page-template-page-contact-us-php *::before,
body.page-template-page-contact-us-php *::after,
body.page-template-page-contact-us *,
body.page-template-page-contact-us *::before,
body.page-template-page-contact-us *::after{
  box-sizing:border-box;
}

/* Base wrapper you use in template */
body.page-template-page-contact-us-php .ykBodyFix,
body.page-template-page-contact-us .ykBodyFix{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ykc-ink);
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(126,87,194,.12), transparent 60%),
    radial-gradient(900px 560px at 85% 20%, rgba(255,140,0,.10), transparent 55%),
    radial-gradient(1000px 700px at 50% 90%, rgba(218,201,255,.28), transparent 60%),
    linear-gradient(180deg, var(--lav-bg-0), var(--lav-bg-1));
  padding: clamp(18px, 3vw, 36px);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

body.page-template-page-contact-us-php .ykBodyFix .wrap,
body.page-template-page-contact-us .ykBodyFix .wrap{
  min-height:60vh;
  display:grid;
  place-items:center;
}

body.page-template-page-contact-us-php .ykBodyFix .shell,
body.page-template-page-contact-us .ykBodyFix .shell{
  width:min(1060px,100%);
  display:grid;
  gap:18px;
}

/* Card */
body.page-template-page-contact-us-php .ykBodyFix .card,
body.page-template-page-contact-us .ykBodyFix .card{
  position:relative;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(21,20,35,.10);
  border-radius:var(--ykc-radius);
  box-shadow:var(--ykc-shadow);
  overflow:hidden;
  isolation:isolate;
}
body.page-template-page-contact-us-php .ykBodyFix .card::before,
body.page-template-page-contact-us .ykBodyFix .card::before{
  content:"";
  position:absolute; inset:-2px;
  background:conic-gradient(from 180deg at 50% 50%,
    rgba(126,87,194,.50),
    rgba(255,140,0,.45),
    rgba(126,87,194,.50)
  );
  filter:blur(14px);
  opacity:.38;
  z-index:0;
}
body.page-template-page-contact-us-php .ykBodyFix .card::after,
body.page-template-page-contact-us .ykBodyFix .card::after{
  content:"";
  position:absolute; inset:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.80));
  border-radius:calc(var(--ykc-radius) - 1px);
  z-index:0;
}
body.page-template-page-contact-us-php .ykBodyFix .inner,
body.page-template-page-contact-us .ykBodyFix .inner{
  position:relative;
  z-index:1;
  padding:clamp(22px,3.2vw,36px);
}

/* Head */
body.page-template-page-contact-us-php .ykBodyFix .head,
body.page-template-page-contact-us .ykBodyFix .head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
body.page-template-page-contact-us-php .ykBodyFix .title,
body.page-template-page-contact-us .ykBodyFix .title{
  margin:0;
  font-size:clamp(22px,2.3vw,32px);
  letter-spacing:-0.02em;
  line-height:1.15;
}
body.page-template-page-contact-us-php .ykBodyFix .sub,
body.page-template-page-contact-us .ykBodyFix .sub{
  margin:8px 0 0;
  color:var(--ykc-muted);
  line-height:1.45;
  max-width:56ch;
  font-size:14px;
}
body.page-template-page-contact-us-php .ykBodyFix .badge,
body.page-template-page-contact-us .ykBodyFix .badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(126,87,194,.10);
  border:1px solid rgba(126,87,194,.18);
  color:rgba(21,20,35,.86);
  font-size:12px;
  white-space:nowrap;
  align-self:flex-start;
  line-height:1;
}
body.page-template-page-contact-us-php .ykBodyFix .dot,
body.page-template-page-contact-us .ykBodyFix .dot{
  width:10px;height:10px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%,#fff,rgba(255,255,255,0) 45%),
    linear-gradient(135deg,var(--ykc-primary-2),var(--ykc-primary));
  box-shadow:0 0 0 6px rgba(126,87,194,.10);
}

/* 2-column layout */
body.page-template-page-contact-us-php .ykBodyFix .split,
body.page-template-page-contact-us .ykBodyFix .split{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 18px;
  margin-top: 18px;
  align-items: stretch;
}

/* Left side (details) */
body.page-template-page-contact-us-php .ykBodyFix .info,
body.page-template-page-contact-us .ykBodyFix .info{
  border-radius: 22px;
  border:1px solid rgba(21,20,35,.10);
  background:
    radial-gradient(1000px 500px at 10% 0%, rgba(126,87,194,.14), transparent 55%),
    radial-gradient(900px 520px at 90% 10%, rgba(255,140,0,.12), transparent 55%),
    rgba(255,255,255,.86);
  box-shadow: var(--ykc-shadow2);
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
body.page-template-page-contact-us-php .ykBodyFix .infoTop,
body.page-template-page-contact-us .ykBodyFix .infoTop{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
body.page-template-page-contact-us-php .ykBodyFix .infoIcon,
body.page-template-page-contact-us .ykBodyFix .infoIcon{
  width: 46px; height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  color:#fff;
  background: linear-gradient(135deg, var(--ykc-primary-2), var(--ykc-primary));
  box-shadow: 0 16px 40px rgba(126,87,194,.18);
  flex: 0 0 auto;
  font-weight: 900;
  font-size: 18px;
}
body.page-template-page-contact-us-php .ykBodyFix .infoTitle,
body.page-template-page-contact-us .ykBodyFix .infoTitle{
  margin:0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
}
body.page-template-page-contact-us-php .ykBodyFix .infoText,
body.page-template-page-contact-us .ykBodyFix .infoText{
  margin:6px 0 0;
  color: var(--ykc-muted);
  font-size: 13px;
  line-height: 1.45;
}
body.page-template-page-contact-us-php .ykBodyFix .infoList,
body.page-template-page-contact-us .ykBodyFix .infoList{
  display:grid;
  gap: 10px;
  margin-top: 6px;
}
body.page-template-page-contact-us-php .ykBodyFix .infoRow,
body.page-template-page-contact-us .ykBodyFix .infoRow{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(126,87,194,.14);
  background: rgba(255,255,255,.82);
}
body.page-template-page-contact-us-php .ykBodyFix .infoRow__ic,
body.page-template-page-contact-us .ykBodyFix .infoRow__ic{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(126,87,194,.10);
  border: 1px solid rgba(126,87,194,.18);
  color: rgba(21,20,35,.90);
  flex:0 0 auto;
  font-weight: 900;
}
body.page-template-page-contact-us-php .ykBodyFix .infoRow__label,
body.page-template-page-contact-us .ykBodyFix .infoRow__label{
  font-size: 12px;
  color: rgba(21,20,35,.68);
  margin: 0;
  font-weight: 700;
}
body.page-template-page-contact-us-php .ykBodyFix .infoRow__value,
body.page-template-page-contact-us .ykBodyFix .infoRow__value{
  margin: 2px 0 0;
  font-weight: 800;
  color: rgba(21,20,35,.92);
  font-size: 13.5px;
  line-height: 1.35;
  word-break: break-word;
}
body.page-template-page-contact-us-php .ykBodyFix .infoRow__value a,
body.page-template-page-contact-us .ykBodyFix .infoRow__value a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(21,20,35,.25);
}
body.page-template-page-contact-us-php .ykBodyFix .infoRow__value a:hover,
body.page-template-page-contact-us .ykBodyFix .infoRow__value a:hover{
  border-bottom-color: rgba(21,20,35,.55);
}

/* Form */
body.page-template-page-contact-us-php .ykBodyFix form,
body.page-template-page-contact-us .ykBodyFix form{ margin:0; }

body.page-template-page-contact-us-php .ykBodyFix .grid,
body.page-template-page-contact-us .ykBodyFix .grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: 16px 18px;
}
body.page-template-page-contact-us-php .ykBodyFix .field,
body.page-template-page-contact-us .ykBodyFix .field{ grid-column:span 1; }
body.page-template-page-contact-us-php .ykBodyFix .field.full,
body.page-template-page-contact-us .ykBodyFix .field.full{ grid-column:1/-1; }

body.page-template-page-contact-us-php .ykBodyFix label,
body.page-template-page-contact-us .ykBodyFix label{
  display:flex;
  gap:6px;
  align-items:center;
  font-size:13px;
  color:rgba(21,20,35,.84);
  font-weight:700;
  margin: 0 0 6px;
  line-height: 1.2;
}
body.page-template-page-contact-us-php .ykBodyFix .req,
body.page-template-page-contact-us .ykBodyFix .req{
  color:#d11;
  font-weight:800;
}

body.page-template-page-contact-us-php .ykBodyFix input,
body.page-template-page-contact-us-php .ykBodyFix textarea,
body.page-template-page-contact-us-php .ykBodyFix select,
body.page-template-page-contact-us .ykBodyFix input,
body.page-template-page-contact-us .ykBodyFix textarea,
body.page-template-page-contact-us .ykBodyFix select{
  width:100%;
  border-radius:14px;
  border: 1px solid rgba(126,87,194,.22);
  background: rgba(255,255,255,.94);
  color: var(--ykc-ink);

  font:inherit;
  font-size:15px;
  line-height:1.35;

  padding:12px 14px;
  outline:none;
  box-shadow:none;
  transition: box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

body.page-template-page-contact-us-php .ykBodyFix input,
body.page-template-page-contact-us-php .ykBodyFix select,
body.page-template-page-contact-us .ykBodyFix input,
body.page-template-page-contact-us .ykBodyFix select{
  height:48px;
  padding-top:0;
  padding-bottom:0;
}

body.page-template-page-contact-us-php .ykBodyFix textarea,
body.page-template-page-contact-us .ykBodyFix textarea{
  min-height:120px;
  resize:vertical;
}

body.page-template-page-contact-us-php .ykBodyFix input::placeholder,
body.page-template-page-contact-us-php .ykBodyFix textarea::placeholder,
body.page-template-page-contact-us .ykBodyFix input::placeholder,
body.page-template-page-contact-us .ykBodyFix textarea::placeholder{
  color: rgba(21,20,35,.52);
}

body.page-template-page-contact-us-php .ykBodyFix input:focus,
body.page-template-page-contact-us-php .ykBodyFix textarea:focus,
body.page-template-page-contact-us-php .ykBodyFix select:focus,
body.page-template-page-contact-us .ykBodyFix input:focus,
body.page-template-page-contact-us .ykBodyFix textarea:focus,
body.page-template-page-contact-us .ykBodyFix select:focus{
  border-color: rgba(126,87,194,.55);
  box-shadow: 0 0 0 4px var(--ykc-ring);
  transform:none !important;
}

/* Scheduler */
body.page-template-page-contact-us-php .ykBodyFix .scheduler,
body.page-template-page-contact-us .ykBodyFix .scheduler{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:14px;
  align-items:start;
}
body.page-template-page-contact-us-php .ykBodyFix .slots,
body.page-template-page-contact-us .ykBodyFix .slots{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(126,87,194,.18);
  background:rgba(255,255,255,.92);
  min-height:48px;
  margin-top:19px;
}
body.page-template-page-contact-us-php .ykBodyFix .slotGrid,
body.page-template-page-contact-us .ykBodyFix .slotGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
body.page-template-page-contact-us-php .ykBodyFix .slotBtn,
body.page-template-page-contact-us .ykBodyFix .slotBtn{
  border:1px solid rgba(21,20,35,.12);
  background:rgba(244,239,255,.55);
  border-radius:12px;
  padding:10px;
  font:inherit;
  font-weight:700;
  font-size:13px;
  color:rgba(21,20,35,.88);
  cursor:pointer;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
body.page-template-page-contact-us-php .ykBodyFix .slotBtn:hover,
body.page-template-page-contact-us .ykBodyFix .slotBtn:hover{
  transform: translateY(-1px);
  filter:saturate(1.02);
}
body.page-template-page-contact-us-php .ykBodyFix .slotBtn[aria-pressed="true"],
body.page-template-page-contact-us .ykBodyFix .slotBtn[aria-pressed="true"]{
  background:linear-gradient(135deg,rgba(126,87,194,.95),rgba(255,140,0,.85));
  border-color:rgba(255,255,255,.22);
  color:#fff;
  box-shadow: 0 18px 40px rgba(126,87,194,.18);
}
body.page-template-page-contact-us-php .ykBodyFix .slotBtn:disabled,
body.page-template-page-contact-us .ykBodyFix .slotBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}

body.page-template-page-contact-us-php .ykBodyFix .mini,
body.page-template-page-contact-us .ykBodyFix .mini{
  font-size:12px;
  color:rgba(21,20,35,.62);
  margin-top:8px;
}

/* Consent */
body.page-template-page-contact-us-php .ykBodyFix .consent,
body.page-template-page-contact-us .ykBodyFix .consent{
  display:flex;
  gap:10px;
  align-items:center;
  margin:12px 0 2px;
  color:rgba(21,20,35,.70);
  font-size:13px;
  line-height:1.35;
}
body.page-template-page-contact-us-php .ykBodyFix .consent input,
body.page-template-page-contact-us .ykBodyFix .consent input{
  width:18px;height:18px;
  margin-top:0;
  accent-color: var(--ykc-primary-2);
}

/* Actions + button */
body.page-template-page-contact-us-php .ykBodyFix .actions,
body.page-template-page-contact-us .ykBodyFix .actions{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-top:18px;
}
body.page-template-page-contact-us-php .ykBodyFix .btn,
body.page-template-page-contact-us .ykBodyFix .btn{
  appearance:none;
  border:0;
  cursor:pointer;
  border-radius:18px;
  padding:14px 16px;
  font:inherit;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:100%;
  height:56px;
  position:relative;
  overflow:hidden;
}
body.page-template-page-contact-us-php .ykBodyFix .btnPrimary,
body.page-template-page-contact-us .ykBodyFix .btnPrimary{
  color:#fff;
  background: linear-gradient(135deg, #ff8c00, #ffb000);
  box-shadow: 0 18px 46px rgba(255,140,0,.22);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
body.page-template-page-contact-us-php .ykBodyFix .btnPrimary:hover,
body.page-template-page-contact-us .ykBodyFix .btnPrimary:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 60px rgba(255,140,0,.26);
  filter:saturate(1.04);
}
body.page-template-page-contact-us-php .ykBodyFix .btnPrimary:active,
body.page-template-page-contact-us .ykBodyFix .btnPrimary:active{
  transform: translateY(0) scale(.99);
}

/* Toast */
body.page-template-page-contact-us-php .ykBodyFix .toast,
body.page-template-page-contact-us .ykBodyFix .toast{
  margin-top:14px;
  display:none;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(21,20,35,.12);
  background:rgba(255,255,255,.92);
}
body.page-template-page-contact-us-php .ykBodyFix .toast.show,
body.page-template-page-contact-us .ykBodyFix .toast.show{ display:block; }

/* =========================================================
   ✅ MODAL (IMPORTANT FIX)
   Your modal #ykThanks is OUTSIDE .ykBodyFix in the template,
   so selectors must NOT depend on ".ykBodyFix .ykModal"
========================================================= */

/* Hard-hide when HTML has hidden attribute */
body.page-template-page-contact-us-php .ykModal[hidden],
body.page-template-page-contact-us .ykModal[hidden]{
  display:none !important;
}

/* Base modal */
body.page-template-page-contact-us-php .ykModal,
body.page-template-page-contact-us .ykModal{
  position:fixed;
  inset:0;
  display:none; /* hidden by default */
  place-items:center;
  z-index:99999;
}

/* Show state (JS adds .show and removes hidden) */
body.page-template-page-contact-us-php .ykModal.show,
body.page-template-page-contact-us .ykModal.show{
  display:grid;
}

body.page-template-page-contact-us-php .ykModal__backdrop,
body.page-template-page-contact-us .ykModal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,8,18,.45);
  backdrop-filter:blur(8px);
}

body.page-template-page-contact-us-php .ykModal__card,
body.page-template-page-contact-us .ykModal__card{
  position:relative;
  width:min(520px,calc(100% - 24px));
  background:rgba(255,255,255,.92);
  border:1px solid rgba(21,20,35,.12);
  border-radius:22px;
  padding:20px;
  z-index:1;
}

body.page-template-page-contact-us-php .ykModal__close,
body.page-template-page-contact-us .ykModal__close{
  position:absolute;
  top:10px;right:10px;
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid rgba(21,20,35,.12);
  background:rgba(244,239,255,.7);
  cursor:pointer;
  font-weight:900;
}

body.page-template-page-contact-us-php .ykModal__icon,
body.page-template-page-contact-us .ykModal__icon{
  width:56px;height:56px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,#7e57c2,#ff8c00);
  font-weight:900;
  font-size:26px;
  margin-bottom:10px;
}

body.page-template-page-contact-us-php .ykModal__btn,
body.page-template-page-contact-us .ykModal__btn{
  border:0;
  border-radius:14px;
  padding:12px 14px;
  color:#fff;
  font-weight:800;
  cursor:pointer;
  background:linear-gradient(135deg,#ff8c00,#ffb000);
}

/* Responsive */
@media (max-width: 980px){
  body.page-template-page-contact-us-php .ykBodyFix .split,
  body.page-template-page-contact-us .ykBodyFix .split{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 860px){
  body.page-template-page-contact-us-php .ykBodyFix .grid,
  body.page-template-page-contact-us .ykBodyFix .grid{
    grid-template-columns:1fr;
  }
  body.page-template-page-contact-us-php .ykBodyFix .scheduler,
  body.page-template-page-contact-us .ykBodyFix .scheduler{
    grid-template-columns:1fr;
  }
  body.page-template-page-contact-us-php .ykBodyFix .slotGrid,
  body.page-template-page-contact-us .ykBodyFix .slotGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.page-template-page-contact-us-php .ykBodyFix .badge,
  body.page-template-page-contact-us .ykBodyFix .badge{
    display:none;
  }
  body.page-template-page-contact-us-php .ykBodyFix .inner,
  body.page-template-page-contact-us .ykBodyFix .inner{
    padding: 18px !important;
  }
}



/* =========================================================
   TEMPLATE: INDUSTRIES (scoped)
   File: page-industries.php
   Body class: .page-template-page-industries-php
========================================================= */

.page-template-page-industries-php{
  background:#fff !important;

  /* local variables for this template */
  --primary:#2B3A67;
  --secondary:#7E57C2; /* required */
  --accent:#FF8C00;
  --dark:#333333;

  --ink:#121225;
  --muted:rgba(18,18,37,.70);

  --radius:22px;
  --radius2:28px;
  --b:1px solid rgba(43,58,103,.12);
  --shadow: 0 26px 90px rgba(18,18,37,.10);
  --shadow2: 0 44px 140px rgba(126,87,194,.20);
}

.page-template-page-industries-php #page,
.page-template-page-industries-php .site,
.page-template-page-industries-php .site-content,
.page-template-page-industries-php main,
.page-template-page-industries-php .content-area,
.page-template-page-industries-php .site-main{
  background:#fff !important;
}

.page-template-page-industries-php .ykInd{
  font-family: system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial;
  color:var(--ink);
}
.page-template-page-industries-php .ykInd p{ color:var(--muted); line-height:1.75; font-weight:650; }
.page-template-page-industries-php .ykInd h1,
.page-template-page-industries-php .ykInd h2,
.page-template-page-industries-php .ykInd h3{ color:var(--secondary) !important; letter-spacing:-.02em; }

/* Buttons (template scoped; won’t affect other pages) */
.page-template-page-industries-php .ykBtn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 12px 16px;
  border-radius: 16px;
  text-decoration:none;
  font-weight: 950;
  border: 1px solid rgba(126,87,194,.28);
  background:#ff8c00;
  color: white;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, background .22s ease, color .22s ease;
  will-change: transform;
  cursor:pointer;
}
.page-template-page-industries-php .ykBtn:hover{ transform: translateY(-3px); box-shadow: 0 18px 60px rgba(126,87,194,.16); }
.page-template-page-industries-php .ykBtn--primary{
  background: var(--secondary);
  color:#fff;
  box-shadow: 0 18px 54px rgba(126,87,194,.22);
}
.page-template-page-industries-php .ykBtn--primary:hover{ box-shadow: 0 28px 90px rgba(126,87,194,.30); filter: brightness(1.03); }
.page-template-page-industries-php .ykBtn--accent{
  background: var(--accent);
  color:#1a1200;
  border-color: rgba(255,140,0,.34);
  box-shadow: 0 18px 54px rgba(255,140,0,.18);
}
.page-template-page-industries-php .ykBtn--accent:hover{ box-shadow: 0 28px 90px rgba(255,140,0,.22); }

/* Pill */
.page-template-page-industries-php .ykPill{
  display:inline-flex; align-items:center; gap:10px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(126,87,194,.16);
  box-shadow: 0 14px 34px rgba(126,87,194,.10);
  font-weight: 950;
  letter-spacing:.6px;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--primary);
}
.page-template-page-industries-php .ykPillDot{
  width:9px; height:9px; border-radius:999px;
  background: var(--secondary);
  box-shadow: 0 0 0 5px rgba(126,87,194,.14);
}

/* Reveal */
.page-template-page-industries-php .ykReveal{ opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.page-template-page-industries-php .ykReveal.is-in{ opacity:1; transform: translateY(0); }

/* =========================================================
   HERO
========================================================= */
.page-template-page-industries-php .ykHero{
  position:relative;
  padding: clamp(42px, 5vw, 78px) 0 clamp(26px, 3vw, 54px);
  border-bottom: 1px solid rgba(43,58,103,.10);
  overflow:hidden;
  isolation:isolate;
  background:#fff;
}
.page-template-page-industries-php .ykHero::before{
  content:"";
  position:absolute;
  inset:-260px;
  background:
    radial-gradient(950px 560px at 12% 16%, rgba(126,87,194,.16), transparent 64%),
    radial-gradient(980px 560px at 88% 18%, rgba(43,58,103,.10), transparent 66%),
    radial-gradient(900px 620px at 55% 92%, rgba(255,140,0,.08), transparent 64%);
  pointer-events:none;
}
.page-template-page-industries-php .ykHeroGrid{
  position:relative;
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 26px;
  align-items:center;
}
@media(max-width:980px){
  .page-template-page-industries-php .ykHeroGrid{ grid-template-columns:1fr; gap:18px; }
}

.page-template-page-industries-php .ykHeroTitle{
  margin: 12px 0 0;
  font-size: clamp(36px, 4.3vw, 64px);
  line-height: 1.02;
  letter-spacing: -1px;
  font-weight: 1000;
  color: #121225 !important;
}
.page-template-page-industries-php .ykHeroTitle span{
  color: var(--secondary);
  text-shadow: 0 14px 40px rgba(126,87,194,.10);
}
.page-template-page-industries-php .ykHeroSub{
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.8;
  max-width: 72ch;
  color: rgba(18,18,37,.72);
  font-weight: 650;
}
.page-template-page-industries-php .ykHeroActions{
  margin-top: 18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
@media(max-width:980px){
  .page-template-page-industries-php .ykHeroActions .ykBtn{ width:100%; }
}

/* RIGHT UI PANEL */
.page-template-page-industries-php .ykVisual{
  position:relative;
  border-radius: 28px;
  border: 1px solid rgba(43,58,103,.12);
  background: #fff;
  box-shadow: 0 24px 70px rgba(30,30,46,.10);
  overflow:hidden;
  padding: 18px;
}
.page-template-page-industries-php .ykVisual::before{
  content:"";
  position:absolute;
  inset:-140px;
  background:
    radial-gradient(720px 420px at 18% 18%, rgba(126,87,194,.10), transparent 62%),
    radial-gradient(720px 420px at 86% 22%, rgba(43,58,103,.08), transparent 66%),
    radial-gradient(760px 520px at 55% 92%, rgba(255,140,0,.06), transparent 62%);
  opacity:.9;
  pointer-events:none;
}
.page-template-page-industries-php .ykBlob,
.page-template-page-industries-php .ykBlob2{ display:none !important; }

.page-template-page-industries-php .ykStats{
  position:relative;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  z-index:1;
}
.page-template-page-industries-php .ykStat{
  border-radius: 20px;
  border: 1px solid rgba(43,58,103,.10);
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 40px rgba(18,18,37,.06);
  padding: 16px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.page-template-page-industries-php .ykStat:hover{
  border-color: rgba(126,87,194,.22);
  box-shadow: 0 22px 60px rgba(126,87,194,.12);
}
.page-template-page-industries-php .ykStatTop{ display:flex; gap:8px; align-items:flex-start; }
.page-template-page-industries-php .ykIco{
  width:44px; height:44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(126,87,194,.10);
  border: 1px solid rgba(126,87,194,.18);
  color: var(--secondary);
  font-weight: 1000;
  flex:0 0 auto;
}
.page-template-page-industries-php .ykStatTop > div{ min-width:0; }
.page-template-page-industries-php .ykStatT{
  margin: 2px 0 0;
  font-weight: 1000;
  color: #121225;
  font-size: 14px;
  line-height: 1.2;
}
.page-template-page-industries-php .ykStatS{
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(18,18,37,.68);
  font-weight: 750;
}
@media (max-width: 680px){
  .page-template-page-industries-php .ykStats{ grid-template-columns: 1fr; }
}

/* =========================================================
   SECTION: WHAT WE SERVE
========================================================= */
.page-template-page-industries-php .ykSection{ padding: clamp(44px, 6vw, 92px) 0; margin-top:-18px;}
.page-template-page-industries-php .ykHead{ text-align:center; max-width: 940px; margin:0 auto 22px; }
.page-template-page-industries-php .ykHead h2{ margin:14px 0 8px; font-size: clamp(28px, 3.1vw, 44px); font-weight:1000; }
.page-template-page-industries-php .ykHead p{ margin:0 auto; max-width: 80ch; }

.page-template-page-industries-php .ykGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 30px;
  align-items: stretch;
}
@media(max-width:980px){
  .page-template-page-industries-php .ykGrid{ grid-template-columns:1fr; }
}

.page-template-page-industries-php .ykCard{
  position:relative;
  border-radius: var(--radius2);
  border: var(--b);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.page-template-page-industries-php .ykCard::after{
  content:"";
  position:absolute;
  inset:auto 18px -18px 18px;
  height: 28px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,.18), transparent 72%);
  filter: blur(10px);
  opacity:.35;
  z-index:0;
}
.page-template-page-industries-php .ykCard:hover{
  border-color: rgba(126,87,194,.22);
  box-shadow: var(--shadow2);
}

.page-template-page-industries-php .ykMedia{
  position:relative;
  height: 190px;
  overflow:hidden;
  background:
    radial-gradient(500px 260px at 20% 10%, rgba(126,87,194,.22), transparent 60%),
    radial-gradient(520px 280px at 85% 20%, rgba(43,58,103,.18), transparent 62%),
    radial-gradient(520px 300px at 55% 95%, rgba(255,140,0,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,1));
  border-bottom: 1px solid rgba(43,58,103,.10);
}
.page-template-page-industries-php .ykMedia img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: 1;
  filter: none;
  transform: scale(1.02);
  transition: transform .35s ease;
}
.page-template-page-industries-php .ykCard:hover .ykMedia img{ transform: scale(1.06); }

.page-template-page-industries-php .ykFloatIco{
  position:absolute;
  left: 14px; bottom: -18px;
  width: 54px; height: 54px;
  border-radius: 20px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(126,87,194,.22);
  box-shadow: 0 18px 50px rgba(126,87,194,.18);
  font-size: 26px;
}

.page-template-page-industries-php .ykBody{ position:relative; padding: 32px 16px 16px; z-index:1; }
.page-template-page-industries-php .ykTitle{
  margin: 0;
  font-size: 18px;
  font-weight: 1000;
  color: var(--secondary) !important;
}
.page-template-page-industries-php .ykLine{ margin-top: 8px; font-weight: 800; color: rgba(43,58,103,.78); }
.page-template-page-industries-php .ykMini{ margin-top: 10px; font-size: 14px; color: rgba(18,18,37,.70); font-weight: 650; }

.page-template-page-industries-php .ykChips{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 12px; }
.page-template-page-industries-php .ykChip{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(126,87,194,.14);
  color: rgba(18,18,37,.72);
  font-weight: 850;
  font-size: 13px;
}

.page-template-page-industries-php .ykDetails{
  margin-top: 12px;
  border-top: 1px solid rgba(43,58,103,.10);
  padding-top: 12px;
  overflow:hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height .45s ease, opacity .35s ease, transform .35s ease;
}
.page-template-page-industries-php .ykCard.is-open .ykDetails{
  max-height: 560px;
  opacity: 1;
  transform: translateY(0);
}

.page-template-page-industries-php .ykCols{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media(max-width:560px){
  .page-template-page-industries-php .ykCols{ grid-template-columns:1fr; }
}

.page-template-page-industries-php .ykBox{
  border-radius: 18px;
  border: 1px solid rgba(43,58,103,.12);
  background: rgba(255,255,255,.90);
  box-shadow: 0 14px 40px rgba(18,18,37,.08);
  padding: 12px;
}
.page-template-page-industries-php .ykBoxH{
  display:flex; align-items:center; gap:10px;
  font-weight: 1000;
  color: var(--secondary);
  margin: 0 0 8px;
}
.page-template-page-industries-php .ykBoxI{
  width:34px; height:34px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(126,87,194,.10);
  border: 1px solid rgba(126,87,194,.18);
  color: var(--secondary);
  font-weight:1000;
}
.page-template-page-industries-php .ykList{ margin:0; padding-left: 18px; display:grid; gap:7px; }
.page-template-page-industries-php .ykList li{ font-weight: 820; font-size: 13.6px; color: var(--primary); }

.page-template-page-industries-php .ykActions{ margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; }
@media(max-width:980px){
  .page-template-page-industries-php .ykActions .ykBtn{ width:100%; }
}

/* =========================================================
   CUSTOM SOLUTIONS
========================================================= */
.page-template-page-industries-php .ykSoft{
  position:relative;
  border-radius: var(--radius2);
  border: var(--b);
  background: rgba(255,255,255,.74);
  box-shadow: var(--shadow);
  padding: clamp(16px, 2.6vw, 28px);
  overflow:hidden;
}
.page-template-page-industries-php .ykSoft::before{
  content:"";
  position:absolute; inset:-180px;
  background:
    radial-gradient(720px 420px at 18% 18%, rgba(43,58,103,.12), transparent 62%),
    radial-gradient(720px 420px at 82% 24%, rgba(126,87,194,.14), transparent 66%),
    radial-gradient(720px 480px at 50% 92%, rgba(255,140,0,.10), transparent 62%);
  opacity:.92;
  pointer-events:none;
}
.page-template-page-industries-php .ykSoft > *{ position:relative; z-index:1; }
.page-template-page-industries-php .ykTwo{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media(max-width:980px){
  .page-template-page-industries-php .ykTwo{ grid-template-columns:1fr; }
}
.page-template-page-industries-php .ykMiniCard{
  border-radius: 18px;
  border: 1px solid rgba(43,58,103,.12);
  background: rgba(255,255,255,.90);
  box-shadow: 0 14px 40px rgba(18,18,37,.08);
  padding: 14px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.page-template-page-industries-php .ykMiniCard:hover{ transform: translateY(-6px); box-shadow: 0 26px 90px rgba(126,87,194,.14); }
.page-template-page-industries-php .ykMiniH{ margin:0; font-weight:1000; color: var(--secondary); }
.page-template-page-industries-php .ykMiniP{ margin:6px 0 0; }

/* CTA */
.page-template-page-industries-php .ykCTA{
  position:relative;
  border-radius: var(--radius2);
  border: var(--b);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow);
  padding: clamp(18px, 2.8vw, 32px);
  overflow:hidden;
  text-align:center;
}
.page-template-page-industries-php .ykCTA::before{
  content:"";
  position:absolute; inset:-180px;
  background:
    radial-gradient(720px 420px at 18% 18%, rgba(126,87,194,.16), transparent 62%),
    radial-gradient(720px 420px at 82% 24%, rgba(43,58,103,.12), transparent 66%),
    radial-gradient(720px 480px at 50% 92%, rgba(255,140,0,.12), transparent 62%);
  opacity:.92;
  pointer-events:none;
}
.page-template-page-industries-php .ykCTA > *{ position:relative; z-index:1; }
.page-template-page-industries-php .ykCTATitle{ margin:0; font-size: clamp(26px, 3vw, 42px); font-weight:1000; color: var(--secondary) !important; }
.page-template-page-industries-php .ykCTASub{ margin:10px auto 0; max-width: 80ch; }
.page-template-page-industries-php .ykCTAAct{ margin-top: 14px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
@media(max-width:980px){
  .page-template-page-industries-php .ykCTAAct a{ width:100%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .page-template-page-industries-php .ykReveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .page-template-page-industries-php .ykCard,
  .page-template-page-industries-php .ykVisual{ transform:none !important; }
}

/* =========================================================
   INDUSTRIES — STOP FULL-WIDTH STRETCH (FINAL FIX)
   Paste at END of Industries CSS
========================================================= */

/* 0) Safety: prevent any sideways overflow */
.page-template-page-industries-php,
.page-template-page-industries-php body{
  overflow-x: hidden !important;
}

/* 1) Hard-enforce the container everywhere on this template */
.page-template-page-industries-php .ykWrap{
  max-width: 1180px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* 2) If any old full-bleed rule exists (100vw + negative margins), kill it */
.page-template-page-industries-php .ykHero,
.page-template-page-industries-php .ykSection{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3) Ensure grids/cards never become viewport-wide */
.page-template-page-industries-php .ykHeroGrid,
.page-template-page-industries-php .ykHead,
.page-template-page-industries-php .ykGrid,
.page-template-page-industries-php .ykSoft,
.page-template-page-industries-php .ykCTA{
  max-width: 1180px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4) Keep grid spacing consistent (prevents “edge to edge” look) */
.page-template-page-industries-php .ykGrid{
  padding-left: 0 !important;   /* because it is already inside .ykWrap */
  padding-right: 0 !important;
}































/* ===============================
   HERO COLOR RESET (BLOCK FIX)
=============================== */
.hero .title{
  color:#121225 !important;
}

.hero .title .hl{
  color:#7E57C2 !important;
}

.hero .heroSub{
  color: rgba(18,18,37,.92) !important;
}

.hero .sub{
  color: rgba(18,18,37,.72) !important;
}
/* ===================================
   HERO — FORCE ORIGINAL TYPOGRAPHY
=================================== */
.hero{
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif !important;
}

.hero .kicker{
  font-weight: 900 !important;
  letter-spacing: .6px !important;
}

.hero .title{
  font-weight: 950 !important;
  line-height: 1.03 !important;
  letter-spacing: -1.05px !important;
}

.hero .heroSub{
  font-weight: 900 !important;
  line-height: 1.34 !important;
}

.hero .sub{
  font-weight: 650 !important;
  line-height: 1.65 !important;
  font-size: 16px !important;
}
.hero .sub{
  max-width: 56ch !important;
  color: rgba(18,18,37,.72) !important;
}