:root {
  --blue: #1668ff;
  --blue-dark: #0b4ed1;
  --blue-soft: #e8f1ff;
  --sky-1: #bfdcff;
  --sky-2: #e3f0ff;
  --ink: #0d1526;
  --ink-2: #1b2536;
  --muted: #5c6779;
  --muted-2: #8791a3;
  --line: #e6eaf1;
  --bg: #ffffff;
  --bg-soft: #f5f7fb;
  --white: #ffffff;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(13, 21, 38, 0.05);
  --shadow: 0 12px 34px rgba(13, 21, 38, 0.08);
  --shadow-lg: 0 30px 70px rgba(13, 21, 38, 0.14);

  /* fluid layout: sections span the full viewport, held off the edges by --gutter */
  --container: 100%;
  --gutter: 80px;
  --reading: 900px; /* cap for centered paragraphs only, not for layout */
  --section-y: clamp(56px, 8vw, 110px);

  --heading-font: "Plus Jakarta Sans", sans-serif;
  --body-font: "Plus Jakarta Sans", sans-serif;

  /* --hero-bg: url("images/hero-bg.svg"); */
}

/* ---------- 2. Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--body-font);
  font-size: clamp(15px, 0.35vw + 14px, 16.5px);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
}
p {
  margin: 0 0 1em;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) 0;
  z-index: 999;
}
.skip-link:focus {
  left: 0;
}

/* ---------- 3. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container.narrow > .h2,
.container.narrow > .lead,
.container.narrow > .eyebrow {
  max-width: 720px;
  margin-inline: auto;
}

.section {
  padding-block: 50px;
}

/* keep anchor targets clear of the fixed header */
section[id] {
  scroll-margin-top: 96px;
}

.center {
  text-align: center;
}

.text-blue {
  color: #1256e4;
}

/* ---------- 4. Typography & buttons ---------- */
.h2 {
  font-size: clamp(28px, 4.2vw, 46px);
  margin-bottom: 18px;
}
.h3 {
  font-size: clamp(21px, 2.4vw, 30px);
  margin-bottom: 12px;
}

.lead {
  color: #6d7480;
  font-size: 19px;
  font-weight: 400;
  font-family: "Raleway", sans-serif;
}
.lead:not(.center) {
  margin-inline: 0;
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.52px;
  line-height: 100%;
  text-transform: uppercase;
  color: #344054;
  background: #ffffffbf;
  padding: 8px 12px;
  border-radius: 99px;
  border: 1px solid #e4e7ec;
  display: inline-block;
}
.eyebrow-pill {
  display: inline-block;
  padding: 8px 28px;
  border-radius: 39px;
  background: #9191911a;
  color: #ff8a1c;
}

.heading-main {
  font-size: clamp(30px, 4.2vw, 60px);
  font-weight: 800;
  color: #111318;
  margin-bottom: clamp(20px, 2.4vw, 35px);
  line-height: 1.2;
  letter-spacing: 0px;
  font-family: var(--heading-font);
}
.center-pill {
  display: block;
  width: max-content;
  margin-inline: auto;
}
.center-eyebrow {
  /* .eyebrow is an inline-block pill, so text-align alone only centres the
     text inside it — the pill itself needs auto margins to sit in the middle */
  display: block;
  width: max-content;
  margin-inline: auto;
  text-align: center;
}

.br-lg {
  display: none;
}

.btn {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}
.btn::after {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E")
    center / 12px no-repeat;
  flex: none;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(22, 104, 255, 0.32);
}
.btn:active {
  transform: translateY(0);
}

.btn-primary {
  --btn-bg: var(--blue);
}
.btn-dark {
  --btn-bg: #1a1a1a;
  border: 1px solid #2a2a2a;
}
.btn-dark:hover {
  box-shadow: 0 16px 32px rgba(13, 21, 38, 0.26);
}
.btn-white {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.btn-white::after {
  background-color: rgba(13, 21, 38, 0.1);
}
.btn-lg {
  padding: 17px 34px;
  font-size: 13.5px;
}
.btn-sm {
  padding: 10px 20px;
  font-size: 16px;
  color: #d1d5db;
  font-weight: 400;
}
.btn-how {
  text-transform: none;
  letter-spacing: normal;
  gap: 8px;
}
.btn-how::after {
  content: none;
}

/* ---------- 5. Header ---------- */
/* Fixed so the pill nav floats over the hero without reserving flow height */
.site-header {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 100;
}

.nav-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  padding: 8px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 10px 34px rgba(13, 21, 38, 0.08),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.9);
}

/* .nav-header img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex: none;
  object-fit: contain;
} */

.nav-header .brand {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.03em;
  flex: none;
  position: relative;
  border: 1px solid rgba(77, 164, 244, 0.7);
  box-shadow: 0 0 10px rgba(77, 164, 244, 0.5);
}

.nav-header .brand::before {
  content: "";
  position: absolute;
  top: 11px;
  right: 17px;
  width: 2.5px;
  height: 2.5px;
  background: #f97316;
  box-shadow:
    -4px 5px 0 #4a9cf0,
    3px 4px 0 #3a76dc;
  border-radius: 50%;
}

.nav-chip {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.nav-chip img {
  height: 44px;
  width: auto;
  display: block;
}

@keyframes sparkle-gif {
  0% {
    transform: scale(0.8) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1) rotate(10deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.9) rotate(-5deg);
    opacity: 0.9;
  }
}

/* Center the links in the remaining space and push CTA to the right */
.nav-panel {
  display: flex;
  align-items: center;
  flex: 1;
  gap: clamp(12px, 1.5vw, 28px);
  justify-content: flex-end;
}
/* Centred by taking the space left between the chip and the CTA, not by
   absolute-positioning to the middle of the pill — a centred overlay ignores
   how wide its neighbours are, so the sixth item used to run under the chip
   around 1000–1100px. As the pill narrows the gap collapses first, so the
   labels never wrap and never overlap. */
.nav-links {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(14px, 2vw, 40px);
}
.nav-links a {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  color: #000000;
  font-family: var(--body-font);
}
/* .nav-links a:hover {
  color: var(--blue);
} */

/* Dropdown carets — hidden for now, not removed. The <svg> stays in the markup
   on all five pages so the menus can be switched back on with a one-line change
   here once the Services / Industries / Resources dropdowns are built. */
.nav-links a svg {
  display: none;
  margin-left: 8px;
}

/* ---------- services mega menu ----------
   CSS-only: the panel opens on hover and on keyboard focus inside the item.
   It is positioned against .nav-header (the pill) rather than the link, so a
   1000px panel stays centred on the bar instead of running off the left edge;
   the little arrow stays with the link. */
.nav-links li {
  position: static;
}

.nav-mega {
  position: relative;
}

/* the caret is hidden site-wide — show it for the item that actually opens */
.nav-mega > a svg {
  display: block;
  width: 13px;
  height: 13px;
  transition: transform 0.28s ease;
}

.nav-mega:hover > a svg,
.nav-mega:focus-within > a svg,
.nav-mega.open > a svg {
  transform: rotate(180deg);
}

/* invisible bridge across the gap between the link and the panel, so the
   menu does not close while the pointer travels down to it */
.nav-mega > a {
  position: relative;
}

.nav-mega > a::after {
  content: "";
  position: absolute;
  left: -22px;
  right: -22px;
  top: 100%;
  height: 40px;
}

.mega {
  position: absolute;
  z-index: 2;
  top: calc(100% + 8px);
  left: 50%;
  width: min(1004px, calc(100vw - 32px));
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 24px;
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 26px 60px rgba(13, 21, 38, 0.16),
    0 2px 8px rgba(13, 21, 38, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition:
    opacity 0.28s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.28s;
}

.nav-mega:hover .mega,
.nav-mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* hairlines between the cells, drawn with borders so they never double up */
.nav-links .mega-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  /* nav links are nowrap by default — these cells wrap like normal copy */
  white-space: normal;
  padding: 20px 22px;
  border-radius: 14px;
  transition: background 0.24s ease;
}

.nav-links .mega-item:hover {
  background: #f6f8fd;
}

.mega-ico {
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--tone-bg);
  color: var(--tone);
  box-shadow: 0 3px 12px var(--tone-shadow);
}

/* nav svgs are hidden site-wide (the carets); these icons are not carets */
.nav-links .mega-ico svg {
  display: block;
  width: 26px;
  height: 26px;
}

.mega-txt {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.mega-txt strong {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: #111318;
}

.mega-txt span {
  font-size: 14px;
  line-height: 1.5;
  color: #737da1;
}

/* per-item tones, mirroring the icon tiles in the design */
.c-blue {
  --tone: #2563eb;
  --tone-bg: #e9f0ff;
  --tone-shadow: rgba(37, 99, 235, 0.16);
}
.c-violet {
  --tone: #7c3aed;
  --tone-bg: #f2ecff;
  --tone-shadow: rgba(124, 58, 237, 0.16);
}
.c-indigo {
  --tone: #4f46e5;
  --tone-bg: #ecebfe;
  --tone-shadow: rgba(79, 70, 229, 0.16);
}
.c-orange {
  --tone: #f97316;
  --tone-bg: #fff0e4;
  --tone-shadow: rgba(249, 115, 22, 0.16);
}
.c-pink {
  --tone: #ec4899;
  --tone-bg: #ffeaf4;
  --tone-shadow: rgba(236, 72, 153, 0.16);
}
.c-teal {
  --tone: #0d9488;
  --tone-bg: #e2f7f4;
  --tone-shadow: rgba(13, 148, 136, 0.16);
}
.c-amber {
  --tone: #f59e0b;
  --tone-bg: #fff5e1;
  --tone-shadow: rgba(245, 158, 11, 0.16);
}
.c-purple {
  --tone: #9333ea;
  --tone-bg: #f7ecff;
  --tone-shadow: rgba(147, 51, 234, 0.16);
}
.c-red {
  --tone: #ef4444;
  --tone-bg: #ffeaea;
  --tone-shadow: rgba(239, 68, 68, 0.16);
}
.c-green {
  --tone: #16a34a;
  --tone-bg: #e6f7ec;
  --tone-shadow: rgba(22, 163, 74, 0.16);
}

/* Laptop tier: still the floating overlay panel (that switch happens at
   992px), but a 1004px-wide, 3-across grid has no room to breathe on an
   ~1100-1300px screen — copy wraps to three lines and the panel reads as
   cramped. Two columns give each cell double the width; the panel itself
   keeps its full 1004px cap so it still spans edge to edge with the nav
   pill above it, instead of floating narrower and exposing page content
   at its sides. */
@media (min-width: 993px) and (max-width: 1300px) {
  .mega-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.nav-demo {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 12px 28px;
  border-radius: 76px;
  background: #367cff;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  gap: 8px;
  transition: all 0.3s ease;
}

.nav-demo svg {
  width: 14px;
  height: 13px;
  transition: transform 0.3s ease;
}

.nav-demo:hover {
  background: #1b5edc;
}

.nav-demo:hover svg {
  transform: translate(3px, -3px);
}

/* burger (CSS-only, shown on small screens) */
.nav-burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  flex: none;
  margin-left: auto;
}
.nav-burger span {
  width: 19px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  pointer-events: none;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease;
}

/* ---------- 6. Hero ---------- */
/* The banner artwork carries the sky, mountains and doodles; the cards and the
   device mockup are real elements layered on top of it. So the job here is to
   FRAME the artwork — locked to the full width, with the section height
   tracking a fixed ratio — and then park each float at a percentage offset so
   the whole composition scales together. .hero-inner carries the top padding
   because .site-header is position:fixed and reserves no flow height. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: min(50vw, 960px);
  padding-bottom: 4vw;
  background-image:
    url("./images/hero-banner.png"),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 55%, #fff 100%);
  background-repeat: no-repeat, no-repeat;
  background-position:
    center top,
    center top;
  background-size:
    100% auto,
    cover;
}

.hero-inner {
  position: relative;
  /* clears the fixed header (14px offset + ~68px pill) */
  padding-top: 150px;
  text-align: center;
  z-index: 2;
}

