/*
Theme Name: Divi Child
Template: Divi
*/

/* ============================================================
   WHITE ARC - CUSTOM CSS
   whitearc.co.uk
   ============================================================

   CONTENTS
   ============================================================

   1.  HEADER - Background States
   2.  HEADER - Nav Link Colours
   3.  HEADER - Mobile
   4.  HEADER - Get in Touch CTA
   5.  HEADER - Layout Alignment
   6.  HEADER - Height / Padding
   7.  FOOTER
   8.  FOOTER - Row Layout
   9.  HOME HERO - Interactive Effect
   9b. HERO - TEXT & BUTTONS (shared)
   10. HOME - SERVICES GRID
   11. HOME - PORTFOLIO
   12. CONTACT
   14. ABOUT - STORY & BELIEFS
   15. PROCESS - HOW IT WORKS
   16. PORTFOLIO - PROJECT GRID
   17. CASE STUDY - HERO
   17b. CASE STUDY - SHARED (eyebrow + section title)
   17c. CASE STUDY - BLEND MODE FIX
   18. CASE STUDY - OVERVIEW
   19. CASE STUDY - CHALLENGE
   20. CASE STUDY - WHAT I BUILT
   21. CASE STUDY - BY THE NUMBERS
   22. PRIVACY / LEGAL PAGE

   ============================================================ */

/* ============================
   1. HEADER - Background States
   ============================ */

.et-l--header .et_pb_section {
  background: transparent !important;
  background-color: transparent !important;
}

/* Children stay transparent in every state */
.et-l--header .et_pb_section .et_pb_row,
.et-l--header .et_pb_section .et_pb_module,
.et-l--header .et_pb_section .et_pb_menu,
.et-l--header .et_pb_section .et_pb_menu_inner_container,
.et-l--header .et_pb_section .et_pb_menu__wrap,
.et-l--header .et_pb_section .et_pb_menu__menu,
.et-l--header .et_pb_section .et_pb_menu__logo-wrap {
  background: transparent !important;
  background-color: transparent !important;
}

/* Overlay the header on pages with a dark hero (.scroll-header present) */
.et-l--header .et_pb_section.header-overlay {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100% !important;
  z-index: 999;
}
body.admin-bar .et-l--header .et_pb_section.header-overlay {
  top: 32px;
}

/* ============================
   2. HEADER - Nav Link Colours
   ============================ */

.et-l--header .et_pb_menu .et-menu > li > a {
  transition: color 0.35s ease, opacity 0.35s ease !important;
}

.et-l--header .et_pb_section:not(.header-scrolled) .et_pb_menu .et-menu > li > a {
  color: #ffffff !important;
}
.et-l--header .et_pb_section:not(.header-scrolled) .et_pb_menu .et-menu > li > a:hover {
  color: rgba(255, 255, 255, 0.7) !important;
}

.et-l--header .et_pb_section.header-scrolled .et_pb_menu .et-menu > li > a {
  color: #0d1b2a !important;
}
.et-l--header .et_pb_section.header-scrolled .et_pb_menu .et-menu > li > a:hover {
  color: #0d1b2a !important;
  opacity: 0.6;
}

/* ============================
   3. HEADER - Mobile (solid white, fixed, CSS only)
   ============================ */
@media (max-width: 980px) {
  .et-l--header .et_pb_section {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    z-index: 999;
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  }
  /* Collapse to hamburger */
  .et-l--header .et_pb_menu .et-menu-nav > ul:not(.et_mobile_menu),
  .et-l--header .et_pb_menu .et_pb_menu__menu {
    display: none !important;
  }
  .et-l--header .et_pb_menu .et_mobile_nav_menu {
    display: block !important;
  }
  /* Dark hamburger icon on white */
  .et-l--header .et_pb_menu .mobile_menu_bar:before {
    color: #0d1b2a !important;
  }
  /* Dropdown panel */
  .et-l--header .et_pb_menu .et_mobile_menu {
    background: #ffffff !important;
    border-color: #e8edf3 !important;
  }
  .et-l--header .et_pb_menu .et_mobile_menu li a {
    color: #0d1b2a !important;
  }
  /* Navy logo, sized - taller so the stacked wordmark isn't clipped */
  .et-l--header .et_pb_menu__logo-wrap {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 120px !important;
    flex: 0 0 auto !important;
  }
  .et-l--header .et_pb_menu__logo-wrap a,
  .et-l--header .et_pb_menu__logo-wrap img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 52px !important;
    height: auto !important;
    width: auto !important;
  }
  .et-l--header .et_pb_menu__logo-wrap img {
    content: url('https://www.whitearc.co.uk/wp-content/uploads/2026/06/White-Arc-Dark-Logo.jpg') !important;
  }
  /* Push content below the fixed header */
  .et-l--body {
    padding-top: 76px;
  }
  body.admin-bar .et-l--body {
    padding-top: 122px;
  }
}

/* ============================
   4. HEADER - Get in Touch CTA
   ============================ */
.et-l--header .et_pb_menu .et-menu > li.nav-cta {
  display: inline-flex !important;
  align-items: center !important;
}
.et-l--header .et_pb_menu .et-menu > li.nav-cta > a {
  border: 2px solid #ffffff !important;
  border-radius: 50px !important;
  padding: 10px 26px !important;
  line-height: 1 !important;
  transition: all 0.3s ease !important;
}
/* Transparent state: white pill */
.et-l--header .et_pb_section:not(.header-scrolled) .et_pb_menu .et-menu > li.nav-cta > a {
  background: #ffffff !important;
  color: #0d1b2a !important;
  border-color: #ffffff !important;
}
/* Scrolled state: dark pill on white header */
.et-l--header .et_pb_section.header-scrolled .et_pb_menu .et-menu > li.nav-cta > a {
  background: #0d1b2a !important;
  color: #ffffff !important;
  border-color: #0d1b2a !important;
}
.et-l--header .et_pb_menu .et-menu > li.nav-cta > a:hover {
  opacity: 0.85 !important;
}

