/* ============================================================================
   WEBSITE DEVELOPMENT DIVISION
   Page-specific styles for website-development.html and the division's
   sections on index.html and services.html.

   Everything here builds on the existing tokens in main.css. The division
   borrows the brand's cyan (--color-accent-cyan), which the academic pages
   barely use, as its secondary signature next to gold -- enough to read as
   "the technology side of the same company" without a second visual system.

   Card components reuse the site's own classes (.service-box-card, .step-card,
   .why-card, .pricing-card, details.faq-item) so the existing reveal and depth
   motion applies to them unchanged. Prefix for everything new: .wd-
   ============================================================================ */

:root {
  --wd-cyan: var(--color-accent-cyan);
  --wd-cyan-soft: rgba(0, 168, 232, 0.12);
  --wd-cyan-line: rgba(0, 168, 232, 0.35);
}

/* ---------------------------------------------------------------- hero */
.wd-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #FFFFFF;
  text-align: center;
  padding: 5rem 0 4rem;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(0, 168, 232, 0.16) 0%, rgba(0, 168, 232, 0) 60%),
    linear-gradient(160deg, #0B192C 0%, #10243D 55%, #1E3E62 100%);
}

/* A fine engineering grid: the only ornament, and it fades toward the copy so
   the headline sits on clean navy. */
.wd-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
}

.wd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(229, 169, 60, 0.12);
  border: 1px solid rgba(229, 169, 60, 0.35);
  border-radius: var(--radius-full);
  padding: 0.45rem 1rem;
  margin-bottom: 1.25rem;
}
.wd-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wd-cyan);
  box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.25);
}

.wd-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 auto 1.1rem;
  max-width: 17ch;
  text-wrap: balance;
}
.wd-hero h1 em {
  font-style: normal;
  color: var(--color-accent);
}

.wd-hero-sub {
  font-size: 1.12rem;
  line-height: 1.7;
  color: #D5DEEA;
  max-width: 62ch;
  margin: 0 auto 2rem;
}

.wd-hero-ctas {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

/* trust strip */
.wd-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 0.75rem;
  margin: 2.5rem auto 0;
  max-width: 900px;
  padding: 0;
  list-style: none;
}
.wd-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #E2E8F0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  padding: 0.45rem 0.9rem;
}
.wd-trust svg { width: 15px; height: 15px; color: var(--wd-cyan); flex: none; }

/* ---------------------------------------------------------------- sections */
.wd-section { padding: 4.5rem 0; }
.wd-section-alt { background: var(--color-bg-alt); }
.wd-section-dark {
  background: linear-gradient(160deg, #0B192C 0%, #14294A 100%);
  color: #FFFFFF;
}
.wd-section-dark .section-title { color: #FFFFFF; }
.wd-section-dark .section-description { color: #C7D2E0; }

.wd-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wd-cyan);
  margin-bottom: 0.6rem;
  display: block;
}

/* ---------------------------------------------------------------- filters */
.wd-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 2.25rem;
  padding: 0;
  list-style: none;
}
.wd-filter {
  appearance: none;
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 1.05rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast);
}
.wd-filter:hover { border-color: var(--wd-cyan-line); color: var(--color-primary); }
.wd-filter:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.wd-filter[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

/* ---------------------------------------------------------------- service grid */
.wd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.35rem;
}

/* .service-box-card comes from main.css; these add the division's accents and
   the filter transition without touching the base component. */
.wd-grid .service-box-card {
  position: relative;
  transition: opacity 260ms ease, transform 260ms ease, box-shadow var(--transition-normal);
}
.wd-grid .service-box-card[hidden] { display: none; }
.wd-grid .service-box-card.wd-leaving { opacity: 0; transform: translateY(6px) scale(0.985); }
.wd-grid .service-box-card.wd-entering { animation: wd-enter 320ms ease both; }
@keyframes wd-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.wd-grid .service-box-icon {
  background: var(--wd-cyan-soft);
  color: var(--color-primary-light);
}
.wd-grid .service-box-card:hover .service-box-icon { background: var(--wd-cyan); color: #FFFFFF; }

.wd-card-tag {
  position: absolute;
  top: 1rem; right: 1rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  background: rgba(229, 169, 60, 0.14);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.6rem;
}

.wd-grid .service-box-text { min-height: 0; }

/* the premium card carries a hairline of gold */
.wd-grid .service-box-card.wd-premium {
  border-color: rgba(229, 169, 60, 0.45);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF2 100%);
}