/* Floating Hero Assets */
.hero-float {
  position: absolute;
  z-index: 1;
}

/* the cards breathe; the device mockup stays perfectly still, since it owns
   its transform for centring */
.hero-float:not(.hero-screen-img) {
  animation: tagZoomInOut 4s ease-in-out infinite;
}

@keyframes tagZoomInOut {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.hero-screen-img {
  left: 50%;
  transform: translateX(-50%);
  width: 43%; /* match scaling of laptop background */
  bottom: 0%; /* aligns with bottom of laptop screen area */
  z-index: 0;
  border-radius: 4px 4px 0 0;
}

.hf-l1 {
  top: 17%;
  left: 20%;
}
.hf-l2 {
  top: 35%;
  left: 6%;
  animation-delay: 1s;
}
.hf-l3 {
  bottom: 33%;
  left: 14%;
  animation-delay: 2s;
}
.hf-l4 {
  bottom: 13%;
  left: 14%;
}

/* Right side assets */
.hf-r1 {
  top: 18%;
  right: 16%;
  width: 90px;
  animation-delay: 0.5s;
}
.hf-r2 {
  top: 35%;
  right: 10%;
  animation-delay: 1s;
}
.hf-r3 {
  bottom: 33%;
  right: 14%;
  animation-delay: 2s;
}
/* the rotating "iapp technologies" seal — square, with the arrow glyph
   centred inside the ring */
.hf-r4 {
  bottom: 12%;
  right: 7%;
  width: 140px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-title {
  font-size: 76px;
  font-weight: 900;
  line-height: 101px;
  letter-spacing: -1.5px;
  margin-bottom: 35px;
  font-family: var(--heading-font);
}

.ai-badge {
  display: inline-block;
  background: #0072f6;
  color: #fff;
  padding: 8px 0.25em;
  margin-left: 0.1em;
  line-height: 1;
  transform: rotate(3deg);
}

.hero-sub {
  color: #656565;
  max-width: 37vw;
  margin: 0 auto 2.4vw;
  font-size: 16px;
  line-height: 23px;
  letter-spacing: 0px;
}

/* ---------- 7. Stats ---------- */
.stats {
  background: var(--bg);
}
.stats-card {
  margin-top: clamp(28px, 4vw, 46px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #ffffff;
  box-shadow: 0px 10px 40px 0px #00000014;

  border-radius: 20px;
  padding: 85px 20px;
}
.stat {
  text-align: center;
  padding: 10px 12px;
  position: relative;
}
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: #ececec;
}
.stat-num {
  display: block;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.6px;
  line-height: 34px;
  /* Poppins is not one of the loaded families — use the project heading face */
  font-family: var(--heading-font);
  text-transform: uppercase;
}
.plus {
  color: #0072f6;
}
.stat-lbl {
  font-size: 13px;
  font-weight: 800;
  color: #777777;
  text-transform: uppercase;
}

.awards {
  background: var(--bg);
  padding: 50px 0px;
}
/* --- full-bleed auto-scrolling strip --- */
.marquee {
  margin-top: 70px;
  overflow: hidden; /* clips the track at the viewport edges */
  width: 100%;
}
.marquee-track {
  display: flex;
  width: max-content; /* let the two rows define the real width */
  animation: award-scroll 45s linear infinite;
}
.award-row {
  display: flex;
  gap: 40px;
  padding-right: 40px; /* keeps the gap intact across the loop seam */
}

/* two identical rows sit side by side, so sliding exactly half the track
   lands copy 2 where copy 1 started — no jump when it restarts */
@keyframes award-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* let people stop it to actually read a badge */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

.award {
  flex: none;
  width: 170px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 14px 16px;
  text-align: center;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.award:hover {
  box-shadow: var(--shadow);
}

.award-badge {
  height: 108px;
  display: grid;
  place-items: center;
}
.award-badge img {
  max-height: 108px;
  width: auto;
  object-fit: contain;
}

.award-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

/* ---------- 8b. Search shift (problem statement, before Services) ---------- */
.search-shift {
  background: linear-gradient(180deg, var(--blue-soft) 0%, #fff 100%);
}

.search-shift .lead {
  max-width: 760px;
  margin-inline: auto;
}

.search-shift-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 40px;
}

.search-shift-card {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.search-shift-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.search-shift-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: var(--white);
}

.search-shift-icon svg {
  width: 22px;
  height: 22px;
}

.search-shift-card p {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

@media (max-width: 720px) {
  .search-shift-card {
    flex-basis: 100%;
  }
}

.transform {
  background:
    radial-gradient(
      700px circle at 18% 12%,
      rgba(37, 99, 235, 0.09),
      transparent 60%
    ),
    radial-gradient(
      700px circle at 84% 88%,
      rgba(124, 58, 237, 0.08),
      transparent 60%
    ),
    #fff;
}

/* the eyebrow reads as a bordered pill in this section only */
.transform .center-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 9px 13px 10px;
  border: 1px solid #e4e7ec;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 6px 24px rgba(16, 24, 40, 0.05);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #344054;
}

.transform .heading-main {
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.23;
  letter-spacing: -0.015em;
  color: #111318;
}

.switcher {
  margin-top: clamp(30px, 4vw, 48px);
}

.switcher > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 3vw, 56px);
  margin-bottom: clamp(28px, 3.4vw, 48px);
}

.switch-label {
  width: 228px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #d3d3d3;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid #d5d8dd;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(6px);
  transition:
    color 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

#ba-before:checked ~ .switch-row .lbl-before,
#ba-after:checked ~ .switch-row .lbl-after {
  color: #111318;
  border-color: #e3d5dc;
  box-shadow: var(--shadow-sm);
  background:
    radial-gradient(
      circle at bottom right,
      rgba(124, 58, 237, 0.05),
      transparent 60%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(37, 99, 235, 0.07),
      transparent 60%
    ),
    #ffffff;
}

/* ---- machined dial between the two labels ----
   The dial itself is the artwork exported from the design; the radios only
   rotate it, so the needle winds over as the panels swap. */
.switch-knob {
  flex: none;
  /* the artwork carries transparent padding, so the box is wider than the dial;
     its shading is baked in — no CSS shadow, which would trace the bitmap's
     edge and turn with it */
  width: clamp(142px, 12.7vw, 190px);
  display: grid;
  place-items: center;
}

.knob-face {
  display: block;
  width: 100%;
  height: auto;
  /* the dial sits dead centre in its canvas, so the default origin is the
     dial's own axis */
  transform-origin: 50% 50%;
  transform: rotate(0deg);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

#ba-after:checked ~ .switch-row .knob-face {
  transform: rotate(166deg);
}

.panel-stack {
  display: grid;
}

/* Each panel owns one accent (--acc) — the chip, the tick icons and the metric
   arrows all read from it, so swapping panels swaps the colour story at once. */
.panel {
  --acc: #ff6666;
  --acc-soft: rgba(255, 102, 102, 0.1);
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 412px);
  column-gap: clamp(28px, 4vw, 72px);
  row-gap: clamp(24px, 2.6vw, 38px);
  align-content: start;
  padding: clamp(30px, 3.4vw, 52px) clamp(28px, 3.4vw, 56px);
  border-radius: 40px;
  background: #fafafb;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.45s;
}

.panel-copy {
  grid-column: 1;
  grid-row: 1;
}

.ticks {
  grid-column: 1;
  grid-row: 2;
}

/* the scoreboard runs down the right-hand side beside heading and checklist */
.panel-metrics {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.panel-chip {
  display: inline-flex;
  align-items: center;
  margin-bottom: 22px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: #ffe3ea;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e7526e;
}

.panel-heading {
  margin: 0;
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 45px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #111318;
  font-family: var(--heading-font);
}

#ba-before:checked ~ .panel-stack .panel-before,
#ba-after:checked ~ .panel-stack .panel-after {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.text-red {
  color: #ff6666;
}

/* checklist runs two across under the statement, as in the design */
.ticks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px) clamp(16px, 2vw, 34px);
  align-content: start;
}

.ticks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: #4b5565;
  font-weight: 500;
  line-height: 1.45;
}

.ticks-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ticks-icon.bad {
  background-color: #ffe9ec;
  color: #e43d5c;
}

.ticks-icon.good {
  background-color: #22c55e;
  color: #ffffff;
}

.ticks-icon svg {
  width: 9px;
  height: 9px;
}

.ticks-icon.good svg {
  width: 11px;
  height: 9px;
}

.panel-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-content: start;
}

.metric {
  position: relative;
  min-height: 117px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid #e7d8de;
  border-radius: 21px;
  padding: 22px 24px;
  backdrop-filter: blur(6px);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.metric:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.metric-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 26px;
  height: auto;
}

.metric-num {
  display: block;
  font-size: clamp(24px, 2.1vw, 30.5px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #111318;
}

.metric-lbl {
  display: block;
  font-size: 13.4px;
  color: #717887;
  font-weight: 500;
  line-height: 1.4;
}

/* ---- the "after" panel flips the whole card to the dark treatment ---- */
.panel-after {
  --acc: #3b82f6;
  --acc-soft: rgba(59, 130, 246, 0.12);
  background:
    radial-gradient(
      62% 58% at 88% 6%,
      rgba(124, 58, 237, 0.55),
      transparent 62%
    ),
    radial-gradient(
      58% 56% at 10% 94%,
      rgba(37, 99, 235, 0.5),
      transparent 64%
    ),
    #0c101a;
}

.panel-after .panel-chip {
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.45);
  color: #7cb0ff;
}

