/* =============================================
   COLOUR PALETTE
   ============================================= */
:root {
  /* Brief colours */
  --clr-navy:     #020216;
  --clr-white:    #ffffff;
  --clr-gray:     #4c4c50;

  /* Extended palette */
  --clr-electric: #5b5ef4;   /* vibrant indigo — CTAs, accents */
  --clr-glow:     #a5b4fc;   /* soft lavender — gradient text, highlights */
  --clr-surface:  #08081f;   /* elevated surface — cards, panels */
  --clr-surface-2:#0d0d2a;   /* deeper panel for drawer */
  --clr-border:   #1a1a3e;   /* subtle dividers */
  --clr-muted:    #424249;   /* secondary / placeholder text */
  --clr-muted2:   #b5b5c2;   /* tertiary text */
  --clr-whatsapp: #25d366;
  --clr-whatsapp-hover: #1ebe5d;

  /* Semantic aliases */
  --clr-bg:           var(--clr-navy);
  --clr-text:         var(--clr-white);
  --clr-text-muted:   var(--clr-muted);
  --clr-accent:       var(--clr-electric);
  --clr-accent-light: var(--clr-glow);

  /* Secondary accent gradient — used for <em> emphasis inside headings.
     Change here to restyle every emphasised heading word site-wide. */
  --accent-gradient:  linear-gradient(120deg, var(--clr-accent) 0%, var(--clr-accent-light) 65%);

  /* Section theme roles. A section's background + text colours are driven by
     these three tokens. `.section--dark` / `.section--light` redefine them, so
     one class re-themes a whole section. Defaults here = dark theme. */
  --section-bg:     var(--clr-bg);
  --section-fg:     var(--clr-white);   /* headings + primary text */
  --section-muted:  var(--clr-muted2);  /* subtext / secondary text */

  /* Page titles (H1) — change these to resize every page H1 site-wide.
     Kept a step larger than H2 so page titles always outrank section
     headings. (The oversized home hero has its own --hero-size below.) */
  --h1-size:      clamp(3rem, 6vw, 4.5rem);
  --h1-line:      1.03;
  --h1-tracking:  -0.04em;
  --h1-weight:    400;

  /* Section headings (H2) — change these to resize every H2 site-wide */
  --h2-size:      clamp(3rem, 5vw, 4.5rem);
  --h2-line:      1.02;
  --h2-tracking:  -0.04em;
  --h2-weight:    400;

  /* Home hero — deliberately oversized showcase title */
  --hero-size:    clamp(3.25rem, 9vw, 7.5rem);

  /* Layout */
  --nav-h:      72px;
  --radius:     8px;
  --radius-lg:  16px;
  --max-w:      1280px;
  --hero-top-gap: clamp(2rem, 4vw, 3rem);

  /* Transitions */
  --t:      0.3s ease;
  --t-slow: 0.6s ease;
  --t-menu: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 { font-weight: 400; }
h1{
  font-size: var(--h1-size);
  line-height: var(--h1-line);
}

h2{
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
}

/* Canonical PAGE TITLE (H1). Every interior-page hero title shares one size
   via the --h1-* tokens in :root. Colour is left to each page. The oversized
   home hero (.hero-title) opts out and uses --hero-size instead. */
.page-title,
.entry-title,
.svc-single-title,
.ow-single-title,
.our-work-section .section-heading h1 {
  font-size:      var(--h1-size);
  line-height:    var(--h1-line);
  letter-spacing: var(--h1-tracking);
  font-weight:    var(--h1-weight);
  margin: 0;
}

/* Canonical section heading. Apply `.section-title` to any <h2> (or reuse
   via `.section-heading h2`) for consistent sizing site-wide. Adjust the
   --h2-* tokens in :root to change every heading from one place. Colour is
   left to each section so headings adapt to light/dark backgrounds. */
.section-title,
.section-heading h2,
.cta-title,
.why-heading h2,
.process-heading h2,
.reviews-intro h2,
.pricing-intro h2 {
  font-size:      var(--h2-size);
  line-height:    var(--h2-line);
  letter-spacing: var(--h2-tracking);
  font-weight:    var(--h2-weight);
  margin: 0;
}

/* Reusable heading alignment. Headings are LEFT-aligned by default; add
   `.title-center` to any h1–h6 to centre just that heading. It also centres
   itself within grid/flex `.section-heading` containers (which use
   justify-items:start), and centres a following `.subtext` sibling so the
   whole heading block reads as centred. */
.title-center {
  text-align: center;
  justify-self: center;   /* grid parents (e.g. .section-heading) */
  align-self: center;     /* flex parents */
  margin-left: auto;
  margin-right: auto;
}

.title-center + .subtext,
.title-center + p {
  text-align: center;
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
}

/* Emphasised word inside any heading. Wrap the word in <em> and it renders
   in the secondary accent gradient. Change --accent-gradient in :root to
   restyle every emphasised heading word from one place. */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.section-title em {
  font-style: italic;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html { scroll-behavior: smooth; }

body {
  /* font-family: 'Plus Jakarta Sans', system-ui, sans-serif; */
  /* font-family: 'Questrial', system-ui, sans-serif; */
  /* font-family: 'Orbitron', system-ui, sans-serif; */
  /* font-family: 'Space Grotesk', system-ui, sans-serif; */
  /* font-family: 'Sora', system-ui, sans-serif; */
  /* font-family: 'Manrope', system-ui, sans-serif; */
  font-family: 'Raleway', system-ui, sans-serif;
  background: var(--clr-bg);
  color: var(--clr-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* =============================================
   NAVIGATION
   ============================================= */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem clamp(1.25rem, 5vw, 3rem) 0;
  transition: background var(--t), border-color var(--t), padding var(--t-slow);
  border-bottom: 1px solid transparent;
}

.site-nav.scrolled {
  background: rgba(2, 2, 22, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: var(--clr-border);
  padding-top: 0;
}

.nav-inner {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 9999px;
  margin: 0 auto;
  transition: max-width var(--t-slow);
}

.site-nav.scrolled .nav-inner {
  max-width: var(--max-w);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  z-index: 301;
  transform: scale(2);
  transform-origin: left top;
  transition: transform var(--t-slow);
}

.site-nav.scrolled .nav-logo {
  transform: scale(1);
}

.nav-logo img {
  height: 36px;
  width: auto;
  display: block;
}

.nav-logo,
.burger {
  transform: scale(1.7);
}

.site-nav.scrolled .nav-logo,
.site-nav.scrolled .burger {
  transform: scale(1);
}

.nav-cta {
  position: absolute;
  top: 50%;
  right: 4rem;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t), visibility var(--t);
  z-index: 301;
}

.nav-cta-secondary {
  position: absolute;
  top: 50%;
  right: 16rem;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t), visibility var(--t);
  z-index: 301;
}

.nav-cta.visible,
.nav-cta-secondary.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Shimmer sweep on the header CTA */
.nav-cta {
  overflow: hidden;
}

.nav-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  transform: translateX(-130%);
  pointer-events: none;
}

@keyframes cta-shimmer {
  0%   { transform: translateX(-130%); }
  100% { transform: translateX(160%); }
}

.nav-cta.is-shimmering::after {
  animation: cta-shimmer 0.7s ease-in-out forwards;
}

.hero-btns .btn-primary.hero-cta-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Burger button */
.burger {
  position: relative;
  z-index: 301;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 8px;
  transition: background var(--t), border-color var(--t), transform var(--t-slow);
  flex-shrink: 0;
  transform: scale(2);
  transform-origin: right top;
}

.site-nav.scrolled .burger {
  transform: scale(1);
}

.burger:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.burger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--clr-white);
  border-radius: 2px;
  transition: transform 0.35s ease, opacity 0.25s ease, width 0.25s ease;
  transform-origin: center;
}

.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; width: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Modal overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 298;
  background: rgba(2, 2, 22, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-menu);
}

.nav-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.nav-modal {
  position: fixed;
  inset: 0;
  z-index: 299;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 3rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-menu);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-modal.open {
  opacity: 1;
  pointer-events: all;
}

.modal-inner {
  position: relative;
  width: min(760px, 100%);
  background: rgba(8, 8, 31, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: clamp(3rem, 6vw, 4rem);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.35);
  max-width: 760px;
  max-height: calc(100vh - 4rem);
}

.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--clr-white);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--t);
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.modal-close span {
  position: absolute;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.modal-close span:first-child { transform: rotate(45deg); }
.modal-close span:last-child { transform: rotate(-45deg); }

.modal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.modal-links li {
  overflow: visible;
}

.modal-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-decoration: none;
  color: var(--clr-white);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.08;
  transition: color var(--t);
}

.modal-links a svg {
  width: 22px;
  height: 22px;
  opacity: 0.6;
  transform: translateX(-6px);
  transition: transform var(--t), opacity var(--t);
}

.modal-links a:hover {
  color: var(--clr-electric);
}

.modal-links a:hover svg {
  opacity: 1;
  transform: translateX(0);
}

.modal-cta {
  margin-top: 2rem;
  display: grid;
  gap: 0.75rem;
}

.modal-cta-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: center;
}

.modal-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-muted);
}

.modal-contact-ctas {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.modal-contact-btn {
  justify-content: center;
}

.modal-contact-btn svg {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .modal-cta,
  .modal-contact-ctas {
    grid-template-columns: 1fr;
  }

  .nav-logo,
  .burger {
    transform: scale(1.4);
  }

  .nav-cta {
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .site-nav.scrolled .nav-logo,
  .site-nav.scrolled .burger {
    transform: scale(0.85);
  }
}

/* =============================================
   HERO
   ============================================= */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: var(--nav-h) clamp(1.25rem, 5vw, 3rem) 9rem;
  background: var(--clr-bg);
  will-change: transform;
}

/* Atmospheric background */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

/* Radial colour glow */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(91, 94, 244, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 15% 85%, rgba(165, 180, 252, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 85% 10%, rgba(91, 94, 244, 0.06) 0%, transparent 60%);
}

/* Floating orbs */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.hero-orb-1 {
  width: clamp(300px, 50vw, 600px);
  height: clamp(300px, 50vw, 600px);
  background: rgba(91, 94, 244, 0.1);
  top: -10%;
  right: -8%;
  animation: orb-float 10s ease-in-out infinite;
}

.hero-orb-2 {
  width: clamp(200px, 35vw, 400px);
  height: clamp(200px, 35vw, 400px);
  background: rgba(165, 180, 252, 0.07);
  bottom: 5%;
  left: -5%;
  animation: orb-float 13s ease-in-out infinite reverse;
  animation-delay: -4s;
}

@keyframes orb-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-28px) scale(1.04); }
}

/* Content */
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 860px;
  will-change: transform, opacity;
}

.hero-title {
  font-size: var(--hero-size);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--clr-white);
  margin-bottom: 1.5rem;
}

.hero-title .line {
  display: block;
  white-space: nowrap;
}

.word-websites {
  display: inline-block;
  perspective: 600px;
}

.word-rotate {
  display: inline-block;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.word-built-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.word-built {
  display: inline-block;
}

.hero-title .word-smarter {
  display: inline-block;
}


.hero-sub {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: 400;
  line-height: 1.75;
  color: var(--clr-muted2);
  max-width: 520px;
  margin: 0 auto 2.75rem;
}

.hero-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.875rem;
  will-change: transform, opacity;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t), box-shadow var(--t), border-color var(--t), color var(--t);
  white-space: nowrap;
}