/* ============================
   5. HEADER - Layout Alignment
   ============================ */
/* Logo left, menu right, all on one row */
.et-l--header .et_pb_menu_inner_container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}
/* Force the menu module to full width */
.et-l--header .et_pb_menu.et_pb_module {
  width: 100% !important;
  max-width: 100% !important;
}
.et-l--header .et_pb_menu__menu {
  flex-grow: 1 !important;
  display: flex !important;
  justify-content: flex-end !important;
}
.et-l--header .et_pb_menu__menu > nav {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
}
/* Push items to the right, keep them on one line */
.et-l--header .et_pb_menu .et-menu {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
}
/* Ensure logo stays clickable */
.et-l--header .et_pb_menu__logo-wrap,
.et-l--header .et_pb_menu__logo-wrap a {
  pointer-events: auto !important;
  position: relative;
  z-index: 100;
  cursor: pointer;
}

/* ============================
   6. HEADER - Height / Padding
   ============================ */
.et-l--header .et_pb_section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}
.et-l--header .et_pb_row {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
  width: 90% !important;
  max-width: 1240px !important;
}
.et-l--header .et_pb_menu {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}
/* Flatten Divi's built-in menu link padding - this is the main height source */
.et-l--header .et_pb_menu__wrap,
.et-l--header .et_pb_menu__menu,
.et-l--header .et_pb_menu .et-menu-nav,
.et-l--header .et_pb_menu .et-menu {
  min-height: 0 !important;
  height: auto !important;
}
.et-l--header .et_pb_menu .et-menu > li {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.et-l--header .et_pb_menu .et-menu > li > a {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  line-height: 1.4 !important;
}
.et-l--header .et_pb_menu__logo-wrap {
  margin: 0 !important;
  padding: 0 !important;
}
.et-l--header .et_pb_menu__logo-wrap img {
  max-height: 38px !important;
  width: auto !important;
  display: block !important;
}

/* ============================
   7. FOOTER
   ============================ */

/* Column 1 - Brand */
.footer-brand__logo {
  max-width: 140px;
  height: auto;
  margin-bottom: 20px;
}
.footer-brand__tagline {
  color: #8a93a8 !important;
  font-size: 15px;
  line-height: 1.6;
  max-width: 280px;
}

/* Column 2 - Sitemap links */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-links__heading {
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.footer-links__link {
  color: #8a93a8 !important;
  font-size: 16px;
  text-decoration: none !important;
  transition: color 0.3s ease;
}
.footer-links__link:hover {
  color: #ffffff !important;
}

/* Column 3 - Connect / socials */
.footer-connect__socials {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}
.footer-connect__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #8a93a8 !important;
  transition: all 0.3s ease;
}
.footer-connect__social-link:hover {
  color: #ffffff !important;
  border-color: #ffffff;
  transform: translateY(-2px);
}
/* Footer bottom bar */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  position: relative;
}
.footer-bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
}
.footer-bottom__copyright {
  color: #8a93a8 !important;
  font-size: 14px;
  margin: 0;
}
.footer-bottom__links {
  display: flex;
  gap: 32px;
}
.footer-bottom__link {
  color: #8a93a8 !important;
  font-size: 14px;
  text-decoration: none !important;
  transition: color 0.3s ease;
}
.footer-bottom__link:hover {
  color: #ffffff !important;
}

/* Footer bottom - Tablet & Mobile */
@media (max-width: 767px) {
  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .footer-bottom__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
}

/* ============================
   8. FOOTER - Row Layout
   (Brand + Sitemap, 2 columns)
   ============================ */

.et_pb_row.footer-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
}
.et_pb_row.footer-row .et_pb_column:first-child {
  width: 30% !important;
  flex-shrink: 0 !important;
}
.et_pb_row.footer-row .et_pb_column:not(:first-child) {
  width: auto !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Footer links spacing */
.footer-links {
  margin-bottom: 0;
}
.footer-links__heading {
  margin-top: 0;
}

/* TABLET & MOBILE: stack both columns full width, left aligned */
@media (max-width: 980px) {
  .et_pb_row.footer-row {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  .et_pb_row.footer-row .et_pb_column,
  .et_pb_row.footer-row .et_pb_column:first-child,
  .et_pb_row.footer-row .et_pb_column:not(:first-child) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 36px 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    text-align: left !important;
  }
  /* Kill any inner padding on the code module + links wrapper */
  .et_pb_row.footer-row .et_pb_column .et_pb_code,
  .et_pb_row.footer-row .et_pb_column .et_pb_code_inner,
  .et_pb_row.footer-row .footer-links {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  .footer-brand {
    margin-bottom: 0 !important;
  }
  .footer-links {
    margin-bottom: 0 !important;
  }
}

/* ==========================================
   9. HOME HERO - INTERACTIVE EFFECT
   ========================================== */

.wa-hero {
  position: relative;
  overflow: hidden;
}

/* Static base grid */
.wa-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 1;
  pointer-events: none;
}

/* Ambient blue glows */
.wa-hero-glow-left,
.wa-hero-glow-right {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.wa-hero-glow-left {
  width: 600px;
  height: 600px;
  left: -200px;
  top: 10%;
  background: rgba(37, 99, 160, 0.35);
}
.wa-hero-glow-right {
  width: 700px;
  height: 700px;
  right: -250px;
  bottom: -10%;
  background: rgba(37, 99, 160, 0.3);
}

/* Brighter grid revealed around the cursor */
.wa-hero-grid-spotlight {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.35) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle 260px at var(--wa-mx, 50%) var(--wa-my, 50%), rgba(0, 0, 0, 0.9), transparent 70%);
  mask-image: radial-gradient(circle 260px at var(--wa-mx, 50%) var(--wa-my, 50%), rgba(0, 0, 0, 0.9), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.wa-hero.wa-hero-active .wa-hero-grid-spotlight {
  opacity: 1;
}

/* Soft cyan halo following the cursor */
.wa-hero-cursor-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle 320px at var(--wa-mx, 50%) var(--wa-my, 50%), rgba(56, 189, 248, 0.12), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.wa-hero.wa-hero-active .wa-hero-cursor-glow {
  opacity: 1;
}

/* Particle canvas */
.wa-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* Keep Divi content above the effect layers */
.wa-hero .et_pb_row {
  position: relative;
  z-index: 6;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .wa-hero-canvas,
  .wa-hero-grid-spotlight,
  .wa-hero-cursor-glow {
    opacity: 0;
  }
}

/* Per-page hero background variants */
.wa-hero-services {
  background-color: #15132e !important;
}

/* Pink accent variant - Portfolio hero */
.wa-hero-portfolio .wa-hero-badge::before {
  background: #ec4899;
  box-shadow: 0 0 10px #ec4899;
}
.wa-hero-portfolio .wa-btn-primary {
  background: #ec4899;
  color: #ffffff !important;
}
.wa-hero-portfolio .wa-btn-primary:hover {
  box-shadow: 0 8px 30px rgba(236, 72, 153, 0.5);
}

/* Cursor-driven overlays: desktop only. Force off on mobile/touch
   so they can't wash over the hero when there's no pointer. */
@media (max-width: 980px) {
  .wa-hero-grid-spotlight,
  .wa-hero-cursor-glow {
    display: none !important;
  }
}

/* ==========================================
   9b. HERO - TEXT & BUTTONS (shared)
   ========================================== */

.wa-hero-text {
  position: relative;
  z-index: 6;
  max-width: 1240px;
  margin: 0 auto;
  padding: 60px 0 90px;
}

.wa-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #cbd5e1;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 32px;
  background: rgba(255, 255, 255, 0.03);
}
.wa-hero-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
}