.panel-after .panel-heading {
  color: #ffffff;
}

.panel-after .ticks li {
  color: #dfe5ee;
}

.panel-after .metric {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
}

.panel-after .metric-num {
  color: #ffffff;
}

.panel-after .metric-lbl {
  color: #9aa3b2;
}

.service-heading {
  font-weight: 800;
  font-size: 76px;
  margin-bottom: 36px;
}
/* ---------- 10. Services ---------- */
.services {
  background: var(--bg);
}
.services-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: stretch;
  margin-bottom: clamp(34px, 4vw, 56px);
}
.services-head .h2 {
  margin-bottom: 24px;
}
.services-note {
  position: relative;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
}

.services-note p {
  color: #a3a3a3;
  font-size: 16px;
  font-weight: 500;
}
.services-note strong {
  color: #2c6fec;
}
.seal {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  margin-left: auto;
  margin-top: auto;
}

.seal-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: spin 15s linear infinite;
  fill: #000;
}

/* the black disc parked at the centre of the rotating seal */
.seal-logo {
  width: 50px;
  height: 50px;
  background: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.seal-logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.service-list li {
  display: grid;
  grid-template-columns:
    clamp(70px, 7vw, 120px) minmax(0, 1fr) minmax(0, 1.15fr)
    auto;
  align-items: center;
  column-gap: clamp(16px, 3vw, 56px);
  padding: clamp(18px, 2vw, 26px) 4px;
  border-bottom: 1px solid #262626;
  cursor: pointer;
  transition: padding 0.4s ease;
}
.service-list li:hover,
.service-list li:focus-within {
  padding-block: clamp(26px, 3vw, 44px);
}

.s-num {
  font-size: 69px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px #0072f6;
  transition: -webkit-text-stroke-color 0.3s ease;
}
.service-list li:hover .s-num,
.service-list li:focus-within .s-num {
  -webkit-text-stroke-color: #0072f6;
}
/* if text-stroke is unavailable the numerals would be invisible */
@supports not (-webkit-text-stroke: 1px red) {
  .s-num {
    color: #a8cdf7;
  }
}

.s-name {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #2c2c2c;
  margin: 0;
  transition: color 0.3s ease;
}
.service-list li:hover .s-name,
.service-list li:focus-within .s-name {
  color: #0072f6;
}

.s-desc {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.55;
  color: #111318;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

/* max-height (not height) so the row can grow smoothly without the artwork's
   real size being hard-coded here */
.s-media {
  justify-self: end;
  width: clamp(150px, 15vw, 220px);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.4s ease,
    opacity 0.35s ease;
}
.s-media img {
  width: 100%;
  height: auto;
}

.service-list li:hover .s-desc,
.service-list li:focus-within .s-desc {
  opacity: 1;
  transform: none;
}
.service-list li:hover .s-media,
.service-list li:focus-within .s-media {
  max-height: 200px;
  opacity: 1;
}

/* ---------- 11. Trusted band ---------- */
.band {
  padding: clamp(60px, 8vw, 100px) 0;
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(90deg, #e6eefc 0%, #dff6fe 100%);
}
.band::before,
.band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  filter: blur(40px);
}
.band::before {
  width: 420px;
  height: 200px;
  left: -60px;
  bottom: -40px;
}
.band::after {
  width: 480px;
  height: 220px;
  right: -80px;
  top: -40px;
}
/* lifts the copy above the two blurred glows */
.band .container {
  position: relative;
}
.trusted-heading {
  font-family: var(--heading-font);
  font-size: 55px;
  font-weight: 800;
  color: #000000;
  margin-bottom: 30px;
  line-height: 1.2;
}
.trusted-lead {
  font-size: 22px;
  color: #747576;
  line-height: 1.7;
  max-width: 820px;
  margin: 0 auto 40px auto;
}

/* ---------- 12. Process ---------- */
/* Four alternating full-bleed rows, per the Figma "How We Get You There"
   layout: copy and artwork swap sides, and every second row sits on a
   pale band that runs edge to edge. */
.section.process {
  padding-bottom: 0;
}

.process .container:first-child {
  margin-bottom: clamp(30px, 4vw, 56px);
}

.proc-row {
  padding-block: clamp(36px, 4.4vw, 64px);
}

.proc-row-alt {
  background: #f9fbfe;
}

.proc-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
  /* Figma holds the rows off the edge by ~170px at 1440 */
  max-width: 1104px;
}

/* on the banded rows the artwork leads and the copy follows */
.proc-row-alt .proc-art {
  order: -1;
}

.proc-copy h3 {
  margin: 0 0 14px;
  font-family: var(--heading-font);
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #111318;
}

.proc-copy p {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(18px, 2.1vw, 30px);
  line-height: 1.53;
  color: #6b7280;
}

.proc-art img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin-inline: auto;
}

@media (max-width: 860px) {
  .proc-inner {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  /* stacked, the artwork always leads so the rhythm stays image → copy */
  .proc-row-alt .proc-art,
  .proc-art {
    order: -1;
  }

  .proc-copy p {
    max-width: none;
  }
}

/* ---------- 13. Testimonials ---------- */
.testimonials {
  background: var(--bg) url("./images/testimonial-bg.png") no-repeat center
    center / 100% 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  padding-bottom: clamp(100px, 10vw, 150px);
}

.testimonials .container {
  position: relative;
}

.text-purple {
  color: #5965fd;
}

.tst-header.center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px;
}

.tst-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eef0ff;
  color: #6671ff;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 50px;
  margin-bottom: 24px;
  text-transform: uppercase;
}

.tst-title {
  font-family: var(--heading-font);
  font-size: 56px;
  font-weight: 800;
  color: #000000;
  margin-bottom: 16px;
}

.tst-sub {
  color: #6d7480;
  font-weight: 400;
  font-size: 19px;
  max-width: 600px;
  margin: 0 auto;
}

.tst-main {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: center;
}

.tst-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tst-left > svg {
  margin-bottom: 40px;
}
.tst-left h3 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  color: #111a38;
  margin: 0 0 20px 0;
  font-family: var(--heading-font);
}
.purple-line {
  width: 70px;
  height: 5px;
  background-color: #5965fd;
  border: none;
  border-radius: 10px;
  margin: 0;
}

.tst-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

h2.we-get-heading.center {
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #111318;
  font-family: var(--heading-font);
  margin-bottom: 14px;
}

p.we-get-para.center {
  font-weight: 400;
  font-size: clamp(19px, 2.1vw, 30px);
  line-height: 1.47;
  color: #808080;
  font-family: var(--heading-font);
}
.tst-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0px 4px 63px 0px #4774fb40;

  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.tst-card::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 35%;
  transform: translateX(-50%);
  border-width: 15px 15px 0 15px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
}

.tst-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.tst-meta {
  flex-grow: 1;
}

.tst-meta strong {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #111a38;
}

.tst-meta small {
  display: block;
  font-size: 14px;
  color: #8791a3;
  margin-top: 2px;
}

.small-quote {
  width: 44px;
  height: 44px;
}

.tst-card blockquote {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #34405d;
  margin: 0 0 24px 0;
  flex-grow: 1;
}

.tst-stars {
  display: flex;
  gap: 12px;
}

.tst-stars svg {
  width: 18px;
  height: 18px;
}

h2.cta-heading {
  font-size: 42px;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 51px;
  letter-spacing: 0px;
  font-family: "Raleway", sans-serif;
}

.cta {
  padding-block: clamp(56px, 7vw, 100px);
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #e9f9fa 0%, #e9f8fa 100%);
  margin-bottom: 100px;
}
/* .cta::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 260px;
  right: -120px;
  bottom: -100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  filter: blur(50px);
} */
.cta .container {
  position: relative;
}
.cta .lead {
  margin-bottom: 30px;
}

/* ---------- 15. FAQ ---------- */
#faq {
  background-image: url("./images/Faq.png");
  background-repeat: no-repeat;
  /* without a size the artwork stopped at its natural width and left a hard
     vertical seam on wide screens */
  background-size: cover;
  background-position: center;
}

/* Three grid items, not two columns of stacked content. The list spans both
   rows so the blue card can be pushed to the bottom of the left column,
   and on mobile the natural source order (title -> questions -> card) is
   already the right reading order. */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 100px);
  row-gap: 28px;
  align-items: start;
}
/* The heading and the CTA card ride together and stay pinned while the
   question list — the taller column — scrolls past. */
.faq-left {
  position: sticky;
  top: clamp(96px, 9vw, 124px);
  display: grid;
  gap: clamp(28px, 3vw, 44px);
  align-content: start;
}
.faq-title {
  font-size: 76px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #111318;
  font-family: var(--heading-font);
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-card {
  border-radius: 20px;
  padding: 33px;
  color: #fff;
  background: linear-gradient(135deg, #196dff 0%, #001da0 100%);
}
.faq-card h3 {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 10px;
  color: #ffffff;
  font-family: var(--body-font);
}
.faq-card p {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 55px;
}

/* Same mechanism as .btn-strategy: the disc is absolutely positioned and the
   padding reserved for it swaps sides on hover, so the two halves glide past
   each other instead of snapping. --faq-cta-slot is the disc plus its gap. */
.faq-cta {
  --faq-cta-gap: 10px;
  --faq-cta-disc: 46px;
  --faq-cta-slot: calc(var(--faq-cta-disc) + var(--faq-cta-gap));
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-right: var(--faq-cta-slot);
  border-radius: var(--r-pill);
  text-decoration: none;
  transition:
    padding-left 0.4s ease,
    padding-right 0.4s ease;
}
.faq-cta-label {
  background: #fff;
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 16px 30px;
  border-radius: var(--r-pill);
  transition:
    background 0.4s ease,
    color 0.4s ease;
}
.faq-cta-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--faq-cta-disc);
  height: var(--faq-cta-disc);
  border-radius: 50%;
  background: #fff;
  color: #0a0a0a;
  display: grid;
  place-items: center;
  flex: none;
  transition:
    right 0.4s ease,
    background 0.4s ease,
    color 0.4s ease;
}

