/* ============================================================
   WEB DEVELOPMENT SERVICES — page extension styles
   Loads AFTER android-app-development.css and reuses its full
   design system (.aad-*). Only page-specific components here.
   ============================================================ */

/* ---- Rich service cards with feature chips ---- */
.wdd-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.wdd-svc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px;
  border: 1px solid #e1e5ed;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(51, 65, 85, 0.045);
  transition: 0.25s;
}
.wdd-svc-card:hover {
  transform: translateY(-5px);
  border-color: #b8b6ef;
  box-shadow: 0 22px 46px rgba(79, 70, 229, 0.1);
}
.wdd-svc-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wdd-svc-icon {
  flex: none;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: #4f46e5;
  border-radius: 15px;
  background: #eeedff;
  font-size: 21px;
}
.wdd-svc-card h3 {
  margin: 0;
  color: #151c2b;
  font: 750 1.22rem/1.2 var(--font-primary);
  letter-spacing: -0.02em;
}
.wdd-svc-card > p {
  margin: 14px 0 0;
  color: #526078;
  font: 400 14px/1.7 var(--font-secondary);
}
.wdd-svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
  padding-top: 0;
}
.wdd-svc-tags {
  border-top: 1px dashed #e3e8f1;
  margin-top: 18px;
}
.wdd-svc-card > p + .wdd-svc-tags {
  margin-top: 16px;
}
.wdd-svc-tags span {
  padding: 7px 11px;
  color: #46566e;
  border: 1px solid #dbe5f3;
  border-radius: 999px;
  background: #f8fbff;
  font: 650 11px/1 var(--font-secondary);
  transition: 0.2s;
}
.wdd-svc-tags span:hover {
  color: #fff;
  border-color: #4f46e5;
  background: #4f46e5;
}

/* ---- Compact industry pills ---- */
.wdd-ind-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 980px;
  margin-inline: auto;
}
.wdd-ind-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 17px;
  color: #303b4f;
  border: 1px solid #dfe3ec;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(51, 65, 85, 0.04);
  font: 650 13px/1 var(--font-secondary);
  text-decoration: none;
  transition: 0.2s;
}
.wdd-ind-pill i {
  color: #4f46e5;
  font-size: 15px;
}
.wdd-ind-pill:hover {
  color: #4338ca;
  border-color: #bbb8ef;
  background: #f2f1ff;
  transform: translateY(-2px);
}

/* ---- Bento tile label: page-specific wording ---- */
.web-dev-page .aad-intro-tile:nth-child(2):before {
  content: "Web projects delivered";
}
/* shared by shopping-portal page */
.shopping-portal-page .aad-intro-tile:nth-child(2):before {
  content: "Shopping portals delivered";
}
/* shared by software-development page */
.software-dev-page .aad-intro-tile:nth-child(2):before {
  content: "Software products delivered";
}
/* shared by digital-marketing page */
.digital-marketing-page .aad-intro-tile:nth-child(2):before {
  content: "Campaigns delivered";
}
/* shared by social-media-marketing page */
.smm-page .aad-intro-tile:nth-child(2):before {
  content: "Social campaigns delivered";
}
/* shared by brand-design page */
.brand-design-page .aad-intro-tile:nth-child(2):before {
  content: "Brand identities crafted";
}
/* shared by graphic-design page */
.graphic-design-page .aad-intro-tile:nth-child(2):before {
  content: "Creative projects delivered";
}
/* shared by ui-ux page */
.uiux-page .aad-intro-tile:nth-child(2):before {
  content: "Products designed";
}
/* shared by api-development page */
.api-page .aad-intro-tile:nth-child(2):before {
  content: "APIs & integrations shipped";
}
/* shared by ai-agent page */
.ai-agent-page .aad-intro-tile:nth-child(2):before {
  content: "AI agents deployed";
}
/* shared by food-delivery-solution page */
.fds-page .aad-intro-tile:nth-child(2):before {
  content: "Days to launch";
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .wdd-svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .wdd-svc-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .wdd-svc-card {
    padding: 22px;
  }
  .wdd-ind-pill {
    padding: 11px 14px;
    font-size: 12px;
  }
}