.wa-hero-text h1 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  padding: 0;
}
.wa-hero-text h1 .wa-accent {
  background: linear-gradient(120deg, #38bdf8, #a5f3fc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.wa-hero-sub {
  color: #94a3b8;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 400;
  line-height: 1.6;
  max-width: 560px;
  margin-bottom: 40px;
}

.wa-hero-buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.wa-btn-primary {
  background: #38bdf8;
  color: #0a1220 !important;
}
.wa-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(56, 189, 248, 0.45);
}
.wa-btn-secondary {
  background: transparent;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.wa-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}
.wa-btn .wa-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.wa-btn-primary:hover .wa-arrow {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .wa-hero-text {
    padding: 40px 0 80px;
  }
}

/* ==========================================
   10. HOME - SERVICES GRID
   ========================================== */

.wa-services {
  background-color: #ffffff;
  background-image: radial-gradient(rgba(13, 27, 42, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

.wa-services-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.wa-services-eyebrow {
  color: #38bdf8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.wa-services-title {
  color: #0d1b2a;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  padding: 0;
}

.wa-services-sub {
  color: #5b6b7f;
  font-size: 18px;
  line-height: 1.6;
  max-width: 600px;
  margin-bottom: 56px;
}

.wa-services-grid {
  display: grid;
  grid-template-columns: calc(33.333% - 19px) calc(33.333% - 19px) calc(33.333% - 19px);
  gap: 28px;
}

.wa-service-card {
  background: #ffffff;
  border: 1px solid #e8edf3;
  border-radius: 20px;
  padding: 40px 36px;
  min-width: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.wa-service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 16px 40px rgba(13, 27, 42, 0.08);
}
.wa-service-card:hover .wa-service-icon {
  background: #38bdf8;
  color: #0d1b2a;
}

.wa-service-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #0d1b2a;
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  transition: background 0.25s ease, color 0.25s ease;
}
.wa-service-icon svg {
  width: 26px;
  height: 26px;
}

.wa-service-card h3 {
  color: #0d1b2a;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 14px;
  padding: 0;
}

.wa-service-card p {
  color: #5b6b7f;
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  padding: 0;
}

/* Tablet */
@media (max-width: 980px) {
  .wa-services-grid {
    grid-template-columns: calc(50% - 11px) calc(50% - 11px);
    gap: 22px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .wa-services-grid {
    grid-template-columns: 100%;
  }
  .wa-services-sub {
    margin-bottom: 40px;
  }
  .wa-service-card {
    padding: 32px 28px;
  }
}

/* ==========================================
   11. HOME - PORTFOLIO
   ========================================== */

.wa-portfolio {
  background-color: #f4f6f9;
}

.wa-portfolio-inner {
  max-width: 1240px;
  margin: 0 auto;
}

/* Section header: title left, link right */
.wa-portfolio-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
}

.wa-portfolio-eyebrow {
  color: #38bdf8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.wa-portfolio-title {
  color: #0d1b2a;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  padding: 0;
}

.wa-portfolio-all {
  color: #0d1b2a !important;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  padding-bottom: 6px;
  transition: color 0.25s ease;
}
.wa-portfolio-all:hover {
  color: #38bdf8 !important;
}
.wa-portfolio-all .wa-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.wa-portfolio-all:hover .wa-arrow {
  transform: translate(2px, -2px);
}

/* Layout: left column (Livco + banner) and marketing card, equal heights */
.wa-portfolio-grid {
  display: flex;
  align-items: stretch;
  gap: 28px;
}

.wa-portfolio-col-left {
  width: calc(62% - 14px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.wa-work-marketing {
  width: calc(38% - 14px);
  flex-shrink: 0;
}

/* Cards */
.wa-work-card {
  position: relative;
  display: block;
  background: #ffffff;
  border-radius: 24px;
  padding: 36px 36px 32px;
  min-width: 0;
  overflow: hidden;
  text-decoration: none !important;
  box-shadow: 0 2px 12px rgba(13, 27, 42, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wa-work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(13, 27, 42, 0.1);
}

/* Corner glow - hidden at rest, fades in on hover */
.wa-work-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.wa-work-card:hover .wa-work-glow {
  opacity: 1;
}
.wa-work-livco .wa-work-glow {
  background: radial-gradient(ellipse at top right, rgba(96, 165, 250, 0.25), transparent 65%);
}
.wa-work-marketing .wa-work-glow {
  background: radial-gradient(ellipse at bottom right, rgba(251, 146, 60, 0.22), transparent 65%);
}

/* Card content sits above the glow */
.wa-work-top,
.wa-work-card h3,
.wa-work-card p,
.wa-work-tags,
.wa-work-list,
.wa-work-link {
  position: relative;
  z-index: 2;
}

/* Top row: tile left, eyebrow right */
.wa-work-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}

.wa-work-tile {
  width: 72px;
  height: 72px;
  border-radius: 18px;
}
.wa-tile-blue {
  background: linear-gradient(135deg, #4f6ef7, #38bdf8);
  box-shadow: 0 10px 24px rgba(79, 110, 247, 0.3);
}
.wa-tile-orange {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.3);
}

.wa-work-eyebrow {
  color: #38bdf8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wa-work-card h3 {
  color: #0d1b2a;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 14px;
  padding: 0;
}

.wa-work-card p {
  color: #5b6b7f;
  font-size: 17px;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 0 24px;
  padding: 0;
}

/* Tags (Livco card) */
.wa-work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.wa-work-tags span {
  background: #f1f4f8;
  color: #0d1b2a;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 999px;
}

/* Bullet list (marketing card) */
.wa-work-list {
  list-style: none !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
}
.wa-work-list li {
  list-style: none !important;
  color: #5b6b7f;
  font-size: 16px;
  line-height: 1.5;
  padding-left: 20px !important;
  position: relative;
  margin-bottom: 10px;
}
.wa-work-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
}
.wa-work-list li::marker {
  content: '';
}

/* Action link - dark at rest, cyan on card hover */
.wa-work-link {
  color: #0d1b2a;
  font-size: 17px;
  font-weight: 600;
  transition: color 0.25s ease;
}
.wa-work-card:hover .wa-work-link {
  color: #38bdf8;
}
.wa-work-link .wa-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.wa-work-card:hover .wa-work-link .wa-arrow {
  transform: translateX(4px);
}

/* Coming soon banner - grows to fill the gap under the Livco card */
.wa-coming-soon {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 28px;
  background: #0a1220;
  background-image:
    radial-gradient(ellipse at bottom left, rgba(37, 99, 160, 0.3), transparent 55%),
    linear-gradient(rgba(56, 189, 248, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.04) 1px, transparent 1px);
  background-size: auto, 60px 60px, 60px 60px;
  border-radius: 24px;
  padding: 32px 36px;
}

.wa-coming-soon-icon {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa-pulse-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 12px #38bdf8;
  animation: wa-pulse 2.2s ease-in-out infinite;
}
@keyframes wa-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

.wa-coming-soon-text {
  flex-grow: 1;
}
.wa-coming-soon-eyebrow {
  color: #38bdf8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.wa-coming-soon h3 {
  color: #ffffff;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  padding: 0;
}
.wa-coming-soon p {
  color: #8a93a8;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Tablet & Mobile */
@media (max-width: 980px) {
  .wa-portfolio-grid {
    flex-direction: column;
  }
  .wa-portfolio-col-left,
  .wa-work-marketing {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .wa-portfolio-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
  }
  .wa-work-card {
    padding: 30px 26px 26px;
  }
  .wa-work-tile {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }
  .wa-coming-soon {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 24px;
  }
}

/* ==========================================
   12. CONTACT
   ========================================== */
.wa-contact {
  background-color: #ffffff;
}
.wa-contact-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: flex-start;
}
.wa-contact-left {
  flex: 1 1 58%;
  min-width: 0;
}
.wa-contact-right {
  flex: 1 1 42%;
  min-width: 0;
}
/* Left column heading */
.wa-contact-eyebrow {
  color: #38bdf8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.wa-contact-title {
  color: #0d1b2a;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  padding: 0;
}
.wa-contact-sub {
  color: #5b6b7f;
  font-size: 18px;
  line-height: 1.6;
  max-width: 460px;
  margin: 0 0 44px;
}
/* Form */
.wa-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.wa-field-row {
  display: flex;
  gap: 24px;
}
.wa-field {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.wa-field-full {
  width: 100%;
}
.wa-field label {
  color: #0d1b2a;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}
.wa-contact .wa-field input[type="text"],
.wa-contact .wa-field input[type="email"],
.wa-contact .wa-field input[type="tel"],
.wa-contact .wa-field select,
.wa-contact .wa-field textarea {
  width: 100% !important;
  border: 1px solid #dce3ec !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 16px !important;
  font-family: inherit !important;
  color: #0d1b2a !important;
  background: #ffffff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
}
.wa-contact .wa-field input:focus,
.wa-contact .wa-field select:focus,
.wa-contact .wa-field textarea:focus {
  outline: none !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15) !important;
}
.wa-contact .wa-field textarea {
  resize: vertical !important;
  min-height: 120px !important;
}
.wa-contact .wa-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235b6b7f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px !important;
}

/* ---- Service tiles (select multiple) ---- */
.wa-field .wa-field-hint {
  font-weight: 400;
  font-size: 13px;
  color: #5b6b7f;
}
.wa-field .wa-tile-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}
/* Each tile (the label) - two per row, equal height */
.wa-field .wa-tile {
  display: flex;
  box-sizing: border-box;
  width: calc(50% - 7px);
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}
/* Hide the native checkbox but keep it focusable */
.wa-field .wa-tile input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
/* The visible tile - stretches to fill the row height */
.wa-field .wa-tile-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  padding: 20px 22px;
  border: 1px solid #dce3ec;
  border-radius: 14px;
  background: #ffffff;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.wa-field .wa-tile-ico {
  display: flex;
  align-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  color: #38bdf8;
}
.wa-field .wa-tile-ico svg {
  width: 26px;
  height: 26px;
}
.wa-field .wa-tile-title {
  color: #0d1b2a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
}
.wa-field .wa-tile-desc {
  color: #5b6b7f;
  font-size: 14px;
  line-height: 1.45;
}
/* Hover */
.wa-field .wa-tile:hover .wa-tile-inner {
  border-color: #38bdf8;
}
/* Keyboard focus */
.wa-field .wa-tile input[type="checkbox"]:focus-visible + .wa-tile-inner {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}
/* Selected state */
.wa-field .wa-tile input[type="checkbox"]:checked + .wa-tile-inner {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.06);
  box-shadow: inset 0 0 0 1px #38bdf8;
}
/* Tick badge top-right when selected */
.wa-field .wa-tile input[type="checkbox"]:checked + .wa-tile-inner::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 22px;
  width: 7px;
  height: 12px;
  border: solid #38bdf8;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Submit */