.faq-cta:hover {
  padding-right: 0;
  padding-left: var(--faq-cta-slot);
}
.faq-cta:hover .faq-cta-arrow {
  right: calc(100% - var(--faq-cta-disc));
}
/* the disc owns translateY(-50%) for centring, so the spin goes on the icon */
.faq-cta-arrow svg {
  transition: transform 0.4s ease;
}
.faq-cta:hover .faq-cta-arrow svg {
  transform: rotate(45deg);
}
.faq-cta:hover .faq-cta-label,
.faq-cta:hover .faq-cta-arrow {
  background: #000;
  color: #fff;
}

.faq-list details {
  background: #fff;
  border: 1px solid #3737371a;
  border-radius: 26px;
  padding: 24px;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.faq-list details.is-open {
  border-color: rgba(22, 104, 255, 0.28);
  box-shadow: var(--shadow-sm);
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  color: #000000;
  font-family: var(--heading-font);
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
/* The horizontal bar of the plus stays put; only the vertical one rotates and
   fades, so + turns into − rather than swapping icons. */
.faq-list summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: #000000;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 14px no-repeat;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.3s ease;
}
.faq-list details.is-open summary::after {
  transform: rotate(90deg);
  color: var(--blue);
  background: linear-gradient(currentColor, currentColor) center / 1.6px 14px
    no-repeat;
}
.faq-list details.is-open summary {
  color: var(--blue);
}

/* 0fr -> 1fr animates to the answer's natural height, which a plain
   `height: auto` transition cannot do. The <details> element itself hides its
   children the instant `open` is removed, so the JS keeps `open` set until the
   collapse has finished playing. */
.faq-ans {
  display: grid;
  grid-template-rows: 1fr;
}
/* The clip wrapper must carry no padding of its own: padding on a grid item
   survives a 0fr track and would leave the answer a few pixels tall when
   closed. All the answer's spacing therefore lives on the <p> inside it. */
.faq-ans-in {
  overflow: hidden;
  min-height: 0;
}
/* Collapsed-by-default only once the controller is attached, so without JS the
   browser's native open/close still shows every answer in full. */
.faq-list.faq-js .faq-ans {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-list.faq-js details.is-open .faq-ans {
  grid-template-rows: 1fr;
}

.faq-list details p {
  margin: 0;
  padding: 4px 34px 16px 0;
  color: #7d7d7d;
  font-size: 19px;
  line-height: 1.55;
  font-weight: 400;
}
.faq-list.faq-js details p {
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.faq-list.faq-js details.is-open p {
  opacity: 1;
  transform: none;
  transition-delay: 0.08s;
}

/* (the footer now lives in section 23, at the end of this file) */

/* ---------- 16. Strategy button ---------- */
/* Used by the trusted band, the footer CTA and the contact form. Authored
   before the responsive section so section 17 owns every breakpoint. */
.btn-strategy {
  display: inline-flex;
  align-items: center;
  background-color: #0072f6;
  color: white;
  text-decoration: none;
  padding: 14px 65px 14px 30px;
  border-radius: 100px;
  font-weight: 800;
  font-size: 17px;
  text-transform: uppercase;
  border: 1px solid #0072f6;
  font-family: var(--heading-font);
  position: relative;
  transition: all 0.4s ease;
}

/* Black Circle Icon */
.icon-circle {
  background-color: #000;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.4s ease;
}

.icon-circle svg path {
  transition: fill 0.4s ease;
}

/* Hover Effect — the label padding and the disc swap sides together */
.btn-strategy:hover {
  background-color: #000;
  border-color: #000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  padding: 14px 30px 14px 65px;
}

.btn-strategy:hover .icon-circle {
  right: calc(100% - 55px);
  background-color: #fff;
}

.btn-strategy:hover .icon-circle svg path {
  fill: #000;
}

/* =========================================================
   17. Responsive

   One ladder, widest to narrowest, every breakpoint declared once:
   1600 · 1200 · 992 · 768 · 560 · 380
   ========================================================= */

/* wide screens: allow the designed line breaks */
@media (min-width: 993px) {
  .br-lg {
    display: inline;
  }
}

/* ≤ 1600px — the hero is composed for a 1600px+ artboard. Below that the
   copy needs to come down a step and the floats have to move inward and
   switch to percentage widths so they keep tracking the artwork. The laptop
   mockup is dropped here: the banner already carries a device, and at these
   widths the two collide. */
@media (max-width: 1600px) {
  .hero-title {
    font-size: 62px;
    line-height: normal;
  }
  .hero-screen-img {
    display: none;
  }
  .hf-l1 {
    top: 10%;
    left: 7%;
  }
  .hf-l2 {
    top: 33%;
    left: 3%;
    width: 17%;
  }
  .hf-l3 {
    bottom: 34%;
    left: 12%;
    width: 17%;
  }
  .hf-l4 {
    bottom: 12%;
    left: 10%;
    width: 10%;
  }
  .hf-r1 {
    top: 10%;
    right: 5%;
  }
  .hf-r2 {
    top: 33%;
    right: 2%;
    width: 17%;
  }
  .hf-r3 {
    bottom: 35%;
    right: 11%;
    width: 17%;
  }

  .service-heading {
    font-weight: 800;
    font-size: 54px;
    margin-bottom: 36px;
  }
  .s-name {
    font-size: 22px;
  }
  .s-num {
    font-size: 46px;
  }
  .tst-card {
    padding: 30px 10px;
  }
  .tst-card blockquote {
    font-size: 14px;
  }
}

/* ≤ 1200px */
@media (max-width: 1200px) {
  :root {
    --gutter: 48px;
  }
  /* hero needs no override here — its type is vw-locked to the artwork */
}

/* ≤ 992px — tablet: nav collapses */
@media (max-width: 992px) {
  :root {
    --gutter: 32px;
  }

  .nav-burger {
    display: flex;
  }

  .nav-header {
    gap: 8px;
    padding: 8px 12px;
  }

  .nav-chip {
    display: inline-flex;
    align-items: center;
    flex: none;
  }
  .nav-chip img {
    height: 38px;
    width: auto;
  }

  .nav-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0.25s;
    max-height: calc(85vh - 70px);
    overflow-y: auto;
    z-index: 1000;
  }
  .nav-toggle:checked ~ .nav-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* the dropdown is a plain stacked list — drop the desktop centring */
  .nav-links {
    flex: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }
  .nav-links a {
    padding: 12px 14px;
    font-size: 15px;
  }
  /* in the dropdown the caret belongs at the far end of the row */
  .nav-links a svg {
    margin-left: auto;
  }

  /* below the burger breakpoint the mega menu is collapsible */
  .mega {
    display: none;
    position: static;
    width: auto;
    padding: 0;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: none;
    background: transparent;
  }

  .nav-mega.open .mega {
    display: block;
    opacity: 1;
    visibility: visible;
    padding: 8px 0;
    transform: none;
  }

  .mega-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 4px 0;
  }

  .nav-links .mega-item {
    padding: 7px 8px;
    gap: 8px;
    align-items: center;
    border-radius: 8px;
    background: #f4f7fc;
  }

  .mega-ico {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    flex: none;
  }

  .nav-links .mega-ico svg {
    width: 15px;
    height: 15px;
  }

  .mega-txt {
    gap: 0;
    min-width: 0;
  }

  .mega-txt strong {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    color: #111318;
    white-space: normal;
  }

  .mega-txt span {
    display: none;
  }

  .nav-demo {
    justify-content: center;
    padding: 14px 24px;
  }

  /* Artboard mode stops here. Below ~992px the banner's empty centre is too
     small to hold readable copy, so the artwork switches to a cover crop
     (sky + mountains) and the text goes back to normal, legible flow sizes. */
  .hero {
    min-height: 0;
    padding-top: 118px;
    padding-bottom: clamp(56px, 14vw, 110px);
    /* Zoomed into the artwork's clean centre sky. The zoom has to be this
       strong: a looser crop starts clipping the left/right cards once the
       viewport widens toward 992px. It's sky only, so the upscale never
       shows. */
    background-size:
      auto 260%,
      cover;
    background-position:
      50% 22%,
      center;
  }
  .hero-title {
    font-size: clamp(30px, 5.4vw, 46px);
    margin-bottom: 18px;
  }
  .hero-sub {
    max-width: 56ch;
    font-size: 15px;
    margin-bottom: 28px;
  }

  /* Artboard mode is over, so the cards go with it. There is no width left to
     park them in: at this size they land on top of the sub-heading and the
     CTA rather than framing them. */
  .hero-float {
    display: none;
  }

  /* soften the crop into the white section that follows */
  .hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
  }

  .services-head {
    grid-template-columns: 1fr;
  }
  .service-heading {
    font-size: 42px;
  }
  /* stays positioned so .seal-logo can keep centring itself inside the ring */
  .seal {
    position: relative;
    margin-top: 18px;
  }

  /* There is no hover on touch, so a row that only opens on hover would hide
     its description forever. Below this width every row is simply open:
     number + title on one line, copy underneath, artwork dropped. */
  .service-list li {
    grid-template-columns: clamp(52px, 9vw, 74px) minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 10px;
    align-items: baseline;
    padding-block: 20px;
  }
  .service-list li:hover,
  .service-list li:focus-within {
    padding-block: 20px;
  }
  .s-desc {
    grid-column: 2;
    opacity: 1;
    transform: none;
    color: #4b5563;
  }
  .s-media {
    display: none;
  }

  /* below this width the two columns are too narrow to hold both the
     scoreboard and the list, so the panel unstacks into three rows */
  .panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .panel-copy,
  .panel-metrics,
  .ticks {
    grid-column: 1;
    grid-row: auto;
  }
  .ticks {
    padding-left: 0;
    border-left: 0;
  }
  .panel-metrics {
    grid-template-columns: 1fr 1fr;
  }

  /* two up; the third card keeps a normal cell rather than stretching across
     the row, which would make it read as a different kind of card */
  .tst-main {
    grid-template-columns: 1fr;
  }
  .tst-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* one column: the explicit grid placement has to be released or the three
     items would keep fighting over rows 1 and 2.
     minmax(0,1fr) rather than 1fr — a plain 1fr track floors at min-content,
     which pushed the question cards past the viewport on narrow phones. */
  .faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* one column, so there is nothing for the left side to stick alongside */
  .faq-left {
    position: static;
  }
  .faq-title,
  .faq-list,
  .faq-card {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
  }
}

