/* ============================================================
   website-development.css
   Page-specific overrides for /website-development/index.html
   Typography matches homepage (finalhome.css) scale.
   ============================================================ */

/* ── Prevent horizontal scroll ───────────────────────────── */
body,
html {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── HERO ─────────────────────────────────────────────────── */

.wd-hero {
  position: relative;
  background: linear-gradient(135deg, #081422 0%, #0d1f38 45%, #0f2848 100%);
  overflow: hidden;
  padding: 80px 0 60px;
  min-height: 580px;
  display: flex;
  align-items: center;
}

.wd-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wd-hero__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wd-blob {
  position: absolute;
  pointer-events: none;
}
.wd-blob--1 {
  width: 320px;
  top: -60px;
  right: -60px;
  animation: wdBlobSpin 18s linear infinite;
}
.wd-blob--2 {
  width: 280px;
  bottom: -80px;
  left: -60px;
  animation: wdBlobSpin 24s linear infinite reverse;
}
@keyframes wdBlobSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.wd-hero__inner {
  display: flex;
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 2;
}

/* ── Hero LEFT ── */
.wd-hero__left {
  flex: 1;
  max-width: 560px;
}

.wd-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(242,102,41,0.12);
  border: 1px solid rgba(242,102,41,0.3);
  color: #f5a07a;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 30px;
  margin-bottom: 24px;
  font-family: 'Inter', sans-serif;
}
.wd-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f26629;
  display: inline-block;
  animation: wdPulse 1.8s ease-in-out infinite;
}
@keyframes wdPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(242,102,41,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(242,102,41,0); }
}

.wd-hero__h1 {
  font-size: 46px;
  font-weight: 800;
  color: #fff;
  line-height: 1.18;
  margin-bottom: 22px;
  font-family: 'Inter', sans-serif;
}

.wd-h1-highlight {
  color: #f26629;
  position: relative;
  display: inline-block;
}

.wd-underline-svg {
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 14px;
  overflow: visible;
}

.wd-hero__sub {
  font-size: 16px;
  color: rgba(255,255,255,0.72);
  line-height: 1.75;
  margin-bottom: 32px;
  font-family: 'Inter', sans-serif;
  max-width: 500px;
}

/* stats strip */
.wd-hero__stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 36px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 18px 24px;
  width: fit-content;
}
.wd-stat {
  text-align: center;
  padding: 0 20px;
}
.wd-stat__num {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: #f26629;
  font-family: 'Inter', sans-serif;
  line-height: 1.1;
}
.wd-stat__num sup {
  font-size: 16px;
  font-weight: 700;
}
.wd-stat__label {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  line-height: 1.4;
  margin-top: 4px;
  font-family: 'Inter', sans-serif;
}
.wd-stat-div {
  width: 1px;
  height: 38px;
  background: rgba(255,255,255,0.12);
}

/* CTAs */
.wd-hero__ctas {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.wd-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 10px;
  text-decoration: none;
  transition: all .22s;
  font-family: 'Inter', sans-serif;
}
.wd-cta--primary {
  background: #f26629;
  color: #fff;
}
.wd-cta--primary:hover {
  background: #d9541a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(242,102,41,0.4);
  text-decoration: none;
}
.wd-cta--ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.3);
}
.wd-cta--ghost:hover {
  border-color: #f26629;
  color: #f26629;
  text-decoration: none;
  transform: translateY(-2px);
}

/* trust row */
.wd-hero__trust {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wd-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  font-family: 'Inter', sans-serif;
}
.wd-trust-sep {
  color: rgba(255,255,255,0.2);
  font-size: 16px;
}

/* ── Hero RIGHT ── */
.wd-hero__right {
  flex: 0 0 auto;
  width: 580px;
  position: relative;
}

.wd-sketch-wrap {
  position: relative;
  animation: wdFloat 5s ease-in-out infinite;
}
@keyframes wdFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.wd-sketch-main {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,0.45));
}

/* floating animation classes for SVG elements */
.wd-float-1 { animation: wdEl1 3.5s ease-in-out infinite; }
.wd-float-2 { animation: wdEl2 4.2s ease-in-out infinite; }
.wd-float-3 { animation: wdEl3 3.8s ease-in-out infinite; }
@keyframes wdEl1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes wdEl2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes wdEl3 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* floating badges over illustration */
.wd-sketch-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(13,27,46,0.92);
  border: 1.5px solid rgba(242,102,41,0.35);
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  animation: wdBadgeFloat 4s ease-in-out infinite;
}
.wd-sketch-badge span {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  font-family: 'Inter', sans-serif;
  line-height: 1.3;
}
.wd-sketch-badge strong {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.wd-sketch-badge--delivery {
  top: 15px;
  left: -18px;
  animation-delay: 0s;
}
.wd-sketch-badge--code {
  bottom: 55px;
  right: -18px;
  animation-delay: 1.5s;
  border-color: rgba(76,206,128,0.35);
}
@keyframes wdBadgeFloat {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-8px) rotate(1deg); }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .wd-hero__right { width: 480px; }
  .wd-hero__h1    { font-size: 38px; }
}
@media (max-width: 900px) {
  .wd-hero__inner {
    flex-direction: column;
    gap: 40px;
  }
  .wd-hero__right {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }
  .wd-hero__left { max-width: 100%; }
  .wd-sketch-badge--delivery { left: 8px; }
  .wd-sketch-badge--code     { right: 8px; }
  .wd-hero { padding: 60px 0 40px; }
}
@media (max-width: 600px) {
  .wd-hero__h1   { font-size: 28px; }
  .wd-hero__stats { padding: 14px 12px; }
  .wd-stat        { padding: 0 10px; }
  .wd-stat__num   { font-size: 22px; }
  .wd-hero__ctas  { flex-direction: column; align-items: flex-start; }
  .wd-cta         { width: 100%; justify-content: center; }
}

/* ── Typography – mirror homepage heading scale ───────────── */

/* H1 hero */
.web-head h1 {
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  font-family: 'Inter', sans-serif;
}

/* Section H2 titles */
h2.mainheadingtitle,
span.mainheadingtitle {
  font-size: 32px;
  font-weight: 700;
  color: #3c4858;
  font-family: 'Inter', sans-serif;
  line-height: 1.3;
}

/* White-bg sections override */
.why_choose_our_smm h2.mainheadingtitle,
.why_choose_our_smm span.mainheadingtitle,
.fourpntr span.mainheadingtitle {
  color: #fff;
}

/* H3 service card titles inside app-plate */
.app-plate h3 {
  font-size: 20px;
  font-weight: 600;
  color: #3c4858;
  font-family: 'Inter', sans-serif;
}

/* H3 in why-choose-ogenweb list */
.why-choose-ogenweb .service_title {
  font-size: 18px;
  font-weight: 600;
  color: #3c4858;
  font-family: 'Inter', sans-serif;
}

/* Impact section card titles */
.bimpact_title {
  font-size: 18px;
  font-weight: 600;
  color: #3c4858;
  font-family: 'Inter', sans-serif;
}

/* Process card titles */
.box-title {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  font-family: 'Inter', sans-serif;
}

/* Why OGEN list item titles */
.whyogen_title {
  font-size: 17px;
  font-weight: 600;
  color: #3c4858;
  font-family: 'Inter', sans-serif;
}

/* Body / paragraph text – matches homepage */
p,
.ogen-commonparagraph,
.why-ogen-wrap p,
.smm_benefits p,
.app-plate p,
.why-choose-ogenweb p {
  font-size: 16px;
  font-weight: 400;
  color: #222222;
  font-family: 'Inter', sans-serif;
  line-height: 1.7;
}

/* Services section heading */
.contenttitle .mainheadingtitle {
  font-size: 30px;
  font-weight: 700;
  color: #3c4858;
}

/* ── How We Deliver section ───────────────────────────────── */

.ogen-howwe {
  background: #f8f9fc;
  padding: 70px 0;
}

.ogen-howwe-head {
  text-align: center;
  margin-bottom: 40px;
}

.ogen-howwe-title {
  font-size: 32px;
  font-weight: 700;
  color: #3c4858;
  font-family: 'Inter', sans-serif;
  margin-bottom: 12px;
}

.ogen-howwe-title span {
  color: #f26629;
}

.ogen-howwe-sub {
  font-size: 16px;
  color: #637a92;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.65;
}

.ogen-howwe-wrap {
  display: flex;
  gap: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 28px rgba(0,0,0,.07);
  overflow: hidden;
}