/* V2 — hotel-page visual language, tailored for web development */
.web-dev-page.hbs-page .aad-hero {
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(200, 145, 60, 0.18),
      transparent 24%
    ),
    radial-gradient(circle at 12% 86%, rgba(18, 63, 50, 0.12), transparent 30%),
    linear-gradient(128deg, #f8f5ee 0%, #f0ece2 55%, #eaf2ed 100%);
}
.web-dev-page.hbs-page .aad-hero:before {
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(18, 63, 50, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 63, 50, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
}
.web-dev-page.hbs-page .aad-hero:after {
  background:
    radial-gradient(
      circle at 78% 48%,
      rgba(255, 255, 255, 0.62),
      transparent 23%
    ),
    linear-gradient(180deg, transparent 70%, rgba(9, 41, 31, 0.08));
}
.web-dev-page.hbs-page .aad-hero-copy {
  max-width: 760px;
}
.web-dev-page.hbs-page .aad-hero h1 {
  max-width: 760px;
}
.web-dev-page.hbs-page .aad-hero h1 span {
  color: var(--forest);
  background: linear-gradient(transparent 82%, rgba(200, 145, 60, 0.62) 82%);
}
.web-dev-page.hbs-page .aad-quote-head {
  background: linear-gradient(135deg, #edf5f0, #f8f5ed);
}
.web-dev-page.hbs-page .aad-quote-mark {
  color: var(--forest);
  background: #dfeee5;
}
.web-dev-page.hbs-page .aad-stats {
  background: var(--forest-dark);
}

/* Keep every content section inside the same cream / forest system. */
.web-dev-page.hbs-page .aad-section:nth-of-type(even) {
  background: #f7f4ed;
}
.web-dev-page.hbs-page .aad-section:nth-of-type(odd) {
  background: #fff;
}
.web-dev-page.hbs-page .aad-section.aad-why,
.web-dev-page.hbs-page .aad-section.aad-trends {
  color: #fff;
  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(200, 145, 60, 0.17),
      transparent 25%
    ),
    var(--forest-dark);
}
.web-dev-page.hbs-page .aad-why .aad-head h2,
.web-dev-page.hbs-page .aad-why-card h3,
.web-dev-page.hbs-page .aad-trends .aad-head h2 {
  color: #fff;
}
.web-dev-page.hbs-page .aad-why .aad-head h2 span,
.web-dev-page.hbs-page .aad-trends .aad-head h2 span {
  color: #f0cf99;
}
.web-dev-page.hbs-page .aad-why .aad-head p {
  color: #bfd0c7;
}
.web-dev-page.hbs-page .aad-why-card {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.055);
}
.web-dev-page.hbs-page .aad-why-card > i {
  color: #f0cf99;
}
.web-dev-page.hbs-page .aad-why-card p {
  color: #b8cbc1;
}
.web-dev-page.hbs-page .aad-why-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.web-dev-page.hbs-page .aad-trend-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.web-dev-page.hbs-page .aad-trend-grid article {
  min-height: 215px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 22px 20px;
}
.web-dev-page.hbs-page .aad-trend-grid article > i {
  align-self: start;
}
.web-dev-page.hbs-page .aad-trend-grid article > h3 {
  min-height: 46px;
  display: flex;
  align-items: flex-end;
  margin: 26px 0 8px;
  padding: 0;
}
.web-dev-page.hbs-page .aad-trend-grid article > p {
  align-self: start;
  margin: 0;
}