/* ≤ 768px — large phone */
@media (max-width: 768px) {
  :root {
    --gutter: 24px;
  }

  .hero-inner {
    padding-top: 60px;
  }
  .hero-title {
    font-size: 60px;
    line-height: normal;
  }

  /* 2-up: only the right-hand column keeps a divider */
  .stats-card {
    grid-template-columns: 1fr 1fr;
    row-gap: 22px;
  }
  .stat:nth-child(odd)::before {
    display: none;
  }

  .trusted-heading {
    font-size: 48px;
  }
  .trusted-lead {
    font-size: 18px;
  }

  .panel {
    grid-template-columns: minmax(0, 1fr);
    padding: 28px 20px;
    border-radius: var(--r-lg);
  }
  .panel-heading {
    line-height: 1.2;
  }

  .service-heading {
    font-size: 45px;
  }
  .s-name {
    font-size: 20px;
  }
  .s-num {
    font-size: 50px;
  }

  .tst-grid {
    grid-template-columns: 1fr;
  }
  .tst-left h3 {
    font-size: 40px;
  }

  .switch-row {
    flex-wrap: wrap;
    gap: 12px;
  }
  .switch-label {
    font-size: 11.5px;
    padding: 6px 12px;
  }
}

/* ≤ 560px — phone */
@media (max-width: 560px) {
  :root {
    --gutter: 18px;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }
  /* the CTA is inside the dropdown here, so it should fill it */
  .nav-demo {
    width: 100%;
  }
  .nav-chip {
    display: inline-flex;
    align-items: center;
    flex: none;
  }
  .nav-chip img {
    height: 30px;
    width: auto;
    max-width: 120px;
  }

  .hero {
    padding-top: 108px;
  }
  .hero-inner {
    padding-top: 20px;
  }
  /* clamp rather than a fixed size: this range spans 320–560px, which is far
     too wide for one step to serve */
  .hero-title {
    font-size: clamp(28px, 7vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.03em;
  }

  .heading-main {
    font-size: 26px;
  }
  .lead {
    font-size: 16px;
  }

  .stats-card {
    padding: 45px 20px;
  }
  .stat-num {
    font-size: 30px;
  }
  .stat-lbl {
    font-size: 12px;
  }

  .ticks,
  .panel-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
  .metric {
    padding: 18px 20px;
  }
  .metric-lbl {
    font-size: 12px;
  }
  .panel-chip {
    font-size: 11px;
  }

  /* stacked, so the "after" label never wraps under the dial on its own */
  .switch-row {
    flex-direction: column;
    gap: 14px;
  }

  /* labels now sit above and below the dial, so the pointer sweeps vertically */
  .knob-face {
    transform: rotate(90deg);
  }

  #ba-after:checked ~ .switch-row .knob-face {
    transform: rotate(-90deg);
  }

  .switch-label {
    width: 190px;
  }

  /* no hover on touch, so every row is open: number + title on one line,
     copy underneath, artwork dropped */
  .service-list li {
    grid-template-columns: clamp(40px, 8vw, 60px) minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 10px;
    align-items: start;
    padding-block: 20px;
  }
  .services-note {
    display: none;
  }
  .s-name {
    font-size: 26px;
  }
  .s-num {
    font-size: 26px;
    -webkit-text-stroke-width: 1.5px;
  }

  .band::after {
    display: none;
  }
  .trusted-heading {
    font-size: 36px;
  }
  .trusted-lead {
    font-size: 16px;
  }
  /* the label wraps at this width, so the pill has to grow downward and the
     text has to start at the left edge instead of centring */
  .btn-strategy {
    box-sizing: border-box;
    font-size: 14px;
    white-space: normal;
    text-align: left;
    justify-content: flex-start;
    padding: 20px 65px 20px 30px;
  }
  .btn-strategy:hover {
    padding: 20px 30px 20px 65px;
  }

  .tst-left {
    align-items: center;
  }
  .tst-left h3 {
    text-align: center;
  }

  h2.cta-heading {
    font-size: 33px;
    line-height: 40px;
  }

  .service-heading,
  .faq-title,
  .tst-title {
    font-size: 36px;
    line-height: 1.2;
    text-align: center;
  }
  .faq-cta-label {
    font-size: 12px;
    padding: 16px;
  }
  .faq-list summary {
    gap: 12px;
    font-size: 18px;
  }
  .faq-list details p {
    padding-right: 0;
    font-size: 16px;
  }

  .mock-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .switch-row {
    flex-direction: column;
  }
}

/* ≤ 380px — small phone */
@media (max-width: 380px) {
  :root {
    --gutter: 14px;
  }

  .stats-card {
    grid-template-columns: 1fr;
  }
  .stat + .stat::before {
    display: none;
  }

  /* the disc has to shrink with the pill or it overruns the shorter padding */
  .btn-strategy {
    width: 100%;
    padding: 15px 53px 15px 20px;
    font-size: 12px;
  }
  .btn-strategy:hover {
    padding: 15px 20px 15px 53px;
  }
  .icon-circle {
    width: 35px;
    height: 35px;
    right: 8px;
  }
  .btn-strategy:hover .icon-circle {
    right: calc(100% - 43px);
  }
  .btn-text {
    margin-right: 0;
  }
}

/* accessibility: honour reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  /* killing the animation would freeze the strip mid-slide, so hand the
     row back to the user as a normal horizontal scroller */
  .marquee {
    overflow-x: auto;
  }
  .marquee-track {
    animation: none;
    transform: none;
  }
  .award-row[aria-hidden="true"] {
    display: none;
  }
}

/* print */
@media print {
  .site-header,
  .btn,
  .step-art {
    display: none;
  }
  body {
    color: #000;
  }
}

/* ---------- 18. Contact page ---------- */

.contact-hero {
  /* .site-header is position:fixed at top:14px, so the first section needs
     enough top padding to clear it (index.html's .hero does the same) */
  padding-top: clamp(124px, 11vw, 168px);
  background: linear-gradient(180deg, var(--blue-soft) 0%, var(--bg) 70%);
}

.contact-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

.contact-hero-copy .lead {
  margin-bottom: 28px;
}

/* --- benefits list --- */
.contact-benefits {
  display: grid;
  gap: 14px;
}

.contact-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 600;
  color: var(--ink-2);
}

.contact-benefits .tick {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
}

/* --- form card --- */
.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: clamp(24px, 2.6vw, 40px);
}

.form-card-head {
  margin-bottom: 24px;
}

.form-card-head p {
  color: var(--muted);
  margin: 0;
}
.form-note {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-2);
}

/* --- .btn-strategy is authored for <a>; reset the <button> defaults --- */
button.btn-strategy {
  font-family: var(--heading-font);
  cursor: pointer;
  text-align: left;
  width: max-content;
  max-width: 100%;
  -webkit-appearance: none;
  appearance: none;
  margin-top: 4px;
}

/* --- about + contact details block (Task 4) --- */
.contact-details {
  display: grid;
  gap: 10px;
  margin-top: 26px;
  font-weight: 600;
  color: var(--ink-2);
}

.contact-details a {
  color: var(--blue);
}

.contact-details a:hover {
  color: var(--blue-dark);
  text-decoration: underline;
}

/* --- responsive --- */
@media (max-width: 992px) {
  .contact-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-hero-copy {
    max-width: 720px;
  }
}

@media (max-width: 560px) {
  button.btn-strategy {
    width: 100%;
  }
}

/* ---------- 19. Contact page — about + partners ---------- */

/* --- about: image left, copy right (mirrors the reference layout) --- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}

.about-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.about-copy .h2 {
  margin-top: 14px;
}

.about-copy .lead:last-of-type {
  margin-bottom: 0;
}

/* --- partners: static row of badges, images only, no heading --- */
.partners {
  background: var(--bg-soft);
}

.partner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 64px);
}

.partner img {
  display: block;
  width: auto;
  height: clamp(64px, 7vw, 96px);
  object-fit: contain;
}

@media (max-width: 992px) {
  .about-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .partner-row {
    gap: 28px;
  }
}

/* ---------- 20. Contact page — cascade + reading-width fixes ---------- */

/* Bootstrap's `.h1..h6 { font-weight: 500; line-height: 1.2 }` is (0,1,0) and
   outranks this file's element-level `h1,h2,h3,h4 { font-weight: 800 }` (0,0,1),
   and the local `.h2`/`.h3` rules never set a weight — so every `class="h2"`
   heading rendered medium. These selectors tie Bootstrap on specificity and win
   on source order, since style.css is linked after the Bootstrap CDN. */
.h2,
.h3 {
  font-weight: 800;
  line-height: 1.12;
}

/* --container is 100%, so above 992px the hero and about columns have no
   reading-width cap and long paragraphs run past a comfortable measure. */
@media (min-width: 993px) {
  .contact-hero-copy .lead,
  .contact-hero-copy .contact-benefits,
  .about-copy .lead {
    max-width: 62ch;
  }
}

/* ---------- 21. About page — mirrors seo.com/about layout, iApp colours ----------
   Metrics (container 1472px, gaps, radii, type scale, skew angles, hover flip)
   are taken from the reference. Only the palette is swapped for iApp tokens:
     #2D0F6C indigo card  -> var(--ink)
     #17F3CD teal stat    -> var(--sky-1)
     #E7D6FF hover chip   -> var(--blue-soft)
     #F9F5FF soft card bg -> var(--bg-soft)
     #7F1BFF brand purple -> var(--blue)
     #787A80 grey text    -> var(--muted)
   Everything is scoped under .ref-about so the generic reference class names
   (.item, .content, .front, .body, .layout) cannot leak into the other pages. */

.ref-about {
  font-size: 18px;
  color: var(--ink-2);
}

/* Shared by the About and Contact pages (not scoped to .ref-about, so both can
   use it). Mirrors the reference site's container: 1472px cap, 24px gutter. */
.rf-container {
  max-width: 1472px;
  margin-inline: auto;
  padding-inline: 24px;
  width: 100%;
}

.ref-about .rf-full-width {
  width: 100%;
}

.ref-about .rf-section {
  padding-block: 48px;
}

/* --- reference type scale --- */
.ref-about h1 {
  font-family: var(--heading-font);
  font-size: 57px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.ref-about h2 {
  font-family: var(--heading-font);
  font-size: 44px;
  line-height: 57px;
  font-weight: 800;
  letter-spacing: 0.88px;
  margin-bottom: 16px;
}

.ref-about h3 {
  font-family: var(--heading-font);
  font-size: 35px;
  line-height: 42px;
  font-weight: 700;
  letter-spacing: 1.4px;
  margin-bottom: 16px;
}

.ref-about h6 {
  font-family: var(--body-font);
  font-size: 14.5px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.87px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ref-about p {
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 24px;
}

.ref-about .caption {
  font-size: 14.5px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0.073px;
  margin-bottom: 24px;
}

.ref-about .highlighted-text {
  color: var(--blue);
}

/* --- CTA button (reference .button-primary.button-large) --- */
.ref-about .rf-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 18px 36px;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.ref-about .rf-button::after {
  content: "→";
  font-weight: 400;
}

.ref-about .rf-button:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
}

/* ===== 2. HERO: text left, skewed portrait grid right ===== */
.ref-about .experts-template {
  /* clears the position:fixed .site-header */
  padding-top: clamp(124px, 11vw, 168px);
  padding-bottom: 64px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--blue-soft) 0%, var(--bg) 82%);
}

