/* INNER PAGE DESIGN SYSTEM */
.page-hero { min-height: 570px; padding: 150px 0 86px; color:#fff; background: radial-gradient(circle at 78% 50%, rgba(124,58,237,.26), transparent 28%), linear-gradient(120deg,#050505,#14091f 62%,#241044); overflow:hidden; position:relative; }
.page-hero:after { content:''; position:absolute; inset:auto -12% -62% 35%; height:520px; border:1px solid rgba(255,255,255,.12); border-radius:50%; transform:rotate(-8deg); box-shadow:0 0 80px rgba(124,58,237,.22); }
.page-hero .container { position:relative; z-index:2; }
.page-hero h1 { max-width:860px; }
.service-image { overflow:hidden; border-radius:24px; box-shadow:0 28px 70px rgba(0,0,0,.18); }
.service-image img { width:100%; }
.feature-rows { display:grid; gap:0; margin-top:28px; border-top:1px solid #dedee7; }
.feature-row { display:grid; grid-template-columns:52px 180px 1fr; gap:20px; padding:18px 0; border-bottom:1px solid #dedee7; align-items:start; }
.feature-row b { color:var(--purple); font-size:12px; }
.metric-wall { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#d9d9e0; border:1px solid #d9d9e0; margin-top:30px; }
.metric { background:#fff; padding:26px; min-height:210px; }
.metric strong { color:var(--purple); }
.timeline { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:34px; }
.step { padding:18px; border-top:2px solid #18181b; }
.step strong { color:var(--purple); font-size:12px; }
.ticker { overflow:hidden; background:var(--purple); color:#fff; padding:10px 0; font-weight:900; font-size:12px; letter-spacing:.12em; white-space:nowrap; }
.ticker div { animation:marquee 24s linear infinite; }
.process-split { display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; }
.process-list { border-top:1px solid #ddd; }
.process-list > div { display:flex; justify-content:space-between; gap:20px; padding:19px 0; border-bottom:1px solid #ddd; }
.faq details { border-bottom:1px solid #d8d8df; padding:17px 0; }
.faq summary { cursor:pointer; font-weight:800; }
.icon-circle { width:54px; height:54px; border:1px solid #7c3aed; border-radius:50%; display:grid; place-items:center; color:#6d28d9; font-weight:1000; margin-bottom:14px; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:34px 28px; margin-top:34px; }
.benefit-item { text-align:center; padding:18px; }
.benefit-item .icon-circle { margin:0 auto 14px; }
.logo-row { display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin-top:28px; }
.logo-chip { padding:12px 16px; border:1px solid currentColor; opacity:.8; border-radius:12px; font-size:11px; font-weight:900; letter-spacing:.1em; }
.image-collage { min-height:460px; position:relative; border-radius:28px; overflow:hidden; background:linear-gradient(140deg,#180c28,#6d28d9); }
.image-collage img { position:absolute; width:46%; border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.3); }
.image-collage img:nth-child(1){left:8%;top:10%}.image-collage img:nth-child(2){right:5%;top:28%}.image-collage img:nth-child(3){left:22%;bottom:8%}
.ui-panel { border:1px solid #2a2a31; border-radius:20px; background:#0d0d10; color:#fff; padding:24px; }
.ui-row { display:grid; grid-template-columns:130px 1fr auto; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid #2b2b31; }
.ui-row:last-child { border-bottom:0; }
.ui-bar { height:7px; border-radius:20px; background:#27272d; overflow:hidden; }
.ui-bar span { display:block; height:100%; background:linear-gradient(90deg,#6d28d9,#a78bfa); border-radius:inherit; }
.dark-matrix { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#2b2b31; border:1px solid #2b2b31; }
.dark-matrix article { background:#08080b; padding:26px; min-height:220px; }
.dashboard-mock { background:#070709; color:#fff; border:1px solid #292930; border-radius:28px; padding:24px; box-shadow:0 28px 80px rgba(0,0,0,.35); }
.dashboard-top { display:flex; justify-content:space-between; gap:20px; align-items:center; padding-bottom:18px; border-bottom:1px solid #24242a; }
.dashboard-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:14px; margin-top:14px; }
.chart { min-height:220px; border:1px solid #24242a; border-radius:18px; background:linear-gradient(180deg,rgba(124,58,237,.12),transparent), repeating-linear-gradient(0deg,transparent,transparent 29px,#1c1c22 30px); position:relative; overflow:hidden; }
.chart:after { content:''; position:absolute; left:5%; right:5%; bottom:22%; height:90px; border-top:3px solid #a78bfa; border-radius:50% 30% 0 0; transform:skewY(-8deg); filter:drop-shadow(0 0 10px #7c3aed); }
.mini-stats { display:grid; gap:14px; }
.mini-stat { border:1px solid #24242a; border-radius:18px; padding:20px; background:#101014; }
.mini-stat strong { font-size:30px; display:block; }
.phone-stage { min-height:500px; background:radial-gradient(circle at 50% 55%,#d9f5ff,transparent 40%),#eef0f4; border-radius:28px; position:relative; overflow:hidden; }
.phone { position:absolute; width:190px; height:390px; border:9px solid #19191d; border-radius:34px; background:#fff; box-shadow:0 30px 60px rgba(0,0,0,.22); }
.phone:before { content:''; position:absolute; top:10px; left:50%; transform:translateX(-50%); width:64px; height:10px; border-radius:9px; background:#19191d; }
.phone:nth-child(1){left:16%;top:60px;transform:rotate(-12deg)}.phone:nth-child(2){left:40%;top:28px}.phone:nth-child(3){right:12%;top:82px;transform:rotate(10deg)}
.product-strip { display:flex; gap:16px; overflow:hidden; padding:20px 0; }
.product-card { flex:0 0 180px; height:220px; border-radius:20px; border:1px solid #ddd; background:linear-gradient(150deg,#fafafa,#ece9f5); display:grid; place-items:center; font-weight:900; }
.editorial-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:1px; background:#d8d8df; border:1px solid #d8d8df; }
.editorial-grid > div { background:#fff; padding:34px; min-height:260px; }
.social-board { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.social-tile { aspect-ratio:4/5; border-radius:18px; background:linear-gradient(145deg,#111,#6d28d9); color:#fff; padding:18px; display:flex; align-items:flex-end; font-weight:900; }
.pipeline { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.pipeline div { border:1px solid #2a2a30; border-radius:18px; padding:20px; background:#101014; min-height:150px; }
.page-variant-1 .page-hero{background:radial-gradient(circle at 70% 50%,rgba(124,58,237,.22),transparent 30%),#060607}.page-variant-2 .page-hero{background:linear-gradient(135deg,#150a22,#050505 70%)}.page-variant-3 .page-hero{background:radial-gradient(circle at 80% 30%,rgba(167,139,250,.25),transparent 24%),#070609}.page-variant-4 .page-hero{background:linear-gradient(120deg,#040404 42%,#30105e)}.page-variant-5 .page-hero{background:#0b0b0c}.page-variant-6 .page-hero{background:linear-gradient(120deg,#170924,#08080a)}.page-variant-7 .page-hero{background:radial-gradient(circle at 55% 75%,rgba(109,40,217,.25),transparent 30%),#050505}.page-variant-8 .page-hero{background:linear-gradient(130deg,#050505,#1d1032)}

/* LEGACY / SUPPORTING PAGE COMPONENTS */
.orbital {
  min-height: 420px;
  position: relative;
  border: 1px solid #25252b;
  border-radius: 28px;
  background: radial-gradient(circle at center, rgba(109,40,217,.24), transparent 28%), #0a0a0d;
  overflow: hidden;
}
.orbital:before,
.orbital:after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 72%; height: 72%;
  border: 1px solid rgba(167,139,250,.22);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.orbital:after { width: 48%; height: 48%; }
.orbital .center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 118px; height: 118px;
  border-radius: 50%;
  display: grid; place-items: center;
  text-align: center;
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid #8b5cf6;
  background: #111116;
  box-shadow: 0 0 45px rgba(124,58,237,.28);
}
.orbit-node {
  position: absolute;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  border: 1px solid #2e2e36;
  background: #111116;
  border-radius: 999px;
  padding: 10px 14px;
}
.orbit-node:nth-of-type(1){left:8%;top:18%}
.orbit-node:nth-of-type(2){right:8%;top:18%}
.orbit-node:nth-of-type(3){left:7%;bottom:17%}
.orbit-node:nth-of-type(4){right:7%;bottom:17%}
.mosaic { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mosaic > * { min-height:180px; border-radius:18px; overflow:hidden; }
.comparison { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.comparison .good, .comparison .bad { padding:28px; border-radius:22px; }
.comparison .bad { background:#0a0a0d; color:#fff; }
.comparison .good { background:#6d28d9; color:#fff; }

/* V9 UNIQUE INNER-PAGE DEPTH SECTIONS */
.capability-insight{overflow:hidden}.capability-insight-inner{display:grid;grid-template-columns:minmax(260px,.85fr) 1.6fr;gap:70px;align-items:start}.capability-insight-inner>p{font-size:16px;line-height:1.8;color:var(--muted)}.capability-points{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.capability-points article{padding:26px;border:1px solid var(--line);min-height:150px;transition:.35s ease}.capability-points article:hover{transform:translateY(-6px)}.capability-points h3{font-size:17px}.capability-points p{font-size:13px;color:var(--muted)}
.capability-insight-1{background:#0a0a0b;color:#fff}.capability-insight-1 .capability-points article{background:#111114;border-color:#28282d}.capability-insight-2{background:#f4f2f7}.capability-insight-2 .capability-points article{background:#fff;border-radius:18px}.capability-insight-3{background:linear-gradient(135deg,#10091c,#070708);color:#fff}.capability-insight-3 .capability-points article{border-radius:999px;min-height:0;padding:22px 28px;border-color:#3b2656}.capability-insight-4{background:#fff}.capability-insight-4 .capability-points{border-top:1px solid #ddd;border-bottom:1px solid #ddd}.capability-insight-4 .capability-points article{border:0;border-right:1px solid #ddd}.capability-insight-5{background:#111;color:#fff}.capability-insight-5 .capability-points article{background:linear-gradient(180deg,#17171a,#0e0e10);border-radius:8px}
.evidence-ribbon{padding:44px 0}.evidence-ribbon-inner{display:grid;grid-template-columns:.8fr 1.4fr;gap:60px;align-items:center}.evidence-ribbon h2{font-size:28px;margin:0}.evidence-ribbon p{margin:0;line-height:1.75}.evidence-ribbon-1{background:#6d28d9;color:#fff}.evidence-ribbon-2{background:#0a0a0a;color:#fff}.evidence-ribbon-3{background:#ece8f4}.evidence-ribbon-4{background:#18181b;color:#fff}.evidence-ribbon-5{background:#f6f6f6}
@media(max-width:760px){.capability-insight-inner,.evidence-ribbon-inner{grid-template-columns:1fr;gap:22px}.capability-points{grid-template-columns:1fr}.capability-insight-3 .capability-points article{border-radius:18px}}

/* V11 — Graphic Designing visual portfolio cards */
.graphic-showcase-board{gap:18px!important}
.graphic-showcase-card{position:relative;min-height:360px!important;padding:0!important;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#1d1230,#6d28d9)!important;text-decoration:none;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 65px rgba(0,0,0,.18);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.graphic-showcase-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.74;filter:saturate(.8) contrast(1.06);transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s ease}
.graphic-showcase-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(5,5,7,.92))}
.graphic-showcase-card span{position:absolute;left:22px;bottom:20px;z-index:2;color:#fff;font-size:17px;font-weight:800}
.graphic-showcase-card:hover{transform:translateY(-7px);box-shadow:0 32px 80px rgba(91,33,182,.32)}
.graphic-showcase-card:hover img{transform:scale(1.055);opacity:.92}
.graphic-seo-depth{background:#fff}.seo-feature-list{display:grid;gap:12px}.seo-feature-list article{padding:20px;border:1px solid #e8e5ef;border-radius:16px;background:linear-gradient(180deg,#fff,#faf9fd)}.seo-feature-list b{font-size:14px;color:#111}.seo-feature-list p{margin:8px 0 0;font-size:12px;line-height:1.65;color:#6b6874}
@media(max-width:900px){.graphic-showcase-board{grid-template-columns:repeat(2,1fr)!important}.graphic-showcase-card{min-height:300px!important}}
@media(max-width:560px){.graphic-showcase-board{grid-template-columns:1fr!important}}

/* V11 — fresh niche-specific service SEO depth */
.service-seo-v11{border-top:1px solid #eceaf2}.service-seo-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:start}.service-seo-v11 h2{max-width:760px}.service-seo-v11 p{font-size:15px;line-height:1.8;color:#5d5967}.service-seo-list{padding:28px;border:1px solid #e8e5ef;border-radius:18px;background:linear-gradient(180deg,#fff,#f8f6fc)}.service-seo-list h3{margin-top:0}.service-seo-list ul{margin:0;padding:0;list-style:none;display:grid;gap:0}.service-seo-list li{padding:11px 0;border-bottom:1px solid #e8e5ef;font-size:12px;color:#504b59}.service-seo-list li:before{content:'↗';color:#7c3aed;margin-right:9px}@media(max-width:850px){.service-seo-layout{grid-template-columns:1fr;gap:28px}}


/* V14 service-page refinements */
.single-form-page .page-hero{padding:136px 0 76px;min-height:520px}
.single-form-page .page-hero h1{font-size:clamp(34px,4.3vw,58px);max-width:720px;margin-bottom:16px}
.single-form-page .page-hero p{font-size:18px;line-height:1.6;max-width:680px}
.service-side-stack{display:grid;gap:18px}
.mini-proof-card{padding:22px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:rgba(12,12,16,.56);backdrop-filter:blur(14px);box-shadow:0 18px 48px rgba(0,0,0,.18)}
.mini-proof-card h3{margin:4px 0 12px;font-size:26px;line-height:1.1;color:#fff;max-width:360px}
.mini-proof-card ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}.mini-proof-card li{color:#d7d4e2;font-size:13px;position:relative;padding-left:18px}.mini-proof-card li:before{content:'✦';position:absolute;left:0;top:0;color:#a78bfa}
.hero-proof-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.hero-proof-row span{padding:8px 12px;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#d1ced9;font-size:11px;font-weight:800;letter-spacing:.06em;background:rgba(255,255,255,.04)}
.process-list{border-top:1px solid #ddd}
.accordion-item{border-bottom:1px solid #ddd}.accordion-trigger{width:100%;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 0;border:0;background:transparent;cursor:pointer;text-align:left}.accordion-trigger .acc-label{display:flex;gap:14px;align-items:center}.accordion-trigger b{font-size:15px;color:#111;min-width:34px}.accordion-trigger .acc-label span:last-child{font-size:18px;color:#111}.accordion-trigger .acc-icon{font-size:22px;transition:transform .3s ease}.accordion-item.open .acc-icon{transform:rotate(90deg)}
.accordion-panel{display:none;padding:0 0 18px 48px}.accordion-item.open .accordion-panel{display:block}.accordion-panel p{font-size:15px;line-height:1.8;color:#5f5b67;max-width:620px;margin:0}
.service-budget-estimator .estimator-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}.estimator-points{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}.estimator-points li{padding-left:20px;position:relative;color:#5d5967}.estimator-points li:before{content:'→';position:absolute;left:0;top:0;color:#6d28d9;font-weight:800}.budget-card{padding:28px;border:1px solid #e5e2ed;border-radius:24px;background:linear-gradient(180deg,#fff,#faf8ff);box-shadow:0 18px 50px rgba(20,12,40,.06)}.budget-card label{display:grid;gap:10px;font-size:13px;font-weight:800;color:#19161f;margin-bottom:18px}.budget-card input[type=range]{width:100%;accent-color:#6d28d9}.budget-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}.budget-metrics article{padding:16px;border:1px solid #ebe7f3;border-radius:18px;background:#fff}.budget-metrics span{display:block;font-size:11px;color:#716b7c;margin-bottom:8px}.budget-metrics strong{font-size:26px;line-height:1;color:#111}
@media(max-width:900px){.service-budget-estimator .estimator-grid{grid-template-columns:1fr}.budget-metrics{grid-template-columns:1fr 1fr}.accordion-panel{padding-left:0}.single-form-page .page-hero{padding-top:118px}.mini-proof-card h3{font-size:22px}}
@media(max-width:560px){.budget-metrics{grid-template-columns:1fr}.accordion-trigger .acc-label span:last-child{font-size:16px}.single-form-page .page-hero h1{font-size:clamp(30px,9vw,44px)}}

/* V16 global arrow + two-button consistency */
.legacy-accordion-row{position:relative;display:grid!important;grid-template-columns:1fr auto;cursor:pointer;align-items:center}
.legacy-accordion-row .legacy-accordion-arrow{transition:transform .3s ease;font-size:20px}
.legacy-accordion-row.open .legacy-accordion-arrow{transform:rotate(90deg)}
.legacy-accordion-detail{grid-column:1/-1;display:none;padding:0 48px 18px 0}
.legacy-accordion-row.open .legacy-accordion-detail{display:block}
.legacy-accordion-detail p{margin:0;max-width:680px;font-size:14px;line-height:1.75;color:#625d69}
.section-dark .button-row .btn:nth-child(1),
.section-ink .button-row .btn:nth-child(1){background:#fff!important;color:#111!important;border-color:#fff!important}
.section-dark .button-row .btn:nth-child(2),
.section-ink .button-row .btn:nth-child(2){background:#6d28d9!important;color:#fff!important;border-color:#6d28d9!important}
.section-dark .button-row .btn:nth-child(2):hover,
.section-ink .button-row .btn:nth-child(2):hover{background:#7c3aed!important;border-color:#7c3aed!important}
@media(max-width:600px){.legacy-accordion-detail{padding-right:0}}
/* V17 CEO leadership block */
.about-ceo-section{padding:82px 0;background:#fff}.about-ceo-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}.about-ceo-copy h2{font-size:clamp(34px,3.8vw,48px)!important;line-height:1.02;text-transform:uppercase;letter-spacing:.01em;max-width:600px}.about-ceo-copy p{font-size:15px;line-height:1.8;max-width:620px}.about-ceo-copy .btn{margin-top:10px}.about-ceo-profile{display:grid;gap:10px}.about-ceo-image-placeholder{min-height:500px;border-radius:14px;background:linear-gradient(145deg,#cfcfd2,#bdbdc1);display:grid;place-items:center;text-align:center;color:rgba(40,36,46,.45);font-size:14px;font-weight:900;letter-spacing:.14em}.about-ceo-name{background:#7c4dff;color:#fff;text-align:center;padding:8px 14px;font-size:16px;font-weight:900;letter-spacing:.05em}.about-ceo-profile blockquote{margin:0;padding:4px 0 4px 26px;border-left:4px solid #7c4dff;color:#17151b;font-size:17px;line-height:1.75;font-style:italic;font-weight:700}.about-ceo-profile blockquote strong{white-space:nowrap}
@media(max-width:900px){.about-ceo-grid{grid-template-columns:1fr;gap:34px}.about-ceo-image-placeholder{min-height:420px}}
@media(max-width:560px){.about-ceo-section{padding:58px 0}.about-ceo-image-placeholder{min-height:330px}.about-ceo-profile blockquote{font-size:15px}.about-ceo-name{font-size:13px}}
/* ABOUT STRATEGY CARD SPACING FIX */

.about-strategy-card{
    padding: 48px 38px 38px !important;
}

/* paragraph spacing */
.about-strategy-card > p{
    margin-bottom: 28px !important;
    line-height: 1.75;
}

/* buttons area spacing */
.about-strategy-card .compact-buttons{
    margin-top: 0 !important;
    margin-bottom: 28px !important;
    gap: 14px !important;
}

/* individual buttons */
.about-strategy-card .compact-buttons .btn{
    min-height: 42px;
    padding-left: 22px;
    padding-right: 22px;
}

/* bottom growth card */
.about-strategy-card .about-case-chip{
    margin-top: 0 !important;
    padding: 20px 18px 21px !important;
    min-height: 82px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* more separation inside bottom card */
.about-case-chip span{
    display: block;
    margin-bottom: 10px !important;
}

.about-case-chip strong{
    display: block;
    line-height: 1.5;
}

/* desktop spacing */
@media (min-width: 901px){
    .about-strategy-card{
        padding: 48px 38px 38px !important;
    }

    .about-strategy-card .compact-buttons{
        margin-bottom: 30px !important;
    }

    .about-strategy-card .about-case-chip{
        margin-top: 0 !important;
    }
}

/* mobile */
@media (max-width: 600px){
    .about-strategy-card{
        padding: 34px 24px 26px !important;
    }

    .about-strategy-card > p{
        margin-bottom: 24px !important;
    }

    .about-strategy-card .compact-buttons{
        margin-bottom: 24px !important;
        gap: 10px !important;
    }

    .about-strategy-card .about-case-chip{
        padding: 18px 16px !important;
    }
}
/* CONTACT HERO BOTTOM SPACING FIX */

.contact-hero{
    min-height: 470px !important;
    padding-bottom: 44px !important;
}

.contact-hero .button-row{
    margin-top: 30px !important;
    margin-bottom: 20px !important;
}
/* CONTACT HERO BUTTON COLORS */

.contact-hero .button-row .btn:first-child{
    background:#ffffff !important;
    color:#111111 !important;
    border:1px solid #ffffff !important;
}

.contact-hero .button-row .btn:first-child:hover{
    background:#f3f0f7 !important;
    color:#6d28d9 !important;
    border-color:#f3f0f7 !important;
}

.contact-hero .button-row .btn:nth-child(2){
    background:#6d28d9 !important;
    color:#ffffff !important;
    border:1px solid #6d28d9 !important;
}

.contact-hero .button-row .btn:nth-child(2):hover{
    background:#7c3aed !important;
    border-color:#7c3aed !important;
}
/* ============================================================
   DIGITAL PROMOTIX
   CASE STUDIES PAGE
   HERO REMAINS SAME AS CURRENT WEBSITE
============================================================ */


/* ============================================================
   PAGE
============================================================ */

.case-study-page{
    background:#fff;
    color:#111;
}


/* ============================================================
   KEEP CURRENT HERO
============================================================ */

.case-study-page .case-main-hero{
    min-height:390px !important;
    padding:122px 0 68px !important;

    background:
        radial-gradient(
            circle at 78% 46%,
            rgba(124,58,237,.24),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #07070a,
            #13081e 62%,
            #261047
        ) !important;

    color:#fff;
}


/* preserve existing curved decorative line */

.case-study-page .case-main-hero:after{
    content:"";

    position:absolute;

    inset:
        auto
        -12%
        -72%
        28%;

    height:520px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:50%;

    transform:rotate(-7deg);

    box-shadow:
        0 0
        80px
        rgba(124,58,237,.16);
}


.case-study-page .case-main-hero .container{
    position:relative;
    z-index:2;
}


.case-study-page .case-main-hero .eyebrow{
    color:#a78bfa;
}


.case-study-page .case-main-hero h1{
    max-width:760px !important;

    margin:
        14px 0
        20px;

    font-size:
        clamp(
            43px,
            4.4vw,
            61px
        ) !important;

    line-height:.98;

    color:#fff;

    text-transform:uppercase;

    letter-spacing:.015em;
}


.case-study-page .case-main-hero p{
    max-width:750px !important;

    margin:0;

    color:#fff;

    font-size:18px !important;

    line-height:1.75;
}



/* ============================================================
   SHARED
============================================================ */

.case-kicker{

    display:block;

    margin-bottom:12px;

    color:#6d28d9;

    font-size:10px;

    line-height:1;

    font-weight:900;

    letter-spacing:.14em;

    text-transform:uppercase;

}


.case-black-btn{

    background:#111 !important;

    color:#fff !important;

    border-color:#111 !important;

}


.case-black-btn:hover{

    background:#6d28d9 !important;

    border-color:#6d28d9 !important;

}


.case-white-btn{

    background:#fff !important;

    color:#111 !important;

    border-color:#fff !important;

}


.case-white-btn:hover{

    color:#6d28d9 !important;

}


.case-purple-btn{

    background:#6d28d9 !important;

    color:#fff !important;

    border-color:#6d28d9 !important;

}


.case-purple-btn:hover{

    background:#7c3aed !important;

    border-color:#7c3aed !important;

}



/* ============================================================
   CASE OPENING
============================================================ */

.case-opening{

    position:relative;

    padding:
        100px 0
        90px;

    overflow:hidden;

    background:#fff;

}


.case-watermark{

    position:absolute;

    top:36px;

    left:50%;

    transform:translateX(-50%);

    color:#f0eef2;

    font-size:
        clamp(
            80px,
            12vw,
            180px
        );

    line-height:1;

    font-weight:900;

    letter-spacing:-.065em;

    white-space:nowrap;

    pointer-events:none;

}


.case-opening-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap:80px;

    align-items:center;

}


.case-opening-copy h2{

    max-width:570px;

    margin:
        0 0
        20px;

    font-size:
        clamp(
            36px,
            3.8vw,
            51px
        );

    line-height:1;

    letter-spacing:-.035em;

    text-transform:none;

}


.case-opening-copy p{

    max-width:570px;

    margin:
        0 0
        16px;

    color:#645f69;

    font-size:14px;

    line-height:1.8;

}


.case-opening-buttons{

    margin-top:27px;

}



/* ============================================================
   DEVICE STAGE
============================================================ */

.case-device-stage{

    position:relative;

    min-height:460px;

    display:flex;

    align-items:center;

    justify-content:center;

}



/* LAPTOP */

.case-laptop{

    width:470px;

    position:relative;

    transform:
        perspective(1200px)
        rotateX(3deg)
        rotateY(-7deg);

    transition:
        transform .6s
        cubic-bezier(.22,.61,.36,1);

}


.case-device-stage:hover .case-laptop{

    transform:
        perspective(1200px)
        rotateX(1deg)
        rotateY(-2deg)
        translateY(-7px);

}


.case-laptop-screen{

    height:305px;

    overflow:hidden;

    padding:13px;

    border:
        10px solid
        #17171b;

    border-radius:
        17px
        17px
        7px
        7px;

    background:#fff;

    box-shadow:
        0 32px
        65px
        rgba(24,13,38,.20);

}


.case-browser-bar{

    height:17px;

    display:flex;

    align-items:center;

    gap:5px;

}


.case-browser-bar span{

    width:6px;

    height:6px;

    display:block;

    border-radius:50%;

    background:#ddd9e1;

}


.case-web-nav{

    height:16px;

    margin-bottom:15px;

    border-radius:4px;

    background:#f1eef4;

}


.case-web-layout{

    height:230px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

}


.case-web-copy{

    padding:22px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.case-web-copy small{

    color:#6d28d9;

    font-size:7px;

    font-weight:900;

    letter-spacing:.1em;

}


.case-web-copy strong{

    max-width:160px;

    margin:
        9px 0
        15px;

    font-size:20px;

    line-height:1;

}


.case-copy-line{

    width:100%;

    max-width:145px;

    height:5px;

    margin-bottom:7px;

    border-radius:4px;

    background:#e5e1e8;

}


.case-copy-line.short{

    width:75%;

}


.case-web-copy button{

    width:82px;

    height:27px;

    margin-top:10px;

    border:0;

    background:#6d28d9;

    color:#fff;

    font-size:7px;

    font-weight:900;

}


.case-web-art{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #141017,
            #441978
        );

}


.case-art-purple{

    position:absolute;

    width:130px;

    height:130px;

    top:25px;

    left:30px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #9b72ff,
            #5b21b6
        );

    filter:blur(1px);

}


.case-art-panel{

    position:absolute;

    right:17px;

    bottom:20px;

    width:90px;

    height:115px;

    border-radius:12px;

    border:
        1px solid
        rgba(255,255,255,.25);

    background:
        rgba(255,255,255,.10);

}


.case-art-circle{

    position:absolute;

    width:65px;

    height:65px;

    left:18px;

    bottom:20px;

    border-radius:50%;

    border:
        10px solid
        rgba(255,255,255,.16);

}



/* LAPTOP BASE */

.case-laptop-base{

    width:520px;

    height:22px;

    position:relative;

    left:50%;

    transform:translateX(-50%);

    border-radius:
        4px
        4px
        30px
        30px;

    background:
        linear-gradient(
            #53535a,
            #1d1d22
        );

}


.case-laptop-base:after{

    content:"";

    position:absolute;

    top:3px;

    left:50%;

    transform:translateX(-50%);

    width:135px;

    height:5px;

    border-radius:
        0 0
        7px 7px;

    background:#7a7a80;

}



/* PHONE */

.case-phone{

    position:absolute;

    z-index:4;

    right:5px;

    bottom:5px;

    width:128px;

    height:265px;

    padding:
        24px 11px
        13px;

    border:
        7px solid
        #151519;

    border-radius:27px;

    background:#fff;

    transform:rotate(8deg);

    box-shadow:
        0 25px
        50px
        rgba(0,0,0,.18);

    transition:
        transform .5s ease;

}


.case-device-stage:hover .case-phone{

    transform:
        rotate(4deg)
        translateY(-5px);

}


.case-phone-notch{

    width:42px;

    height:8px;

    position:absolute;

    top:7px;

    left:50%;

    transform:translateX(-50%);

    border-radius:10px;

    background:#111;

}


.case-phone-banner{

    height:49px;

    border-radius:9px;

    background:
        linear-gradient(
            135deg,
            #1e102f,
            #7c3aed
        );

}


.case-phone-circle{

    width:58px;

    height:58px;

    margin:14px auto;

    border:
        8px solid
        #eee8f8;

    border-top-color:#6d28d9;

    border-radius:50%;

}


.case-phone i{

    display:block;

    height:7px;

    margin:8px 3px;

    border-radius:5px;

    background:#e6e1ea;

}


.case-phone button{

    width:100%;

    height:27px;

    margin-top:8px;

    border:0;

    border-radius:5px;

    background:#6d28d9;

    color:#fff;

    font-size:7px;

    font-weight:900;

}



/* ============================================================
   STUDY OVERVIEW
============================================================ */

.case-overview{

    padding:
        75px 0
        55px;

}


.case-small-heading{

    margin-bottom:20px;

}


.case-small-heading span{

    display:block;

    margin-bottom:6px;

    color:#8c8691;

    font-size:9px;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.case-small-heading h2{

    margin:0;

    font-size:27px;

    line-height:1;

    text-transform:none;

}


.case-overview-text{

    max-width:980px;

}


.case-overview-text p{

    color:#56515b;

    font-size:13px;

    line-height:1.8;

}


.case-metrics{

    display:grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    margin-top:45px;

}


.case-metrics article{

    position:relative;

    padding:14px 25px;

    text-align:center;

}


.case-metrics article:not(:last-child):after{

    content:"";

    position:absolute;

    right:0;

    top:10%;

    width:1px;

    height:80%;

    background:#bcb6c1;

}


.case-metrics strong{

    display:block;

    color:#6d28d9;

    font-size:26px;

    line-height:1;

}


.case-metrics span{

    display:block;

    margin-top:7px;

    color:#635d68;

    font-size:10px;

}



/* ============================================================
   PROBLEM SOLUTION
============================================================ */

.case-problem-solution{

    padding:
        45px 0
        90px;

}


.case-problem-grid{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:30px;

}


.case-dashed-card{

    position:relative;

    padding:30px;

    border:
        2px dashed
        #9f94aa;

    border-radius:17px;

    background:#fff;

    transition:
        .35s ease;

}


.case-dashed-card:hover{

    transform:translateY(-5px);

    box-shadow:
        0 24px
        50px
        rgba(59,30,84,.08);

}


.case-dashed-card:after{

    content:"";

    position:absolute;

    inset:6px;

    border:
        1px solid
        #eeeaf1;

    border-radius:11px;

    pointer-events:none;

}


.case-card-top{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:12px;

}


.case-card-top span{

    color:#6d28d9;

    font-size:12px;

    font-weight:900;

}


.case-card-top small{

    color:#8d8791;

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:.08em;

}


.case-dashed-card h3{

    position:relative;

    z-index:2;

    margin:
        13px 0
        20px;

    font-size:24px;

    text-transform:none;

}


.case-dashed-card ul{

    position:relative;

    z-index:2;

    margin:0;

    padding-left:19px;

}


.case-dashed-card li{

    margin-bottom:12px;

    color:#5b5660;

    font-size:12px;

    line-height:1.65;

}



/* ============================================================
   DESIGN THINKING
============================================================ */

.case-thinking{

    padding:
        85px 0
        100px;

    background:#faf9fb;

}


.case-centered-heading{

    max-width:760px;

    margin:
        0 auto
        60px;

    text-align:center;

}


.case-centered-heading>span{

    display:block;

    margin-bottom:8px;

    color:#6d28d9;

    font-size:9px;

    font-weight:900;

    letter-spacing:.12em;

    text-transform:uppercase;

}


.case-centered-heading h2{

    margin:
        0 0
        14px;

    font-size:
        clamp(
            33px,
            3.7vw,
            47px
        );

    line-height:1;

    text-transform:none;

}


.case-centered-heading>p{

    max-width:700px;

    margin:auto;

    color:#66606b;

    font-size:13px;

    line-height:1.75;

}


.case-thinking-flow{

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.case-thinking-flow article{

    width:125px;

    text-align:center;

}


.thinking-circle{

    width:58px;

    height:58px;

    margin:
        0 auto
        14px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#eee7fb;

    color:#6d28d9;

    font-size:12px;

    font-weight:900;

    box-shadow:
        0 0
        0 7px
        rgba(109,40,217,.04);

}


.case-thinking-flow article strong{

    display:block;

    font-size:12px;

}


.case-thinking-flow article p{

    margin-top:7px;

    color:#7a7480;

    font-size:9px;

    line-height:1.55;

}


.thinking-connector{

    flex:1;

    height:1px;

    margin:
        0 10px
        72px;

    background:
        linear-gradient(
            90deg,
            #d9d3de,
            #6d28d9,
            #d9d3de
        );

}



/* ============================================================
   TIMELINE
============================================================ */

.case-timeline{

    padding:90px 0;

}


.case-timeline-heading{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:45px;

}


.case-timeline-heading:before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:50%;

    height:1px;

    background:#cbc5cf;

}


.case-timeline-heading span{

    position:relative;

    z-index:2;

    padding:
        8px 28px;

    border:
        1px solid
        #111;

    border-radius:999px;

    background:#fff;

    color:#111;

    font-size:11px;

    font-weight:900;

    text-transform:uppercase;

}


.case-timeline-grid{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:34px;

}


.case-timeline-column h3{

    margin:
        0 0
        27px;

    padding:12px;

    border-radius:7px;

    background:
        linear-gradient(
            90deg,
            #25113d,
            #6d28d9
        );

    color:#fff;

    text-align:center;

    font-size:16px;

    text-transform:none;

}


.case-week-grid{

    display:grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:9px;

}


.case-week-grid article{

    min-height:170px;

    padding:14px;

    border-top:
        3px solid
        #6d28d9;

    background:#faf9fb;

    transition:.35s ease;

}


.case-week-grid article:hover{

    transform:translateY(-5px);

    background:#f4effb;

}


.case-week-grid article>span{

    display:block;

    margin-bottom:10px;

    color:#7c7582;

    font-size:8px;

}


.case-week-grid strong{

    display:block;

    margin-bottom:10px;

    color:#6d28d9;

    font-size:10px;

}


.case-week-grid p{

    margin:0;

    color:#6d6772;

    font-size:8px;

    line-height:1.8;

}



/* ============================================================
   USER RESEARCH
============================================================ */

.case-research{

    padding:
        90px 0
        115px;

    background:#faf9fb;

}


.case-research-network{

    position:relative;

    width:
        min(
            760px,
            100%
        );

    min-height:420px;

    margin:20px auto 0;

}


.research-ring{

    position:absolute;

    left:50%;

    top:50%;

    transform:
        translate(
            -50%,
            -50%
        );

    border:
        1px solid
        rgba(109,40,217,.16);

    border-radius:50%;

}


.research-ring-one{

    width:510px;

    height:260px;

}


.research-ring-two{

    width:700px;

    height:360px;

}


.research-node{

    position:absolute;

    width:62px;

    height:62px;

    display:grid;

    place-items:center;

    border:
        5px solid
        #fff;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #21132f,
            #7c3aed
        );

    color:#fff;

    font-size:9px;

    font-weight:900;

    box-shadow:
        0 15px
        35px
        rgba(45,22,70,.18);

    transition:
        transform .35s ease;

}


.research-node:hover{

    transform:scale(1.12);

}


.research-center{

    width:105px;

    height:105px;

    left:50%;

    top:50%;

    transform:
        translate(
            -50%,
            -50%
        );

}


.research-center:hover{

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.08);

}


.research-node-one{

    left:14%;

    top:27%;

}


.research-node-two{

    right:14%;

    top:25%;

}


.research-node-three{

    left:23%;

    bottom:14%;

}


.research-node-four{

    right:23%;

    bottom:12%;

}


.research-node-five{

    left:44%;

    top:5%;

}


.research-node-six{

    right:39%;

    bottom:2%;

}



/* ============================================================
   OUTCOME
============================================================ */

.case-outcome{

    padding:90px 0;

}


.case-outcome-grid{

    display:grid;

    grid-template-columns:
        .85fr
        1.15fr;

    gap:80px;

    align-items:start;

}


.case-outcome h2{

    max-width:520px;

    margin:0;

    font-size:
        clamp(
            34px,
            3.8vw,
            49px
        );

    line-height:1;

    text-transform:none;

}


.case-outcome-right>p{

    margin-top:0;

    color:#625d67;

    font-size:14px;

    line-height:1.8;

}


.case-outcome-list{

    margin-top:26px;

    border-top:
        1px solid
        #ddd8e0;

}


.case-outcome-list article{

    display:grid;

    grid-template-columns:
        55px
        1fr;

    gap:15px;

    padding:17px 0;

    border-bottom:
        1px solid
        #ddd8e0;

}


.case-outcome-list span{

    color:#6d28d9;

    font-size:11px;

    font-weight:900;

}


.case-outcome-list strong{

    font-size:13px;

}



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

.case-final-cta{

    padding:85px 0;

    background:
        radial-gradient(
            circle at 82% 40%,
            rgba(124,58,237,.23),
            transparent 29%
        ),
        #09090b;

    color:#fff;

}


.case-final-grid{

    display:grid;

    grid-template-columns:
        1fr
        .8fr;

    gap:80px;

    align-items:center;

}


.case-final-cta h2{

    max-width:650px;

    margin:
        0 0
        15px;

    font-size:
        clamp(
            34px,
            3.7vw,
            49px
        );

    line-height:1;

    text-transform:none;

}


.case-final-cta p{

    max-width:620px;

    color:#bbb6c0;

    font-size:14px;

    line-height:1.75;

}


.case-final-buttons{

    justify-content:flex-end;

}



/* ============================================================
   TABLET
============================================================ */

@media(max-width:950px){


    .case-opening-grid,
    .case-problem-grid,
    .case-timeline-grid,
    .case-outcome-grid,
    .case-final-grid{

        grid-template-columns:1fr;

    }


    .case-opening-grid{

        gap:45px;

    }


    .case-device-stage{

        min-height:430px;

    }


    .case-laptop{

        width:
            min(
                470px,
                84%
            );

    }


    .case-laptop-base{

        width:108%;

    }


    .case-metrics{

        grid-template-columns:
            repeat(
                2,
                1fr
            );

        gap:20px;

    }


    .case-metrics article:after{

        display:none !important;

    }


    .case-thinking-flow{

        display:grid;

        grid-template-columns:
            repeat(
                3,
                1fr
            );

        gap:30px;

    }


    .case-thinking-flow article{

        width:auto;

    }


    .thinking-connector{

        display:none;

    }


    .case-week-grid{

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .case-final-buttons{

        justify-content:flex-start;

    }


}



/* ============================================================
   MOBILE
============================================================ */

@media(max-width:600px){


    .case-study-page .case-main-hero{

        min-height:390px !important;

        padding:
            115px 0
            65px !important;

    }


    .case-study-page .case-main-hero h1{

        font-size:42px !important;

    }


    .case-study-page .case-main-hero p{

        font-size:15px !important;

    }


    .case-opening{

        padding:
            70px 0
            60px;

    }


    .case-watermark{

        top:25px;

        font-size:62px;

    }


    .case-opening-copy h2{

        font-size:36px;

    }


    .case-device-stage{

        min-height:310px;

    }


    .case-laptop-screen{

        height:210px;

    }


    .case-web-layout{

        height:145px;

    }


    .case-web-copy{

        padding:10px;

    }


    .case-web-copy strong{

        font-size:14px;

    }


    .case-phone{

        width:90px;

        height:185px;

        right:0;

        border-width:5px;

    }


    .case-phone-circle{

        width:40px;

        height:40px;

        border-width:6px;

    }


    .case-metrics{

        grid-template-columns:
            1fr 1fr;

    }


    .case-metrics article{

        padding:15px;

    }


    .case-thinking-flow{

        grid-template-columns:
            1fr 1fr;

    }


    .case-week-grid{

        grid-template-columns:1fr;

    }


    .case-research-network{

        min-height:330px;

    }


    .research-ring-one{

        width:280px;

        height:170px;

    }


    .research-ring-two{

        width:350px;

        height:255px;

    }


    .research-node{

        width:46px;

        height:46px;

        border-width:3px;

        font-size:7px;

    }


    .research-center{

        width:82px;

        height:82px;

    }


    .case-outcome-list article{

        grid-template-columns:
            42px
            1fr;

    }


    .case-final-buttons .btn{

        width:100%;

    }


}
/* ============================================================
   CLICKABLE RESEARCH VECTOR ICONS
============================================================ */

.research-node{

    position:absolute;

    width:68px;
    height:68px;

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

    gap:4px;

    border:5px solid #fff;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #24123c,
            #6d28d9
        );

    color:#fff;

    text-decoration:none;

    box-shadow:
        0 15px
        35px
        rgba(45,22,70,.18);

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

    z-index:3;

}


.research-node svg{

    width:22px;
    height:22px;

    fill:#fff;

    flex:none;

}


.research-node span{

    color:#fff;

    font-size:7px;

    line-height:1;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.04em;

}


.research-node:not(.buyer-node):hover{

    transform:
        translateY(-5px)
        scale(1.08);

    background:
        linear-gradient(
            145deg,
            #6d28d9,
            #8b5cf6
        );

    box-shadow:
        0 20px
        45px
        rgba(109,40,217,.30);

}


.research-node:not(.buyer-node):focus-visible{

    outline:
        3px solid
        rgba(109,40,217,.28);

    outline-offset:4px;

}


/* CENTER */

.research-center{

    width:108px;
    height:108px;

    left:50%;
    top:50%;

    transform:
        translate(
            -50%,
            -50%
        );

    pointer-events:none;

}


.research-center svg{

    width:28px;
    height:28px;

}


.research-center span{

    font-size:8px;

}


/* POSITIONS */

.research-node-one{
    left:14%;
    top:27%;
}

.research-node-two{
    right:14%;
    top:25%;
}

.research-node-three{
    left:23%;
    bottom:14%;
}

.research-node-four{
    right:23%;
    bottom:12%;
}

.research-node-five{
    left:44%;
    top:5%;
}

.research-node-six{
    right:39%;
    bottom:2%;
}

/* =========================================================
   SERVICES PAGE — FINAL HEADLINE TYPOGRAPHY
   Lighter, cleaner, closer to the supplied reference
========================================================= */

.services-reference-page .services-ref-hero h1{
    font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif !important;
    font-weight:500 !important;
    font-size:clamp(38px,4.6vw,62px) !important;
    line-height:1.02 !important;
    letter-spacing:.015em !important;
    text-shadow:none !important;
    -webkit-text-stroke:0 !important;
}

.services-reference-page .agency-proof-copy h2,
.services-reference-page .section-title h2,
.services-reference-page .dp-services-web-copy h2,
.services-reference-page .dp-services-ppc-copy h2,
.services-reference-page .dp-services-seo-copy h2,
.services-reference-page .dp-services-social-copy h2{
    font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif !important;
    font-weight:500 !important;
    letter-spacing:.01em !important;
    line-height:1.04 !important;
    text-shadow:none !important;
    -webkit-text-stroke:0 !important;
}

.services-reference-page .agency-proof-copy h2{
    font-size:clamp(32px,3.1vw,44px) !important;
}

.services-reference-page .section-title h2{
    font-size:clamp(30px,3vw,42px) !important;
}

.services-reference-page .dp-services-ppc-copy h2,
.services-reference-page .dp-services-seo-copy h2,
.services-reference-page .dp-services-social-copy h2{
    font-size:clamp(32px,3.2vw,44px) !important;
}

.services-reference-page .dp-services-web-copy h2{
    font-size:clamp(30px,3vw,42px) !important;
}

.services-reference-page .svc-body h3,
.services-reference-page .svc-media strong{
    font-weight:600 !important;
}
/* =========================================================
   SERVICES PAGE — FINAL HEADLINE STYLE FIX
   Lighter weight + normal capitalization
========================================================= */

/* HERO */
.services-reference-page .services-ref-hero h1{
    font-weight:400 !important;

    font-size:clamp(
        38px,
        4.7vw,
        62px
    ) !important;

    line-height:1.06 !important;

    letter-spacing:-0.01em !important;

    text-transform:none !important;

    text-shadow:none !important;
}


/* SECTION HEADLINES */
.services-reference-page .agency-proof-copy h2,
.services-reference-page .section-title h2,
.services-reference-page .dp-services-web-copy h2,
.services-reference-page .dp-services-ppc-copy h2,
.services-reference-page .dp-services-seo-copy h2,
.services-reference-page .dp-services-social-copy h2{

    font-weight:400 !important;

    text-transform:none !important;

    letter-spacing:-0.01em !important;

    line-height:1.08 !important;
}


/* TOP RATED AGENCY */
.services-reference-page .agency-proof-copy h2{
    font-size:clamp(
        32px,
        3vw,
        43px
    ) !important;
}


/* SERVICES MAIN TITLE */
.services-reference-page .section-title h2{
    font-size:clamp(
        30px,
        3vw,
        42px
    ) !important;
}


/* WEBSITE CTA */
.services-reference-page .dp-services-web-copy h2{
    font-size:clamp(
        30px,
        3vw,
        42px
    ) !important;
}


/* PPC */
.services-reference-page .dp-services-ppc-copy h2{
    font-size:clamp(
        32px,
        3.2vw,
        44px
    ) !important;
}


/* SEO */
.services-reference-page .dp-services-seo-copy h2{
    font-size:clamp(
        32px,
        3.2vw,
        44px
    ) !important;
}


/* SOCIAL MEDIA */
.services-reference-page .dp-services-social-copy h2{
    font-size:clamp(
        32px,
        3.2vw,
        44px
    ) !important;
}


/* SERVICE CARD TITLES — keep stronger but not ultra bold */
.services-reference-page .svc-body h3{
    font-weight:600 !important;
    text-transform:none !important;
}


/* IMAGE CARD OVERLAY TEXT */
.services-reference-page .svc-media strong{
    font-weight:600 !important;
    text-transform:none !important;
}


/* SMALL PURPLE LABELS CAN STAY UPPERCASE */
.services-reference-page .services-hero-kicker,
.services-reference-page .ref-kicker,
.services-reference-page .dp-services-label{
    text-transform:uppercase !important;
    font-weight:700 !important;
}
/* =========================================================
   SERVICES PAGE — LIGHTER HEADING FIX
   Paste at the VERY BOTTOM of your CSS
========================================================= */

/* Main section heading */
.services-reference-page .section-title h2,
.services-reference-page .services-section-heading,
.services-reference-page .services-grid-heading,
.services-reference-page .what-we-do-heading {
    font-family: Arial, sans-serif !important;
    font-size: clamp(34px, 4vw, 56px) !important;
    font-weight: 700 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: #111111 !important;
    margin: 0 0 18px !important;
}

/* If your heading has a paragraph under it */
.services-reference-page .section-title p,
.services-reference-page .services-section-heading + p,
.services-reference-page .what-we-do-copy {
    font-size: 18px !important;
    line-height: 1.65 !important;
    color: #6b7280 !important;
    max-width: 760px !important;
    margin: 0 auto !important;
}

/* Small purple label above heading */
.services-reference-page .section-title .eyebrow,
.services-reference-page .section-title .ref-kicker,
.services-reference-page .section-title .dp-services-label,
.services-reference-page .what-we-do-label {
    display: inline-block !important;
    margin-bottom: 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase !important;
    color: #6d28d9 !important;
}

/* Service card titles */
.services-reference-page .svc-body h3,
.services-reference-page .service-card h3,
.services-reference-page .services-card-content h3 {
    font-family: Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: #111111 !important;
    margin: 0 0 12px !important;
}

/* Card paragraph text */
.services-reference-page .svc-body p,
.services-reference-page .service-card p,
.services-reference-page .services-card-content p {
    font-size: 14px !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
}

/* Hero heading on services page */
.services-reference-page .services-ref-hero h1,
.services-reference-page .page-hero h1 {
    font-family: Arial, sans-serif !important;
    font-size: clamp(48px, 6vw, 88px) !important;
    font-weight: 700 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.03em !important;
    text-transform: none !important;
    color: #f5f5f5 !important;
}

/* Hero top label */
.services-reference-page .services-ref-hero .eyebrow,
.services-reference-page .page-hero .eyebrow {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase !important;
    color: #7c3aed !important;
}

/* "Top Rated Digital Marketing Agency" heading */
.services-reference-page .agency-proof-copy h2,
.services-reference-page .agency-section h2 {
    font-family: Arial, sans-serif !important;
    font-size: clamp(36px, 4vw, 60px) !important;
    font-weight: 700 !important;
    line-height: 1.03 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: #111111 !important;
}

/* Remove overly heavy styling if inherited from other CSS */
.services-reference-page h1,
.services-reference-page h2,
.services-reference-page h3 {
    text-shadow: none !important;
    font-style: normal !important;
}

/* =========================================================
   DIGITAL PROMOTIX — SERVICES PAGE FINAL TYPOGRAPHY OVERRIDE
   Keep this block at the ABSOLUTE END of this stylesheet.
   Purpose: same clean headline feel as the rest of the site.
========================================================= */

.services-reference-page .services-ref-hero h1{
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(42px, 5vw, 68px) !important;
    font-weight: 500 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
    text-transform: none !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

.services-reference-page .agency-proof-copy h2,
.services-reference-page .section-title h2,
.services-reference-page .website-cta-copy h2,
.services-reference-page .ppc-reference-copy h2,
.services-reference-page .social-reference-copy h2,
.services-reference-page .dp-services-web-copy h2,
.services-reference-page .dp-services-ppc-copy h2,
.services-reference-page .dp-services-seo-copy h2,
.services-reference-page .dp-services-social-copy h2{
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 500 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

.services-reference-page .agency-proof-copy h2{
    font-size: clamp(32px, 3.2vw, 46px) !important;
}

.services-reference-page .section-title h2{
    font-size: clamp(34px, 3.7vw, 52px) !important;
}

.services-reference-page .website-cta-copy h2,
.services-reference-page .ppc-reference-copy h2,
.services-reference-page .social-reference-copy h2{
    font-size: clamp(34px, 3.5vw, 48px) !important;
}

.services-reference-page .svc-body h3{
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

.services-reference-page .svc-media strong{
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

.services-reference-page .agency-featured h3{
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: -0.015em !important;
}

.services-reference-page .services-hero-kicker,
.services-reference-page .ref-kicker,
.services-reference-page .dp-services-label{
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .18em !important;
}

/* Mobile */
@media (max-width: 767px){
    .services-reference-page .services-ref-hero h1{
        font-size: clamp(36px, 10vw, 48px) !important;
    }

    .services-reference-page .agency-proof-copy h2,
    .services-reference-page .section-title h2,
    .services-reference-page .website-cta-copy h2,
    .services-reference-page .ppc-reference-copy h2,
    .services-reference-page .social-reference-copy h2{
        font-size: clamp(30px, 8vw, 40px) !important;
    }
}
/* ============================================================
   DIGITAL PROMOTIX
   CASE STUDIES PAGE
   HERO REMAINS SAME AS CURRENT WEBSITE
============================================================ */


/* ============================================================
   PAGE
============================================================ */

.case-study-page{
    background:#fff;
    color:#111;
}


/* ============================================================
   KEEP CURRENT HERO
============================================================ */

.case-study-page .case-main-hero{
    min-height:390px !important;
    padding:122px 0 68px !important;

    background:
        radial-gradient(
            circle at 78% 46%,
            rgba(124,58,237,.24),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #07070a,
            #13081e 62%,
            #261047
        ) !important;

    color:#fff;
}


/* preserve existing curved decorative line */

.case-study-page .case-main-hero:after{
    content:"";

    position:absolute;

    inset:
        auto
        -12%
        -72%
        28%;

    height:520px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:50%;

    transform:rotate(-7deg);

    box-shadow:
        0 0
        80px
        rgba(124,58,237,.16);
}


.case-study-page .case-main-hero .container{
    position:relative;
    z-index:2;
}


.case-study-page .case-main-hero .eyebrow{
    color:#a78bfa;
}


.case-study-page .case-main-hero h1{
    max-width:760px !important;

    margin:
        14px 0
        20px;

    font-size:
        clamp(
            43px,
            4.4vw,
            61px
        ) !important;

    line-height:.98;

    color:#fff;

    text-transform:uppercase;

    letter-spacing:.015em;
}


.case-study-page .case-main-hero p{
    max-width:750px !important;

    margin:0;

    color:#fff;

    font-size:18px !important;

    line-height:1.75;
}



/* ============================================================
   SHARED
============================================================ */

.case-kicker{

    display:block;

    margin-bottom:12px;

    color:#6d28d9;

    font-size:10px;

    line-height:1;

    font-weight:900;

    letter-spacing:.14em;

    text-transform:uppercase;

}


.case-black-btn{

    background:#111 !important;

    color:#fff !important;

    border-color:#111 !important;

}


.case-black-btn:hover{

    background:#6d28d9 !important;

    border-color:#6d28d9 !important;

}


.case-white-btn{

    background:#fff !important;

    color:#111 !important;

    border-color:#fff !important;

}


.case-white-btn:hover{

    color:#6d28d9 !important;

}


.case-purple-btn{

    background:#6d28d9 !important;

    color:#fff !important;

    border-color:#6d28d9 !important;

}


.case-purple-btn:hover{

    background:#7c3aed !important;

    border-color:#7c3aed !important;

}



/* ============================================================
   CASE OPENING
============================================================ */

.case-opening{

    position:relative;

    padding:
        100px 0
        90px;

    overflow:hidden;

    background:#fff;

}


.case-watermark{

    position:absolute;

    top:36px;

    left:50%;

    transform:translateX(-50%);

    color:#f0eef2;

    font-size:
        clamp(
            80px,
            12vw,
            180px
        );

    line-height:1;

    font-weight:900;

    letter-spacing:-.065em;

    white-space:nowrap;

    pointer-events:none;

}


.case-opening-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap:80px;

    align-items:center;

}


.case-opening-copy h2{

    max-width:570px;

    margin:
        0 0
        20px;

    font-size:
        clamp(
            36px,
            3.8vw,
            51px
        );

    line-height:1;

    letter-spacing:-.035em;

    text-transform:none;

}


.case-opening-copy p{

    max-width:570px;

    margin:
        0 0
        16px;

    color:#645f69;

    font-size:14px;

    line-height:1.8;

}


.case-opening-buttons{

    margin-top:27px;

}



/* ============================================================
   DEVICE STAGE
============================================================ */

.case-device-stage{

    position:relative;

    min-height:460px;

    display:flex;

    align-items:center;

    justify-content:center;

}



/* LAPTOP */

.case-laptop{

    width:470px;

    position:relative;

    transform:
        perspective(1200px)
        rotateX(3deg)
        rotateY(-7deg);

    transition:
        transform .6s
        cubic-bezier(.22,.61,.36,1);

}


.case-device-stage:hover .case-laptop{

    transform:
        perspective(1200px)
        rotateX(1deg)
        rotateY(-2deg)
        translateY(-7px);

}


.case-laptop-screen{

    height:305px;

    overflow:hidden;

    padding:13px;

    border:
        10px solid
        #17171b;

    border-radius:
        17px
        17px
        7px
        7px;

    background:#fff;

    box-shadow:
        0 32px
        65px
        rgba(24,13,38,.20);

}


.case-browser-bar{

    height:17px;

    display:flex;

    align-items:center;

    gap:5px;

}


.case-browser-bar span{

    width:6px;

    height:6px;

    display:block;

    border-radius:50%;

    background:#ddd9e1;

}


.case-web-nav{

    height:16px;

    margin-bottom:15px;

    border-radius:4px;

    background:#f1eef4;

}


.case-web-layout{

    height:230px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

}


.case-web-copy{

    padding:22px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.case-web-copy small{

    color:#6d28d9;

    font-size:7px;

    font-weight:900;

    letter-spacing:.1em;

}


.case-web-copy strong{

    max-width:160px;

    margin:
        9px 0
        15px;

    font-size:20px;

    line-height:1;

}


.case-copy-line{

    width:100%;

    max-width:145px;

    height:5px;

    margin-bottom:7px;

    border-radius:4px;

    background:#e5e1e8;

}


.case-copy-line.short{

    width:75%;

}


.case-web-copy button{

    width:82px;

    height:27px;

    margin-top:10px;

    border:0;

    background:#6d28d9;

    color:#fff;

    font-size:7px;

    font-weight:900;

}


.case-web-art{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #141017,
            #441978
        );

}


.case-art-purple{

    position:absolute;

    width:130px;

    height:130px;

    top:25px;

    left:30px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #9b72ff,
            #5b21b6
        );

    filter:blur(1px);

}


.case-art-panel{

    position:absolute;

    right:17px;

    bottom:20px;

    width:90px;

    height:115px;

    border-radius:12px;

    border:
        1px solid
        rgba(255,255,255,.25);

    background:
        rgba(255,255,255,.10);

}


.case-art-circle{

    position:absolute;

    width:65px;

    height:65px;

    left:18px;

    bottom:20px;

    border-radius:50%;

    border:
        10px solid
        rgba(255,255,255,.16);

}



/* LAPTOP BASE */

.case-laptop-base{

    width:520px;

    height:22px;

    position:relative;

    left:50%;

    transform:translateX(-50%);

    border-radius:
        4px
        4px
        30px
        30px;

    background:
        linear-gradient(
            #53535a,
            #1d1d22
        );

}


.case-laptop-base:after{

    content:"";

    position:absolute;

    top:3px;

    left:50%;

    transform:translateX(-50%);

    width:135px;

    height:5px;

    border-radius:
        0 0
        7px 7px;

    background:#7a7a80;

}



/* PHONE */

.case-phone{

    position:absolute;

    z-index:4;

    right:5px;

    bottom:5px;

    width:128px;

    height:265px;

    padding:
        24px 11px
        13px;

    border:
        7px solid
        #151519;

    border-radius:27px;

    background:#fff;

    transform:rotate(8deg);

    box-shadow:
        0 25px
        50px
        rgba(0,0,0,.18);

    transition:
        transform .5s ease;

}


.case-device-stage:hover .case-phone{

    transform:
        rotate(4deg)
        translateY(-5px);

}


.case-phone-notch{

    width:42px;

    height:8px;

    position:absolute;

    top:7px;

    left:50%;

    transform:translateX(-50%);

    border-radius:10px;

    background:#111;

}


.case-phone-banner{

    height:49px;

    border-radius:9px;

    background:
        linear-gradient(
            135deg,
            #1e102f,
            #7c3aed
        );

}


.case-phone-circle{

    width:58px;

    height:58px;

    margin:14px auto;

    border:
        8px solid
        #eee8f8;

    border-top-color:#6d28d9;

    border-radius:50%;

}


.case-phone i{

    display:block;

    height:7px;

    margin:8px 3px;

    border-radius:5px;

    background:#e6e1ea;

}


.case-phone button{

    width:100%;

    height:27px;

    margin-top:8px;

    border:0;

    border-radius:5px;

    background:#6d28d9;

    color:#fff;

    font-size:7px;

    font-weight:900;

}



/* ============================================================
   STUDY OVERVIEW
============================================================ */

.case-overview{

    padding:
        75px 0
        55px;

}


.case-small-heading{

    margin-bottom:20px;

}


.case-small-heading span{

    display:block;

    margin-bottom:6px;

    color:#8c8691;

    font-size:9px;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.case-small-heading h2{

    margin:0;

    font-size:27px;

    line-height:1;

    text-transform:none;

}


.case-overview-text{

    max-width:980px;

}


.case-overview-text p{

    color:#56515b;

    font-size:13px;

    line-height:1.8;

}


.case-metrics{

    display:grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    margin-top:45px;

}


.case-metrics article{

    position:relative;

    padding:14px 25px;

    text-align:center;

}


.case-metrics article:not(:last-child):after{

    content:"";

    position:absolute;

    right:0;

    top:10%;

    width:1px;

    height:80%;

    background:#bcb6c1;

}


.case-metrics strong{

    display:block;

    color:#6d28d9;

    font-size:26px;

    line-height:1;

}


.case-metrics span{

    display:block;

    margin-top:7px;

    color:#635d68;

    font-size:10px;

}



/* ============================================================
   PROBLEM SOLUTION
============================================================ */

.case-problem-solution{

    padding:
        45px 0
        90px;

}


.case-problem-grid{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:30px;

}


.case-dashed-card{

    position:relative;

    padding:30px;

    border:
        2px dashed
        #9f94aa;

    border-radius:17px;

    background:#fff;

    transition:
        .35s ease;

}


.case-dashed-card:hover{

    transform:translateY(-5px);

    box-shadow:
        0 24px
        50px
        rgba(59,30,84,.08);

}


.case-dashed-card:after{

    content:"";

    position:absolute;

    inset:6px;

    border:
        1px solid
        #eeeaf1;

    border-radius:11px;

    pointer-events:none;

}


.case-card-top{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:12px;

}


.case-card-top span{

    color:#6d28d9;

    font-size:12px;

    font-weight:900;

}


.case-card-top small{

    color:#8d8791;

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:.08em;

}


.case-dashed-card h3{

    position:relative;

    z-index:2;

    margin:
        13px 0
        20px;

    font-size:24px;

    text-transform:none;

}


.case-dashed-card ul{

    position:relative;

    z-index:2;

    margin:0;

    padding-left:19px;

}


.case-dashed-card li{

    margin-bottom:12px;

    color:#5b5660;

    font-size:12px;

    line-height:1.65;

}



/* ============================================================
   DESIGN THINKING
============================================================ */

.case-thinking{

    padding:
        85px 0
        100px;

    background:#faf9fb;

}


.case-centered-heading{

    max-width:760px;

    margin:
        0 auto
        60px;

    text-align:center;

}


.case-centered-heading>span{

    display:block;

    margin-bottom:8px;

    color:#6d28d9;

    font-size:9px;

    font-weight:900;

    letter-spacing:.12em;

    text-transform:uppercase;

}


.case-centered-heading h2{

    margin:
        0 0
        14px;

    font-size:
        clamp(
            33px,
            3.7vw,
            47px
        );

    line-height:1;

    text-transform:none;

}


.case-centered-heading>p{

    max-width:700px;

    margin:auto;

    color:#66606b;

    font-size:13px;

    line-height:1.75;

}


.case-thinking-flow{

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.case-thinking-flow article{

    width:125px;

    text-align:center;

}


.thinking-circle{

    width:58px;

    height:58px;

    margin:
        0 auto
        14px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#eee7fb;

    color:#6d28d9;

    font-size:12px;

    font-weight:900;

    box-shadow:
        0 0
        0 7px
        rgba(109,40,217,.04);

}


.case-thinking-flow article strong{

    display:block;

    font-size:12px;

}


.case-thinking-flow article p{

    margin-top:7px;

    color:#7a7480;

    font-size:9px;

    line-height:1.55;

}


.thinking-connector{

    flex:1;

    height:1px;

    margin:
        0 10px
        72px;

    background:
        linear-gradient(
            90deg,
            #d9d3de,
            #6d28d9,
            #d9d3de
        );

}



/* ============================================================
   TIMELINE
============================================================ */

.case-timeline{

    padding:90px 0;

}


.case-timeline-heading{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:45px;

}


.case-timeline-heading:before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:50%;

    height:1px;

    background:#cbc5cf;

}


.case-timeline-heading span{

    position:relative;

    z-index:2;

    padding:
        8px 28px;

    border:
        1px solid
        #111;

    border-radius:999px;

    background:#fff;

    color:#111;

    font-size:11px;

    font-weight:900;

    text-transform:uppercase;

}


.case-timeline-grid{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:34px;

}


.case-timeline-column h3{

    margin:
        0 0
        27px;

    padding:12px;

    border-radius:7px;

    background:
        linear-gradient(
            90deg,
            #25113d,
            #6d28d9
        );

    color:#fff;

    text-align:center;

    font-size:16px;

    text-transform:none;

}


.case-week-grid{

    display:grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:9px;

}


.case-week-grid article{

    min-height:170px;

    padding:14px;

    border-top:
        3px solid
        #6d28d9;

    background:#faf9fb;

    transition:.35s ease;

}


.case-week-grid article:hover{

    transform:translateY(-5px);

    background:#f4effb;

}


.case-week-grid article>span{

    display:block;

    margin-bottom:10px;

    color:#7c7582;

    font-size:8px;

}


.case-week-grid strong{

    display:block;

    margin-bottom:10px;

    color:#6d28d9;

    font-size:10px;

}


.case-week-grid p{

    margin:0;

    color:#6d6772;

    font-size:8px;

    line-height:1.8;

}



/* ============================================================
   USER RESEARCH
============================================================ */

.case-research{

    padding:
        90px 0
        115px;

    background:#faf9fb;

}


.case-research-network{

    position:relative;

    width:
        min(
            760px,
            100%
        );

    min-height:420px;

    margin:20px auto 0;

}


.research-ring{

    position:absolute;

    left:50%;

    top:50%;

    transform:
        translate(
            -50%,
            -50%
        );

    border:
        1px solid
        rgba(109,40,217,.16);

    border-radius:50%;

}


.research-ring-one{

    width:510px;

    height:260px;

}


.research-ring-two{

    width:700px;

    height:360px;

}


.research-node{

    position:absolute;

    width:62px;

    height:62px;

    display:grid;

    place-items:center;

    border:
        5px solid
        #fff;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #21132f,
            #7c3aed
        );

    color:#fff;

    font-size:9px;

    font-weight:900;

    box-shadow:
        0 15px
        35px
        rgba(45,22,70,.18);

    transition:
        transform .35s ease;

}


.research-node:hover{

    transform:scale(1.12);

}


.research-center{

    width:105px;

    height:105px;

    left:50%;

    top:50%;

    transform:
        translate(
            -50%,
            -50%
        );

}


.research-center:hover{

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.08);

}


.research-node-one{

    left:14%;

    top:27%;

}


.research-node-two{

    right:14%;

    top:25%;

}


.research-node-three{

    left:23%;

    bottom:14%;

}


.research-node-four{

    right:23%;

    bottom:12%;

}


.research-node-five{

    left:44%;

    top:5%;

}


.research-node-six{

    right:39%;

    bottom:2%;

}



/* ============================================================
   OUTCOME
============================================================ */

.case-outcome{

    padding:90px 0;

}


.case-outcome-grid{

    display:grid;

    grid-template-columns:
        .85fr
        1.15fr;

    gap:80px;

    align-items:start;

}


.case-outcome h2{

    max-width:520px;

    margin:0;

    font-size:
        clamp(
            34px,
            3.8vw,
            49px
        );

    line-height:1;

    text-transform:none;

}


.case-outcome-right>p{

    margin-top:0;

    color:#625d67;

    font-size:14px;

    line-height:1.8;

}


.case-outcome-list{

    margin-top:26px;

    border-top:
        1px solid
        #ddd8e0;

}


.case-outcome-list article{

    display:grid;

    grid-template-columns:
        55px
        1fr;

    gap:15px;

    padding:17px 0;

    border-bottom:
        1px solid
        #ddd8e0;

}


.case-outcome-list span{

    color:#6d28d9;

    font-size:11px;

    font-weight:900;

}


.case-outcome-list strong{

    font-size:13px;

}



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

.case-final-cta{

    padding:85px 0;

    background:
        radial-gradient(
            circle at 82% 40%,
            rgba(124,58,237,.23),
            transparent 29%
        ),
        #09090b;

    color:#fff;

}


.case-final-grid{

    display:grid;

    grid-template-columns:
        1fr
        .8fr;

    gap:80px;

    align-items:center;

}


.case-final-cta h2{

    max-width:650px;

    margin:
        0 0
        15px;

    font-size:
        clamp(
            34px,
            3.7vw,
            49px
        );

    line-height:1;

    text-transform:none;

}


.case-final-cta p{

    max-width:620px;

    color:#bbb6c0;

    font-size:14px;

    line-height:1.75;

}


.case-final-buttons{

    justify-content:flex-end;

}



/* ============================================================
   TABLET
============================================================ */

@media(max-width:950px){


    .case-opening-grid,
    .case-problem-grid,
    .case-timeline-grid,
    .case-outcome-grid,
    .case-final-grid{

        grid-template-columns:1fr;

    }


    .case-opening-grid{

        gap:45px;

    }


    .case-device-stage{

        min-height:430px;

    }


    .case-laptop{

        width:
            min(
                470px,
                84%
            );

    }


    .case-laptop-base{

        width:108%;

    }


    .case-metrics{

        grid-template-columns:
            repeat(
                2,
                1fr
            );

        gap:20px;

    }


    .case-metrics article:after{

        display:none !important;

    }


    .case-thinking-flow{

        display:grid;

        grid-template-columns:
            repeat(
                3,
                1fr
            );

        gap:30px;

    }


    .case-thinking-flow article{

        width:auto;

    }


    .thinking-connector{

        display:none;

    }


    .case-week-grid{

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .case-final-buttons{

        justify-content:flex-start;

    }


}



/* ============================================================
   MOBILE
============================================================ */

@media(max-width:600px){


    .case-study-page .case-main-hero{

        min-height:390px !important;

        padding:
            115px 0
            65px !important;

    }


    .case-study-page .case-main-hero h1{

        font-size:42px !important;

    }


    .case-study-page .case-main-hero p{

        font-size:15px !important;

    }


    .case-opening{

        padding:
            70px 0
            60px;

    }


    .case-watermark{

        top:25px;

        font-size:62px;

    }


    .case-opening-copy h2{

        font-size:36px;

    }


    .case-device-stage{

        min-height:310px;

    }


    .case-laptop-screen{

        height:210px;

    }


    .case-web-layout{

        height:145px;

    }


    .case-web-copy{

        padding:10px;

    }


    .case-web-copy strong{

        font-size:14px;

    }


    .case-phone{

        width:90px;

        height:185px;

        right:0;

        border-width:5px;

    }


    .case-phone-circle{

        width:40px;

        height:40px;

        border-width:6px;

    }


    .case-metrics{

        grid-template-columns:
            1fr 1fr;

    }


    .case-metrics article{

        padding:15px;

    }


    .case-thinking-flow{

        grid-template-columns:
            1fr 1fr;

    }


    .case-week-grid{

        grid-template-columns:1fr;

    }


    .case-research-network{

        min-height:330px;

    }


    .research-ring-one{

        width:280px;

        height:170px;

    }


    .research-ring-two{

        width:350px;

        height:255px;

    }


    .research-node{

        width:46px;

        height:46px;

        border-width:3px;

        font-size:7px;

    }


    .research-center{

        width:82px;

        height:82px;

    }


    .case-outcome-list article{

        grid-template-columns:
            42px
            1fr;

    }


    .case-final-buttons .btn{

        width:100%;

    }


}
/* ============================================================
   CLICKABLE RESEARCH VECTOR ICONS
============================================================ */

.research-node{

    position:absolute;

    width:68px;
    height:68px;

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

    gap:4px;

    border:5px solid #fff;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #24123c,
            #6d28d9
        );

    color:#fff;

    text-decoration:none;

    box-shadow:
        0 15px
        35px
        rgba(45,22,70,.18);

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

    z-index:3;

}


.research-node svg{

    width:22px;
    height:22px;

    fill:#fff;

    flex:none;

}


.research-node span{

    color:#fff;

    font-size:7px;

    line-height:1;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.04em;

}


.research-node:not(.buyer-node):hover{

    transform:
        translateY(-5px)
        scale(1.08);

    background:
        linear-gradient(
            145deg,
            #6d28d9,
            #8b5cf6
        );

    box-shadow:
        0 20px
        45px
        rgba(109,40,217,.30);

}


.research-node:not(.buyer-node):focus-visible{

    outline:
        3px solid
        rgba(109,40,217,.28);

    outline-offset:4px;

}


/* CENTER */

.research-center{

    width:108px;
    height:108px;

    left:50%;
    top:50%;

    transform:
        translate(
            -50%,
            -50%
        );

    pointer-events:none;

}


.research-center svg{

    width:28px;
    height:28px;

}


.research-center span{

    font-size:8px;

}


/* POSITIONS */

.research-node-one{
    left:14%;
    top:27%;
}

.research-node-two{
    right:14%;
    top:25%;
}

.research-node-three{
    left:23%;
    bottom:14%;
}

.research-node-four{
    right:23%;
    bottom:12%;
}

.research-node-five{
    left:44%;
    top:5%;
}

.research-node-six{
    right:39%;
    bottom:2%;
}
/* =========================================================
   CASE STUDIES FINAL CTA BUTTONS
   LEFT = WHITE
   RIGHT = PURPLE
========================================================= */

.case-final-buttons{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    flex-wrap:wrap;
}


/* WHITE BUTTON */
.case-final-buttons .case-white-btn{
    background:#ffffff !important;
    color:#111111 !important;
    border:1px solid #ffffff !important;

    min-height:52px;
    padding:0 26px;

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

    font-weight:700;
    text-decoration:none;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.case-final-buttons .case-white-btn:hover{
    background:#f3f0f7 !important;
    color:#6d28d9 !important;
    border-color:#f3f0f7 !important;

    transform:translateY(-2px);
}


/* PURPLE BUTTON */
.case-final-buttons .case-purple-btn{
    background:#6d28d9 !important;
    color:#ffffff !important;
    border:1px solid #6d28d9 !important;

    min-height:52px;
    padding:0 26px;

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

    font-weight:700;
    text-decoration:none;

    transition:
        background .25s ease,
        transform .25s ease;
}


.case-final-buttons .case-purple-btn:hover{
    background:#7c3aed !important;
    border-color:#7c3aed !important;

    transform:translateY(-2px);
}


/* MOBILE */
@media(max-width:700px){

    .case-final-buttons{
        justify-content:flex-start;
        width:100%;
    }

    .case-final-buttons .case-white-btn,
    .case-final-buttons .case-purple-btn{
        width:100%;
    }

}
/* =========================================================
   DIGITAL PROMOTIX — PPC PAGE FINAL
   Clean hero, one form only, specialization grid, call CTAs
========================================================= */

.page-variant-4.single-form-page{
  --ppc-purple:#6d28d9;
  --ppc-purple-2:#8b5cf6;
  --ppc-ink:#08060e;
  --ppc-ink-2:#170624;
  --ppc-paper:#ffffff;
  --ppc-muted:#6e6877;
}

/* HERO */
.ppc-hero-final{
  position:relative;
  overflow:hidden;
  padding:148px 0 86px!important;
  background:
    radial-gradient(circle at 82% 24%, rgba(139,92,246,.28), transparent 26%),
    radial-gradient(circle at 24% 72%, rgba(109,40,217,.14), transparent 30%),
    linear-gradient(100deg,#07030d 0%,#11051e 52%,#26083f 100%)!important;
  color:#fff;
}

.ppc-hero-final:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,.02)),
    radial-gradient(circle at 52% 20%,rgba(255,255,255,.04),transparent 26%);
}

.ppc-hero-grid{
  position:relative;
  z-index:2;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr)!important;
  gap:70px!important;
  align-items:center!important;
}

.ppc-hero-copy{
  max-width:650px;
}

.ppc-hero-copy .eyebrow,
.ppc-form-intro .eyebrow{
  color:#a78bfa!important;
  font-size:12px!important;
  letter-spacing:.16em!important;
  font-weight:700!important;
}

.ppc-hero-copy h1{
  margin:14px 0 22px!important;
  max-width:650px;
  color:#fff!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:clamp(46px,5.2vw,72px)!important;
  line-height:.98!important;
  font-weight:700!important;
  letter-spacing:-.035em!important;
  text-transform:none!important;
}

.ppc-hero-lead{
  max-width:590px!important;
  margin:0 0 28px!important;
  color:rgba(255,255,255,.84)!important;
  font-size:18px!important;
  line-height:1.7!important;
}

.ppc-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:20px;
}

.ppc-hero-actions .btn{
  min-height:52px;
  padding:0 22px;
  border-radius:4px!important;
  font-size:13px!important;
  font-weight:800!important;
  letter-spacing:.02em;
}

.ppc-call-btn{
  background:#fff!important;
  color:#111!important;
  border:1px solid #fff!important;
}

.ppc-call-btn:hover{
  background:#f3eefb!important;
  color:#5b21b6!important;
}

.ppc-primary-btn{
  background:var(--ppc-purple)!important;
  color:#fff!important;
  border:1px solid var(--ppc-purple)!important;
}

.ppc-primary-btn:hover{
  background:#7c3aed!important;
  border-color:#7c3aed!important;
}

.ppc-hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.ppc-hero-trust span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:rgba(255,255,255,.84);
  font-size:11px;
  font-weight:600;
}

/* RIGHT SIDE — FORM ONLY */
.ppc-hero-form{
  width:100%;
  max-width:470px;
  justify-self:end;
}

.ppc-form-intro{
  margin-bottom:14px;
  padding:0 6px;
}

.ppc-form-intro h2{
  margin:7px 0 8px!important;
  color:#fff!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:26px!important;
  line-height:1.1!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
  text-transform:none!important;
}

.ppc-form-intro p{
  margin:0!important;
  color:rgba(255,255,255,.72)!important;
  font-size:13px!important;
  line-height:1.55!important;
}

.ppc-hero-form .dp-form-include{
  width:100%;
}

.ppc-hero-form .dp-form-include .wrap,
.ppc-hero-form .dp-form-include .card{
  max-width:none!important;
}

.ppc-hero-form .dp-form-include .card{
  border-radius:8px!important;
  box-shadow:0 22px 55px rgba(0,0,0,.26)!important;
}

/* SPECIALIZATIONS */
.ppc-specializations{
  padding:86px 0!important;
}

.ppc-section-head{
  max-width:780px;
  margin-bottom:40px;
}

.ppc-section-head h2{
  margin:6px 0 12px!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:clamp(34px,3.8vw,48px)!important;
  line-height:1.04!important;
  font-weight:700!important;
  letter-spacing:-.025em!important;
  text-transform:none!important;
}

.ppc-section-head p{
  max-width:700px;
  margin:0!important;
  color:var(--ppc-muted)!important;
  font-size:15px!important;
  line-height:1.7!important;
}

.ppc-specialization-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.ppc-specialization-card{
  min-height:255px;
  display:flex;
  flex-direction:column;
  padding:26px;
  background:#fff;
  border:1px solid #e8e3ee;
  border-radius:10px;
  box-shadow:0 13px 32px rgba(32,16,48,.045);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.ppc-specialization-card:hover{
  transform:translateY(-4px);
  border-color:#d7c6ee;
  box-shadow:0 18px 42px rgba(59,30,84,.09);
}

.ppc-specialization-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin-bottom:20px;
  border:1px solid #7c3aed;
  border-radius:50%;
  color:#6d28d9;
  font-size:12px;
  font-weight:800;
}

.ppc-specialization-card h3{
  margin:0 0 10px!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:20px!important;
  line-height:1.2!important;
  font-weight:700!important;
  text-transform:none!important;
}

.ppc-specialization-card p{
  margin:0 0 20px!important;
  color:var(--ppc-muted)!important;
  font-size:14px!important;
  line-height:1.65!important;
}

.ppc-specialization-link{
  margin-top:auto;
  color:#5b21b6;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}

.ppc-specialization-link:hover{
  color:#111;
}

.ppc-specialization-cta{
  margin-top:26px;
  padding:26px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-radius:10px;
  background:#0a0810;
  color:#fff;
}

.ppc-specialization-cta h3{
  margin:4px 0 0!important;
  max-width:650px;
  color:#fff!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:24px!important;
  line-height:1.15!important;
  font-weight:700!important;
  text-transform:none!important;
}

.ppc-outline-dark{
  background:#fff!important;
  color:#111!important;
  border:1px solid #fff!important;
}

/* Make core page headings cleaner */
.page-variant-4.single-form-page main > .section h2{
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:700!important;
  text-transform:none!important;
  letter-spacing:-.02em!important;
}

/* RESPONSIVE */
@media(max-width:980px){
  .ppc-hero-grid{
    grid-template-columns:1fr!important;
    gap:40px!important;
  }
  .ppc-hero-form{
    max-width:100%;
    justify-self:stretch;
  }
  .ppc-specialization-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:640px){
  .ppc-hero-final{
    padding:118px 0 62px!important;
  }
  .ppc-hero-copy h1{
    font-size:clamp(38px,11vw,52px)!important;
  }
  .ppc-hero-lead{
    font-size:16px!important;
  }
  .ppc-hero-actions{
    flex-direction:column;
  }
  .ppc-hero-actions .btn{
    width:100%;
  }
  .ppc-specialization-grid{
    grid-template-columns:1fr;
  }
  .ppc-specialization-cta{
    align-items:flex-start;
    flex-direction:column;
  }
  .ppc-specialization-cta .button-row{
    width:100%;
  }
  .ppc-specialization-cta .button-row .btn{
    width:100%;
  }
}
/* ============================================================
   DIGITAL PROMOTIX — PPC PAGE FINAL V2
   Keep this stylesheet LAST in <head>.
============================================================ */

:root {
  --ppc-purple: #6d28d9;
  --ppc-violet: #7c3aed;
  --ppc-lilac: #eee5ff;
  --ppc-lilac-2: #f7f3ff;
  --ppc-ink: #100b16;
  --ppc-copy: #5f5869;
  --ppc-line: #e5dcef;
  --ppc-white: #ffffff;
}

html { scroll-behavior: smooth; }
#ppc-audit-form { scroll-margin-top: 110px; }

/* HERO BUTTON ORDER */
.ppc-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ppc-hero-actions .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 13px 22px; border-radius: 4px; font-size: 13px; font-weight: 900; text-transform: uppercase; }
.ppc-white-btn,.ppc-call-btn { color: #111 !important; background: #fff !important; border: 1px solid #fff !important; }
.ppc-white-btn:hover,.ppc-call-btn:hover { color: var(--ppc-purple) !important; background: #f4effb !important; }
.ppc-primary-btn { color: #fff !important; background: var(--ppc-purple) !important; border: 1px solid var(--ppc-purple) !important; }
.ppc-primary-btn:hover { background: var(--ppc-violet) !important; border-color: var(--ppc-violet) !important; }

/* SIX SERVICE RECTANGLES */
.ppc-section-head { max-width: 820px; margin-bottom: 36px; }
.ppc-section-head h2 { display: block !important; visibility: visible !important; opacity: 1 !important; color: #0d0b10 !important; }
.ppc-specialization-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.ppc-specialization-card {
  min-height: 310px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ppc-line);
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(42,21,71,.05);
}
.ppc-specialization-card h3 { display: block !important; visibility: visible !important; opacity: 1 !important; margin: 0 0 10px !important; color: #0b0910 !important; font-size: 20px !important; }
.ppc-specialization-card p { margin: 0 0 20px !important; color: var(--ppc-copy) !important; font-size: 14px !important; line-height: 1.65 !important; }
.ppc-specialization-icon { width: 46px; height: 46px; margin-bottom: 18px; display: grid; place-items: center; color: var(--ppc-purple); border: 1px solid var(--ppc-violet); border-radius: 50%; font-size: 12px; font-weight: 900; }

.ppc-card-actions { width: 100%; margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ppc-card-actions .btn { min-height: 44px; padding: 11px 10px !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 4px !important; font-size: 11px !important; font-weight: 900 !important; line-height: 1.1 !important; text-align: center; text-transform: uppercase; text-decoration: none !important; }
.ppc-card-call { color: #fff !important; background: var(--ppc-purple) !important; border: 1px solid var(--ppc-purple) !important; }
.ppc-card-call:hover { color: #fff !important; background: var(--ppc-violet) !important; }
.ppc-card-form { color: var(--ppc-purple) !important; background: #fff !important; border: 1px solid var(--ppc-purple) !important; }
.ppc-card-form:hover { color: #fff !important; background: var(--ppc-purple) !important; }

/* SHARED REFERENCE DETAILS */
.ppc-reference-brand { margin-bottom: 42px; display: flex; justify-content: space-between; gap: 20px; color: #17121d; font-size: 11px; font-weight: 900; letter-spacing: .02em; }
.ppc-reference-brand span { color: #81778b; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.ppc-mini-label { display: inline-flex; width: fit-content; padding: 6px 10px; color: var(--ppc-purple); background: var(--ppc-lilac-2); border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

/* REFERENCE SECTION 01 — TASK TIMELINE */
.ppc-timeline-section { padding: 76px 0 88px !important; color: var(--ppc-ink) !important; background: #fff !important; }
.ppc-timeline-layout { display: grid; grid-template-columns: minmax(245px,.62fr) minmax(0,1.7fr); gap: clamp(42px,6vw,86px); align-items: start; }
.ppc-timeline-intro { padding-top: 2px; }
.ppc-timeline-intro h2 { display: block !important; visibility: visible !important; opacity: 1 !important; max-width: 360px; margin: 14px 0 12px !important; color: var(--ppc-ink) !important; font-size: clamp(34px,3.7vw,52px) !important; line-height: 1.02 !important; letter-spacing: -.035em; }
.ppc-timeline-intro > p { max-width: 360px; margin: 0 0 28px !important; color: var(--ppc-copy) !important; font-size: 14px !important; line-height: 1.65 !important; }
.ppc-stage-list { margin: 0; padding: 0; list-style: none; counter-reset: ppcstage; border-top: 1px solid var(--ppc-line); }
.ppc-stage-list li { counter-increment: ppcstage; position: relative; padding: 15px 0 15px 31px; border-bottom: 1px solid var(--ppc-line); }
.ppc-stage-list li::before { content: "0" counter(ppcstage); position: absolute; top: 16px; left: 0; color: var(--ppc-purple); font-size: 10px; font-weight: 900; }
.ppc-stage-list strong { display: block; color: #1a151e; font-size: 13px; }
.ppc-stage-list span { display: block; margin-top: 4px; color: #776f80; font-size: 11px; line-height: 1.45; }

.ppc-timeline-board { min-height: 470px; position: relative; padding-top: 50px; isolation: isolate; }
.ppc-week-heads { position: absolute; inset: 0 0 auto 0; display: grid; grid-template-columns: repeat(4,1fr); }
.ppc-week-heads span { padding-left: 14px; color: var(--ppc-purple); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.ppc-week-grid { position: absolute; inset: 36px 0 0; z-index: -1; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--ppc-line); border-bottom: 1px solid var(--ppc-line); }
.ppc-week-grid i { border-left: 1px solid var(--ppc-line); }
.ppc-week-grid i:last-child { border-right: 1px solid var(--ppc-line); }
.ppc-timeline-task { position: absolute; min-height: 92px; padding: 15px 17px; color: #241432; background: var(--ppc-lilac); border: 1px solid #cfb9ee; border-radius: 4px; box-shadow: 0 12px 24px rgba(79,38,128,.07); }
.ppc-timeline-task small { display: block; margin-bottom: 5px; color: var(--ppc-purple); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ppc-timeline-task strong { display: block; color: #241432; font-size: 13px; line-height: 1.25; }
.ppc-timeline-task p { margin: 6px 0 0 !important; color: #65566f !important; font-size: 10px !important; line-height: 1.45 !important; }
.ppc-timeline-task.task-a { top: 66px; left: 2%; width: 24%; }
.ppc-timeline-task.task-b { top: 166px; left: 18%; width: 38%; }
.ppc-timeline-task.task-c { top: 266px; left: 39%; width: 31%; }
.ppc-timeline-task.task-d { top: 106px; left: 69%; width: 28%; }
.ppc-timeline-task.task-e { top: 366px; left: 56%; width: 40%; background: var(--ppc-purple); border-color: var(--ppc-purple); color: #fff; }
.ppc-timeline-task.task-e small,.ppc-timeline-task.task-e strong,.ppc-timeline-task.task-e p { color: #fff !important; }

/* REFERENCE SECTION 02 — COLLABORATION EDGE */
.ppc-edge-section { padding: 74px 0 92px !important; color: var(--ppc-ink) !important; background: #fff !important; border-top: 1px solid #eee8f4; }
.ppc-edge-heading { max-width: 760px; margin-bottom: 30px; }
.ppc-edge-heading h2 { display: block !important; visibility: visible !important; opacity: 1 !important; margin: 14px 0 0 !important; color: var(--ppc-ink) !important; font-size: clamp(38px,4.2vw,58px) !important; line-height: 1.02 !important; letter-spacing: -.035em; }
.ppc-edge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ppc-edge-card { min-height: 440px; padding: clamp(30px,4vw,52px); display: flex; flex-direction: column; border-radius: 5px; }
.ppc-edge-card--light { color: #1c1720; background: #f5f3f6; }
.ppc-edge-card--purple { color: #fff; background: var(--ppc-purple); }
.ppc-edge-tag { width: fit-content; margin-bottom: 18px; padding: 6px 9px; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.ppc-edge-card--light .ppc-edge-tag { color: var(--ppc-purple); background: #e7ddf7; }
.ppc-edge-card--purple .ppc-edge-tag { color: #fff; background: rgba(255,255,255,.16); }
.ppc-edge-card h3 { display: block !important; visibility: visible !important; opacity: 1 !important; max-width: 520px; margin: 0 0 25px !important; font-size: clamp(25px,2.7vw,38px) !important; line-height: 1.1 !important; letter-spacing: -.025em; }
.ppc-edge-card--light h3 { color: #18131c !important; }
.ppc-edge-card--purple h3 { color: #fff !important; }
.ppc-edge-card ul { margin: 0 0 28px; padding: 0; list-style: none; display: grid; gap: 14px; }
.ppc-edge-card li { position: relative; padding-left: 23px; font-size: 13px; line-height: 1.5; }
.ppc-edge-card li::before { content: ""; position: absolute; top: 6px; left: 1px; width: 8px; height: 4px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.ppc-edge-card--light li { color: #514a57; }
.ppc-edge-card--purple li { color: #f1eaff; }
.ppc-edge-actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ppc-edge-actions .btn { min-height: 46px; padding: 12px 14px !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 4px !important; font-size: 11px !important; font-weight: 900 !important; text-transform: uppercase; text-decoration: none !important; }
.ppc-edge-card--light .ppc-edge-call { color: #fff !important; background: var(--ppc-purple) !important; border: 1px solid var(--ppc-purple) !important; }
.ppc-edge-card--light .ppc-edge-form { color: var(--ppc-purple) !important; background: transparent !important; border: 1px solid var(--ppc-purple) !important; }
.ppc-edge-card--purple .ppc-edge-call { color: var(--ppc-purple) !important; background: #fff !important; border: 1px solid #fff !important; }
.ppc-edge-card--purple .ppc-edge-form { color: #fff !important; background: transparent !important; border: 1px solid rgba(255,255,255,.72) !important; }
.ppc-edge-actions .btn:hover { transform: translateY(-2px); }

@media (max-width: 960px) {
  .ppc-specialization-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ppc-timeline-layout { grid-template-columns: 1fr; }
  .ppc-timeline-intro { max-width: 620px; }
  .ppc-timeline-board { min-height: 470px; }
}

@media (max-width: 680px) {
  .ppc-hero-actions { display: grid; grid-template-columns: 1fr; }
  .ppc-hero-actions .btn { width: 100%; }
  .ppc-specialization-grid,.ppc-edge-grid { grid-template-columns: 1fr; }
  .ppc-specialization-card { min-height: 300px; }
  .ppc-reference-brand { margin-bottom: 30px; align-items: flex-start; flex-direction: column; gap: 5px; }
  .ppc-timeline-section,.ppc-edge-section { padding: 58px 0 66px !important; }
  .ppc-timeline-board { min-height: auto; padding-top: 0; display: grid; gap: 10px; }
  .ppc-week-heads,.ppc-week-grid { display: none; }
  .ppc-timeline-task { position: relative !important; inset: auto !important; width: 100% !important; min-height: 0; padding: 18px; }
  .ppc-timeline-task.task-e { background: var(--ppc-purple); }
  .ppc-edge-card { min-height: 400px; }
}

@media (max-width: 420px) {
  .ppc-card-actions,.ppc-edge-actions { grid-template-columns: 1fr; }
  .ppc-specialization-card { min-height: 350px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ppc-card-actions .btn,.ppc-edge-actions .btn { transition: none !important; }
}
/* =========================================================
   FINAL BUTTON COLOR FIX — KEEP AT THE END OF PPC-FINAL.CSS
========================================================= */

/* HERO: FIRST BUTTON WHITE */
body.single-form-page
.page-hero.ppc-hero-final
.ppc-hero-actions > a.btn:first-child,
body.single-form-page
.page-hero.ppc-hero-final
.ppc-hero-actions > a.ppc-call-btn {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #ffffff !important;
    opacity: 1 !important;
}

/* HERO: FIRST BUTTON HOVER */
body.single-form-page
.page-hero.ppc-hero-final
.ppc-hero-actions > a.btn:first-child:hover,
body.single-form-page
.page-hero.ppc-hero-final
.ppc-hero-actions > a.ppc-call-btn:hover {
    background: #f3eefb !important;
    color: #6d28d9 !important;
    -webkit-text-fill-color: #6d28d9 !important;
    border-color: #f3eefb !important;
}

/* HERO: SECOND BUTTON PURPLE */
body.single-form-page
.page-hero.ppc-hero-final
.ppc-hero-actions > a.btn:nth-child(2),
body.single-form-page
.page-hero.ppc-hero-final
.ppc-hero-actions > a.ppc-primary-btn {
    background: #6d28d9 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #6d28d9 !important;
    opacity: 1 !important;
}

/* HERO: SECOND BUTTON HOVER */
body.single-form-page
.page-hero.ppc-hero-final
.ppc-hero-actions > a.btn:nth-child(2):hover,
body.single-form-page
.page-hero.ppc-hero-final
.ppc-hero-actions > a.ppc-primary-btn:hover {
    background: #7c3aed !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #7c3aed !important;
}

/* BOTH RECTANGLE BUTTONS */
body.single-form-page
.ppc-specialization-card
.ppc-card-actions > a.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 44px !important;
    padding: 11px 10px !important;

    background: #6d28d9 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border: 1px solid #6d28d9 !important;
    border-radius: 4px !important;

    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;

    visibility: visible !important;
    opacity: 1 !important;
}

/* FREE AUDIT TEXT — FORCE WHITE */
body.single-form-page
.ppc-specialization-card
.ppc-card-actions > a.ppc-card-form,
body.single-form-page
.ppc-specialization-card
.ppc-card-actions > a.ppc-card-form:link,
body.single-form-page
.ppc-specialization-card
.ppc-card-actions > a.ppc-card-form:visited {
    background: #6d28d9 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #6d28d9 !important;
    opacity: 1 !important;
}

/* RECTANGLE BUTTON HOVER */
body.single-form-page
.ppc-specialization-card
.ppc-card-actions > a.btn:hover,
body.single-form-page
.ppc-specialization-card
.ppc-card-actions > a.btn:focus-visible {
    background: #5218b8 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #5218b8 !important;
    opacity: 1 !important;
}

/* KEYBOARD FOCUS */
body.single-form-page
.ppc-hero-actions > a.btn:focus-visible,
body.single-form-page
.ppc-card-actions > a.btn:focus-visible {
    outline: 3px solid rgba(167, 139, 250, 0.55) !important;
    outline-offset: 3px !important;
}

/* MOBILE */
@media (max-width: 680px) {
    body.single-form-page .ppc-hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    body.single-form-page .ppc-hero-actions > a.btn {
        width: 100% !important;
    }
}
/* ============================================================
   DIGITAL PROMOTIX — WEB DEVELOPMENT PURPLE EDITORIAL SYSTEM
   Load this file after all global stylesheets.
============================================================ */

:root {
  /* Existing class names stay unchanged so your HTML needs no edits. */
  --wd-lime: #6d28d9;
  --wd-lime-strong: #8b5cf6;
  --wd-black: #0b0b0b;
  --wd-ink: #141414;
  --wd-paper: #ffffff;
  --wd-soft: #f5f1fa;
  --wd-line: #ded5e9;
  --wd-muted: #625b6d;
  --wd-purple: #6d28d9;
  --wd-purple-dark: #170625;
  --wd-container: 1180px;
}

html { scroll-behavior: smooth; }
.wd-page { background: var(--wd-paper); color: var(--wd-ink); }
.wd-page * { box-sizing: border-box; }
.wd-page .container { width: min(var(--wd-container), calc(100% - 48px)); margin-inline: auto; }
.wd-page .section { padding: 92px 0; }
.wd-page h1,.wd-page h2,.wd-page h3,.wd-page p { overflow-wrap: anywhere; }
.wd-page h2 { color: var(--wd-ink); font-size: clamp(38px,4.2vw,62px); line-height: .98; letter-spacing: -.035em; }
.wd-page p { color: var(--wd-muted); line-height: 1.7; }
.wd-page a:focus-visible { outline: 3px solid rgba(167,139,250,.72); outline-offset: 4px; }
#details,#web-audit-form { scroll-margin-top: 110px; }

/* HERO — EXISTING PURPLE IDENTITY, CLEANER FORM SIDE */
.wd-page .wd-hero {
  min-height: 760px !important;
  padding: 142px 0 72px !important;
  color: #fff;
  background:
    radial-gradient(circle at 86% 48%,rgba(109,40,217,.22),transparent 30%),
    linear-gradient(118deg,#09060f 0%,#180525 58%,#30105d 100%) !important;
  position: relative;
  overflow: hidden;
}
.wd-page .wd-hero::after { content: ""; position: absolute; right: -240px; bottom: -490px; width: 720px; height: 720px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 100px rgba(109,40,217,.22); }
.wd-hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(390px,.82fr); gap: clamp(52px,7vw,100px); align-items: center; position: relative; z-index: 2; }
.wd-hero-copy { min-width: 0; }
.wd-page .wd-hero-copy .eyebrow { color: #c4a4ff !important; }
.wd-page .wd-hero-copy h1 { max-width: 690px; margin: 24px 0 20px; color: #fff !important; font-size: clamp(48px,5vw,74px) !important; line-height: .98 !important; letter-spacing: -.035em; text-transform: uppercase; }
.wd-page .wd-hero-copy > p { max-width: 680px !important; margin: 0 !important; color: #f4eefb !important; font-size: clamp(16px,1.4vw,19px) !important; line-height: 1.65 !important; }
.wd-hero-actions { display: flex !important; flex-wrap: wrap; gap: 12px !important; margin-top: 30px !important; }
.wd-page .wd-hero-actions .btn,.wd-page .wd-roadmap-actions .btn,.wd-page .wd-final-actions .btn { min-height: 48px; padding: 13px 22px !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 9px; border-radius: 2px !important; font-size: 12px !important; font-weight: 900 !important; text-transform: uppercase; text-decoration: none !important; transition: transform .25s ease,background .25s ease,color .25s ease; }
.wd-page .wd-btn-white,.wd-page .wd-hero-actions > a:first-child { color: #111 !important; -webkit-text-fill-color: #111 !important; background: #fff !important; border: 1px solid #fff !important; }
.wd-page .wd-btn-white:hover,.wd-page .wd-hero-actions > a:first-child:hover { color: var(--wd-purple) !important; -webkit-text-fill-color: var(--wd-purple) !important; background: #f2ecfa !important; border-color: #f2ecfa !important; transform: translateY(-2px); }
.wd-page .wd-btn-lime { color: #fff !important; -webkit-text-fill-color: #fff !important; background: var(--wd-purple) !important; border: 1px solid var(--wd-purple) !important; }
.wd-page .wd-btn-lime:hover { color: #fff !important; -webkit-text-fill-color: #fff !important; background: #7c3aed !important; border-color: #7c3aed !important; transform: translateY(-2px); }
.wd-proof-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.wd-proof-row span { padding: 8px 12px; color: #eee5f8 !important; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font-size: 10px; font-weight: 800; }
.wd-hero-form { min-width: 0; align-self: center; }
.wd-hero-form .dp-form-include,.wd-hero-form .dp-form-include .wrap,.wd-hero-form .dp-form-include .card { width: 100%; max-width: none !important; }
.wd-hero-form .dp-form-include .card { margin: 0 !important; border-radius: 8px !important; box-shadow: 0 28px 70px rgba(0,0,0,.28) !important; }

/* SHARED EDITORIAL DETAILS */
.wd-section-meta { margin-bottom: 42px; padding-bottom: 10px; display: flex; justify-content: space-between; gap: 18px; color: var(--wd-ink); border-bottom: 1px solid var(--wd-line); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.wd-section-meta span:last-child { color: #77776f; }
.wd-section-meta--dark { color: #fff; border-color: rgba(255,255,255,.25); }
.wd-section-meta--dark span:last-child { color: #b7b7b0; }
.wd-kicker { display: inline-block; margin-bottom: 14px; padding: 5px 8px; color: #fff; background: var(--wd-purple); font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.wd-kicker--dark { color: #fff; background: var(--wd-purple); }

/* INTRO / ARCHITECTURE */
.wd-intro-section { background: #fff; }
.wd-intro-grid { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: clamp(45px,7vw,90px); align-items: stretch; }
.wd-intro-copy { align-self: center; padding: 24px 0; }
.wd-intro-copy h2 { max-width: 520px; margin: 0 0 20px !important; }
.wd-intro-copy p { max-width: 520px; margin: 0 !important; font-size: 15px; }
.wd-architecture-visual { min-height: 430px; position: relative; overflow: hidden; background: var(--wd-soft); }
.wd-architecture-visual > img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); opacity: .94; }
.wd-visual-data { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3,1fr); color: #fff; background: var(--wd-purple); }
.wd-visual-data article { min-height: 96px; padding: 18px; border-right: 1px solid rgba(255,255,255,.30); }
.wd-visual-data article:last-child { border-right: 0; }
.wd-visual-data strong { display: block; font-size: 21px; }
.wd-visual-data span { display: block; margin-top: 10px; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.wd-deliverables { margin-top: 28px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--wd-line); border-bottom: 1px solid var(--wd-line); }
.wd-deliverables article { min-height: 170px; padding: 28px; display: grid; grid-template-columns: 35px 1fr; gap: 10px; border-right: 1px solid var(--wd-line); }
.wd-deliverables article:last-child { border-right: 0; }
.wd-deliverables > article > span { color: var(--wd-lime-strong); font-size: 11px; font-weight: 900; }
.wd-deliverables h3 { margin: 0 0 10px !important; color: var(--wd-ink) !important; font-size: 20px !important; }
.wd-deliverables p { margin: 0 !important; font-size: 13px !important; }

/* TRANSFORMATION */
.wd-transformation-section { color: #fff; background: var(--wd-black); }
.wd-transformation-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: end; margin-bottom: 42px; }
.wd-transformation-head h2 { max-width: 780px; margin: 0 !important; color: #fff !important; }
.wd-transformation-head > p { max-width: 500px; margin: 0 0 4px !important; color: #c9c9c1 !important; }
.wd-transformation-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #3a3a36; }
.wd-phase { min-height: 330px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; }
.wd-phase > span { font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.wd-phase h3 { max-width: 280px; margin: auto 0 14px !important; font-size: clamp(27px,2.5vw,38px) !important; line-height: 1.03 !important; }
.wd-phase p { margin: 0 !important; font-size: 13px !important; }
.wd-phase--dark { color: #fff; background: #151515; }
.wd-phase--dark h3 { color: #fff !important; }
.wd-phase--dark p { color: #bdbdb7 !important; }
.wd-phase--lime { color: #fff; background: var(--wd-purple); }
.wd-phase--lime h3 { color: #fff !important; }
.wd-phase--lime p { color: #eee7f8 !important; }
.wd-phase--light { color: #111; background: #fff; }
.wd-phase--light h3 { color: #111 !important; }

/* BENEFIT INDEX */
.wd-benefits-section { background: #fff; }
.wd-benefits-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: end; margin-bottom: 48px; }
.wd-benefits-head h2 { max-width: 720px; margin: 0 !important; }
.wd-benefits-head p { max-width: 460px; margin: 0 0 5px !important; }
.wd-benefit-index { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--wd-line); }
.wd-benefit-index article { min-height: 235px; padding: 28px 24px; border-right: 1px solid var(--wd-line); border-bottom: 1px solid var(--wd-line); }
.wd-benefit-index article:nth-child(3n) { border-right: 0; }
.wd-benefit-index article:nth-child(2),.wd-benefit-index article:nth-child(6) { background: var(--wd-soft); }
.wd-benefit-index article:nth-child(4) { color: #fff; background: var(--wd-purple); }
.wd-benefit-index span { color: #85857d; font-size: 11px; font-weight: 900; }
.wd-benefit-index article:nth-child(4) span { color: #ddd0f3; }
.wd-benefit-index h3 { margin: 52px 0 11px !important; color: var(--wd-ink) !important; font-size: 21px !important; }
.wd-benefit-index p { max-width: 280px; margin: 0 !important; font-size: 13px !important; }
.wd-benefit-index article:nth-child(4) h3 { color: #fff !important; }
.wd-benefit-index article:nth-child(4) p { color: #eee7f8 !important; }

/* SYSTEM SHOWCASE */
.wd-systems-section { background: var(--wd-soft); }
.wd-systems-head { margin-bottom: 34px; display: flex; justify-content: space-between; gap: 30px; align-items: end; }
.wd-systems-head h2 { max-width: 760px; margin: 0 !important; }
.wd-text-link { flex: 0 0 auto; padding-bottom: 7px; color: #111 !important; border-bottom: 1px solid #111; font-size: 12px; font-weight: 900; text-decoration: none; text-transform: uppercase; }
.wd-system-showcase { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: repeat(2,280px); gap: 12px; }
.wd-system-card { min-width: 0; position: relative; overflow: hidden; background: #111; }
.wd-system-card--large { grid-row: 1 / 3; }
.wd-system-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .78; transition: transform .65s cubic-bezier(.18,.75,.22,1),opacity .35s ease; }
.wd-system-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 35%,rgba(0,0,0,.86)); }
.wd-system-card > div { position: absolute; z-index: 2; right: 25px; bottom: 24px; left: 25px; }
.wd-system-card span { color: #c4a4ff; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.wd-system-card h3 { max-width: 450px; margin: 8px 0 0 !important; color: #fff !important; font-size: clamp(23px,2.4vw,36px) !important; line-height: 1.03 !important; }
.wd-system-card--lime { background: var(--wd-purple); }
.wd-system-card--lime img { mix-blend-mode: luminosity; opacity: .38; }
.wd-system-card--lime span { color: #fff; }
.wd-system-card:hover img { transform: scale(1.035); opacity: .92; }

/* ROADMAP */
.wd-roadmap-section { background: #fff; }
.wd-roadmap-layout { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: clamp(48px,7vw,100px); align-items: center; }
.wd-roadmap-copy h2 { max-width: 560px; margin: 0 0 18px !important; }
.wd-roadmap-copy p { max-width: 520px; margin: 0 !important; }
.wd-roadmap-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.wd-page .wd-btn-dark { color: #fff !important; background: #111 !important; border: 1px solid #111 !important; }
.wd-page .wd-btn-dark:hover { color: #fff !important; -webkit-text-fill-color: #fff !important; background: var(--wd-purple) !important; border-color: var(--wd-purple) !important; }
.wd-roadmap { min-height: 520px; position: relative; background: var(--wd-soft); border: 1px solid var(--wd-line); }
.wd-roadmap-axis { position: absolute; top: 50%; right: 8%; left: 8%; height: 1px; background: #aaa; }
.wd-roadmap-step { width: 29%; min-height: 110px; position: absolute; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; background: #fff; border: 1px solid var(--wd-line); }
.wd-roadmap-step::after { content: ""; position: absolute; left: 22px; width: 1px; height: 40px; background: #999; }
.wd-roadmap-step:nth-of-type(odd)::after { top: 100%; }
.wd-roadmap-step:nth-of-type(even)::after { bottom: 100%; }
.wd-roadmap-step span { color: var(--wd-lime-strong); font-size: 10px; font-weight: 900; }
.wd-roadmap-step strong { color: #111; font-size: 16px; }
.wd-roadmap-step small { color: #6d6d67; font-size: 10px; }
.wd-roadmap-step.step-1 { top: 56px; left: 5%; }
.wd-roadmap-step.step-2 { top: 286px; left: 20%; }
.wd-roadmap-step.step-3 { top: 92px; left: 38%; color: #fff; background: var(--wd-purple); border-color: var(--wd-purple); }
.wd-roadmap-step.step-3 span { color: #d9c9f2; }
.wd-roadmap-step.step-3 strong { color: #fff; }
.wd-roadmap-step.step-3 small { color: #eee7f8; }
.wd-roadmap-step.step-4 { top: 315px; left: 53%; }
.wd-roadmap-step.step-5 { top: 62px; right: 4%; }

/* CONVERSION ARCHITECTURE */
.wd-conversion-section { color: #fff; background: var(--wd-black); }
.wd-conversion-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(50px,8vw,110px); align-items: start; }
.wd-conversion-copy h2 { max-width: 650px; margin: 0 0 20px !important; color: #fff !important; }
.wd-conversion-copy p { max-width: 560px; margin: 0 !important; color: #c6c6bf !important; }
.wd-conversion-points { display: grid; grid-template-columns: repeat(3,1fr); background: #373733; gap: 1px; }
.wd-conversion-points article { min-height: 330px; padding: 27px 22px; display: flex; flex-direction: column; background: #181818; }
.wd-conversion-points .is-lime { color: #fff; background: var(--wd-purple); }
.wd-conversion-points span { font-size: 10px; font-weight: 900; }
.wd-conversion-points h3 { margin: auto 0 14px !important; color: #fff !important; font-size: 22px !important; line-height: 1.1 !important; }
.wd-conversion-points p { margin: 0 !important; color: #bfbfb8 !important; font-size: 12px !important; }
.wd-conversion-points .is-lime h3 { color: #fff !important; }
.wd-conversion-points .is-lime p { color: #eee7f8 !important; }

/* SEO / REQUIREMENTS */
.wd-seo-section { background: #fff; }
.wd-seo-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(55px,8vw,110px); align-items: start; }
.wd-seo-copy h2 { max-width: 700px; margin: 0 0 22px !important; }
.wd-seo-copy p { max-width: 690px; margin: 0 !important; font-size: 15px; }
.wd-seo-panel { border-top: 8px solid var(--wd-lime); background: var(--wd-soft); }
.wd-seo-panel-head { padding: 22px; display: flex; justify-content: space-between; gap: 20px; color: #111; border-bottom: 1px solid var(--wd-line); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.wd-seo-panel-head strong { color: var(--wd-lime-strong); }
.wd-seo-panel ul { margin: 0; padding: 0 22px; list-style: none; }
.wd-seo-panel li { min-height: 58px; display: flex; justify-content: space-between; gap: 24px; align-items: center; border-bottom: 1px solid var(--wd-line); color: #333; font-size: 12px; }
.wd-seo-panel li:last-child { border-bottom: 0; }
.wd-seo-panel b { color: #8a8a83; font-size: 10px; }

/* FINAL CTA */
.wd-final-cta { padding: 65px 0; color: #fff; background: var(--wd-purple); }
.wd-final-cta-inner { display: flex; justify-content: space-between; gap: 50px; align-items: end; }
.wd-final-cta span { display: block; margin-bottom: 10px; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.wd-final-cta h2 { max-width: 760px; margin: 0 !important; color: #fff !important; font-size: clamp(37px,4vw,58px) !important; }
.wd-final-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 10px; }
.wd-final-cta .wd-btn-white { color: var(--wd-purple) !important; -webkit-text-fill-color: var(--wd-purple) !important; border-color: #fff !important; }

/* TABLET */
@media (max-width: 1000px) {
  .wd-page .wd-hero { padding-top: 122px !important; }
  .wd-hero-grid { grid-template-columns: 1fr 420px; gap: 42px; }
  .wd-page .wd-hero-copy h1 { font-size: clamp(42px,5.8vw,60px) !important; }
  .wd-intro-grid,.wd-roadmap-layout,.wd-seo-layout,.wd-conversion-grid { grid-template-columns: 1fr; }
  .wd-transformation-head,.wd-benefits-head { grid-template-columns: 1fr; gap: 20px; }
  .wd-conversion-points { max-width: 780px; }
}

@media (max-width: 820px) {
  .wd-page .section { padding: 72px 0; }
  .wd-hero-grid { grid-template-columns: 1fr; }
  .wd-hero-copy { max-width: 720px; }
  .wd-hero-form { width: 100%; max-width: 680px; }
  .wd-deliverables,.wd-transformation-grid,.wd-benefit-index { grid-template-columns: 1fr 1fr; }
  .wd-deliverables article:nth-child(2) { border-right: 0; }
  .wd-deliverables article:last-child { grid-column: 1 / -1; border-top: 1px solid var(--wd-line); }
  .wd-benefit-index article:nth-child(3n) { border-right: 1px solid var(--wd-line); }
  .wd-benefit-index article:nth-child(2n) { border-right: 0; }
  .wd-system-showcase { grid-template-columns: 1fr 1fr; grid-template-rows: 420px 260px; }
  .wd-system-card--large { grid-column: 1 / -1; grid-row: auto; }
  .wd-conversion-points { grid-template-columns: 1fr 1fr; }
  .wd-conversion-points article:last-child { grid-column: 1 / -1; min-height: 220px; }
  .wd-final-cta-inner { align-items: flex-start; flex-direction: column; }
}

/* MOBILE */
@media (max-width: 600px) {
  .wd-page .container { width: min(100% - 30px,var(--wd-container)); }
  .wd-page .section { padding: 58px 0; }
  .wd-page .wd-hero { min-height: auto !important; padding: 105px 0 54px !important; }
  .wd-page .wd-hero-copy h1 { font-size: clamp(38px,11.5vw,52px) !important; }
  .wd-hero-actions,.wd-roadmap-actions,.wd-final-actions { width: 100%; display: grid !important; grid-template-columns: 1fr !important; }
  .wd-hero-actions .btn,.wd-roadmap-actions .btn,.wd-final-actions .btn { width: 100%; }
  .wd-section-meta { margin-bottom: 30px; align-items: flex-start; flex-direction: column; gap: 5px; }
  .wd-intro-grid { gap: 30px; }
  .wd-architecture-visual { min-height: 360px; }
  .wd-visual-data { grid-template-columns: 1fr; }
  .wd-visual-data article { min-height: 64px; display: flex; justify-content: space-between; align-items: center; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.25); }
  .wd-deliverables,.wd-transformation-grid,.wd-benefit-index,.wd-conversion-points { grid-template-columns: 1fr; }
  .wd-deliverables article,.wd-benefit-index article { border-right: 0 !important; }
  .wd-deliverables article:last-child,.wd-conversion-points article:last-child { grid-column: auto; }
  .wd-phase { min-height: 270px; }
  .wd-benefit-index article { min-height: 205px; }
  .wd-system-showcase { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3,300px); }
  .wd-system-card--large { grid-column: auto; }
  .wd-systems-head { align-items: flex-start; flex-direction: column; }
  .wd-roadmap { min-height: auto; padding: 16px; display: grid; gap: 10px; }
  .wd-roadmap-axis { display: none; }
  .wd-roadmap-step { width: 100%; min-height: 105px; position: relative; inset: auto !important; }
  .wd-roadmap-step::after { display: none; }
  .wd-conversion-points article,.wd-conversion-points article:last-child { min-height: 245px; }
  .wd-final-cta { padding: 52px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wd-page * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* ============================================================
   DIGITAL PROMOTIX — TRAFFIC-TO-FORM PERFORMANCE SECTION
   Purple/white editorial layout inspired by the supplied design.
   Keep this stylesheet last in <head>.
============================================================ */

:root {
  --traffic-purple: #6d28d9;
  --traffic-purple-hover: #5720b5;
  --traffic-purple-light: #8b5cf6;
  --traffic-purple-pale: #f4effb;
  --traffic-ink: #111014;
  --traffic-muted: #625c69;
  --traffic-line: #ded7e6;
  --traffic-white: #ffffff;
}

#traffic-performance,
#seo-audit-form {
  scroll-margin-top: 110px;
}

.traffic-performance-section {
  padding: 92px 0 !important;
  color: var(--traffic-ink);
  background: var(--traffic-white) !important;
  border-top: 12px solid var(--traffic-purple);
}

.traffic-performance-meta {
  margin-bottom: 46px;
  padding-bottom: 11px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--traffic-ink);
  border-bottom: 1px solid var(--traffic-line);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.traffic-performance-meta span:last-child {
  color: #817987;
}

.traffic-performance-head {
  margin-bottom: 42px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(45px,7vw,90px);
  align-items: end;
}

.traffic-performance-kicker {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 9px;
  color: #fff;
  background: var(--traffic-purple);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.traffic-performance-head h2 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 760px;
  margin: 0 !important;
  color: var(--traffic-ink) !important;
  font-size: clamp(40px,4.5vw,64px) !important;
  line-height: .98 !important;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.traffic-performance-head > p {
  max-width: 520px;
  margin: 0 0 4px !important;
  color: var(--traffic-muted) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.traffic-performance-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(390px,.78fr);
  gap: 1px;
  background: var(--traffic-line);
  border: 1px solid var(--traffic-line);
}

.traffic-controls {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  background: #fff;
}

.traffic-control-row {
  min-width: 0;
  min-height: 250px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid var(--traffic-line);
  border-bottom: 1px solid var(--traffic-line);
}

.traffic-control-row:nth-child(2n) {
  border-right: 0;
}

.traffic-control-row:nth-child(n+3) {
  border-bottom: 0;
}

.traffic-control-row--featured {
  color: #fff;
  background: var(--traffic-purple);
}

.traffic-control-copy {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
}

.traffic-control-copy > span {
  color: var(--traffic-purple);
  font-size: 11px;
  font-weight: 900;
}

.traffic-control-row--featured .traffic-control-copy > span {
  color: #d9c7f5;
}

.traffic-control-copy label {
  display: block;
  color: var(--traffic-ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

.traffic-control-copy p {
  margin: 7px 0 0 !important;
  color: #756e7b !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

.traffic-control-row--featured label,
.traffic-control-row--featured p {
  color: #fff !important;
}

.traffic-control-row output {
  margin: auto 0 18px;
  display: block;
  color: var(--traffic-ink);
  font-size: clamp(32px,3vw,46px);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.traffic-control-row--featured output {
  color: #fff;
}

.traffic-control-row input[type="range"] {
  width: 100%;
  height: 5px;
  cursor: pointer;
  accent-color: var(--traffic-purple);
}

.traffic-control-row--featured input[type="range"] {
  accent-color: #fff;
}

.traffic-results {
  min-width: 0;
  padding: 30px;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: var(--traffic-ink);
}

.traffic-result-title {
  margin-bottom: 24px;
  padding-bottom: 16px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(255,255,255,.2);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.traffic-result-title strong {
  color: #c4a4ff;
  text-align: right;
}

.traffic-result-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1px;
  background: rgba(255,255,255,.2);
}

.traffic-result-grid article {
  min-height: 145px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  background: #19171d;
}

.traffic-result-grid .traffic-result-featured {
  background: var(--traffic-purple);
}

.traffic-result-grid span {
  color: #c9c3ce;
  font-size: 10px;
  font-weight: 800;
}

.traffic-result-grid strong {
  margin: auto 0 8px;
  color: #fff;
  font-size: clamp(30px,3vw,44px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.traffic-result-grid small {
  color: #a9a3ae;
  font-size: 9px;
  line-height: 1.4;
}

.traffic-result-featured span,
.traffic-result-featured small {
  color: #eee6fa;
}

.traffic-performance-note {
  margin-top: 20px;
  padding: 18px;
  color: var(--traffic-ink);
  background: #fff;
}

.traffic-performance-note span {
  display: block;
  color: var(--traffic-purple);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.traffic-performance-note p {
  margin: 8px 0 0 !important;
  color: #4f4955 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.traffic-experience-points {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px 18px;
}

.traffic-experience-points li {
  position: relative;
  padding-left: 17px;
  color: #cac4cf;
  font-size: 10px;
  line-height: 1.5;
}

.traffic-experience-points li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 7px;
  height: 4px;
  border-left: 2px solid #a78bfa;
  border-bottom: 2px solid #a78bfa;
  transform: rotate(-45deg);
}

.traffic-performance-actions {
  margin-top: auto;
  padding-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.traffic-performance-actions .btn {
  min-height: 46px;
  padding: 12px 13px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 2px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
}

.traffic-call-btn {
  color: #fff !important;
  background: var(--traffic-purple) !important;
  border: 1px solid var(--traffic-purple) !important;
}

.traffic-form-btn {
  color: var(--traffic-ink) !important;
  background: #fff !important;
  border: 1px solid #fff !important;
}

.traffic-call-btn:hover {
  background: var(--traffic-purple-hover) !important;
  border-color: var(--traffic-purple-hover) !important;
}

.traffic-form-btn:hover {
  color: #fff !important;
  background: var(--traffic-purple) !important;
  border-color: var(--traffic-purple) !important;
}

.traffic-performance-section a:focus-visible,
.traffic-performance-section input:focus-visible {
  outline: 3px solid rgba(167,139,250,.62);
  outline-offset: 4px;
}

@media (max-width: 1000px) {
  .traffic-performance-head,
  .traffic-performance-layout {
    grid-template-columns: 1fr;
  }

  .traffic-performance-head {
    gap: 20px;
  }
}

@media (max-width: 680px) {
  .traffic-performance-section {
    padding: 62px 0 !important;
    border-top-width: 8px;
  }

  .traffic-performance-meta {
    margin-bottom: 32px;
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .traffic-performance-head h2 {
    font-size: clamp(35px,10vw,48px) !important;
  }

  .traffic-controls,
  .traffic-result-grid,
  .traffic-experience-points {
    grid-template-columns: 1fr;
  }

  .traffic-control-row {
    min-height: 220px;
    border-right: 0;
    border-bottom: 1px solid var(--traffic-line) !important;
  }

  .traffic-control-row:last-child {
    border-bottom: 0 !important;
  }

  .traffic-results {
    padding: 22px;
  }

  .traffic-performance-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .traffic-performance-section * {
    transition: none !important;
  }
}