.btn-lg  { padding: 0.9rem 1.875rem; font-size: 0.9375rem; }
.btn-sm  { padding: 0.625rem 1.25rem; font-size: 0.875rem; }
.btn-full { width: 100%; justify-content: center; }

.btn svg {
  width: 17px;
  height: 17px;
  transition: transform var(--t);
  flex-shrink: 0;
}

.btn:hover svg { transform: translateX(3px); }

.btn-primary {
  background: var(--clr-electric);
  color: var(--clr-white);
  box-shadow: 0 0 18px rgba(91, 94, 244, 0.16);
}

.btn-primary:hover {
  background: #4a4de0;
  box-shadow: 0 0 28px rgba(91, 94, 244, 0.45);
  transform: translateY(0);
}

.btn-whatsapp {
  background: var(--clr-whatsapp);
  border-color: var(--clr-whatsapp);
  color: var(--clr-white);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.22);
}

.btn-whatsapp:hover {
  background: var(--clr-whatsapp-hover);
  border-color: var(--clr-whatsapp-hover);
  color: var(--clr-white);
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.3);
  transform: translateY(0);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--clr-white);
  border-color: rgba(255, 255, 255, 0.1);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
}

/* =============================================
   HERO STATS BAR
   ============================================= */
.hero-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-top: 1px solid var(--clr-border);
  background: rgba(8, 8, 31, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.stat {
  flex: 1;
  max-width: 220px;
  padding: 1.375rem 1rem;
  text-align: center;
  border-right: 1px solid var(--clr-border);
}

.stat:last-child { border-right: none; }

.stat-value {
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: normal;
  letter-spacing: -0.03em;
  color: var(--clr-white);
  line-height: 1;
}

.stat-label {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-muted2);
  margin-top: 0.3rem;
}

/* Prevent FOUC on animated hero elements */
.word-websites,
.word-smarter,
.hero-sub,
.hero-btns .btn,
.hero-stats { opacity: 0; }

.word-built { transform: translateY(115%); }
.hero-stats { transform: translateY(80px); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 500px) {
  .hero-stats { gap: 0; }
  .stat { padding: 1rem 0.5rem; max-width: none; }
  .stat-label { font-size: 0.6rem; }
}

/* Below 450px the nowrap hero lines overflow at the clamp floor,
   so step the title down to keep "E-commerce built" on one line. */
@media (max-width: 450px) {
  .hero-title { font-size: clamp(2.5rem, 11vw, 3.25rem); }
}

.services-content {
  max-width: var(--max-w);
  width: 100%;
  text-align: center;
}

.white-section {
  background: var(--clr-white);
  /* border-top: 1px solid var(--clr-border); */
  /* border-bottom: 1px solid var(--clr-border); */
  padding: clamp(4rem, 10vw, 4rem) clamp(1.25rem, 5vw, 3rem);
}

.white-section .section-content {
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: left;
  color: var(--clr-bg);
}

.white-section .section-heading {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.white-section .section-heading h2 {
  color: var(--clr-bg);
  max-width: 900px;
}

.white-section  .subtext {
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  color: var(--clr-muted);
  max-width: 760px;
  margin: 0;
  line-height: 1.6;
}

.problem-cards,
.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
  width: 100%;
}

.problem-card,
.info-card {
  position: relative;
  padding: 1.35rem 1.25rem;
  border-radius: 0;
  background: var(--clr-white);
  color: var(--clr-bg);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 8px 28px rgba(2, 2, 22, 0.04);
  min-height: 200px;
}

.problem-card::before,
.info-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(2, 2, 22, 0.9), rgba(91, 94, 244, 0.75));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.problem-card span,
.info-card span {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#solution .section-content {
  /* text-align: right; */
  justify-items: end;
}

#solution .section-heading {
  justify-items: end;
}

@media (max-width: 900px) {
  .problem-cards,
  .info-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .problem-cards,
  .info-cards {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   WHY WE'RE DIFFERENT
   ============================================= */
section#why {
 padding-top: 0px !important;
}


.why-section {
  background: var(--clr-white);
  color: var(--clr-bg);
  padding: clamp(4rem, 9vw, 6rem) clamp(1.25rem, 5vw, 3rem);
}

.why-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.why-heading {
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.why-heading h2 {
  color: var(--clr-bg);
}


.why-sub {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  color: var(--clr-gray);
  margin: 1rem 0 0;
}

/* --- Equation row --- */
.why-equation {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.why-eq-card {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  border: 1px solid #e7e7f0;
  border-radius: 14px;
  background: var(--clr-white);
  box-shadow: 0 8px 28px rgba(2, 2, 22, 0.04);
}

.why-eq-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(91, 94, 244, 0.1);
  color: var(--clr-electric);
}

.why-eq-icon svg { width: 22px; height: 22px; }

.why-eq-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.3;
}

.why-eq-text strong {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--clr-bg);
}

.why-eq-text span {
  font-size: 0.9rem;
  color: var(--clr-muted);
}

.why-eq-card--result {
  background: linear-gradient(120deg, var(--clr-electric) 0%, #3aa0ff 100%);
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(91, 94, 244, 0.35);
}

.why-eq-card--result .why-eq-icon {
  background: rgba(255, 255, 255, 0.18);
  color: var(--clr-white);
}

.why-eq-card--result .why-eq-text strong { color: var(--clr-white); }
.why-eq-card--result .why-eq-text span { color: rgba(255, 255, 255, 0.8); }

.why-eq-op {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--clr-muted2);
}

.why-statement {
  text-align: center;
  max-width: 720px;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  font-size: clamp(1.05rem, 2.3vw, 1.3rem);
  line-height: 1.6;
  color: var(--clr-gray);
}

/* --- Comparison --- */
.why-compare {
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.why-compare-head,
.why-row {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: center;
  gap: 1.5rem;
}

.why-col-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.why-col-label--others { color: var(--clr-muted2); }
.why-col-label--us { color: var(--clr-electric); }

.why-compare-head { padding-bottom: 0.5rem; }

.why-compare-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.why-row {
  padding: 1.15rem 0;
  border-top: 1px solid #ededf3;
}

.why-cell {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: clamp(0.95rem, 1.9vw, 1.05rem);
  line-height: 1.45;
}

.why-cell--bad { color: var(--clr-gray); }
.why-cell--good { color: var(--clr-bg); }

.why-cell strong { font-weight: 700; color: var(--clr-electric); }

.why-mark {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.why-mark--x { color: #c4c4d0; }

.why-arrow {
  display: grid;
  place-items: center;
  color: var(--clr-electric);
  opacity: 0.55;
}

.why-arrow svg { width: 20px; height: 20px; }

.why-cta {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
  width: fit-content;
  margin: clamp(2.5rem, 6vw, 3.5rem) auto 0;
}

.why-cta .btn-ghost {
  background: transparent;
  color: var(--clr-bg);
  border-color: rgba(2, 2, 22, 0.2);
}

.why-cta .btn-ghost:hover {
  background: rgba(2, 2, 22, 0.05);
  border-color: rgba(2, 2, 22, 0.35);
}

/* --- Responsive --- */
@media (max-width: 860px) {
  .why-equation {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .why-eq-op {
    justify-content: center;
    padding: 0.1rem 0;
  }
}

@media (max-width: 720px) {
  .why-compare-head { display: none; }

  .why-row {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 1.1rem 0;
  }
  .why-arrow { display: none; }

  .why-cell--bad {
    opacity: 0.7;
    text-decoration: line-through;
    text-decoration-color: rgba(2, 2, 22, 0.2);
  }
}

/* =============================================
   CASE STUDIES
   ============================================= */
.our-work-section {
  padding: clamp(4rem, 10vw, 5rem) clamp(1.25rem, 5vw, 3rem);
  color: var(--clr-white);
}

.our-work-section .section-content {
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: left;
}

.our-work-section .section-heading {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.our-work-section .section-heading h1,
.our-work-section .section-heading h2 {
  color: var(--clr-white);
  max-width: 900px;
}

.our-work-section .subtext {
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  color: var(--clr-muted2);
  max-width: 760px;
  margin: 0;
  line-height: 1.6;
}

.our-work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(2rem, 5vw, 4rem);
  row-gap: 0;
  margin-top: clamp(3rem, 6vw, 5rem);
  align-items: start;
}

.our-work {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  /* margin-bottom: clamp(2.5rem, 6vw, 4rem); */
}

.our-work-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(3rem, 6vw, 5rem);
}

.our-work:nth-child(even) {
  margin-top: clamp(3rem, 8vw, 7rem);
}

.our-work-meta {
  padding: 0 0.25rem;
}

.our-work-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--clr-electric);
  padding: 0.3em 0.75em;
  border-radius: 0 6px 0 6px;
  margin-bottom: 0.625rem;
}

.our-work-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0rem;
}

.our-work-services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.our-work-services span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-muted2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.25em 0.65em;
  border-radius: 4px;
}

.our-work-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--clr-electric);
  text-decoration: none;
  transition: gap 0.2s ease;
}

.our-work-link:hover {
  gap: 0.55em;
}

.our-work-meta h3 {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  color: var(--clr-white);
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin: 0 0 0.4rem;
}

.our-work-meta p {
  font-size: 0.9375rem;
  color: var(--clr-muted2);
  font-weight: 400;
  line-height: 1.55;
  margin: 0;
}

.our-work-frame {
  display: block;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--clr-surface) 0%, var(--clr-surface-2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.28),
    0 32px 72px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  outline: none;
}

.img-skew {
  position: absolute;
  inset: -10%;
  transform: rotate(-3deg) translateY(2%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.img-skew img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.our-work-frame:hover .img-skew,
.our-work-frame:focus-visible .img-skew {
  transform: rotate(0deg) translateY(-3%);
}

.our-work-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(91, 94, 244, 0.18) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}

.our-work-frame:hover::after,
.our-work-frame:focus-visible::after {
  opacity: 1;
}

/* =============================================
   SERVICES SECTION (homepage)
   ============================================= */
.services-section {
  background: var(--clr-white);
  padding: clamp(4rem, 10vw, 5rem) clamp(1.25rem, 5vw, 3rem);
  color: var(--clr-bg);
}

.services-section .section-content {
  max-width: var(--max-w);
  margin: 0 auto;
}

.services-section .section-heading {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.services-section .section-heading h2 {
  color: var(--clr-bg);
  max-width: 900px;
}


.services-section .subtext {
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  color: var(--clr-muted);
  max-width: 760px;
  margin: 0;
  line-height: 1.6;
}

.services-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2fr;
  gap: clamp(1.25rem, 3vw, 1.5rem);
  align-items: stretch;
}

.services-grid-secondary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 1.5rem);
}

.service-card-wrap {
  display: contents;
}

.service-card {
  display: flex;
  flex-direction: column;
  background: var(--clr-white);
  border: 1px solid #e5e5f0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  padding: 1.75rem;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
   box-shadow: 0 8px 28px rgba(2, 2, 22, 0.04);
}

.service-card:hover {
  border-color: var(--clr-electric);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(91, 94, 244, 0.12);
}

.service-card-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.service-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  /* background: linear-gradient(155deg, var(--clr-navy) 0%, #0a0a2a 60%, #14143a 100%); */
  background-color: #5b5ef4;
  flex-shrink: 0;
}

.service-card-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.service-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.service-card-title {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--clr-bg);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

.service-card-strapline {
  font-size: 0.9375rem;
  color: var(--clr-muted);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--clr-electric);
  transition: gap 0.2s ease;
}