.ref-about .experts-template .layout {
  display: flex;
  gap: 80px;
  align-items: center;
}

.ref-about .experts-template .content-column {
  flex: 1 1 52%;
  min-width: 0;
}

.ref-about .experts-template .content-column p {
  text-align: justify;
  text-wrap: pretty;
}

.ref-about .experts-template .media-column {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 48%;
  min-width: 0;
}

/* the reference skews the whole grid and counter-skews each image */
.ref-about .experts-video-animation {
  position: absolute;
  top: -15%;
  width: 637px;
  height: 559px;
  transform: skewX(350deg);
}

.ref-about .experts-video-animation .slide {
  position: absolute;
  inset: 0;
}

.ref-about .experts-video-animation .item {
  position: absolute;
  width: 27%;
  height: 29%;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, var(--sky-1) 0%, var(--blue-soft) 100%);
  box-shadow: var(--shadow-sm);
}

.ref-about .experts-video-animation .item img {
  position: absolute;
  bottom: 0;
  left: -5%;
  max-width: 110%;
  height: auto;
  transform: skew(10deg);
}

/* the reference's eight fixed positions */
.ref-about .experts-video-animation .item-1 {
  top: 0;
  left: 0;
}
.ref-about .experts-video-animation .item-2 {
  top: 7%;
  left: 0;
  right: 0;
  margin-inline: auto;
}
.ref-about .experts-video-animation .item-3 {
  top: 0;
  right: 0;
}
.ref-about .experts-video-animation .item-4 {
  top: 36%;
  left: 0;
}
.ref-about .experts-video-animation .item-5 {
  top: 36%;
  right: 0;
}
.ref-about .experts-video-animation .item-6 {
  bottom: 0;
  left: 0;
}
.ref-about .experts-video-animation .item-7 {
  bottom: 7%;
  left: 0;
  right: 0;
  margin-inline: auto;
}
.ref-about .experts-video-animation .item-8 {
  bottom: 0;
  right: 0;
}

/* ===== text alignment: headings flush left, body copy justified ===== */
.ref-about .content-column,
.ref-about .wysiwyg-content,
.ref-about .stats-section h3,
.ref-about .stat-item .content,
.ref-about .reviews-carousel__item {
  text-align: left;
}

.ref-about .content-column p,
.ref-about .wysiwyg-content p,
.ref-about .review-content p {
  text-align: justify;
  text-justify: inter-word;
}

/* the flip-chip bullets are short list items, not flowing prose — justify
   stretches their wrapped lines into ugly gaps, so keep them left-aligned */
.ref-about .stat-item p {
  text-align: left;
}

/* ===== 3. STATS: five dark cards, corner chip flips out on hover ===== */
.ref-about .stats-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 3%;
  row-gap: 24px;
  padding-top: 40px;
}

.ref-about .stat-item {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 23.5%;
  min-height: 250px;
  justify-content: center;
  align-items: center;
  border-radius: var(--r);
  overflow: hidden;
  z-index: 1;
  cursor: default;
}

.ref-about .stat-item > .content {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  padding: 32px;
  border-radius: var(--r);
  background: var(--ink);
}

.ref-about .stat-item h2 {
  color: var(--sky-1);
  font-size: 44px;
  line-height: 1.05;
  margin-bottom: 12px;
}

.ref-about .stat-item h6 {
  color: var(--white);
  margin-bottom: 4px;
}

.ref-about .stat-item p,
.ref-about .stat-item .caption {
  color: var(--white);
  margin-bottom: 0;
}

/* the rotated chip, parked outside the top-right corner */
.ref-about .stat-item .front {
  position: absolute;
  top: -85px;
  right: -90px;
  width: 129.928px;
  height: 106.868px;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--blue-soft);
  transform: rotate(-9deg);
  transition: all 0.5s;
}

.ref-about .stat-item .front > .body {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  transition: all 0.8s;
}

.ref-about .stat-item .front > .body * {
  color: var(--blue-soft);
}

.ref-about .stat-item:hover .front,
.ref-about .stat-item:focus-within .front {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}

.ref-about .stat-item:hover .front > .body,
.ref-about .stat-item:focus-within .front > .body {
  opacity: 1;
}

.ref-about .stat-item:hover .front > .body *,
.ref-about .stat-item:focus-within .front > .body * {
  color: var(--ink);
}

/* ===== 4 + 6 + 9. TWO-COLUMN ===== */
.ref-about .two-column-wysiwyg {
  display: flex;
  gap: 80px;
}

.ref-about .two-column-wysiwyg.center {
  align-items: center;
}

.ref-about .two-column-wysiwyg.bottom {
  align-items: flex-end;
}

.ref-about .two-column-wysiwyg > div {
  flex: 1;
  min-width: 0;
}

.ref-about .wysiwyg-content > p:last-child {
  margin-bottom: 0;
}

.ref-about .wysiwyg-content img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

.ref-about .right-content .wysiwyg-content img[src$="iapp-logo.svg"] {
  max-width: 340px;
}

.ref-about .big-image-right-column .right-content .wysiwyg-content img {
  border-radius: var(--r-lg);
}

.ref-about .cta-block {
  margin-top: 28px;
}

/* ===== 5. REVIEWS — slider ===== */
.ref-about .reviews-carousel-section {
  padding-block: 60px;
}

/* slider shell (shared by both carousels) */
.ref-about .js-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ref-about .slider-viewport {
  width: 100%;
  overflow: hidden;
  /* let vertical page scrolling through the slider still work on touch,
     while horizontal gestures go to the drag handler */
  touch-action: pan-y;
}

/* drag affordance — only once the script has taken over */
.ref-about .js-slider.slider-ready .slider-viewport {
  cursor: grab;
}

.ref-about .js-slider.is-dragging .slider-viewport {
  cursor: grabbing;
}

/* stop text and images being selected mid-drag; text stays selectable otherwise */
.ref-about .js-slider.is-dragging .slider-track {
  user-select: none;
  -webkit-user-select: none;
}

.ref-about .slider-track img {
  -webkit-user-drag: none;
  user-select: none;
}

.ref-about .slider-track {
  display: flex;
  align-items: stretch;
  will-change: transform;
}

.ref-about .slider-slide {
  flex: 0 0 auto;
  display: flex;
  box-sizing: border-box;
}

/* reference: .slick-slide { padding: 0 40px } on the reviews carousel */
.ref-about .reviews-carousel .slider-slide {
  padding-inline: 40px;
}

/* before the script runs, show the first slides rather than a blank strip */
.ref-about .js-slider:not(.slider-ready) .slider-slide.is-clone {
  display: none;
}

.ref-about .reviews-carousel__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 432px;
  max-width: 100%;
  min-height: 250px;
  padding: 32px;
  border-radius: var(--r);
  background: var(--bg-soft);
}

.ref-about .review-content p {
  margin-bottom: 24px;
}

.ref-about .review-foot {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}

.ref-about .review-foot .reviewer {
  flex: 1;
}

.ref-about .review-foot p {
  color: var(--muted);
  font-size: 18px;
  line-height: 27px;
  font-weight: 600;
  letter-spacing: 0.09px;
  margin-bottom: 0;
}

.ref-about .review-foot a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--blue);
}

.ref-about .review-foot a::after {
  content: "\2192";
}

.ref-about .review-foot a:hover {
  color: var(--blue-dark);
  text-decoration: underline;
}

.ref-about .reviewer-image img {
  max-width: 40px;
  height: auto;
}

/* ===== 6. slider arrows — reference: 48x49px, centred below, 20px apart, 32px top ===== */
.ref-about .slider-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
}

.ref-about .slider-prev,
.ref-about .slider-next {
  width: 48px;
  height: 49px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.ref-about .slider-prev svg,
.ref-about .slider-next svg {
  width: 22px;
  height: 22px;
}

.ref-about .slider-prev:hover,
.ref-about .slider-next:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* ===== 7. AWARD / PARTNER LOGOS ===== */
.ref-about .awards-logos-block2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 48px;
  padding-block: 18px;
}

.ref-about .awards-logos-block2 .logo-item img {
  display: block;
  width: auto;
  max-width: 170px;
  max-height: 96px;
  margin-inline: auto;
  object-fit: contain;
  transition: opacity 0.35s;
}

.ref-about .awards-logos-block2 .logo-item:hover img {
  opacity: 0.5;
}

/* ===== 8. SKEWED IMAGE STRIP ===== */
/* Hidden for now, not removed. This strip is meant to hold team / office /
   culture photographs; it is currently filled with unrelated project artwork
   as a placeholder. Delete the `display: none` to bring it back once the real
   photos are in — the markup and the rest of these rules are untouched. */
.ref-about .images-carousel-section {
  display: none;
  padding-block: 80px;
  overflow: hidden;
}

.ref-about .images-carousel-section .inner-wrapper {
  padding-inline: 24px;
}

/* reference: .slick-slide { padding: 0 30px } on the images carousel */
.ref-about .images-carousel .slider-slide {
  padding-inline: 30px;
}

/* the reference skews the frame and counter-skews the photo inside it */
.ref-about .images-carousel .item {
  position: relative;
  width: 513px;
  max-width: 100%;
  flex: 0 0 auto;
  min-height: 320px;
  overflow: hidden;
  border-radius: 48px;
  transform: skew(350deg);
}

.ref-about .images-carousel .item .inner {
  position: absolute;
  top: -22px;
  left: -22px;
  width: calc(100% + 44px);
  height: calc(100% + 44px);
  overflow: hidden;
}

.ref-about .images-carousel .item img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transform: skew(10deg);
}

/* ===== responsive — reference breakpoints mapped onto the project's set ===== */
@media (max-width: 1200px) {
  .ref-about .experts-video-animation {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
  }
}