/* ---------------------------------------------------------------- supporting services */
.wd-support-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.wd-support {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.2rem;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.wd-support:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--wd-cyan-line);
}
.wd-support-icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--color-bg-soft);
  color: var(--color-primary-light);
}
.wd-support-icon svg { width: 20px; height: 20px; }
.wd-support h3 {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 0.3rem;
}
.wd-support p {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------------------------------------------------------------- packages */
.wd-packages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.35rem;
  align-items: stretch;
}
.wd-packages .pricing-card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: #FFFFFF;
}
.wd-packages .pricing-card.wd-popular {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-gold);
}
.wd-pkg-flag {
  position: absolute;
  top: -0.7rem; left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-accent);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.85rem;
  white-space: nowrap;
}
.wd-pkg-tier {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wd-cyan);
  margin-bottom: 0.35rem;
}
.wd-packages h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--color-primary);
  margin: 0 0 0.4rem;
}
.wd-pkg-for {
  font-size: 0.86rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 1rem;
  min-height: 2.6em;
}
.wd-pkg-price {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-primary);
  padding: 0.85rem 0;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: 1rem;
}
.wd-pkg-price small {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--color-text-subtle);
  margin-top: 0.15rem;
}
.wd-pkg-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex: 1;
}
.wd-pkg-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text-main);
  margin-bottom: 0.5rem;
}
.wd-pkg-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.42em;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-success-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  background-size: 9px;
  background-position: center;
  background-repeat: no-repeat;
}
.wd-packages .btn { width: 100%; }

/* ---------------------------------------------------------------- process */
.wd-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.1rem;
  counter-reset: wd-step;
}
.wd-steps .step-card { text-align: left; }
.wd-steps .step-number {
  color: var(--wd-cyan);
  font-weight: 800;
  letter-spacing: 0.12em;
}
.wd-steps-note {
  margin: 1.75rem auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  background: #FFFFFF;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.25rem;
}
.wd-steps-note strong { color: var(--color-primary); }

/* ---------------------------------------------------------------- why us */
.wd-why {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.wd-why .why-card { height: 100%; }
.wd-why .why-card-icon { background: var(--wd-cyan-soft); color: var(--color-primary-light); }

/* ---------------------------------------------------------------- ownership */
.wd-own {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3rem;
  align-items: center;
}
.wd-own h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0 0 1rem;
}
.wd-own p { color: #C7D2E0; line-height: 1.7; font-size: 1.02rem; }
.wd-own-points {
  display: grid;
  gap: 0.9rem;
  list-style: none;
  padding: 0; margin: 0;
}
.wd-own-points li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 1rem 1.15rem;
}
.wd-own-points svg { flex: none; width: 22px; height: 22px; color: var(--color-accent); margin-top: 0.1rem; }
.wd-own-points strong { display: block; color: #FFFFFF; font-size: 0.98rem; margin-bottom: 0.2rem; }
.wd-own-points span { color: #B9C6D6; font-size: 0.88rem; line-height: 1.5; }

/* ---------------------------------------------------------------- FAQ */
.wd-faq { max-width: 860px; margin: 0 auto; }

/* ---------------------------------------------------------------- enquiry form */
.wd-form-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3rem;
  align-items: start;
}
.wd-form-aside h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  color: var(--color-primary);
  line-height: 1.2;
  margin: 0 0 0.9rem;
}
.wd-form-aside p { color: var(--color-text-muted); line-height: 1.7; }
.wd-form-aside ul { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.6rem; }
.wd-form-aside li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: var(--color-text-main); }
.wd-form-aside li svg { flex: none; width: 18px; height: 18px; color: var(--color-success-dark); margin-top: 0.1rem; }

.wd-form {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
}
.wd-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.1rem;
}
.wd-form-grid .wd-span { grid-column: 1 / -1; }
.wd-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.35rem;
}
.wd-form label small { font-weight: 500; color: var(--color-text-subtle); }
.wd-form .form-control { width: 100%; }
.wd-form textarea.form-control { min-height: 120px; resize: vertical; }