.web-dev-page.hbs-page .wdd-svc-card {
  border-radius: 8px;
  border-color: #deded8;
  box-shadow: none;
}
.web-dev-page.hbs-page .wdd-svc-card:hover {
  border-color: var(--forest);
  box-shadow: 0 20px 42px rgba(18, 63, 50, 0.08);
}
.web-dev-page.hbs-page .wdd-svc-icon {
  color: var(--forest);
  border-radius: 50%;
  background: #e6f0e9;
}
.web-dev-page.hbs-page .wdd-svc-tags span {
  color: #4c5a52;
  border-color: #dce4de;
  background: #f8faf8;
}
.web-dev-page.hbs-page .wdd-svc-tags span:hover {
  color: #fff;
  border-color: var(--forest);
  background: var(--forest);
}
.web-dev-page.hbs-page .wdd-ind-pill {
  color: #35443c;
  border-color: #dbe4de;
  border-radius: 999px;
  background: #fff;
}
.web-dev-page.hbs-page .wdd-ind-pill i {
  color: var(--forest);
}
.web-dev-page.hbs-page .wdd-ind-pill:hover {
  color: var(--forest);
  border-color: #9fb9aa;
  background: #eff6f1;
}

.web-dev-page.hbs-page .aad-tech {
  color: #17211c;
  background: linear-gradient(180deg, #f7f4ed, #eef3ef);
}
.web-dev-page.hbs-page .aad-tech .aad-head h2 {
  color: #17211c;
}
.web-dev-page.hbs-page .aad-tech .aad-head h2 span {
  color: var(--forest);
}
.web-dev-page.hbs-page .aad-tech .aad-head p {
  color: #647169;
}
.web-dev-page.hbs-page .aad-faq summary {
  color: #17211c;
}
.web-dev-page.hbs-page .aad-faq p {
  color: #55635b;
}
.web-dev-page.hbs-page .aad-tech-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-items: stretch;
}
.web-dev-page.hbs-page .aad-tech-col {
  min-height: 0;
  height: auto;
}
.web-dev-page.hbs-page .aad-tech-card-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.web-dev-page.hbs-page .aad-tech-card-head .aad-tech-icon {
  width: 48px;
  height: 48px;
}
.web-dev-page.hbs-page .aad-tech-card-head h3 {
  margin: 0;
  padding: 0;
  color: #17211c;
  font:
    720 1.16rem/1.2 "Inter",
    Arial,
    sans-serif;
  letter-spacing: -0.025em;
}
.web-dev-page.hbs-page .aad-tech-card-head .aad-tech-number {
  justify-self: end;
}
.web-dev-page.hbs-page .aad-tech-col > p {
  margin-top: 0;
}

.web-dev-page.hbs-page .aad-process-grid {
  grid-auto-rows: auto;
  align-items: stretch;
}
.web-dev-page.hbs-page .aad-step {
  min-height: 0;
  height: auto;
  padding: 24px;
}
.web-dev-page.hbs-page .aad-step h3 {
  margin: 38px 0 10px;
  padding: 0;
}
.web-dev-page.hbs-page .aad-step p {
  margin: 0;
}

.web-dev-page.hbs-page .wd-industries {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #f4f1e9;
}
.web-dev-page.hbs-page .wd-industries:before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -22px;
  opacity: 0.5;
  background: url("../images/web-development-ai-hero.webp") center 44% / cover
    no-repeat;
  filter: blur(7px) saturate(0.76);
  transform: scale(1.04);
  pointer-events: none;
}
.web-dev-page.hbs-page .wd-industries:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(248, 246, 240, 0.91),
      rgba(244, 241, 233, 0.84)
    ),
    radial-gradient(
      circle at 50% 45%,
      rgba(255, 255, 255, 0.76),
      transparent 52%
    );
  pointer-events: none;
}
.web-dev-page.hbs-page .wd-industries .aad-wrap {
  position: relative;
  z-index: 1;
}
.web-dev-page.hbs-page .wd-industries .wdd-ind-pill {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 20px rgba(9, 41, 31, 0.055);
  backdrop-filter: blur(8px);
}

.web-dev-page.hbs-page .aad-cta-inner {
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(234, 215, 181, 0.24),
      transparent 28%
    ),
    linear-gradient(125deg, #0d3026, #174c3c 65%, #286852);
}