@media (max-width: 992px) {
  .ref-about h1 {
    font-size: 40px;
  }
  .ref-about h2 {
    font-size: 33px;
    line-height: 45px;
  }
  .ref-about h3 {
    font-size: 31px;
    line-height: 42px;
  }

  .ref-about .experts-template .layout,
  .ref-about .two-column-wysiwyg {
    flex-direction: column;
    gap: 40px;
  }

  /* reference: two-up at this width */
  .ref-about .stat-item {
    max-width: 48.5%;
    flex: 48.5%;
  }

  .ref-about .reviews-carousel .slider-slide {
    padding-inline: 16px;
  }

  .ref-about .images-carousel .slider-slide {
    padding-inline: 12px;
  }

  .ref-about .slider-single .reviews-carousel__item,
  .ref-about .slider-single .item {
    width: 100%;
  }

  /* the reference drops the skew on small screens */
  .ref-about .images-carousel .item {
    transform: skew(0deg);
    border-radius: var(--r-lg);
    min-height: 256px;
  }

  .ref-about .images-carousel .item img {
    transform: skew(0deg);
  }

  /* mobile-position: the reference puts the image above the copy */
  .ref-about
    .two-column-wysiwyg.center
    .left-content:has(.wysiwyg-content > img),
  .ref-about .two-column-wysiwyg.bottom .right-content {
    order: -1;
  }
}

@media (max-width: 560px) {
  .ref-about {
    font-size: 16px;
  }
  .ref-about h1 {
    font-size: 32px;
  }
  .ref-about p {
    font-size: 16px;
    line-height: 26px;
  }

  .ref-about .stat-item {
    max-width: 100%;
    flex-basis: 100%;
  }

  /* the chip has nowhere to hide on a single-column card: show the bullets */
  .ref-about .stat-item .front {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
    margin-bottom: 20px;
  }

  .ref-about .stat-item .front > .body {
    opacity: 1;
    padding: 20px;
  }

  .ref-about .stat-item .front > .body * {
    color: var(--ink);
  }

  .ref-about .awards-logos-block2 .logo-item img {
    max-width: 85px;
  }

  .ref-about .images-carousel .item {
    min-height: 220px;
  }
}

/* ---------- 22. Book-a-demo popup + shared form fields ----------
   Two layers live here. The `.demo-modal .dm-*` rules are the popup shell:
   the dialog, the left-hand pitch panel and the close button. Everything
   from `.dm-form` down is unscoped on purpose — it is the form component
   itself, reused verbatim by the proposal form on contact.html so both
   entry points ask for the same things and look the same doing it.
   Scope a rule to `.demo-modal` only when it is genuinely popup-only. */

.demo-modal .modal-dialog {
  max-width: min(1000px, calc(100vw - 32px));
  margin: 16px auto;
}

/* The dialog itself never scrolls, so the close button (absolutely positioned
   against it) stays put; .dm-grid inside is the scroll container. */
.demo-modal .dm-content {
  position: relative;
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
}

.demo-modal .dm-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
}

/* ----- close button ----- */
.demo-modal .dm-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(13, 21, 38, 0.06);
  color: var(--ink-2);
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.demo-modal .dm-close:hover {
  background: var(--ink);
  color: var(--white);
}

.demo-modal .dm-close .di {
  width: 18px;
  height: 18px;
}

.di {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ===== left panel ===== */
.demo-modal .dm-pitch {
  padding: 28px 26px;
  background:
    radial-gradient(
      120% 80% at 15% 0%,
      var(--white) 0%,
      rgba(255, 255, 255, 0) 55%
    ),
    linear-gradient(
      170deg,
      var(--sky-2) 0%,
      var(--sky-1) 48%,
      var(--blue-soft) 100%
    );
}

.demo-modal .dm-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.demo-modal .dm-badge .di {
  width: 15px;
  height: 15px;
  color: var(--blue);
}

.demo-modal .dm-headline {
  font-family: var(--heading-font);
  font-size: clamp(23px, 2.1vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 18px;
}

.demo-modal .dm-accent {
  color: var(--blue);
}

.demo-modal .dm-lede {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 16px;
}

/* ----- feature cards ----- */
.demo-modal .dm-features {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.demo-modal .dm-feature {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.demo-modal .dm-feature-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
}

.demo-modal .dm-feature-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.demo-modal .dm-feature-text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}

.demo-modal .dm-feature-text span {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* ----- trust strip ----- */
.demo-modal .dm-trust {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
}

.demo-modal .dm-avatars {
  display: inline-flex;
  flex: none;
}

.demo-modal .dm-avatar {
  width: 29px;
  height: 29px;
  margin-left: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--white);
  background: var(--blue-dark);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
}

.demo-modal .dm-avatar:first-child {
  margin-left: 0;
}

.demo-modal .dm-trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.demo-modal .dm-trust-text strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}

.demo-modal .dm-trust-stars {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.demo-modal .dm-stars {
  color: var(--blue);
  letter-spacing: 1px;
}

.demo-modal .dm-upwork {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  line-height: 1.2;
}

.demo-modal .dm-upwork strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.demo-modal .dm-upwork span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ----- rating row ----- */
.demo-modal .dm-ratings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.demo-modal .dm-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-inline: 8px;
  text-align: center;
}

.demo-modal .dm-rating + .dm-rating {
  border-left: 1px solid rgba(13, 21, 38, 0.1);
}

.demo-modal .dm-rating-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.demo-modal .dm-rating-score {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
}

/* ===== right panel: the form ===== */
.demo-modal .dm-form-panel {
  padding: 28px 26px;
  background: var(--white);
}

.demo-modal .dm-form-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  padding-right: 44px; /* keep clear of the close button */
}

.demo-modal .dm-form-icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
}

.demo-modal .dm-form-icon .di {
  width: 21px;
  height: 21px;
}

.demo-modal .dm-title {
  font-family: var(--heading-font);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 4px;
}

.demo-modal .dm-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.dm-form {
  display: grid;
  gap: 12px;
}

.dm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.dm-field > label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.dm-req {
  color: #e5484d;
}

.dm-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.dm-input-icon {
  position: absolute;
  left: 14px;
  display: inline-flex;
  color: var(--muted-2);
  pointer-events: none;
}

.dm-input-wrap input,
.dm-input-wrap select,
.dm-input-wrap textarea {
  width: 100%;
  font-family: var(--body-font);
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.dm-input-icon ~ input {
  padding-left: 40px;
}

.dm-input-wrap input::placeholder,
.dm-input-wrap textarea::placeholder {
  color: var(--muted-2);
}

.dm-input-wrap input:hover,
.dm-input-wrap select:hover,
.dm-input-wrap textarea:hover {
  border-color: var(--sky-1);
}

.dm-input-wrap input:focus,
.dm-input-wrap select:focus,
.dm-input-wrap textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-soft);
}

/* keyboard users keep the strong global ring — the soft one above is too weak alone */
.dm-input-wrap input:focus-visible,
.dm-input-wrap select:focus-visible,
.dm-input-wrap textarea:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* phone: dial-code select fused to the number input */
.dm-phone-wrap {
  gap: 0;
}

/* `select.dm-dial` (0,2,1) has to out-rank the shared
   `.dm-input-wrap select` rule (0,1,1) above — otherwise its width:100%
   wins, the dial eats the whole row and the number input collapses to
   zero width. */
.dm-input-wrap select.dm-dial {
  /* Pinned, not auto: with width:auto a <select> sizes to its widest option
     ("+971" plus a wide flag glyph), which made the dial far bigger than the
     value it actually shows. */
  flex: 0 0 72px;
  width: 72px;
  min-width: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  border-right: 0;
  background: var(--bg-soft);
  font-size: 13.5px;
  font-weight: 600;
  padding-inline: 8px;
  text-overflow: ellipsis;
}