.wd-form-note {
  font-size: 0.8rem;
  color: var(--color-text-subtle);
  margin: 0.9rem 0 0;
  line-height: 1.5;
}
.wd-form-status {
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  display: none;
}
.wd-form-status.is-ok    { display: block; background: var(--color-success-bg); color: var(--color-success-dark); }
.wd-form-status.is-err   { display: block; background: #FEF2F2; color: #991B1B; }
.wd-form-status.is-busy  { display: block; background: var(--color-bg-soft); color: var(--color-text-muted); }

/* ---------------------------------------------------------------- final CTA */
.wd-final {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #FFFFFF;
  padding: 4.5rem 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(229, 169, 60, 0.18) 0%, rgba(229, 169, 60, 0) 60%),
    linear-gradient(160deg, #0B192C 0%, #1E3E62 100%);
}
.wd-final h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  margin: 0.4rem 0 0.9rem;
  letter-spacing: -0.015em;
}
.wd-final p { color: #D5DEEA; max-width: 58ch; margin: 0 auto 1.75rem; line-height: 1.7; }
.wd-final .wd-hero-ctas { margin-bottom: 0; }

/* ---------------------------------------------------------------- homepage + services.html sections */
/* motion.css clears the background of every `.academic-band > .section` at
   specificity (0,2,0); this band must keep its navy, so the selector matches
   that placement explicitly and wins on specificity. */
.wd-intro-band,
.academic-band > .section.wd-intro-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #0B192C 0%, #14294A 100%);
  color: #FFFFFF;
  border-top: 1px solid rgba(0, 168, 232, 0.25);
}
.wd-intro-band .section-title { color: #FFFFFF; }
.wd-intro-band .section-description { color: #C7D2E0; }
.wd-intro-band .section-tag {
  background: rgba(0, 168, 232, 0.14);
  color: #7DD3F5;
  border: 1px solid rgba(0, 168, 232, 0.35);
}
.wd-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 2.25rem;
}
.wd-mini {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.3rem;
  transition: transform var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal);
}
.wd-mini:hover { transform: translateY(-4px); border-color: var(--wd-cyan-line); background: rgba(255, 255, 255, 0.08); }
.wd-mini-icon {
  width: 42px; height: 42px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: rgba(0, 168, 232, 0.16);
  color: #7DD3F5;
  margin-bottom: 0.9rem;
}
.wd-mini-icon svg { width: 22px; height: 22px; }
.wd-mini h3 { font-family: var(--font-heading); font-size: 1.05rem; color: #FFFFFF; margin: 0 0 0.4rem; }
.wd-mini p { font-size: 0.88rem; line-height: 1.55; color: #B9C6D6; margin: 0; }

.wd-new-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-accent);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.75rem;
  margin-left: 0.6rem;
  vertical-align: middle;
}

/* services.html: the division block sits on the light page, so its cards use
   the page's own .category-service-card with a cyan top rule to separate them
   from the academic categories above. */