.service-card:hover .service-card-link {
  gap: 0.55em;
}

/* Featured card: large, dark, spans the left column full height */
.service-card--featured {
  /* background: linear-gradient(155deg, var(--clr-navy) 0%, #0a0a2a 60%, #14143a 100%); */
  /* border-color: var(--clr-navy); */
  padding: 2rem;
  min-height: 100%;
  justify-content: space-between;
     
}

.service-card--featured .service-card-icon {
  /* background: rgba(255, 255, 255, 0.08); */
}

.service-card--featured .service-card-title {
  /* color: var(--clr-white); */
  /* font-size: clamp(1.375rem, 2.2vw, 1.75rem); */
}

.service-card--featured .service-card-strapline {
  /* color: var(--clr-muted2); */
  /* opacity: 0.85; */
}

.service-card--featured .service-card-link {
  /* color: var(--clr-glow); */
}

.service-card--featured:hover {
  border-color: var(--clr-electric);
  box-shadow: 0 8px 40px rgba(91, 94, 244, 0.35);
}

@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card--featured {
    min-height: 0;
  }
}

@media (max-width: 600px) {
  .services-grid-secondary {
    grid-template-columns: 1fr;
  }
}

.services-section-divider {
  width: 25%;
  max-width: 320px;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  border: none;
  border-top: 2px solid var(--clr-electric);
}

/* =============================================
   SINGLE SERVICE PAGE
   ============================================= */
.svc-single {
  min-height: 100vh;
}

.svc-single-hero {
  --angle-h: 60px;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
  color: var(--clr-white);
}

.svc-single-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Split hero grid — only when .svc-hero-inner is present (image exists).
   Left column holds the text (row 1) and the CTA button (row 2); the
   framed image occupies the right column across both rows. */
.svc-single-hero .svc-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(2rem, 5vw, 4rem);
  row-gap: 1.5rem;
  align-items: center;
  padding-top: var(--hero-top-gap);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.svc-single-hero .svc-hero-inner .svc-hero-content {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}

.svc-single-hero .svc-hero-inner .svc-hero-cta {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

.svc-single-hero .svc-hero-inner .svc-hero-image {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

/* No-image hero: single column */
.svc-single-hero .svc-single-inner:not(.svc-hero-inner) {
  padding-top: var(--hero-top-gap);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  max-width: 860px;
  margin: 0 auto;
}

.svc-hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.svc-single-title {
  color: var(--clr-white);
}

.svc-single-strapline {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--clr-muted2);
  line-height: 1.6;
  margin: 0;
}

/* The image column: a framed screenshot, matching the Our Work hero. */
.svc-hero-image {
  display: block;
}

.svc-hero-image .svc-single-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  cursor: default;
}

.svc-single-body {
  padding: 0 clamp(1.25rem, 5vw, 3rem) clamp(3rem, 6vw, 4.5rem);
}

.svc-single-body.angled-top {
  --angle-h: 60px;
  padding-top: calc(var(--angle-h) + clamp(1.5rem, 4vw, 2.5rem));
}

.svc-body-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.svc-single-back {
  padding-top: clamp(2rem, 4vw, 3rem);
}

/* ── Other services ──────────────────────────────────────────────── */
.svc-single-other {
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 3rem);
}

.svc-single-other.angled-top {
  --angle-h: 60px;
  padding-top: calc(var(--angle-h) + clamp(2rem, 5vw, 3.5rem));
}

.svc-other-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.svc-single-other .section-heading {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.svc-single-other .section-heading .subtext {
  margin-top: 0.5rem;
}

.svc-other-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.svc-other-grid .service-card {
  flex: 1 1 calc((100% - 2 * clamp(1rem, 2vw, 1.5rem)) / 3);
  min-width: 0;
}

@media (max-width: 900px) {
  .svc-other-grid .service-card {
    flex-basis: calc((100% - clamp(1rem, 2vw, 1.5rem)) / 2);
  }
}

@media (max-width: 560px) {
  .svc-other-grid .service-card {
    flex-basis: 100%;
  }
}

@media (max-width: 900px) {
  /* Stack in reading order: text → image → CTA button. Switch to flex so
     the three blocks (which live in a 2-col grid on desktop) reorder
     cleanly regardless of their grid placement. */
  .svc-single-hero .svc-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .svc-single-hero .svc-hero-inner .svc-hero-content { order: 1; align-self: stretch; }
  .svc-single-hero .svc-hero-inner .svc-hero-image   { order: 2; align-self: stretch; width: 100%; }
  .svc-single-hero .svc-hero-inner .svc-hero-cta     { order: 3; align-self: stretch; }

  /* Ensure the framed image keeps a definite height when stacked. */
  .svc-single-hero .svc-hero-inner .svc-hero-image .svc-single-frame {
    aspect-ratio: 16 / 10;
  }
}

/* =============================================
   DEVICE FRAME OVERLAYS (tablet + mobile)
   Forms a three-device showcase set when both
   optional images are uploaded.
   ============================================= */

.ow-devices-wrap {
  position: relative;
}

/* Fixed pixel padding so devices overhang the desktop frame by exactly 20px */
.ow-devices-wrap.has-devices {
  padding-bottom: 20px;
}

/* Desktop image: flat, no skew — devices provide the visual interest */
.ow-devices-wrap.has-devices .img-skew,
.ow-devices-wrap.has-devices .our-work-frame:hover .img-skew,
.ow-devices-wrap.has-devices .our-work-frame:focus-visible .img-skew,
.ow-devices-wrap.has-devices:hover .img-skew,
.ow-devices-wrap.has-devices:focus-within .img-skew {
  transform: none;
  inset: 0;
  transition: none;
}

/* ── Desktop: browser chrome when part of a set ── */
.ow-devices-wrap.has-devices .our-work-frame {
  border: 5px solid #13132b;
  border-radius: 10px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 10px 28px rgba(0, 0, 0, 0.28),
    0 28px 64px rgba(0, 0, 0, 0.32);
}


/* Trigger desktop hover from anywhere within the wrap (single-image cards only) */
.ow-devices-wrap:not(.has-devices):hover .our-work-frame .img-skew,
.ow-devices-wrap:not(.has-devices):focus-within .our-work-frame .img-skew {
  transform: rotate(0deg) translateY(-3%);
}

.ow-devices-wrap:hover .our-work-frame::after,
.ow-devices-wrap:focus-within .our-work-frame::after {
  opacity: 1;
}

/* ── Tablet frame (bottom-left) ─────────────── */
.ow-device-tablet {
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 28%;
  aspect-ratio: 3 / 4;
  background: #111128;
  border-radius: 14px;
  border: 5px solid #1c1c3a;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.5),
    0 20px 48px rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
  z-index: 3;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Camera notch pill */
.ow-device-tablet::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  z-index: 2;
  pointer-events: none;
}

.ow-device-tablet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ── Mobile frame (bottom-right) ────────────── */
/* Mobile sits directly beside the tablet (5% + 28% width) overlapping by 10px */
.ow-device-mobile {
  position: absolute;
  bottom: 0;
  left: calc(5% + 28% - 10px);
  width: 16%;
  aspect-ratio: 9 / 19.5;
  background: #0c0c1e;
  border-radius: 20px;
  border: 5px solid #18183a;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.55),
    0 20px 48px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
  z-index: 4;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Dynamic island pill */
.ow-device-mobile::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  z-index: 2;
  pointer-events: none;
}

.ow-device-mobile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ── Hover: explode out left and right ───────── */
.ow-devices-wrap:hover .ow-device-tablet,
.ow-devices-wrap:focus-within .ow-device-tablet {
  transform: translateX(-26px) translateY(-14px) rotate(-3.5deg);
}

.ow-devices-wrap:hover .ow-device-mobile,
.ow-devices-wrap:focus-within .ow-device-mobile {
  transform: translateX(22px) translateY(-10px) rotate(3deg);
}

@media (max-width: 768px) {
  .ow-device-tablet {
    width: 32%;
    left: 3%;
    bottom: 0;
  }

  .ow-device-mobile {
    width: 19%;
    left: calc(3% + 32% - 10px);
    right: auto;
    bottom: 0;
  }
}

/* =============================================
   MOBILE APP SHOWCASE
   1–3 phones, skewed, cut off at the bottom,
   rising and spreading on hover.
   ============================================= */

.ow-frame--app {
  background: radial-gradient(ellipse at 55% 35%, #1e1a4a 0%, #080818 75%);
  overflow: hidden;
}

/* Soften the hover overlay colour for app cards */
.ow-frame--app::after {
  background: linear-gradient(135deg, rgba(120, 80, 244, 0.2) 0%, transparent 55%);
}

/* Shared phone frame styles */
.ow-app-phone {
  position: absolute;
  aspect-ratio: 9 / 19.5;
  background: #0c0c1e;
  border-radius: 22px;
  border: 4px solid #1e1e3c;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.6),
    0 24px 60px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Dynamic island notch */
.ow-app-phone::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  z-index: 2;
  pointer-events: none;
}

.ow-app-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ── 1 phone: centred, upright ───────────────── */

.ow-app-phones--1 .ow-app-phone--1 {
  width: 36%;
  left: 50%;
  top: 6%;
  transform: translateX(-50%) rotate(0deg);
  z-index: 2;
}

.ow-frame--app:hover .ow-app-phones--1 .ow-app-phone--1,
.ow-frame--app:focus-visible .ow-app-phones--1 .ow-app-phone--1 {
  transform: translateX(-50%) rotate(-4deg) translateY(-20%);
}

/* ── 2 phones: same size, subtle height offset ── */

.ow-app-phones--2 .ow-app-phone {
  width: 30%;
}

/* Phone 1: slightly lower */
.ow-app-phones--2 .ow-app-phone--1 {
  left: 30%;
  top: 16%;
  transform: translateX(-50%) rotate(0deg);
  z-index: 2;
}

/* Phone 2: slightly higher */
.ow-app-phones--2 .ow-app-phone--2 {
  left: 68%;
  top: 6%;
  transform: translateX(-50%) rotate(0deg);
  z-index: 3;
}

/* Hover: lean outward + rise */
.ow-frame--app:hover .ow-app-phones--2 .ow-app-phone--1,
.ow-frame--app:focus-visible .ow-app-phones--2 .ow-app-phone--1 {
  transform: translateX(calc(-50% - 8px)) rotate(-5deg) translateY(-16%);
}

.ow-frame--app:hover .ow-app-phones--2 .ow-app-phone--2,
.ow-frame--app:focus-visible .ow-app-phones--2 .ow-app-phone--2 {
  transform: translateX(calc(-50% + 8px)) rotate(5deg) translateY(-16%);
}

/* ── 3 phones: same size, gentle wave heights ─── */

.ow-app-phones--3 .ow-app-phone {
  width: 26%;
}

/* Phone 1: lowest */
.ow-app-phones--3 .ow-app-phone--1 {
  left: 17%;
  top: 20%;
  transform: translateX(-50%) rotate(0deg);
  z-index: 2;
}

/* Phone 2: highest — centre focus */
.ow-app-phones--3 .ow-app-phone--2 {
  left: 50%;
  top: 6%;
  transform: translateX(-50%) rotate(0deg);
  z-index: 4;
}

/* Phone 3: mid-height */
.ow-app-phones--3 .ow-app-phone--3 {
  left: 83%;
  top: 13%;
  transform: translateX(-50%) rotate(0deg);
  z-index: 3;
}

/* Hover: outer phones lean out, centre rises straight */
.ow-frame--app:hover .ow-app-phones--3 .ow-app-phone--1,
.ow-frame--app:focus-visible .ow-app-phones--3 .ow-app-phone--1 {
  transform: translateX(calc(-50% - 10px)) rotate(-5deg) translateY(-14%);
}

.ow-frame--app:hover .ow-app-phones--3 .ow-app-phone--2,
.ow-frame--app:focus-visible .ow-app-phones--3 .ow-app-phone--2 {
  transform: translateX(-50%) rotate(0deg) translateY(-20%);
}

.ow-frame--app:hover .ow-app-phones--3 .ow-app-phone--3,
.ow-frame--app:focus-visible .ow-app-phones--3 .ow-app-phone--3 {
  transform: translateX(calc(-50% + 10px)) rotate(5deg) translateY(-14%);
}

@media (max-width: 768px) {
  .our-work-grid {
    grid-template-columns: 1fr;
    row-gap: clamp(3rem, 10vw, 4rem);
  }

  .our-work:nth-child(even) {
    margin-top: 0;
  }
}

/* =============================================
   SECTION DIVIDER
   ============================================= */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
  background: var(--clr-white);
  pointer-events: none;
}

.divider-line {
  flex: 1;
  max-width: 320px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(91, 94, 244, 0.28) 55%,
    rgba(165, 180, 252, 0.45) 100%
  );
}