@media (max-width: 980px) {
  .web-dev-page.hbs-page .aad-hero {
    background:
      radial-gradient(
        circle at 82% 18%,
        rgba(200, 145, 60, 0.14),
        transparent 26%
      ),
      linear-gradient(145deg, #f8f5ee, #eaf2ed);
  }
}

/* V4 — editorial business-growth introduction */
.web-dev-page.hbs-page .wd-growth {
  position: relative;
  overflow: hidden;
  padding: clamp(82px, 8vw, 118px) 0;
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(200, 145, 60, 0.12),
      transparent 24%
    ),
    linear-gradient(135deg, #fbfaf7 0%, #f4f1e9 100%);
}
.web-dev-page.hbs-page .wd-growth:before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  left: -220px;
  bottom: -210px;
  border: 1px solid rgba(18, 63, 50, 0.1);
  border-radius: 50%;
  box-shadow:
    0 0 0 55px rgba(18, 63, 50, 0.025),
    0 0 0 110px rgba(18, 63, 50, 0.02);
  pointer-events: none;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-grid {
  position: relative;
  grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr);
  gap: clamp(54px, 7vw, 104px);
  align-items: center;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-copy {
  position: relative;
  padding-left: 28px;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-copy:before {
  content: "";
  position: absolute;
  left: 0;
  top: 72px;
  width: 3px;
  height: 88px;
  border-radius: 99px;
  background: linear-gradient(var(--forest), var(--gold));
}
.web-dev-page.hbs-page .wd-growth .aad-intro-copy h2 {
  max-width: 650px;
  margin: 22px 0 25px !important;
  color: #0b120e;
  font-family: "Inter", Arial, sans-serif !important;
  font-weight: 720 !important;
  font-size: clamp(2.75rem, 4.35vw, 4.6rem) !important;
  line-height: 0.99 !important;
  letter-spacing: -0.06em;
}
.web-dev-page.hbs-page .wd-growth .wd-growth-title span {
  display: block;
  color: #0a0e0c;
  white-space: nowrap;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-copy > p {
  max-width: 620px;
  margin: 0 0 15px;
  color: #4a5850;
  font-size: 14px;
  line-height: 1.82;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 27px;
  counter-reset: intro-benefit;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-points li:last-child {
  grid-column: auto;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-points li {
  counter-increment: intro-benefit;
  position: relative;
  min-height: 54px;
  align-items: center;
  gap: 13px;
  padding: 13px 16px 13px 51px;
  color: #17231d !important;
  border: 1px solid #d8ddd8;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 11.5px;
  box-shadow: 0 8px 24px rgba(18, 45, 35, 0.035);
  transition:
    transform 0.2s,
    border-color 0.2s,
    background 0.2s;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-points li:before {
  content: "0" counter(intro-benefit);
  position: absolute;
  left: 15px;
  top: 50%;
  color: var(--forest);
  font:
    750 10px/1 "Inter",
    sans-serif;
  letter-spacing: 0.06em;
  transform: translateY(-50%);
}
.web-dev-page.hbs-page .wd-growth .aad-intro-points li:hover {
  transform: translateX(4px);
  border-color: #aabcb1;
  background: #fff;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-points i {
  display: none;
}

.web-dev-page.hbs-page .wd-growth .aad-intro-visual {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(
      circle at 95% 5%,
      rgba(200, 145, 60, 0.22),
      transparent 29%
    ),
    var(--forest-dark);
  box-shadow: 0 30px 70px rgba(9, 41, 31, 0.2);
}
.web-dev-page.hbs-page .wd-growth .aad-intro-visual:after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 18px;
  pointer-events: none;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-visual-head {
  position: relative;
  z-index: 1;
  grid-column: 1/-1;
  min-height: 72px;
  padding: 16px 17px 20px;
  color: #f0cf99;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.web-dev-page.hbs-page .wd-growth .aad-intro-visual-head span {
  display: flex;
  align-items: center;
  gap: 9px;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-visual-head span:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f0cf99;
  box-shadow: 0 0 0 5px rgba(240, 207, 153, 0.1);
}
.web-dev-page.hbs-page .wd-growth .aad-intro-visual-head i {
  color: #f0cf99;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile,
.web-dev-page.hbs-page .wd-growth .aad-intro-tile:nth-child(even) {
  position: relative;
  z-index: 1;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0;
  margin: 0;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none;
  transform: none !important;
  overflow: hidden;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile:after {
  content: "↗";
  position: absolute;
  right: 19px;
  top: 18px;
  color: #789388;
  font-size: 13px;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile:hover {
  border-color: rgba(240, 207, 153, 0.48);
  background: rgba(255, 255, 255, 0.095) !important;
  transform: translateY(-4px) !important;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile i {
  position: static;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: auto;
  color: #0d3026;
  border-radius: 12px;
  background: #f0cf99;
  font-size: 17px;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile strong {
  color: #fff;
  font:
    720 clamp(1.65rem, 2.4vw, 2.2rem) / 1 "Inter",
    sans-serif;
  letter-spacing: -0.04em;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile span {
  margin-top: 8px;
  color: #b9ccc2;
  font-size: 11px;
  font-weight: 550;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile:nth-child(3) i {
  background: #dcebe2;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile:nth-child(4) i {
  background: #e4e3df;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile:nth-child(5) i {
  background: #e7deea;
}

/* AI visual replaces the former delivery-stat bento panel. */
.web-dev-page.hbs-page .wd-growth .aad-intro-ai-card {
  display: block;
  min-height: 510px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #102d23;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-ai-card:after {
  inset: 10px;
  z-index: 2;
  border-color: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.web-dev-page.hbs-page .aad-intro-ai-card > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.web-dev-page.hbs-page .aad-intro-ai-card:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(7, 27, 20, 0.94) 0%,
    rgba(8, 35, 26, 0.76) 42%,
    rgba(7, 22, 17, 0.11) 82%
  );
}
.web-dev-page.hbs-page .aad-intro-ai-card:hover > img {
  transform: scale(1.055);
}
.web-dev-page.hbs-page .aad-ai-card-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 510px;
  padding: 42px;
  color: #fff;
}
.web-dev-page.hbs-page .aad-ai-card-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: auto;
  padding: 9px 13px;
  color: #fff0ca;
  border: 1px solid rgba(255, 224, 153, 0.35);
  border-radius: 999px;
  background: rgba(12, 42, 31, 0.48);
  backdrop-filter: blur(8px);
  font: 700 10px/1 var(--font-secondary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.web-dev-page.hbs-page .aad-ai-card-kicker i {
  font-size: 13px;
  color: #f0cf99;
}
.web-dev-page.hbs-page .aad-ai-card-overlay h3 {
  margin: 0 0 13px;
  max-width: 390px;
  color: #fff;
  font: 760 clamp(2rem, 3.2vw, 3.4rem) / 0.98 var(--font-primary);
  letter-spacing: -0.055em;
}
.web-dev-page.hbs-page .aad-ai-card-overlay p {
  max-width: 380px;
  margin: 0;
  color: #d6e2db;
  font: 400 13px/1.65 var(--font-secondary);
}
.web-dev-page.hbs-page .aad-ai-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.web-dev-page.hbs-page .aad-ai-card-tags span {
  padding: 8px 10px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  font: 650 10px/1 var(--font-secondary);
}

@media (max-width: 980px) {
  .web-dev-page.hbs-page .aad-tech-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .web-dev-page.hbs-page .aad-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .web-dev-page.hbs-page .wd-growth .aad-intro-grid {
    grid-template-columns: 1fr;
  }
  .web-dev-page.hbs-page .wd-growth .aad-intro-copy {
    padding-left: 23px;
  }
  .web-dev-page.hbs-page .wd-growth .aad-intro-visual {
    max-width: 720px;
  }
}
@media (max-width: 1200px) and (min-width: 981px) {
  .web-dev-page.hbs-page .aad-trend-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .web-dev-page.hbs-page .aad-tech-grid {
    grid-template-columns: 1fr;
  }
  .web-dev-page.hbs-page .aad-why-grid {
    grid-template-columns: 1fr;
  }
  .web-dev-page.hbs-page .wd-growth {
    padding: 68px 0;
  }
  .web-dev-page.hbs-page .wd-growth .aad-intro-copy {
    padding-left: 0;
  }
  .web-dev-page.hbs-page .wd-growth .aad-intro-copy:before {
    display: none;
  }
  .web-dev-page.hbs-page .wd-growth .aad-intro-copy h2 {
    font-size: 2.55rem !important;
  }
  .web-dev-page.hbs-page .wd-growth .wd-growth-title {
    font-size: clamp(2.25rem, 10.3vw, 3.35rem) !important;
  }
  .web-dev-page.hbs-page .wd-growth .aad-intro-visual {
    grid-template-columns: 1fr;
    padding: 13px;
    border-radius: 19px;
  }
  .web-dev-page.hbs-page .wd-growth .aad-intro-ai-card,
  .web-dev-page.hbs-page .aad-ai-card-overlay {
    min-height: 430px;
  }
  .web-dev-page.hbs-page .wd-growth .aad-intro-ai-card {
    display: block;
    padding: 0;
  }
  .web-dev-page.hbs-page .aad-ai-card-overlay {
    padding: 30px;
  }
  .web-dev-page.hbs-page .wd-growth .aad-intro-visual-head {
    min-height: 62px;
  }
  .web-dev-page.hbs-page .wd-growth .aad-intro-tile,
  .web-dev-page.hbs-page .wd-growth .aad-intro-tile:nth-child(even) {
    min-height: 145px;
    padding: 19px;
  }
}

@media (max-width: 420px) {
  .web-dev-page.hbs-page .wd-growth .aad-intro-points {
    grid-template-columns: 1fr;
  }
}

/* V5 — AI-generated, softly blurred hero backdrop */
.web-dev-page.hbs-page .aad-hero {
  isolation: isolate;
  background: #f4f1e9;
}
.web-dev-page.hbs-page .aad-hero:before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -18px;
  opacity: 0.62;
  background: url("../images/web-development-ai-hero.webp") center/cover
    no-repeat;
  filter: blur(4px) saturate(0.82);
  transform: scale(1.035);
  pointer-events: none;
}
.web-dev-page.hbs-page .aad-hero:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 1;
  background:
    linear-gradient(
      90deg,
      rgba(247, 244, 236, 0.96) 0%,
      rgba(247, 244, 236, 0.91) 43%,
      rgba(247, 244, 236, 0.76) 64%,
      rgba(238, 242, 235, 0.68) 100%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(9, 41, 31, 0.08));
  pointer-events: none;
}
.web-dev-page.hbs-page .aad-hero .aad-wrap {
  position: relative;
  z-index: 1;
}

@media (max-width: 980px) {
  .web-dev-page.hbs-page .aad-hero:before {
    opacity: 0.38;
    background-position: 62% center;
    filter: blur(5px) saturate(0.76);
  }
  .web-dev-page.hbs-page .aad-hero:after {
    background: linear-gradient(
      180deg,
      rgba(247, 244, 236, 0.94),
      rgba(247, 244, 236, 0.84)
    );
  }
}
@media (max-width: 640px) {
  .web-dev-page.hbs-page .aad-hero:before {
    opacity: 0.3;
    background-position: 68% center;
    filter: blur(6px) saturate(0.72);
  }
  .web-dev-page.hbs-page .aad-hero:after {
    background: linear-gradient(
      180deg,
      rgba(247, 244, 236, 0.95),
      rgba(247, 244, 236, 0.88)
    );
  }
}

/* V6 — compact process cards based on the approved reference */
.web-dev-page.hbs-page .aad-process-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.web-dev-page.hbs-page .aad-step,
.web-dev-page.hbs-page .aad-step:last-child {
  grid-column: span 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: 44px auto;
  align-content: start;
  padding: 0;
  color: #101713;
  border: 1px solid #d3dbd5;
  border-radius: 15px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}
.web-dev-page.hbs-page .aad-step:last-child {
  grid-column: 1/-1;
}
.web-dev-page.hbs-page .aad-step:before,
.web-dev-page.hbs-page .aad-step:last-child:before {
  display: none;
}
.web-dev-page.hbs-page .aad-step:after {
  display: none;
}
.web-dev-page.hbs-page .aad-step:hover,
.web-dev-page.hbs-page .aad-step:last-child:hover {
  border-color: #9fb4a8;
  background: #fff;
  box-shadow: 0 16px 34px rgba(21, 63, 51, 0.08);
  transform: translateY(-3px);
}
.web-dev-page.hbs-page .aad-step .aad-step-num,
.web-dev-page.hbs-page .aad-step:last-child .aad-step-num {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  justify-self: stretch;
  width: 52px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  border-radius: 0;
  background: #153f33;
  font:
    800 15px/1 "Inter",
    Arial,
    sans-serif;
  letter-spacing: 0;
}
.web-dev-page.hbs-page .aad-step h3,
.web-dev-page.hbs-page .aad-step:last-child h3 {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 14px;
  color: #101713;
  border-bottom: 1px solid #d8dfda;
  font:
    720 15px/1.2 "Inter",
    Arial,
    sans-serif;
  letter-spacing: -0.02em;
}
.web-dev-page.hbs-page .aad-step p,
.web-dev-page.hbs-page .aad-step:last-child p {
  grid-column: 1/-1;
  align-self: start;
  margin: 0;
  padding: 14px 15px 16px;
  color: #536158;
  font:
    400 13px/1.62 "Inter",
    Arial,
    sans-serif;
}

@media (max-width: 980px) {
  .web-dev-page.hbs-page .aad-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .web-dev-page.hbs-page .aad-step,
  .web-dev-page.hbs-page .aad-step:last-child {
    grid-column: span 1;
  }
}
@media (max-width: 640px) {
  .web-dev-page.hbs-page .aad-process-grid {
    grid-template-columns: 1fr;
  }
  .web-dev-page.hbs-page .aad-step,
  .web-dev-page.hbs-page .aad-step:last-child {
    grid-column: 1;
    min-height: 0;
    grid-template-columns: 50px minmax(0, 1fr);
    grid-template-rows: 44px auto;
    padding: 0;
  }
  .web-dev-page.hbs-page .aad-step .aad-step-num,
  .web-dev-page.hbs-page .aad-step:last-child .aad-step-num {
    width: 50px;
  }
}

/* V24 — accessible quote form and crawlable service-card links */
.web-dev-page .wd-required,
.web-dev-page .wd-optional {
  margin-left: 5px;
  color: #8a4f25;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.web-dev-page .wd-optional {
  color: #68766e;
}
.web-dev-page .wd-field-error {
  display: block;
  min-height: 15px;
  margin: 5px 2px 0;
  color: #a12828;
  font: 650 10px/1.35 var(--font-secondary);
}
.web-dev-page .aad-field input[aria-invalid="true"],
.web-dev-page .aad-field textarea[aria-invalid="true"] {
  border-color: #c43d3d !important;
  box-shadow: 0 0 0 3px rgba(196, 61, 61, 0.1) !important;
}
.web-dev-page .wd-form-status {
  grid-column: 1/-1;
  min-height: 16px;
  margin: 0;
  color: #7a342d;
  text-align: center;
  font: 650 10px/1.4 var(--font-secondary);
}
.web-dev-page .wd-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.web-dev-page .wd-service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 19px;
  color: var(--forest, #153f33);
  text-decoration: none;
  font: 750 12px/1.2 var(--font-secondary);
}
.web-dev-page .wd-service-link i {
  transition: transform 0.2s ease;
}
.web-dev-page .wd-service-link:hover {
  color: #a36c20;
}
.web-dev-page .wd-service-link:hover i {
  transform: translate(2px, -2px);
}
.web-dev-page .wd-service-link:focus-visible {
  border-radius: 4px;
  outline: 3px solid rgba(21, 63, 51, 0.22);
  outline-offset: 4px;
}