#cat-website .category-header-wrap h3 svg { color: var(--wd-cyan); }
#cat-website .category-service-card { border-top: 3px solid var(--wd-cyan); }
#cat-website .category-service-card:hover { border-top-color: var(--color-accent); }
.wd-division-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  background: linear-gradient(135deg, #0B192C 0%, #1E3E62 100%);
  color: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 1.75rem 2rem;
  margin: 0 0 1.75rem;
}
.wd-division-intro p { margin: 0.35rem 0 0; color: #C7D2E0; font-size: 0.95rem; max-width: 60ch; line-height: 1.6; }
.wd-division-intro strong { font-family: var(--font-heading); font-size: 1.2rem; color: #FFFFFF; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .wd-grid, .wd-support-grid, .wd-why, .wd-mini-grid { grid-template-columns: repeat(2, 1fr); }
  .wd-packages { grid-template-columns: repeat(2, 1fr); }
  .wd-steps { grid-template-columns: repeat(3, 1fr); }
  .wd-own, .wd-form-wrap { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 768px) {
  .wd-hero { padding: 3.5rem 0 3rem; }
  .wd-section { padding: 3.25rem 0; }
  .wd-steps { grid-template-columns: 1fr 1fr; }
  .wd-form { padding: 1.4rem; }
  .wd-form-grid { grid-template-columns: 1fr; }
  /* wrap rather than scroll: every filter stays visible on a phone */
  .wd-filters { justify-content: center; gap: 0.4rem; }
  .wd-filter { padding: 0.5rem 0.85rem; font-size: 0.8rem; }
  .wd-division-intro { padding: 1.4rem 1.3rem; }
}
@media (max-width: 560px) {
  .wd-grid, .wd-support-grid, .wd-why, .wd-mini-grid, .wd-packages, .wd-steps { grid-template-columns: 1fr; }
  .wd-hero-ctas .btn { width: 100%; justify-content: center; }
  .wd-trust li { font-size: 0.78rem; padding: 0.4rem 0.75rem; }
  .wd-eyebrow { font-size: 0.64rem; letter-spacing: 0.1em; padding: 0.4rem 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wd-grid .service-box-card,
  .wd-grid .service-box-card.wd-leaving,
  .wd-grid .service-box-card.wd-entering,
  .wd-support, .wd-mini, .wd-filter { transition: none; animation: none; transform: none; }
}

/* services.html filter tab for the division */
.category-tab-btn--web { border-color: var(--wd-cyan-line); color: var(--color-primary); }
.category-tab-btn--web.active { background: var(--color-primary); color: #FFFFFF; }

/* ---------------------------------------------------------------- homepage band video */
/* The section already isolates and clips; content must sit above video + scrim. */
.wd-intro-band { isolation: isolate; }
.wd-intro-band > .container { position: relative; z-index: 2; }

/* The 3D clip was generated dark with an empty centre, so it needs far less
   scrim than the library footage on the inner pages. Cyan rim light on the
   panels should survive; only the type has to win. */
.wd-intro-band .page-hero-scrim {
  background: linear-gradient(180deg,
    rgba(11, 25, 44, 0.48) 0%,
    rgba(11, 25, 44, 0.58) 45%,
    rgba(11, 25, 44, 0.64) 100%);
}
.wd-intro-band .page-hero-scrim::after {
  background: radial-gradient(ellipse 58% 55% at 50% 42%,
    rgba(11, 25, 44, 0.38) 0%, rgba(11, 25, 44, 0.08) 60%, rgba(11, 25, 44, 0) 100%);
}
/* the cards are translucent; a touch more body keeps their copy crisp over motion */
.wd-intro-band .wd-mini { background: rgba(11, 25, 44, 0.58); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wd-intro-band .wd-mini:hover { background: rgba(11, 25, 44, 0.7); }
.wd-intro-band .wd-mini p { color: #C7D2E0; }

/* ---------------------------------------------------------------- division banner clip (services.html) */
/* Left-aligned copy, so the wash is weighted to the left rather than the centre. */
.wd-division-intro { position: relative; overflow: hidden; isolation: isolate; }
.wd-division-intro > :not(.page-hero-video):not(.page-hero-scrim) { position: relative; z-index: 2; }
.wd-division-intro .page-hero-scrim {
  background: linear-gradient(90deg,
    rgba(11, 25, 44, 0.70) 0%,
    rgba(11, 25, 44, 0.62) 55%,
    rgba(11, 25, 44, 0.50) 100%);
}
.wd-division-intro .page-hero-scrim::after { background: none; }
.wd-division-intro strong { text-shadow: 0 2px 12px rgba(6, 14, 26, 0.55); }
.wd-division-intro p { text-shadow: 0 1px 10px rgba(6, 14, 26, 0.5); }

/* ---------------------------------------------------------------- division page clips */
/* hero: the 3D clip, same wash as the homepage band (it was generated dark
   with a quiet centre). The particle canvas and copy already sit at z 0/1;
   the video goes under both, the scrim between them. */
.wd-hero .page-hero-scrim--webdev {
  background: linear-gradient(180deg,
    rgba(11, 25, 44, 0.48) 0%,
    rgba(11, 25, 44, 0.58) 45%,
    rgba(11, 25, 44, 0.64) 100%);
}
.wd-hero .page-hero-scrim--webdev::after {
  background: radial-gradient(ellipse 58% 55% at 50% 42%,
    rgba(11, 25, 44, 0.38) 0%, rgba(11, 25, 44, 0.08) 60%, rgba(11, 25, 44, 0) 100%);
}
.wd-hero h1 { text-shadow: 0 2px 18px rgba(6, 14, 26, 0.55), 0 1px 2px rgba(6, 14, 26, 0.4); }
.wd-hero .wd-hero-sub { text-shadow: 0 1px 12px rgba(6, 14, 26, 0.5); }

/* ownership band and closing call-to-action */
.wd-section-dark, .wd-final { position: relative; overflow: hidden; isolation: isolate; }
.wd-section-dark > .container, .wd-final > .container { position: relative; z-index: 2; }
.wd-own h2, .wd-final h2 { text-shadow: 0 2px 16px rgba(6, 14, 26, 0.55); }
.wd-own p, .wd-final p { text-shadow: 0 1px 10px rgba(6, 14, 26, 0.5); }