.divider-line--flip {
  background: linear-gradient(
    270deg,
    transparent 0%,
    rgba(91, 94, 244, 0.28) 55%,
    rgba(165, 180, 252, 0.45) 100%
  );
}

.divider-gem {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--clr-electric), var(--clr-glow));
  border-radius: 2px;
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(91, 94, 244, 0.55), 0 0 4px rgba(165, 180, 252, 0.35);
}

/* =============================================
   PROCESS
   ============================================= */
.process-section {
  position: relative;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  padding-bottom: clamp(4rem, 10vw, 6rem);
  padding-top: clamp(4rem, 10vw, 6rem);
  background: var(--clr-white);
  overflow: hidden;
}

.process-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
}

.process-heading {
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.process-heading h2 {
  color: var(--clr-navy);
  margin-bottom: 1rem;
}


.process-sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--clr-muted);
  line-height: 1.65;
  max-width: 580px;
  margin: 0 auto;
}

.process-track {
  display: flex;
  align-items: stretch;
}

.process-connector {
  flex: 0 0 clamp(1rem, 3.5vw, 3rem);
  position: relative;
  align-self: center;
  height: 32px;
}

.process-connector::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 13px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(91, 94, 244, 0.55) 0%, rgba(165, 180, 252, 0.4) 100%);
  transform: translateY(-50%);
}

.process-connector::after {
  content: '';
  position: absolute;
  right: 3px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid rgba(165, 180, 252, 0.6);
  border-top: 1.5px solid rgba(165, 180, 252, 0.6);
  transform: translateY(-50%) rotate(45deg);
}

.process-connector span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-electric);
  box-shadow: 0 0 8px rgba(91, 94, 244, 0.9), 0 0 18px rgba(91, 94, 244, 0.5);
  transform: translateY(-50%);
  animation: proc-dot 3s ease-in-out infinite;
}

/* Each dot only travels in the first 33% of the cycle, then hides.
   Staggered by 1s so they fire left-to-right in sequence. */
.process-track > .process-connector:nth-child(4) span { animation-delay: 1s; }
.process-track > .process-connector:nth-child(6) span { animation-delay: 2s; }

@keyframes proc-dot {
  0%    { left: 0;                 opacity: 0; }
  4%    {                           opacity: 1; }
  27%   {                           opacity: 1; }
  33%   { left: calc(100% - 16px); opacity: 0; }
  33.5% { left: 0;                 opacity: 0; }
  100%  { left: 0;                 opacity: 0; }
}

.process-step {
  flex: 1;
  position: relative;
  padding: 2rem 1.625rem 2.25rem;
  border-radius: var(--radius-lg);
  background: var(--clr-white);
  border: 1px solid rgba(2, 2, 22, 0.08);
  box-shadow: 0 2px 12px rgba(2, 2, 22, 0.05);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.process-step::before {
  content: attr(data-step);
  position: absolute;
  bottom: -0.5rem;
  right: 0.625rem;
  font-size: 6rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(2, 2, 22, 0.05);
  pointer-events: none;
  user-select: none;
}

.process-step:hover {
  border-color: rgba(91, 94, 244, 0.35);
  box-shadow: 0 8px 32px rgba(91, 94, 244, 0.12);
  transform: translateY(-5px);
}

.process-step-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.process-step-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.process-icon-ring {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--clr-electric);
  border: 1px solid rgba(91, 94, 244, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-electric);
  box-shadow: 0 0 14px rgba(91, 94, 244, 0.1);
}

/* Uploaded process icons are rendered as normal images inside the ring. */
.process-icon-ring img,
.process-icon-ring .process-icon-image {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}

.process-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clr-electric);
}

.process-step h3 {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--clr-navy);
  line-height: 1.15;
  position: relative;
  z-index: 1;
}

.process-step p,
.process-step-body {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--clr-muted);
  position: relative;
  z-index: 1;
}

/* Rich-text (wysiwyg) step descriptions. The wysiwyg wraps content in its own
   <p>/<ul>/<ol>, so reset stacked margins and style the common inline marks. */
.process-step-body > :first-child { margin-top: 0; }
.process-step-body > :last-child  { margin-bottom: 0; }
.process-step-body p { margin: 0 0 0.75em; }
.process-step-body ul,
.process-step-body ol { margin: 0.5em 0 0.75em; padding-left: 1.25em; }
.process-step-body li { margin-bottom: 0.35em; }
.process-step-body a {
  color: var(--clr-electric);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.process-step-body a:hover { color: var(--clr-navy); }
.process-step-body strong { color: inherit; font-weight: 700; }

@media (max-width: 900px) {
  .process-track {
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
  }

  .process-connector {
    width: 2px;
    height: clamp(1.5rem, 4vw, 2.5rem);
    flex: 0 0 clamp(1.5rem, 4vw, 2.5rem);
    align-self: flex-start;
    margin-left: calc(1.625rem + 24px);
  }

  .process-connector::before {
    top: 0;
    bottom: 13px;
    left: 50%;
    right: auto;
    width: 1.5px;
    height: auto;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(91, 94, 244, 0.55) 0%, rgba(165, 180, 252, 0.4) 100%);
  }

  .process-connector::after {
    right: auto;
    top: auto;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }

  @keyframes proc-dot-v {
    0%    { top: 0;                 opacity: 0; }
    4%    {                          opacity: 1; }
    27%   {                          opacity: 1; }
    33%   { top: calc(100% - 16px); opacity: 0; }
    33.5% { top: 0;                 opacity: 0; }
    100%  { top: 0;                 opacity: 0; }
  }

  .process-connector span {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: proc-dot-v 3s ease-in-out infinite;
  }

  .process-track > .process-connector:nth-child(4) span { animation-delay: 1s; }
  .process-track > .process-connector:nth-child(6) span { animation-delay: 2s; }
}

/* =============================================
   SERVICE PROCESS  (per-service Process tab)
   Reuses the home process card visuals but as larger 2-per-row cards.
   Layout is row-based (.pw-row): each row holds up to two cards.
   ============================================= */
.service-process {
  background: var(--clr-surface);
}

/* Dark band => white cards with dark text, to contrast the navy background.
   These mostly inherit the light-card base styles from .process-step; only
   the fill, shadow and hover need setting for the dark surround. */
.service-process .process-step {
  background: var(--clr-white);
  border-color: rgba(2, 2, 22, 0.06);
  box-shadow: 0 8px 30px rgba(2, 2, 22, 0.45);
}
.service-process .process-step:hover {
  border-color: rgba(91, 94, 244, 0.4);
  box-shadow: 0 14px 44px rgba(91, 94, 244, 0.25);
}

/* ---------------------------------------------------------------------------
   Inline (shortcode) variant — [service_process]
   A self-contained blue block that flows within description content instead of
   a full-bleed dark band. Sharp edges + a diagonal top edge; it hugs the
   surrounding prose width. Cards keep the dark "glass panel" treatment, which
   reads well against the blue container.
   --------------------------------------------------------------------------- */
.service-process--inline {
  --angle-h: 60px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--clr-navy) 0%, #10103a 55%, var(--clr-surface) 100%);
  /* Diagonal top edge (rises left -> right); sharp corners, no radius. */
  clip-path: polygon(0 var(--angle-h), 100% 0, 100% 100%, 0 100%);
  padding: clamp(1.75rem, 5vw, 3rem);
  /* Push content clear of the clipped top corner. */
  padding-top: calc(var(--angle-h) + clamp(1.75rem, 5vw, 3rem));
  margin-block: clamp(2rem, 5vw, 3rem);
}

/* The band's heading/sub inherit page-body (dark-on-light) colours by default;
   force light text since the inline card sits on a blue background. */
.service-process--inline .process-heading { margin-bottom: clamp(2rem, 4vw, 3rem); }
.service-process--inline .process-heading h2 { color: var(--clr-white); }
.service-process--inline .process-sub { color: var(--clr-muted2); }

/* Trim the heading scale so the inline block doesn't shout over surrounding
   body copy. */
.service-process--inline .process-heading h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

.process-track--wide {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.pw-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  gap: 0;
  position: relative;
  z-index: 1;
}

/* Larger cards with room for more copy. Two-per-row => ~50% each. */
.process-track--wide .process-step {
  flex: 1 1 0;
  min-width: 0;
  padding: 2.5rem 2.25rem 2.75rem;
}

/* A lone card on the final row shouldn't stretch full width. */
.pw-row--single .process-step {
  flex: 0 1 calc(50% - clamp(1rem, 3.5vw, 3rem) / 2);
}

.process-track--wide .process-step h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.process-track--wide .process-step p,
.process-track--wide .process-step-body {
  font-size: 0.975rem;
  line-height: 1.75;
}

.process-track--wide .process-step::before {
  font-size: 7.5rem;
}

.pw-conn-h {
  flex: 0 0 clamp(1rem, 3.5vw, 3rem);
  position: relative;
  align-self: center;
  height: 32px;
  pointer-events: none;
}

.pw-conn-h::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(91, 94, 244, 0.65), rgba(165, 180, 252, 0.55));
}

.pw-conn-h::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -1px;
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(165, 180, 252, 0.8);
  border-right: 2px solid rgba(165, 180, 252, 0.8);
  transform: translateY(-50%) rotate(45deg);
}

.pw-conn-z {
  position: relative;
  width: 100%;
  height: clamp(3.75rem, 7vw, 5rem);
  pointer-events: none;
}

.pw-conn-z span {
  position: absolute;
  display: block;
  background: linear-gradient(180deg, rgba(91, 94, 244, 0.65), rgba(165, 180, 252, 0.55));
}

.pw-conn-z-start {
  top: 0;
  left: 75%;
  width: 2px;
  height: 38%;
  transform: translateX(-50%);
}

.pw-conn-z-middle {
  top: 38%;
  left: 25%;
  width: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(270deg, rgba(91, 94, 244, 0.65), rgba(165, 180, 252, 0.55));
}

.pw-conn-z-end {
  top: 38%;
  left: 25%;
  width: 2px;
  height: 62%;
  transform: translateX(-50%);
}