.ogen-howwe-nav {
  width: 240px;
  flex-shrink: 0;
  border-right: 2px solid #f0f0f5;
  padding: 12px 0;
  background: #fff;
}

.ogen-howwe-navitem {
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 500;
  color: #637a92;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all .2s;
  font-family: 'Inter', sans-serif;
}

.ogen-howwe-navitem:hover {
  background: #fdf3ed;
  color: #f26629;
}

.ogen-howwe-navitem.active {
  border-left-color: #f26629;
  color: #f26629;
  background: #fff8f4;
  font-weight: 600;
}

.ogen-howwe-content {
  flex: 1;
  padding: 36px 40px;
}

.ogen-howwe-panel {
  display: none;
}

.ogen-howwe-panel.active {
  display: block;
}

.ogen-howwe-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.ogen-howwe-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f26629;
  flex-shrink: 0;
  margin-top: 6px;
}

.ogen-howwe-point strong {
  font-size: 15px;
  font-weight: 600;
  color: #3c4858;
  display: block;
  margin-bottom: 4px;
  font-family: 'Inter', sans-serif;
}

.ogen-howwe-point p {
  font-size: 15px;
  color: #555;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 768px) {
  .ogen-howwe-wrap {
    flex-direction: column;
  }
  .ogen-howwe-nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 2px solid #f0f0f5;
    padding: 8px;
    gap: 4px;
  }
  .ogen-howwe-navitem {
    border-left: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    flex: 0 0 auto;
  }
  .ogen-howwe-navitem.active {
    background: #f26629;
    color: #fff;
    border-left: none;
  }
  .ogen-howwe-content {
    padding: 24px 20px;
  }
  .ogen-howwe-title {
    font-size: 24px;
  }
}

/* ── Book Consultation section ────────────────────────────── */

.ogen-consult2030 {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  background: #0f2135;
}

.ogen-consult-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .18;
}

.ogen-consult-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(15,33,53,.92) 40%, rgba(242,102,41,.15) 100%);
}

.ogen-consult-inner {
  position: relative;
  z-index: 2;
}

.ogen-consult-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(242,102,41,.15);
  color: #f56c23;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 30px;
  margin-bottom: 20px;
  border: 1px solid rgba(242,102,41,.3);
  font-family: 'Inter', sans-serif;
}

.ogen-consult-headline {
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  line-height: 1.22;
  margin-bottom: 20px;
  font-family: 'Inter', sans-serif;
}

.ogen-consult-nocost-wrap {
  position: relative;
  display: inline-block;
}

.ogen-consult-nocost {
  color: #f56c23;
}

.ogen-sketch-circle {
  position: absolute;
  left: -8px;
  top: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 20px);
  pointer-events: none;
}

.ogen-consult-sub {
  font-size: 16px;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  max-width: 400px;
  margin-bottom: 24px;
}

.ogen-consult-deco {
  width: 180px;
  display: block;
  opacity: .55;
}

.ogen-consult-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ogen-consult-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 20px 24px;
  transition: background .2s;
}

.ogen-consult-card:hover {
  background: rgba(255,255,255,.12);
}

.ogen-consult-step {
  font-size: 28px;
  font-weight: 800;
  color: #f56c23;
  line-height: 1;
  min-width: 36px;
  font-family: 'Inter', sans-serif;
}

.ogen-consult-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-family: 'Inter', sans-serif;
}

.ogen-ccard-ul {
  width: 80px;
  height: 8px;
  display: inline-block;
  vertical-align: middle;
  opacity: .8;
}

.ogen-consult-card-text {
  font-size: 14px;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  margin: 0;
}

.ogen-consult-cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.ogen-consult-arrow {
  width: 48px;
  flex-shrink: 0;
}

.ogen-consult-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f26629;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 30px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .2s, transform .15s;
  font-family: 'Inter', sans-serif;
}

.ogen-consult-btn:hover {
  background: #d9541a;
  color: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}

.ogen-consult-btn-arrow {
  font-size: 20px;
}

.ogen-consult-note {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  font-family: 'Inter', sans-serif;
}

@media (max-width: 768px) {
  .ogen-consult-headline {
    font-size: 28px;
  }
  .ogen-consult2030 {
    padding: 50px 0;
  }
}

/* ── FAQ section ──────────────────────────────────────────── */

.ogen-faq-animated {
  background: #fff;
}

.ogen-seo-entity-para {
  font-size: 15px;
  color: #637a92;
  line-height: 1.75;
  margin-bottom: 32px;
  text-align: center;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.faq-qmark-wrap {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  opacity: .3;
  pointer-events: none;
}

/* ── Responsive helpers ───────────────────────────────────── */

@media (max-width: 768px) {
  h2.mainheadingtitle,
  span.mainheadingtitle {
    font-size: 24px;
  }

  .web-head h1 {
    font-size: 28px;
  }

  .ogen-howwe-title {
    font-size: 22px;
  }
}

/* ── Portfolio — Polaroid Cards ───────────────────────────── */

.wd-pol {
  background: #fdf8f4;
  position: relative;
  overflow: hidden;
  padding: 64px 0 80px;
}

/* ── absolute doodle images ── */
.wd-pol-doodle {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.wd-pol-doodle--spark   { width: 52px;  top: 68px;    left: 20px;   opacity: .9; }
.wd-pol-doodle--ideas   { width: 200px; top: 35px;    right: 374px; opacity: .95; }
.wd-pol-doodle--burst   { width: 58px;  top: 110px;   right: 175px; opacity: .9; }
.wd-pol-doodle--morework{ width: 140px; top: 148px;   right: 96px;  opacity: .9; mix-blend-mode: multiply; }
.wd-pol-doodle--brands  { width: 110px; top: 260px;   left: 6px;    opacity: .95; }
.wd-pol-doodle--leaf    { display: none; }
.wd-pol-doodle--design  { width: 130px; top: 56px;    right: 10px;  opacity: .95; }
.wd-pol-doodle--spiral  { width: 101px; bottom: -25px; left: 53.5%; opacity: .85; }
.wd-pol-doodle--plane   { width: 170px; bottom: 10px; right: 30%;   opacity: .9; }

/* orange blob — bottom-left */
.wd-pol-blob { display: none; }

/* "Built for a brighter tomorrow →" stamp */
.wd-pol-stamp { display: none; }

/* big H2 override inside portfolio */
.wd-pol .mainheadingtitle {
  font-size: 48px !important;
  line-height: 1.08 !important;
  letter-spacing: -.5px;
}

/* ── heading row ── */
.wd-pol-heading-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 40px;
}
.wd-pol-heading-left { flex: 0 0 52%; }
.wd-pol-heading-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding-right: 20px;
  padding-top: 80px;
}

/* squiggle underline image */
.wd-pol-heading-squig {
  display: block;
  width: 300px;
  max-width: 100%;
  margin-top: -47px;
}

.wd-pol-sub {
  font-size: 15px;
  color: #637a92;
  margin: 0;
  font-family: 'Inter', sans-serif;
  max-width: 440px;
}


/* "Websites That Move People" handwritten text — bottom right */
.wd-pol-handtext {
  position: absolute;
  bottom: 38px;
  right: 200px;
  font-family: 'Kalam', cursive;
  font-size: 16px;
  color: #1b3a6e;
  transform: rotate(-3deg);
  pointer-events: none;
  line-height: 1.3;
  white-space: nowrap;
}

/* View All Projects — solid orange button */
.wd-pol-viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #f26629;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 8px;
  transition: background .22s, gap .22s;
  white-space: nowrap;
}
.wd-pol-viewall:hover {
  background: #d84f1a;
  color: #fff;
  text-decoration: none;
  gap: 14px;
}

/* ── polaroid row ── */
.wd-pol-row {
  display: flex;
  gap: 22px;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;
}

/* single polaroid card */
.wd-pol-card {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(60,72,88,.14), 0 2px 6px rgba(60,72,88,.08);
  padding: 10px 10px 0;
  width: 258px;
  flex-shrink: 0;
  transform: rotate(var(--rot, 0deg));
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
  position: relative;
  cursor: pointer;
}
.wd-pol-card:hover {
  transform: rotate(0deg) translateY(var(--lift, -14px)) scale(1.03);
  box-shadow: 0 28px 60px rgba(60,72,88,.22), 0 4px 12px rgba(60,72,88,.1);
  z-index: 10;
}

/* orange pin */
.wd-pol-pin {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 38% 32%, #ff8040, #c44d10);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  z-index: 3;
}
.wd-pol-pin::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 5px;
  height: 5px;
  background: rgba(255,255,255,.45);
  border-radius: 50%;
}