/* and the number input has to be the one that flexes */
.dm-phone-wrap input[type="tel"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* selects */
.dm-select-wrap select {
  padding-right: 44px;
  cursor: pointer;
}

/* .dm-placeholder is toggled by demo-modal.js while the value is still "" */
.dm-select-wrap select.dm-placeholder {
  color: var(--muted-2);
}

.dm-select-wrap select option {
  color: var(--ink);
}

.dm-select-chev {
  position: absolute;
  right: 14px;
  display: inline-flex;
  color: var(--muted);
  pointer-events: none;
}

/* textarea + counter */
.dm-textarea-wrap textarea {
  min-height: 96px;
  line-height: 1.55;
  resize: vertical;
  padding-bottom: 30px;
}

.dm-count {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 12px;
  color: var(--muted-2);
  pointer-events: none;
}

/* reassurance banner */
.dm-secure {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 600;
}

.dm-secure .di {
  color: var(--blue);
}

/* submit */
.dm-submit {
  width: 100%;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: var(--white);
  font-family: var(--heading-font);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.dm-submit:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(22, 104, 255, 0.32);
}

.dm-response {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.dm-response .di {
  width: 16px;
  height: 16px;
}

.dm-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ----- responsive ----- */
@media (max-width: 992px) {
  .demo-modal .dm-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* the form is the point of the popup — lead with it on small screens */
  .demo-modal .dm-form-panel {
    order: -1;
  }

  .demo-modal .dm-pitch,
  .demo-modal .dm-form-panel {
    padding: 24px 20px;
  }
}

@media (max-width: 560px) {
  .demo-modal .modal-dialog {
    max-width: calc(100vw - 16px);
    margin: 8px auto;
  }

  .demo-modal .dm-content,
  .demo-modal .dm-grid {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .dm-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .demo-modal .dm-pitch,
  .demo-modal .dm-form-panel {
    padding: 20px 16px;
  }

  .demo-modal .dm-trust {
    flex-wrap: wrap;
  }

  .demo-modal .dm-upwork {
    padding-left: 0;
    border-left: 0;
  }
}

/* ---------- 23. Footer ----------
   Fully centred and symmetric, so no left/right void can open up on wide
   screens. Three bands: a scrolling service ticker on the top edge (echoing the
   awards marquee up-page), a centred CTA with the wordmark as a watermark behind
   it, then centred link and legal rows. */

.site-footer {
  /* reference footer runs a violet gradient where the rest of the site uses brand blue */
  --ft-accent: #6156fb;
  --ft-accent-2: #8e61fa;
  --ft-grad: linear-gradient(90deg, #4151fb 0%, #8e61fa 100%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* soft tint behind the closing CTA, keeps the white from going flat */
.ft-aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      58% 42% at 50% 6%,
      rgba(97, 86, 251, 0.09) 0%,
      transparent 72%
    ),
    radial-gradient(
      80% 46% at 50% 98%,
      rgba(97, 86, 251, 0.05) 0%,
      transparent 74%
    );
}

/* ===== service ticker ===== */
.ft-ticker {
  position: relative;
  display: flex;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  /* fade both ends so items enter and leave rather than being cut */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

.ft-ticker-track {
  display: flex;
  flex: none;
  animation: ft-marquee 38s linear infinite;
}

.ft-ticker:hover .ft-ticker-track {
  animation-play-state: paused;
}

.ft-ticker-run {
  display: flex;
  flex: none;
  align-items: center;
}

.ft-ticker-run li {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-inline: 17px;
  padding-block: 13px;
  font-family: var(--heading-font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* diamond separator between items */
.ft-ticker-run li::after {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  transform: rotate(45deg);
  background: var(--ft-accent);
}

@keyframes ft-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ===== centred CTA ===== */
.ft-hero {
  position: relative;
  padding-block: clamp(52px, 6vw, 96px);
  border-bottom: 1px solid var(--line);
}

/* oversized wordmark sitting behind the CTA as a watermark */
.ft-wordmark {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  z-index: -1;
  margin: 0;
  transform: translateY(-50%);
  font-family: var(--heading-font);
  font-size: clamp(140px, 30vw, 460px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(13, 21, 38, 0.06);
  user-select: none;
  pointer-events: none;
}

.ft-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ft-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ft-accent);
}

/* rules on both sides, since the whole band is centred */
.ft-eyebrow::before,
.ft-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.ft-cta-title {
  max-width: 22ch;
  margin-bottom: 18px;
  font-family: var(--heading-font);
  font-size: clamp(32px, 5vw, 66px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* the one italic note in an otherwise geometric type system */
.ft-cta-title em {
  font-style: italic;
  font-weight: 800;
  color: var(--ft-accent);
}

.ft-cta-sub {
  max-width: 52ch;
  margin: 0 auto 30px;
  font-size: 15.5px;
  line-height: 1.65;
}

.ft-btn {
  align-self: center;
}

.site-footer .btn-strategy {
  background-color: transparent;
  background-image: var(--ft-grad);
  border-color: transparent;
}

/* quick contact row, pipe-separated */
.ft-quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 26px;
  margin-top: 32px;
  font-size: 13.5px;
}

.ft-quick li {
  display: flex;
  align-items: center;
  gap: 26px;
}

.ft-quick li:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 14px;
  background: var(--line);
}

.ft-quick a {
  color: var(--ink);
  font-weight: 600;
  transition: color 0.26s ease;
}

.ft-quick a:hover {
  color: var(--ft-accent);
}

/* ===== registered offices ===== */
.ft-offices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  padding-top: clamp(34px, 4vw, 58px);
}

.ft-office {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 24px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.ft-office:hover {
  border-color: #d5deec;
  box-shadow: var(--shadow-sm);
  transform: translateY(-4px);
}

.ft-flag {
  display: block;
  width: 44px;
  height: 30px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(13, 21, 38, 0.1);
}

.ft-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ft-office h3 {
  margin: 4px 0 0;
  font-family: var(--heading-font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.ft-office-addr {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

.ft-office-tel {
  margin-top: auto;
  padding-top: 2px;
  color: var(--ink);
  font-weight: 600;
  font-size: 14.5px;
  transition: color 0.26s ease;
}

.ft-office-tel:hover,
.ft-office-tel:focus-visible {
  color: var(--ft-accent);
}

/* ===== link grid ===== */
.ft-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(300px, 1.2fr);
  gap: clamp(28px, 3vw, 52px);
  padding-block: clamp(40px, 4.5vw, 68px);
  text-align: left;
}

.ft-col h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--heading-font);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* short accent rule standing in for the dash in the reference layout */
.ft-col h3::before {
  content: "";
  flex: none;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--ft-grad);
}

.ft-col li {
  margin-bottom: 13px;
  font-size: 14.5px;
}

.ft-col a {
  position: relative;
  display: inline-block;
  color: var(--muted);
  transition:
    color 0.28s ease,
    transform 0.28s ease;
}

.ft-col a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--ft-accent);
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.ft-col a:hover,
.ft-col a:focus-visible {
  color: var(--ft-accent);
  transform: translateX(6px);
}

.ft-col a:hover::before,
.ft-col a:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}

.ft-col a[aria-current="page"] {
  color: var(--ft-accent);
}

/* ===== newsletter ===== */
.ft-news {
  padding-left: clamp(22px, 2.6vw, 44px);
  border-left: 1px solid var(--line);
}

/* the newsletter heading carries no accent rule in the reference */
.ft-news h3::before {
  display: none;
}

.ft-news-lede {
  margin: 0 0 18px;
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

.ft-subscribe {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 330px;
}

.ft-subscribe input {
  width: 100%;
  font-family: var(--body-font);
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 14px 58px 14px 20px;
  transition:
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

.ft-subscribe input::placeholder {
  color: var(--muted-2);
}

.ft-subscribe input:hover {
  border-color: #d5deec;
}

.ft-subscribe input:focus {
  outline: none;
  border-color: var(--ft-accent);
  box-shadow: 0 0 0 3px rgba(97, 86, 251, 0.12);
}

.ft-subscribe input:focus-visible {
  outline: 3px solid var(--ft-accent);
  outline-offset: 2px;
}

.ft-subscribe button {
  position: absolute;
  right: 5px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ft-grad);
  color: var(--white);
  cursor: pointer;
  transition:
    filter 0.28s ease,
    transform 0.28s ease;
}

.ft-subscribe button svg {
  width: 16px;
  height: 16px;
}

.ft-subscribe button:hover {
  filter: brightness(1.08);
  transform: translate(2px, -2px);
}

.ft-subscribe-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted-2);
}

/* ===== social ===== */
.ft-follow {
  margin: 28px 0 14px;
  font-family: var(--heading-font);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.ft-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.ft-social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  transition:
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease;
}

.ft-social a svg {
  width: 16px;
  height: 16px;
}

/* brand colours, as in the reference footer */
.ft-social .s-fb a {
  color: #1877f2;
}
.ft-social .s-x a,
.ft-social .s-tt a {
  color: #0f0f0f;
}
.ft-social .s-li a {
  color: #0a66c2;
}
.ft-social .s-ig a {
  color: #e4405f;
}
.ft-social .s-yt a {
  color: #ff0000;
}

.ft-social a:hover {
  border-color: currentColor;
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}

/* ===== legal bar ===== */
.ft-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 22px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  text-align: left;
}

.ft-logo {
  display: inline-flex;
  flex: none;
}

.ft-logo img {
  width: 44px;
  height: auto;
}

.ft-legal p {
  margin: 0;
  flex: 1;
  min-width: 220px;
}

.ft-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.ft-legal a {
  transition: color 0.24s ease;
}

.ft-legal a:hover {
  color: var(--ft-accent);
}

/* ===== responsive ===== */
@media (max-width: 992px) {
  .ft-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 36px;
  }

  .ft-offices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ft-news {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 32px;
  }
}

@media (max-width: 560px) {
  .ft-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ft-offices {
    grid-template-columns: minmax(0, 1fr);
  }

  .ft-quick li,
  .ft-quick {
    gap: 10px;
  }

  .ft-quick li:not(:last-child)::after {
    display: none;
  }

  .ft-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .ft-wordmark {
    -webkit-text-stroke-width: 0.75px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ft-ticker-track {
    animation: none;
  }

  .ft-col a:hover,
  .ft-office:hover,
  .ft-social a:hover,
  .ft-subscribe button:hover {
    transform: none;
  }
}

/* ============================================================
   SCROLL REVEAL — mirrors the Dubai / LLM / Ready-Made pages.
   Targets start hidden under .ix-anim (set synchronously in <head>
   so there is no flash) and are released when they enter the
   viewport, one element at a time.
   ============================================================ */

/* Blocks: cards, panels and supporting copy rise + fade. */
.ix-anim .hero-sub,
.ix-anim .btn-strategy,
.ix-anim .eyebrow,
.ix-anim .lead,
.ix-anim .stat,
.ix-anim .marquee,
.ix-anim .switcher,
.ix-anim .btn-how,
.ix-anim .service-para,
.ix-anim .seal,
.ix-anim .service-list li,
.ix-anim .trusted-lead,
.ix-anim .we-get-para,
.ix-anim .proc-copy,
.ix-anim .proc-art,
.ix-anim .tst-badge,
.ix-anim .tst-sub,
.ix-anim .purple-line,
.ix-anim .tst-card,
.ix-anim .faq-list details,
.ix-anim .faq-card,
.ix-anim .ft-eyebrow,
.ix-anim .ft-cta-sub,
.ix-anim .ft-quick {
  opacity: 0;
  transform: translateY(24px);
}

/* The two element-qualified hidden selectors above (`.service-list li`,
   `.faq-list details`) out-specify a bare `.ix-anim .is-inview`, so they are
   matched here as well — otherwise those rows would stay at opacity 0. */
/* `:not(.hero-float)` matters: the ornaments and the device mock own their
   transform (the breathing keyframe, and translateX(-50%) for centring), so a
   blanket `transform: none` here would knock them out of position. */
.ix-anim .is-inview:not(.hero-float),
.ix-anim .service-list li.is-inview,
.ix-anim .faq-list details.is-inview {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

/* Headings release word by word, left to right. */
.ix-anim .ix-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
}
.ix-anim .is-inview .ix-word,
.ix-anim .ix-word.is-inview {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease var(--wd, 0ms),
    transform 0.5s ease var(--wd, 0ms);
}

/* The hero ornaments own their transform (tagZoomInOut) and the device mock
   owns its centring translate, so those fade only — never travel. */
.ix-anim .hero-float {
  opacity: 0;
}
.ix-anim .hero-float.is-inview {
  opacity: 1;
  transition: opacity 0.9s ease var(--fd, 0ms);
}

/* Reduced motion: everything renders in its resting state. Only the reveal
   targets are reset — `transform: none` on everything would also undo the
   layout transforms this page relies on (e.g. the centred hero mock). */
@media (prefers-reduced-motion: reduce) {
  .ix-anim .hero-sub,
  .ix-anim .btn-strategy,
  .ix-anim .eyebrow,
  .ix-anim .lead,
  .ix-anim .stat,
  .ix-anim .marquee,
  .ix-anim .switcher,
  .ix-anim .btn-how,
  .ix-anim .service-para,
  .ix-anim .seal,
  .ix-anim .service-list li,
  .ix-anim .trusted-lead,
  .ix-anim .we-get-para,
  .ix-anim .proc-copy,
  .ix-anim .proc-art,
  .ix-anim .tst-badge,
  .ix-anim .tst-sub,
  .ix-anim .purple-line,
  .ix-anim .tst-card,
  .ix-anim .faq-list details,
  .ix-anim .faq-card,
  .ix-anim .ft-eyebrow,
  .ix-anim .ft-cta-sub,
  .ix-anim .ft-quick,
  .ix-anim .ix-word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ix-anim .hero-float {
    opacity: 1 !important;
  }
}