.pw-conn-z::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 25%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(165, 180, 252, 0.8);
  border-bottom: 2px solid rgba(165, 180, 252, 0.8);
  transform: translateX(-50%) rotate(45deg);
}

.pw-conn-z--to-single .pw-conn-z-middle {
  left: 50%;
  width: 25%;
}

.pw-conn-z--to-single .pw-conn-z-end,
.pw-conn-z--to-single::after {
  left: 50%;
}

/* Single column on narrow screens: all connectors become straight vertical links. */
@media (max-width: 760px) {
  .process-track--wide { max-width: 480px; }
  .pw-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* Stacked cards must size to their content, not collapse to 0 height. */
  .process-track--wide .process-step { flex: 0 0 auto; }

  .pw-conn-h,
  .pw-conn-z {
    flex: 0 0 clamp(1.75rem, 5vw, 2.5rem);
    width: 2px;
    height: clamp(1.75rem, 5vw, 2.5rem);
    align-self: flex-start;
    margin-left: calc(2.25rem + 25px);
  }

  .pw-conn-h::before {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 2px;
    height: auto;
    transform: none;
    background: linear-gradient(180deg, rgba(91, 94, 244, 0.65), rgba(165, 180, 252, 0.55));
  }

  .pw-conn-h::after,
  .pw-conn-z::after {
    top: auto;
    right: auto;
    bottom: -1px;
    left: 0;
    width: 8px;
    height: 8px;
    border-top: 0;
    border-left: 0;
    border-right: 2px solid rgba(165, 180, 252, 0.8);
    border-bottom: 2px solid rgba(165, 180, 252, 0.8);
    transform: translateX(-50%) rotate(45deg);
  }

  .pw-conn-z span { display: none; }

  .pw-conn-z::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(91, 94, 244, 0.65), rgba(165, 180, 252, 0.55));
  }
}

/* =============================================
   REVIEWS
   ============================================= */
.reviews-section {
  background: var(--clr-navy);
  padding: clamp(4rem, 10vw, 6rem) 0 clamp(4rem, 10vw, 5rem);
  overflow: hidden;
}

.reviews-intro {
  max-width: var(--max-w);
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.reviews-intro h2 {
  color: var(--clr-white);
  margin-bottom: 0.75rem;
}

.reviews-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--clr-muted2);
  line-height: 1.6;
}

.reviews-scroller-outer {
  /* no initial left fade — JS adds it progressively as user scrolls */
  -webkit-mask-image: linear-gradient(to right, black 0%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black 92%, transparent 100%);
}

.reviews-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0.5rem clamp(1.25rem, 5vw, 3rem) 2rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.reviews-track::-webkit-scrollbar { display: none; }

.reviews-track.is-grabbing {
  cursor: grabbing;
  scroll-behavior: auto;
}

.review-card {
  flex-shrink: 0;
  width: clamp(290px, 34vw, 400px);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  transition: border-color var(--t), box-shadow var(--t);
}

.review-card:hover {
  border-color: rgba(91, 94, 244, 0.35);
  box-shadow: 0 8px 32px rgba(91, 94, 244, 0.1);
}

.review-stars {
  color: #f59e0b;
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.review-quote {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
  font-style: italic;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--clr-border);
  margin-top: auto;
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-electric), var(--clr-glow));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}

.review-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--clr-white);
  line-height: 1.2;
}

.review-role {
  font-size: 0.8rem;
  color: var(--clr-muted2);
  margin-top: 0.2rem;
}

.reviews-scrollbar-wrap {
  max-width: var(--max-w);
  margin: 1.75rem auto 0;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.reviews-scrollbar-wrap.is-hidden {
  display: none;
}

.reviews-arrow {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--clr-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--clr-white);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--t), border-color var(--t), opacity var(--t);
}

.reviews-arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(91, 94, 244, 0.5);
}

.reviews-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.reviews-arrow svg {
  width: 15px;
  height: 15px;
  pointer-events: none;
}

.reviews-scrollbar {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  position: relative;
  cursor: pointer;
}

.reviews-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--clr-electric);
  border-radius: 99px;
  width: 30%;
  will-change: transform;
  cursor: grab;
}

.reviews-scrollbar-thumb.is-dragging {
  cursor: grabbing;
  transition: none;
}

@media (max-width: 640px) {
  .reviews-track {
    padding-inline: clamp(2rem, 6vw, 4rem);
  }

  .review-card {
    width: clamp(270px, 78vw, 340px);
  }
}

/* ============================================================
   UTILITY — ANGLED TOP EDGE
   Add .angled-top to any section for a diagonal top edge.
   By default it rises 100px from left (low) to right (high).

   DIRECTION: add .angled-top--left to flip it the other way, so
   it rises from right (low) to left (high). Without the modifier
   the default right-rising angle applies.

   HOW IT WORKS: the section is pulled UP by --angle-h with a
   negative margin so it overlaps the section above it, then the
   higher top corner of its background is clipped away. This reveals
   the section above through the diagonal — so the section above
   must be a different colour for the angle to be visible.

   Pair with a .bg-* class to set this section's background colour.
   Override --angle-h to change the steepness.
   ============================================================ */

.angled-top {
  --angle-h: 100px;
  /* default: top-left low, top-right high (rises left -> right) */
  clip-path: polygon(0 var(--angle-h), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(-1 * var(--angle-h));
  /* push content below the clipped corner so it isn't cut off */
  padding-top: calc(var(--angle-h) + clamp(4rem, 10vw, 6rem));
}

/* Mirror: top-left high, top-right low (rises right -> left) */
.angled-top--left {
  clip-path: polygon(0 0, 100% var(--angle-h), 100% 100%, 0 100%);
}

/* Draw a 1px diagonal divider along the angled top edge when the
   element also has a `border-top` utility class. This uses an inline
   SVG that strokes the diagonal within the clipped area so the line
   remains visible even when both sections are the same background.
   The SVG uses `currentColor` so we can pick up `--clr-border`. */
.angled-top.border-top {
  position: relative;
}
.angled-top.border-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--angle-h);
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 100%;
  /* SVG: diagonal from bottom-left to top-right */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><line x1='0' y1='100' x2='100' y2='0' stroke='currentColor' stroke-width='1' stroke-linecap='square'/></svg>");
  color: var(--clr-border, #e5e5e5);
}

/* Mirrored angle (rises right -> left) — invert the SVG line */
.angled-top--left.border-top::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><line x1='0' y1='0' x2='100' y2='100' stroke='currentColor' stroke-width='1' stroke-linecap='square'/></svg>");
}

/* Add to the section DIRECTLY ABOVE an .angled-top section. The
   angled section overlaps upward by --angle-h, so this reserves
   matching bottom space to keep that overlap clear of content.
   Keep --angle-h in sync with the angled section below. */
.angled-clearance {
  --angle-h: 100px;
  padding-bottom: calc(var(--angle-h) + clamp(4rem, 10vw, 4rem)) !important;
}
.angled-clearance-sml {
  --angle-h: 50px;
  padding-bottom: calc(var(--angle-h) + clamp(2rem, 5vw, 2rem)) !important;
}

/* Background colour helpers */
.bg-navy     { background: var(--clr-navy); }
.bg-white    { background: var(--clr-white); }
.bg-surface  { background: var(--clr-surface); }
.bg-surface-2 { background: var(--clr-surface-2); }

/* =============================================
   SECTION THEMES
   Add `.section--dark` or `.section--light` to any section to flip its
   background AND text colours together. Redefine the role tokens per theme;
   the class then applies the background and cascades colours to the section's
   headings, body text, subtext and prose — so one class re-themes it all.
   ============================================= */
.section--dark {
  --section-bg:    var(--clr-bg);
  --section-fg:    var(--clr-white);
  --section-muted: var(--clr-muted2);
}

.section--light {
  --section-bg:    var(--clr-white);
  --section-fg:    var(--clr-bg);
  --section-muted: var(--clr-muted);
}

.section--dark,
.section--light {
  background: var(--section-bg);
  color: var(--section-fg);
}

/* Cascade the theme's colours to the usual descendants:
   headings + prose = primary foreground; subtext = muted. */
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6,
.section--dark .ow-prose,
.section--light h1, .section--light h2, .section--light h3,
.section--light h4, .section--light h5, .section--light h6,
.section--light .ow-prose {
  color: var(--section-fg);
}

.section--dark .subtext,
.section--light .subtext {
  color: var(--section-muted);
}

/* =============================================
   PRICING
   ============================================= */
.pricing-section {
  position: relative;
  padding: clamp(4rem, 10vw, 6rem) clamp(1.25rem, 5vw, 3rem) clamp(4rem, 10vw, 6rem);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(91, 94, 244, 0.07), transparent 55%),
    var(--clr-white);
  overflow: hidden;
}

.pricing-intro {
  max-width: var(--max-w);
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}

.pricing-intro h2 {
  color: var(--clr-navy);
  margin-bottom: 0.75rem;
}

.pricing-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--clr-gray);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.pricing-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(2, 2, 22, 0.1);
  background: var(--clr-white);
  box-shadow: 0 4px 20px rgba(2, 2, 22, 0.05);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.pricing-card:hover {
  border-color: rgba(91, 94, 244, 0.45);
  box-shadow: 0 12px 36px rgba(91, 94, 244, 0.14);
  transform: translateY(-4px);
}

/* Featured (Growth) — raised + glowing accent border */
.pricing-card-featured {
  border-color: rgba(91, 94, 244, 0.55);
  background:
    linear-gradient(180deg, rgba(91, 94, 244, 0.08), rgba(255, 255, 255, 0) 45%),
    var(--clr-white);
  box-shadow: 0 16px 48px rgba(91, 94, 244, 0.2);
}

.pricing-card-featured:hover {
  border-color: rgba(91, 94, 244, 0.75);
  box-shadow: 0 20px 56px rgba(91, 94, 244, 0.28);
}

@media (min-width: 901px) {
  .pricing-card-featured { transform: translateY(-1rem); }
  .pricing-card-featured:hover { transform: translateY(calc(-1rem - 4px)); }
}

.pricing-badge {
  position: absolute;
  top: 1.75rem;
  right: 2rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-white);
  background: linear-gradient(135deg, var(--clr-electric), #3aa0ff);
  padding: 0.4rem 0.7rem;
  border-radius: 99px;
  box-shadow: 0 0 18px rgba(91, 94, 244, 0.4);
}

.pricing-name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--clr-navy);
  line-height: 1.1;
}

.pricing-tagline {
  font-size: 0.95rem;
  color: var(--clr-gray);
  line-height: 1.5;
  margin-top: 0.4rem;
  max-width: 90%;
}

.pricing-price {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pricing-from {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-gray);
}

.pricing-amount {
  font-size: clamp(2.75rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--clr-navy);
  line-height: 1;
}

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: #33333a;
  line-height: 1.4;
}

.pricing-check {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}

/* CTA buttons — roomier vertical padding, recoloured for white bg */
.pricing-cta {
  margin-top: 0.5rem;
  padding: 1rem 1.5rem;
  font-size: 0.9375rem;
}

.pricing-section .btn-ghost {
  background: transparent;
  color: var(--clr-navy);
  border-color: rgba(2, 2, 22, 0.16);
}

.pricing-section .btn-ghost:hover {
  background: rgba(2, 2, 22, 0.04);
  border-color: rgba(91, 94, 244, 0.5);
}