.wa-form-submit {
  align-self: flex-start;
  background: #0d1b2a;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 16px 40px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.wa-form-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(13, 27, 42, 0.2);
}
.wa-form-submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}
/* Captcha + submit on one row */
.wa-form-foot {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
}
.wa-form-foot .wa-captcha-field {
  flex: 0 0 auto;
}
.wa-form-foot .wa-form-submit {
  align-self: flex-end;
  margin: 0;
}
/* Form message */
.wa-form-msg {
  font-size: 15px;
  line-height: 1.5;
  display: none;
}
.wa-form-msg.error {
  display: block;
  color: #dc2626;
}
.wa-form-msg.success {
  display: block;
  color: #16a34a;
}
/* Right column - dark contact card */
.wa-contact-card {
  position: relative;
  height: auto;
  align-self: flex-start;
  background: #0d1b2a;
  background-image:
    radial-gradient(ellipse at top right, rgba(56, 189, 248, 0.4), transparent 55%),
    linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);
  background-size: auto, 50px 50px, 50px 50px;
  border-radius: 24px;
  padding: 44px 40px;
  overflow: hidden;
}
.wa-contact-card h3 {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
  padding: 0;
}
.wa-contact-card-sub {
  color: #8a93a8;
  font-size: 16px;
  margin: 0 0 32px;
}
.wa-contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #ffffff !important;
  font-size: 16px;
  text-decoration: none !important;
  margin-bottom: 22px;
  transition: color 0.2s ease;
}
a.wa-contact-item:hover {
  color: #38bdf8 !important;
}
.wa-contact-ico {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa-contact-ico svg {
  width: 20px;
  height: 20px;
}
.wa-contact-response {
  margin-top: 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wa-contact-response strong {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}
.wa-contact-response span {
  color: #8a93a8;
  font-size: 15px;
}
/* Tablet & Mobile */
@media (max-width: 980px) {
  .wa-contact-inner {
    flex-direction: column;
    gap: 40px;
  }
  .wa-contact-left,
  .wa-contact-right {
    flex: 1 1 100%;
  }
}
@media (max-width: 600px) {
  .wa-field-row {
    flex-direction: column;
    gap: 28px;
  }
  .wa-contact-card {
    padding: 36px 28px;
  }
  .wa-field .wa-tile {
    width: 100%;
  }
}

/* ==========================================
   14. ABOUT - STORY & BELIEFS
   ========================================== */

.wa-about-story {
  background-color: #ffffff;
}

.wa-about-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.wa-about-story-col {
  flex: 1 1 50%;
  min-width: 0;
}
.wa-about-believe-col {
  flex: 1 1 50%;
  min-width: 0;
}

.wa-about-eyebrow {
  color: #38bdf8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.wa-about-heading {
  color: #0d1b2a;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  padding: 0;
}
.wa-about-heading .wa-accent-dark {
  color: #38bdf8;
}

.wa-about-body p {
  color: #5b6b7f;
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 20px;
  padding: 0;
}
.wa-about-body p:last-child {
  margin-bottom: 0;
}

/* Right column - soft blue card with shadow */
.wa-about-believe-card {
  background: linear-gradient(160deg, #f4f9ff, #eef4fb);
  border: 1px solid #e3ecf7;
  border-radius: 24px;
  padding: 44px 40px;
  box-shadow: 0 20px 50px rgba(56, 130, 200, 0.12);
}

.wa-believe-item {
  display: flex;
  gap: 18px;
  margin-bottom: 28px;
}
.wa-believe-ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: #38bdf8;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.wa-believe-ico svg {
  width: 26px;
  height: 26px;
}
.wa-believe-text h3 {
  color: #0d1b2a;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  padding: 0;
}
.wa-believe-text p {
  color: #5b6b7f;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* Stats row inside card */
.wa-about-stats {
  display: flex;
  gap: 32px;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid #e3ecf7;
}
.wa-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wa-stat-num {
  color: #0d1b2a;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.wa-stat-label {
  color: #8a93a8;
  font-size: 13px;
  line-height: 1.3;
}

/* Tablet & Mobile */
@media (max-width: 980px) {
  .wa-about-inner {
    flex-direction: column;
    gap: 40px;
  }
  .wa-about-story-col,
  .wa-about-believe-col {
    flex: 1 1 100%;
  }
}
@media (max-width: 600px) {
  .wa-about-believe-card {
    padding: 32px 26px;
  }
  .wa-about-stats {
    gap: 20px;
  }
  .wa-stat-num {
    font-size: 24px;
  }
}

/* ==========================================
   15. PROCESS - HOW IT WORKS
   ========================================== */
.wa-process {
  background-color: #0a1f3d;
  position: relative;
  overflow: hidden;
}
.wa-process::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.wa-process-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
}
.wa-process-eyebrow {
  color: #38bdf8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.wa-process-title {
  color: #ffffff;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  padding: 0;
}
.wa-process-sub {
  color: #b8c4d4;
  font-size: 18px;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 0 64px;
}
/* Timeline */
.wa-process-timeline {
  position: relative;
}
/* The connecting line, behind the number badges */
.wa-process-line {
  position: absolute;
  top: 34px;
  left: 34px;
  right: 34px;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
}
.wa-process-line-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #38bdf8, #a5f3fc);
  transition: width 1.4s ease;
}
/* Desktop fill trigger (replaces the old inline width from JS) */
.wa-process-timeline.is-animated .wa-process-line-fill {
  width: 100%;
}
.wa-process-steps {
  position: relative;
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
}
.wa-process-step {
  padding-right: 28px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.wa-process-step.wa-process-step-active {
  opacity: 1;
  transform: translateY(0);
}
.wa-process-num {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: #16294a;
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}
.wa-process-step h3 {
  color: #ffffff;
  font-size: 21px;
  font-weight: 700;
  margin: 0 0 12px;
  padding: 0;
}
.wa-process-step p {
  color: #b8c4d4;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}
/* Tablet & Mobile - stacked vertical timeline, line animates downward */
@media (max-width: 900px) {
  .wa-process-steps {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .wa-process-step {
    position: relative;
    padding-right: 0;
    padding-left: 96px;
    min-height: 68px;
  }
  .wa-process-num {
    position: absolute;
    left: 0;
    top: 0;
    margin-bottom: 0;
  }
  .wa-process-step h3 {
    margin-top: 6px;
  }
  /* line runs vertically through the badge centres */
  .wa-process-line {
    display: block;
    top: 34px;
    bottom: 34px;
    left: 33px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .wa-process-line-fill {
    width: 100%;
    height: 0;
    background: linear-gradient(180deg, #38bdf8, #a5f3fc);
    transition: height 1.4s ease;
  }
  .wa-process-timeline.is-animated .wa-process-line-fill {
    height: 100%;
  }
}

/* ==========================================
   16. PORTFOLIO - PROJECT GRID
   ========================================== */
.wa-pf {
  background-color: #ffffff;
}
.wa-pf-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.wa-pf-grid {
  display: grid;
  grid-template-columns: calc(33.333% - 26.67px) calc(33.333% - 26.67px) calc(33.333% - 26.67px);
  gap: 40px;
}

/* Card - bordered, shadowed, no top/side padding so image runs full-bleed */
.wa-pf-card {
  display: block;
  background: #ffffff;
  border: 1px solid #e8edf3;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none !important;
  box-shadow: 0 2px 12px rgba(13, 27, 42, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.wa-pf-card:hover {
  transform: translateY(-6px);
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 24px 50px rgba(13, 27, 42, 0.14);
}

/* Media / image - full width, flush to top corners */
.wa-pf-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.wa-pf-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.wa-pf-card:hover .wa-pf-media img {
  transform: scale(1.06);
}
/* Subtle dark wash that lifts on hover so the badge stays legible */
.wa-pf-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 18, 32, 0.25), transparent 45%);
  opacity: 0.7;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.wa-pf-card:hover .wa-pf-media::after {
  opacity: 1;
}

/* Badge pill - frosted white, bottom-left */
.wa-pf-badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  color: #0d1b2a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Body - padded; image above is flush */
.wa-pf-body {
  padding: 32px 32px 36px;
}
.wa-pf-body h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0d1b2a;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  padding: 0;
  transition: color 0.25s ease;
}
.wa-pf-card:hover .wa-pf-body h3 {
  color: #38bdf8;
}
.wa-pf-body h3 .wa-arrow {
  display: inline-block;
  color: #38bdf8;
  font-weight: 700;
  transition: transform 0.25s ease;
}
.wa-pf-card:hover .wa-pf-body h3 .wa-arrow {
  transform: translate(3px, -3px);
}
.wa-pf-body p {
  color: #5b6b7f;
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 24px;
  padding: 0;
}

/* Tags - plain spaced text, cyan */
.wa-pf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.wa-pf-tags span {
  color: #38bdf8;
  font-size: 15px;
  font-weight: 500;
}

/* Coming soon card - not clickable, no lift, no title arrow */
.wa-pf-card-soon {
  cursor: default;
}
.wa-pf-card-soon:hover {
  transform: none;
  border-color: #e8edf3;
  box-shadow: 0 2px 12px rgba(13, 27, 42, 0.04);
}
.wa-pf-card-soon:hover .wa-pf-body h3 {
  color: #0d1b2a;
}
.wa-pf-card-soon:hover .wa-pf-media img {
  transform: scale(1.03);
}

/* Tablet & Mobile */
@media (max-width: 980px) {
  .wa-pf-grid {
    grid-template-columns: 100%;
    gap: 48px;
    max-width: 560px;
    margin: 0 auto;
  }
}

/* ==========================================
   17. CASE STUDY - HERO
   ========================================== */
.wa-hero-case {
  background: transparent;
  padding-bottom: 40px;
}

/* Text block - centred column, left-aligned content */
.wa-case-text {
  position: relative;
  z-index: 6;
  max-width: 1240px;
  margin: 0 auto;
  padding: 60px 0 0;
  text-align: left;
}

/* Back link */
.wa-case-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #cbd5e1 !important;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none !important;
  margin-bottom: 32px;
  transition: color 0.25s ease;
}
.wa-case-back:hover {
  color: #ffffff !important;
}
.wa-case-back-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.wa-case-back:hover .wa-case-back-arrow {
  transform: translateX(-4px);
}

/* Eyebrow */
.wa-case-eyebrow {
  color: #38bdf8;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Headline */
.wa-case-text h1 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.12;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  padding: 0;
  max-width: 720px;
}

/* Sub */
.wa-case-sub {
  color: #b8c4d4;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 0 48px;
}

/* Meta row */
.wa-case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding-top: 4px;
}
.wa-case-meta-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  padding-left: 22px;
}
.wa-case-meta-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: rgba(56, 189, 248, 0.5);
}
.wa-case-meta-label {
  color: #8a93a8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wa-case-meta-value {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

/* Feature image */
.wa-case-feature {
  position: relative;
  z-index: 6;
  max-width: 920px;
  margin: 48px auto 0;
}
.wa-case-feature img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

/* Tablet & Mobile */
@media (max-width: 980px) {
  .wa-case-meta {
    gap: 32px;
  }
}
@media (max-width: 600px) {
  .wa-case-text {
    padding-top: 40px;
  }
  .wa-case-meta {
    flex-direction: column;
    gap: 24px;
  }
  .wa-case-feature {
    margin-top: 40px;
  }
  .wa-case-feature img {
    border-radius: 16px;
  }
}

/* ===================================
   17b. CASE STUDY - SHARED
        (eyebrow + section title)
   =================================== */

/* Palette  -  accent blue #38A8DE | heading navy #15233B | body #4B5563
   (to match your White Arc brand blue instead, find/replace #38A8DE with #7DB9F0) */

.wa-cs-overview .wa-cs-eyebrow,
.wa-cs-challenge .wa-cs-eyebrow,
.wa-cs-built .wa-cs-eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #38A8DE;
  margin: 0 0 18px;
}

.wa-cs-challenge .wa-cs-section-title,
.wa-cs-built .wa-cs-section-title {
  font-size: 44px;
  line-height: 1.12;
  font-weight: 700;
  color: #15233B;
  margin: 0 0 48px;
  max-width: 900px;
}

@media (max-width: 980px) {
  .wa-cs-challenge .wa-cs-section-title,
  .wa-cs-built .wa-cs-section-title { font-size: 36px; margin-bottom: 36px; }
}
@media (max-width: 480px) {
  .wa-cs-overview .wa-cs-eyebrow,
  .wa-cs-challenge .wa-cs-eyebrow,
  .wa-cs-built .wa-cs-eyebrow { font-size: 12px; letter-spacing: 2px; margin-bottom: 14px; }
  .wa-cs-challenge .wa-cs-section-title,
  .wa-cs-built .wa-cs-section-title { font-size: 28px; margin-bottom: 28px; }
}

/* ===================================
   17c. CASE STUDY - BLEND MODE FIX
        Kills the passthrough blend wash
        on the hero column
   =================================== */
.et_pb_css_mix_blend_mode_passthrough {
  mix-blend-mode: normal !important;
}

/* ===================================
   18. CASE STUDY - OVERVIEW
   =================================== */

.wa-cs-overview {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

.wa-cs-overview .wa-cs-ov-left  { flex: 0 0 42%; }
.wa-cs-overview .wa-cs-ov-right { flex: 1; }

.wa-cs-overview .wa-cs-ov-title {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  color: #15233B;
  margin: 0;
}

.wa-cs-overview .wa-cs-ov-right p {
  font-size: 19px;
  line-height: 1.7;
  color: #4B5563;
  margin: 0 0 26px;
}
.wa-cs-overview .wa-cs-ov-right p:last-child { margin-bottom: 0; }

@media (max-width: 980px) {
  .wa-cs-overview { flex-direction: column; gap: 28px; }
  .wa-cs-overview .wa-cs-ov-left,
  .wa-cs-overview .wa-cs-ov-right { flex: none; width: 100%; }
  .wa-cs-overview .wa-cs-ov-title { font-size: 34px; }
}
@media (max-width: 480px) {
  .wa-cs-overview .wa-cs-ov-title { font-size: 28px; }
  .wa-cs-overview .wa-cs-ov-right p { font-size: 17px; }
}


/* ===================================
   19. CASE STUDY - CHALLENGE
   =================================== */

.wa-cs-challenge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.wa-cs-challenge-item {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(50% - 12px);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #ECEFF3;
  border-radius: 16px;
  padding: 26px 28px;
  box-shadow: 0 10px 30px rgba(20, 35, 60, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.wa-cs-challenge-item:hover {
  transform: translateY(-4px);
  background: linear-gradient(160deg, #ffffff 0%, #EFF6FC 100%);
  box-shadow: 0 18px 40px rgba(20, 35, 60, 0.10);
}

.wa-cs-challenge-item p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 500;
  color: #2F3B4D;
}

.wa-cs-check {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #E3F1FB;
  color: #38A8DE;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.wa-cs-check svg { width: 15px; height: 15px; }

@media (max-width: 768px) {
  .wa-cs-challenge-grid { gap: 16px; }
  .wa-cs-challenge-item { flex-basis: 100%; }
}


/* ===================================
   20. CASE STUDY - WHAT I BUILT
   =================================== */

.wa-cs-built-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.wa-cs-built-card {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(25% - 18px);
  box-sizing: border-box;
  background: #F6F8FA;
  border: 1px solid #EEF1F5;
  border-radius: 18px;
  padding: 30px 26px 32px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.wa-cs-built-card:hover {
  transform: translateY(-4px);
  background: linear-gradient(160deg, #ffffff 0%, #EFF6FC 100%);
  box-shadow: 0 18px 40px rgba(20, 35, 60, 0.10);
}

.wa-cs-built-card .wa-cs-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #15233B;
  color: #38A8DE;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 24px;
}

.wa-cs-built-card h3 {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  color: #15233B;
  margin: 0 0 14px;
}

.wa-cs-built-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #5A6473;
  margin: 0;
}

@media (max-width: 980px) {
  .wa-cs-built-card { flex-basis: calc(50% - 12px); }
}
@media (max-width: 600px) {
  .wa-cs-built-card { flex-basis: 100%; }
}

/* ===================================
   21. CASE STUDY - BY THE NUMBERS
        (dark section, animated counts)
        Set the Divi section background
        to your dark navy in the builder.
   =================================== */

.wa-cs-stats .wa-cs-eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #38A8DE;
  margin: 0 0 18px;
}

.wa-cs-stats .wa-cs-stats-title {
  font-size: 44px;
  line-height: 1.12;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 64px;
}

.wa-cs-stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 40px;
}

.wa-cs-stats .wa-cs-stat {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(33.333% - 27px);
  box-sizing: border-box;
}

.wa-cs-stats .wa-cs-stat-num {
  font-size: 76px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 14px;
  color: #EAF4FB; /* fallback if gradient text unsupported */
  background: linear-gradient(180deg, #ffffff 0%, #BFE0F5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wa-cs-stats .wa-cs-stat-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8194A8;
}

/* Symbol stats (animated SVG icons) - sized to match the numbers */
.wa-cs-stats .wa-cs-stat-icon {
  display: flex;
  align-items: center;
  min-height: 76px;
  margin-bottom: 14px;
}
.wa-cs-stats .wa-cs-stat-icon--check svg { height: 76px; width: auto; }
.wa-cs-stats .wa-cs-stat-icon--inf svg   { height: 80px; width: auto; }

/* Tick: draws itself when the section scrolls into view, then stays */
.wa-cs-check-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.wa-cs-stats.is-visible .wa-cs-check-path {
  animation: wa-cs-draw 0.85s ease forwards;
  animation-delay: 0.25s;
}
@keyframes wa-cs-draw {
  to { stroke-dashoffset: 0; }
}

/* Infinity: starts grey, a white line draws around the loop once, then stops fully white */
.wa-cs-inf-trail {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 2px rgba(125, 185, 240, 0.55));
}
.wa-cs-stats.is-visible .wa-cs-inf-trail {
  animation: wa-cs-inf-draw 1.6s ease forwards;
  animation-delay: 0.35s;
}
@keyframes wa-cs-inf-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-cs-check-path,
  .wa-cs-inf-trail { stroke-dashoffset: 0; }
  .wa-cs-stats.is-visible .wa-cs-check-path,
  .wa-cs-stats.is-visible .wa-cs-inf-trail { animation: none; }
  .wa-cs-inf-trail { filter: none; }
}

@media (max-width: 980px) {
  .wa-cs-stats .wa-cs-stats-title { font-size: 36px; margin-bottom: 48px; }
  .wa-cs-stats .wa-cs-stat { flex-basis: calc(50% - 20px); }
  .wa-cs-stats .wa-cs-stat-num { font-size: 64px; }
  .wa-cs-stats .wa-cs-stat-icon { min-height: 64px; }
  .wa-cs-stats .wa-cs-stat-icon--check svg { height: 64px; }
  .wa-cs-stats .wa-cs-stat-icon--inf svg { height: 68px; }
}

@media (max-width: 600px) {
  .wa-cs-stats-grid { gap: 36px 24px; }
  .wa-cs-stats .wa-cs-stat { flex-basis: 100%; }
  .wa-cs-stats .wa-cs-stat-num { font-size: 56px; }
  .wa-cs-stats .wa-cs-stat-icon { min-height: 56px; }
  .wa-cs-stats .wa-cs-stat-icon--check svg { height: 56px; }
  .wa-cs-stats .wa-cs-stat-icon--inf svg { height: 60px; }
}

/* ============================
   22. PRIVACY / LEGAL PAGE
   (body only - hero reuses the global wa-hero-* classes)

   Accent colour is #5cb0ea throughout. To retune it, find and
   replace #5cb0ea with your exact .wa-accent value.
   ============================ */

/* 22.1 Base
   ---------------------------- */
.wa-legal {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #2a3a4a;
  line-height: 1.7;
  background: #ffffff;
}

.wa-legal *,
.wa-legal *::before,
.wa-legal *::after {
  box-sizing: border-box;
}

/* 22.2 Body
   ---------------------------- */
.wa-legal__body {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}

.wa-legal__intro {
  font-size: 19px;
  color: #0d1b2a;
  line-height: 1.7;
  margin: 0 0 8px;
}

.wa-legal__body section {
  margin-top: 48px;
}

/* 22.3 Headings + lists
   ---------------------------- */
.wa-legal__body h2 {
  position: relative;
  color: #0d1b2a;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  padding-left: 18px;
}

/* Accent marker on each heading */
.wa-legal__body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 2px;
  background: #5cb0ea;
}

.wa-legal__body p {
  margin: 0 0 16px;
}

.wa-legal__body ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.wa-legal__body li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
}

.wa-legal__body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid #5cb0ea;
}

.wa-legal__body strong {
  color: #0d1b2a;
  font-weight: 600;
}

/* 22.4 Links + contact card
   ---------------------------- */
.wa-legal__body a {
  color: #0d1b2a;
  text-decoration: none;
  border-bottom: 1px solid #5cb0ea;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.wa-legal__body a:hover {
  color: #5cb0ea;
  border-color: transparent;
}

.wa-legal__contact {
  margin-top: 56px;
  padding: 28px 30px;
  background: #f6f9fb;
  border-left: 4px solid #5cb0ea;
  border-radius: 4px;
}

.wa-legal__contact p {
  margin: 0;
}

.wa-legal__contact strong {
  display: block;
  margin-bottom: 4px;
}

/* 22.5 Responsive
   ---------------------------- */
@media (max-width: 768px) {
  .wa-legal__body {
    padding: 56px 22px 72px;
  }
  .wa-legal__intro {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .wa-legal__body {
    padding: 48px 18px 64px;
  }
  .wa-legal__body h2 {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-legal__body a {
    transition: none;
  }
}