/* browser chrome */
.wd-pol-chrome {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f0f2f5;
  border-radius: 3px 3px 0 0;
  padding: 5px 8px;
}
.wd-pol-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.wd-pol-dot.r { background: #ff5f57; }
.wd-pol-dot.y { background: #febc2e; }
.wd-pol-dot.g { background: #28c840; }
.wd-pol-url {
  flex: 1;
  font-size: 9px;
  color: #aaa;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #fff;
  border-radius: 3px;
  padding: 2px 6px;
}

/* photo area */
.wd-pol-photo {
  position: relative;
  overflow: hidden;
  height: 210px;
}
.wd-pol-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform .5s ease;
}
.wd-pol-card:hover .wd-pol-photo img { transform: scale(1.06); }

/* hover overlay */
.wd-pol-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,18,30,.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity .3s;
}
.wd-pol-card:hover .wd-pol-overlay { opacity: 1; }

.wd-pol-obtn {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  background: #f26629;
  color: #fff;
  transition: opacity .2s;
  white-space: nowrap;
}
.wd-pol-obtn--o { background: transparent; border: 1.5px solid rgba(255,255,255,.5); }
.wd-pol-obtn:hover { opacity: .85; text-decoration: none; color: #fff; }

/* caption strip */
.wd-pol-caption { padding: 10px 8px 14px; }

.wd-pol-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.wd-pol-cat-left {
  display: flex;
  align-items: center;
  gap: 5px;
}
.wd-pol-cat-left .fa {
  font-size: 11px;
  color: #f26629;
}
.wd-pol-ctag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #f26629;
  font-family: 'Inter', sans-serif;
}
.wd-pol-arrow-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #d0d5dd;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3c4858;
  font-size: 12px;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
  flex-shrink: 0;
}
.wd-pol-arrow-btn:hover { background: #f26629; border-color: #f26629; color: #fff; text-decoration: none; }

.wd-pol-cname {
  font-size: 12.5px;
  font-weight: 700;
  color: #3c4858;
  margin: 0;
  font-family: 'Inter', sans-serif;
  line-height: 1.3;
}

/* ── mobile ── */
@media (max-width: 991px) {
  .wd-pol-heading-row { flex-direction: column; gap: 16px; }
  .wd-pol-heading-left, .wd-pol-heading-right { flex: unset; width: 100%; }
  .wd-pol-heading-right { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .wd-pol-doodle-ideas, .wd-pol-doodle-morework { display: none; }
}
@media (max-width: 768px) {
  .wd-pol { padding: 48px 0 60px; }
  .wd-pol-row { gap: 14px; flex-wrap: wrap; }
  .wd-pol-card { width: calc(50% - 8px); transform: rotate(0deg) !important; }
  .wd-pol-card:hover { transform: translateY(-8px) scale(1.02) !important; }
  .wd-pol-doodle--ideas, .wd-pol-doodle--brands, .wd-pol-doodle--leaf,
  .wd-pol-doodle--design, .wd-pol-doodle--spiral, .wd-pol-doodle--morework,
  .wd-pol-doodle--plane,  .wd-pol-doodle--burst,
  .wd-pol-blob, .wd-pol-stamp, .wd-pol-handtext { display: none; }
}

/* ── Service card description font ───────────────────────── */

.cmr-app-services .service-alt .app-plate p,
.cmr-app-services .service-alt .app-plate .link-btn {
  font-size: 15px;
  color: #605f61;
}

/* ── Service card tech chips ──────────────────────────────── */

.app-plate-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 0px;
}

.app-plate-chips span {
  display: inline-block;
  background: #f0f4ff;
  color: #3c6fd6;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  font-family: 'Inter', sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* ========== WEB DEVELOPMENT PROCESS — staggered infographic ========== */
.wd-proc { background: #173b5a; padding: 72px 0 88px; }
.wd-proc-head { margin-bottom: 52px; }
.wd-proc-head .mainheadingtitle { color: #fff; font-size: 42px !important; }
.wd-proc-head .contenttitle p span { color: #f26629; }

.wd-proc-track {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
}
/* horizontal timeline line */
.wd-proc-track::after {
  content: '';
  position: absolute;
  bottom: 38px;
  left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,0.12);
  pointer-events: none;
}

.wd-proc-card {
  flex: 1;
  background: #dae8f5;
  border-radius: 28px;
  padding: 26px 16px 20px;
  text-align: center;
  position: relative;
  border: 1.5px solid rgba(255,255,255,0.35);
  z-index: 1;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease, z-index 0s;
  cursor: default;
}
.wd-proc-card:hover {
  transform: scale(1.07) translateY(-10px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.22);
  z-index: 10;
  background: #fff;
  border-color: rgba(255,255,255,0.8);
}
/* arch stagger — tallest in middle */
.wd-proc-card:nth-child(1) { margin-top: 64px; }
.wd-proc-card:nth-child(2) { margin-top: 32px; }
.wd-proc-card:nth-child(3) { margin-top: 0; }
.wd-proc-card:nth-child(4) { margin-top: 0; }
.wd-proc-card:nth-child(5) { margin-top: 32px; }
.wd-proc-card:nth-child(6) { margin-top: 64px; }

.wd-proc-num {
  position: absolute;
  top: 12px; right: 14px;
  font-size: 12px;
  font-weight: 800;
  color: #f26629;
  font-family: 'Inter', sans-serif;
  letter-spacing: .05em;
}

.wd-proc-icon {
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 2px dashed #7aafd4;
  background: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.wd-proc-icon img {
  width: 56px; height: 56px;
  object-fit: contain;
}

.wd-proc-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f2a45;
  margin-bottom: 8px;
  font-family: 'Inter', sans-serif;
  line-height: 1.3;
}

.wd-proc-desc {
  font-size: 11.5px;
  color: #3a5a78;
  line-height: 1.55;
  margin-bottom: 14px;
}

.wd-proc-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.wd-proc-dots i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #a8c4df;
  font-style: normal;
}
.wd-proc-dots i.on {
  width: 8px; height: 8px;
  background: #f26629;
}

/* responsive — style 1 */
@media (max-width: 1024px) {
  .wd-proc-track { flex-wrap: wrap; gap: 16px; }
  .wd-proc-track::after { display: none; }
  .wd-proc-card {
    flex: 0 0 calc(33.33% - 12px);
    margin-top: 0 !important;
  }
}
@media (max-width: 767px) {
  .wd-proc-card { flex: 0 0 calc(50% - 8px); }
  .wd-proc-head .mainheadingtitle { font-size: 30px !important; }
}
@media (max-width: 480px) {
  .wd-proc-card { flex: 0 0 100%; }
}

/* ========== PROCESS — STYLE 2: Bold Number Steps ========== */
.wd-proc--s2 { background: #f4f7fb; }
.wd-proc--s2 .wd-proc-head .mainheadingtitle { color: #0f2135; }
.wd-proc--s2 .wd-proc-head .contenttitle p span { color: #f26629; }

.wd-proc--s2 .wd-proc-track {
  align-items: stretch;
  gap: 0;
  position: relative;
}
.wd-proc--s2 .wd-proc-track::after { display: none; }

/* connector arrow between cards */
.wd-proc--s2 .wd-proc-card + .wd-proc-card::before {
  content: '›';
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  color: #f26629;
  font-weight: 900;
  z-index: 2;
  line-height: 1;
}

.wd-proc--s2 .wd-proc-card {
  flex: 1;
  background: #fff;
  border-radius: 16px;
  padding: 28px 18px 22px;
  margin: 0 7px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  border: none;
  border-top: 4px solid #f26629;
  position: relative;
  overflow: hidden;
}

/* large watermark number behind content */
.wd-proc--s2 .wd-proc-card::after {
  content: attr(data-num);
  position: absolute;
  bottom: -14px;
  right: 8px;
  font-size: 80px;
  font-weight: 900;
  color: rgba(242,102,41,0.07);
  font-family: 'Inter', sans-serif;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.wd-proc--s2 .wd-proc-num {
  position: static;
  display: block;
  font-size: 11px;
  color: #f26629;
  text-align: left;
  margin-bottom: 12px;
  letter-spacing: .1em;
  font-weight: 800;
}

.wd-proc--s2 .wd-proc-icon {
  width: 80px; height: 80px;
  border: 2px solid #f2662930;
  background: #fff5f0;
  margin: 0 auto 14px;
}
.wd-proc--s2 .wd-proc-icon img { width: 48px; height: 48px; }

.wd-proc--s2 .wd-proc-title {
  font-size: 13.5px;
  color: #0f2135;
}
.wd-proc--s2 .wd-proc-desc {
  font-size: 11.5px;
  color: #5a6e82;
}
.wd-proc--s2 .wd-proc-dots i    { background: #d4dce6; }
.wd-proc--s2 .wd-proc-dots i.on { background: #f26629; }

/* responsive — style 2 */
@media (max-width: 1024px) {
  .wd-proc--s2 .wd-proc-track { flex-wrap: wrap; gap: 16px; }
  .wd-proc--s2 .wd-proc-card { flex: 0 0 calc(33.33% - 22px); margin: 0 !important; }
  .wd-proc--s2 .wd-proc-card + .wd-proc-card::before { display: none; }
}
@media (max-width: 767px) {
  .wd-proc--s2 .wd-proc-card { flex: 0 0 calc(50% - 16px); }
}
@media (max-width: 480px) {
  .wd-proc--s2 .wd-proc-card { flex: 0 0 100%; margin: 0 0 12px !important; }
}

/* ========== WHY-OGEN RIGHT TILES — stagger animation ========== */
.why-ogen-info li.woi-hidden {
  opacity: 0;
  transform: translateX(48px);
}
.why-ogen-info li {
  transition: opacity .5s ease, transform .5s ease;
}
.why-ogen-info li.woi-show {
  opacity: 1;
  transform: translateX(0);
}

/* ========== WEBSITE IMPACT SECTION ========== */
.wd-impact { background: #fff; padding: 72px 0 80px; }

.wd-impact-head {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 52px;
}
.wd-impact-head .mainheadingtitle span { color: #3c4858; }
.wd-impact-sub {
  font-size: 15px;
  color: #5a6e82;
  line-height: 1.65;
  margin-top: 10px;
}

.wd-impact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.wd-impact-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #fdf8f4;
  border-radius: 16px;
  padding: 26px 24px;
  border-left: 4px solid #3c4858;
  transition: transform .22s ease, box-shadow .22s ease;
}
.wd-impact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(60,72,88,.12);
}

.wd-impact-icon {
  flex-shrink: 0;
  width: 68px; height: 68px;
  border-radius: 14px;
  background: rgba(60,72,88,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wd-impact-icon img {
  width: 44px; height: 44px;
  object-fit: contain;
}

.wd-impact-body { flex: 1; min-width: 0; }

.wd-impact-badge {
  display: inline-block;
  background: #3c4858;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-family: 'Inter', sans-serif;
}

.wd-impact-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f2135;
  margin-bottom: 6px;
  font-family: 'Inter', sans-serif;
  line-height: 1.3;
}

.wd-impact-desc {
  font-size: 13px;
  color: #5a6e82;
  line-height: 1.65;
  margin: 0;
}

/* responsive */
@media (max-width: 767px) {
  .wd-impact-grid { grid-template-columns: 1fr; gap: 14px; }
  .wd-impact-head { margin-bottom: 36px; }
  .wd-impact-card { padding: 20px 18px; gap: 16px; }
  .wd-impact-icon { width: 56px; height: 56px; border-radius: 12px; }
  .wd-impact-icon img { width: 36px; height: 36px; }
}



/* ══ HERO: charcoal theme (no navy, no grid / dashed circles) + locked 634px height ══ */
.wd-hero { background: linear-gradient(160deg, #0c0c0e 0%, #141416 55%, #1b1b1e 100%); min-height: 0; padding: 47px 0 44px; }
.wd-hero::before { content: ''; position: absolute; width: 760px; height: 760px; right: -260px; top: -320px; border-radius: 50%; background: radial-gradient(circle, rgba(242,102,41,.16), transparent 65%); pointer-events: none; }
.wd-hero::after { content: ''; position: absolute; width: 560px; height: 560px; left: -260px; bottom: -320px; border-radius: 50%; background: radial-gradient(circle, rgba(242,102,41,.08), transparent 65%); pointer-events: none; }
.wd-hero > .container { position: relative; z-index: 1; }
.wd-hero__h1 { margin-bottom: 14px; }
.wd-hero__sub { margin-bottom: 20px; }
.wd-hero__stats { margin-bottom: 22px; padding-top: 12px; padding-bottom: 12px; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.wd-hero__ctas { margin-bottom: 16px; }
.wd-sketch-badge { background: rgba(22,22,25,.92); }
@media (max-width: 991px) { .wd-hero { padding: 48px 0 44px; } }

/* ══ 2026 BUILD STANDARD: light feature explorer ══ */
.wd-fx { position: relative; overflow: hidden; padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #fff7f2 100%); }
.wd-fx::before { content: ''; position: absolute; width: 760px; height: 760px; right: -300px; top: -320px; border-radius: 50%; background: radial-gradient(circle, rgba(242,102,41,.10), transparent 65%); pointer-events: none; }
.wd-fx::after { content: ''; position: absolute; width: 560px; height: 560px; left: -260px; bottom: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(139,92,246,.07), transparent 65%); pointer-events: none; }
.wd-fx .container { position: relative; z-index: 1; }
.wd-fx-head { text-align: center; max-width: 820px; margin: 0 auto 40px; }
.wd-fx-head .subtitle_text { display: block; font-size: 18px; font-weight: 400; color: #454545; margin-bottom: 7px; }
.wd-fx-title { font-size: 38px; line-height: 1.3; font-weight: 700; letter-spacing: -.024em; color: #3c4858; margin: 0 0 14px; text-wrap: balance; }
.wd-fx-title span { background: linear-gradient(90deg, #ff8a4c, #f26629); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wd-fx-head p { font-size: 18px; line-height: 1.667em; color: #5a6475; margin: 0; }

.wd-fx-box { display: grid; grid-template-columns: 400px 1fr; background: #fff; border: 1px solid #edf0f5; border-radius: 30px; box-shadow: 0 40px 90px rgba(23,59,90,.10); overflow: hidden; }
.wd-fx-list { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: #fbfcfe; border-right: 1px solid #edf0f5; }
.wd-fx-item { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid transparent; border-radius: 18px; background: transparent; cursor: pointer; overflow: hidden; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.wd-fx-item:hover { background: #fff; border-color: #eef1f6; }
.wd-fx-item.is-on { background: #fff; border-color: #ffd0b8; box-shadow: 0 14px 30px rgba(242,102,41,.12); transform: translateX(4px); }
.wd-fx-thumb { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: #f2f4f8; transition: background .3s ease; }
.wd-fx-thumb img { width: 40px; height: 40px; object-fit: contain; filter: grayscale(.4) opacity(.8); transition: filter .3s ease; }
.wd-fx-item.is-on .wd-fx-thumb { background: linear-gradient(145deg, #fff1e8, #ffe0cf); }
.wd-fx-item.is-on .wd-fx-thumb img, .wd-fx-item:hover .wd-fx-thumb img { filter: none; }
.wd-fx-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wd-fx-meta small { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #94a3b8; }
.wd-fx-item.is-on .wd-fx-meta small { color: #f26629; }
.wd-fx-meta strong { font-size: 15px; line-height: 1.35; font-weight: 700; color: #3c4858; }
.wd-fx-bar { position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px; background: transparent; overflow: hidden; }
.wd-fx-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb38a, #f26629); }
.wd-fx.is-playing .wd-fx-item.is-on .wd-fx-bar i { animation: wdFxBar 6s linear forwards; }
@keyframes wdFxBar { to { width: 100%; } }

.wd-fx-stage { position: relative; display: flex; flex-direction: column; padding: 34px 40px 28px; min-height: 520px; }
.wd-fx-panel { display: none; flex: 1; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 36px; }
.wd-fx-panel.is-on { display: grid; animation: wdFxIn .55s ease both; }
@keyframes wdFxIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.wd-fx-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; }
.wd-fx-blob { position: absolute; width: 300px; height: 300px; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; background: linear-gradient(145deg, #fff1e8, #ffe2d2 60%, #f3ecff); animation: wdFxMorph 10s ease-in-out infinite; }
@keyframes wdFxMorph { 0%,100% { border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; } 50% { border-radius: 58% 42% 45% 55% / 42% 58% 42% 58%; } }
.wd-fx-num { position: absolute; left: 0; top: 0; font-size: 72px; font-weight: 900; line-height: 1; color: rgba(242,102,41,.12); }
.wd-fx-art img { position: relative; z-index: 1; width: 230px; height: 230px; object-fit: contain; filter: drop-shadow(0 22px 28px rgba(23,59,90,.16)); animation: wdBnFloat 5s ease-in-out infinite; }
.wd-fx-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .4px; color: #c2541f; background: #fff4ee; border: 1px solid #ffd9c6; border-radius: 100px; padding: 5px 12px; margin-bottom: 14px; }
.wd-fx-copy h3 { font-size: 28px; line-height: 1.3; font-weight: 700; color: #3c4858; margin: 0 0 14px; }
.wd-fx-copy p { font-size: 18px; line-height: 1.667em; color: #5a6475; margin: 0; }

.wd-fx-nav { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #eef1f6; }
.wd-fx-count { font-size: 14px; font-weight: 600; color: #94a3b8; }
.wd-fx-count b { font-size: 20px; font-weight: 800; color: #3c4858; }
.wd-fx-arrows { display: flex; gap: 8px; }
.wd-fx-prev, .wd-fx-next { width: 42px; height: 42px; border-radius: 50%; border: 1px solid #e5e9f0; background: #fff; color: #3c4858; cursor: pointer; transition: all .3s ease; }
.wd-fx-prev:hover, .wd-fx-next:hover { color: #fff; background: #f26629; border-color: #f26629; }
.wd-fx-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: #fff; background: #f26629; border-radius: 100px; padding: 12px 24px; text-decoration: none; box-shadow: 0 10px 24px rgba(242,102,41,.28); transition: transform .3s ease, box-shadow .3s ease; }
.wd-fx-cta:hover { color: #fff; transform: translateY(-2px); }
.wd-fx-cta i { transition: transform .3s ease; }
.wd-fx-cta:hover i { transform: translateX(4px); }
@keyframes wdBnFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }

@media (max-width: 1199px) { .wd-fx-box { grid-template-columns: 340px 1fr; } .wd-fx-panel { grid-template-columns: 1fr; gap: 18px; } .wd-fx-art { min-height: 240px; } .wd-fx-blob { width: 230px; height: 230px; } .wd-fx-art img { width: 180px; height: 180px; } }
@media (max-width: 991px) {
  .wd-fx-title { font-size: 30px; line-height: 40px; }
  .wd-fx-box { grid-template-columns: 1fr; }
  .wd-fx-list { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #edf0f5; scrollbar-width: none; }
  .wd-fx-list::-webkit-scrollbar { display: none; }
  .wd-fx-item { flex: 0 0 auto; width: auto; }
  .wd-fx-item.is-on { transform: none; }
  .wd-fx-meta strong { display: none; }
  .wd-fx-stage { min-height: 0; padding: 26px 24px 22px; }
  .wd-fx-copy h3 { font-size: 24px; }
}
@media (max-width: 576px) {
  .wd-fx { padding: 60px 0; }
  .wd-fx-head { margin-bottom: 30px; }
  .wd-fx-head .subtitle_text { font-size: 16px; }
  .wd-fx-title { font-size: 22px; line-height: 32px; }
  .wd-fx-head p, .wd-fx-copy p { font-size: 16px; }
  .wd-fx-copy h3 { font-size: 20px; }
  .wd-fx-box { border-radius: 22px; }
  .wd-fx-list { padding: 12px; }
  .wd-fx-item { padding: 8px; gap: 8px; }
  .wd-fx-meta { display: none; }
  .wd-fx-art { min-height: 200px; } .wd-fx-blob { width: 190px; height: 190px; } .wd-fx-art img { width: 150px; height: 150px; } .wd-fx-num { font-size: 52px; }
  .wd-fx-stage { padding: 20px 18px; }
  .wd-fx-nav { flex-wrap: wrap; }
  .wd-fx-cta { margin-left: 0; width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .wd-fx-blob, .wd-fx-art img, .wd-fx-panel.is-on { animation: none; } }

/* ══ UNDERSTANDING — OPTION B: editorial Q&A + numbered scope + moving tech strip ══ */
.wd-ub { position: relative; overflow: hidden; padding: 80px 0; background: #ffffff; border-top: 1px solid #eef1f6; }
.wd-ub::before { content: ''; position: absolute; width: 520px; height: 520px; left: -220px; top: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(242,102,41,.08), transparent 65%); pointer-events: none; }
.wd-ub .container { position: relative; z-index: 1; }
.wd-ub-head { text-align: center; max-width: 860px; margin: 0 auto 40px; }
.wd-ub-head .subtitle_text { display: block; font-size: 18px; font-weight: 400; color: #454545; margin-bottom: 7px; }
.wd-ub-head .mainheadingtitle { display: block; font-size: 38px; line-height: 1.3; font-weight: 700; letter-spacing: -.024em; color: #3c4858; }
.wd-ub-def { display: grid; grid-template-columns: .8fr 1.2fr; gap: 0; border-radius: 28px; overflow: hidden; border: 1px solid #f1e4dc; box-shadow: 0 30px 70px rgba(242,102,41,.08); }
.wd-ub-q { position: relative; padding: 40px 36px; background: linear-gradient(150deg, #f26629 0%, #ff8a4c 100%); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.wd-ub-q::after { content: '?'; position: absolute; right: 18px; bottom: -30px; font-size: 220px; font-weight: 900; line-height: 1; color: rgba(255,255,255,.12); }
.wd-ub-q h2 { position: relative; z-index: 1; font-size: 30px; line-height: 1.3; font-weight: 800; color: #fff; margin: 0; }
.wd-ub-a { position: relative; padding: 40px 40px 36px; background: #fffaf7; }
.wd-ub-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; font-size: 18px; font-weight: 900; color: #f26629; background: #fff; margin-bottom: 18px; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.wd-ub-badge--a { color: #fff; background: #3c4858; box-shadow: none; }
.wd-ub-a p { font-size: 18px; line-height: 1.75em; color: #4a5568; margin: 0; }
.wd-ub-a mark { background: linear-gradient(180deg, transparent 60%, rgba(242,102,41,.22) 60%); color: #1a1f2e; font-weight: 600; padding: 0 2px; }
.wd-ub-scope { margin-top: 56px; }
.wd-ub-scope h2 { font-size: 28px; line-height: 1.3; font-weight: 700; color: #3c4858; margin: 0 0 24px; }
.wd-ub-rows { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #e9edf3; }
.wd-ub-rows li { position: relative; padding: 26px 24px 28px; border-bottom: 1px solid #e9edf3; transition: background .3s ease; }
.wd-ub-rows li:not(:nth-child(3n)) { border-right: 1px solid #e9edf3; }
.wd-ub-rows li::before { content: ''; position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: #f26629; transition: width .4s ease; }
.wd-ub-rows li:hover { background: #fffaf7; }
.wd-ub-rows li:hover::before { width: 100%; }
.wd-ub-n { display: block; font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -1px; background: linear-gradient(180deg, #f26629, #ffc3a3); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 14px; }
.wd-ub-rows h3 { font-size: 20px; line-height: 1.4; font-weight: 700; color: #3c4858; margin: 0 0 6px; }
.wd-ub-rows p { font-size: 16px; line-height: 1.667em; color: #5a6475; margin: 0; }
.wd-ub-marquee { position: relative; margin-top: 44px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.wd-ub-track { display: flex; width: max-content; animation: wdUbMarq 32s linear infinite; }
.wd-ub-marquee:hover .wd-ub-track { animation-play-state: paused; }
.wd-ub-set { display: flex; gap: 14px; padding-right: 14px; }
.wd-ub-set span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 15px; font-weight: 600; color: #3c4858; background: #f8fafc; border: 1px solid #e9edf3; border-radius: 100px; padding: 10px 20px; }
.wd-ub-set span::before { content: '✦'; color: #f26629; font-size: 12px; }
@keyframes wdUbMarq { to { transform: translateX(-50%); } }
@media (max-width: 991px) {
  .wd-ub-head .mainheadingtitle { font-size: 30px; line-height: 40px; }
  .wd-ub-def { grid-template-columns: 1fr; }
  .wd-ub-q h2 { font-size: 24px; }
  .wd-ub-rows { grid-template-columns: 1fr 1fr; }
  .wd-ub-rows li:not(:nth-child(3n)) { border-right: 0; }
  .wd-ub-rows li:nth-child(odd) { border-right: 1px solid #e9edf3; }
  .wd-ub-scope h2 { font-size: 24px; }
}
@media (max-width: 576px) {
  .wd-ub { padding: 60px 0; }
  .wd-ub-head { margin-bottom: 30px; }
  .wd-ub-head .subtitle_text { font-size: 16px; }
  .wd-ub-head .mainheadingtitle { font-size: 22px; line-height: 32px; }
  .wd-ub-q, .wd-ub-a { padding: 26px 20px; }
  .wd-ub-q h2, .wd-ub-scope h2 { font-size: 20px; }
  .wd-ub-a p { font-size: 16px; }
  .wd-ub-rows { grid-template-columns: 1fr; }
  .wd-ub-rows li:nth-child(odd) { border-right: 0; }
  .wd-ub-rows li { padding: 20px 4px; }
  .wd-ub-n { font-size: 36px; }
  .wd-ub-scope { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) { .wd-ub-track { animation: none; } }

/* ══ WHY — shared head for options C / D ══ */
.wd-wc { position: relative; overflow: hidden; padding: 80px 0; color: #fff; background: linear-gradient(160deg, #0c0c0e 0%, #141416 55%, #1b1b1e 100%); }
.wd-wc .container { position: relative; z-index: 1; }
.wd-wh { text-align: center; max-width: 900px; margin: 0 auto 40px; }
.wd-wh .subtitle_text { display: block; font-size: 18px; font-weight: 400; color: rgba(255,255,255,.75); margin-bottom: 7px; }
.wd-wh-title { font-size: 38px; line-height: 1.3; font-weight: 700; letter-spacing: -.024em; color: #fff; margin: 0 0 14px; text-wrap: balance; }
.wd-wh p { font-size: 18px; line-height: 1.667em; color: rgba(255,255,255,.65); margin: 0; }

/* ── OPTION C: dark bento ── */
.wd-wc::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 20% 70%, rgba(242,102,41,.14), transparent 70%), radial-gradient(ellipse 50% 40% at 85% 15%, rgba(139,92,246,.10), transparent 70%); pointer-events: none; }
.c-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.c-stats { grid-row: span 2; position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 30px 28px; border-radius: 26px; background: linear-gradient(160deg, #f26629 0%, #d9501a 100%); box-shadow: 0 30px 70px rgba(242,102,41,.3); }
.c-stats::after { content: ''; position: absolute; width: 320px; height: 320px; right: -120px; bottom: -140px; border-radius: 50%; border: 50px solid rgba(255,255,255,.08); }
.c-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.18); border-radius: 100px; padding: 6px 14px; margin-bottom: 22px; }
.c-st-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; flex: 1; align-content: center; }
.c-st b { display: block; font-size: 44px; line-height: 1; font-weight: 900; color: #fff; letter-spacing: -1px; }
.c-st small { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.8); }
.c-cta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 26px; padding: 14px 22px; border-radius: 100px; font-size: 15px; font-weight: 700; color: #f26629; background: #fff; text-decoration: none; transition: transform .3s ease; }
.c-cta:hover { color: #d9501a; transform: translateY(-2px); }
.c-tile { position: relative; overflow: hidden; padding: 26px 24px; border-radius: 24px; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.c-tile:hover { transform: translateY(-6px); border-color: rgba(242,102,41,.5); box-shadow: 0 24px 50px rgba(0,0,0,.5); }
.c-tile--big { grid-column: span 2; }
.c-ghost { position: absolute; right: 18px; top: 8px; font-size: 64px; font-weight: 900; line-height: 1; color: rgba(255,255,255,.05); }
.c-ico { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: #fff; margin-bottom: 18px; box-shadow: 0 12px 26px rgba(0,0,0,.4); transition: transform .35s ease; }
.c-tile:hover .c-ico { transform: rotate(-6deg) scale(1.06); }
.c-ico img { width: 36px; height: 36px; object-fit: contain; }
.c-tile h3 { font-size: 20px; line-height: 1.4; font-weight: 700; color: #fff; margin: 0 0 8px; }
.c-tile p { font-size: 16px; line-height: 1.667em; color: rgba(255,255,255,.62); margin: 0; }
@media (max-width: 991px) { .c-grid { grid-template-columns: 1fr 1fr; } .c-stats { grid-row: auto; grid-column: 1 / -1; } .c-tile--big { grid-column: 1 / -1; } .wd-wh-title { font-size: 30px; line-height: 40px; } }
@media (max-width: 576px) { .wd-wc { padding: 60px 0; } .wd-wh { margin-bottom: 30px; } .wd-wh .subtitle_text, .wd-wh p { font-size: 16px; } .wd-wh-title { font-size: 22px; line-height: 32px; } .c-grid { grid-template-columns: 1fr; } .c-st b { font-size: 34px; } .c-stats, .c-tile { padding: 22px 20px; } }

.c-tile:last-child { grid-column: span 2; }
.c-st small { white-space: nowrap; }
@media (max-width: 991px) { .c-tile:last-child { grid-column: 1 / -1; } }
@media (max-width: 576px) { .c-tile:last-child { grid-column: auto; } }

/* ══ PROCESS OPTIONS (shared) ══ */
.wp { position: relative; overflow: hidden; padding: 80px 0; }
.wp .container { position: relative; z-index: 1; }
.wp-head { text-align: center; max-width: 860px; margin: 0 auto 40px; }
.wp-head .subtitle_text { display: block; font-size: 18px; font-weight: 400; color: #454545; margin-bottom: 7px; }
.wp-title { font-size: 38px; line-height: 1.3; font-weight: 700; letter-spacing: -.024em; color: #3c4858; margin: 0; text-wrap: balance; }
.wp-head--dark .subtitle_text { color: rgba(255,255,255,.75); }
.wp-head--dark .wp-title { color: #fff; }
.wp h3 { font-size: 20px; line-height: 1.4; font-weight: 700; margin: 0 0 8px; }
.wp p { font-size: 16px; line-height: 1.667em; margin: 0; }
@media (max-width: 991px) { .wp-title { font-size: 30px; line-height: 40px; } }
@media (max-width: 576px) { .wp { padding: 60px 0; } .wp-head { margin-bottom: 30px; } .wp-head .subtitle_text { font-size: 16px; } .wp-title { font-size: 22px; line-height: 32px; } }

/* ── F: light interactive stepper ── */
.wp-f { background: linear-gradient(180deg, #ffffff 0%, #fff7f2 100%); }
.wp-f-box { background: #fff; border: 1px solid #eef0f4; border-radius: 30px; box-shadow: 0 40px 90px rgba(23,59,90,.09); padding: 30px 36px 36px; }
.wp-f-tabs { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); margin-bottom: 30px; }
.wp-f-track { position: absolute; left: calc(100%/12); right: calc(100%/12); top: 21px; height: 2px; background: #eef0f4; }
.wp-f-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb38a, #f26629); transition: width .6s ease; }
.wp-f-tab { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: 0; padding: 0 6px; cursor: pointer; }
.wp-f-dot { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #9aa3b2; background: #fff; border: 2px solid #e6e9ef; transition: all .35s ease; }
.wp-f-tab.is-done .wp-f-dot { color: #f26629; border-color: #ffc9ad; }
.wp-f-tab.is-on .wp-f-dot { color: #fff; background: #f26629; border-color: #f26629; box-shadow: 0 0 0 7px rgba(242,102,41,.15); transform: scale(1.08); }
.wp-f-lbl { font-size: 14px; font-weight: 600; color: #8590a2; text-align: center; line-height: 1.35; transition: color .3s ease; }
.wp-f-tab.is-on .wp-f-lbl { color: #3c4858; font-weight: 700; }
.wp-f-pan { display: none; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 40px; padding: 30px; border-radius: 22px; background: linear-gradient(135deg, #fff8f3, #f6f7fb); }
.wp-f-pan.is-on { display: grid; animation: wdFxIn .5s ease both; }
@keyframes wdFxIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.wp-f-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 260px; }
.wp-f-ring { position: absolute; width: 240px; height: 240px; border-radius: 50%; background: #fff; box-shadow: 0 20px 50px rgba(242,102,41,.15); }
.wp-f-ring::after { content: ''; position: absolute; inset: -16px; border-radius: 50%; border: 1.5px dashed #ffc9ad; animation: wdBnRot 24s linear infinite; }
@keyframes wdBnRot { to { transform: rotate(360deg); } }
.wp-f-art img { position: relative; width: 170px; height: 170px; object-fit: contain; }
.wp-f-copy small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #f26629; margin-bottom: 8px; }
.wp-f-copy h3 { font-size: 28px; line-height: 1.3; color: #3c4858; margin-bottom: 12px; }
.wp-f-copy p { font-size: 18px; color: #5a6475; }
@media (max-width: 991px) { .wp-f-box { padding: 22px; } .wp-f-lbl { display: none; } .wp-f-pan { grid-template-columns: 1fr; gap: 16px; } .wp-f-copy h3 { font-size: 24px; } }
@media (max-width: 576px) { .wp-f-dot { width: 36px; height: 36px; font-size: 11px; } .wp-f-track { top: 17px; } .wp-f-pan { padding: 20px; } .wp-f-art { min-height: 200px; } .wp-f-ring { width: 180px; height: 180px; } .wp-f-art img { width: 130px; height: 130px; } .wp-f-copy h3 { font-size: 20px; } .wp-f-copy p { font-size: 16px; } }

@media (prefers-reduced-motion: reduce) { .wp-f-ring::after { animation: none; } }

/* ══ IMPACT OPTIONS (shared) ══ */
.wi { position: relative; overflow: hidden; padding: 80px 0; }
.wi .container { position: relative; z-index: 1; }
.wi-head { text-align: center; max-width: 880px; margin: 0 auto 40px; }
.wi-head .subtitle_text { display: block; font-size: 18px; font-weight: 400; color: #454545; margin-bottom: 7px; }
.wi-title { font-size: 38px; line-height: 1.3; font-weight: 700; letter-spacing: -.024em; color: #3c4858; margin: 0 0 14px; text-wrap: balance; }
.wi-title span { color: #f26629; }
.wi-head p { font-size: 18px; line-height: 1.667em; color: #5a6475; margin: 0; }
.wi-head--dark .subtitle_text { color: rgba(255,255,255,.75); } .wi-head--dark .wi-title { color: #fff; } .wi-head--dark p { color: rgba(255,255,255,.65); }
.wi h3 { font-size: 20px; line-height: 1.4; font-weight: 700; margin: 0 0 8px; color: #3c4858; }
.wi p { font-size: 16px; line-height: 1.667em; margin: 0; color: #5a6475; }
.wi-chip { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #c2541f; background: #fff4ee; border: 1px solid #ffd9c6; border-radius: 100px; padding: 5px 12px; margin-bottom: 12px; }
@media (max-width: 991px) { .wi-title { font-size: 30px; line-height: 40px; } }
@media (max-width: 576px) { .wi { padding: 60px 0; } .wi-head { margin-bottom: 30px; } .wi-head .subtitle_text, .wi-head p { font-size: 16px; } .wi-title { font-size: 22px; line-height: 32px; } }

/* ── K: floating-icon cards ── */
.wi-k { background: #f7f8fb; }
.wi-k-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 22px; padding-top: 40px; }
.wi-k-card { position: relative; text-align: center; padding: 64px 26px 30px; border-radius: 24px; background: #fff; border: 1px solid #eef0f4; box-shadow: 0 18px 44px rgba(23,59,90,.06); transition: transform .35s ease, box-shadow .35s ease; }
.wi-k-card::before { content: ''; position: absolute; left: 30%; right: 30%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--kc); transition: left .4s ease, right .4s ease; }
.wi-k-card:hover { transform: translateY(-8px); box-shadow: 0 28px 60px rgba(23,59,90,.12); }
.wi-k-card:hover::before { left: 0; right: 0; }
.wi-k-ico { position: absolute; left: 50%; top: -44px; transform: translateX(-50%); width: 92px; height: 92px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eef0f4; box-shadow: 0 0 0 8px #f7f8fb, 0 14px 30px rgba(23,59,90,.10); transition: transform .4s ease; }
.wi-k-card:hover .wi-k-ico { transform: translateX(-50%) translateY(-4px) rotate(-6deg); }
.wi-k-ico img { width: 58px; height: 58px; object-fit: contain; }
.wi-k-chip { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--kc); background: color-mix(in srgb, var(--kc) 10%, #fff); border-radius: 100px; padding: 5px 12px; margin-bottom: 12px; }
@media (max-width: 991px) { .wi-k-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .wi-k-grid { grid-template-columns: 1fr; gap: 56px; } .wi-k-card { padding: 60px 20px 26px; } }

/* ══ DID YOU KNOW: charcoal ══ */
.wd-dk { position: relative; overflow: hidden; padding: 80px 0; background: linear-gradient(160deg, #0c0c0e 0%, #141416 55%, #1b1b1e 100%); }
.wd-dk::before { content: ''; position: absolute; width: 800px; height: 800px; left: 50%; top: -420px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(242,102,41,.16), transparent 65%); pointer-events: none; }
.wd-dk .container { position: relative; z-index: 1; }
.wd-dk-head { text-align: center; margin: 0 auto 40px; }
.wd-dk-head .subtitle_text { display: block; font-size: 18px; font-weight: 400; color: rgba(255,255,255,.75); margin-bottom: 7px; }
.wd-dk-head .mainheadingtitle { display: block; font-size: 38px; line-height: 1.3; font-weight: 700; color: #fff; }
.wd-dk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wd-dk-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 26px 24px 28px; border-radius: 24px; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.09); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.wd-dk-card::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(242,102,41,.18), transparent 70%); pointer-events: none; }
.wd-dk-card:hover { transform: translateY(-6px); border-color: rgba(242,102,41,.5); box-shadow: 0 26px 50px rgba(0,0,0,.45); }
.wd-dk-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.wd-dk-ico { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; background: linear-gradient(145deg, #ff8a4c, #f26629); box-shadow: 0 10px 22px rgba(242,102,41,.35); }
.wd-dk-ring { width: 46px; height: 46px; transform: rotate(-90deg); }
.wd-dk-ring circle { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 4; }
.wd-dk-ring .arc { stroke: #f26629; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 113.1; transition: stroke-dashoffset 1.4s ease; }
.wd-dk.is-in .wd-dk-ring .arc { stroke-dashoffset: calc(113.1 - 113.1 * var(--v) / 100); }
.wd-dk-num { display: block; font-size: 64px; line-height: 1; font-weight: 900; letter-spacing: -2px; color: #fff; margin-bottom: 14px; background: linear-gradient(180deg, #ffffff 30%, #ffb38a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wd-dk-card p { font-size: 16px; line-height: 1.667em; color: rgba(255,255,255,.66); margin: 0 0 22px; flex: 1; }
.wd-dk-bar { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.wd-dk-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #ffb38a, #f26629); box-shadow: 0 0 12px rgba(242,102,41,.6); transition: width 1.4s ease .1s; }
.wd-dk.is-in .wd-dk-bar i { width: calc(var(--v) * 1%); }
@media (max-width: 1199px) { .wd-dk-num { font-size: 52px; } }
@media (max-width: 991px) { .wd-dk-grid { grid-template-columns: 1fr 1fr; } .wd-dk-head .mainheadingtitle { font-size: 30px; line-height: 40px; } }
@media (max-width: 576px) { .wd-dk { padding: 60px 0; } .wd-dk-head { margin-bottom: 30px; } .wd-dk-head .subtitle_text { font-size: 16px; } .wd-dk-head .mainheadingtitle { font-size: 22px; line-height: 32px; } .wd-dk-grid { grid-template-columns: 1fr; } .wd-dk-num { font-size: 48px; } }
@media (prefers-reduced-motion: reduce) { .wd-dk-ring .arc, .wd-dk-bar i { transition: none; } }

/* ══ ENTITY OPTIONS (shared) ══ */
.we { position: relative; overflow: hidden; padding: 80px 0; border-top: 1px solid #eef1f6; }
.we .container { position: relative; z-index: 1; }
.we .ogen-seo-entity-para { font-size: 17px; line-height: 1.85; color: #4a5568; margin: 0; }
.we-rate { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font-size: 14px; color: #64748b; }
.we-stars { color: #f59e0b; letter-spacing: 2px; font-size: 15px; }
.we-k { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #c2541f; background: #fff4ee; border: 1px solid #ffd9c6; border-radius: 100px; padding: 6px 14px; margin-bottom: 16px; }
@media (max-width: 576px) { .we { padding: 60px 0; } .we .ogen-seo-entity-para { font-size: 16px; } .we-rate { flex-direction: column; align-items: flex-start; gap: 4px; } }

/* ── L: editorial centred ── */
.we-l { background: #ffffff; }
.we-l-wrap { position: relative; max-width: 900px; margin: 0 auto; text-align: center; }
.we-l-q { display: block; font-size: 110px; line-height: .6; font-weight: 900; color: #f26629; opacity: .18; margin-bottom: 10px; }
.we-l .ogen-seo-entity-para { font-size: 18px; color: #5a6475; }
.we-l-lead { display: block; font-size: 26px; line-height: 1.45; font-weight: 700; color: #3c4858; margin-bottom: 14px; background: linear-gradient(180deg, transparent 62%, rgba(242,102,41,.18) 62%); display: inline; }
.we-l-rule { width: 80px; height: 3px; margin: 30px auto 24px; border-radius: 3px; background: linear-gradient(90deg, #ffb38a, #f26629); }
.we-l-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.we-l-pills span { font-size: 13px; font-weight: 600; color: #3c4858; border: 1px solid #e5e9f0; border-radius: 100px; padding: 6px 14px; transition: all .3s ease; }
.we-l-pills span.is-stk { color: #c2541f; background: #fff7f2; border-color: #ffe0cf; }
.we-l-pills span:hover { transform: translateY(-2px); border-color: #f26629; }
.we-l-pills i { width: 1px; height: 24px; background: #e5e9f0; margin: 0 6px; align-self: center; }
.we-l .we-rate { justify-content: center; }
@media (max-width: 576px) { .we-l-lead { font-size: 20px; } .we-l-pills i { display: none; } .we-l .we-rate { align-items: center; } }

/* ══ AUDIT: homepage type scale + equal section rhythm (13 Oct 2026) ══ */
/* hero */
.wd-hero__h1 { font-size: 48px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -.03em; }
.wd-hero__sub { font-size: 18px !important; line-height: 1.667em !important; }
@media (max-width: 1024px) { .wd-hero__h1 { font-size: 36px !important; } }
@media (max-width: 576px) { .wd-hero__h1 { font-size: 26px !important; line-height: 34px !important; } .wd-hero__sub { font-size: 16px !important; } }
/* services: heading block + cards = one section (80 top / 80 bottom, 40 head gap) */
.cmr-app-services { padding-top: 40px !important; padding-bottom: 80px !important; }
.cmr-app-services .tab_order2 h3 { font-size: 24px !important; line-height: 1.3 !important; }
.cmr-app-services .tab_order2 p { font-size: 16px !important; line-height: 1.667em !important; }
/* portfolio */
.wd-pol { padding-top: 80px !important; padding-bottom: 80px !important; }
.wd-pol .mainheadingtitle { font-size: 38px !important; line-height: 1.3 !important; font-weight: 700 !important; }
.wd-pol-sub { font-size: 18px !important; line-height: 1.667em !important; }
/* understanding: both H2s on the 28px tier */
.wd-ub-q h2 { font-size: 28px; font-weight: 700; }
/* impact head lead */
.wi-head p { font-size: 18px; }
/* how we deliver */
.ogen-howwe { padding-top: 80px !important; padding-bottom: 80px !important; }
.ogen-howwe-title { font-size: 38px !important; line-height: 1.3 !important; font-weight: 700 !important; }
.ogen-howwe-sub { font-size: 18px !important; line-height: 1.667em !important; }
/* consultation = homepage 52/900 */
.ogen-consult2030 .ogen-consult-title, .ogen-consult2030 h2 { font-size: 52px !important; line-height: 1.05 !important; font-weight: 900 !important; }
/* FAQ heading */
.faqsection .mainheadingtitle { font-size: 38px !important; line-height: 1.3 !important; font-weight: 700 !important; }
/* entity para */
.we-l .ogen-seo-entity-para { line-height: 1.667em; }
@media (max-width: 991px) {
  .wd-pol .mainheadingtitle, .ogen-howwe-title, .faqsection .mainheadingtitle { font-size: 30px !important; line-height: 40px !important; }
  .wd-ub-q h2 { font-size: 24px; }
}
@media (max-width: 576px) {
  .cmr-app-services { padding-top: 30px !important; padding-bottom: 60px !important; }
  .cmr-app-services .tab_order2 h3 { font-size: 20px !important; }
  .wd-pol, .ogen-howwe, .ogen-consult2030 { padding-top: 60px !important; padding-bottom: 60px !important; }
  .wd-pol .mainheadingtitle, .ogen-howwe-title, .faqsection .mainheadingtitle { font-size: 22px !important; line-height: 32px !important; }
  .ogen-consult2030 .ogen-consult-title, .ogen-consult2030 h2 { font-size: 36px !important; }
  .wd-pol-sub, .wi-head p, .ogen-howwe-sub, .we-l .ogen-seo-entity-para { font-size: 16px !important; }
  .wd-ub-q h2 { font-size: 20px; }
  .subtitle_text { font-size: 16px !important; }
}
.faqsection.homefaq .main-heading-box .mainheadingtitle { font-size: 38px !important; line-height: 1.3 !important; font-weight: 700 !important; }
@media (max-width: 991px) { .faqsection.homefaq .main-heading-box .mainheadingtitle { font-size: 30px !important; line-height: 40px !important; } }
@media (max-width: 576px) { .faqsection.homefaq .main-heading-box .mainheadingtitle { font-size: 22px !important; line-height: 32px !important; } }

/* ══ TYPE SYSTEM LOCK (14 Oct 2026): one scale for every web-development page ══
   Lead 18 · Body 16 · Meta 14 · Kicker 12 uppercase · Tab label 15 · Button 16/700 · Stat 44/34 · H3 28|24|20 */
/* body copy = 16 / 1.667 */
.accordion-content__inner p, .accordion-content__inner li,
.testimonial-box p:not(.testimonialnames),
.ogen-consult-sub, .ogen-consult-card-text { font-size: 16px !important; line-height: 1.667em !important; }
/* meta text = 14 */
.we-l-pills span, .wd-ub-set span, .ogen-consult-note, .we-rate, .wd-fx-count { font-size: 14px !important; }
/* kickers & chips = 12, uppercase where they were */
.wd-fx-meta small, .wd-stat__label, .app-plate-chips span { font-size: 12px !important; }
/* tab labels = 15 / 700 */
.wd-fx-meta strong, .wp-f-lbl { font-size: 15px !important; font-weight: 700 !important; }
/* buttons = 16 / 700 */
.wd-cta, .wd-fx-cta, .c-cta, .ogen-consult-btn, .cmr-app-services .link-btn { font-size: 16px !important; font-weight: 700 !important; }
/* stat numerals = 44 desktop / 34 phone */
.c-st b, .wd-ub-n, .wd-dk-num { font-size: 44px !important; }
/* large statement inside entity = H3 tier 24 */
.we-l-lead { font-size: 24px !important; line-height: 1.45 !important; }
@media (max-width: 576px) {
  .c-st b, .wd-ub-n, .wd-dk-num { font-size: 34px !important; }
  .we-l-lead { font-size: 20px !important; }
}
/* labels: one weight */
.wd-fx-meta small, .wd-stat__label, .app-plate-chips span, .wd-fx-tag, .c-badge, .c-st small, .wp-f-copy small, .wi-k-chip { font-weight: 700 !important; }
/* hero keeps 634px with 16px buttons */
.wd-hero__ctas { margin-bottom: 0 !important; }
.wd-hero:not(:has(.wd-hero__trust)) { } 
.wd-hero:has(.wd-hero__trust) { padding-top: 45px !important; padding-bottom: 43px !important; }
.wd-hero__ctas { flex-wrap: nowrap; }
@media (max-width: 576px) { .wd-hero__ctas { flex-wrap: wrap; } }

/* ══ web family additions ══ */
.wd-dk-src { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.45); margin: -8px 0 16px; }
.wd-dk-src .fa { color: #f26629; }
.wd-dk-card:not(:has(.wd-dk-bar)) .wd-dk-src { margin-bottom: 0; }
.we-rate .fa { color: #f26629; }
.wd-dk-num { white-space: nowrap; }
/* locked hero height: 634px at desktop regardless of copy length */
.wd-hero { min-height: 634px !important; padding: 40px 0 !important; box-sizing: border-box; }
@media (max-width: 991px) { .wd-hero { min-height: 0 !important; padding: 48px 0 44px !important; } }
.we-rel { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; margin: 18px auto 0; font-size: 14px; }
.we-rel span { font-weight: 700; color: #3c4858; }
.we-rel a { color: #f26629; font-weight: 600; text-decoration: none; border-bottom: 1px dashed rgba(242,102,41,.4); }
.we-rel a:hover { border-bottom-style: solid; }
.we-tm { max-width: 760px; margin: 14px auto 0; font-size: 12px; line-height: 1.65; color: #94a3b8; }