.pricing-footnote {
  text-align: center;
  color: var(--clr-gray);
  font-size: 0.9rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.pricing-cta-box {
  max-width: var(--max-w);
  margin: clamp(3rem, 6vw, 4rem) auto 0;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  text-align: center;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(91, 94, 244, 0.25), transparent 60%),
    var(--clr-navy);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pricing-cta-heading {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--clr-white);
}

.pricing-cta-sub {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

.pricing-cta-btn {
  margin-top: 1.5rem;
  padding: 1rem 1.75rem;
  font-size: 0.9375rem;
}

@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
}

/* =============================================
   FINAL CTA
   ============================================= */
.cta-section {
  position: relative;
  overflow: hidden;
  background: var(--clr-navy);
  padding: clamp(3rem, 8vw, 5rem) clamp(1.25rem, 5vw, 3rem) clamp(5rem, 12vw, 8rem);
}

.cta-panel {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(2rem, 6vw, 4rem) 0;
}

/* Soft glow behind the heading */
.cta-panel-glow {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, rgba(91, 94, 244, 0.22), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.cta-panel > *:not(.cta-panel-glow) {
  position: relative;
  z-index: 1;
}

.cta-title {
  color: var(--clr-white);
  max-width: 900px;
  margin: 0 auto 1.25rem;
}


.cta-sub {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.7;
  color: var(--clr-muted2);
  max-width: 560px;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
}

.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem 1.75rem;
}

.cta-btn {
  padding: 1rem 2rem;
  font-size: 1rem;
  border-radius: 99px;
  color: var(--clr-white);
  background: linear-gradient(120deg, #3aa0ff 0%, var(--clr-electric) 100%);
  box-shadow: 0 0 28px rgba(58, 160, 255, 0.35);
}

.cta-btn:hover {
  box-shadow: 0 0 40px rgba(58, 160, 255, 0.55);
  filter: brightness(1.05);
}

.cta-note {
  font-size: 0.95rem;
  color: var(--clr-muted);
}

.cta-note strong {
  color: var(--clr-white);
  font-weight: 700;
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-border);
  color: var(--clr-muted2);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 5vw, 3rem) clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: clamp(2.5rem, 6vw, 5rem);
}

/* Brand column */
.footer-logo {
  display: inline-block;
  margin-bottom: 1.25rem;
}

.footer-logo img {
  height: 40px;
  width: auto;
  display: block;
}

.footer-strapline {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--clr-muted2);
  max-width: 360px;
  margin-bottom: 1.75rem;
}

.footer-social {
  display: flex;
  gap: 0.75rem;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--clr-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--clr-muted);
  display: grid;
  place-items: center;
  transition: color var(--t), border-color var(--t), background var(--t), transform var(--t);
}

.footer-social a:hover {
  color: var(--clr-white);
  border-color: rgba(91, 94, 244, 0.5);
  background: rgba(91, 94, 244, 0.12);
  transform: translateY(-2px);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

.footer-social img,
.footer-social-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

/* Menu columns */
.footer-menus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.footer-col-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-white);
  margin-bottom: 1.1rem;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer-col a {
  font-size: 0.9375rem;
  color: var(--clr-muted2);
  text-decoration: none;
  transition: color var(--t);
}

.footer-col a:hover {
  color: var(--clr-white);
}

/* Copyright bar */
.footer-bar {
  border-top: 1px solid var(--clr-border);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.5rem clamp(1.25rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--clr-muted);
}

.footer-bar-tag em {
  font-style: italic;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .footer-menus {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .footer-menus {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
  }

  .footer-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =============================================
   DEFAULT CONTENT PAGES
   ============================================= */
.default-page {
  min-height: 100vh;
}

.default-page-hero {
  --angle-h: 60px;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
  color: var(--clr-white);
}

.default-page-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-top: var(--hero-top-gap);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}

.default-page-title {
  color: var(--clr-white);
}

.default-page-body {
  padding: 0 clamp(1.25rem, 5vw, 3rem) clamp(4rem, 8vw, 6rem);
}

.default-page-body.angled-top {
  --angle-h: 60px;
  padding-top: calc(var(--angle-h) + clamp(1.5rem, 4vw, 2.5rem));
}

.default-page-container {
  max-width: var(--max-w);
  margin: 0 auto;
}

.default-page-article {
  color: var(--clr-bg);
}

.default-page .entry-thumbnail {
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  overflow: hidden;
  border-radius: var(--radius);
}

.default-page .entry-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

.default-page .entry-content {
  font-size: clamp(1rem, 1.2vw, 1.075rem);
  line-height: 1.75;
  color: #242434;
}

.default-page .entry-content > * + * {
  margin-top: 1em;
}

.default-page .entry-content h2,
.default-page .entry-content h3,
.default-page .entry-content h4 {
  color: var(--clr-bg);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-top: clamp(2rem, 5vw, 3rem);
}

.default-page .entry-content h2 {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
}

.default-page .entry-content h3 {
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 500;
}

.default-page .entry-content h4 {
  font-size: 1.2rem;
  font-weight: 600;
}

.default-page .entry-content p,
.default-page .entry-content li {
  color: #242434;
}

.default-page .entry-content strong {
  color: var(--clr-bg);
  font-weight: 700;
}

.default-page .entry-content a {
  color: var(--clr-electric);
  font-weight: 700;
  text-underline-offset: 0.18em;
}

.default-page .entry-content ul,
.default-page .entry-content ol {
  padding-left: 1.4em;
  margin-left: 0;
}

.default-page .entry-content li + li {
  margin-top: 0.35em;
}

.default-page .entry-content blockquote {
  margin-left: 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--clr-electric);
  background: #f6f7ff;
  border-radius: var(--radius);
}

.default-page .entry-content hr {
  border: 0;
  border-top: 1px solid #e5e5ee;
  margin: clamp(2rem, 5vw, 3rem) 0;
}

.default-page .entry-content table {
  width: 100%;
  border-collapse: collapse;
  overflow-wrap: anywhere;
}

.default-page .entry-content th,
.default-page .entry-content td {
  padding: 0.8rem 0.9rem;
  border: 1px solid #e5e5ee;
  text-align: left;
  vertical-align: top;
}

.default-page .entry-content th {
  background: #f6f7ff;
  color: var(--clr-bg);
}

.default-page .page-links {
  margin-top: 2rem;
  color: var(--clr-bg);
  font-weight: 700;
}

@media (max-width: 640px) {
  .default-page-hero-inner {
    padding-bottom: clamp(4rem, 18vw, 6rem);
  }

  .default-page-body {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* =============================================
   BREADCRUMB
   ============================================= */
.breadcrumb {
  width: min(var(--max-w), calc(100% - clamp(2.5rem, 10vw, 6rem)));
  padding: calc(var(--nav-h) + 1.5rem) 0 0;
  margin: 0 auto;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb-item a {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--clr-muted2);
  text-decoration: none;
  transition: color var(--t);
}

.breadcrumb-item a:hover {
  color: var(--clr-electric);
}

.breadcrumb-sep {
  display: flex;
  align-items: center;
  color: var(--clr-muted);
}

.breadcrumb-current {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--clr-white);
}

/* =============================================
   SINGLE CASE STUDY PAGE
   ============================================= */
.ow-single {
  min-height: 100vh;
}

.ow-single-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.ow-single-hero {
  --angle-h: 60px;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.ow-single-hero .ow-single-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ow-more-images .ow-single-inner p{
  color: var(--clr-bg);
  padding: 0 0 2em 0;
}
/* Split hero grid — only when .ow-hero-inner is present (image exists) */
.ow-single-hero .ow-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-top: var(--hero-top-gap);
}

/* No-image hero: add nav-height padding via single column path */
.ow-single-hero .ow-single-inner:not(.ow-hero-inner) {
  padding-top: var(--hero-top-gap);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.ow-hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ow-hero-image .our-work-frame {
  aspect-ratio: 16 / 9;
}

.ow-single-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ow-single-title {
  color: var(--clr-white);
  max-width: 820px;
}

.ow-single-desc {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--clr-muted2);
  line-height: 1.6;
  margin: 0;
  max-width: 680px;
}

.ow-single-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

/* Preview image */
.ow-single-image-wrap {
  padding: 0 clamp(1.25rem, 5vw, 3rem) clamp(3rem, 6vw, 4.5rem);
}

.ow-single-image-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.ow-single-frame {
  aspect-ratio: 16 / 9;
  cursor: default;
}

/* ── White content body ── */
.ow-single-body {
  background: #ffffff;
  /* No horizontal padding here — each row/block manages its own gutter so the
     navy Solution row can break out full-bleed like the home page. */
  padding: 0 0 clamp(3rem, 6vw, 4.5rem);
}

/* Restore the gutter on every direct block that isn't the full-bleed Solution */
.ow-single-body > .ow-scatter-row--brief,
.ow-single-body > .ow-more-images,
.ow-single-body > .ow-single-inner,
.ow-single-body > .ow-single-back {
  padding-left: clamp(1.25rem, 5vw, 3rem);
  padding-right: clamp(1.25rem, 5vw, 3rem);
}

.ow-single-body.angled-top {
  padding-top: calc(var(--angle-h) + clamp(1.5rem, 4vw, 2.5rem));
}

/* Brief + Solution */
.ow-single-content {
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
}

.ow-single-section {
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  border-bottom: 1px solid #e5e5e5;
}

.ow-single-section:last-child {
  border-bottom: none;
}

/* Section heading — matches home page white-section h2 */
.ow-section-label {
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--clr-bg);
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
}

/* Tighten the top gap on the white body — use a smaller angle and less top padding */
.ow-single-body.angled-top {
  --angle-h: 60px;
  padding-top: calc(var(--angle-h) + clamp(1.5rem, 4vw, 2.5rem));
}

.ow-prose {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--clr-bg);
}

.ow-prose p {
  margin: 0 0 1em;
}

.ow-prose p:last-child {
  margin-bottom: 0;
}

/* .ow-prose h2, .ow-prose h3, .ow-prose h4 {
  color: var(--clr-bg);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 1.5em 0 0.5em;
} */

.ow-prose ul, .ow-prose ol {
  padding-left: 1.5em;
  margin: 0 0 1em;
}

.ow-prose li {
  margin-bottom: 0.4em;
}

.ow-prose strong { color: var(--clr-bg); }

/* Gallery */
.ow-single-gallery {
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
  border-top: 1px solid #e5e5e5;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.ow-single-gallery .ow-section-label {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* Our work image galleries */
.ow-photo {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
}

.ow-scatter-row {
  overflow: visible;
}

.ow-scatter-inner {
  display: grid;
  grid-template-columns: 1fr minmax(0, 15rem);
  align-items: start;
  max-width: var(--max-w);
  margin: 0 auto;
  gap: clamp(0.4rem, 0.8vw, 1rem);
}

.ow-scatter-text {
  min-width: 0;
  padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 3vw, 1.75rem);
  max-width: 920px;
  color: var(--clr-bg);
}

/* ── Image column: large, legible, thin-bezel frames (matching the hero
   frame) that sit alongside Brief / Solution text. Two frames stacked, made
   sticky so they follow the reader down through the section's copy.
   Supply shots at 1600×1000 (16:10) for the crispest result. ── */
.ow-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  width: 100%;
  /* Sticky: the frame stack pins near the top of the viewport and tracks the
     reader as they scroll the (taller) text column beside it. */
  position: sticky;
  top: calc(var(--nav-h, 5rem) + 1.5rem);
  align-self: start;
}

/* Thin-bezel frame — same language as the hero .our-work-frame */
.ow-stack__frame {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  padding: 0;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--clr-surface) 0%, var(--clr-surface-2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.18),
    0 14px 34px rgba(4, 8, 30, 0.24),
    0 32px 64px rgba(4, 8, 30, 0.26);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ow-stack__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: #0a0a1f;
}

/* Subtle brand glow on hover, mirroring the hero frame */
.ow-stack__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(91, 94, 244, 0.18) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.ow-stack__frame:hover,
.ow-stack__frame:focus-visible {
  transform: translateY(-0.4rem);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.22),
    0 24px 52px rgba(4, 8, 30, 0.30),
    0 48px 96px rgba(4, 8, 30, 0.30);
}
.ow-stack__frame:hover::after,
.ow-stack__frame:focus-visible::after {
  opacity: 1;
}
.ow-stack__frame:focus-visible {
  outline: 2px solid var(--clr-electric);
  outline-offset: 3px;
}

/* All counts share the even full-width vertical stack — every image stays
   large and legible, and the stack spreads to fill tall text columns. */

.ow-more-image-card,
.ow-photo.ow-more-image-card {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  border: 2px solid #1501014d;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.ow-more-image-card:hover,
.ow-photo.ow-more-image-card:hover {
  transform: translateY(-0.35rem);
  box-shadow: 0 28px 58px rgba(12, 20, 50, 0.16);
}

.ow-more-image-card img,
.ow-photo.ow-more-image-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #f7f8fb;
}

.ow-more-images {
  margin-top: clamp(3rem, 5vw, 4rem);
  padding: clamp(2.5rem, 5vw, 3rem) 0 0;
}

/* Uniform grid: every tile the same 4:3 crop, consistent gaps. Auto-fit so
   the row always looks intentional whatever the image count — tiles grow to
   fill rather than leaving an empty column.
   Supply gallery images at 1200×900 (4:3) for the crispest result. */
.ow-more-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

@media (max-width: 420px) {
  .ow-more-images-grid { grid-template-columns: 1fr; }
}

.ow-more-image-card {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  aspect-ratio: 4 / 3;
}

.ow-more-image-card img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Back link */
.ow-single-back {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid #e5e5e5;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.ow-single-back .our-work-link {
  color: var(--clr-bg);
}

.ow-single-back .our-work-link:hover {
  color: var(--clr-electric);
}

.ow-related-service {
  padding: clamp(3.5rem, 7vw, 5rem) clamp(1.25rem, 5vw, 3rem);
}

.ow-related-service.angled-top {
  --angle-h: 60px;
  padding-top: calc(var(--angle-h) + clamp(2rem, 5vw, 3.5rem));
}

.ow-related-service-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.ow-related-service .section-heading {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  text-align: center;
  justify-items: center;
}

.ow-related-service .section-heading h2 {
  max-width: 760px;
}

.ow-related-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  width: 100%;
  margin: 0 auto;
}

.ow-related-service-grid .service-card-wrap {
  display: block;
}

.ow-related-service-grid .service-card-wrap:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.ow-related-service-grid .service-card {
  min-height: auto;
  width: 100%;
  height: 100%;
}

@media (max-width: 760px) {
  .ow-related-service-grid {
    grid-template-columns: 1fr;
  }

  .ow-related-service-grid .service-card-wrap:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* Archive empty state */
.ow-archive-empty {
  color: var(--clr-muted2);
  font-size: 1rem;
  margin-top: 2rem;
}

/* ── Review block (white card within white body) ── */
.ow-review-title {
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: normal;
  color: var(--clr-navy);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
}


.ow-review-block {
  position: relative;
  width: 100%;
  margin: clamp(1.5rem, 3vw, 2rem) 0 clamp(2.5rem, 5vw, 4rem);
  padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 3.5rem);
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.ow-review-block::before {
  content: '\201C';
  position: absolute;
  top: -0.5rem;
  right: 1.5rem;
  font-size: 7rem;
  line-height: 1;
  color: var(--clr-electric);
  opacity: 0.12;
  font-style: italic;
  pointer-events: none;
  user-select: none;
}

.ow-review-stars {
  color: #f59e0b;
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.875rem;
}

.ow-review-quote {
  margin: 0 0 1.25rem;
}

.ow-review-quote p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.65;
  color: var(--clr-navy);
  font-style: italic;
  margin: 0;
}

.ow-review-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ow-review-author .review-avatar {
  flex-shrink: 0;
}

.ow-review-author .review-name {
  color: var(--clr-navy);
  font-weight: 600;
  font-size: 0.875rem;
  margin: 0;
}

.ow-review-author .review-role {
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.8125rem;
  margin: 0.125rem 0 0;
}

/* ── Our work photo galleries ── */

.ow-scatter-row {
  position: relative;
  overflow: visible;
}

/* Brief sits above the navy Solution so its stacked frames can overhang
   the angled divide for depth. */
.ow-scatter-row--brief {
  position: relative;
  z-index: 2;
  border-bottom: none;
}

/* Solution: dark navy section that rises over the white Brief on an angle,
   mirroring the home page "Our Work" section. */
.ow-scatter-row--solution.angled-top {
  --angle-h: 90px;
  z-index: 1;
  /* Full-bleed navy band (like the home "Our Work"): spans the viewport,
     with its own gutter and a max-width inner via .ow-scatter-inner.
     Top padding clears the clipped angle corner. */
  padding-left: clamp(1.25rem, 5vw, 3rem);
  padding-right: clamp(1.25rem, 5vw, 3rem);
  padding-top: calc(var(--angle-h) + clamp(1rem, 3vw, 2rem));
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

/* Two-column layout — near-even split so the image column is large and
   legible. Text and images both anchor to the top of the row. */
.ow-scatter-inner {
  display: grid;
  /* Text ~1.32fr : Image ~0.88fr — text column +20%, image column −20% */
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.88fr);
  align-items: stretch;
  max-width: var(--max-w);
  margin: 0 auto;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.ow-scatter-row--solution .ow-scatter-inner {
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.32fr);
}

.ow-scatter-text {
  min-width: 0;
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  max-width: 920px;
}

/* Brief: text left, frames right */
.ow-scatter-row--brief .ow-scatter-text {
  padding-right: clamp(1rem, 3vw, 2.5rem);
}

/* Solution: frames left, text right */
.ow-scatter-row--solution .ow-scatter-text {
  padding-left: clamp(1.5rem, 4vw, 3.5rem);
}
.ow-scatter-row--solution .ow-stack        { grid-column: 1; grid-row: 1; }
.ow-scatter-row--solution .ow-scatter-text { grid-column: 2; grid-row: 1; }

/* Light-text variants for the navy Solution section */
.ow-section-label--light { color: var(--clr-white); }
.ow-prose--light,
.ow-prose--light p,
.ow-prose--light li { color: var(--clr-muted2); }
.ow-prose--light h2,
.ow-prose--light h3,
.ow-prose--light h4,
.ow-prose--light strong { color: var(--clr-white); }
.ow-prose--light ul li::marker { color: var(--clr-electric); }

@media (max-width: 900px) {
  .ow-scatter-row--brief .ow-scatter-inner,
  .ow-scatter-row--solution .ow-scatter-inner {
    grid-template-columns: 1fr;
  }

  .ow-scatter-row--brief .ow-scatter-text,
  .ow-scatter-row--solution .ow-scatter-text {
    grid-row: 1;
    grid-column: 1;
    padding: clamp(2rem, 5vw, 3rem) 0 clamp(1.5rem, 4vw, 2rem);
  }

  .ow-scatter-row--brief .ow-stack,
  .ow-scatter-row--solution .ow-stack {
    grid-row: 2;
    grid-column: 1;
    max-width: 100%;
    margin: 0;
    /* No sticky on mobile — frames sit below the text as a normal stack */
    position: static;
  }

  /* Give the Brief images clear space above the Solution band */
  .ow-scatter-row--brief {
    padding-bottom: clamp(2rem, 6vw, 3rem);
  }

  /* On mobile the Brief stack is full-width and extends into the region the
     angled Solution pulls up over (negative margin). Cancel that overlap and
     drop the diagonal clip so the two sections never collide. */
  .ow-scatter-row--solution.angled-top {
    margin-top: 0;
    clip-path: none;
    padding-top: clamp(2.5rem, 6vw, 3.5rem);
  }
  .ow-scatter-row--solution.angled-top::before {
    content: none;
  }
}

/* ── Lightbox ── */
.ow-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.ow-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ow-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 2, 22, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ow-lightbox-stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: calc(100vw - 3rem);
  max-height: calc(100vh - 3rem);
  padding: 0 0.5rem;
}

.ow-lightbox-img-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ow-lightbox-img-wrap img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 6rem);
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  transition: opacity 0.2s ease;
}

.ow-lightbox-close {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  color: #fff;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t);
}

.ow-lightbox-close:hover {
  background: rgba(255,255,255,0.22);
}

.ow-lightbox-nav {
  flex: 0 0 auto;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  color: #fff;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t);
}

.ow-lightbox-nav:hover {
  background: rgba(255,255,255,0.22);
}

.ow-lightbox-counter {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.6);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  pointer-events: none;
}

/* Archive — no angled top, full-page padding */
.our-work-archive {
  padding-top: var(--hero-top-gap);
}

@media (max-width: 900px) {
  .ow-single-hero .ow-hero-inner {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }
}

/* .ow-single-section is now stacked by default — no grid override needed on mobile */

/* =============================================
   CONTACT PAGE
   ============================================= */
.contact-page {
  min-height: 100vh;
}

.contact-page-hero {
  padding: 0 clamp(1.25rem, 5vw, 3rem);
  color: var(--clr-white);
}

.contact-page-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-top: var(--hero-top-gap);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}

.contact-page-title {
  color: var(--clr-white);
  max-width: 900px;
}

.contact-page-intro {
  max-width: 720px;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--clr-muted2);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.75;
}

.contact-page-intro > * + * {
  margin-top: 0.85em;
}

.contact-page-intro a {
  color: var(--clr-glow);
  font-weight: 700;
  text-underline-offset: 0.18em;
}

.contact-page-body {
  --angle-h: 60px;
  padding: calc(var(--angle-h) + clamp(2rem, 5vw, 3.5rem)) clamp(1.25rem, 5vw, 3rem) clamp(4rem, 8vw, 6rem);
}

.contact-page-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.contact-page-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(1.25rem, 4vw, 2rem);
  align-items: start;
}

.contact-page-form-panel,
.contact-page-details {
  border-radius: var(--radius-lg);
}

.contact-page-form-panel {
  background: rgba(8, 8, 31, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 24px 70px rgba(2, 2, 22, 0.16);
}

.contact-page-form-intro {
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.contact-page-form-intro h2 {
  color: var(--clr-white);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 0 0 0.75rem;
}

.contact-page-form-intro-copy {
  color: var(--clr-muted2);
  font-size: 0.975rem;
  line-height: 1.65;
}

.contact-page-form-intro-copy > * + * {
  margin-top: 0.7em;
}

.contact-page-form-intro-copy a {
  color: var(--clr-glow);
  font-weight: 700;
  text-underline-offset: 0.18em;
}

.contact-page-form,
.contact-page-form.contact-modal-form {
  margin: 0;
}

.contact-page-empty {
  color: var(--clr-muted2);
  line-height: 1.6;
  margin: 0;
}

.contact-page-details {
  display: grid;
  gap: 1rem;
}

.contact-detail-block {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(246, 247, 255, 0.98) 0%, rgba(255, 255, 255, 1) 62%),
    var(--clr-white);
  border: 1px solid rgba(91, 94, 244, 0.16);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 3vw, 1.45rem);
  box-shadow: 0 18px 45px rgba(2, 2, 22, 0.08);
}

.contact-detail-block::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -54px;
  top: -58px;
  border-radius: 50%;
  background: rgba(91, 94, 244, 0.08);
  pointer-events: none;
}

.contact-detail-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.contact-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--clr-electric), #7f83ff);
  color: var(--clr-white);
  box-shadow: 0 12px 28px rgba(91, 94, 244, 0.24);
  flex: 0 0 auto;
}

.contact-detail-icon svg {
  width: 19px;
  height: 19px;
}

.contact-detail-block h2 {
  color: var(--clr-bg);
  font-size: clamp(1.125rem, 2vw, 1.35rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0;
}

.contact-detail-richtext,
.contact-detail-list,
.contact-detail-link {
  color: #242434;
  font-size: 0.975rem;
  line-height: 1.65;
}

.contact-detail-richtext > * + * {
  margin-top: 0.7em;
}

.contact-detail-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-detail-list li {
  display: grid;
  gap: 0.3rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(91, 94, 244, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
}

.contact-detail-list span {
  color: var(--clr-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contact-detail-list a,
.contact-detail-link {
  color: var(--clr-electric);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-detail-list a:hover,
.contact-detail-link:hover {
  color: #474af1;
}

.contact-page-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.contact-page-actions .contact-action-btn {
  min-height: 48px;
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(91, 94, 244, 0.14);
}

.contact-page-actions .contact-action-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.contact-page-actions .btn-ghost {
  background: var(--clr-white);
  border-color: rgba(91, 94, 244, 0.2);
  color: var(--clr-bg);
}

.contact-page-actions .btn-ghost:hover {
  background: #f6f7ff;
  border-color: var(--clr-electric);
  color: var(--clr-electric);
}

@media (max-width: 900px) {
  .contact-page-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .contact-page-hero-inner {
    padding-bottom: clamp(4rem, 18vw, 6rem);
  }

  .contact-page-actions {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   CONTACT MODAL
   ============================================= */
.contact-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(2, 2, 22, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-menu);
}

.contact-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 401;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-menu);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.contact-modal.open {
  opacity: 1;
  pointer-events: all;
}

.contact-modal-inner {
  position: relative;
  width: min(640px, 100%);
  background: rgba(8, 8, 31, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: clamp(2rem, 5vw, 3rem);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.4);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}

.contact-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--clr-white);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--t);
  flex-shrink: 0;
}

.contact-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.contact-modal-close span {
  position: absolute;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.contact-modal-close span:first-child { transform: rotate(45deg); }
.contact-modal-close span:last-child  { transform: rotate(-45deg); }

/* Loading spinner */
.contact-modal-loading {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}

.contact-modal-loading span {
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--clr-electric);
  border-radius: 50%;
  animation: contact-spin 0.7s linear infinite;
}

@keyframes contact-spin {
  to { transform: rotate(360deg); }
}

/* Intro copy */
.contact-modal-intro {
  margin-bottom: 1.5rem;
  padding-right: 2.5rem;
}

.contact-modal-intro p {
  font-size: clamp(0.9rem, 2vw, 1rem);
  line-height: 1.7;
  color: var(--clr-muted2);
  margin: 0 0 0.75rem;
}

.contact-modal-intro p:last-child { margin-bottom: 0; }

.contact-modal-intro h2,
.contact-modal-intro h3 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--clr-white);
  margin: 0 0 0.75rem;
}

/* WPForms overrides inside modal */
.contact-modal-form {
  margin-bottom: 1.5rem;
}

.contact-modal-form .wpforms-container,
.contact-modal-form div.wpforms-container-full {
  margin: 0 !important;
  padding: 0 !important;
}

.contact-modal-form .wpforms-form {
  margin: 0 !important;
}

.contact-modal-form .wpforms-field-container {
  display: grid !important;
  gap: 0.95rem !important;
}

.contact-modal-form .wpforms-field {
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.contact-modal-form .wpforms-field fieldset {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.contact-modal-form .wpforms-field-medium,
.contact-modal-form .wpforms-field input:not([type="radio"]):not([type="checkbox"]),
.contact-modal-form .wpforms-field textarea,
.contact-modal-form .wpforms-field select {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

.contact-modal-form .wpforms-field input:not([type="radio"]):not([type="checkbox"]),
.contact-modal-form .wpforms-field textarea,
.contact-modal-form .wpforms-field select {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius) !important;
  color: var(--clr-white) !important;
  font-family: inherit !important;
  font-size: 0.9375rem !important;
  line-height: 1.45 !important;
  padding: 0.65rem 0.875rem !important;
  transition: border-color var(--t) !important;
  min-height: 44px !important;
  box-shadow: none !important;
}

.contact-modal-form .wpforms-field textarea {
  min-height: 112px !important;
  resize: vertical !important;
}

.contact-modal-form .wpforms-field input:not([type="radio"]):not([type="checkbox"]):focus,
.contact-modal-form .wpforms-field textarea:focus,
.contact-modal-form .wpforms-field select:focus {
  border-color: var(--clr-electric) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(91, 94, 244, 0.15) !important;
}

.contact-modal-form .wpforms-field input:not([type="radio"]):not([type="checkbox"])::placeholder,
.contact-modal-form .wpforms-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.56) !important;
  opacity: 1 !important;
}

.contact-modal-form .wpforms-field-label,
.contact-modal-form .wpforms-field-label-inline,
.contact-modal-form legend.wpforms-field-label {
  color: var(--clr-muted2) !important;
  font-family: inherit !important;
}

.contact-modal-form .wpforms-field-label,
.contact-modal-form legend.wpforms-field-label {
  display: block !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.4rem !important;
}

.contact-modal-form .wpforms-required-label {
  color: var(--clr-accent-light) !important;
}

.contact-modal-form .wpforms-field ul {
  display: grid !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.contact-modal-form .wpforms-field-radio li {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  margin: 0 !important;
  padding: 0.7rem 0.85rem !important;
  min-height: 44px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius) !important;
  transition: border-color var(--t), background var(--t) !important;
}

.contact-modal-form .wpforms-field-radio li:hover,
.contact-modal-form .wpforms-field-radio li:has(input:checked) {
  background: rgba(91, 94, 244, 0.12) !important;
  border-color: rgba(165, 180, 252, 0.45) !important;
}

.contact-modal-form .wpforms-field-radio input[type="radio"] {
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--clr-electric) !important;
}

.contact-modal-form .wpforms-field-radio .wpforms-field-label-inline {
  flex: 1 1 auto !important;
  margin: 0 !important;
  color: var(--clr-white) !important;
  font-size: 0.9375rem !important;
  line-height: 1.35 !important;
  cursor: pointer !important;
}

.contact-modal-form .wpforms-field-description {
  margin: 0.65rem 0 0 !important;
  color: var(--clr-muted2) !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

.contact-modal-form .wpforms-error,
.contact-modal-form label.wpforms-error {
  color: #ffb4b4 !important;
  font-size: 0.8125rem !important;
  margin-top: 0.35rem !important;
}

.contact-modal-form .wpforms-field input:not([type="radio"]):not([type="checkbox"]).wpforms-error,
.contact-modal-form .wpforms-field textarea.wpforms-error,
.contact-modal-form .wpforms-field select.wpforms-error {
  border-color: rgba(255, 120, 120, 0.7) !important;
}

.contact-modal-form .wpforms-submit-container {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  margin: 1rem 0 0 !important;
  padding: 0 !important;
}

.contact-modal-form .wpforms-submit-container .wpforms-submit,
.contact-modal-form .wpforms-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  min-width: 0 !important;
  width: auto !important;
  background: linear-gradient(120deg, #3aa0ff 0%, var(--clr-electric) 100%) !important;
  border: none !important;
  border-radius: 99px !important;
  color: var(--clr-white) !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 1rem 2rem !important;
  cursor: pointer !important;
  box-shadow: 0 0 28px rgba(58, 160, 255, 0.35) !important;
  text-decoration: none !important;
  transition: filter var(--t), box-shadow var(--t), border-color var(--t), color var(--t) !important;
  white-space: nowrap !important;
}

.contact-modal-form .wpforms-submit svg {
  width: 17px !important;
  height: 17px !important;
  flex-shrink: 0 !important;
  transition: transform var(--t) !important;
}

.contact-modal-form .wpforms-submit:hover {
  filter: brightness(1.05) !important;
  box-shadow: 0 0 40px rgba(58, 160, 255, 0.55) !important;
}

.contact-modal-form .wpforms-submit:hover svg {
  transform: translateX(3px) !important;
}

.contact-modal-form .wpforms-submit.is-loading,
.contact-modal-form .wpforms-submit:disabled {
  cursor: wait !important;
  filter: brightness(0.98) !important;
  opacity: 0.9 !important;
}

.contact-modal-form .wpforms-submit.is-loading svg {
  display: none !important;
}

.contact-modal-form .wpforms-submit.is-loading::after {
  content: "" !important;
  width: 17px !important;
  height: 17px !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  border-top-color: var(--clr-white) !important;
  border-radius: 50% !important;
  animation: contact-spin 0.7s linear infinite !important;
}

.contact-modal-form .wpforms-submit-spinner {
  display: none !important;
}

/* Action buttons — call + WhatsApp */
.contact-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--clr-border);
}

.contact-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.contact-modal-actions .btn-ghost {
  border-color: rgba(255, 255, 255, 0.15);
}

.contact-modal-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 480px) {
  .contact-modal-actions {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   404 / ERROR PAGE
   ============================================= */
.error-404 {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: calc(var(--nav-h) + 3rem) clamp(1.25rem, 5vw, 3rem) 5rem;
  background: var(--clr-bg);
}

.error-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.error-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(91, 94, 244, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 10% 90%, rgba(165, 180, 252, 0.07) 0%, transparent 60%);
}

.error-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: error-orb-float 11s ease-in-out infinite;
}

.error-orb-1 {
  width: clamp(280px, 45vw, 520px);
  height: clamp(280px, 45vw, 520px);
  background: rgba(91, 94, 244, 0.12);
  top: -12%;
  left: -6%;
}

.error-orb-2 {
  width: clamp(220px, 35vw, 420px);
  height: clamp(220px, 35vw, 420px);
  background: rgba(165, 180, 252, 0.08);
  bottom: -10%;
  right: -6%;
  animation-delay: -5s;
  animation-direction: reverse;
}

@keyframes error-orb-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-24px) scale(1.05); }
}

.error-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

.error-code {
  font-size: clamp(6rem, 20vw, 11rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.05em;
  margin-bottom: 0.5rem;
  background: linear-gradient(120deg, var(--clr-electric) 0%, var(--clr-glow) 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 40px rgba(91, 94, 244, 0.25));
}

.error-heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--clr-white);
  margin-bottom: 1rem;
}


.error-sub {
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  line-height: 1.7;
  color: var(--clr-muted2);
  max-width: 460px;
  margin: 0 auto 2.5rem;
}

.error-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.875rem;
}

@media (max-width: 560px) {
  .error-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .error-actions .btn {
    width: 100%;
    justify-content: center;
  }
}