/* eDigiTech additions on top of the Aleric template (main.css). */

/* ---------------------------------------------------------------- Brand colours
   From the eDigiTech Global brand sheet: primary blue #0655ED, deep navy
   #05142E, slate grey #828690.

   The template's accent is a light lime, so it pairs the accent with BLACK
   text everywhere. Our blue inverts that:
     white on #0655ED = 5.95:1  (passes AA for body text)
     black on #0655ED = 3.53:1  (fails AA for body text)
   So anything sitting on the accent is forced to white below, and the hover
   state darkens rather than lightens.                                        */
:root {
  --tp-theme-primary: #0655ED;
  --ed-blue-dark: #05142E;
  --ed-blue-deep: #0443bb;
  --ed-blue-light: #3d7ff2;
  --ed-grey: #828690;
}

/* ------------------------------------------------------------------ Brand type
   Poppins for headings and body, matching techmahindra.com — the reference
   the client asked us to follow. One family, as that site uses.

   This supersedes the brand sheet's Gotham (display) and Raleway (body).
   Worth reconciling: the sheet is the brand's own spec, this is later
   feedback, and they do not agree. Poppins is at least the same geometric
   family of shapes Gotham belongs to, so the page keeps the intended feel
   without the licence Gotham needs.

   The template's own variables are repointed rather than chased through its
   utility classes — --tp-ff-dm alone is referenced ~200 times. */
:root {
  --ed-ff-display: var(--ed-font-sans), sans-serif;
  --ed-ff-body: var(--ed-font-sans), sans-serif;

  --tp-ff-heading: var(--ed-ff-display);
  --tp-ff-dm: var(--ed-ff-display);
  --tp-ff-body: var(--ed-ff-body);
  --tp-ff-p: var(--ed-ff-body);
  --tp-ff-inter: var(--ed-ff-body);
  --tp-ff-poppins: var(--ed-ff-body);
  --tp-ff-jakarta: var(--ed-ff-body);
}
body {
  font-family: var(--ed-ff-body);
}
/* The display face is wider than the one it replaced, which wrapped the five
   top-level nav items onto a second line at 1280. The row has 616px to work
   in — the column minus Bootstrap's gutters, not the 640 the column reports —
   and the items need 474 of it, so the template's 25px side margins do not
   fit. 12px leaves about 20px of slack at this width. */
.tp-main-menu > nav > ul > li {
  margin: 0 12px;
}
/* The desktop menu appears at 1200, where the row only has 576px and the
   items alone take 473 — 12px margins still overflow by 17. Through to 1399
   the labels drop a point and the margins tighten, which leaves ~35px spare.
   "Industry Solutions" is the long one at 186px; shortening that label would
   buy back more room than any amount of spacing here. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-main-menu > nav > ul > li {
    margin: 0 10px;
  }
  .tp-main-menu > nav > ul > li > a {
    font-size: 14px;
  }
}


/* Text sitting on the accent must be white - black would fail AA. */
.tp-bg-theme-primary,
.tp-bg-theme-primary .btn-text,
.tp-bg-theme-primary svg,
.tp-bg-theme-primary.tp-text-common-black,
.tp-bg-theme-primary .tp-text-common-black {
  color: #fff;
}
.tp-bg-theme-primary.hover-text-black:hover,
.tp-bg-theme-primary.hover-text-white:hover,
.tp-bg-theme-primary:hover .btn-text,
.tp-bg-theme-primary:hover svg {
  color: #fff;
}
/* Darken on hover; the template lightens, which weakens contrast here. */
.tp-btn-lg.tp-bg-theme-primary:hover,
.tp-btn-xl.tp-bg-theme-primary:hover,
.tp-btn-sm.tp-bg-theme-primary:hover {
  background-color: var(--ed-blue-deep);
}

/* The accent as TEXT on a dark panel is the other half of that problem:
     #0655ED on #030303 = 3.47:1  (fails AA body text)
     #3d7ff2 on #030303 = 5.42:1  (passes, same 219deg hue)
   So accent text inside a dark surface steps up to the lighter tint. Only the
   text colour is remapped - backgrounds keep the true brand blue, so an accent
   button inside a dark section is unaffected. */
.tp-bg-common-black .tp-text-theme-primary,
.tp-bg-common-black-1 .tp-text-theme-primary,
.ed-bg-brand-deep .tp-text-theme-primary,
.tp-footer-area .tp-text-theme-primary,
/* ...and the template's hover states, which also reach for the accent. */
.tp-footer-area .tp-footer-social ul li a:hover,
.tp-footer-area .tp-footer-menu ul li a:hover {
  color: var(--ed-blue-light);
}

/* ---- Social links take their own brand colour on hover ----
   Requested by the client: "blue for FB, red for YT".

   These are not the exact brand hexes. The footer and the offcanvas are both
   near-black, and the real marks are too dark against it — LinkedIn #0A66C2
   is 2.9:1 and Facebook #1877F2 is 4.6:1 at a 15px label. Each hue is lifted
   until it clears 4.5:1 on the dark panel while staying unmistakably the
   brand's colour. X has no colour of its own, so it stays white.
   The footer rule above is a plain class selector, so these attribute
   selectors outrank it without needing !important. */
.tp-footer-area .tp-footer-social ul li a[data-platform],
.tp-offcanvas-social ul li a[data-platform] {
  transition: color 0.22s ease;
}
[data-platform="facebook"]:hover { color: #4d94ff; }
[data-platform="instagram"]:hover { color: #f56a9b; }
[data-platform="linkedin"]:hover { color: #4596e8; }
[data-platform="x"]:hover { color: #ffffff; }
[data-platform="youtube"]:hover { color: #ff5252; }
[data-platform="whatsapp"]:hover { color: #35e07a; }
[data-platform="pinterest"]:hover { color: #ff5566; }
[data-platform="dribbble"]:hover { color: #f178a8; }
[data-platform="behance"]:hover { color: #4d91ff; }
/* The footer anchor's own hover is a two-class selector, so repeat the brand
   colours at matching weight to win there. */
.tp-footer-area .tp-footer-social ul li a[data-platform="facebook"]:hover { color: #4d94ff; }
.tp-footer-area .tp-footer-social ul li a[data-platform="instagram"]:hover { color: #f56a9b; }
.tp-footer-area .tp-footer-social ul li a[data-platform="linkedin"]:hover { color: #4596e8; }
.tp-footer-area .tp-footer-social ul li a[data-platform="x"]:hover { color: #ffffff; }
.tp-footer-area .tp-footer-social ul li a[data-platform="youtube"]:hover { color: #ff5252; }
.tp-footer-area .tp-footer-social ul li a[data-platform="whatsapp"]:hover { color: #35e07a; }
.tp-footer-area .tp-footer-social ul li a[data-platform="pinterest"]:hover { color: #ff5566; }
.tp-footer-area .tp-footer-social ul li a[data-platform="dribbble"]:hover { color: #f178a8; }
.tp-footer-area .tp-footer-social ul li a[data-platform="behance"]:hover { color: #4d91ff; }

/* The scrolling strip: the template puts black on its lime accent, which on our
   blue is 3.53:1. That clears AA only because the text is 22px bold (large text,
   3:1) - it still reads poorly. White takes it to 5.95:1. The dot separators and
   the arrow travel with it. */
.tp-bg-theme-primary .tp-text-slider-item span {
  color: #fff;
}
/* The arrow carries a hardcoded fill, so colour alone will not reach it. */
.tp-bg-theme-primary .tp-text-slider-item svg path {
  fill: #fff;
}
.tp-bg-theme-primary .tp-text-slider-item span.borders {
  background: #fff;
}

.tp_text_invert.invert-primary > div {
  background-image: linear-gradient(to right, var(--tp-theme-primary) 50%, #fff 50%);
}
.ed-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Hero: small headline prefix pill may hold longer text than the template's “We’re”. */
.tp-hero-title-sm > span {
  white-space: nowrap;
}
.ed-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.ed-hero-customer-icon {
  flex-shrink: 0;
}

/* Four service columns: tighter cards so long service names fit and wrap cleanly. */
.ed-service-compact {
  padding: 25px 22px 40px 30px;
  height: calc(100% - 30px);
}
.ed-service-compact .tp-service-item-title {
  font-size: 28px;
}
.tp-service-item-title a {
  color: inherit;
}
.tp-service-item ul li a,
.tp-service-item ul li span {
  display: inline-block;
}
.tp-service-item ul li span {
  font-family: var(--tp-ff-heading);
  font-weight: 500;
  font-size: 22px;
  line-height: 140%;
  padding-left: 15px;
  position: relative;
}
.tp-service-item ul li span::before {
  position: absolute;
  content: "";
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--tp-common-black);
  border-radius: 20px;
}
.tp-service-item ul li a::before,
.tp-service-item ul li span::before {
  top: 0.7em;
  transform: translateY(-50%);
}
.ed-service-compact ul li a,
.ed-service-compact ul li span {
  font-size: 18px;
}

.ed-testimonial-tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 14px;
  border-radius: 30px;
  /* Deeper blue keeps white label text above the 4.5:1 contrast minimum. */
  background: var(--ed-blue-dark, #005b91);
  color: #fff;
  margin-bottom: 20px;
}

/* Call-to-action section */
.ed-cta-area .tp-section-title {
  line-height: 1.05;
}
.ed-cta-area .tp-section-subtitle {
  justify-content: center;
}
.ed-btn-outline {
  background: transparent;
  border: 1px solid currentColor;
}
.ed-cta-dark .ed-btn-outline:hover {
  background: #fff;
  color: #000;
}
.ed-cta-light .ed-btn-outline:hover,
.ed-cta-primary .ed-btn-outline:hover {
  background: #000;
  color: #fff;
}

.ed-footer-contact a {
  display: inline-block;
}

/* Floating contact buttons (WhatsApp / call / email) */
.ed-floating {
  position: fixed;
  bottom: 24px;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ed-floating-left {
  left: 24px;
  align-items: flex-start;
}
.ed-floating-right {
  right: 24px;
  align-items: flex-end;
  /* Sit above the back-to-top button, which is fixed at bottom right. */
  bottom: 92px;
}
.ed-floating-btn {
  display: inline-flex;
  align-items: center;
  height: 52px;
  min-width: 52px;
  padding: 0 16px;
  border-radius: 20px;
  color: #fff;
  font-family: var(--tp-ff-heading);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ed-floating-btn i {
  font-size: 22px;
  line-height: 1;
  width: 20px;
  text-align: center;
}
/* The label is hidden until hover, so the buttons stay out of the way. */
.ed-floating-label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease;
}
.ed-floating-btn:hover,
.ed-floating-btn:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}
.ed-floating-btn:hover .ed-floating-label,
.ed-floating-btn:focus-visible .ed-floating-label {
  max-width: 260px;
  opacity: 1;
  margin-left: 10px;
}
/* WhatsApp's bright #25d366 carries white text at only 1.98:1, so the label
   and glyph fail AA on it. Their dark teal is an official brand colour and
   takes white at 7.67:1, which also matches the sibling buttons. */
.ed-floating-whatsapp {
  background: #075e54;
}
.ed-floating-call {
  background: var(--ed-blue-dark);
}
.ed-floating-email {
  background: var(--tp-common-black);
}
@media (max-width: 575px) {
  .ed-floating {
    bottom: 16px;
    gap: 10px;
  }
  .ed-floating-left {
    left: 16px;
  }
  .ed-floating-right {
    right: 16px;
    bottom: 84px;
  }
  .ed-floating-btn {
    height: 46px;
    min-width: 46px;
    padding: 0 13px;
  }
  .ed-floating-btn i {
    font-size: 19px;
  }
  /* No hover on touch screens: keep them as plain circles. */
  .ed-floating-label {
    display: none;
  }
}

/* Draft preview banner */
.ed-preview-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  background: #111;
  color: #fff;
  font: 500 13px/1 system-ui, sans-serif;
  padding: 8px 14px;
  border-radius: 0 0 10px 10px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.ed-preview-bar a {
  color: #29a7e0;
}

/* Testimonials: keep the slide counter below the quote (quotes vary in length). */
.tp-testimonial-area .fraction-wrapper {
  position: relative;
  bottom: auto;
  margin-top: 40px;
}
.tp-testimonial-area .tp-testimonial-slider-item p {
  min-height: 0;
}

/* CMS images replace pre-sized template images: lock them to the template's slot sizes. */
.tp-testimonial-thumb img {
  width: 312px;
  max-width: 100%;
  height: 412px;
  object-fit: cover;
}
.tp-testimonial-thumb-2 img {
  width: 164px;
  height: 180px;
  object-fit: cover;
}
.tp-awards-item > img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.tp-brand-item img {
  max-height: 48px;
  width: auto;
}

/* Text logo, used until a logo image is uploaded in Site Settings. */
.ed-text-logo {
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--tp-common-black);
  line-height: 1;
}
.ed-text-logo-white {
  color: var(--tp-common-white);
}

/* Footer link columns */
.ed-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ed-footer-links li {
  margin-bottom: 6px;
}

/* Call-to-action on the brand colour: deeper blue so white text stays readable. */
.ed-bg-brand-deep {
  background-color: var(--ed-blue-dark);
}
.ed-btn-white {
  background-color: #fff;
}
.ed-cta-primary .ed-btn-outline:hover {
  background: #fff;
  color: var(--ed-blue-dark);
}

/* Supporting text on the deep-blue CTA (grey would drop below 4.5:1). */
.ed-text-on-brand {
  color: rgba(255, 255, 255, 0.92);
}

/* Hero: the template's 200px top padding leaves a large empty band under the
   header now that the headline runs to three lines. */
@media (min-width: 992px) {
  .tp-hero-area.tp-hero-spacing {
    padding-top: 150px;
  }
  .tp-hero-content .tp-hero-customer {
    margin-bottom: 30px;
  }
  /* The template pulls this block up 35px, which collides with a three-line headline. */
  .tp-hero-content .tp-hero-bottom-content {
    margin-top: 25px;
  }
}

/* Phones: the template's hero headline size overflows a 375px screen. */
@media (max-width: 575px) {
  .tp-hero-title {
    font-size: 40px;
    line-height: 1.05;
  }
  .tp-hero-title .tp-hero-title-sm {
    margin-bottom: 8px;
  }
}

/* Hero headline pill: the template fixes it at 151x65px for the word “We’re”,
   which squashes longer text and pushes the arrow onto a second line.
   Size it to its content and keep the arrow inline. */
.tp-hero-title-sm {
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  width: auto;
  height: auto;
  padding: 14px 28px;
  line-height: 1;
  background: var(--ed-blue-dark);
  color: #fff;
}
.tp-hero-title-sm > span {
  display: inline-block;
  line-height: 1;
}
.tp-hero-title-sm svg {
  flex-shrink: 0;
}
.tp-hero-title-sm svg path {
  fill: currentColor;
}
@media (max-width: 575px) {
  .tp-hero-title-sm {
    padding: 10px 20px;
    gap: 10px;
  }
}

/* ------------------------------------------------------------------ Blog */
.ed-blog-thumb-empty {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #eef4f8, #dbe7ef);
}
.ed-crumb-sep::before {
  content: "/";
  margin: 0 10px;
  opacity: 0.5;
}
.ed-category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ed-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 1px solid var(--tp-border-1, #e5e7eb);
  border-radius: 20px;
  font-family: var(--tp-ff-heading);
  font-size: 15px;
  font-weight: 500;
  color: var(--tp-common-black);
  transition: all 0.25s ease;
}
.ed-category-pill span {
  font-size: 12px;
  opacity: 0.55;
}
.ed-category-pill:hover {
  border-color: var(--tp-common-black);
  color: var(--tp-common-black);
}
.ed-category-pill.is-active {
  background: var(--ed-blue-dark);
  border-color: var(--ed-blue-dark);
  color: #fff;
}

.ed-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 20px 0 60px;
}
.ed-page-link {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tp-border-1, #e5e7eb);
  border-radius: 20px;
  font-family: var(--tp-ff-heading);
  font-weight: 500;
  color: var(--tp-common-black);
}
.ed-page-link:hover {
  border-color: var(--tp-common-black);
  color: var(--tp-common-black);
}
.ed-page-link.is-active {
  background: var(--ed-blue-dark);
  border-color: var(--ed-blue-dark);
  color: #fff;
}

/* Article body rendered from the editor */
.ed-post-cover img {
  border-radius: 10px;
}
.ed-post-body {
  font-size: 18px;
  line-height: 1.65;
}
.ed-post-body h2 {
  font-size: 38px;
  line-height: 1.2;
  margin: 50px 0 20px;
}
.ed-post-body h3 {
  font-size: 28px;
  line-height: 1.25;
  margin: 40px 0 16px;
}
.ed-post-body h4 {
  font-size: 22px;
  margin: 32px 0 12px;
}
.ed-post-body p {
  margin-bottom: 20px;
}
.ed-post-body ul,
.ed-post-body ol {
  margin: 0 0 24px 22px;
  padding: 0;
}
.ed-post-body ul {
  list-style: disc;
}
.ed-post-body ol {
  list-style: decimal;
}
.ed-post-body li {
  margin-bottom: 10px;
}
.ed-post-body a {
  color: var(--ed-blue-dark);
  text-decoration: underline;
}
.ed-post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 30px 0;
}
.ed-post-body blockquote {
  border-left: 4px solid var(--tp-theme-primary);
  padding: 6px 0 6px 24px;
  margin: 30px 0;
  font-size: 22px;
  font-family: var(--tp-ff-heading);
}
.ed-post-body pre {
  background: var(--tp-common-black);
  color: #fff;
  padding: 20px 24px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 15px;
  margin-bottom: 24px;
}
.ed-post-body hr {
  margin: 40px 0;
  opacity: 0.15;
}
.tp-blog-details-dates span.borders {
  margin: 0 10px;
}
.ed-related {
  border-top: 1px solid var(--tp-border-1, #e5e7eb);
}

/* ---------------------------------------------------------------- Mega menu
   The template's mega menu is a flat white panel with hard column rules. This
   modernises it: one rounded card, soft shadow, hover pills on the links and
   the promo image treated as a card rather than a stray column.             */
.ed-megamenu {
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(5, 20, 46, 0.14);
  border: 1px solid rgba(5, 20, 46, 0.06);
  overflow: hidden;
  padding: 0;
}
.ed-megamenu-grid {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.ed-megamenu-cols {
  display: flex;
  /* Wraps rather than crushes. With the promo panel taking 240px, five
     columns leave roughly 184px each at a 1230 menu — workable, but a sixth
     would squeeze the labels past legibility. Wrapping lets the row break
     instead. */
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  padding: 34px 20px 30px;
  gap: 8px;
}
/* Equal columns whatever the count, so nothing is left stranded — with a
   basis wide enough that they reflow before the labels start breaking. */
.ed-megamenu-col {
  flex: 1 1 170px;
  min-width: 0;
  padding: 0 14px;
  position: relative;
}
.ed-megamenu-col + .ed-megamenu-col::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(5, 20, 46, 0.07);
}
.ed-megamenu .tp-megamenu-title {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ed-grey, #828690);
  margin-bottom: 14px;
  padding-left: 10px;
}
.ed-megamenu .tp-megamenu-list ul li {
  margin: 0;
}
.ed-megamenu .tp-megamenu-list ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.35;
  color: #05142e;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.ed-megamenu .tp-megamenu-list ul li a:hover {
  background: rgba(6, 85, 237, 0.07);
  color: var(--tp-theme-primary);
}
/* Small marker that fills in on hover, so the row reads as interactive. */
.ed-megamenu-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: rgba(5, 20, 46, 0.18);
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.ed-megamenu .tp-megamenu-list ul li a:hover .ed-megamenu-dot {
  background: var(--tp-theme-primary);
  transform: scale(1.35);
}
/* Promo image: fills its side of the card, with the section name over it. */
.ed-megamenu-promo {
  position: relative;
  flex: 0 0 240px;
  align-self: stretch;
  overflow: hidden;
}
.ed-megamenu-promo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ed-megamenu-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 20, 46, 0.78), rgba(5, 20, 46, 0) 55%);
}
.ed-megamenu-promo-label {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 1;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 1399.98px) {
  .ed-megamenu-cols {
    padding: 26px 12px 22px;
    flex-wrap: wrap;
  }
  .ed-megamenu-col {
    flex: 1 1 200px;
  }
}

/* ====================================================== Service landing page
   White and light blue. Sections alternate plain white against the faintest
   blue tint, so the page has a pulse instead of one flat field, and exactly
   one section — the proof band — is painted in the full brand blue. Saving
   the saturated blue for a single block is what stops the page reading as a
   template with the accent slider turned up.

   The names are kept from the earlier warm palette so every rule that
   referenced them keeps working; only the values moved.

   Body text is the brand navy rather than pure black: softer on white, and
   still well past AA on every surface used below.

   No header inversion here. That rule existed because the hero was navy and
   the transparent header sat on it with near-black links; on a white hero the
   same rule would paint them white on white — the same bug the other way. */
:root {
  --ed-cream: #ffffff;
  --ed-sand: #f1f6ff;
  --ed-blush: #f8fbff;
  --ed-line: rgba(6, 85, 237, 0.13);
  --ed-body: #4a4f5a;
  /* Blue tints, lightest first. Used for panels, hairlines and ghost numerals
     so every non-white surface on the page is a tint of the logo blue. */
  --ed-blue-50: #f8fbff;
  --ed-blue-100: #edf3ff;
  --ed-blue-200: #dce8ff;
  --ed-blue-300: #bed4ff;
}

/* ---- Hero ----
   White, with two soft blue lights rather than a gradient wash. A flat
   top-to-bottom gradient is the thing that makes a hero look generated; two
   off-centre radials of different size read as lighting instead. */
.ed-shero {
  position: relative;
  overflow: hidden;
  padding: 180px 0 110px;
  background:
    radial-gradient(1120px 620px at 4% -6%, rgba(6, 85, 237, 0.13), rgba(6, 85, 237, 0) 60%),
    radial-gradient(760px 520px at 88% 108%, rgba(6, 85, 237, 0.08), rgba(6, 85, 237, 0) 62%),
    #fff;
}
/* Banner variant. The photo is not a texture under a flat wash — it is kept
   visible on the right, where the form card sits over it, and faded out to
   near-white on the left so the headline has clean paper to sit on. That
   left-to-right read is the whole trick: one image, two jobs. */
.ed-shero-banner {
  padding: 165px 0 100px;
}
.ed-shero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.ed-shero-bg-inner {
  display: block;
  width: 100%;
  height: 100%;
}
/* Size and fit come from `.ed-parallax > *`; only the framing is set here. */
.ed-shero-bg img {
  object-position: 68% 38%;
}
.ed-shero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Thinner on the right than before. The photo was being washed almost to
       white across the whole hero, which is most of why the section read as
       flat; now it is only held back where the copy needs clean paper. The
       copy column ends near 52%, and 0.84 white there still puts the intro
       grey at 5.8:1 over the photo's darkest pixel. */
    linear-gradient(
      96deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.94) 32%,
      rgba(247, 251, 255, 0.84) 52%,
      rgba(231, 241, 255, 0.5) 74%,
      rgba(212, 230, 255, 0.28) 100%
    ),
    radial-gradient(900px 520px at 2% -4%, rgba(6, 85, 237, 0.12), rgba(6, 85, 237, 0) 58%);
}
/* A hairline of brand blue along the foot, so the hero ends on a drawn edge
   instead of dissolving into the logo strip below it. */
.ed-shero-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(6, 85, 237, 0), rgba(6, 85, 237, 0.3) 50%, rgba(6, 85, 237, 0));
}
.ed-shero-banner > .container {
  position: relative;
  z-index: 1;
}

/* ---- Quote form card ----
   The one element on the page that should look like it is floating above
   everything else, because it is the conversion. A blue rule across the top
   edge ties it to the brand without colouring the whole card. */
.ed-quote-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ed-blue-200);
  border-radius: 12px;
  padding: 30px 28px 28px;
  box-shadow:
    0 2px 6px rgba(5, 20, 46, 0.04),
    0 36px 80px -24px rgba(6, 85, 237, 0.3);
}
.ed-quote-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--tp-theme-primary), var(--ed-blue-light));
}
.ed-quote-title {
  margin: 0 0 6px;
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ed-blue-dark);
}
.ed-quote-note {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ed-body);
}
.ed-quote-field {
  margin-bottom: 14px;
}
.ed-quote-field label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--tp-ff-heading);
  font-weight: 500;
  font-size: 13px;
  color: var(--ed-blue-dark);
}
.ed-quote-field input,
.ed-quote-field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(5, 20, 46, 0.16);
  border-radius: 10px;
  background: #fff;
  color: var(--ed-blue-dark);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ed-quote-field textarea {
  resize: vertical;
  min-height: 78px;
}
.ed-quote-field input:focus,
.ed-quote-field textarea:focus {
  outline: none;
  border-color: var(--tp-theme-primary);
  /* Visible focus ring: the review asked for one, and a colour change alone
     is not enough for anyone who cannot distinguish it. */
  box-shadow: 0 0 0 3px rgba(6, 85, 237, 0.18);
}
.ed-quote-submit {
  width: 100%;
  margin-top: 6px;
  padding: 14px 18px;
  border: 0;
  border-radius: 30px;
  background: var(--tp-theme-primary);
  color: #fff;
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.ed-quote-submit:hover:not(:disabled) {
  background: var(--ed-blue-deep);
  transform: translateY(-1px);
}
.ed-quote-submit:disabled {
  opacity: 0.65;
  cursor: default;
}
.ed-quote-error {
  margin: 0 0 12px;
  font-size: 14px;
  color: #b3261e;
}
.ed-quote-done {
  text-align: center;
}
.ed-quote-again {
  margin-top: 10px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--tp-theme-primary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
@media (max-width: 991.98px) {
  .ed-shero-banner { padding: 140px 0 70px; }
  .ed-quote-card { margin-top: 36px; }
  /* Stacked, so the left-to-right fade has nothing to fade across: the copy
     and the form now sit one above the other over the whole photo. */
  .ed-shero-bg::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(238, 245, 255, 0.93) 100%),
      radial-gradient(700px 420px at 10% 2%, rgba(6, 85, 237, 0.1), rgba(6, 85, 237, 0) 60%);
  }
}

/* Tinted pill with a live dot — reads as a label on the page rather than one
   more outlined chip in a row of outlined chips. */
.ed-shero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 17px 7px 13px;
  margin-bottom: 26px;
  border-radius: 30px;
  background: var(--ed-blue-100);
  color: var(--tp-theme-primary);
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ed-shero-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tp-theme-primary);
  box-shadow: 0 0 0 4px rgba(6, 85, 237, 0.16);
}
.ed-shero-title {
  margin: 0 0 30px;
  color: var(--ed-blue-dark);
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  /* The line-height has to clear the highlight box, not the glyphs. An
     inline background covers the font's full content area — about 1.26em —
     so at 0.95 the boxes on consecutive lines overlapped by 24px and the
     words collided. 1.36 leaves roughly 7px of air between them.
     The size comes down a little to pay for the extra leading, so the
     three-line headline does not grow past the form beside it. */
  font-size: clamp(38px, 5.6vw, 76px);
  line-height: 1.36;
  letter-spacing: -0.028em;
}
.ed-shero-accent {
  color: var(--tp-theme-primary);
}
.ed-shero-intro {
  max-width: 620px;
  margin: 0 0 30px;
  /* Darker than --ed-body, which is what the rest of the page uses. The
     mesh behind this paragraph reaches rgb(116,165,249) at its right edge,
     where #4a4f5a measures 3.32:1 — under AA at 18px. #233249 holds 5.2:1
     against the same worst-case pixel. */
  color: #233249;
  font-size: 18px;
  line-height: 1.66;
}
.ed-shero-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}
/* Separated by thin rules rather than boxed individually: four outlined pills
   under an outlined eyebrow was four more boxes than the hero needed. */
.ed-shero-badges li {
  padding: 2px 18px 2px 0;
  border-right: 1px solid var(--ed-blue-200);
  color: var(--ed-blue-dark);
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}
.ed-shero-badges li:last-child { border-right: 0; padding-right: 0; }
.ed-shero-thumb {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 30px 60px rgba(5, 20, 46, 0.16);
}
.ed-shero-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
@media (max-width: 991.98px) {
  .ed-shero { padding: 150px 0 90px; }
  .ed-shero-thumb { margin-top: 40px; }
  .ed-shero-thumb img { aspect-ratio: 16 / 10; }
}

/* The feature block themes its heading and paragraph but not its tick list —
   that inherits --tp-grey-5 (#f3f1f2), which is meant for the dark panel. On
   the light panel it is near-white on white, 1.12:1. Every page using the
   block had a dark panel until this one, so it had not shown up. */
.tp-about-feature-info.tp-bg-common-white .tp-service-cst-info-list ul li {
  color: #3b3f47;
}
.tp-about-feature-info.tp-bg-common-white .tp-service-cst-info-list ul li span {
  color: var(--tp-theme-primary);
}

/* Counter figures were <h3>, which put "1,000+" and "500+" into the document
   outline for no reason. They are a <div> now, so they need the heading
   typography they used to inherit — everything but the semantics. */
.tp-counter-number {
  font-family: var(--tp-ff-heading);
  color: var(--tp-common-black);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 10px;
}

/* Same reason as the counters: the drawer greeting is a <div> now, and its
   class sets everything except the face it used to inherit from h3. */
.tp-offcanvas-title {
  font-family: var(--tp-ff-heading);
}

/* ---- USP bento ----
   Measured off the reference (goodface.agency, the card grid under the hero)
   rather than eyeballed: a six-column grid at 16px gutters, cards at a 40px
   radius with no border, 40px of inner padding, and a 72px display figure with
   its label set *beside* it rather than under it — that last detail is most of
   why the reference reads calm.
   The one deliberate departure is colour: the reference is grey on near-white,
   ours is sand on cream, because the rest of this page is warm. */
.ed-bento {
  padding: 110px 0 100px;
  background: var(--ed-blue-50);
}
.ed-bento-head {
  max-width: 720px;
  margin: 0 0 44px;
}
.ed-bento-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  /* Was --ed-grey (#828690), which is 3.5:1 on white and fails AA at 13px.
     Brand blue is 5.95:1 and matches every other eyebrow on the page. */
  color: var(--tp-theme-primary);
  font-family: var(--tp-ff-heading);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ed-bento-title {
  margin: 0;
  color: var(--ed-blue-dark);
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.ed-bento-accent {
  color: var(--tp-theme-primary);
}
.ed-bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.ed-bento-span-3 { grid-column: span 3; }
.ed-bento-span-2 { grid-column: span 2; }

.ed-bento-cell {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 360px;
  border-radius: 20px;
  background: #fff;
  /* White card on a blue tint, so the separation is tonal; the hairline is
     only there to keep the corner legible where a photo bleeds to it. */
  border: 1px solid rgba(6, 85, 237, 0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.ed-bento-cell:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -28px rgba(6, 85, 237, 0.42);
}
/* A narrow cell has no room for a side-by-side split, so it always stacks. */
.ed-bento-span-2 .ed-bento-copy { max-width: none; }

/* --- Stat cells: figure and label on one line, copy beneath, art behind. --- */
.ed-bento-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 40px;
  max-width: 560px;
}
.ed-bento-stat {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.ed-bento-figure {
  flex: 0 0 auto;
  color: var(--ed-blue-dark);
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.028em;
}
/* The label is the card's heading; it just happens to sit beside the number
   instead of over it, which is the detail that makes the reference work. */
.ed-bento-label {
  align-self: center;
  max-width: 13ch;
  margin: 0;
  color: #616874;
  font-family: var(--tp-ff-heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.ed-bento-cell-title {
  margin: 0;
  color: var(--ed-blue-dark);
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.ed-bento-text {
  margin: 0;
  max-width: 42ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ed-body);
}
/* On a stat cell the art occupies the bottom-right corner, so the copy is
   held clear of it — otherwise the dots read straight through the sentence. */
.ed-bento-cell:not(.has-photo) .ed-bento-copy { max-width: 70%; }
.ed-bento-cell:not(.has-photo) .ed-bento-text { max-width: 34ch; }

/* Line art bleeding past the card's corner, as the reference's dial and
   dotted map do. Decoration only — aria-hidden, and behind the copy. */
.ed-bento-art {
  position: absolute;
  right: -38px;
  bottom: -44px;
  width: 215px;
  height: 215px;
  color: var(--tp-theme-primary);
  opacity: 0.15;
  pointer-events: none;
}
.ed-bento-art svg { width: 100%; height: 100%; display: block; }

/* --- Photo cells: copy left, image bled to the card's right edge. --- */
.ed-bento-cell.has-photo { align-items: stretch; }
.ed-bento-cell.has-photo .ed-bento-copy {
  flex: 1 1 auto;
  justify-content: center;
  padding-right: 24px;
}
.ed-bento-media {
  flex: 0 0 42%;
  align-self: stretch;
  min-width: 0;
}
.ed-bento-media-inner {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ed-bento-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.ed-bento-cell:hover .ed-bento-media img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .ed-bento-cell:hover { transform: none; }
  .ed-bento-cell:hover .ed-bento-media img { transform: none; }
}
@media (max-width: 1199.98px) {
  .ed-bento-cell { min-height: 320px; }
  .ed-bento-span-2 { grid-column: span 3; }
}
@media (max-width: 991.98px) {
  .ed-bento { padding: 80px 0 70px; }
  /* One per row: below this the split card has no room for both halves. */
  .ed-bento-span-3,
  .ed-bento-span-2 { grid-column: span 6; }
}
@media (max-width: 575.98px) {
  .ed-bento-cell {
    flex-direction: column;
    min-height: 0;
    border-radius: 18px;
  }
  .ed-bento-copy { padding: 30px 26px; }
  .ed-bento-cell.has-photo .ed-bento-copy { padding-right: 26px; }
  .ed-bento-media { flex: 0 0 auto; height: 200px; width: 100%; }
  /* At this width there is no corner to spare: the art would sit under the
     sentence again, so it goes and the copy gets the full card back. */
  .ed-bento-art { display: none; }
  .ed-bento-cell:not(.has-photo) .ed-bento-copy { max-width: none; }
  .ed-bento-cell:not(.has-photo) .ed-bento-text { max-width: none; }
}

/* ---- USP cards on a gradient band ---- */
.ed-usp {
  position: relative;
  padding: 0 0 100px;
}
/* --ed-usp-reveal is how much of the section's foot stays white: the part of
   the cards hanging below the blue, plus the section's bottom padding. At a
   ~275px card that leaves roughly 60% of each card on the blue and 40% below,
   which is the proportion in the reference. */
.ed-usp-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
  height: calc(100% - var(--ed-usp-reveal, 205px));
  background:
    radial-gradient(900px 480px at 85% 0%, rgba(6, 85, 237, 0.5), rgba(6, 85, 237, 0) 64%),
    linear-gradient(135deg, #0a3ad0 0%, #0655ed 42%, #2f6ef5 100%);
}
.ed-usp-band {
  position: relative;
  z-index: 1;
  padding: 90px 0 0;
}
.ed-usp-head {
  max-width: 760px;
  margin: 0 0 42px;
}
.ed-usp-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--tp-ff-heading);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* On the blue band the usual lighter-blue accent is 1.56:1 — invisible. White
   is the only highlight that holds (4.5:1 against the gradient's lightest
   stop), so the relationship inverts: the line sits in a pale tint and the
   emphasis is pure white. Both clear the 3:1 large-text floor. */
.ed-usp-title {
  margin: 0;
  color: #cfe0ff;
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.12;
}
.ed-usp-title .ed-shero-accent {
  color: #fff;
}
.ed-usp-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 26px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 50px rgba(4, 23, 80, 0.16);
  transition: transform 0.26s ease, box-shadow 0.26s ease;
}
.ed-usp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(4, 23, 80, 0.22);
}
.ed-usp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 15px;
  color: var(--tp-theme-primary);
  background: linear-gradient(145deg, rgba(6, 85, 237, 0.16), rgba(6, 85, 237, 0.05));
}
.ed-usp-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.ed-usp-card-title {
  margin: 0 0 10px;
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: var(--tp-theme-primary);
}
.ed-usp-card-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #3b3f47;
}
/* Stacked, a single cut would leave the first card on blue and the rest
   stranded on white. Below the grid breakpoints the blue just backs the
   heading and the cards sit under it. */
@media (max-width: 767.98px) {
  .ed-usp-bg {
    height: var(--ed-usp-bg-mobile, 230px);
  }
  .ed-usp-band {
    padding-top: 70px;
  }
}

/* ---- Proof band ----
   The single saturated block on the page. Everything else is white or a blue
   tint, so this one lands hard — which is the point: it carries the numbers a
   prospect is deciding on. Two blocks (statement + counters) share the band,
   so the statement drops its bottom padding and the counters drop their top.

   White on #0655ED is 5.95:1, so body text on this band is safe at any size;
   the dimmed label colour below is checked at 4.6:1. */
/* Two classes deliberately: `.ed-statement`'s own responsive padding is
   declared later in the file, and at one class it would win here. */
/* Navy, not the saturated brand blue it used to be. The chosen reference
   punctuates its light page with deep slate panels and keeps its accent
   colour for buttons only — which is better discipline: the blue now means
   "act" everywhere it appears, instead of also meaning "section". The
   rounded top edge is theirs too; it makes the block read as a panel laid
   on the page rather than a full-bleed stripe. */
.ed-statement.ed-statement-blue {
  padding: 104px 0 56px;
  border-radius: 28px 28px 0 0;
  background:
    radial-gradient(900px 520px at 88% 0%, rgba(61, 127, 242, 0.22), rgba(61, 127, 242, 0) 62%),
    var(--ed-navy, #0b1b33);
}
/* Alphas are set from the composite, not by eye. Over #0655ED, white at 0.9
   lands at 5.10:1 and at 0.78 it lands at 4.20:1 — so anything at body size
   has to be 0.9, and only the big bold statement can sit lower than that. */
.ed-statement-blue .ed-statement-label { color: rgba(255, 255, 255, 0.9); }
/* The accent cannot be blue on blue. Emphasis becomes pure white against a
   dimmed body — the same device, inverted. The dimmed body is 26px+ bold, so
   3:1 applies to it and 4.06:1 clears that with room. */
.ed-statement-blue .ed-statement-text { color: rgba(255, 255, 255, 0.76); }
.ed-statement-blue .ed-statement-accent { color: #fff; }
.ed-statement-blue .ed-statement-foot { color: rgba(255, 255, 255, 0.9); }

.ed-proof {
  padding: 0 0 100px;
  background: var(--ed-navy, #0b1b33);
}
.ed-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.ed-proof-number {
  color: #fff;
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.028em;
}
.ed-proof-label {
  display: block;
  margin-top: 6px;
  /* 0.9 over the band is 5.10:1; 0.8 was 4.34:1 and missed AA at 16px. */
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--tp-ff-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
}
@media (max-width: 991.98px) {
  .ed-statement.ed-statement-blue { padding: 76px 0 44px; }
  .ed-proof { padding-bottom: 72px; }
  /* 2×2 from tablet down: at four across the labels wrap to two lines in a
     170px column and the row stops scanning as a row. */
  .ed-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; padding-top: 38px; }
}

/* ---- Oversized statement ---- */
.ed-statement {
  padding: 110px 0 100px;
}
.ed-statement-label {
  display: inline-block;
  padding-top: 14px;
  color: var(--ed-grey);
  font-family: var(--tp-ff-heading);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ed-statement-text {
  margin: 0;
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--ed-blue-dark);
}
.ed-statement-accent {
  color: var(--tp-theme-primary);
}
.ed-statement-foot {
  margin: 26px 0 0;
  max-width: 640px;
  font-size: 17px;
  line-height: 1.65;
  color: #3b3f47;
}
@media (max-width: 991.98px) {
  .ed-statement { padding: 80px 0 70px; }
  .ed-statement-label { margin-bottom: 18px; padding-top: 0; }
}

/* ---- Shared section heading ----
   One eyebrow + title pair for every section on this page, so the type scale
   is consistent and each section does not re-invent its own header. The
   template's own `.tp-section-title` is uppercase at 60px, which shouts at
   every section equally; this is sentence case and smaller. */
.ed-sec-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--tp-theme-primary);
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ed-sec-title {
  margin: 0;
  color: var(--ed-blue-dark);
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  /* Pushed up hard from 46px. The page was legible at the smaller scale but
     had no voice — nothing on it was ever allowed to be big. */
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.024em;
}
.ed-sec-accent { color: var(--tp-theme-primary); }
.ed-sec-intro {
  margin: 0;
  max-width: 46ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ed-body);
}

/* ---- Process timeline ----
   A rule through numbered nodes, not a row of cards: the point of this
   section is sequence, and four identical boxes carried none of it. */
.ed-steps { padding: 120px 0 110px; }
.ed-steps-tint { background: var(--ed-blue-50); }
.ed-steps-light { background: #fff; }

/* Title left, intro right. The sections above and below are centred, and a
   third centred stack in a row is what makes a page read as assembled. */
.ed-steps-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
  margin-bottom: 68px;
}
.ed-steps-intro {
  margin: 0;
  max-width: 40ch;
  padding-bottom: 4px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ed-body);
}

/* ---- Pinned horizontal rail ----
   The default state is a swipeable, snapping row. The pin only takes over
   once `is-pinned` is added from JS; see PinnedRail.tsx. That ordering is the
   whole safety story — without scripts every card is still reachable. */
.ed-rail {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ed-rail::-webkit-scrollbar { display: none; }
.ed-rail.is-pinned {
  overflow: hidden;
  scroll-snap-type: none;
}
.ed-rail-track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  /* Pad back to the container's gutter so the first card lines up with the
     heading above it while the rail itself runs to the window edge. */
  padding: 4px max(24px, calc((100vw - 1230px) / 2)) 24px;
  width: max-content;
}
.ed-step {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 460px;
  min-height: 330px;
  padding: 38px 36px 34px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(6, 85, 237, 0.1);
  scroll-snap-align: start;
  transition: box-shadow 0.3s ease;
}
.ed-steps-tint .ed-step { background: #fff; }
.ed-step:hover { box-shadow: 0 30px 60px -30px rgba(6, 85, 237, 0.45); }
/* Each card carries its own rule, which together read as the connector the
   grid version drew behind the nodes. */
.ed-step-rule {
  margin-top: auto;
  display: block;
  height: 3px;
  border-radius: 3px;
  background: var(--ed-blue-100);
  overflow: hidden;
}
.ed-step:hover .ed-step-rule { background: var(--tp-theme-primary); }
/* Solid fill, not a ring — the node has to punch a hole in the connector. */
.ed-step-node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 26px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ed-blue-200);
  color: var(--tp-theme-primary);
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 16px;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.ed-step:hover .ed-step-node {
  background: var(--tp-theme-primary);
  border-color: var(--tp-theme-primary);
  color: #fff;
}
.ed-step-title {
  margin: 0 0 10px;
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.26;
  color: var(--ed-blue-dark);
}
.ed-step-text {
  margin: 0 0 26px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ed-body);
}
@media (max-width: 991.98px) {
  .ed-steps { padding: 84px 0 76px; }
  .ed-steps-head { margin-bottom: 46px; }
  .ed-rail-track { gap: 16px; padding-left: 24px; padding-right: 24px; }
  .ed-step { width: 300px; min-height: 290px; padding: 30px 26px 26px; border-radius: 12px; }
}
@media (max-width: 575.98px) {
  /* Nearly full-bleed cards so the next one always peeks in and the row
     reads as swipeable without a visible scrollbar. */
  .ed-step { width: min(84vw, 320px); }
}

/* ---- What we offer ----
   The scan section: three lists of deliverables, no photography. See the
   note in OfferColumns.tsx for why the images were taken out. */
.ed-offer {
  padding: 120px 0 100px;
  background: var(--ed-blue-50);
}
.ed-offer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
  margin-bottom: 60px;
}
/* Stacking cards. The default is a plain column — the pin is added from JS
   and only above 992px, so this is also exactly what a phone and a
   script-less browser get. */
.ed-offer-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ed-offer-card {
  position: relative;
  display: grid;
  /* Copy left, photo bled to the right edge. A full-width card with a
     three-item list is mostly empty otherwise. */
  grid-template-columns: 1fr;
  align-items: stretch;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(6, 85, 237, 0.1);
  /* The origin matters once the cards scale: they should shrink towards the
     top edge that stays visible in the stack, not towards their middle. */
  transform-origin: 50% 0%;
  transition: box-shadow 0.25s ease;
}
.ed-offer-card.has-photo { grid-template-columns: minmax(0, 1fr) 42%; }
.ed-offer-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 40px 36px;
}
.ed-offer-media {
  position: relative;
  min-width: 0;
  /* Holds the card's height when the copy column is short. */
  min-height: 300px;
  background: var(--ed-blue-50);
}
.ed-offer-media-inner {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ed-offer-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A soft wash on the inner edge so the photo dissolves into the card rather
   than butting against the list with a hard vertical seam. */
.ed-offer-media::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 90px;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
  pointer-events: none;
}
.ed-offer-card:hover {
  box-shadow: 0 30px 60px -28px rgba(6, 85, 237, 0.4);
}
/* Once stacked the cards overlap, so each needs an opaque edge and a shadow
   to sit convincingly on top of the one it is covering. */
.ed-offer-stack.is-stacked { gap: 0; }
.ed-offer-stack.is-stacked .ed-offer-card {
  min-height: 330px;
  margin-bottom: 24px;
  box-shadow: 0 -16px 40px -22px rgba(6, 85, 237, 0.35);
}
.ed-offer-stack.is-stacked .ed-offer-card:last-child { margin-bottom: 0; }
/* A tinted numeral sitting behind the heading, not a filled badge beside it:
   the three columns should read as one list in three parts. */
.ed-offer-index {
  position: absolute;
  top: 14px;
  right: 24px;
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  /* Decorative and aria-hidden, so contrast minimums do not apply — but at
     --ed-blue-100 it was 1.11:1 and effectively invisible. */
  color: var(--ed-blue-200);
  pointer-events: none;
}
.ed-offer-title {
  position: relative;
  margin: 0 0 20px;
  padding: 0 70px 20px 0;
  border-bottom: 1px solid var(--ed-blue-100);
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.26;
  color: var(--ed-blue-dark);
}
.ed-offer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ed-offer-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ed-body);
}
.ed-offer-list li a { color: inherit; }
.ed-offer-list li a:hover { color: var(--tp-theme-primary); }
/* Tick in a soft blue disc so the list has a texture of its own and does not
   read as the same bullet list the FAQ and feature sections use. */
.ed-offer-tick {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ed-blue-100);
  color: var(--tp-theme-primary);
  line-height: 0;
}
@media (max-width: 991.98px) {
  .ed-offer { padding: 84px 0 64px; }
  .ed-offer-head { margin-bottom: 42px; }
  .ed-offer-card,
  .ed-offer-card.has-photo { grid-template-columns: 1fr; border-radius: 12px; }
  .ed-offer-copy { padding: 32px 26px 28px; }
  /* Photo below the list here: the list is why the reader stopped, so it
     keeps the top of the card. */
  .ed-offer-media { min-height: 0; height: 210px; }
  .ed-offer-media::after {
    inset: auto 0 auto 0;
    top: 0;
    width: auto;
    height: 70px;
    background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0));
  }
}

/* ---- Parallax wrapper ----
   The child is overscaled here rather than in JS so the drift can never
   expose an edge, and so the resting state — if the scrub never runs — is a
   correctly filled frame instead of a gap. */
.ed-parallax {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ed-parallax > * {
  display: block;
  width: 100%;
  height: calc(100% + 120px);
  margin-top: -60px;
  object-fit: cover;
}

/* ---- Full-bleed split feature ----
   Runs to the window edge while every other section stays inside the 1230px
   container. That change of pace is the point; see the note in Feature.tsx. */
.ed-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: #fff;
}
.ed-feature-flip > .ed-feature-media { order: 2; }
.ed-feature-media {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}
/* Height and object-fit for the image come from `.ed-parallax > *`, which
   overscales it so the drift never exposes an edge. Setting height here too
   would win on specificity and undo that. */
.ed-feature-media-inner {
  display: block;
  width: 100%;
  height: 100%;
}
.ed-feature-panel {
  display: flex;
  align-items: center;
  padding: 104px clamp(24px, 6vw, 104px);
}
.ed-feature-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 560px;
}
.ed-feature-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ed-body);
  /* The copy arrives as two paragraphs separated by a blank line. */
  white-space: pre-line;
}
.ed-feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ed-blue-100);
}
.ed-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ed-blue-100);
  font-family: var(--tp-ff-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ed-blue-dark);
}
.ed-feature-tick {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ed-blue-100);
  color: var(--tp-theme-primary);
  line-height: 0;
}
@media (max-width: 991.98px) {
  .ed-feature { grid-template-columns: 1fr; }
  /* Photo first on a phone whichever side it takes on desktop. */
  .ed-feature-flip > .ed-feature-media { order: 0; }
  .ed-feature-media { min-height: 0; aspect-ratio: 16 / 10; }
  .ed-feature-panel { padding: 56px 24px 64px; }
  .ed-feature-copy { max-width: none; }
}

/* --------------------------------------------------------------- Preloader
   The template's loader is a near-black panel (#121212) with white letters.
   On a light site that is a black flash before every page, so the panel goes
   white and the wordmark takes the brand navy — 18.8:1, and the letters only
   animate opacity so recolouring them is safe. */
.loader-wrap svg {
  fill: #ffffff;
}
.loader-wrap .loader-wrap-heading .load-text {
  color: var(--ed-blue-dark);
}

/* ------------------------------------------------------------- Motion bits
   Reveal.tsx deliberately has no hidden-by-default class. Hiding content in
   CSS and waiting for a trigger to undo it is what stranded copy at opacity 0
   twice on this site, so the from-state is written inline in the same tick as
   the tween that clears it. Nothing here can hide content on its own. */

/* WebGL field behind a dark section. The canvas sits on a negative layer
   inside the host's own stacking context, so everything else paints above it
   untouched.

   It must not be done by lifting the children instead: `> *` also caught the
   section's decorative shape, which the template positions absolutely at
   100%x100%. Forcing it to relative dropped it into the flow and added about
   950px of empty space to the section. */
.ed-shader-host {
  position: relative;
  isolation: isolate;
}
.ed-shader-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  pointer-events: none;
}

/* --------------------------------------------------- Image banner with CTA
   The photo has pure white in the middle, where the text sits, so white type
   straight on it is 1:1 — unreadable. Scrim strengths are picked against that
   worst case (white-on-white), not against the photo's average:
     soft   0.50 -> white 3.84:1   (headings only, 24px+)
     medium 0.62 -> white 6.00:1   (safe for body copy)
     strong 0.72 -> white 8.80:1   (busy or very bright photos)
   The vertical gradient keeps a touch more light at the edges so the picture
   still reads as a picture rather than a grey panel. */
.ed-banner-cta {
  position: relative;
  isolation: isolate;
}
.ed-banner-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.ed-banner-scrim-soft::after {
  background: linear-gradient(180deg, rgba(4, 7, 15, 0.42) 0%, rgba(4, 7, 15, 0.5) 50%, rgba(4, 7, 15, 0.42) 100%);
}
.ed-banner-scrim-medium::after {
  background: linear-gradient(180deg, rgba(4, 7, 15, 0.54) 0%, rgba(4, 7, 15, 0.62) 50%, rgba(4, 7, 15, 0.54) 100%);
}
.ed-banner-scrim-strong::after {
  background: linear-gradient(180deg, rgba(4, 7, 15, 0.64) 0%, rgba(4, 7, 15, 0.72) 50%, rgba(4, 7, 15, 0.64) 100%);
}
/* Light tone: a white-to-pale-blue wash instead of a dark one, with navy type
   on it. This is the safer direction on a bright photo — over the darkest
   pixel a 0.86 white wash still composites to about rgb(219,224,233), so navy
   holds ~13:1, and over the white areas ~16:1. The dark scrim had to fight
   the photo's pure white; this one never does.
   The wash is angled rather than vertical so the photo keeps one bright
   corner and the section still reads as a photograph. */
.ed-banner-light.ed-banner-scrim-soft::after {
  background: linear-gradient(104deg, rgba(255, 255, 255, 0.78) 0%, rgba(240, 246, 255, 0.7) 55%, rgba(226, 237, 255, 0.6) 100%);
}
.ed-banner-light.ed-banner-scrim-medium::after {
  background: linear-gradient(104deg, rgba(255, 255, 255, 0.88) 0%, rgba(238, 245, 255, 0.82) 55%, rgba(222, 235, 255, 0.74) 100%);
}
.ed-banner-light.ed-banner-scrim-strong::after {
  background: linear-gradient(104deg, rgba(255, 255, 255, 0.94) 0%, rgba(236, 244, 255, 0.9) 55%, rgba(216, 231, 255, 0.84) 100%);
}
.ed-banner-light .tp-section-title,
.ed-banner-light .tp-section-subtitle {
  color: var(--ed-blue-dark);
}
/* Bring the closing CTA onto the same type scale as the rest of the page.
   The template sets this heading uppercase at 70px, which was the single
   loudest piece of type on the page and the last thing still shouting. */
.ed-banner-light .tp-section-title {
  font-size: clamp(30px, 3.9vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-transform: none;
}
.ed-banner-light .tp-section-subtitle {
  color: var(--tp-theme-primary);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ed-banner-light .tp-section-subtitle .borders {
  background: var(--tp-theme-primary);
}
.ed-banner-light .ed-banner-cta-inner p {
  color: var(--ed-body);
}
/* A white pill vanishes on a warm wash; outline it in the brand navy. */
.ed-btn-outline-ink {
  background: transparent;
  border: 1.5px solid rgba(5, 20, 46, 0.35);
}
.ed-btn-outline-ink:hover {
  background: var(--ed-blue-dark);
  border-color: var(--ed-blue-dark);
}
.ed-btn-outline-ink:hover,
.ed-btn-outline-ink:hover .btn-text,
.ed-btn-outline-ink:hover svg {
  color: #fff;
}

.ed-banner-cta-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

/* ------------------------------------------------------------------- FAQ
   Split: heading sticky in the left column, questions on the right. The
   option is still called "dark" in the content schema so existing pages keep
   rendering; on this site it paints the pale blue tint, never black.

   Navy questions, brand blue when open, body grey for answers — all on
   white, so none of the contrast work the old dark panel needed applies. */
/* The template's `tp-faq-spacing` opens with 170px of air, which was sized
   for the FAQ as a standalone page section. Here it follows a hard-edged
   colour band and the gap read as a missing section. */
.ed-faq.tp-faq-spacing {
  padding-top: 110px;
  padding-bottom: 120px;
}
.ed-faq-tint {
  position: relative;
  background: var(--ed-blue-50);
}
.ed-faq-head {
  position: sticky;
  top: 120px;
  padding-right: 32px;
  margin-bottom: 36px;
}
.ed-faq .tp-faq-wrap .accordion-item,
.ed-faq .tp-faq-wrap .accordion-item:not(:first-of-type) {
  background: #fff;
  border: 1px solid var(--ed-blue-200);
  border-radius: 20px;
}
.ed-faq .tp-faq-wrap .accordion-item.tp-faq-active,
.ed-faq .tp-faq-wrap .accordion-item.tp-faq-active:not(:first-of-type) {
  background: #fff;
  border-color: var(--tp-theme-primary);
  box-shadow: 0 24px 50px -26px rgba(6, 85, 237, 0.45);
}
.ed-faq .tp-faq-wrap .tp-faq-btn {
  color: var(--ed-blue-dark);
}
.ed-faq .tp-faq-wrap .tp-faq-active .tp-faq-btn,
.ed-faq .tp-faq-wrap .tp-faq-active .accordion-btn {
  color: var(--tp-theme-primary);
}
.ed-faq .tp-faq-wrap .accordion-btn {
  color: rgba(5, 20, 46, 0.4);
}
.ed-faq .tp-faq-details-para p,
.ed-faq .tp-faq-details-para ul li {
  color: var(--ed-body);
}
@media (max-width: 991.98px) {
  .ed-faq.tp-faq-spacing { padding-top: 76px; padding-bottom: 80px; }
  .ed-faq-head { position: static; padding-right: 0; }
}

/* ----------------------------------------------------------- Service cards
   Tag pills and copy on a tinted panel, a photo filling the lower half, and a
   pill button over the photo's bottom-left corner.

   The reference alternates pastel mint and peach. The brief is to build from
   the logo blue, so the tints are brand-blue washes against a cool neutral
   rather than a second colour family. */
/* Blue gradient backdrop for the section. Two brand-blue blooms over a vertical
   wash that returns to near-white top and bottom, so it melts into the white
   sections either side instead of butting against them with a hard edge.
   Everything stays light, so the dark heading and body copy keep their
   contrast; only the cards change, going white so they still read as cards
   against a tinted field rather than dissolving into it. */
.ed-services-bg {
  background:
    radial-gradient(900px 420px at 14% 2%, rgba(6, 85, 237, 0.14), rgba(6, 85, 237, 0) 60%),
    radial-gradient(760px 380px at 92% 22%, rgba(5, 20, 46, 0.09), rgba(5, 20, 46, 0) 62%),
    linear-gradient(180deg, #f8faff 0%, #e9f0ff 52%, #f8faff 100%);
}
.ed-services-bg .ed-scard {
  background: #fff;
  border: 1px solid rgba(6, 85, 237, 0.12);
}
.ed-services-bg .ed-scard-tag {
  background: rgba(6, 85, 237, 0.08);
}
.ed-services-bg .ed-scard:hover {
  border-color: rgba(6, 85, 237, 0.4);
  box-shadow: 0 22px 46px rgba(5, 20, 46, 0.12);
}

.ed-scard {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.ed-scard:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(3, 3, 3, 0.1);
}
.ed-scard-blue { background: rgba(6, 85, 237, 0.1); }
.ed-scard-soft { background: #f1f3f7; }
.ed-scard-navy { background: rgba(5, 20, 46, 0.07); }

.ed-scard-top { flex: 1 1 auto; }
.ed-scard-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.ed-scard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Four cards across leaves ~213px inside a card; two pills plus the dot have
   to live on one line, so the chrome is kept tight and labels stay short. */
.ed-scard-tag {
  padding: 5px 11px;
  border-radius: 12px;
  background: #fff;
  color: var(--ed-blue-dark);
  font-family: var(--tp-ff-heading);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.5;
  white-space: nowrap;
}
/* Solid on the lead card, ringed on the rest. */
.ed-scard-dot {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-left: auto;
  border-radius: 50%;
  border: 2px solid rgba(6, 85, 237, 0.45);
}
.ed-scard-dot.is-filled {
  background: var(--tp-theme-primary);
  border-color: var(--tp-theme-primary);
  box-shadow: 0 0 0 4px rgba(6, 85, 237, 0.18);
}
.ed-scard-title {
  font-family: var(--tp-ff-dm);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.18;
  margin: 0 0 14px;
  color: var(--ed-blue-dark);
}
.ed-scard-title a { color: inherit; }
.ed-scard-title a:hover { color: var(--tp-theme-primary); }
.ed-scard-text {
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
  color: #3b3f47;
  margin: 0 0 22px;
}
.ed-scard-media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  /* Fixed ratio so every card's photo lines up across the row. */
  aspect-ratio: 4 / 3;
}
.ed-scard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ed-scard-btn {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 12px;
  background: #fff;
  color: var(--ed-blue-dark);
  font-family: var(--tp-ff-heading);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  transition: background-color 0.22s ease, color 0.22s ease;
}
.ed-scard-btn:hover {
  background: var(--tp-theme-primary);
  color: #fff;
}
@media (max-width: 1199.98px) {
  .ed-scard-title { font-size: 23px; }
}

/* ------------------------------------------------------- Testimonial cards
   Equal-height cards, three across. Avatars fall back to initials because the
   source testimonials have no photographs - a generic stock face would imply
   we have one. */
.ed-tcard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 26px;
  border: 1px solid rgba(3, 3, 3, 0.09);
  border-radius: 20px;
  background: #fff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.ed-tcard:hover {
  border-color: rgba(6, 85, 237, 0.35);
  box-shadow: 0 18px 40px rgba(3, 3, 3, 0.08);
  transform: translateY(-4px);
}
/* Oversized closing quote, clipped by the card like the reference. */
.ed-tcard-quote {
  position: absolute;
  top: -18px;
  right: 18px;
  font-family: var(--tp-ff-heading);
  font-size: 110px;
  line-height: 1;
  color: rgba(3, 3, 3, 0.06);
  pointer-events: none;
}
.ed-tcard-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(3, 3, 3, 0.08);
}
.ed-tcard-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.ed-tcard-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tp-theme-primary);
  color: #fff;
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.ed-tcard-name {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}
  /* Was --ed-grey (#828690) = 3.64:1 on white, under AA at this size.
     #616874 is 5.6:1 and is the muted grey the rest of the page uses. */
.ed-tcard-role {
  font-size: 14px;
  color: #616874;
}
.ed-tcard-quote-text {
  font-size: 16px;
  line-height: 1.62;
  color: #3b3f47;
  margin: 0 0 18px;
  flex: 1 1 auto;
}
.ed-tcard-stars {
  display: inline-flex;
  gap: 4px;
  color: var(--tp-theme-primary);
}
.ed-tcard-tag {
  align-self: flex-start;
  margin-top: 14px;
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(6, 85, 237, 0.08);
  color: var(--tp-theme-primary);
  font-family: var(--tp-ff-heading);
  font-weight: 500;
  font-size: 13px;
}

/* --------------------------------------------------- Brand mark, hero panel
   Replaces the template's geometric glyph with the eDigiTech globe. The
   entrance is a keyframe so it plays on first paint without waiting for the
   GSAP bundle; LogoMark.tsx floats the outer span once GSAP is up, and the two
   sit on separate elements so their transforms never collide. */
.ed-logo-mark {
  position: relative;
  line-height: 0;
}
.ed-logo-mark img {
  width: 100px;
  height: auto;
  display: block;
}
.ed-logo-mark-in {
  display: block;
  animation: ed-logo-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ed-logo-in {
  from {
    opacity: 0;
    transform: scale(0.82) rotate(-10deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* A soft bloom so the mark sits in the dark panel instead of floating on it. */
.ed-logo-mark::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 85, 237, 0.4), rgba(6, 85, 237, 0) 70%);
  animation: ed-logo-glow 3.4s ease-in-out infinite;
}
@keyframes ed-logo-glow {
  0%, 100% { opacity: 0.45; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .ed-logo-mark-in,
  .ed-logo-mark::before {
    animation: none;
  }
  .ed-logo-mark-in {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1199.98px) {
  .ed-logo-mark img { width: 76px; }
}

/* ------------------------------------------------------------ Logo marquee
   Five logos per view, driven by GSAP (BrandsMarquee.tsx). Cells take a fixed
   share of the viewport, which is what pins the count per view and gives the
   tween a predictable set width to slide by.

   The template capped logos at 48px, which left them small and lost in the
   row; 72px is roughly a third taller in the cell. Capping width as well as
   height keeps the wide wordmarks (naukrigulf is 5.1:1) from dwarfing the
   square marks beside them. */
.ed-brand-marquee {
  overflow: hidden;
  width: 100%;
}
/* Not max-content: as a plain flex container the track stays the viewport's
   width, so the cells' percentage basis resolves against it and "a fifth"
   means a fifth of what you can see. The cells overflow it; the marquee clips. */
.ed-brand-track {
  display: flex;
  align-items: center;
  will-change: transform;
}
.ed-brand-cell {
  flex: 0 0 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
}
.ed-brand-cell img {
  max-height: 72px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Fallback if the GSAP bundle never arrives, so the row still moves rather
   than stranding on the first five logos. One set == 100%/copies of the track. */
@keyframes ed-brand-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% / var(--ed-brand-sets, 2))); }
}
.ed-brand-track-css {
  animation: ed-brand-scroll 28s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ed-brand-track-css {
    animation: none;
  }
}
@media (max-width: 1199.98px) {
  .ed-brand-cell { flex-basis: 25%; }
}
@media (max-width: 991.98px) {
  .ed-brand-cell { flex-basis: 33.333%; padding: 0 20px; }
  .ed-brand-cell img { max-height: 60px; }
}
@media (max-width: 575.98px) {
  .ed-brand-cell { flex-basis: 50%; padding: 0 16px; }
  .ed-brand-cell img { max-height: 52px; }
}

/* about-modern, accordion layout. The tab strip only holds two or three titles
   before it wraps, so this is the default. Styled to the section's own voice -
   numbered, underlined rules, brand blue when open - rather than the boxed grey
   of the FAQ accordion, whose styles are all scoped under .tp-faq-wrap anyway. */
.ed-about-accordion .accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(3, 3, 3, 0.12);
}
.ed-about-accordion .accordion-item:first-child {
  border-top: 1px solid rgba(3, 3, 3, 0.12);
}
.ed-about-acc-btn,
.ed-about-acc-btn:not(.collapsed) {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: 0;
  box-shadow: none;
  text-align: left;
  font-family: var(--tp-ff-dm);
  font-weight: 700;
  font-size: 18px;
  color: var(--tp-common-black);
}
/* Bootstrap's own caret would sit beside ours. */
.ed-about-acc-btn::after {
  display: none;
}
.ed-about-acc-btn:not(.collapsed) {
  color: var(--tp-theme-primary);
}
.ed-about-acc-num {
  opacity: 0.55;
}
.ed-about-acc-icon {
  margin-left: auto;
  display: inline-flex;
  transition: transform 0.25s ease;
}
.ed-about-acc-btn:not(.collapsed) .ed-about-acc-icon {
  transform: rotate(180deg);
}
.ed-about-acc-body {
  padding: 0 0 6px;
}

/* about-modern: the template ships two tabs, and its 42px margin sits on the
   last one too. A third tab then needs 477px in a 441px column and wraps to a
   second line. Move the spacing to a gap so only the gaps between items count. */
.tp-about-cst-tab ul {
  gap: 0 36px;
}
.tp-about-cst-tab ul li {
  margin-right: 0;
}

/* The template's own photos are 1.165 (left) and 0.940 (right); ours are 3:2,
   which leaves the right column ~180px short of the tab column and tips the
   row off balance. Hold the template's proportions and crop to fill. */
.tp-about-cst-thumb img {
  aspect-ratio: 289 / 248;
  object-fit: cover;
  width: 100%;
}
.tp-about-cst-list-thumb img {
  aspect-ratio: 426 / 453;
  object-fit: cover;
  width: 100%;
}

/* about-modern: the template paints these panels green; use the brand blue. */
.ed-bg-brand {
  background-color: var(--tp-theme-primary);
  color: #fff;
}
.ed-bg-brand .btn-text,
.ed-bg-brand svg,
.ed-bg-brand h4,
.ed-bg-brand li {
  color: #fff;
}
/* The card's own button. The template's --tp-common-black-1 is a green-tinted
   dark that fights the blue, so use the brand navy; the label is #f3f1f2 on it
   (16.5:1). On hover the template flips to a white panel, so the arrow has to
   come back off white too - .ed-bg-brand svg above would otherwise keep it. */
.ed-bg-brand .tp-about-cst-list-btn {
  background-color: var(--ed-blue-dark);
}
.ed-bg-brand .tp-about-cst-list-btn:hover,
.ed-bg-brand .tp-about-cst-list-btn:hover svg {
  color: var(--ed-blue-dark);
}
.tp-about-cst-list.ed-bg-brand .tp-about-cst-list-inner ul li {
  color: rgba(255, 255, 255, 0.92);
}

/* ---- Price + CTA ----------------------------------------------------------
   The mid-page conversion block. Deliberately the only card on the page with
   a brand-blue fill behind the figure: a prospect scanning for "what does
   this cost" should find it without reading, and nothing else competes for
   that glance.

   Split rather than centred — price and promise on the left, the checklist
   and buttons on the right — so the eye lands on the figure, then the
   reassurances, then the button, in that order. */
.ed-pricecta {
  padding: 24px 0 110px;
  background: #fff;
}
.ed-pricecta-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 56px 56px 52px;
  border-radius: 20px;
  background:
    radial-gradient(760px 420px at 100% 0%, rgba(6, 85, 237, 0.1), rgba(6, 85, 237, 0) 62%),
    var(--ed-blue-50);
  border: 1px solid var(--ed-blue-200);
}
.ed-pricecta-eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--tp-theme-primary);
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Figure and its qualifier on one line — the pattern the bento already uses,
   so the two price mentions on the page read as the same object. */
.ed-pricecta-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 14px;
}
.ed-pricecta-price span {
  color: var(--ed-blue-dark);
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: clamp(46px, 5.6vw, 76px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.ed-pricecta-price small {
  max-width: 16ch;
  color: #616874;
  font-family: var(--tp-ff-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35;
}
.ed-pricecta-title {
  margin: 0 0 12px;
  color: var(--ed-blue-dark);
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.022em;
}
.ed-pricecta-text {
  margin: 0;
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ed-body);
}
.ed-pricecta-list {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.ed-pricecta-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ed-blue-200);
  font-family: var(--tp-ff-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ed-blue-dark);
}
.ed-pricecta-list li:last-child { border-bottom: 0; }
.ed-pricecta-tick {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--tp-theme-primary);
  color: #fff;
  line-height: 0;
}
.ed-pricecta-actions { margin: 0; }
@media (max-width: 991.98px) {
  .ed-pricecta { padding: 8px 0 80px; }
  .ed-pricecta-card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 38px 28px 34px;
    border-radius: 18px;
  }
}

/* ---- Button shape -------------------------------------------------------
   The template ships `tp-round-26`, a 26px pill. Pills are the clearest
   remaining signal of the era this theme came from: the reference set runs
   its buttons at 4px (Stripe) to 8px (Linear). 8px keeps them friendly
   without the lozenge.

   Scoped to the pages this redesign covers via the shared button classes
   rather than redefining the template's utility, so a pill is still
   available anywhere it is genuinely wanted. */
/* Back to pills. The 8px came from Linear/Stripe; the reference the client
   has since chosen runs everything at 999px — 30 of its elements are pills,
   including both button tiers — and pills are the single most recognisable
   thing about that page's shape language. */
.tp-btn-lg.tp-round-26,
.tp-btn-sm.tp-round-26,
a.tp-round-26,
button.tp-round-26,
.ed-quote-submit,
.ed-carousel-btn {
  border-radius: 999px;
}
/* Reference button type: 11-13px, weight 700, uppercase, ~0.06em tracking.
   Ours was 15px/500 sentence case, which read soft beside that shape. */
.tp-btn-lg.tp-round-26,
.tp-btn-sm.tp-round-26 {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Chips and badges keep their pill — on a 26px-tall element a 8px radius
   reads as a mistake rather than a decision. */
.ed-shero-eyebrow,
.ed-tcard-tag,
.tp-brand-title {
  border-radius: 999px;
}

/* ---- Surfaces -----------------------------------------------------------
   Hairlines at a neutral ink alpha rather than a blue tint. A blue-tinted
   border on a blue-tinted panel muddies both; a near-black hairline at 7%
   reads as an edge and lets the blue stay a brand colour rather than a
   background wash. */
.ed-bento-cell,
.ed-offer-card,
.ed-step,
.ed-pricecta-card {
  border-color: rgba(9, 14, 28, 0.08);
}
/* Shadows: shorter and tighter, so cards sit on the page instead of
   hovering over it. */
.ed-bento-cell:hover,
.ed-offer-card:hover,
.ed-step:hover {
  box-shadow: 0 1px 2px rgba(9, 14, 28, 0.04), 0 12px 28px -12px rgba(9, 14, 28, 0.16);
}

/* ==================================================== Sculpt-style surfaces
   Adopted from wearesculpt.com, the reference the client chose: a soft
   gradient field behind the hero, key phrases boxed inline in the headline,
   and deep-navy sections with rounded top corners punctuating the light
   ones. Their palette is orange; ours stays the logo blue. */

/* ---- Hero mesh ---- */
.ed-shero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.ed-shero-mesh-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* The blobs are sized in UV space, so a tall narrow hero puts far more of
   each one on screen: at 375px the field floods to rgb(53,121,244) and the
   intro drops to 3.2:1. Compositing the canvas at 55% over the section's
   white lifts the same worst-case pixel to rgb(144,181,249) — 6.3:1 — and
   reads as a softer gradient, which suits the narrower measure anyway. */
@media (max-width: 991.98px) {
  .ed-shero-mesh { opacity: 0.55; }
}
/* A photo, if one is set, sits over the mesh and is held well back — the
   mesh is doing the work now. */
.ed-shero-banner .ed-shero-bg { z-index: 1; opacity: 0.16; }
.ed-shero-banner .ed-shero-bg::after { background: none; }
.ed-shero-banner::after { z-index: 2; }
/* The container used to be positioned so it stacked above the WebGL mesh.
   The mesh is gone, and the position was actively harmful: the hero photo
   is absolutely positioned to bleed off the right of the viewport, and an
   absolute child resolves against the nearest positioned ancestor — so it
   stopped at the container's edge (1335px) instead of the section's
   (1440px). The stacking context moves to the copy well, which is the only
   thing that actually needs to sit above the photo's gradient. */
.ed-shero > .container { position: static; }
.ed-shero-well {
  position: relative;
  z-index: 3;
}

/* ---- Inline highlight in the headline ----
   The reference's signature move: the phrase that matters gets a solid box
   rather than a colour change. Measured off it — 0 8px padding, 5px radius.
   Navy rather than brand blue, because white on #05142E is 16.2:1 where
   white on #0655ED is 5.95:1, and this is 80px display type. */
.ed-shero-mark {
  display: inline;
  /* em-based so the inset tracks the clamped font size instead of going
     fat at 38px and thin at 76px. */
  padding: 0 0.14em;
  margin: 0 -0.03em;
  border-radius: 8px;
  background: var(--ed-blue-dark);
  color: #fff;
  /* The emphasis comes from <strong>, so without this it renders at the UA
     default of 900 and the boxed words are heavier than the rest of the line. */
  font-weight: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---- Navy section ----
   The contrast moment. Rounded top corners, as the reference does, so the
   dark block reads as a panel laid over the page rather than a full-bleed
   stripe. */
.ed-navy {
  position: relative;
  background: var(--ed-navy, #0b1b33);
  border-radius: 28px 28px 0 0;
  color: #fff;
}
.ed-navy + .ed-navy { border-radius: 0; }
:root { --ed-navy: #0b1b33; }
@media (max-width: 575.98px) {
  .ed-navy { border-radius: 20px 20px 0 0; }
}

/* ---- Carousel ------------------------------------------------------------
   A snapping rail with the heading and controls sharing one line. The rail
   scrolls natively, so it works before — and without — hydration; the arrows
   are the enhancement. See Carousel.tsx. */
.ed-carousel-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  margin-bottom: 44px;
}
.ed-carousel-nav {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  padding-bottom: 4px;
}
.ed-carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ed-blue-200);
  background: #fff;
  color: var(--ed-blue-dark);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.ed-carousel-btn:hover:not(:disabled) {
  background: var(--tp-theme-primary);
  border-color: var(--tp-theme-primary);
  color: #fff;
}
.ed-carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.ed-carousel-btn:focus-visible {
  outline: 2px solid var(--tp-theme-primary);
  outline-offset: 2px;
}
.ed-carousel-rail {
  display: flex;
  align-items: stretch;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Room for the cards' focus ring and hover lift. */
  padding: 4px 4px 8px;
  margin: -4px -4px -8px;
}
.ed-carousel-rail::-webkit-scrollbar { display: none; }
.ed-carousel-rail:focus-visible {
  outline: 2px solid var(--tp-theme-primary);
  outline-offset: 4px;
  border-radius: 4px;
}
.ed-carousel-rail > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* ---- Testimonials -------------------------------------------------------- */
.ed-tsection { padding: 118px 0 110px; }
.ed-tsection-head { max-width: 46ch; }
.ed-tsection-head .ed-sec-intro { margin-top: 14px; }
.ed-tcarousel .ed-tcard {
  display: flex;
  flex-direction: column;
  width: 400px;
  /* Equal height across the rail regardless of quote length. */
  align-self: stretch;
}
/* The long quote should not stretch its card past the others; the footer is
   pinned to the bottom instead. */
.ed-tcard-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 22px;
}
@media (max-width: 991.98px) {
  .ed-tsection { padding: 82px 0 76px; }
  .ed-carousel-bar { margin-bottom: 32px; }
  /* The heading takes the row and the controls drop beneath it, right
     aligned — at 375px they were squeezing the title to a few words a line. */
  .ed-carousel-bar > :first-child { flex: 1 1 100%; }
  .ed-carousel-nav { margin-left: auto; padding-bottom: 0; }
  .ed-carousel-rail { gap: 16px; }
  .ed-tcarousel .ed-tcard { width: min(84vw, 360px); }
}

/* A one-line job title and a two-line one made the quotes start at different
   heights across the rail. Reserving two lines' worth settles every card on
   the same baseline without clipping the longer roles. */
.ed-tcarousel .ed-tcard-head {
  align-items: flex-start;
  /* Two lines of role plus the avatar. Measured: a one-line role gives 67px
     and a two-line one 94px, so reserving 94 settles every quote on the same
     baseline. The clamp below stops a longer role pushing past it. */
  min-height: 94px;
}
.ed-tcarousel .ed-tcard-role {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Service categories (homepage) --------------------------------------
   Rebuilt around the service lists, which are the real content here. The
   old card reserved its lower half for a photo the content never set, so it
   rendered as a grey box with a title floating in space. */
.ed-services { padding: 130px 0 120px; }
.ed-services-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
  margin-bottom: 56px;
}
.ed-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ed-scard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 30px 28px 26px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(9, 14, 28, 0.08);
  transition: transform 0.3s cubic-bezier(.22,.61,.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
/* The wash, not a background swap — it fades in behind the content so the
   type never jumps colour mid-transition. */
.ed-scard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, var(--ed-blue-50) 0%, var(--ed-blue-100) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.ed-scard:hover {
  transform: translateY(-6px);
  border-color: var(--ed-blue-200);
  box-shadow: 0 1px 2px rgba(9, 14, 28, 0.04), 0 22px 44px -18px rgba(6, 85, 237, 0.26);
}
.ed-scard:hover::before { opacity: 1; }
.ed-scard > * { position: relative; z-index: 1; }

.ed-scard-index {
  display: block;
  margin-bottom: 14px;
  color: var(--tp-theme-primary);
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
}
.ed-scard-title {
  margin: 0 0 18px;
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ed-blue-dark);
}
.ed-scard-title a { color: inherit; }
.ed-scard:hover .ed-scard-title a { color: var(--tp-theme-primary); }
.ed-scard-text {
  margin: -8px 0 18px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ed-body);
}
.ed-scard-list {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ed-blue-100);
}
.ed-scard-list li {
  border-bottom: 1px solid var(--ed-blue-100);
}
.ed-scard-list a,
.ed-scard-list span {
  display: block;
  padding: 9px 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ed-body);
  transition: color 0.2s ease, transform 0.2s ease;
}
.ed-scard-list a:hover {
  color: var(--tp-theme-primary);
  transform: translateX(3px);
}
/* Pinned to the foot so every card's link sits on one line. */
.ed-scard-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  color: var(--ed-blue-dark);
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 14px;
}
.ed-scard-more svg { transition: transform 0.25s cubic-bezier(.22,.61,.36,1); }
.ed-scard:hover .ed-scard-more { color: var(--tp-theme-primary); }
.ed-scard:hover .ed-scard-more svg { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
  .ed-scard:hover { transform: none; }
  .ed-scard:hover .ed-scard-more svg { transform: none; }
  .ed-scard-list a:hover { transform: none; }
}
@media (max-width: 1199.98px) {
  .ed-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .ed-services { padding: 84px 0 76px; }
  .ed-services-head { margin-bottom: 40px; }
  .ed-services-grid { grid-template-columns: 1fr; }
}

/* ---- Expanding cards -----------------------------------------------------
   After the reference the client chose: a row where one card is open with
   its artwork and copy, and the rest collapse to a ghost number and a short
   label. The open card is both wider and taller, so it breaks the row's top
   and bottom edges and reads as lifted off the page.

   Everything here is keyed off `.is-ready`, which the component adds once it
   mounts. Before that — and if the script never runs — the cards are equal
   width with all their copy showing, so nothing depends on an interaction
   that has not booted. */
.ed-exp {
  position: relative;
  padding: 118px 0 120px;
  background: var(--ed-blue-50);
}
/* The faint plotting grid behind the row, as the reference has. */
.ed-exp::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(6, 85, 237, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 85, 237, 0.045) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(900px 500px at 50% 42%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(900px 500px at 50% 42%, #000 20%, transparent 78%);
  pointer-events: none;
}
.ed-exp > .container { position: relative; z-index: 1; }
.ed-exp-head { max-width: 760px; margin-bottom: 56px; }

.ed-exp-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 430px;
}
.ed-exp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 330px;
  padding: 26px 24px 24px;
  border-radius: 18px;
  background: var(--ed-blue-100);
  border: 1px solid rgba(9, 14, 28, 0.05);
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.45s ease, min-height 0.45s cubic-bezier(.22,.61,.36,1),
              box-shadow 0.45s ease, border-color 0.45s ease;
}
.ed-exp-card:focus-visible {
  outline: 2px solid var(--tp-theme-primary);
  outline-offset: 3px;
}
/* Out of flow: when the open card fades it out, a static number would still
   reserve its line and push the artwork away from the card's top edge. */
.ed-exp-num {
  position: absolute;
  top: 26px;
  left: 24px;
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(9, 14, 28, 0.13);
  transition: opacity 0.35s ease;
}
.ed-exp-media {
  position: relative;
  /* Negative insets pull the artwork through the card's padding so it sits
     flush to the top and both edges, as the reference does. */
  margin: -26px -24px 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.45s cubic-bezier(.22,.61,.36,1), opacity 0.35s ease;
}
.ed-exp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-exp-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(135deg, var(--ed-blue-200), var(--ed-blue-100));
  color: var(--ed-blue-dark);
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 46px;
  letter-spacing: -0.03em;
}
.ed-exp-body { margin-top: auto; }
.ed-exp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(9, 14, 28, 0.08);
  color: var(--tp-theme-primary);
}
.ed-exp-title {
  margin: 0;
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ed-blue-dark);
  transition: font-size 0.35s ease;
}
.ed-exp-text {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ed-body);
}

/* ---- Collapsed / open, once the component is live ---- */
.ed-exp-row.is-ready .ed-exp-card .ed-exp-text {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.45s ease, margin-top 0.45s ease;
}
.ed-exp-row.is-ready .ed-exp-card.is-active {
  background: #fff;
  min-height: 430px;
  border-color: rgba(9, 14, 28, 0.08);
  box-shadow: 0 2px 6px rgba(9, 14, 28, 0.04), 0 30px 60px -26px rgba(6, 85, 237, 0.3);
}
.ed-exp-row.is-ready .ed-exp-card.is-active .ed-exp-num { opacity: 0; }
.ed-exp-row.is-ready .ed-exp-card.is-active .ed-exp-media { height: 170px; opacity: 1; }
.ed-exp-row.is-ready .ed-exp-card.is-active .ed-exp-title { font-size: 25px; }
.ed-exp-row.is-ready .ed-exp-card.is-active .ed-exp-text {
  opacity: 1;
  max-height: 180px;
  margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .ed-exp-card,
  .ed-exp-media,
  .ed-exp-title,
  .ed-exp-row.is-ready .ed-exp-card .ed-exp-text { transition: none; }
}
/* Below the breakpoint the row stacks and every card is simply open — a
   four-across expander has no room to be either wide or narrow here. */
@media (max-width: 991.98px) {
  .ed-exp { padding: 82px 0 80px; }
  .ed-exp-head { margin-bottom: 38px; }
  .ed-exp-row,
  .ed-exp-row.is-ready { display: grid; grid-template-columns: repeat(2, 1fr); min-height: 0; gap: 16px; }
  .ed-exp-row.is-ready .ed-exp-card,
  .ed-exp-row.is-ready .ed-exp-card.is-active {
    flex: none !important;
    min-height: 0;
    background: #fff;
    box-shadow: none;
  }
  .ed-exp-row.is-ready .ed-exp-card .ed-exp-media { height: 150px; opacity: 1; }
  .ed-exp-row.is-ready .ed-exp-card .ed-exp-title { font-size: 20px; }
  .ed-exp-row.is-ready .ed-exp-card .ed-exp-text { opacity: 1; max-height: none; margin-top: 12px; }
  .ed-exp-num { font-size: 34px; }
}
@media (max-width: 575.98px) {
  .ed-exp-row, .ed-exp-row.is-ready { grid-template-columns: 1fr; }
}

/* ==================================================== eezyinn.de/seo language
   The second reference the client chose, translated to our white theme.
   Measured off it: h1 uppercase at weight 650, line-height 0.98, tracking
   -0.05em; both button tiers pills at 999px with 11-13px/700 uppercase
   labels; pill tag groups; a dotted horizontal stepper. Their field is near
   black with a lime accent — ours stays white with the logo blue. */

/* ---- Display headline ----
   Uppercase is the reference's defining type move. It costs width — the same
   string sets about 18% wider in caps — so the clamp ceiling comes down from
   76px to 60px to keep the headline at three lines beside the form.
   Leading stays at 1.36 rather than the reference's 0.98: our headline keeps
   the inline highlight box, whose background covers the font's full 1.26em
   content area, and anything under ~1.3 makes consecutive boxes collide. */
.ed-shero-title {
  font-size: clamp(32px, 4.4vw, 60px);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
/* Caps have no descenders, so the box can hug the glyphs more tightly than
   it does in sentence case without clipping anything. */
.ed-shero-mark {
  padding: 0 0.1em;
  margin: 0 -0.02em;
}

/* ---- Pill tag group ----
   The reference's rounded container holding a loose row of outlined pills
   ("Technisches SEO", "Content", "Local SEO"…). Ours takes the hero badges,
   which were bare uppercase text on a row. */
.ed-shero-badges {
  gap: 9px 10px;
  letter-spacing: 0.04em;
}
.ed-shero-badges li {
  padding: 7px 15px;
  border: 1px solid rgba(9, 14, 28, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #233249;
  font-size: 11.5px;
  line-height: 1.3;
  /* The mesh runs behind these; a backdrop blur keeps them legible over the
     saturated part of it without a flat white plate. */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---- Dotted stepper connector ----
   The reference draws its process as a dotted rule with a node at each
   stage. Our process is already a horizontal rail of cards, so this is the
   connector rather than a new layout: each card's rule becomes dotted and
   runs 24px past the card's right edge — exactly the track gap — so the
   dashes carry across the gutter and read as one continuous line.
   The last card's overhang is harmless: the rail clips it. */
.ed-step-rule {
  height: 2px;
  margin-right: -60px;
  border-radius: 0;
  background: none;
  background-image: radial-gradient(circle, var(--ed-blue-300) 1.4px, transparent 1.5px);
  background-size: 9px 2px;
  background-repeat: repeat-x;
  background-position: left center;
}
.ed-step:hover .ed-step-rule {
  background: none;
  background-image: radial-gradient(circle, var(--tp-theme-primary) 1.6px, transparent 1.7px);
  background-size: 9px 2px;
  background-repeat: repeat-x;
}

/* ---- Quote card on the banner ----
   The submit is the hero's primary action and sat in sentence case at 15/600
   while the two CTAs beside it had gone to uppercase 12.5/700 — two different
   button languages inside one hero. It follows them now.
   The card corner goes to 22px, one of the reference's two dominant radii,
   so a 451px panel doesn't read as a 12px dialog box. */
.ed-quote-submit {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ed-quote-card {
  border-radius: 22px;
}

/* ---- Homepage hero CTA pair ----
   That hero's text column is 456px (a template width, .tp-hero-customer-text).
   At sentence case the two CTAs totalled 439px and fit side by side with 3px
   to spare; uppercase at 0.06em tracking pushes them to 501px, so they wrap.
   Shrinking the type far enough to fit would take it to ~10px, and the 42px
   switch-animation arrow on each button is not negotiable here — so the pair
   stacks on purpose instead, both filling the column, rather than wrapping
   into two ragged widths. Only this hero is scoped; the service hero's
   641px column still sets them inline. */
.tp-hero-customer-text .ed-btn-group > * {
  flex: 1 1 100%;
}
.tp-hero-customer-text .ed-btn-group > * > .d-flex {
  justify-content: center;
}

/* ==================================================== eezyinn structure pass
   The first pass took the reference's type and shapes but left the old
   layout underneath, which is why it still didn't read like the reference.
   These are the structural moves. */

/* ---- Hero: buy the headline its scale from the form column ----
   The reference's headline is the loudest thing on its page and runs the
   full container. Ours can't — the form has to stay above the fold — so it
   takes width from the form instead: at lg the well goes 58.33% → 63% and
   the form 41.67% → 37%, which is 69px of extra measure and lets the clamp
   ceiling go from 60px to 72px at the same three lines.
   Below lg they stack, so this only applies where the split exists. */
@media (min-width: 992px) {
  .ed-shero-well { flex: 0 0 auto; width: 63%; }
  .ed-shero-form { flex: 0 0 auto; width: 37%; }
}
.ed-shero-title {
  font-size: clamp(38px, 5.6vw, 72px);
  line-height: 1.3;
  letter-spacing: -0.04em;
}
/* The reference's eyebrow is plain letterspaced caps with a slash, not a
   tinted pill with a dot — the pill competed with the badge row directly
   below it, which is also pills. */
.ed-shero-eyebrow {
  padding: 0;
  margin-bottom: 20px;
  background: none;
  /* #5a6478 would have been the quiet grey the section eyebrows use, but
     this one sits on the mesh, which reaches rgb(116,165,249) at its
     saturated edge — 2.41:1 at 12px, well under AA. #233249 holds 5.23:1
     against that same worst-case pixel and still reads as quiet at 12px
     with 0.14em tracking. */
  color: #233249;
  font-size: 12px;
  letter-spacing: 0.14em;
}
.ed-shero-eyebrow::before {
  content: none;
}
.ed-shero-intro {
  max-width: 52ch;
}

/* ---- Section headers ----
   The reference's section header is the same shape every time: a tiny grey
   letterspaced eyebrow, then a big uppercase headline of one or two tight
   lines, with any supporting sentence set small and pushed to the right of
   the same row. Ours were sentence-case headlines in a centred or left
   stack, which is what made the page read as a different site below the
   hero. `.ed-sec-eyebrow` / `.ed-sec-title` are shared by seven blocks, so
   this lands everywhere at once. */
.ed-sec-eyebrow {
  margin-bottom: 18px;
  /* Grey, not brand blue. The reference's eyebrow is deliberately quiet —
     it labels the section, the headline carries it. A blue eyebrow above a
     navy headline put two competing accents in the same 60px. */
  color: #6b7280;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.ed-sec-title {
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
/* Sentence-case headlines hid their emphasis in a colour change. In caps at
   54px the accent does not need to also be blue, but keeping it ties the
   section headers to the hero's boxed phrase. */
.ed-sec-intro {
  max-width: 42ch;
  font-size: 16.5px;
}

/* The split: headline left, supporting line right, baselines aligned.
   .ed-steps-head and .ed-exp-head already flex; .ed-sec-head is the name
   for blocks that want it without the process section's spacing. */
.ed-sec-head,
.ed-steps-head,
.ed-exp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 56px;
}
.ed-sec-head > :first-child,
.ed-steps-head > :first-child,
.ed-exp-head > :first-child {
  flex: 1 1 520px;
}
.ed-sec-head > :last-child:not(:first-child),
.ed-steps-head > :last-child:not(:first-child),
.ed-exp-head > :last-child:not(:first-child) {
  flex: 0 1 380px;
  padding-bottom: 6px;
}

/* ---- Stepper -------------------------------------------------------------
   The reference's signature element: a hairline through a row of nodes, each
   stage labelled beneath its own node, the completed run drawn in the accent
   colour and the rest left grey. Replaces the pinned card rail.
   The dotted-connector rules added in the first pass are dead now that
   .ed-step is gone from this block; they still apply to any other card that
   carries .ed-step-rule. */
.ed-stepper { margin-top: 64px; }
.ed-stepper-list {
  display: grid;
  grid-template-columns: repeat(var(--ed-stepper-n, 4), minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ed-stepper-item {
  position: relative;
  padding: 0 26px 0 0;
}
/* The node row. Each item draws its own half-segment either side of its dot,
   so consecutive items' segments meet exactly at the cell boundary. */
.ed-stepper-track {
  display: flex;
  align-items: center;
  height: 12px;
  margin-bottom: 24px;
}
.ed-stepper-line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--ed-blue-200);
}
.ed-stepper-item:first-child .ed-stepper-in,
.ed-stepper-item:last-child .ed-stepper-out {
  background: none;
}
.ed-stepper-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tp-theme-primary);
  /* A ring in the section's own tint, so the dot punches a hole in the line
     rather than sitting on top of it. */
  box-shadow: 0 0 0 4px var(--ed-blue-50);
}
.ed-steps-light .ed-stepper-dot { box-shadow: 0 0 0 4px #fff; }
/* The dot sits at the start of the first cell and the end of the last, so
   the line spans the full width rather than floating inside it. */
.ed-stepper-item:first-child .ed-stepper-track { justify-content: flex-start; }
.ed-stepper-item:first-child .ed-stepper-in { flex: 0 0 0; }
.ed-stepper-num {
  display: block;
  margin-bottom: 10px;
  color: var(--tp-theme-primary);
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
}
.ed-stepper-title {
  margin: 0 0 10px;
  color: var(--ed-blue-dark);
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.ed-stepper-text {
  margin: 0;
  max-width: 28ch;
  font-size: 15.5px;
  line-height: 1.58;
  color: var(--ed-body);
}
/* Two across on tablet, one on phone — four 1fr cells at 768px leave about
   160px per stage, which is narrower than the longest stage name. */
@media (max-width: 991.98px) {
  .ed-stepper-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  /* With two per row the connector would run off the end of each row, so
     every even cell closes its line and every odd cell opens one. */
  .ed-stepper-item:nth-child(2n) .ed-stepper-out { background: none; }
  .ed-stepper-item:nth-child(2n + 1) .ed-stepper-in { flex: 0 0 0; }
}
@media (max-width: 575.98px) {
  .ed-stepper-list { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .ed-stepper-item { padding-right: 0; }
  .ed-stepper-line { background: none; }
  .ed-stepper-text { max-width: none; }
}

/* ---- Left-edge scroll rail ----
   Fixed to the viewport, vertically centred, outside the 1230px container.
   Hidden below 1400px: between the container edge and the window edge there
   are only 85px at 1400, and the rail needs clear space or it reads as a
   stray line beside the content. */
.ed-rail-progress {
  display: none;
}
@media (min-width: 1400px) {
  .ed-rail-progress {
    position: fixed;
    top: 50%;
    left: 34px;
    z-index: 4;
    display: block;
    width: 12px;
    height: 240px;
    transform: translateY(-50%);
    pointer-events: none;
  }
}
.ed-rail-ticks {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.ed-rail-ticks i {
  display: block;
  width: 5px;
  height: 1px;
  background: rgba(9, 14, 28, 0.18);
}
.ed-rail-ticks i.is-major {
  width: 11px;
  background: rgba(9, 14, 28, 0.3);
}
.ed-rail-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--tp-theme-primary);
  box-shadow: 0 0 0 3px rgba(6, 85, 237, 0.18);
  /* The listener already runs on rAF; the transition only smooths the gap
     between frames on a fast flick. */
  transition: top 0.12s linear;
}

/* ---- Fitting the uppercase headline to each head's measure ----
   At 54px caps a headline needs roughly 640px to stay inside two lines.
   Three heads don't have it, and each needs a different answer. */

/* Testimonials: the head sits in a carousel header beside the arrows, in a
   box sized for sentence case. In caps the headline ran to four lines.
   Sized in px, not ch — `ch` resolves against the container's own inherited
   16px, so the 30ch I first wrote here was ~300px and narrowed the box
   rather than widening it. */
.ed-tsection-head { max-width: none; flex: 1 1 auto; padding-right: 32px; }
.ed-tsection-head .ed-sec-title { max-width: 16ch; font-size: clamp(28px, 3vw, 42px); }
.ed-tsection-head .ed-sec-intro { max-width: 52ch; }

/* Offer columns: it already flexes, it just never set the flex bases, so the
   headline and the intro split the row evenly instead of 2:1. */
.ed-offer-head > :first-child { flex: 1 1 520px; }
.ed-offer-head > :last-child:not(:first-child) { flex: 0 1 360px; padding-bottom: 6px; }

/* FAQ: a sticky head in a 4-column well, about 350px. Nothing can widen it —
   the accordion owns the other eight columns — so this is the one head that
   takes a genuinely smaller display size rather than a wider measure. */
.ed-faq-head .ed-sec-title { font-size: clamp(26px, 2.4vw, 34px); }

/* Feature: the headline shares the row with a full-bleed photo, so it only
   ever gets about 547px. Three lines of 54px caps in that column read as a
   wall; one notch down puts it back to two. */
.ed-feature .ed-sec-title { font-size: clamp(28px, 3.2vw, 44px); }

/* ---- Dealing card deck --------------------------------------------------
   Cards laid out as a plain row; CardDeck fans them and deals them in. The
   row IS the finished state and the fallback, so none of the deck geometry
   lives here — only the 3D setup the flip needs. */
.ed-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
  margin-top: 60px;
  /* The flip reads as a flip rather than a horizontal squash only with a
     perspective on the container. 1600px is shallow enough that four cards
     side by side don't visibly diverge. */
  perspective: 1600px;
}
.ed-deck-card {
  position: relative;
  min-height: 330px;
  transform-style: preserve-3d;
  /* Each card turns about its own middle, so the fan pivots from the card
     rather than swinging from a corner. */
  transform-origin: 50% 50%;
}
.ed-deck-face {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 26px 26px;
  border-radius: 18px;
  background: var(--ed-navy, #0b1b33);
  color: #fff;
  /* Hidden backfaces are what make the two sides exclusive. Without them
     both render and the back shows through mirrored. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* The back is stacked on the front and pre-turned, so a 180° turn of the
   card swaps which face points at the viewer. */
.ed-deck-back {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 42%, rgba(6, 85, 237, 0.42), rgba(6, 85, 237, 0) 62%),
    var(--ed-navy, #0b1b33);
}
/* Until the deck is dealing, the back would sit over the front as an opaque
   panel in browsers that ignore backface-visibility. Hiding it outright
   until then keeps the no-JS row clean. */
.ed-deck:not(.is-dealing) .ed-deck-back { display: none; }
.ed-deck.is-dealing .ed-deck-card { will-change: transform; }

.ed-deck-back-num {
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 54px;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.22);
}
.ed-deck-index {
  display: block;
  margin-bottom: 14px;
  color: var(--ed-blue-300);
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
}
.ed-deck-title {
  margin: 0 0 16px;
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}
.ed-deck-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  line-height: 1.5;
  /* rgba(255,255,255,0.78) on #0b1b33 is 11.4:1 — the dimming is for
     hierarchy, not at the cost of legibility. */
  color: rgba(255, 255, 255, 0.78);
}
/* Grid, not flex. The label is a bare text node beside the tick, and in a
   flex row that becomes an anonymous flex item with an auto min-width — so
   a long item ("WordPress / PHP / Laravel CMS Development") refused to wrap
   and ran out past the card's right edge. A 1fr track can shrink. */
.ed-deck-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  overflow-wrap: anywhere;
}
.ed-deck-list li:first-child { border-top: 0; padding-top: 0; }
.ed-deck-list a { color: inherit; }
.ed-deck-list a:hover { color: #fff; }
.ed-deck-tick {
  flex: 0 0 auto;
  margin-top: 5px;
  color: var(--ed-blue-300);
}
@media (max-width: 991.98px) {
  .ed-deck { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; }
  .ed-deck-card { min-height: 0; }
}

/* ---- USP panel ----------------------------------------------------------
   Columns ruled off inside one container, after the reference's section for
   a set of short equal-weight points. Replaces the expanding-card row, whose
   open card put a photo at the top and its words at the bottom with a 200px
   void between, and whose closed cards were a big numeral and a label. */
.ed-upanel { padding: 110px 0 100px; }
.ed-upanel-head { margin-bottom: 52px; }
.ed-upanel-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 38px 44px;
  padding: 50px 48px 46px;
  border-radius: 28px;
  background: var(--ed-blue-50);
  border: 1px solid rgba(9, 14, 28, 0.07);
}
.ed-upanel-col {
  display: flex;
  flex-direction: column;
}
.ed-upanel-rule {
  display: block;
  height: 1px;
  margin-bottom: 22px;
  background: rgba(9, 14, 28, 0.14);
}
.ed-upanel-title {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin: 0 0 12px;
  color: var(--ed-blue-dark);
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.24;
  letter-spacing: -0.02em;
}
/* Filled on the first column, outlined on the rest — the reference marks the
   head of the set rather than bulleting every item identically. */
.ed-upanel-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--tp-theme-primary);
}
.ed-upanel-dot.is-filled { background: var(--tp-theme-primary); }
.ed-upanel-text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ed-body);
}
@media (max-width: 575.98px) {
  .ed-upanel { padding: 72px 0 66px; }
  .ed-upanel-box { padding: 32px 24px 28px; gap: 28px; border-radius: 20px; }
}

/* ---- Per-character heading reveal --------------------------------------
   See TextReveal.tsx. The split markup only exists once the client has
   built it, so nothing here applies to a server-rendered heading.
   Measured off the reference: rotateX(85deg) about a bottom origin,
   opacity 0, 0.03s per character. */
.ed-rv-w {
  /* Keeps a word from breaking between its own letters once each letter is
     an inline-block of its own. */
  display: inline-block;
  white-space: nowrap;
}
.ed-rv .ed-rv-c {
  display: inline-block;
  opacity: 0;
  transform: rotateX(85deg);
  /* Hinge from the baseline edge, not the middle — this is what makes the
     letters stand up rather than spin in place. */
  transform-origin: 50% 100%;
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.7, 0.3, 1),
    transform 0.7s cubic-bezier(0.22, 0.7, 0.3, 1);
  transition-delay: var(--at, 0s);
  /* An inline-block letter sits on the baseline; without this the descenders
     of split text drift a pixel against unsplit text beside it. */
  vertical-align: baseline;
}
.ed-rv.is-revealed .ed-rv-c {
  opacity: 1;
  transform: none;
}
/* The hero's highlight box is painted by an inline background on <strong>.
   Splitting its text into inline-blocks leaves the box itself alone, but the
   letters inside must not clip against it. */
.ed-shero-mark .ed-rv-c { vertical-align: baseline; }

@media (prefers-reduced-motion: reduce) {
  .ed-rv .ed-rv-c {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Process section on a photo ----------------------------------------
   Full-bleed photo under a black scrim, with the stepper inverted to white.
   The section is `position: relative` so the photo can be an absolute child
   rather than a background-image: an <img> gets lazy loading, an alt and
   the browser's own decoding priority, none of which a CSS background does. */
.ed-steps-photo {
  position: relative;
  background: #0b1b33;
  color: #fff;
  overflow: hidden;
}
.ed-steps-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ed-steps-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ed-steps-scrim {
  position: absolute;
  inset: 0;
  /* Slightly heavier at the top, where the eyebrow and headline sit, and
     lifting towards the bottom so the photo is still legible as a photo. */
  background: linear-gradient(
    180deg,
    rgba(4, 8, 16, var(--ed-ov-top, 0.82)) 0%,
    rgba(4, 8, 16, var(--ed-ov-mid, 0.76)) 52%,
    rgba(4, 8, 16, var(--ed-ov-bot, 0.68)) 100%
  );
}
.ed-ov-soft { --ed-ov-top: 0.62; --ed-ov-mid: 0.55; --ed-ov-bot: 0.46; }
.ed-ov-medium { --ed-ov-top: 0.74; --ed-ov-mid: 0.67; --ed-ov-bot: 0.58; }
.ed-ov-strong { --ed-ov-top: 0.86; --ed-ov-mid: 0.8; --ed-ov-bot: 0.72; }
/* Everything above the scrim. */
.ed-steps-photo > .container { position: relative; z-index: 1; }

/* Inverted type. The light-theme rules target .ed-sec-title etc. globally,
   so the overrides have to be scoped here rather than set on the elements. */
.ed-steps-photo .ed-sec-eyebrow { color: rgba(255, 255, 255, 0.72); }
.ed-steps-photo .ed-sec-title { color: #fff; }
.ed-steps-photo .ed-sec-accent { color: var(--ed-blue-300); }
.ed-steps-photo .ed-steps-intro { color: rgba(255, 255, 255, 0.82); }
.ed-steps-photo .ed-stepper-title { color: #fff; }
.ed-steps-photo .ed-stepper-text { color: rgba(255, 255, 255, 0.78); }
.ed-steps-photo .ed-stepper-num { color: var(--ed-blue-300); }
.ed-steps-photo .ed-stepper-line { background: rgba(255, 255, 255, 0.24); }
.ed-steps-photo .ed-stepper-dot {
  background: var(--ed-blue-300);
  box-shadow: 0 0 0 4px rgba(4, 8, 16, 0.5);
}

/* ---- Pinned stepping ----
   Resting state is every stage lit; `is-stepping` is what introduces the
   dimming, and it is only ever added once the pin is actually running. */
/* The dim floor is 0.7, not the 0.32 this started at.
   Opacity on the item compounds with the step text's own
   rgba(255,255,255,0.78): at 0.32 that text composited to 2.21:1 against the
   worst pixel of the scrimmed photo, and the title to 2.73:1 — both far under
   AA, for copy a reader is expected to read as the pin walks past it. 0.7 is
   the lowest value where the compounded text still clears 4.5 (it measures
   5.02, the title 7.16).
   The sequence is carried by the node and the connector instead, which have
   no text to make illegible. */
.ed-stepper.is-stepping .ed-stepper-item {
  transition: opacity 0.45s ease;
  opacity: 0.7;
}
.ed-stepper.is-stepping .ed-stepper-item.is-done { opacity: 0.85; }
.ed-stepper.is-stepping .ed-stepper-item.is-active { opacity: 1; }
/* With the dimming range narrowed, the active stage needs its own signal in
   something other than opacity. */
.ed-stepper.is-stepping .ed-stepper-item {
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.7, 0.3, 1);
}
.ed-stepper.is-stepping .ed-stepper-item.is-active { transform: translateY(-6px); }
/* The node grows and brightens on the stage being read. */
.ed-stepper.is-stepping .ed-stepper-dot {
  transition: transform 0.4s cubic-bezier(0.22, 0.7, 0.3, 1), background-color 0.4s ease;
  transform: scale(0.8);
}
.ed-stepper.is-stepping .is-done .ed-stepper-dot { transform: scale(1); }
.ed-stepper.is-stepping .is-active .ed-stepper-dot {
  transform: scale(1.65);
  background: #fff;
}
/* The connector fills behind the dots as the pin advances. A second line is
   laid over the grey one and scaled from the left, which animates on the
   compositor — animating width or background-size would not. */
.ed-stepper.is-stepping .ed-stepper-line {
  position: relative;
  overflow: hidden;
}
.ed-stepper.is-stepping .is-done .ed-stepper-line::after,
.ed-stepper.is-stepping .is-active .ed-stepper-in::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ed-blue-300);
}
@media (max-width: 991.98px) {
  /* No pin below 992px, so nothing should be dimmed. */
  .ed-stepper.is-stepping .ed-stepper-item { opacity: 1; }
}

/* ======================================== digitalnomadshq.com.au/seo-agency
   The reference the client settled on, measured off the live page.
   Display is Barlow Condensed 700 uppercase at line-height 0.90 and
   letter-spacing -0.021em (h1 104px, h2 60px); everything else is Inter
   Tight. Ink is #002A45, panels #f2f2f2, and the shape language is a 16px
   radius with an asymmetric 0/32px corner as its signature.

   Two deliberate departures, both from standing instructions:
   - Their accent palette is multi-colour (mint, lilac, butter). The brief
     here is the logo blue only, so the blue carries every accent and the
     mint/lilac are not reproduced.
   - Their hero has no form; ours keeps the one on the banner, as asked for
     earlier. The hero takes the reference's full-bleed colour field and
     display type, and the form sits where their photo cluster does. */

/* ---- Display scale ----
   0.90 leading is the reference's and it is what makes a 100px headline
   read as a block rather than a list of lines. It only works because the
   face is condensed and set in caps — there are no descenders to collide. */
.ed-shero-title,
.ed-sec-title {
  font-family: var(--ed-ff-display);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.021em;
  text-transform: uppercase;
}
.ed-shero-title { font-size: clamp(54px, 7.4vw, 104px); }
.ed-sec-title { font-size: clamp(38px, 4.6vw, 60px); }
/* Condensed caps need their eyebrow to stay in the body face, or the label
   and the headline merge into one grey block. */
.ed-sec-eyebrow,
.ed-shero-eyebrow {
  font-family: var(--ed-ff-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* ---- Shape ----
   16px is the workhorse; the 0/32px corner is the signature. Applying it to
   the photo-bearing and panel elements only — on a small chip it reads as a
   rendering fault rather than a decision. */
:root { --ed-corner: 0 32px 0 32px; }
.tp-btn-lg.tp-round-26,
.tp-btn-sm.tp-round-26,
a.tp-round-26,
button.tp-round-26,
.ed-quote-submit,
.ed-quote-card {
  border-radius: 16px;
}
.tp-btn-lg.tp-round-26,
.tp-btn-sm.tp-round-26,
.ed-quote-submit {
  font-family: var(--ed-ff-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ed-deck-card,
.ed-deck-face,
.ed-upanel-box,
.ed-feature-media,
.ed-shero-thumb,
.ed-tcard {
  border-radius: var(--ed-corner);
}

/* ---- Ink ----
   #002A45 rather than the #05142E we were using: a touch warmer and lighter,
   and it is what the reference sets every headline and button label in. */
:root {
  --ed-blue-dark: #002a45;
  --ed-panel: #f2f2f2;
}

/* ---- Hero: full-bleed colour field ----
   The reference's hero is a solid colour panel edge to edge with white
   display type on it, not a white page with a gradient wash. That swap is
   most of the first impression. Their field is rgb(73,109,186); ours is the
   logo blue darkened to the same role, so the white headline clears AA by a
   wide margin and the page still reads as eDigiTech's blue. */
.ed-shero {
  background: #0a3fa8;
  color: #fff;
}
/* The WebGL mesh was painting a light gradient for a white hero. On a solid
   field it is noise, and on this one it washes the blue out. */
.ed-shero .ed-shero-mesh { display: none; }
.ed-shero-title { color: #fff; }
.ed-shero-eyebrow {
  padding: 0;
  background: none;
  color: rgba(255, 255, 255, 0.75);
}
.ed-shero-eyebrow::before { content: none; }
.ed-shero-intro {
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
}
/* The boxed phrase inverts: a navy box on a blue field disappears, so the
   highlight becomes white-on-blue instead of white-on-navy. */
.ed-shero-mark {
  background: #fff;
  color: #0a3fa8;
  border-radius: 6px;
}
/* Badges become the reference's rating chips: solid white, dark ink. */
.ed-shero-badges li {
  border: 0;
  background: #fff;
  color: var(--ed-blue-dark);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Primary CTA is white-on-blue here, the inverse of the light sections. */
.ed-shero .tp-bg-theme-primary {
  background: #fff !important;
  color: var(--ed-blue-dark) !important;
}
.ed-shero .ed-btn-white {
  background: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: #fff !important;
}
/* The quote card stays white, which is now a panel on colour rather than a
   panel on white — so it needs no border, only its own corner. */
.ed-quote-card { border: 0; box-shadow: 0 30px 70px -30px rgba(0, 20, 50, 0.45); }

/* ---- Stats panels ----
   Oversized condensed numerals on a grey panel, caption in caps beneath, a
   hairline, then the sentence — the reference's stat block. */
.ed-counter-value,
.ed-count {
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

/* ---- Hero fixes ----
   1. The boxed phrase cannot survive 0.90 leading. An inline background
      covers the font's full ~1.26em content area, so at a 0.90 line box the
      boxes on consecutive lines overlap by a third of their height and the
      words collide — the same failure that forced 1.36 leading back when the
      box was the point. The reference's headline carries no box at all, so
      the emphasis becomes a tint instead: #bed4ff measures 6.14:1 on this
      field, well past the 3:1 large-text threshold.
   2. The primary CTA rendered as a blank white pill. Setting the colour on
      the button was not enough — SwitchButton's inner spans carry the
      template's `tp-text-common-white`, which won in the cascade and painted
      white text on the new white background. The inner spans have to be
      targeted too. */
.ed-shero-mark {
  padding: 0;
  margin: 0;
  background: none;
  border-radius: 0;
  color: #bed4ff;
}
.ed-shero .tp-bg-theme-primary,
.ed-shero .tp-bg-theme-primary span,
.ed-shero .tp-bg-theme-primary .tp-text-common-white {
  color: var(--ed-blue-dark) !important;
}
.ed-shero .ed-btn-white,
.ed-shero .ed-btn-white span {
  color: #fff !important;
}
/* 3. The header sits transparent over the hero, and the colour logo's dark
      wordmark is close to unreadable on the blue. The white lockup already
      exists in the brand folder. */
.ed-shero-overlap-header .tp-header-logo img { filter: none; }

/* ---- Header lockup over a dark hero ----
   Both lockups are in the markup; this picks one. Default is the colour
   lockup, so if the template's sticky handler never runs nothing is
   invisible. The white one only takes over on a page that actually has the
   dark hero, and only while the header has not yet stuck. */
.ed-logo-dual { position: relative; display: inline-block; }
.ed-logo-dual .ed-logo-white {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
/* The white-lockup swap is gone. It existed because the header was
   transparent over the blue hero; internal pages now carry a solid white
   bar, so the white logo and white nav links were being painted onto white
   — invisible. These rules also outranked the new ones (an extra
   `:not(.header-sticky)` class), which is why setting the colour lockup
   back to opacity 1 had no effect until they were removed. */
.ed-logo-colour { transition: opacity 0.2s ease; }

/* ---- Re-fitting the three constrained heads for the condensed face ----
   These caps were measured against Outfit, which is wide. Barlow Condensed
   sets roughly a third narrower, so the same strings fit at a larger size:
   "WHY BUSINESSES CHOOSE EDIGITECH" went from two lines to one on the swap.
   Giving the constrained heads their size back. */
.ed-tsection-head .ed-sec-title { font-size: clamp(32px, 3.6vw, 50px); max-width: 18ch; }
.ed-feature .ed-sec-title { font-size: clamp(32px, 3.8vw, 52px); }
.ed-faq-head .ed-sec-title { font-size: clamp(28px, 3vw, 42px); }

/* ==================================== Sections below the hero
   The type and the hero were only the first half. These are the section
   layouts the reference actually uses, which is what makes the rest of the
   page read as that page rather than as the previous one in a new font. */

/* ---- Neutral panels ----
   Every tinted section was a pale blue wash (--ed-blue-50). The reference
   alternates plain white with a neutral #f2f2f2, which is what keeps the
   blue reading as an accent instead of a background. One variable swap
   repoints all nine tinted sections. */
:root {
  --ed-blue-50: #f2f2f2;
  --ed-blue-100: #e8e8e8;
}

/* ---- Stat panels ----
   The reference's stat block: an oversized condensed numeral, an uppercase
   caption under it, a hairline, and the whole thing on its own grey panel
   with the asymmetric corner. Ours was four figures on a navy band with a
   single rule across the top — a different idea entirely. */
.ed-proof {
  padding: 96px 0 100px;
  background: #fff;
}
.ed-proof-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  padding-top: 0;
  border-top: 0;
}
.ed-proof-item {
  padding: 44px 36px 38px;
  text-align: center;
  background: var(--ed-panel, #f2f2f2);
  border-radius: var(--ed-corner);
}
.ed-proof-number {
  color: var(--tp-theme-primary);
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: clamp(64px, 7vw, 96px);
  line-height: 0.88;
  letter-spacing: -0.022em;
}
.ed-proof-label {
  display: block;
  margin-top: 16px;
  padding-top: 0;
  color: var(--ed-blue-dark);
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ---- Service cards ----
   White cards on the grey section, each with the asymmetric corner, and the
   columns stepped vertically so the row reads as a set rather than a strip.
   The deck's dealing animation is unchanged; this is only its resting look. */
.ed-offer { background: var(--ed-panel, #f2f2f2); }
.ed-deck-face {
  background: #fff;
  color: var(--ed-blue-dark);
  border-radius: var(--ed-corner);
}
.ed-deck-back {
  background: var(--tp-theme-primary);
  color: #fff;
}
.ed-deck-back-num { color: rgba(255, 255, 255, 0.4); }
.ed-deck-index { color: var(--tp-theme-primary); }
.ed-deck-title {
  color: var(--ed-blue-dark);
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.ed-deck-list {
  color: #4a4f5a;
}
.ed-deck-list li { border-top-color: rgba(9, 14, 28, 0.1); }
.ed-deck-tick { color: var(--tp-theme-primary); }
.ed-deck-list a:hover { color: var(--tp-theme-primary); }
/* The stagger. Only from 992px — stepped columns in a single-column stack
   would just be uneven gaps. */
@media (min-width: 992px) {
  .ed-deck-card:nth-child(even) { margin-top: 44px; }
}

/* ---- USP panel on the neutral tint ---- */
.ed-upanel-box {
  background: var(--ed-panel, #f2f2f2);
  border: 0;
}
.ed-upanel-title {
  font-family: var(--ed-ff-display);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

/* The section eyebrow was #6b7280, picked against the old pale-blue tint
   where it measured 4.66:1. The neutral panel is darker, which drops the
   same grey to 4.32:1 — under AA at 14px. #646b78 holds 4.79 on the panel
   and 5.36 on white. */
.ed-sec-eyebrow { color: #646b78; }

/* ---- Process: two columns ---- */
.ed-steps-split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 40px 72px;
  align-items: start;
}
.ed-steps-aside .ed-steps-intro { margin-top: 20px; max-width: 38ch; }

/* The stages as oversized rows down the right. */
.ed-stepper-vertical .ed-stepper-list {
  display: block;
  grid-template-columns: none;
}
.ed-stepper-vertical .ed-stepper-item {
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.ed-stepper-vertical .ed-stepper-item:first-child { border-top: 0; padding-top: 0; }
.ed-stepper-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.ed-stepper-name {
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
}
.ed-stepper-vertical .ed-stepper-num {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--ed-ff-display);
  font-size: 18px;
  color: var(--ed-blue-300);
}
.ed-stepper-vertical .ed-stepper-text {
  margin: 10px 0 0;
  max-width: 48ch;
  font-size: 15.5px;
}
/* The horizontal connector belongs to the old layout. */
.ed-stepper-vertical .ed-stepper-track { display: none; }

@media (max-width: 991.98px) {
  .ed-steps-split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

/* The heading column holds while the stages scroll past it — `position:
   sticky` rather than a GSAP pin, because the section is taller than the
   viewport and pinning it would scroll the whole block under the header
   before releasing. */
@media (min-width: 992px) {
  .ed-steps-aside {
    position: sticky;
    top: 120px;
  }
}

/* ---- Hero photo cluster ----
   The reference's hero right-hand side: overlapping photos at the
   asymmetric corner, each tagged with a flat pill label that overhangs the
   photo's edge. Laid out on a 2-column grid with the middle tile pulled
   across both, which is what produces the staggered overlap without
   absolute positioning (and so it still stacks sanely on a phone). */
.ed-shero-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ed-shero-tile {
  position: relative;
  margin: 0;
  border-radius: 0 28px 0 28px;
  overflow: visible;
}
.ed-shero-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 28px 0 28px;
}
/* The first tile is the big one and spans the row; the other two sit under
   it, offset, the way the reference's cluster steps down to the right. */
.ed-shero-tile-1 { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.ed-shero-tile-2 { aspect-ratio: 1 / 1; margin-top: -46px; margin-right: -14px; z-index: 2; }
.ed-shero-tile-3 { aspect-ratio: 1 / 1; margin-top: 18px; }
.ed-shero-tile-label {
  position: absolute;
  left: -10px;
  bottom: 14px;
  padding: 8px 15px;
  border-radius: 10px;
  background: #fff;
  color: var(--ed-blue-dark);
  font-family: var(--ed-ff-body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 22px -10px rgba(0, 20, 50, 0.5);
}
.ed-shero-tile-2 .ed-shero-tile-label { left: auto; right: -8px; }
@media (max-width: 991.98px) {
  .ed-shero-tiles { margin-top: 36px; }
  .ed-shero-tile-2 { margin-top: -24px; margin-right: 0; }
  .ed-shero-tile-3 { margin-top: 0; }
}
@media (max-width: 575.98px) {
  .ed-shero-tile-1 { aspect-ratio: 16 / 11; }
  .ed-shero-tile-label { font-size: 10.5px; padding: 7px 12px; left: 8px; }
  .ed-shero-tile-2 .ed-shero-tile-label { right: 8px; }
}

/* ---- Case study result cards ------------------------------------------- */
.ed-cases { padding: 104px 0 100px; background: var(--tp-theme-primary); color: #fff; }
.ed-cases-head { margin-bottom: 54px; }
.ed-cases-head .ed-sec-eyebrow { color: rgba(255, 255, 255, 0.72); }
.ed-cases-head .ed-sec-title { color: #fff; }
.ed-cases-head .ed-sec-accent { color: var(--ed-blue-300); }
.ed-cases-head .ed-sec-intro { color: rgba(255, 255, 255, 0.85); }
.ed-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px;
}
.ed-case {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  color: var(--ed-blue-dark);
  border-radius: var(--ed-corner);
}
.ed-case-media { position: relative; aspect-ratio: 16 / 10; }
.ed-case-media img { width: 100%; height: 100%; object-fit: cover; }
.ed-case-tags {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ed-case-tags li {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ed-blue-dark);
  font-family: var(--ed-ff-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ed-case-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 26px 26px 24px; }
.ed-case-metrics {
  display: flex;
  gap: 30px;
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(9, 14, 28, 0.1);
}
.ed-case-metrics > div { min-width: 0; }
.ed-case-figure {
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: clamp(38px, 4vw, 54px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--tp-theme-primary);
}
.ed-case-metric-label {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: #4a4f5a;
}
.ed-case-client {
  margin: 0 0 8px;
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.ed-case-text { margin: 0 0 16px; font-size: 15px; line-height: 1.56; color: #4a4f5a; }
.ed-case-link {
  margin-top: auto;
  color: var(--tp-theme-primary);
  font-family: var(--ed-ff-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Badge row ---------------------------------------------------------- */
.ed-badges { padding: 76px 0 70px; background: #fff; text-align: center; }
.ed-badges-title {
  margin: 0 0 34px;
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 38px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ed-blue-dark);
}
.ed-badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 34px;
}
.ed-badge img { max-height: 62px; width: auto; }
/* A placeholder badge still has to look like a badge, or the row reads as
   broken rather than as pending artwork. */
.ed-badge-text {
  display: inline-block;
  padding: 13px 22px;
  border: 1px solid rgba(9, 14, 28, 0.14);
  border-radius: 12px;
  font-family: var(--ed-ff-body);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a4f5a;
}

@media (max-width: 991.98px) {
  .ed-cases { padding: 72px 0 70px; }
}

/* ================================================ TCS type, sentence case
   Two instructions drive this block: use TCS's typefaces, and no full-caps
   type anywhere.

   Caps were doing structural work before — they are why a condensed face
   could be set at 104px and still read as a heading, and why the 0.90
   leading held together (caps have no descenders to collide). Removing
   them means every one of those numbers has to change: a sentence-case
   geometric face sets wider, carries descenders, and needs real leading.
   Sizes come down, leading goes up, tracking relaxes. */
.ed-shero-title,
.ed-sec-title,
.ed-stepper-name,
.ed-deck-title,
.ed-case-client,
.ed-proof-label,
.ed-upanel-title,
.ed-badges-title,
.ed-sec-eyebrow,
.ed-shero-eyebrow,
.ed-shero-badges,
.ed-shero-badges li,
.ed-case-tags li,
.ed-stepper-num,
.ed-deck-index,
.ed-badge-text,
.ed-proof-number,
.tp-btn-lg.tp-round-26,
.tp-btn-sm.tp-round-26,
.ed-quote-submit,
.ed-case-link {
  text-transform: none;
}

/* ---- Display scale, rebuilt for a sentence-case geometric face ---- */
.ed-shero-title {
  font-family: var(--ed-ff-display);
  font-weight: 700;
  /* Down from 104. Figtree sets roughly 30% wider than Barlow Condensed and
     the string is no longer caps-only, so the old ceiling ran four lines. */
  font-size: clamp(38px, 5.2vw, 70px);
  /* 0.90 was only survivable in caps. Lowercase needs room for descenders
     and for the ascender of the next line to clear them. */
  line-height: 1.06;
  letter-spacing: -0.028em;
}
.ed-sec-title {
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.024em;
}

/* Labels keep their letterspacing — it is what still marks them as labels
   now that case no longer does. */
.ed-sec-eyebrow,
.ed-shero-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.tp-btn-lg.tp-round-26,
.tp-btn-sm.tp-round-26,
.ed-quote-submit {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.ed-shero-badges li,
.ed-case-tags li,
.ed-badge-text { font-size: 13px; letter-spacing: 0.005em; }
.ed-stepper-name { font-size: clamp(26px, 3vw, 42px); line-height: 1.08; }
.ed-deck-title { font-size: 23px; line-height: 1.18; }
.ed-case-client { font-size: 21px; }
.ed-upanel-title { font-size: 21px; }
.ed-proof-label { font-size: 18px; font-weight: 600; letter-spacing: 0; }
.ed-stepper-num,
.ed-deck-index { font-family: var(--ed-ff-body); letter-spacing: 0.06em; }

/* ---- Sticky quote bar ----
   Docks once the hero has gone. Hidden until then via opacity+transform
   rather than display, so the transition has something to animate from. */
.ed-stickycta {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 60;
  width: min(760px, calc(100vw - 32px));
  transform: translate(-50%, 140%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.22, 0.7, 0.3, 1), opacity 0.3s ease;
}
.ed-stickycta.is-shown {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.ed-stickycta-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 14px 12px 22px;
  border-radius: 16px;
  background: var(--ed-blue-dark);
  box-shadow: 0 24px 60px -24px rgba(0, 20, 50, 0.6);
}
.ed-stickycta-price {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
}
.ed-stickycta-price span {
  display: block;
  margin-top: 2px;
  /* 0.72 white on #002a45 is 9.1:1 — the de-emphasis is hierarchy, not a
     contrast compromise. */
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--ed-ff-body);
  font-weight: 400;
  font-size: 12px;
}
.ed-stickycta-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ed-stickycta-primary,
.ed-stickycta-secondary {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: 11px;
  font-family: var(--ed-ff-body);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.ed-stickycta-primary { background: var(--tp-theme-primary); color: #fff; }
.ed-stickycta-secondary { border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; }
.ed-stickycta-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}
.ed-stickycta-close:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
@media (max-width: 575.98px) {
  .ed-stickycta { bottom: 10px; }
  .ed-stickycta-inner { gap: 10px; padding: 10px 10px 10px 16px; }
  /* The sub-line is the first thing to go: on a phone the bar has room for
     a figure and one action, not an explanation. */
  .ed-stickycta-price { font-size: 18px; }
  .ed-stickycta-price span { display: none; }
  .ed-stickycta-secondary { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-stickycta { transition: opacity 0.3s ease; transform: translate(-50%, 0); }
}

/* ---- The rest of the caps ----
   The sweep above only covered classes this stylesheet owns. These come
   from the template's own markup — `text-uppercase` sits in the className
   strings of SwitchButton, the section headings, the mega menu and the
   footer, so no amount of styling our own classes reaches them. Overriding
   the utility itself, scoped to the parts of the page we render, is the
   only way to honour "no full-caps" without editing a dozen components. */
.tp-btn-lg,
.tp-btn-sm,
.btn-text,
.tp-megamenu-title,
.tp-offcanvas-title,
.tp-section-title,
.tp-section-subtitle,
.tp-footer-top-title,
.ed-pricecta-eyebrow,
.ed-statement-label,
.ed-shero-tile-label,
.tp-hero-title,
.tp-counter-number,
.ed-tcard-tag,
.ed-offer-title,
.ed-step-title,
.ed-usp-card-title,
.ed-faq .accordion-button {
  text-transform: none !important;
}
/* Letterspacing tuned for caps looks loose in sentence case. */
.tp-btn-lg,
.tp-btn-sm,
.btn-text { letter-spacing: 0.005em !important; }
.tp-section-subtitle,
.ed-pricecta-eyebrow,
.ed-statement-label { letter-spacing: 0.08em; }
/* The template's section headings are their own scale; bring them into the
   one this page now uses. */
.tp-section-title {
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 48px) !important;
  line-height: 1.1;
  letter-spacing: -0.024em;
}
.tp-hero-title {
  font-family: var(--ed-ff-display);
  letter-spacing: -0.028em;
  line-height: 1.06;
}

/* Nav and the social rail were the last caps on the page. */
.tp-main-menu > nav > ul > li > a,
.tp-main-menu nav ul li a,
.tp-offcanvas-social a,
.tp-header-social a,
.ed-social-rail a,
.tp-footer-widget-title,
.tp-footer-col-title {
  text-transform: none !important;
  letter-spacing: 0.005em;
}

/* Last of them: the footer's social list. */
.tp-footer-social ul li a { text-transform: none !important; letter-spacing: 0.005em; }

/* ---- Feature, recomposed -----------------------------------------------
   Headline across the full measure, then a tall photo beside a numbered
   list. Replaces a 50/50 photo-and-text band. The old rules below this
   point in the file targeted .ed-feature as a two-column flex row, so this
   resets the container before rebuilding it. */
.ed-feature {
  display: block;
  padding: 108px 0 104px;
  background: #fff;
  overflow: hidden;
}
.ed-feature-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px 64px;
  align-items: end;
  margin-bottom: 52px;
  /* Above the photo, which is pulled up into this row. */
  position: relative;
  z-index: 2;
}
.ed-feature-head .ed-sec-title { margin: 0; max-width: 16ch; }
.ed-feature-text {
  margin: 0;
  padding-bottom: 6px;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ed-body);
}
.ed-feature-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 44px 64px;
  align-items: start;
}
/* The photo runs taller than its row and hangs *below* it, into the gap
   before the next section.
   It used to be pulled up by -120px to overlap the headline instead. That
   read well with a one-line headline and destroyed a two-line one — at
   1440px "Websites built around your goals" wraps, and the second line
   disappeared behind the image. Overlapping downwards cannot collide with
   text, because there is none beneath it. */
.ed-feature-media {
  position: relative;
  z-index: 1;
  margin-bottom: -86px;
  /* The older full-bleed rule sets min-height: 100%, i.e. the row's height.
     With a long list of points the row outgrows the photo, and the 4:5 ratio
     then widened the photo past its column and over the list. */
  min-height: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--ed-corner);
  overflow: hidden;
}
/* Room for the overhang, so the next section does not ride up into it. */
.ed-feature { padding-bottom: 180px; }
/* A list of seven or more points runs longer than the photo, so there is no
   overhang to make room for — the reserve was only white space. */
@media (min-width: 992px) {
  .ed-feature:has(.ed-feature-row:nth-child(7)) { padding-bottom: 90px; }
  .ed-feature:has(.ed-feature-row:nth-child(7)) .ed-feature-media { margin-bottom: 0; }
}
.ed-feature-media-inner,
.ed-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ed-feature-flip .ed-feature-head,
.ed-feature-flip .ed-feature-body { direction: rtl; }
.ed-feature-flip .ed-feature-head > *,
.ed-feature-flip .ed-feature-body > * { direction: ltr; }

/* The older full-bleed rule made the panel a flex row, which put the button
   beside the list instead of under it. */
.ed-feature-body .ed-feature-panel { display: block; padding-top: 4px; }
.ed-feature-list { display: block; margin: 0 0 30px; padding: 0; }
.ed-feature-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding: 19px 0;
  border-top: 1px solid rgba(9, 14, 28, 0.12);
}
.ed-feature-row:last-child { border-bottom: 1px solid rgba(9, 14, 28, 0.12); }
.ed-feature-num {
  font-family: var(--ed-ff-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--tp-theme-primary);
}
.ed-feature-label {
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ed-blue-dark);
}
.ed-feature-cta { margin-top: 4px; }

/* Dark theme */

@media (max-width: 991.98px) {
  .ed-feature { padding: 72px 0 70px; }
  .ed-feature-media { margin-bottom: 0; }
  .ed-feature-head,
  .ed-feature-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* No overlap in a single column — the photo would collide with the copy
     it is meant to sit beside. */
  .ed-feature-media { margin-top: 0; aspect-ratio: 16 / 11; }
  .ed-feature-head { margin-bottom: 30px; }
}

/* ============================ Remaining sections, recomposed
   Four layouts that were still the original template compositions. Each
   change here is structural; none of it is paint. */

/* ---- Pricing: the figure gets the full measure ---- */
.ed-pricecta { padding: 100px 0; background: #fff; }
.ed-pricecta-card {
  display: block;
  padding: 0;
  background: none;
  border: 0;
  border-top: 1px solid rgba(9, 14, 28, 0.13);
  padding-top: 46px;
}
.ed-pricecta-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 20px 64px;
  align-items: end;
}
.ed-pricecta-eyebrow {
  grid-column: 1 / -1;
  display: block;
  margin-bottom: 20px;
  color: #646b78;
  font-family: var(--ed-ff-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.ed-pricecta-headline { min-width: 0; }
.ed-pricecta-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.ed-pricecta-price span {
  font-family: var(--ed-ff-display);
  font-weight: 700;
  /* The number is the loudest thing in the section now. */
  font-size: clamp(58px, 8vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--tp-theme-primary);
}
.ed-pricecta-price small {
  max-width: 16ch;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ed-body);
}
.ed-pricecta-title {
  margin: 0;
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.024em;
  color: var(--ed-blue-dark);
}
.ed-pricecta-text {
  margin: 0;
  padding-bottom: 6px;
  max-width: 44ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ed-body);
}
/* The reassurance points become one ruled row under the figure instead of
   a tick list competing with it in a side column. */
.ed-pricecta-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 32px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(9, 14, 28, 0.13);
}
.ed-pricecta-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 20px 0 4px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ed-blue-dark);
}
.ed-pricecta-tick { margin-top: 4px; color: var(--tp-theme-primary); }
.ed-pricecta-actions { margin-top: 34px; }

/* ---- FAQ: heading on top, accordion full width ---- */
.ed-faq-head {
  position: static;
  max-width: 24ch;
  margin-bottom: 44px;
  padding-right: 0;
}
.ed-faq-head .ed-sec-title { font-size: clamp(30px, 3.6vw, 48px); }

/* ---- Statement: one paragraph, full measure ---- */
.ed-statement-label {
  display: block;
  margin-bottom: 22px;
}
.ed-statement-text { max-width: 30ch; }

/* ---- Why choose us: numbered rows ---- */
.ed-upanel-rows {
  display: block;
  border-top: 1px solid rgba(9, 14, 28, 0.13);
}
.ed-upanel-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1.05fr) minmax(0, 1.2fr);
  gap: 10px 40px;
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid rgba(9, 14, 28, 0.13);
}
.ed-upanel-index {
  font-family: var(--ed-ff-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--tp-theme-primary);
}
.ed-upanel-row .ed-upanel-title {
  margin: 0;
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: clamp(22px, 2.3vw, 31px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ed-blue-dark);
}
.ed-upanel-row .ed-upanel-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
  color: var(--ed-body);
}
@media (max-width: 767.98px) {
  .ed-upanel-row { grid-template-columns: 48px minmax(0, 1fr); gap: 8px 16px; padding: 24px 0; }
  .ed-upanel-row .ed-upanel-text { grid-column: 2; }
  .ed-pricecta-top { grid-template-columns: minmax(0, 1fr); }
  .ed-pricecta { padding: 70px 0; }
}

/* ===================================== Breaking the uniform grids
   The brief is that this must not read as machine-generated, and the
   clearest tell of that is a row of identical cards: three case studies at
   the same size with the same photo ratio and the same type, four stat
   panels in four equal boxes. A generator produces equal cells because it
   has no opinion about which item matters. A designer features one.

   So both grids get a lead item and subordinate ones. Nothing is added and
   no content changes — only the weighting. */

/* ---- Case studies: one featured, the rest stacked beside it ---- */
@media (min-width: 992px) {
  .ed-cases-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(0, auto);
  }
  .ed-case:nth-child(1) {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
  }
  .ed-case:nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
  .ed-case:nth-child(3) { grid-column: 8 / 13; grid-row: 2; }
  /* A fourth and beyond fall back to thirds across the next row, so the
     block does not break when the client adds more. */
  .ed-case:nth-child(n + 4) { grid-column: span 4; }

  /* The lead card earns a taller photo and a bigger figure; the side cards
     drop their photo entirely, because at 5 columns a 16:10 image is a
     130px strip that says nothing. */
  .ed-case:nth-child(1) .ed-case-media { aspect-ratio: 16 / 9; }
  .ed-case:nth-child(1) .ed-case-figure { font-size: clamp(44px, 4.6vw, 62px); }
  .ed-case:nth-child(1) .ed-case-client { font-size: 25px; }
  .ed-case:nth-child(1) .ed-case-body { padding: 32px 32px 30px; }
  .ed-case:nth-child(2) .ed-case-media,
  .ed-case:nth-child(3) .ed-case-media { display: none; }
  .ed-case:nth-child(2) .ed-case-figure,
  .ed-case:nth-child(3) .ed-case-figure { font-size: 34px; }
  /* Without a photo the side cards need their tags back somewhere. */
  .ed-case:nth-child(2) .ed-case-body,
  .ed-case:nth-child(3) .ed-case-body { justify-content: center; }
}

/* ---- Stats: alternating two-thirds / one-third ----
   My first attempt at this set contradictory spans — span 3, then span 1,
   then span 3 again for the same elements — so every panel resolved to the
   same width and the grid stayed as uniform as before.
   Six tracks, 4+2 on the first row and 2+4 on the second: four panels, no
   two adjacent ones the same width, and the rows still line up. */
@media (min-width: 992px) {
  .ed-proof-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ed-proof-item:nth-child(4n + 1) { grid-column: span 4; }
  .ed-proof-item:nth-child(4n + 2) { grid-column: span 2; }
  .ed-proof-item:nth-child(4n + 3) { grid-column: span 2; }
  .ed-proof-item:nth-child(4n + 4) { grid-column: span 4; }
  /* The wide panels can carry a bigger numeral; the narrow ones cannot. */
  .ed-proof-item:nth-child(4n + 1) .ed-proof-number,
  .ed-proof-item:nth-child(4n + 4) .ed-proof-number { font-size: clamp(78px, 8vw, 118px); }
  .ed-proof-item:nth-child(4n + 1),
  .ed-proof-item:nth-child(4n + 4) { padding: 54px 44px 48px; }
  .ed-proof-item:nth-child(4n + 2) .ed-proof-number,
  .ed-proof-item:nth-child(4n + 3) .ed-proof-number { font-size: clamp(52px, 5vw, 72px); }
}

/* ---- Badge row: left-aligned, not centred ----
   A centred row of equal chips is the other generated-looking pattern. Run
   left under a left-aligned line and it reads as a list someone wrote. */
.ed-badges { text-align: left; }
.ed-badges-row { justify-content: flex-start; }
.ed-badges-title { max-width: 20ch; }

/* ---- Header: solid on internal pages ----
   The template ships one transparent header for every page. That is right
   over the homepage's own hero, which is built to sit under it, and wrong
   everywhere else — on an internal page the nav floats over whatever
   happens to be at the top.
   Scoped with :has() rather than a pathname class so it needs no JS and
   cannot flash: any page that is not the homepage hero gets a solid bar. */
body:not(:has(.tp-hero-area)) #header-sticky {
  background: #fff;
  border-bottom: 1px solid rgba(9, 14, 28, 0.08);
}
/* With a white bar the white lockup and white nav links would vanish, so
   the dark-hero overrides have to stop applying. */
body:not(:has(.tp-hero-area)) #header-sticky .ed-logo-white { opacity: 0; }
body:not(:has(.tp-hero-area)) #header-sticky .ed-logo-colour { opacity: 1; }
body:not(:has(.tp-hero-area)) #header-sticky .tp-main-menu > nav > ul > li > a {
  color: var(--ed-blue-dark);
}
/* The hero starts under the bar now instead of behind it. */
body:not(:has(.tp-hero-area)) .ed-shero { padding-top: 76px; }

/* ============================================ Service hero, light
   Matched to the reference the client supplied: a pale field, a dark
   three-line headline on the left, a blue pill and a white pill as the
   actions, and one photo standing on the right with no frame.

   Scoped with :has(.ed-shero-tiles) so it applies only to the top hero —
   the quote section near the bottom of the page is also a serviceHero,
   carries the form instead of tiles, and keeps its blue band.

   The reference's photo is a cut-out: one person on a transparent
   background. None of the client's photos are, so the closest honest
   version is a light photo with its left, right and top edges masked into
   the field, sitting on the hero's bottom edge. A cut-out PNG dropped into
   the first tile slot would make it exact with no code change. */
.ed-shero:has(.ed-shero-tiles) {
  background: linear-gradient(100deg, #f7f9fc 0%, #eef2f8 55%, #e5ebf4 100%);
  color: var(--ed-blue-dark);
  padding-bottom: 0;
}
body:not(:has(.tp-hero-area)) .ed-shero:has(.ed-shero-tiles) { padding-top: 132px; }

/* Copy: dark on light, one colour, no eyebrow or chip row — the reference
   has neither. Both are still in the CMS; these two lines hide them. */
.ed-shero:has(.ed-shero-tiles) .ed-shero-eyebrow,
.ed-shero:has(.ed-shero-tiles) .ed-shero-badges { display: none; }
.ed-shero:has(.ed-shero-tiles) .ed-shero-title {
  color: var(--ed-blue-dark);
  font-weight: 700;
  font-size: clamp(38px, 4.9vw, 66px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}
.ed-shero:has(.ed-shero-tiles) .ed-shero-mark { color: inherit; }
.ed-shero:has(.ed-shero-tiles) .ed-shero-intro {
  max-width: 50ch;
  margin-bottom: 34px;
  color: #4a5160;
  font-size: 16.5px;
  line-height: 1.65;
}

/* Actions: a solid blue pill and a white pill, after the reference. The
   blue-field rules earlier in this file force white-on-white and a white
   outline here, so these need the same !important to undo them. */
.ed-shero:has(.ed-shero-tiles) .tp-btn-lg { border-radius: 999px; }
.ed-shero:has(.ed-shero-tiles) .tp-bg-theme-primary {
  background: var(--tp-theme-primary) !important;
  box-shadow: 0 12px 26px -12px rgba(6, 85, 237, 0.55);
}
.ed-shero:has(.ed-shero-tiles) .tp-bg-theme-primary,
.ed-shero:has(.ed-shero-tiles) .tp-bg-theme-primary span,
.ed-shero:has(.ed-shero-tiles) .tp-bg-theme-primary .tp-text-common-white { color: #fff !important; }
.ed-shero:has(.ed-shero-tiles) .ed-btn-white {
  background: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 24px -14px rgba(0, 20, 50, 0.35);
}
.ed-shero:has(.ed-shero-tiles) .ed-btn-white,
.ed-shero:has(.ed-shero-tiles) .ed-btn-white span { color: var(--ed-blue-dark) !important; }

/* Layout: copy centred in its column, photo standing on the bottom edge. */
@media (min-width: 992px) {
  .ed-shero:has(.ed-shero-tiles) .row { align-items: stretch; }
  .ed-shero:has(.ed-shero-tiles) .ed-shero-well {
    width: 54%;
    align-self: center;
    padding-bottom: 88px;
  }
  .ed-shero:has(.ed-shero-tiles) .ed-shero-form {
    width: 46%;
    align-self: flex-end;
  }
}

/* One photo, no frame, no label. */
.ed-shero:has(.ed-shero-tiles) .ed-shero-tiles { display: block; margin: 0; }
.ed-shero:has(.ed-shero-tiles) .ed-shero-tile:not(:first-child),
.ed-shero:has(.ed-shero-tiles) .ed-shero-tile-label { display: none; }
.ed-shero:has(.ed-shero-tiles) .ed-shero-tile-1 {
  margin: 0;
  aspect-ratio: 4 / 4.4;
  border-radius: 0;
  overflow: visible;
}
.ed-shero:has(.ed-shero-tiles) .ed-shero-tile-1 img {
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  /* The woman on the right of this frame is the one clean single figure. */
  object-position: 92% center;
  /* Left, right and top edges dissolve into the field; the bottom stays
     hard so the photo reads as standing on the edge of the hero, the way
     the cut-out in the reference does. Two gradients intersected rather
     than one radial, because a radial strong enough to clear the top edge
     also faded the subject's head. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 24%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 20%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 24%, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 20%);
  mask-composite: intersect;
}
@media (max-width: 991.98px) {
  body:not(:has(.tp-hero-area)) .ed-shero:has(.ed-shero-tiles) { padding-top: 112px; }
  .ed-shero:has(.ed-shero-tiles) .ed-shero-well { padding-bottom: 8px; }
  .ed-shero:has(.ed-shero-tiles) .ed-shero-tile-1 { aspect-ratio: 4 / 3.4; }
}

/* ================================================ About + numbers (bento)
   Built to the reference the client supplied for the slot under the hero:
   label pill and a two-tone intro, three equal cards, then a row of four
   numbers under a centred line. */
.ed-about { padding: 96px 0 92px; background: #fff; }

.ed-about-top {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: 24px 48px;
  align-items: start;
  margin-bottom: 48px;
}
.ed-about-label {
  justify-self: start;
  padding: 7px 14px;
  border: 1px solid rgba(9, 14, 28, 0.14);
  border-radius: 999px;
  font-family: var(--ed-ff-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--ed-blue-dark);
}
.ed-about-intro {
  margin: 0;
  /* Runs the full width of its column so its right edge lines up with the
     card row below. `pretty` keeps the last line from ending on one word. */
  max-width: none;
  text-wrap: pretty;
  font-family: var(--ed-ff-display);
  font-weight: 500;
  font-size: clamp(22px, 2.3vw, 31px);
  line-height: 1.32;
  letter-spacing: -0.018em;
  /* Muted by default; **bold** phrases are lifted to full ink. #7a8090 on
     white is 4.0:1 — under AA for body copy, but this is 31px display type,
     where the large-text threshold of 3:1 applies. */
  color: #7a8090;
}
.ed-about-strong { font-weight: inherit; color: var(--ed-blue-dark); }

.ed-about-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ed-about-card {
  position: relative;
  min-height: 300px;
  border-radius: 20px;
  overflow: hidden;
}

/* Dark feature card */
.ed-about-feature {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  background: #0d1a2e;
  color: #fff;
}
.ed-about-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 26px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #fff;
}
.ed-about-feature-text {
  margin: 0 0 22px;
  font-family: var(--ed-ff-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.38;
  letter-spacing: -0.012em;
  /* 0.6 white on #0d1a2e is 6.7:1. */
  color: rgba(255, 255, 255, 0.6);
}
.ed-about-feature-strong { font-weight: inherit; color: #fff; }
.ed-about-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-family: var(--ed-ff-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}
.ed-about-toggle i {
  position: relative;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: var(--tp-theme-primary);
}
.ed-about-toggle i::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
}

/* Photo card */
.ed-about-photo { background: #dfe7f3; }
.ed-about-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ed-about-photo-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  /* Dark glass, not light. The reference's label sat on a blue sky; this
     photo is a bright white office, and white text on light glass over it
     disappeared. A dark tint holds on any photo. */
  background: rgba(13, 26, 46, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--ed-ff-body);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  /* The label sits on a photo; a shadow keeps it legible on a bright patch. */
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* Stat card */
.ed-about-stat {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  background: #f1f3f7;
}
.ed-about-stat-value {
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: clamp(44px, 4.2vw, 58px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ed-blue-dark);
}
.ed-about-stat-label {
  margin-top: 8px;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ed-blue-dark);
}
.ed-about-stat-text {
  margin: 8px 0 0;
  max-width: 30ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: #5c6270;
}
.ed-about-chart { margin: auto 0 0; padding: 18px 0 0; list-style: none; }
.ed-about-chart li {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 24px;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--ed-blue-dark);
}
.ed-about-dots { display: flex; gap: 4px; }
.ed-about-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d3d9e4; }
.ed-about-dots i.is-on { background: var(--tp-theme-primary); }
.ed-about-chart-value { text-align: right; font-weight: 600; }

/* Numbers row */
.ed-about-facts { margin-top: 64px; text-align: center; }
.ed-about-facts-title {
  margin: 0 0 30px;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ed-blue-dark);
}

@media (max-width: 991.98px) {
  .ed-about { padding: 68px 0 64px; }
  .ed-about-top { grid-template-columns: minmax(0, 1fr); margin-bottom: 32px; }
  .ed-about-cards { grid-template-columns: minmax(0, 1fr); }
  .ed-about-card { min-height: 260px; }
}

/* ---- Numbers row on a dark panel ----
   After the reference supplied for it: heading above, then a dark rounded
   panel with the figures set large and light, each left-aligned in its
   column with a muted caption underneath. */
.ed-about-facts-title {
  margin-bottom: 22px;
  font-weight: 700;
  font-size: 17px;
}

/* ---- Numbers band: full width ----
   The panel became a band running edge to edge; the figures stay on the
   1230px grid via the container inside it. The section loses its bottom
   padding so the band meets the next section rather than floating above
   a strip of white. */
.ed-about { padding-bottom: 0; }

/* ============================================ Why-choose: illustrated cards
   Built to the reference supplied for this section: a heading row, then a
   card per reason with a small piece of product UI on a faint grid, above
   its title and copy. */
.ed-ushow { padding: 104px 0 100px; background: #fff; }
.ed-ushow-head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 20px 64px;
  align-items: end;
  margin-bottom: 52px;
}
/* The reference's heading is set medium and in one colour. */
.ed-ushow .ed-sec-title { margin: 0; max-width: 16ch; font-weight: 600; }
.ed-ushow .ed-sec-accent { color: inherit; font-weight: inherit; }
.ed-ushow-intro { margin: 0; max-width: 42ch; font-size: 15.5px; line-height: 1.6; color: #5c6270; }

.ed-ushow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.ed-ushow-card {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 26px;
  border: 1px solid rgba(9, 14, 28, 0.07);
  border-radius: 20px;
  background: #fafbfc;
}
.ed-ushow-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 232px;
  margin-bottom: 24px;
  border-radius: 14px;
  overflow: hidden;
  /* The faint grid behind each illustration, fading out at the edges. */
  background-image:
    linear-gradient(rgba(9, 14, 28, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 14, 28, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: center;
}
.ed-ushow-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(250, 251, 252, 0) 55%, #fafbfc 100%);
}
.ed-ushow-title {
  margin: 0 14px 10px;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ed-blue-dark);
}
.ed-ushow-text { margin: 0 14px; font-size: 14.5px; line-height: 1.58; color: #5c6270; }

/* ---- Illustrations ---- */
.ed-mock {
  position: relative;
  z-index: 1;
  width: 78%;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px -16px rgba(9, 14, 28, 0.28);
}
.ed-mock-head { display: block; margin-bottom: 10px; font-family: var(--ed-ff-display); font-weight: 600; font-size: 15px; color: var(--ed-blue-dark); }
.ed-mock-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 13px;
  color: #4a5160;
}
.ed-mock-row.is-picked {
  margin: 0 -14px 2px -18px;
  padding: 9px 12px;
  background: #fff;
  color: var(--ed-blue-dark);
  font-weight: 600;
  box-shadow: 0 10px 24px -12px rgba(9, 14, 28, 0.35);
}
.ed-mock-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 5px;
  background: var(--tp-theme-primary);
  color: #fff;
}
.ed-mock-price-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.ed-mock-price-top b { font-family: var(--ed-ff-display); font-weight: 600; font-size: 15px; color: var(--ed-blue-dark); }
.ed-mock-price-top em { font-style: normal; font-family: var(--ed-ff-display); font-weight: 700; font-size: 15px; color: var(--ed-blue-dark); }
.ed-mock-line { display: block; height: 7px; margin-bottom: 7px; border-radius: 4px; background: linear-gradient(90deg, #e6e9ef, #f3f5f8); }
.ed-mock-line.is-short { width: 78%; }
.ed-mock-line.is-shorter { width: 56%; }
.ed-mock-btn {
  display: block;
  margin-top: 14px;
  padding: 9px 0;
  border-radius: 8px;
  background: #0d1a2e;
  color: #fff;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
}

.ed-mock-call { position: relative; z-index: 1; width: 80%; }
.ed-mock-call img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 14px; }
.ed-mock-pill {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  width: 104%;
  padding: 7px 8px 7px 7px;
  border-radius: 999px;
  background: #0d1a2e;
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(9, 14, 28, 0.6);
}
.ed-mock-pill > span { flex: 1 1 auto; min-width: 0; line-height: 1.15; }
.ed-mock-pill b { display: block; font-size: 12px; font-weight: 600; }
.ed-mock-pill small { font-size: 10.5px; color: rgba(255, 255, 255, 0.65); }
.ed-mock-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--tp-theme-primary);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}
.ed-mock-dot { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; }
.ed-mock-dot.is-red { background: #e5484d; }
.ed-mock-dot.is-green { background: #30a46c; }

.ed-mock-phone { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
.ed-mock-phone-body {
  display: block;
  width: 108px;
  height: 196px;
  padding: 22px 10px 10px;
  border: 5px solid #0d1a2e;
  border-radius: 22px;
  background: #fff;
  position: relative;
  box-shadow: 0 16px 30px -16px rgba(9, 14, 28, 0.4);
}
.ed-mock-notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 34px; height: 6px; border-radius: 4px; background: #0d1a2e; }
.ed-mock-block { display: block; height: 58px; margin-bottom: 10px; border-radius: 8px; background: linear-gradient(135deg, #dce8ff, #bed4ff); }
.ed-mock-cta { display: block; height: 16px; margin-top: 12px; border-radius: 999px; background: var(--tp-theme-primary); }
.ed-mock-tag {
  position: absolute;
  right: 6%;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px 7px 8px;
  border-radius: 999px;
  background: #fff;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ed-blue-dark);
  box-shadow: 0 10px 24px -12px rgba(9, 14, 28, 0.4);
  white-space: nowrap;
}

@media (max-width: 1199.98px) {
  .ed-ushow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .ed-ushow { padding: 70px 0 66px; }
  .ed-ushow-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 32px; }
  .ed-ushow-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Why-choose: centred heading ---- */
.ed-ushow-head {
  display: block;
  text-align: center;
}
.ed-ushow .ed-sec-title { margin: 0 auto; }
.ed-ushow-intro { margin: 16px auto 0; }

/* ---- Why-choose: looping illustrations ----
   Asked for as GIFs; built as CSS keyframes instead. They loop the same
   way, but stay crisp at any size, cost a few hundred bytes rather than a
   few hundred kilobytes, keep their wording editable in the CMS, and stop
   for visitors who have asked for reduced motion.
   Positioned elements that already use `transform` (the call pill is
   centred with translateX(-50%)) are moved with the separate `translate`
   property, so the loop does not fight the centring. */

/* Checklist: the boxes tick one after another, then reset. */
@keyframes ed-tick {
  0%, 6% { transform: scale(0); opacity: 0; }
  12% { transform: scale(1.2); opacity: 1; }
  16%, 86% { transform: scale(1); opacity: 1; }
  94%, 100% { transform: scale(0); opacity: 0; }
}
.ed-mock-list .ed-mock-check { animation: ed-tick 4.8s ease-out infinite; }
.ed-mock-list .ed-mock-row:nth-child(3) .ed-mock-check { animation-delay: 0.35s; }
.ed-mock-list .ed-mock-row:nth-child(4) .ed-mock-check { animation-delay: 0.7s; }
@keyframes ed-lift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}
.ed-mock-list .ed-mock-row.is-picked { animation: ed-lift 3.2s ease-in-out infinite; }

/* Price card: the placeholder lines shimmer, the button presses. */
@keyframes ed-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
.ed-mock-price .ed-mock-line,
.ed-mock-phone .ed-mock-line {
  background: linear-gradient(90deg, #e6e9ef 0%, #f6f8fb 40%, #e6e9ef 80%);
  background-size: 200% 100%;
  animation: ed-shimmer 1.8s linear infinite;
}
@keyframes ed-press {
  0%, 62%, 74%, 100% { transform: scale(1); }
  68% { transform: scale(0.95); }
}
.ed-mock-price .ed-mock-btn { animation: ed-press 3s ease-in-out infinite; }

/* Call: the answer button rings, the pill bobs. */
@keyframes ed-ring {
  0% { box-shadow: 0 0 0 0 rgba(48, 164, 108, 0.65); }
  100% { box-shadow: 0 0 0 10px rgba(48, 164, 108, 0); }
}
.ed-mock-dot.is-green { animation: ed-ring 1.3s ease-out infinite; }
@keyframes ed-avatar-ring {
  0% { box-shadow: 0 0 0 0 rgba(6, 85, 237, 0.55); }
  100% { box-shadow: 0 0 0 8px rgba(6, 85, 237, 0); }
}
.ed-mock-avatar { animation: ed-avatar-ring 1.3s ease-out infinite 0.65s; }
.ed-mock-pill { animation: ed-lift 2.6s ease-in-out infinite; }

/* Phone: the screen builds itself line by line, the tag pops in, and the
   phone floats. */
@keyframes ed-build {
  0%, 4% { opacity: 0; translate: 0 6px; }
  14%, 86% { opacity: 1; translate: 0 0; }
  96%, 100% { opacity: 0; translate: 0 0; }
}
.ed-mock-phone-body > :nth-child(n + 2) { animation: ed-build 5s ease-out infinite; }
.ed-mock-phone-body > :nth-child(3) { animation-delay: 0.25s; }
.ed-mock-phone-body > :nth-child(4) { animation-delay: 0.4s; }
.ed-mock-phone-body > :nth-child(5) { animation-delay: 0.55s; }
.ed-mock-phone-body > :nth-child(6) { animation-delay: 0.8s; }
/* The shimmer and the build both animate the lines; list both so neither
   overrides the other. */
.ed-mock-phone-body > .ed-mock-line {
  animation: ed-build 5s ease-out infinite, ed-shimmer 1.8s linear infinite;
}
.ed-mock-phone-body > .ed-mock-line:nth-child(4) { animation-delay: 0.4s, 0s; }
.ed-mock-phone-body > .ed-mock-line:nth-child(5) { animation-delay: 0.55s, 0s; }
@keyframes ed-pop {
  0%, 22% { opacity: 0; transform: scale(0.85); }
  30% { opacity: 1; transform: scale(1.05); }
  34%, 86% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(1); }
}
.ed-mock-tag { animation: ed-pop 5s ease-out infinite; }
@keyframes ed-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}
.ed-mock-phone-body { animation: ed-float 4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .ed-ushow-art *,
  .ed-ushow-art *::before,
  .ed-ushow-art *::after {
    animation: none !important;
  }
}

/* ================================================ Feature: tech hub
   Centred heading, opening paragraph and button; the integrations hub;
   then the stack paragraph as its caption and the points as a numbered
   row. After the reference supplied for this section. */
.ed-feature-hub { padding: 104px 0 96px; background: #fff; }
.ed-hubsec-head { max-width: 760px; margin: 0 auto; text-align: center; }
.ed-hubsec-head .ed-sec-title { max-width: none; margin: 0 0 18px; }
.ed-hubsec-lead { margin: 0 auto 28px; max-width: 62ch; font-size: 16.5px; line-height: 1.62; color: #5c6270; }
.ed-hubsec-cta { border-radius: 999px; }

/* ---- The hub ---- */
.ed-hub {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 440;
  margin: 26px 0 8px;
}
.ed-hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ed-hub-line {
  fill: none;
  stroke: url(#ed-hub-fade);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
/* Dots travelling along every other line, inward to the centre. */
.ed-hub-flow {
  fill: none;
  stroke: #0655ed;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 0.6 24;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
.ed-hub-center {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7.8%;
  aspect-ratio: 1;
  min-width: 56px;
  transform: translate(-50%, -50%);
  border-radius: 22%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(6, 85, 237, 0.18), 0 18px 40px -16px rgba(6, 85, 237, 0.55);
}
.ed-hub-center img { width: 62%; height: auto; }
.ed-hub-tool {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.2%;
  aspect-ratio: 1;
  min-width: 40px;
  transform: translate(-50%, -50%);
  border-radius: 24%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(9, 14, 28, 0.06), 0 12px 26px -12px rgba(9, 14, 28, 0.35);
}
.ed-hub-tool img { width: 54%; height: auto; }

/* ---- Motion, only once the hub is on screen (`is-in`) ---- */
@keyframes ed-hub-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ed-hub-stream { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 24.6; } }
@keyframes ed-hub-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(6, 85, 237, 0.18), 0 0 0 0 rgba(6, 85, 237, 0.28), 0 18px 40px -16px rgba(6, 85, 237, 0.55); }
  50% { box-shadow: 0 0 0 1px rgba(6, 85, 237, 0.18), 0 0 0 14px rgba(6, 85, 237, 0), 0 18px 40px -16px rgba(6, 85, 237, 0.55); }
}
@keyframes ed-hub-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
@keyframes ed-hub-in {
  from { opacity: 0; scale: 0.6; }
  to { opacity: 1; scale: 1; }
}
.ed-hub.is-in .ed-hub-line {
  stroke-dasharray: 1;
  animation: ed-hub-draw 1.4s cubic-bezier(0.22, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--i) * 45ms);
}
.ed-hub.is-in .ed-hub-flow {
  opacity: 1;
  transition: opacity 0.6s ease 1.3s;
  /* Staggered per line so the dots never move in lockstep. */
  animation: ed-hub-stream 2.6s linear infinite;
  animation-delay: calc(var(--i) * -0.37s);
}
.ed-hub.is-in .ed-hub-center { animation: ed-hub-glow 2.4s ease-in-out infinite 1.4s; }
.ed-hub.is-in .ed-hub-tool {
  animation:
    ed-hub-in 0.6s cubic-bezier(0.34, 1.4, 0.5, 1) both,
    ed-hub-bob 4s ease-in-out infinite;
  animation-delay: calc(0.5s + var(--n) * 0.12s), calc(var(--n) * -0.7s);
}

/* ---- Content beneath ---- */
.ed-hubsec-caption {
  max-width: 64ch;
  margin: 10px auto 46px;
  text-align: center;
  font-size: 16px;
  line-height: 1.62;
  color: #5c6270;
}
.ed-hubsec-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 28px;
  border-top: 1px solid rgba(9, 14, 28, 0.12);
}
.ed-hubsec-point { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; }
.ed-hubsec-num { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--tp-theme-primary); }
.ed-hubsec-label {
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--ed-blue-dark);
}

@media (max-width: 991.98px) {
  .ed-feature-hub { padding: 72px 0 66px; }
  .ed-hubsec-points { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
}
@media (max-width: 575.98px) {
  /* At phone width the fan flattens to a sliver; give it height. */
  .ed-hub { aspect-ratio: 1200 / 640; }
  .ed-hubsec-points { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ed-hub *, .ed-hub { animation: none !important; transition: none !important; }
  .ed-hub .ed-hub-flow { opacity: 0 !important; }
}

/* Tech hub section on a light blue field. The tiles stay white, so they
   lift off it; the lines fade to transparent at the ends, so they blend
   into any background without a visible edge. */
.ed-feature-hub {
  background: linear-gradient(180deg, #f3f7ff 0%, #e8f0ff 100%);
}

/* ============================================ What We Offer: showcase
   Copy, buttons and stats on the left; the service groups as floating
   cards on a blue panel on the right, joined by dotted guide lines. After
   the reference supplied for this section. */
.ed-offshow { padding: 100px 0; background: #fff; }
.ed-offshow-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 48px 64px;
  align-items: center;
}

/* ---- Left ---- */
.ed-offshow-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  /* Sentence case, like every other eyebrow: no full-caps type. */
  text-transform: none !important;
  color: var(--ed-blue-dark);
}
.ed-offshow-eyebrow::before { content: "✦"; color: var(--tp-theme-primary); font-size: 13px; letter-spacing: 0; }
.ed-offshow .ed-sec-title {
  margin: 0 0 20px;
  font-weight: 600;
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.08;
}
/* The reference's inline pill-icon in the headline: a gradient capsule set
   in front of the emphasised word, which itself stays in ink. */
.ed-offshow .ed-sec-accent { color: inherit; font-weight: inherit; }
.ed-offshow .ed-sec-accent::before {
  content: "";
  display: inline-block;
  width: 0.92em;
  height: 0.62em;
  margin: 0 0.16em 0 0.02em;
  border-radius: 999px;
  vertical-align: 0.06em;
  background: linear-gradient(120deg, #7fb0ff 0%, #0655ed 70%);
  box-shadow: inset 0 -2px 6px rgba(0, 20, 80, 0.25);
}
.ed-offshow-intro { margin: 0 0 30px; max-width: 46ch; font-size: 16px; line-height: 1.62; color: #5c6270; }
.ed-offshow-actions { margin-bottom: 44px; }
.ed-offshow .tp-btn-lg { border-radius: 999px; }
.ed-offshow-primary,
.ed-offshow-primary span { background: #0d1a2e !important; color: #fff !important; }
.ed-offshow-secondary { background: #fff !important; box-shadow: 0 0 0 1px rgba(9, 14, 28, 0.12); }
.ed-offshow-secondary,
.ed-offshow-secondary span { color: var(--ed-blue-dark) !important; }

.ed-offshow-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ed-offshow-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 14px;
  border-left: 3px solid #bed4ff;
}
.ed-offshow-stat-value {
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ed-blue-dark);
}
.ed-offshow-stat-label { font-size: 13px; color: #5c6270; }

/* ---- Right: the panel ---- */
.ed-offshow-panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  padding: 34px 30px 38px;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(420px 320px at 85% 15%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, #3d7ff2 0%, #0655ed 45%, #0a3fa8 100%);
}
/* Dotted guide lines: a frame, a vertical and a horizontal rule, each with
   the dashes slowly travelling. */
.ed-ofs-guide { position: absolute; z-index: 0; pointer-events: none; }
.ed-ofs-guide-frame {
  inset: 9% 10% 12% 8%;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  border-radius: 4px;
}
.ed-ofs-guide-frame::before,
.ed-ofs-guide-frame::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}
.ed-ofs-guide-frame::before { top: -4px; left: -4px; }
.ed-ofs-guide-frame::after { bottom: -4px; right: -4px; }
.ed-ofs-guide-v,
.ed-ofs-guide-h { background-size: 12px 12px; }
.ed-ofs-guide-v {
  top: 0;
  bottom: 0;
  left: 58%;
  width: 1px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.45) 50%, transparent 50%);
  animation: ed-ofs-vdash 1.6s linear infinite;
}
.ed-ofs-guide-h {
  left: 0;
  right: 0;
  top: 54%;
  height: 1px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.45) 50%, transparent 50%);
  animation: ed-ofs-hdash 1.6s linear infinite;
}
@keyframes ed-ofs-vdash { to { background-position: 0 12px; } }
@keyframes ed-ofs-hdash { to { background-position: 12px 0; } }

/* ---- Cards ---- */
.ed-ofs-card {
  position: relative;
  z-index: 1;
  padding: 18px 18px 16px;
  border-radius: 18px;
}
.ed-ofs-glass {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
}
.ed-ofs-white {
  background: #fff;
  color: var(--ed-blue-dark);
  box-shadow: 0 22px 40px -22px rgba(0, 20, 60, 0.55);
}
.ed-ofs-num { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; opacity: 0.75; }
.ed-ofs-title {
  margin: 0 0 12px;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: inherit;
}
.ed-ofs-white .ed-ofs-num { color: var(--tp-theme-primary); opacity: 1; }

/* Placement: three overlapping cards stepping down the panel. */
.ed-ofs-c1 { grid-column: 1 / 8; grid-row: 2; }
.ed-ofs-c2 { grid-column: 5 / 13; grid-row: 3; margin-top: -26px; }
.ed-ofs-c3 { grid-column: 1 / 9; grid-row: 4; margin-top: -18px; }
.ed-ofs-c4, .ed-ofs-c5 { grid-column: 1 / 13; margin-top: 14px; }
.ed-ofs-chip {
  grid-column: 7 / 13;
  grid-row: 1;
  justify-self: end;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 7px 13px;
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: var(--ed-blue-dark);
  box-shadow: 0 12px 26px -14px rgba(0, 20, 60, 0.55);
}
.ed-ofs-chip i { font-style: normal; color: var(--tp-theme-primary); }

/* Frosted list */
.ed-ofs-list { margin: 0; padding: 0; list-style: none; }
.ed-ofs-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
.ed-ofs-list li i { margin-top: 3px; color: #fff; }
.ed-ofs-list a { color: inherit; }

/* Pills with arrow buttons */
.ed-ofs-pills { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ed-ofs-pills li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ed-blue-dark);
}
.ed-ofs-pills li > span,
.ed-ofs-pills li > a { color: inherit; min-width: 0; }
.ed-ofs-pills li i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #0d1a2e;
  color: #fff;
}

/* Tag chips */
.ed-ofs-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ed-ofs-chips li {
  padding: 5px 11px;
  border: 1px solid rgba(9, 14, 28, 0.18);
  border-radius: 999px;
  font-size: 12px;
  color: #3c4250;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ed-ofs-chips a { color: inherit; }

/* ---- Motion ---- */
@keyframes ed-ofs-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}
.ed-ofs-c1 { animation: ed-ofs-bob 5s ease-in-out infinite; }
.ed-ofs-c2 { animation: ed-ofs-bob 5s ease-in-out infinite -1.6s; }
.ed-ofs-c3 { animation: ed-ofs-bob 5s ease-in-out infinite -3.2s; }
.ed-ofs-chip { animation: ed-ofs-bob 4s ease-in-out infinite -0.8s; }
/* The arrow buttons light up one after another, like a cursor moving down
   the list. */
@keyframes ed-ofs-select {
  0%, 30%, 100% { background: #0d1a2e; transform: scale(1); }
  10%, 20% { background: var(--tp-theme-primary); transform: scale(1.18); }
}
.ed-ofs-pills li i { animation: ed-ofs-select 3.6s ease-in-out infinite; }
.ed-ofs-pills li:nth-child(2) i { animation-delay: 1.2s; }
.ed-ofs-pills li:nth-child(3) i { animation-delay: 2.4s; }
/* One chip at a time takes the brand colour. */
@keyframes ed-ofs-chip {
  0%, 30%, 100% { background: transparent; color: #3c4250; border-color: rgba(9, 14, 28, 0.18); }
  8%, 24% { background: var(--tp-theme-primary); color: #fff; border-color: var(--tp-theme-primary); }
}
.ed-ofs-chips li { animation: ed-ofs-chip 4.5s ease-in-out infinite; }
.ed-ofs-chips li:nth-child(2) { animation-delay: 1.5s; }
.ed-ofs-chips li:nth-child(3) { animation-delay: 3s; }
.ed-ofs-chips li:nth-child(n + 4) { animation: none; }

@media (max-width: 991.98px) {
  .ed-offshow { padding: 72px 0; }
  .ed-offshow-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .ed-offshow-panel { padding: 24px 16px 26px; }
  .ed-ofs-c1, .ed-ofs-c2, .ed-ofs-c3 { grid-column: 1 / 13; margin-top: 12px; }
  .ed-ofs-chip { grid-column: 1 / 13; }
  .ed-offshow-stats { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ed-offshow-panel *, .ed-offshow-panel *::before { animation: none !important; }
}

/* ============================================ Case studies: dark
   After the reference supplied for this section: a near-black field with a
   blue glow at the top, a light two-line heading, a card per client with
   its figure in the top-right corner, and a progress strip across the foot. */
.ed-cdark {
  padding: 96px 0 0;
  color: #fff;
  background:
    radial-gradient(60% 55% at 50% -8%, rgba(6, 85, 237, 0.55), rgba(6, 85, 237, 0) 70%),
    #04070e;
}
.ed-cdark-title {
  max-width: 18ch;
  margin: 0 0 40px;
  font-family: var(--ed-ff-display);
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: #fff;
}
.ed-cdark-accent { font-weight: inherit; color: inherit; }

.ed-cdark-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-bottom: 64px;
}
.ed-cdark-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 290px;
  padding: 26px 26px 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.035) 100%);
}
.ed-cdark-fig { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.ed-cdark-value {
  font-family: var(--ed-ff-display);
  font-weight: 300;
  font-size: clamp(44px, 4.6vw, 66px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}
.ed-cdark-caption { margin-top: 8px; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.ed-cdark-client {
  margin: 0 0 4px;
  font-family: var(--ed-ff-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  color: #fff;
}
/* 0.62 white on the card's ~#16191f is 7.4:1. */
.ed-cdark-meta { display: block; margin-bottom: 10px; font-size: 12px; letter-spacing: 0.02em; color: #8fb3ff; }
.ed-cdark-text { margin: 0; max-width: 34ch; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.62); }

/* ---- Progress strip, full width ---- */
.ed-cdark-strip {
  display: flex;
  align-items: stretch;
  min-height: 64px;
}
.ed-cdark-seg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 26px;
  overflow: hidden;
  white-space: nowrap;
}
.ed-cdark-seg span { font-size: 13.5px; }
.ed-cdark-seg b {
  font-family: var(--ed-ff-display);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -0.02em;
}
.ed-cdark-seg1 {
  flex: 0 0 var(--w);
  /* The first label lines up with the container's left edge. */
  padding-left: max(24px, calc((100vw - 1230px) / 2 + 15px));
  background: linear-gradient(90deg, #0a3fa8 0%, #0655ed 100%);
  color: #fff;
}
.ed-cdark-seg2 {
  flex: 0 0 var(--w);
  background: linear-gradient(90deg, #8fb6ff 0%, #d6e5ff 100%);
  color: #0a2a66;
}
.ed-cdark-note {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: max(24px, calc((100vw - 1230px) / 2 + 15px));
  white-space: normal;
  background: #f2f4f8;
  color: #3c4250;
  font-size: 12.5px;
  line-height: 1.45;
}
/* The bars grow in from the left when the strip arrives on screen. They
   only start collapsed once JS has armed them, so without JS the strip is
   simply drawn. */
.ed-cdark-strip.is-armed .ed-cdark-seg1,
.ed-cdark-strip.is-armed .ed-cdark-seg2 {
  flex-basis: 0;
  transition: flex-basis 1.2s cubic-bezier(0.22, 0.7, 0.3, 1);
}
.ed-cdark-strip.is-armed .ed-cdark-seg2 { transition-delay: 0.35s; }
.ed-cdark-strip.is-in .ed-cdark-seg1,
.ed-cdark-strip.is-in .ed-cdark-seg2 { flex-basis: var(--w); }

@media (max-width: 991.98px) {
  .ed-cdark { padding-top: 70px; }
  .ed-cdark-grid { grid-template-columns: minmax(0, 1fr); padding-bottom: 44px; }
  .ed-cdark-card { min-height: 220px; }
  .ed-cdark-strip { flex-direction: column; }
  .ed-cdark-seg,
  .ed-cdark-strip.is-armed .ed-cdark-seg1,
  .ed-cdark-strip.is-armed .ed-cdark-seg2 { flex-basis: auto !important; padding-left: 24px; padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-cdark-strip.is-armed .ed-cdark-seg1,
  .ed-cdark-strip.is-armed .ed-cdark-seg2 { transition: none; flex-basis: var(--w); }
}

/* ============================================ Pricing: photo over blue
   After the reference supplied for this section: a rounded card, a wide
   photo with a round price badge on its corner, and a bright blue panel
   beneath carrying the headline, copy, actions and the points as tags. */
.ed-pban { padding: 96px 0; background: #fff; }
.ed-pban-card {
  border-radius: 28px;
  overflow: hidden;
  background: #0655ed;
  box-shadow: 0 40px 80px -48px rgba(6, 40, 120, 0.55);
}
.ed-pban-media { position: relative; height: clamp(220px, 26vw, 340px); overflow: hidden; }
.ed-pban-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cropped higher so the people sit lower in the frame and the price
     badge lands on the wall above them rather than on someone's head. */
  object-position: center 18%;
  transform: scale(1.06);
  transition: transform 1.6s cubic-bezier(0.22, 0.7, 0.3, 1);
}
.ed-pban-card:hover .ed-pban-media img { transform: scale(1.1); }

/* The round badge — the reference's corner logo, carrying the price. */
.ed-pban-badge {
  position: absolute;
  top: 22px;
  right: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: clamp(116px, 11vw, 148px);
  aspect-ratio: 1;
  padding: 16px;
  border-radius: 50%;
  background: #0d1a2e;
  color: #fff;
  text-align: center;
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.6);
  animation: ed-pban-bob 4.5s ease-in-out infinite;
}
.ed-pban-badge b { font-family: var(--ed-ff-display); font-weight: 700; font-size: clamp(20px, 2vw, 27px); letter-spacing: -0.02em; line-height: 1; }
.ed-pban-badge small { max-width: 13ch; font-size: 10.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.75); }
/* A dashed ring turning slowly round the badge. */
.ed-pban-ring {
  position: absolute;
  inset: -7px;
  border: 1.5px dashed rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  animation: ed-pban-spin 18s linear infinite;
}
@keyframes ed-pban-spin { to { transform: rotate(360deg); } }
@keyframes ed-pban-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* ---- The blue panel ---- */
.ed-pban-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px 56px;
  align-items: center;
  padding: 46px 52px 50px;
  color: #fff;
}
.ed-pban-eyebrow { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.82); }
.ed-pban-title {
  margin: 0 0 16px;
  font-family: var(--ed-ff-display);
  font-weight: 500;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: #fff;
}
.ed-pban-accent { font-weight: inherit; color: inherit; }
/* 0.88 white on #0655ed is 5.2:1. */
.ed-pban-text { margin: 0 0 26px; max-width: 46ch; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); }
.ed-pban .tp-btn-lg { border-radius: 999px; }
.ed-pban-primary,
.ed-pban-primary span { background: #fff !important; color: #0655ed !important; }
.ed-pban-secondary { background: transparent !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.8); }
.ed-pban-secondary,
.ed-pban-secondary span { color: #fff !important; }

/* Points as pill tags; one at a time is filled white. */
.ed-pban-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ed-pban-tags li {
  padding: 10px 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.3;
  color: #fff;
  animation: ed-pban-tag calc(var(--n) * 1.6s) ease-in-out infinite;
  animation-delay: calc(var(--i) * 1.6s);
}
@keyframes ed-pban-tag {
  0%, 26%, 100% { background: transparent; color: #fff; }
  4%, 22% { background: #fff; color: #0655ed; }
}

@media (max-width: 991.98px) {
  .ed-pban { padding: 70px 0; }
  .ed-pban-panel { grid-template-columns: minmax(0, 1fr); padding: 34px 26px 36px; }
  .ed-pban-tags { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-pban-badge, .ed-pban-ring, .ed-pban-tags li { animation: none; }
  .ed-pban-tags li:first-child { background: #fff; color: #0655ed; }
}

/* ---- Pricing banner: full width ----
   The card becomes a full-bleed band: no outer padding, no rounded corners,
   no drop shadow. The panel's content sits in the container, and the price
   badge lines up with the container's right edge rather than the window's. */
.ed-pban { padding: 0; }
.ed-pban-card { border-radius: 0; box-shadow: none; }
.ed-pban-media { height: clamp(260px, 30vw, 440px); }
.ed-pban-badge {
  top: 28px;
  right: max(22px, calc((100vw - 1230px) / 2 + 15px));
}
.ed-pban-panel {
  display: block;
  padding: 60px 0 66px;
}
.ed-pban-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px 56px;
  align-items: center;
}
@media (max-width: 991.98px) {
  .ed-pban-panel { padding: 40px 0 44px; }
  .ed-pban-inner { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Service hero — stage layout
   After the reference supplied for the hero: a dark blue field with fluted
   glass columns rising from the foot, a centred headline and one button,
   then a row of floating cards — stats either side of a small quote form.
   ========================================================================== */
.ed-hstage {
  position: relative;
  overflow: hidden;
  padding: 136px 0 84px;
  background: var(--ed-blue-dark);
  color: #fff;
}
.ed-hstage > .container { position: relative; }
.ed-hstage-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 58% at 50% 104%, rgba(6, 85, 237, 0.95), rgba(6, 85, 237, 0) 72%),
    radial-gradient(46% 34% at 50% -4%, rgba(6, 85, 237, 0.4), rgba(6, 85, 237, 0) 70%),
    var(--ed-blue-dark);
}
/* The fluted glass: one bright edge and a soft body per column, faded in
   from the middle of the section so the headline sits on clean dark. */
.ed-hstage-bg::before,
.ed-hstage-bg::after {
  content: "";
  position: absolute;
  inset: 28% 0 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 62%);
  mask-image: linear-gradient(to bottom, transparent, #000 62%);
}
.ed-hstage-bg::before {
  background: repeating-linear-gradient(
    90deg,
    rgba(61, 127, 242, 0) 0,
    rgba(61, 127, 242, 0.16) 34px,
    rgba(255, 255, 255, 0.26) 36px,
    rgba(61, 127, 242, 0) 37px,
    rgba(61, 127, 242, 0) 52px
  );
}
/* A slow sweep of light across the columns. */
.ed-hstage-bg::after {
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.14) 46%, transparent 62%);
  background-size: 260% 100%;
  animation: ed-hstage-sweep 9s ease-in-out infinite;
}
@keyframes ed-hstage-sweep {
  0% { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}

.ed-hstage-head {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.ed-hstage-eyebrow {
  display: inline-block;
  margin-bottom: 24px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.86);
}
.ed-hstage-titlewrap { position: relative; }
.ed-hstage-title {
  margin: 0;
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: clamp(36px, 4.9vw, 66px);
  line-height: 1.07;
  letter-spacing: -0.025em;
  color: #fff;
}
.ed-hstage-mark { color: var(--ed-blue-light); font-weight: inherit; }
.ed-hstage-chips {
  display: inline-flex;
  margin-left: 14px;
  vertical-align: 0.12em;
}
.ed-hstage-chips i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 3px solid var(--ed-blue-dark);
  border-radius: 50%;
}
.ed-hstage-chip-a { background: var(--tp-theme-primary); color: #fff; }
.ed-hstage-chip-b { margin-left: -12px; background: #fff; color: var(--tp-theme-primary); }

/* The dashed ring round the headline's first word, with a pointer riding it. */
.ed-hstage-orbit {
  position: absolute;
  top: -34px;
  left: -10px;
  width: 150px;
  height: 150px;
  pointer-events: none;
  animation: ed-hstage-spin 22s linear infinite;
}
.ed-hstage-orbit svg { width: 100%; height: 100%; overflow: visible; }
.ed-hstage-orbit circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1.2;
  stroke-dasharray: 3 6;
  vector-effect: non-scaling-stroke;
}
.ed-hstage-orbit i {
  position: absolute;
  bottom: 6px;
  left: 14px;
  color: #fff;
  line-height: 0;
  transform: rotate(-20deg);
}
@keyframes ed-hstage-spin { to { transform: rotate(360deg); } }

.ed-hstage-intro {
  max-width: 660px;
  margin: 24px auto 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.74);
}
.ed-hstage-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 7px 7px 7px 28px;
  border-radius: 50px;
  background: var(--tp-theme-primary);
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  box-shadow:
    0 0 0 6px rgba(6, 85, 237, 0.24),
    0 20px 44px -12px rgba(6, 85, 237, 0.85);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.ed-hstage-cta:hover { background: var(--ed-blue-deep); color: #fff; }
.ed-hstage-cta-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--tp-theme-primary);
  transition: translate 0.25s ease;
}
.ed-hstage-cta:hover .ed-hstage-cta-icon { translate: 4px 0; }

.ed-hstage-rocket {
  position: absolute;
  top: -24px;
  right: 4%;
  z-index: 1;
  width: 96px;
  filter: drop-shadow(0 18px 30px rgba(6, 85, 237, 0.55));
  animation: ed-hstage-bob 5s ease-in-out infinite;
}
.ed-hstage-rocket svg { display: block; width: 100%; height: auto; }
.ed-hstage-flame { transform-origin: 26px 40px; animation: ed-hstage-flame 0.6s ease-in-out infinite alternate; }
@keyframes ed-hstage-flame { to { transform: scale(0.75); opacity: 0.7; } }
@keyframes ed-hstage-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

/* ---- The stage: side cards, the form, tags ---- */
.ed-hstage-stage {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 410px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: 50px;
}
.ed-hstage-side { display: flex; flex-direction: column; gap: 18px; }
.ed-hstage-left { align-items: flex-start; }
.ed-hstage-right { align-items: flex-end; }
.ed-hstage-card { animation: ed-hstage-bob 6s ease-in-out infinite; }

.ed-hstage-points {
  position: relative;
  width: min(100%, 310px);
  padding: 24px 24px 22px;
  border-radius: 24px;
  background: linear-gradient(160deg, #fff, #eaf1ff);
  color: var(--ed-blue-dark);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.12),
    0 34px 60px -22px rgba(0, 0, 0, 0.55);
}
.ed-hstage-points-label {
  display: block;
  max-width: 70%;
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
}
.ed-hstage-points-value {
  display: block;
  margin: 12px 0 18px;
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tp-theme-primary);
}
.ed-hstage-points-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(5, 20, 46, 0.08);
  font-size: 13px;
  line-height: 1.3;
  color: #5b6577;
}
.ed-hstage-points-row b,
.ed-hstage-mini b {
  display: block;
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--ed-blue-dark);
}
.ed-hstage-dot {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tp-theme-primary);
}
.ed-hstage-dot-icon { width: 16px; height: 16px; fill: #fff; }
.ed-hstage-spark { position: absolute; fill: var(--tp-theme-primary); }
.ed-hstage-spark-a {
  top: 16px;
  right: 18px;
  width: 38px;
  fill: var(--ed-blue-light);
  opacity: 0.85;
  animation: ed-hstage-twinkle 3.2s ease-in-out infinite;
}
.ed-hstage-spark-b {
  top: 12px;
  right: 58px;
  width: 16px;
  animation: ed-hstage-twinkle 3.2s ease-in-out 1.2s infinite;
}
@keyframes ed-hstage-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(0.7) rotate(45deg); }
}

.ed-hstage-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 250px);
  padding: 12px 20px 12px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 12.5px;
  line-height: 1.3;
  color: #5b6577;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.1),
    0 24px 44px -18px rgba(0, 0, 0, 0.5);
}
.ed-hstage-mini-2 { margin-left: 64px; animation-delay: -2s; }
.ed-hstage-mini-1 { animation-delay: -1s; }
.ed-hstage-mini-dot {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tp-theme-primary);
}
.ed-hstage-mini-2 .ed-hstage-mini-dot {
  background: var(--ed-blue-dark);
  box-shadow: inset 0 0 0 5px var(--ed-blue-light);
}

/* The form card, styled as the reference's tall centre panel. */
.ed-hstage-mid { position: relative; margin-top: 28px; }
.ed-hstage-phone {
  padding: 18px 18px 18px;
  border-radius: 34px;
  background: linear-gradient(180deg, #eef3ff, #fff 36%);
  color: var(--ed-blue-dark);
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.12),
    0 50px 90px -24px rgba(0, 0, 0, 0.6);
}
.ed-hstage-formpill {
  display: table;
  margin: 2px auto 12px;
  padding: 9px 20px;
  border-radius: 40px;
  background: #fff;
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: var(--ed-blue-dark);
  box-shadow: 0 8px 22px -8px rgba(6, 85, 237, 0.35);
}
.ed-quote-compact {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.ed-quote-compact::before { display: none; }
.ed-quote-compact .ed-quote-note {
  margin-bottom: 14px;
  text-align: center;
  font-size: 13.5px;
}
.ed-quote-compact .ed-quote-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.ed-quote-compact .ed-quote-field { margin-bottom: 10px; }
.ed-quote-compact .ed-quote-field label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ed-quote-compact .ed-quote-field input,
.ed-quote-compact .ed-quote-field textarea {
  padding: 12px 15px;
  border-color: rgba(5, 20, 46, 0.12);
  border-radius: 14px;
  font-size: 14.5px;
}
.ed-quote-compact .ed-quote-field input::placeholder,
.ed-quote-compact .ed-quote-field textarea::placeholder { color: #6b7385; }
.ed-quote-compact .ed-quote-field textarea { min-height: 66px; resize: none; }
.ed-quote-compact .ed-quote-submit { margin-top: 2px; }
.ed-hstage-photo {
  height: 150px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 22px;
}
.ed-hstage-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

.ed-hstage-rating {
  position: absolute;
  right: -92px;
  bottom: 120px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ed-blue-dark);
  box-shadow: 0 22px 40px -16px rgba(0, 0, 0, 0.55);
  animation: ed-hstage-bob 5.5s ease-in-out -1.5s infinite;
}
.ed-hstage-rating b {
  display: block;
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.25;
}
.ed-hstage-rating small { display: block; font-size: 11.5px; color: #5b6577; }
.ed-hstage-stars { display: flex; }
.ed-hstage-stars i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--tp-theme-primary);
  font-style: normal;
  font-size: 12px;
  color: #fff;
}
.ed-hstage-stars i + i { margin-left: -9px; }
.ed-hstage-stars i:nth-child(2) { background: var(--ed-blue-dark); }
.ed-hstage-stars i:nth-child(3) { background: var(--ed-blue-light); }

/* The blue glass card. */
.ed-hstage-deal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(100%, 310px);
  min-height: 268px;
  overflow: hidden;
  padding: 22px 24px 24px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(6, 85, 237, 0.62), rgba(6, 85, 237, 0.16));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 60px rgba(6, 85, 237, 0.5);
  animation-delay: -3s;
}
.ed-hstage-deal-pill {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  color: #fff;
}
.ed-hstage-deal-value {
  margin-top: 26px;
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ed-hstage-deal-sub {
  margin-top: 10px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.84);
}
.ed-hstage-deal-sub b { color: #fff; }
.ed-hstage-deal-arc {
  position: absolute;
  right: -46px;
  bottom: -40px;
  width: 170px;
  height: 170px;
  border: 1.5px dashed rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  animation: ed-hstage-spin 26s linear infinite;
}
.ed-hstage-deal-go {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: auto;
  border-radius: 50%;
  background: #fff;
  color: var(--ed-blue-dark);
  transition: translate 0.25s ease;
}
.ed-hstage-deal-go:hover { translate: 4px 0; color: var(--tp-theme-primary); }

.ed-hstage-tag {
  position: absolute;
  padding: 11px 24px;
  border-radius: 40px;
  background: #e6eeff;
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--ed-blue-dark);
  white-space: nowrap;
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.5);
}
.ed-hstage-tag-1 { left: -70px; bottom: 6px; rotate: -14deg; }
.ed-hstage-tag-2 { right: -60px; bottom: 50px; rotate: 16deg; }

/* The pale floor the centre card stands on, widening to meet the white
   section below. */
.ed-hstage-floor {
  position: absolute;
  /* -1px: the clipped edge antialiases, and would leave a dark hairline
     against the white section below. */
  inset: auto 0 -1px;
  z-index: 1;
  height: 121px;
  background: linear-gradient(180deg, #dfe9ff, #fff);
  clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
}

@media (max-width: 1199.98px) {
  .ed-hstage-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 380px) minmax(0, 1fr); gap: 26px; }
  .ed-hstage-rating { right: -56px; }
  .ed-hstage-mini-2 { margin-left: 30px; }
  .ed-hstage-orbit { display: none; }
}
@media (max-width: 991.98px) {
  .ed-hstage { padding: 128px 0 56px; }
  .ed-hstage-stage {
    grid-template-columns: minmax(0, 1fr);
    max-width: 440px;
    margin: 44px auto 0;
  }
  .ed-hstage-mid { order: -1; margin-top: 0; }
  .ed-hstage-left,
  .ed-hstage-right { align-items: stretch; }
  .ed-hstage-points,
  .ed-hstage-mini,
  .ed-hstage-deal { width: 100%; }
  .ed-hstage-mini-2 { margin-left: 0; }
  .ed-hstage-deal { min-height: 0; }
  .ed-hstage-deal-go { margin-top: 22px; }
  .ed-hstage-rating {
    position: relative;
    right: auto;
    bottom: auto;
    width: max-content;
    max-width: 100%;
    margin: 16px auto 0;
  }
  .ed-hstage-rocket,
  .ed-hstage-tag { display: none; }
  .ed-hstage-floor { height: 60px; }
  .ed-hstage-chips i { width: 32px; height: 32px; }
  .ed-hstage-chips svg { width: 13px; height: 13px; }
}
@media (max-width: 575.98px) {
  .ed-quote-compact .ed-quote-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ed-hstage-phone { padding: 14px; border-radius: 28px; }
  /* Stacked, the hero runs long; the photo is the one card that carries
     no information, and the two small stats fit side by side. */
  .ed-hstage-photo { display: none; }
  .ed-hstage-left { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .ed-hstage-points { grid-column: 1 / -1; }
  .ed-hstage-mini { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
  .ed-hstage-mini-dot { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-hstage-bg::after,
  .ed-hstage-orbit,
  .ed-hstage-rocket,
  .ed-hstage-flame,
  .ed-hstage-card,
  .ed-hstage-spark,
  .ed-hstage-rating,
  .ed-hstage-deal-arc { animation: none; }
}

/* ==========================================================================
   Process — pinned horizontal rail
   Pinned under the header, the stages run sideways along one timeline line
   as the page scrolls. Unpinned (no GSAP) it is a swipeable strip; on a
   phone the stages stack down a vertical line.
   ========================================================================== */
.ed-hsteps {
  --ed-gutter: max(15px, calc((100vw - 1230px) / 2 + 15px));
  --ed-hcard: clamp(340px, 40vw, 580px);
  padding: 110px 0 100px;
}
.ed-hsteps.is-pinned {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  min-height: 680px;
  padding: var(--ed-pin-top, 83px) 0 0;
}
.ed-hsteps > .ed-hsteps-viewport { position: relative; z-index: 1; }

.ed-hsteps-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 72px;
}
.ed-hsteps-head .ed-sec-title { margin-bottom: 0; }
.ed-hsteps-head .ed-steps-intro { max-width: 460px; margin: 18px 0 0; }
.ed-hsteps-meta {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.ed-hsteps-count {
  font-family: var(--tp-ff-heading);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.55);
}
.ed-hsteps-count b { font-size: 40px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.ed-hsteps-bar {
  position: relative;
  width: 200px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
}
.ed-hsteps-bar i {
  position: absolute;
  inset: 0;
  background: var(--ed-blue-light);
  transform: scaleX(1);
  transform-origin: left;
}
/* Only meaningful while pinned; unpinned the counter has nothing to count. */
.ed-hsteps:not(.is-pinned) .ed-hsteps-meta { display: none; }
.ed-hsteps.is-pinned .ed-hsteps-bar i { transform: scaleX(0); }

.ed-hsteps-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--ed-gutter);
  scrollbar-width: none;
}
.ed-hsteps-viewport::-webkit-scrollbar { display: none; }
/* Snap off while pinned: with it on, the browser keeps pulling the hidden
   scroll offset to the first card, which shifts the whole row sideways. */
.ed-hsteps.is-pinned .ed-hsteps-viewport { overflow: hidden; scroll-snap-type: none; }
.ed-hsteps-track {
  position: relative;
  width: max-content;
  padding: 0 var(--ed-gutter);
  will-change: transform;
}
.ed-hsteps-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The timeline: first node to last node, so the fill reaches node i at
   exactly i / (stages - 1) of the scroll — when that stage lights up. */
.ed-hsteps-line {
  position: absolute;
  top: 9px;
  right: calc(var(--ed-gutter) + var(--ed-hcard) - 10px);
  left: calc(var(--ed-gutter) + 9px);
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.ed-hsteps-fill {
  position: absolute;
  inset: -0.5px 0;
  background: linear-gradient(90deg, var(--tp-theme-primary), var(--ed-blue-light));
  transform-origin: left;
}
.ed-hsteps.is-pinned .ed-hsteps-fill { transform: scaleX(0); }

.ed-hsteps-card {
  position: relative;
  flex: none;
  width: var(--ed-hcard);
  padding: 50px 80px 0 0;
  scroll-snap-align: start;
  transition: opacity 0.5s ease;
}
.ed-hsteps.is-pinned .ed-hsteps-card { opacity: 0.38; }
.ed-hsteps.is-pinned .ed-hsteps-card.is-active { opacity: 1; }
.ed-hsteps-node {
  position: absolute;
  top: 0;
  left: 0;
  width: 19px;
  height: 19px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: #0b1b33;
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.ed-hsteps-card.is-active .ed-hsteps-node,
.ed-hsteps:not(.is-pinned) .ed-hsteps-node {
  border-color: var(--ed-blue-light);
  background: var(--tp-theme-primary);
  box-shadow: 0 0 0 7px rgba(6, 85, 237, 0.25);
}
/* Stages the line has already passed: filled, without the halo. */
.ed-hsteps-card.is-done .ed-hsteps-node {
  border-color: var(--ed-blue-light);
  background: var(--tp-theme-primary);
}
.ed-hsteps-num {
  display: block;
  margin-bottom: 26px;
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: clamp(84px, 8.4vw, 136px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
  transition: color 0.5s ease, -webkit-text-stroke-color 0.5s ease;
}
.ed-hsteps-card.is-active .ed-hsteps-num {
  color: var(--ed-blue-300);
  -webkit-text-stroke-color: transparent;
}
.ed-hsteps-title {
  margin: 0 0 14px;
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: clamp(28px, 2.5vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}
.ed-hsteps-text {
  max-width: 400px;
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
}

@media (max-width: 991.98px) {
  .ed-hsteps { padding: 80px 0 70px; }
  .ed-hsteps-head { display: block; margin-bottom: 44px; }
  .ed-hsteps-viewport { overflow: visible; }
  .ed-hsteps-track { width: auto; padding: 0 15px; }
  .ed-hsteps-list { flex-direction: column; gap: 40px; }
  .ed-hsteps-line {
    top: 0;
    right: auto;
    bottom: 0;
    left: 24px;
    width: 1px;
    height: auto;
  }
  .ed-hsteps-card { width: auto; padding: 0 0 0 46px; }
  .ed-hsteps-node { left: 0; }
  .ed-hsteps-num { margin-bottom: 14px; font-size: 64px; }
  .ed-hsteps-title { font-size: 26px; }
}

/* ==========================================================================
   Testimonials — quote card and client picker
   The score sits with the heading; the quote gets a white card on a pale
   blue field, with its author and the arrows along the card's foot; the
   other clients are the picker beside it.
   ========================================================================== */
.ed-tq-section {
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(6, 85, 237, 0.07), rgba(6, 85, 237, 0) 70%),
    #f6f9ff;
}
.ed-tq-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
  margin-bottom: 52px;
}
.ed-tq-head .ed-sec-title { max-width: 18ch; margin-bottom: 0; }
.ed-tq-head .ed-sec-intro { max-width: 52ch; margin-top: 14px; }
.ed-tq-score {
  display: flex;
  flex: none;
  align-items: center;
  gap: 16px;
  padding: 16px 24px 16px 20px;
  border: 1px solid rgba(6, 85, 237, 0.1);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 40px -26px rgba(6, 85, 237, 0.35);
}
.ed-tq-score-value {
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ed-blue-dark);
}
.ed-tq-score-stars { display: flex; gap: 3px; color: var(--tp-theme-primary); }
.ed-tq-score-note { display: block; margin-top: 6px; font-size: 14px; color: var(--ed-body); }

.ed-tq {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}
.ed-tq-single { grid-template-columns: minmax(0, 1fr); }

.ed-tq-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 44px 48px 34px;
  border: 1px solid rgba(6, 85, 237, 0.08);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 60px -36px rgba(5, 20, 46, 0.28);
}
.ed-tq-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 26px;
  border-radius: 16px;
  background: var(--tp-theme-primary);
  color: #fff;
  box-shadow: 0 12px 26px -10px rgba(6, 85, 237, 0.7);
}
.ed-tq-quote {
  flex: 1 1 auto;
  margin: 0 0 32px;
  font-family: var(--ed-ff-display);
  font-weight: 500;
  font-size: clamp(19px, 1.75vw, 25px);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--ed-blue-dark);
  animation: ed-tq-in 0.5s ease both;
}
@keyframes ed-tq-in {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
.ed-tq-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(5, 20, 46, 0.08);
}
.ed-tq-by { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ed-tq-avatar,
.ed-tq-pick-avatar {
  display: grid;
  flex: none;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-style: normal;
}
.ed-tq-avatar i,
.ed-tq-pick-avatar i { font-style: normal; }
.ed-tq-avatar img,
.ed-tq-pick-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ed-tq-avatar {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--tp-theme-primary), var(--ed-blue-light));
  font-size: 16px;
  color: #fff;
}
.ed-tq-name {
  display: block;
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ed-blue-dark);
}
.ed-tq-role { display: block; margin-top: 2px; font-size: 14px; color: var(--ed-body); }
.ed-tq-nav { display: flex; align-items: center; gap: 10px; }
.ed-tq-count {
  margin-right: 6px;
  font-family: var(--ed-ff-display);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ed-body);
}
.ed-tq-count b { color: var(--ed-blue-dark); }
.ed-tq-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(5, 20, 46, 0.12);
  border-radius: 50%;
  background: #fff;
  color: var(--ed-blue-dark);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ed-tq-arrow:hover {
  border-color: var(--tp-theme-primary);
  background: var(--tp-theme-primary);
  color: #fff;
}
.ed-tq-arrow:focus-visible,
.ed-tq-pick:focus-visible {
  outline: 2px solid var(--tp-theme-primary);
  outline-offset: 2px;
}

.ed-tq-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ed-tq-pick {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* The active row's bar grows in from the top. */
.ed-tq-pick::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tp-theme-primary);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}
.ed-tq-pick:hover { background: #fff; }
.ed-tq-pick.is-active {
  border-color: rgba(6, 85, 237, 0.1);
  background: #fff;
  box-shadow: 0 18px 36px -24px rgba(5, 20, 46, 0.3);
}
.ed-tq-pick.is-active::before { transform: scaleY(1); }
.ed-tq-pick-avatar {
  width: 44px;
  height: 44px;
  background: var(--ed-blue-100);
  font-size: 14px;
  color: var(--tp-theme-primary);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.ed-tq-pick.is-active .ed-tq-pick-avatar { background: var(--tp-theme-primary); color: #fff; }
.ed-tq-pick-text { min-width: 0; }
.ed-tq-pick-name {
  display: block;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ed-blue-dark);
}
.ed-tq-pick-role {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  font-size: 13px;
  color: var(--ed-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .ed-tq-head { flex-direction: column; align-items: flex-start; margin-bottom: 36px; }
  .ed-tq { grid-template-columns: minmax(0, 1fr); }
  .ed-tq-picker {
    flex-direction: row;
    order: -1;
    margin: 0 -15px;
    padding: 0 15px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ed-tq-picker::-webkit-scrollbar { display: none; }
  .ed-tq-pick { flex: 0 0 auto; width: auto; padding: 10px 16px 10px 10px; border-radius: 40px; }
  .ed-tq-pick::before { display: none; }
  .ed-tq-pick-role { display: none; }
  .ed-tq-pick-avatar { width: 34px; height: 34px; font-size: 12px; }
}
@media (max-width: 575.98px) {
  .ed-tq-card { padding: 30px 24px 24px; border-radius: 22px; }
  .ed-tq-score { padding: 12px 18px 12px 16px; }
  .ed-tq-score-value { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-tq-quote { animation: none; }
}

/* ==========================================================================
   FAQ — card layout
   After the reference supplied for the section: heading top left with a
   dark help card at the foot of the column, each question in its own card
   on the right. The open card lifts to white with a blue × on its icon.
   ========================================================================== */
.ed-faqx { padding: 120px 0; background: #fff; }
.ed-faqx-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 40px 72px;
  align-items: stretch;
}
/* The help card sits at the foot of the column, level with the last
   question, as in the reference. */
.ed-faqx-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.ed-faqx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--tp-theme-primary);
}
.ed-faqx-title { max-width: 14ch; margin: 0; }

.ed-faqx-help {
  position: relative;
  overflow: hidden;
  max-width: 420px;
  padding: 38px 36px 36px;
  border-radius: 24px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(6, 85, 237, 0.55), rgba(6, 85, 237, 0) 60%),
    var(--ed-blue-dark);
  color: #fff;
}
.ed-faqx-help-title {
  margin: 0 0 10px;
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}
.ed-faqx-help-text {
  max-width: 30ch;
  margin: 0 0 32px;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
}
.ed-faqx-cta { display: inline-flex; align-items: center; gap: 6px; }
.ed-faqx-cta-label {
  padding: 13px 26px;
  border-radius: 40px;
  background: var(--tp-theme-primary);
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  transition: background-color 0.2s ease;
}
.ed-faqx-cta-go {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ed-blue-300);
  color: var(--ed-blue-dark);
  transition: translate 0.25s ease;
}
.ed-faqx-cta:hover .ed-faqx-cta-label { background: var(--ed-blue-deep); }
.ed-faqx-cta:hover .ed-faqx-cta-go { translate: 4px 0; }
.ed-faqx-cta:focus-visible { outline: 2px solid var(--ed-blue-300); outline-offset: 4px; border-radius: 40px; }

.ed-faqx-list { display: flex; flex-direction: column; gap: 12px; }
.ed-faqx-item {
  border: 1px solid transparent;
  border-radius: 20px;
  background: #f4f7fd;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.ed-faqx-item:hover { background: #eef3fc; }
.ed-faqx-item.is-open {
  border-color: rgba(6, 85, 237, 0.12);
  background: #fff;
  box-shadow: 0 24px 48px -30px rgba(5, 20, 46, 0.3);
}
.ed-faqx-q { margin: 0; }
.ed-faqx-q button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 24px 22px 28px;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.35;
  color: var(--ed-blue-dark);
  cursor: pointer;
}
.ed-faqx-q button:focus-visible { outline: 2px solid var(--tp-theme-primary); outline-offset: -2px; border-radius: 20px; }
.ed-faqx-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(5, 20, 46, 0.14);
  border-radius: 50%;
  background: #fff;
  color: var(--ed-blue-dark);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, rotate 0.35s ease;
}
.ed-faqx-item.is-open .ed-faqx-icon {
  border-color: var(--tp-theme-primary);
  background: var(--tp-theme-primary);
  color: #fff;
  rotate: 45deg;
}
.ed-faqx-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.ed-faqx-item.is-open .ed-faqx-a { grid-template-rows: 1fr; }
.ed-faqx-a-inner { overflow: hidden; }
.ed-faqx-a p {
  max-width: 62ch;
  margin: 0;
  padding: 0 28px 26px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ed-body);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ed-faqx-item.is-open .ed-faqx-a p { opacity: 1; transition-delay: 0.08s; }

@media (max-width: 991.98px) {
  .ed-faqx { padding: 80px 0; }
  .ed-faqx-grid { grid-template-columns: minmax(0, 1fr); }
  .ed-faqx-side { display: contents; }
  /* Stacked: heading, questions, then the help card last. */
  .ed-faqx-side > div:first-child { order: 0; }
  .ed-faqx-list { order: 1; }
  .ed-faqx-help { order: 2; max-width: none; }
  .ed-faqx-title { max-width: none; }
}
@media (max-width: 575.98px) {
  .ed-faqx-q button { padding: 18px 16px 18px 20px; font-size: 16px; }
  .ed-faqx-a p { padding: 0 20px 22px; }
  .ed-faqx-help { padding: 30px 24px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-faqx-a,
  .ed-faqx-a p,
  .ed-faqx-icon { transition: none; }
}

/* ==========================================================================
   Areas we service — city tiles
   Heading left; the cities as a grid of tiles on a pale blue field with a
   faded dot pattern behind them. Each pin pulses in turn. Tiles with a page
   behind them lift and turn blue on hover and carry an arrow.
   ========================================================================== */
.ed-areas {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background:
    radial-gradient(50% 80% at 100% 50%, rgba(6, 85, 237, 0.08), rgba(6, 85, 237, 0) 70%),
    #f6f9ff;
}
.ed-areas::before {
  content: "";
  position: absolute;
  inset: 0 0 0 40%;
  background-image: radial-gradient(circle, rgba(6, 85, 237, 0.22) 1.2px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 70% at 60% 50%, #000, transparent 75%);
  mask-image: radial-gradient(60% 70% at 60% 50%, #000, transparent 75%);
  pointer-events: none;
}
.ed-areas > .container { position: relative; }
.ed-areas-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 40px 72px;
  align-items: center;
}
.ed-areas-intro { max-width: 40ch; margin-top: 18px; }

.ed-areas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ed-atile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 34px;
  min-height: 150px;
  padding: 20px 22px 22px;
  border: 1px solid rgba(6, 85, 237, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 40px -32px rgba(5, 20, 46, 0.35);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, translate 0.3s ease;
}
.ed-atile-top { display: flex; align-items: center; justify-content: space-between; }
.ed-atile-pin {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(6, 85, 237, 0.1);
  color: var(--tp-theme-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}
/* The pulse: a ring that swells and fades, each tile a beat after the last. */
.ed-atile-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--tp-theme-primary);
  border-radius: 50%;
  opacity: 0;
  animation: ed-atile-ping 2.7s ease-out var(--d, 0s) infinite;
}
@keyframes ed-atile-ping {
  0% { opacity: 0.6; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.7); }
}
.ed-atile-num {
  font-family: var(--ed-ff-display);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: #8a93a3;
  transition: color 0.3s ease;
}
.ed-atile-name {
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ed-blue-dark);
  transition: color 0.3s ease;
}
.ed-atile-go {
  position: absolute;
  right: 20px;
  bottom: 22px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ed-blue-100);
  color: var(--tp-theme-primary);
  transition: background-color 0.3s ease, color 0.3s ease, rotate 0.3s ease;
}
.ed-atile:hover {
  border-color: rgba(6, 85, 237, 0.2);
  background: #fff;
  box-shadow: 0 26px 48px -28px rgba(6, 85, 237, 0.45);
  translate: 0 -4px;
}
.ed-atile.is-link:hover {
  border-color: var(--tp-theme-primary);
  background: var(--tp-theme-primary);
}
.ed-atile.is-link:hover .ed-atile-name,
.ed-atile.is-link:hover .ed-atile-num { color: #fff; }
.ed-atile.is-link:hover .ed-atile-pin { background: rgba(255, 255, 255, 0.18); color: #fff; }
.ed-atile.is-link:hover .ed-atile-pin::after { border-color: #fff; }
.ed-atile.is-link:hover .ed-atile-go { background: #fff; rotate: 45deg; }
.ed-atile.is-link:focus-visible { outline: 2px solid var(--tp-theme-primary); outline-offset: 3px; }

@media (max-width: 991.98px) {
  .ed-areas { padding: 80px 0; }
  .ed-areas::before { inset: 30% 0 0; }
  .ed-areas-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 575.98px) {
  .ed-areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ed-atile { min-height: 120px; gap: 24px; padding: 16px 16px 18px; border-radius: 18px; }
  .ed-atile-name { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-atile-pin::after { animation: none; }
  .ed-atile:hover { translate: none; }
}

/* ==========================================================================
   Quote panel — blue half with the build animation, form on white
   After the split sign-up reference: full-bleed halves, the illustration
   and heading centred on the blue, the form centred on the white.
   ========================================================================== */
.ed-qpanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 780px;
  background: #fff;
}
.ed-qpanel-left {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px 48px 64px;
  background:
    radial-gradient(70% 60% at 30% 20%, rgba(61, 127, 242, 0.55), rgba(61, 127, 242, 0) 70%),
    var(--tp-theme-primary);
  color: #fff;
}
.ed-qpanel-dots {
  position: absolute;
  bottom: 28px;
  left: 28px;
  width: 120px;
  height: 90px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 1.5px, transparent 1.7px);
  background-size: 15px 15px;
}
.ed-qpanel-dashes {
  position: absolute;
  top: 0;
  right: 48px;
  width: 26px;
  height: 90px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0 12px, transparent 12px 20px) left / 3px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0 12px, transparent 12px 20px) right / 3px 100% no-repeat;
}

/* ---- The build scene ---- */
.ed-build { position: relative; z-index: 1; width: min(100%, 520px); text-align: center; }
.ed-build-art { position: relative; height: 360px; margin-bottom: 44px; }
.ed-build-sq {
  position: absolute;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  animation: ed-build-float 7s ease-in-out infinite;
}
.ed-build-sq-a { top: 6px; left: -6px; width: 54px; height: 54px; background: rgba(255, 255, 255, 0.1); }
.ed-build-sq-b { top: 34px; left: 26px; width: 44px; height: 44px; animation-delay: -3s; }
@keyframes ed-build-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.ed-build-browser {
  position: absolute;
  top: 34px;
  left: 50%;
  width: 330px;
  height: 260px;
  margin-left: -165px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 40px 70px -30px rgba(5, 20, 46, 0.6);
  text-align: left;
}
.ed-build-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid #eef1f6;
}
.ed-build-bar > i { width: 8px; height: 8px; border-radius: 50%; background: #e2e7f0; }
.ed-build-url {
  position: relative;
  flex: 1;
  height: 14px;
  margin-left: 8px;
  overflow: hidden;
  border-radius: 7px;
  background: #f1f4f9;
}
.ed-build-url::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgba(6, 85, 237, 0.16);
  transition: width 0.9s ease;
}
.ed-build.ge-2 .ed-build-url::before { width: 100%; }
.ed-build-live {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tp-theme-primary);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ed-build.ge-3 .ed-build-live { opacity: 1; animation: ed-build-blink 1.2s ease-in-out infinite; }
@keyframes ed-build-blink { 50% { opacity: 0.25; } }

.ed-build-page { padding: 14px 16px; }
/* Every page part starts as a dashed wireframe outline and fills in. */
.ed-build-page b,
.ed-build-page em,
.ed-build-page span > span,
.ed-build-hero > span,
.ed-build-cols > span {
  display: block;
  border: 1.5px dashed #c7d2e6;
  border-radius: 4px;
  background: transparent;
  transition: background-color 0.5s ease, border-color 0.5s ease, opacity 0.5s ease, width 0.6s ease;
}
.ed-build-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ed-build-nav b { width: 40px; height: 12px; margin-right: auto; }
.ed-build-nav em { width: 26px; height: 7px; }
.ed-build-hero {
  position: relative;
  height: 96px;
  margin-bottom: 12px;
}
.ed-build-l1 { position: absolute; top: 10px; left: 0; width: 46%; height: 14px; }
.ed-build-l2 { position: absolute; top: 32px; left: 0; width: 34%; height: 10px; }
.ed-build-btn { position: absolute; top: 56px; left: 0; width: 22%; height: 18px; border-radius: 9px !important; }
.ed-build-img { position: absolute; top: 0; right: 0; width: 42%; height: 92px; border-radius: 8px !important; }
.ed-build-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ed-build-cols > span { display: flex; flex-direction: column; gap: 6px; height: 56px; padding: 8px; }
.ed-build-cols > span em { height: 6px; border: 0; background: transparent; opacity: 0; }
.ed-build-cols > span em + em { width: 60%; }

/* Design: colour arrives. */
.ed-build.ge-1 .ed-build-page b { border-color: transparent; background: var(--tp-theme-primary); }
.ed-build.ge-1 .ed-build-page em { border-color: transparent; background: #dfe6f2; }
.ed-build.ge-1 .ed-build-l1 { border-color: transparent; background: var(--ed-blue-dark); }
.ed-build.ge-1 .ed-build-l2 { border-color: transparent; background: #cfd8e8; }
.ed-build.ge-1 .ed-build-btn { border-color: transparent; background: var(--tp-theme-primary); }
.ed-build.ge-1 .ed-build-img {
  border-color: transparent;
  background: linear-gradient(135deg, var(--ed-blue-light), var(--tp-theme-primary));
}
.ed-build.ge-1 .ed-build-cols > span { border-color: transparent; background: #f3f6fb; }
/* Development: content lands in the columns. */
.ed-build.ge-2 .ed-build-cols > span em { opacity: 1; background: #cfd8e8; }
.ed-build.ge-2 .ed-build-cols > span em:first-child { background: var(--ed-blue-dark); }

.ed-build-code {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ed-blue-dark);
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ed-build.ge-2 .ed-build-code { opacity: 1; transform: scale(1); }

/* The cursor tours the page: the hero while sketching, the button while
   designing, the columns while building, the address bar at launch. */
.ed-build-cursor {
  position: absolute;
  top: 90px;
  left: 120px;
  color: var(--ed-blue-dark);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
  transition: top 0.9s cubic-bezier(0.65, 0, 0.35, 1), left 0.9s cubic-bezier(0.65, 0, 0.35, 1);
  animation: ed-build-tap 2.8s ease-in-out infinite;
}
.ed-build.ge-1 .ed-build-cursor { top: 128px; left: 60px; }
.ed-build.ge-2 .ed-build-cursor { top: 196px; left: 170px; }
.ed-build.ge-3 .ed-build-cursor { top: 14px; left: 150px; }
@keyframes ed-build-tap {
  0%, 60%, 100% { transform: scale(1); }
  70% { transform: scale(0.82); }
}

/* Floating cards. */
.ed-build-stage,
.ed-build-stat {
  position: absolute;
  z-index: 2;
  border-radius: 14px;
  background: #fff;
  color: var(--ed-blue-dark);
  text-align: left;
  box-shadow: 0 24px 44px -20px rgba(5, 20, 46, 0.55);
  animation: ed-build-float 6s ease-in-out infinite;
}
.ed-build-stage {
  top: 0;
  right: -14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  width: 228px;
  padding: 12px 14px 14px;
  animation-delay: -2s;
}
.ed-build-stage-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eef3ff;
  color: var(--tp-theme-primary);
}
.ed-build-stage-text small { display: block; font-size: 11px; color: #6b7385; font-variant-numeric: tabular-nums; }
.ed-build-stage-text b {
  display: block;
  overflow: hidden;
  font-family: var(--ed-ff-display);
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  animation: ed-build-in 0.45s ease both;
}
@keyframes ed-build-in {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
.ed-build-progress {
  grid-column: 1 / -1;
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 4px;
  background: #edf1f7;
}
.ed-build-progress i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--tp-theme-primary), var(--ed-blue-light));
  transition: width 0.8s ease;
}
.ed-build-stat-a {
  bottom: 26px;
  left: -10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 128px;
  padding: 14px 12px 12px;
  text-align: center;
  animation-delay: -4s;
}
.ed-build-ok {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: #eef3ff;
  color: var(--tp-theme-primary);
}
.ed-build-stat b {
  display: block;
  font-family: var(--ed-ff-display);
  font-size: 18px;
  line-height: 1.1;
}
.ed-build-stat small { display: block; margin-top: 3px; font-size: 11.5px; color: #6b7385; }
.ed-build-stat-b {
  right: 6px;
  bottom: 0;
  width: 170px;
  padding: 12px 14px;
  animation-delay: -1s;
}
.ed-build-stat-b small { margin: 0 0 3px; }
.ed-build-chart { display: block; width: 100%; height: 34px; margin-top: 8px; overflow: visible; }
.ed-build-chart path {
  fill: none;
  stroke: var(--tp-theme-primary);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /* Hidden as well as undrawn: the round caps leave a dot at each end of
     an undrawn path. */
  opacity: 0;
  transition: stroke-dashoffset 1.2s ease, opacity 0.2s ease;
}
.ed-build.ge-3 .ed-build-chart path { stroke-dashoffset: 0; opacity: 1; }

.ed-qpanel-eyebrow {
  display: block;
  margin-bottom: 10px;
  font-family: var(--ed-ff-display);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
}
.ed-qpanel-title {
  margin: 0;
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}
.ed-qpanel-mark { color: var(--ed-blue-300); font-weight: inherit; }
.ed-qpanel-intro {
  max-width: 44ch;
  margin: 14px auto 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.ed-build-dots { display: flex; justify-content: center; gap: 6px; margin-top: 28px; }
.ed-build-dots i {
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.4);
  transition: width 0.35s ease, background-color 0.35s ease;
}
.ed-build-dots i.is-on { width: 24px; background: #fff; }

/* ---- The form half ---- */
.ed-qpanel-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 48px;
}
.ed-qpanel-form { width: min(100%, 470px); }
.ed-qpanel-form-title {
  margin: 0;
  text-align: center;
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: clamp(26px, 2.4vw, 34px);
  letter-spacing: -0.02em;
  color: var(--ed-blue-dark);
}
.ed-qpanel-form-note { margin: 8px 0 28px; text-align: center; font-size: 15px; color: var(--ed-body); }
.ed-qpanel-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; }
.ed-qpanel-qbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid #dfe4ec;
  border-radius: 10px;
  background: #fff;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
  color: var(--ed-blue-dark);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.ed-qpanel-qbtn:hover {
  border-color: var(--tp-theme-primary);
  color: var(--ed-blue-dark);
  box-shadow: 0 10px 22px -14px rgba(6, 85, 237, 0.5);
}
.ed-qpanel-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  font-size: 13.5px;
  color: #7b8494;
}
.ed-qpanel-or::before,
.ed-qpanel-or::after { content: ""; flex: 1; height: 1px; background: #e6eaf1; }
.ed-qpanel-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--ed-body);
}

/* Floating labels: the label sits inside the field and lifts to the top
   border once the field is focused or filled. */
.ed-quote-float {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.ed-quote-float::before { display: none; }
.ed-quote-float .ed-quote-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.ed-quote-float .ed-quote-field { position: relative; margin-bottom: 14px; }
.ed-quote-float .ed-quote-field label {
  position: absolute;
  top: 16px;
  left: 13px;
  z-index: 1;
  margin: 0;
  padding: 0 4px;
  border-radius: 4px;
  background: #fff;
  font-family: var(--ed-ff-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.2;
  color: #7b8494;
  pointer-events: none;
  transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease;
}
.ed-quote-float .ed-quote-field input,
.ed-quote-float .ed-quote-field textarea {
  padding: 15px 16px;
  border: 1px solid #dfe4ec;
  border-radius: 10px;
  font-size: 15px;
}
.ed-quote-float .ed-quote-field textarea { min-height: 104px; resize: vertical; }
.ed-quote-float .ed-quote-field:has(:focus) label,
.ed-quote-float .ed-quote-field:has(input:not(:placeholder-shown), textarea:not(:placeholder-shown)) label {
  top: -8px;
  font-size: 12px;
}
.ed-quote-float .ed-quote-field:has(:focus) label { color: var(--tp-theme-primary); }
.ed-quote-float .ed-quote-field input:focus,
.ed-quote-float .ed-quote-field textarea:focus {
  border-color: var(--tp-theme-primary);
  box-shadow: 0 0 0 4px rgba(6, 85, 237, 0.12);
}
.ed-quote-float .ed-quote-submit {
  margin-top: 4px;
  padding: 16px 18px;
  border-radius: 10px;
  font-size: 15.5px;
  box-shadow: 0 16px 30px -16px rgba(6, 85, 237, 0.8);
}
.ed-quote-float.ed-quote-done { padding: 24px 0; }

@media (max-width: 1199.98px) {
  .ed-build { transform: scale(0.9); transform-origin: center top; }
}
@media (max-width: 991.98px) {
  .ed-qpanel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ed-qpanel-left { padding: 64px 20px 48px; }
  .ed-qpanel-right { padding: 56px 20px 72px; }
  .ed-build { transform: none; }
}
@media (max-width: 575.98px) {
  /* The window and its cards at 0.82 scale fit a 350px column. */
  .ed-build-art { height: 300px; margin-bottom: 28px; transform: scale(0.82); transform-origin: center top; }
  .ed-qpanel-dashes,
  .ed-qpanel-dots { display: none; }
  .ed-qpanel-quick { grid-template-columns: minmax(0, 1fr); }
  .ed-quote-float .ed-quote-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-build-sq,
  .ed-build-stage,
  .ed-build-stat,
  .ed-build-cursor,
  .ed-build-live { animation: none; }
}
.ed-qpanel-badges li::before { content: "✓"; margin-right: 6px; font-weight: 700; color: var(--tp-theme-primary); }

/* ==========================================================================
   Service hero — stage layout, white theme
   The stage hero on white instead of navy: the same composition, with the
   glass columns and glow in pale logo blue, dark type, and cards lifted by
   borders and soft shadows rather than by contrast with a dark field.
   ========================================================================== */
.ed-hstage { background: #fff; color: var(--ed-blue-dark); }
.ed-hstage-bg {
  background:
    radial-gradient(70% 56% at 50% 104%, rgba(6, 85, 237, 0.2), rgba(6, 85, 237, 0) 72%),
    radial-gradient(46% 34% at 50% -4%, rgba(6, 85, 237, 0.08), rgba(6, 85, 237, 0) 70%),
    #fff;
}
.ed-hstage-bg::before {
  background: repeating-linear-gradient(
    90deg,
    rgba(6, 85, 237, 0) 0,
    rgba(6, 85, 237, 0.07) 34px,
    rgba(6, 85, 237, 0.16) 36px,
    rgba(6, 85, 237, 0) 37px,
    rgba(6, 85, 237, 0) 52px
  );
}
.ed-hstage-bg::after {
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.75) 46%, transparent 62%);
  background-size: 260% 100%;
}

.ed-hstage-eyebrow {
  border-color: rgba(6, 85, 237, 0.16);
  background: #eef3ff;
  color: var(--tp-theme-primary);
}
.ed-hstage-title { color: var(--ed-blue-dark); }
.ed-hstage-mark { color: var(--tp-theme-primary); }
.ed-hstage-chips i { border-color: #fff; }
.ed-hstage-chip-b { background: #eef3ff; }
.ed-hstage-orbit circle { stroke: rgba(6, 85, 237, 0.4); }
.ed-hstage-orbit i { color: var(--tp-theme-primary); }
.ed-hstage-intro { color: var(--ed-body); }
.ed-hstage-cta { box-shadow: 0 0 0 6px rgba(6, 85, 237, 0.12), 0 20px 40px -14px rgba(6, 85, 237, 0.6); }
.ed-hstage-rocket { filter: drop-shadow(0 16px 24px rgba(6, 85, 237, 0.3)); }

/* Cards: white on white needs an edge and a shadow to stand off. */
.ed-hstage-points,
.ed-hstage-mini,
.ed-hstage-rating {
  border: 1px solid rgba(6, 85, 237, 0.1);
  background: #fff;
  box-shadow: 0 30px 60px -30px rgba(5, 20, 46, 0.28);
}
.ed-hstage-points { background: linear-gradient(160deg, #fff, #f2f6ff); }
.ed-hstage-phone {
  border: 1px solid rgba(6, 85, 237, 0.12);
  background: linear-gradient(180deg, #eef3ff, #fff 36%);
  box-shadow:
    0 0 0 7px rgba(6, 85, 237, 0.05),
    0 50px 90px -34px rgba(5, 20, 46, 0.4);
}
.ed-hstage-formpill { border: 1px solid rgba(6, 85, 237, 0.1); }
/* The price card was blue glass over navy; on white it is solid logo blue. */
.ed-hstage-deal {
  border-color: rgba(255, 255, 255, 0.2);
  background: linear-gradient(160deg, var(--tp-theme-primary), var(--ed-blue-light));
  /* Set here, not inherited: the section's text is dark now. */
  color: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 34px 60px -26px rgba(6, 85, 237, 0.7);
}
.ed-hstage-tag {
  border: 1px solid rgba(6, 85, 237, 0.14);
  box-shadow: 0 16px 30px -16px rgba(6, 85, 237, 0.45);
}
.ed-hstage-floor { background: linear-gradient(180deg, #e3ecff, #fff); }

/* ---- About: the stat card's team grid and chips ----
   One dot per person on the headline figure, filling in when the card
   scrolls into view, then a slow wave of blue running across the columns.
   The chips name the disciplines from the card's own line. */
.ed-about-team {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.ed-about-team i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--tp-theme-primary);
}
.ed-about-team i:nth-child(4n) { background: var(--ed-blue-light); }
/* Armed (JS present): dots start as empty rings and fill in sequence. */
.ed-about-team.is-armed i {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #c9d3e4;
  transition: background-color 0.3s ease calc(var(--i) * 28ms), box-shadow 0.3s ease calc(var(--i) * 28ms);
}
.ed-about-team.is-armed.is-in i {
  background: var(--tp-theme-primary);
  box-shadow: inset 0 0 0 0 transparent;
  animation: ed-about-wave 4.8s ease-in-out calc(1.4s + var(--c) * 0.12s) infinite;
}
.ed-about-team.is-armed.is-in i:nth-child(4n) { background: var(--ed-blue-light); }
@keyframes ed-about-wave {
  0%, 30%, 100% { transform: scale(1); opacity: 1; }
  12% { transform: scale(0.72); opacity: 0.55; }
}
.ed-about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding: 22px 0 0;
  list-style: none;
}
.ed-about-tags li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 10px;
  border: 1px solid rgba(6, 85, 237, 0.1);
  border-radius: 30px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--ed-blue-dark);
}
.ed-about-tags svg { color: var(--tp-theme-primary); }
@media (prefers-reduced-motion: reduce) {
  .ed-about-team.is-armed i { transition: none; }
  .ed-about-team.is-armed.is-in i { animation: none; }
}

/* ==========================================================================
   About: numbers band
   A navy band with two blue glows drifting behind a faint grid. Each
   figure sits in a glass cell with an icon, counts up, and draws a blue
   line under itself when the band scrolls in, one cell after the next.
   ========================================================================== */
.ed-nband {
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  background: var(--ed-blue-dark);
  text-align: left;
}
.ed-nband::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent 80%);
  mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent 80%);
}
.ed-nband-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 85, 237, 0.55), rgba(6, 85, 237, 0) 65%);
  pointer-events: none;
}
.ed-nband-glow-a { top: -300px; left: -120px; animation: ed-nband-drift 14s ease-in-out infinite alternate; }
.ed-nband-glow-b {
  right: -160px;
  bottom: -320px;
  background: radial-gradient(circle, rgba(61, 127, 242, 0.45), rgba(61, 127, 242, 0) 65%);
  animation: ed-nband-drift 17s ease-in-out -6s infinite alternate-reverse;
}
@keyframes ed-nband-drift {
  from { translate: 0 0; }
  to { translate: 260px 60px; }
}
.ed-nband > .container { position: relative; }

.ed-nband-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.ed-nband-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color 0.3s ease, background-color 0.3s ease, translate 0.3s ease;
}
.ed-nband-item:hover { border-color: rgba(61, 127, 242, 0.45); translate: 0 -4px; }
.ed-nband-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 22px;
  border-radius: 12px;
  background: rgba(6, 85, 237, 0.22);
  color: var(--ed-blue-300);
  box-shadow: inset 0 0 0 1px rgba(61, 127, 242, 0.35);
}
.ed-nband-value {
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: clamp(38px, 3.6vw, 54px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.ed-nband-value em { font-style: normal; color: var(--ed-blue-light); }
.ed-nband-label { margin-top: 10px; font-size: 14.5px; color: rgba(255, 255, 255, 0.66); }
.ed-nband-line {
  height: 2px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
}
.ed-nband-line i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--tp-theme-primary), var(--ed-blue-300));
  transform-origin: left;
}
/* Armed (JS present): the lines start empty, draw in turn on scroll-in,
   then a glint runs along them now and then. */
.ed-nband.is-armed .ed-nband-line i {
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) calc(0.3s + var(--i) * 0.15s);
}
.ed-nband.is-armed.is-in .ed-nband-line i { transform: scaleX(1); }
.ed-nband.is-armed.is-in .ed-nband-icon { animation: ed-nband-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.15s) both; }
@keyframes ed-nband-pop {
  from { opacity: 0; transform: scale(0.6) rotate(-10deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@media (max-width: 991.98px) {
  .ed-nband { padding: 52px 0; }
  .ed-nband-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ed-nband-item { padding: 20px 18px 18px; }
  .ed-nband-icon { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-nband-glow { animation: none; }
  .ed-nband.is-armed .ed-nband-line i { transition: none; }
  .ed-nband.is-armed.is-in .ed-nband-icon { animation: none; }
}

/* A tool with no logo file: its name in a pill on the same curve point. */
.ed-hub-tool.is-text {
  width: auto;
  min-width: 0;
  height: 40px;
  aspect-ratio: auto;
  padding: 0 16px;
  border-radius: 40px;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  color: var(--ed-blue-dark);
}
@media (max-width: 767.98px) {
  .ed-hub-tool.is-text { height: 30px; padding: 0 10px; font-size: 11px; }
}

/* ---- Build scene variants ----
   The same four-stage build for products other than a website. Every part
   starts as a dashed outline (the shared rule below), fills with colour at
   ge-1, takes content at ge-2 and goes live at ge-3. */
.ed-dash i, .ed-dash b, .ed-dash em,
.ed-serp-box, .ed-serp-list li, .ed-serp-list b, .ed-serp-list em,
.ed-app-top, .ed-app-hero, .ed-app-cards i, .ed-app-rows i, .ed-app-tabs,
.ed-chat-head {
  display: block;
  border: 1.5px dashed #c7d2e6;
  border-radius: 5px;
  background: transparent;
  transition: background-color 0.5s ease, border-color 0.5s ease, opacity 0.5s ease, transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), height 0.7s ease;
}

/* Dashboard: sidebar, KPI tiles, a bar chart, table rows. */
.ed-dash { display: grid; grid-template-columns: 62px 1fr; gap: 10px; height: calc(100% - 34px); padding: 12px; }
.ed-dash-side { display: flex; flex-direction: column; gap: 8px; padding: 8px 6px; border-radius: 8px; }
.ed-dash-side b { height: 12px; margin-bottom: 6px; }
.ed-dash-side em { height: 7px; }
.ed-dash-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ed-dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ed-dash-kpis i { height: 38px; }
.ed-dash-bars { display: flex; align-items: flex-end; gap: 6px; height: 84px; padding: 8px; border: 1.5px dashed #c7d2e6; border-radius: 6px; transition: border-color 0.5s ease, background-color 0.5s ease; }
.ed-dash-bars i { flex: 1; height: 14%; border-radius: 3px 3px 0 0; }
.ed-dash-rows { display: flex; flex-direction: column; gap: 6px; }
.ed-dash-rows i { height: 12px; }
.ed-build.ge-1 .ed-dash-side { background: var(--ed-blue-dark); }
.ed-build.ge-1 .ed-dash-side b { border-color: transparent; background: var(--tp-theme-primary); }
.ed-build.ge-1 .ed-dash-side em { border-color: transparent; background: rgba(255, 255, 255, 0.22); }
.ed-build.ge-1 .ed-dash-kpis i { border-color: transparent; background: #eef3ff; box-shadow: inset 0 3px 0 var(--tp-theme-primary); }
.ed-build.ge-1 .ed-dash-bars { border-color: transparent; background: #f5f8fd; }
.ed-build.ge-1 .ed-dash-rows i { border-color: transparent; background: #eef1f6; }
.ed-build.ge-2 .ed-dash-bars i {
  height: var(--h);
  border-color: transparent;
  background: linear-gradient(180deg, var(--ed-blue-light), var(--tp-theme-primary));
  transition-delay: calc(var(--i) * 70ms);
}
.ed-build.ge-2 .ed-dash-rows i:first-child { background: linear-gradient(90deg, var(--ed-blue-dark) 30%, #eef1f6 30%); }
.ed-build.ge-3 .ed-dash-kpis i:first-child { background: var(--tp-theme-primary); }

/* Search: a results page where your listing climbs to the top. */
.ed-serp { padding: 14px 16px; }
.ed-serp-box { display: flex; align-items: center; gap: 8px; height: 26px; margin-bottom: 14px; padding: 0 10px; border-radius: 13px; color: #9aa6ba; }
.ed-serp-box i { flex: 1; height: 6px; border: 0; background: transparent; }
.ed-serp-list { position: relative; height: 176px; margin: 0; padding: 0; list-style: none; }
.ed-serp-list li {
  position: absolute;
  inset: auto 0 auto 0;
  top: calc(var(--i) * 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
}
.ed-serp-list b { width: 62%; height: 8px; border: 0; border-radius: 4px; }
.ed-serp-list em { width: 88%; height: 6px; border: 0; border-radius: 4px; }
.ed-serp-rank {
  position: absolute;
  top: 50%;
  right: 10px;
  padding: 3px 8px;
  border-radius: 20px;
  background: #fff;
  font-family: var(--ed-ff-display);
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  color: var(--tp-theme-primary);
  opacity: 0;
  transform: translateY(-50%) scale(0.6);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ed-build.ge-1 .ed-serp-box { border-color: transparent; background: #f1f4f9; }
.ed-build.ge-1 .ed-serp-list li { border-color: transparent; background: #f7f9fc; }
.ed-build.ge-1 .ed-serp-list b { background: #c9d5ea; }
.ed-build.ge-1 .ed-serp-list em { background: #e4e9f2; }
.ed-build.ge-2 .ed-serp-list li.is-us { background: var(--tp-theme-primary); transform: translateY(-88px); z-index: 1; box-shadow: 0 14px 26px -12px rgba(6, 85, 237, 0.7); }
.ed-build.ge-2 .ed-serp-list li.is-us b { background: #fff; }
.ed-build.ge-2 .ed-serp-list li.is-us em { background: rgba(255, 255, 255, 0.5); }
.ed-build.ge-2 .ed-serp-list li:nth-child(1),
.ed-build.ge-2 .ed-serp-list li:nth-child(2) { transform: translateY(44px); }
.ed-build.ge-3 .ed-serp-rank { opacity: 1; transform: translateY(-50%) scale(1); }

/* Phone frame for the app and chat scenes. */
.ed-build-phone {
  position: absolute;
  top: 18px;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 176px;
  height: 312px;
  margin-left: -88px;
  overflow: hidden;
  padding: 30px 12px 12px;
  border: 6px solid var(--ed-blue-dark);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 40px 70px -30px rgba(5, 20, 46, 0.6);
  text-align: left;
}
.ed-build-notch { position: absolute; top: 8px; left: 50%; width: 52px; height: 10px; margin-left: -26px; border-radius: 6px; background: var(--ed-blue-dark); }
.ed-app-top { display: flex; align-items: center; justify-content: space-between; height: 22px; padding: 0 6px; border: 0; }
.ed-app-top b { width: 50px; height: 9px; border-radius: 4px; }
.ed-app-top em { width: 16px; height: 16px; border-radius: 50%; }
.ed-app-hero { height: 76px; border-radius: 12px; }
.ed-app-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-app-cards i { height: 52px; border-radius: 10px; }
.ed-app-rows { display: flex; flex-direction: column; gap: 6px; }
.ed-app-rows i { height: 10px; }
.ed-app-rows i + i { width: 70%; }
.ed-app-tabs { display: flex; justify-content: space-around; align-items: center; margin-top: auto; height: 28px; padding: 0 8px; border-radius: 14px; }
.ed-app-tabs i { width: 12px; height: 12px; border: 0; border-radius: 4px; background: transparent; }
.ed-app-badge {
  position: absolute;
  top: 116px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: #e5484d;
  box-shadow: 0 8px 18px -6px rgba(5, 20, 46, 0.35);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ed-build.ge-1 .ed-app-top b { border-color: transparent; background: var(--ed-blue-dark); }
.ed-build.ge-1 .ed-app-top em { border-color: transparent; background: #dfe6f2; }
.ed-build.ge-1 .ed-app-hero { border-color: transparent; background: linear-gradient(135deg, var(--ed-blue-light), var(--tp-theme-primary)); }
.ed-build.ge-1 .ed-app-tabs { border-color: transparent; background: #f1f4f9; }
.ed-build.ge-1 .ed-app-tabs i { background: #c9d5ea; }
.ed-build.ge-1 .ed-app-tabs i:first-child { background: var(--tp-theme-primary); }
.ed-build.ge-2 .ed-app-cards i { border-color: transparent; background: #eef3ff; box-shadow: inset 0 -16px 0 #dfe8ff; }
.ed-build.ge-2 .ed-app-rows i { border-color: transparent; background: #dfe6f2; }
.ed-build.ge-3 .ed-app-badge { opacity: 1; transform: scale(1); animation: ed-app-beat 1.4s ease-in-out 0.5s infinite; }
@keyframes ed-app-beat { 0%, 100% { scale: 1; } 15% { scale: 1.18; } 30% { scale: 1; } }

/* Chat: messages arrive one stage at a time, read ticks turn blue at the end. */
.ed-build-phone.is-chat { gap: 10px; background: #eef2f8; }
.ed-chat-head { display: flex; align-items: center; gap: 8px; height: 30px; margin: -6px -2px 2px; padding: 0 8px; border-radius: 10px; }
.ed-chat-head i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px dashed #c7d2e6; }
.ed-chat-head b { width: 60px; height: 8px; border-radius: 4px; border: 1.5px dashed #c7d2e6; }
.ed-build.ge-1 .ed-chat-head { border-color: transparent; background: var(--ed-blue-dark); }
.ed-build.ge-1 .ed-chat-head i { border-color: transparent; background: #25d366; }
.ed-build.ge-1 .ed-chat-head b { border-color: transparent; background: rgba(255, 255, 255, 0.5); }
.ed-chat-b {
  position: relative;
  display: block;
  max-width: 78%;
  padding: 8px 10px;
  border-radius: 12px;
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ed-chat-b::before,
.ed-chat-b::after { content: ""; display: block; height: 6px; border-radius: 3px; background: currentColor; opacity: 0.35; }
.ed-chat-b::after { width: 64%; margin-top: 5px; }
.ed-chat-in { align-self: flex-start; width: 70%; background: #fff; color: #8b96a8; border-bottom-left-radius: 4px; }
.ed-chat-out { align-self: flex-end; width: 62%; background: #d9fdd3; color: #3d8f4f; border-bottom-right-radius: 4px; }
.ed-chat-3 i { display: block; height: 44px; margin-bottom: 6px; border-radius: 8px; background: linear-gradient(135deg, var(--ed-blue-light), var(--tp-theme-primary)); }
.ed-chat-ticks { position: absolute; right: 6px; bottom: 4px; color: #9aa6ba; transition: color 0.4s ease 0.3s; }
.ed-chat-1 { opacity: 1; transform: none; }
.ed-build.ge-1 .ed-chat-2,
.ed-build.ge-2 .ed-chat-3,
.ed-build.ge-3 .ed-chat-4 { opacity: 1; transform: none; }
.ed-build.ge-3 .ed-chat-ticks { color: #34b7f1; }

@media (prefers-reduced-motion: reduce) {
  .ed-build.ge-3 .ed-app-badge { animation: none; }
}

/* Mock-up labels come from page data now, so they must cope with any
   length: one line each, cut with an ellipsis. */
.ed-mock-head,
.ed-mock-row,
.ed-mock-price-top b,
.ed-mock-btn,
.ed-mock-tag {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ed-mock-row > :not(i) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ed-mock-price-top { gap: 10px; }
.ed-mock-price-top b { min-width: 0; }
.ed-mock-tag { max-width: 92%; }

/* A long service headline steps down a size so it holds to two or three
   lines instead of filling the first screen. */
.ed-hstage-title.is-long { font-size: clamp(32px, 3.9vw, 54px); }

/* A group described in a sentence rather than listed. */
.ed-ofs-text { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; opacity: 0.9; }
.ed-ofs-white .ed-ofs-text { color: var(--ed-body); opacity: 1; }
.ed-ofs-text strong { font-weight: 600; }
.ed-ofs-glass .ed-ofs-text { color: rgba(255, 255, 255, 0.88); opacity: 1; }

/* Balance: grids sized to their content so no row is left part-empty. */
.ed-nband-row { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
@media (max-width: 991.98px) {
  .ed-nband-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-nband-row > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.ed-areas-grid.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ed-areas-grid.is-four .ed-atile-name { font-size: 19px; }
@media (max-width: 575.98px) {
  .ed-areas-grid.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   Mega menu
   One rounded white panel the width of the content: link columns on the
   left, the menu's photo as a promo card with the main action on the right.
   Each entry is an icon tile and a label; on hover the tile fills blue and
   an arrow slides in. Columns arrive in a short stagger when it opens.
   ========================================================================== */
.tp-megamenu-wrapper.ed-mm-wrap {
  max-width: 1230px;
  padding-top: 22px;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.ed-mm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(5, 20, 46, 0.06);
  border-radius: 26px;
  background: #fff;
  box-shadow:
    0 2px 6px rgba(5, 20, 46, 0.04),
    0 40px 80px -30px rgba(5, 20, 46, 0.28);
}
.ed-mm-cols {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 6px;
  padding: 18px 12px 14px;
}
.ed-mm-col {
  min-width: 0;
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.35s ease, translate 0.35s ease;
}
.tp-header-dropdown nav ul li:hover > .ed-mm-wrap .ed-mm-col {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(0.05s + var(--i) * 0.05s);
}
.ed-mm-title {
  margin: 0 0 10px;
  padding: 0 10px 10px;
  border-bottom: 1px solid rgba(5, 20, 46, 0.06);
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none !important;
  color: #6b7385;
}
.ed-mm-col ul,
.ed-dd { margin: 0; padding: 0; list-style: none; }
#header-sticky .ed-mm-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  font-family: var(--ed-ff-display);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.3;
  text-transform: none !important;
  color: var(--ed-blue-dark);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ed-mm-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #eef3ff;
  color: var(--tp-theme-primary);
  transition: background-color 0.2s ease, color 0.2s ease, scale 0.2s ease;
}
.ed-mm-label { flex: 1 1 auto; min-width: 0; }
.ed-mm-go {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--tp-theme-primary);
  opacity: 0;
  translate: -6px 0;
  transition: opacity 0.2s ease, translate 0.2s ease;
}
#header-sticky .ed-mm-link:hover { background: #f4f7fd; color: var(--ed-blue-dark); }
.ed-mm-link:hover .ed-mm-icon { background: var(--tp-theme-primary); color: #fff; scale: 1.04; }
.ed-mm-link:hover .ed-mm-go { opacity: 1; translate: 0 0; }
.ed-mm-link:focus-visible { outline: 2px solid var(--tp-theme-primary); outline-offset: 1px; }

.ed-mm-promo {
  position: relative;
  display: flex;
  min-height: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: var(--ed-blue-dark);
}
.ed-mm-promo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.6s ease;
}
.ed-mm-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 20, 46, 0.05) 30%, rgba(5, 20, 46, 0.85));
}
.ed-mm-promo:hover img { scale: 1.05; }
.ed-mm-promo-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
  padding: 20px;
}
.ed-mm-promo-label {
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}
#header-sticky .ed-mm-promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 6px 6px 18px;
  border-radius: 40px;
  background: #fff;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 14px;
  text-transform: none !important;
  color: var(--ed-blue-dark);
}
.ed-mm-promo-btn span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tp-theme-primary);
  color: #fff;
  transition: rotate 0.25s ease;
}
#header-sticky .ed-mm-promo-btn:hover { color: var(--tp-theme-primary); }
.ed-mm-promo-btn:hover span { rotate: 45deg; }

/* The simple dropdown (Industry Solutions): same rows, in a floating card. */
#header-sticky .tp-submenu.ed-dd {
  width: 300px;
  padding: 8px;
  border: 1px solid rgba(5, 20, 46, 0.06);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 60px -24px rgba(5, 20, 46, 0.3);
}
#header-sticky .tp-submenu.ed-dd li { margin: 0; padding: 0; }
#header-sticky .tp-submenu.ed-dd li::before { display: none; }
#header-sticky .tp-submenu.ed-dd .ed-mm-link { width: 100%; }

@media (max-width: 1399.98px) {
  .ed-mm { grid-template-columns: minmax(0, 1fr) 240px; }
  #header-sticky .ed-mm-link { font-size: 13.5px; gap: 10px; }
  .ed-mm-icon { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-mm-col { opacity: 1; translate: none; transition: none; }
}

/* ---- Footer additions on the original design ---- */
.ed-footer-reach { margin: 22px 0 0; padding: 0; list-style: none; }
.ed-footer-reach li + li { margin-top: 10px; }
.ed-footer-reach a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.78);
}
.ed-footer-reach i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-size: 15px;
  color: #fff;
  transition: background-color 0.2s ease;
}
.ed-footer-reach a:hover { color: #fff; }
.ed-footer-reach a:hover i { background: var(--tp-theme-primary); }
.ed-footer .tp-footer-widget-title { text-transform: none !important; letter-spacing: 0; }
.ed-footer .ed-footer-links { margin: 0; padding: 0; list-style: none; }
.ed-footer .ed-footer-links li + li { margin-top: 10px; }
.ed-footer .ed-footer-links a {
  display: inline-block;
  font-size: 15.5px;
  line-height: 1.45;
  transition: color 0.2s ease, translate 0.2s ease;
}
.ed-footer .ed-footer-links a:hover { translate: 4px 0; }
.ed-footer-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px 28px;
  margin: 10px 0 0;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  list-style: none;
}
.ed-footer-trust li { display: flex; align-items: baseline; gap: 10px; }
.ed-footer-trust b {
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: #fff;
}
.ed-footer-trust span { font-size: 14.5px; color: rgba(255, 255, 255, 0.62); }
@media (max-width: 767.98px) {
  .ed-footer-trust { justify-content: flex-start; }
  .ed-footer-trust li { flex: 1 1 40%; }
}
/* Labels get the row's full width: the hover arrow floats over the end
   instead of reserving space, and the promo card gives up 30px. */
#header-sticky .ed-mm-link { position: relative; padding-right: 26px; }
.ed-mm-go { position: absolute; top: 50%; right: 6px; margin-top: -11px; }
.ed-mm { grid-template-columns: minmax(0, 1fr) 260px; }
.ed-mm-cols { gap: 4px; padding: 16px 8px 12px; }
@media (max-width: 1399.98px) {
  .ed-mm { grid-template-columns: minmax(0, 1fr) 210px; }
}
/* No full-caps type in the footer either: the template sets its round
   button and bottom links in capitals. */
.ed-footer .tp-btn-rounded,
.ed-footer .tp-footer-menu a { text-transform: none !important; letter-spacing: 0 !important; }

/* The template copies the desktop menu into the phone menu. There the mega
   panel is a plain list: one column, no promo card, no hover stagger. */
.tp-offcanvas-menu .tp-megamenu-wrapper.ed-mm-wrap { position: static; max-width: none; padding-top: 0; opacity: 1; visibility: visible; transform: none; }
.tp-offcanvas-menu .ed-mm { display: block; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.tp-offcanvas-menu .ed-mm-cols { display: block; padding: 6px 0 10px; }
.tp-offcanvas-menu .ed-mm-col { opacity: 1; translate: none; margin-bottom: 10px; }
.tp-offcanvas-menu .ed-mm-title { margin-bottom: 4px; padding: 6px 0; border: 0; font-size: 13px; }
.tp-offcanvas-menu .ed-mm-promo { display: none; }
.tp-offcanvas-menu .ed-mm-link,
.tp-offcanvas-menu .ed-dd .ed-mm-link { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 15px; font-weight: 500; }
.tp-offcanvas-menu .ed-mm-icon { width: 32px; height: 32px; border-radius: 9px; }
.tp-offcanvas-menu .ed-mm-go { display: none; }
.tp-offcanvas-menu .tp-submenu.ed-dd { padding: 4px 0 8px; border: 0; box-shadow: none; background: none; }
/* The template hides every span inside a phone-menu dropdown item (for its
   caret); the menu rows' icon and label are spans too, so bring them back. */
.tp-offcanvas-menu ul li.has-dropdown .ed-mm-link .ed-mm-icon { display: grid; }
.tp-offcanvas-menu ul li.has-dropdown .ed-mm-link .ed-mm-label { display: block; }
.tp-offcanvas-menu ul li.has-dropdown .ed-mm-link .ed-mm-icon svg { display: block; }

/* ==========================================================================
   Inner-page banner (blog, posts, contact)
   A rounded photo card under the header: title over a dark wash, the
   breadcrumb in a white tab cut into the bottom-right corner.
   ========================================================================== */
.ed-banner-area { padding: 108px 0 0; background: #fff; }
.ed-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 380px;
  overflow: hidden;
  border-radius: 28px;
  background: var(--ed-blue-dark);
  isolation: isolate;
}
.ed-banner-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: ed-banner-zoom 14s ease-out both;
}
@keyframes ed-banner-zoom { from { scale: 1.08; } to { scale: 1; } }
.ed-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 20, 46, 0.88) 0%, rgba(5, 20, 46, 0.55) 55%, rgba(5, 20, 46, 0.2) 100%),
    linear-gradient(0deg, rgba(6, 85, 237, 0.35), rgba(6, 85, 237, 0) 60%);
}
.ed-banner-body { max-width: 760px; padding: 64px 56px 56px; }
.ed-banner-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ed-blue-300);
}
.ed-banner-title {
  margin: 0;
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-transform: none !important;
  color: #fff;
}
.ed-banner-title.is-long { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.12; }
.ed-banner-intro { max-width: 56ch; margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); }
.ed-banner-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.ed-banner-meta li {
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 13.5px;
  color: #fff;
}
/* The breadcrumb tab, with inverted corners so it reads as cut out. */
.ed-banner-crumbs {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 14px 24px 0;
  border-top-left-radius: 22px;
  background: #fff;
}
.ed-banner-crumbs::before,
.ed-banner-crumbs::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background: radial-gradient(circle at 0 0, transparent 22px, #fff 22.5px);
}
.ed-banner-crumbs::before { top: -22px; right: 0; }
.ed-banner-crumbs::after { bottom: 0; left: -22px; }
.ed-banner-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.ed-banner-crumbs li { display: inline-flex; align-items: center; gap: 8px; color: var(--ed-blue-dark); }
.ed-banner-crumbs li + li::before { content: "/"; color: #9aa3b2; }
.ed-banner-crumbs a { color: #6b7385; }
.ed-banner-crumbs a:hover { color: var(--tp-theme-primary); }
@media (max-width: 767.98px) {
  .ed-banner-area { padding-top: 92px; }
  .ed-banner { min-height: 300px; border-radius: 22px; }
  .ed-banner-body { padding: 40px 24px 70px; }
  .ed-banner-crumbs { max-width: calc(100% - 22px); padding: 12px 16px 0; }
}
@media (prefers-reduced-motion: reduce) { .ed-banner-img { animation: none; } }

/* ==========================================================================
   Blog listing
   ========================================================================== */
.ed-blog { padding: 56px 0 100px; }
.ed-blog-empty { padding: 40px 0 60px; font-size: 18px; color: var(--ed-body); }
.ed-category-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.ed-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(5, 20, 46, 0.1);
  border-radius: 40px;
  background: #fff;
  font-family: var(--ed-ff-display);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ed-blue-dark);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ed-category-pill span {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #eef3ff;
  font-size: 12px;
  color: var(--tp-theme-primary);
}
.ed-category-pill:hover { border-color: var(--tp-theme-primary); color: var(--tp-theme-primary); }
.ed-category-pill.is-active { border-color: var(--tp-theme-primary); background: var(--tp-theme-primary); color: #fff; }
.ed-category-pill.is-active span { background: rgba(255, 255, 255, 0.2); color: #fff; }

.ed-pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.ed-pcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(5, 20, 46, 0.07);
  border-radius: 22px;
  background: #fff;
  color: var(--ed-blue-dark);
  transition: translate 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ed-pcard:hover {
  translate: 0 -6px;
  border-color: rgba(6, 85, 237, 0.18);
  box-shadow: 0 30px 60px -32px rgba(5, 20, 46, 0.35);
  color: var(--ed-blue-dark);
}
.ed-pcard-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; margin: 10px 10px 0; border-radius: 16px; background: #eef3ff; }
.ed-pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s ease; }
.ed-pcard:hover .ed-pcard-media img { scale: 1.06; }
.ed-pcard-empty { position: absolute; inset: 0; background: linear-gradient(135deg, #eef3ff, #dbe6ff); }
.ed-pcard-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.92);
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--tp-theme-primary);
}
.ed-pcard-body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.ed-pcard-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; color: #7b8494; }
.ed-pcard-meta i { width: 4px; height: 4px; border-radius: 50%; background: #c2c9d6; }
.ed-pcard-title { font-family: var(--ed-ff-display); font-weight: 700; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.ed-pcard-excerpt {
  display: -webkit-box;
  margin-top: 10px;
  overflow: hidden;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ed-body);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.ed-pcard-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--tp-theme-primary);
}
.ed-pcard-more svg { transition: translate 0.25s ease; }
.ed-pcard:hover .ed-pcard-more svg { translate: 4px 0; }
/* The lead story: image beside the text, the full width of the grid. */
.ed-pcard.is-featured { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin-bottom: 28px; }
.ed-pcard.is-featured .ed-pcard-media { aspect-ratio: auto; min-height: 340px; margin: 10px; }
.ed-pcard.is-featured .ed-pcard-body { justify-content: center; padding: 36px 40px 36px 22px; }
.ed-pcard.is-featured .ed-pcard-title { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; }
.ed-pcard.is-featured .ed-pcard-excerpt { font-size: 16px; -webkit-line-clamp: 4; }
.ed-pcard.is-featured .ed-pcard-more { margin-top: 24px; }

.ed-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 56px; }
.ed-page-link {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(5, 20, 46, 0.1);
  border-radius: 23px;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ed-blue-dark);
}
.ed-page-link:hover { border-color: var(--tp-theme-primary); color: var(--tp-theme-primary); }
.ed-page-link.is-active { border-color: var(--tp-theme-primary); background: var(--tp-theme-primary); color: #fff; }
@media (max-width: 991.98px) {
  .ed-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .ed-pcard.is-featured { grid-template-columns: minmax(0, 1fr); }
  .ed-pcard.is-featured .ed-pcard-media { min-height: 0; aspect-ratio: 16 / 9; margin: 10px 10px 0; }
  .ed-pcard.is-featured .ed-pcard-body { padding: 22px; }
}
@media (max-width: 575.98px) { .ed-pgrid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Blog post
   ========================================================================== */
.ed-post { padding: 64px 0 100px; }
.ed-post-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; }
.ed-post-main { min-width: 0; }
.ed-post-lede { font-size: 20px; line-height: 1.6; color: var(--ed-blue-dark); }
.ed-post-body { font-size: 18px; line-height: 1.8; color: #2c3445; }
.ed-post-body > * + * { margin-top: 1.1em; }
.ed-post-body h2,
.ed-post-body h3 {
  margin-top: 1.8em;
  font-family: var(--ed-ff-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: none !important;
  color: var(--ed-blue-dark);
}
.ed-post-body h2 { font-size: 30px; line-height: 1.25; }
.ed-post-body h3 { font-size: 23px; line-height: 1.3; }
.ed-post-body a { color: var(--tp-theme-primary); text-decoration: underline; text-underline-offset: 3px; }
.ed-post-body ul,
.ed-post-body ol { padding-left: 1.3em; }
.ed-post-body li + li { margin-top: 0.4em; }
.ed-post-body img { max-width: 100%; height: auto; border-radius: 18px; }
.ed-post-body blockquote {
  margin: 1.6em 0;
  padding: 22px 26px;
  border-left: 4px solid var(--tp-theme-primary);
  border-radius: 0 16px 16px 0;
  background: #f4f7fd;
  font-family: var(--ed-ff-display);
  font-size: 21px;
  line-height: 1.5;
  color: var(--ed-blue-dark);
}
.ed-post-side { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 16px; }
.ed-post-share { padding: 20px 22px; border: 1px solid rgba(5, 20, 46, 0.08); border-radius: 20px; }
.ed-post-share > span { display: block; margin-bottom: 12px; font-family: var(--ed-ff-display); font-weight: 600; font-size: 14.5px; color: var(--ed-blue-dark); }
.ed-post-share div { display: flex; gap: 10px; }
.ed-post-share a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #eef3ff;
  color: var(--tp-theme-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ed-post-share a:hover { background: var(--tp-theme-primary); color: #fff; }
.ed-post-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px;
  border-radius: 22px;
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%),
    linear-gradient(140deg, var(--tp-theme-primary), var(--ed-blue-light));
  color: #fff;
}
.ed-post-cta-eyebrow { font-size: 14px; color: rgba(255, 255, 255, 0.82); }
.ed-post-cta-title { font-family: var(--ed-ff-display); font-weight: 700; font-size: 32px; line-height: 1.05; letter-spacing: -0.02em; }
.ed-post-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 13px 18px;
  border-radius: 40px;
  background: #fff;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ed-blue-dark);
}
.ed-post-cta-btn:hover { color: var(--tp-theme-primary); }
.ed-post-cta-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; font-size: 14px; color: #fff; }
.ed-post-cta-wa:hover { color: #fff; text-decoration: underline; }
.ed-post-related { margin-top: 90px; padding-top: 56px; border-top: 1px solid rgba(5, 20, 46, 0.08); }
.ed-post-related-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.ed-post-related-head h2 {
  margin: 0;
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  text-transform: none !important;
  color: var(--ed-blue-dark);
}
.ed-post-related-head h2::first-letter { text-transform: uppercase; }
.ed-post-related-head a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ed-ff-display); font-weight: 600; font-size: 15px; color: var(--tp-theme-primary); }
@media (max-width: 991.98px) {
  .ed-post-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ed-post-side { position: static; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.ed-contact-main { padding: 80px 0 90px; }
.ed-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px 72px; align-items: start; }
.ed-contact-title {
  margin: 0;
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-transform: none !important;
  color: var(--ed-blue-dark);
}
.ed-contact-intro { max-width: 48ch; margin: 20px 0 0; font-size: 16.5px; line-height: 1.65; color: var(--ed-body); }
.ed-contact-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 32px;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid rgba(5, 20, 46, 0.08);
}
.ed-contact-cell { display: flex; flex-direction: column; gap: 6px; font-size: 15.5px; color: var(--ed-body); }
.ed-contact-label { margin-bottom: 4px; font-family: var(--ed-ff-display); font-weight: 700; font-size: 16px; color: var(--ed-blue-dark); }
.ed-contact-cell a { color: var(--ed-body); }
.ed-contact-cell a:hover { color: var(--tp-theme-primary); }
.ed-contact-cell .ed-contact-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 600; font-size: 14px; color: var(--tp-theme-primary); }
.ed-contact-socials { display: flex; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.ed-contact-socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eef3ff;
  font-size: 15px;
  color: var(--tp-theme-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ed-contact-socials a:hover { background: var(--tp-theme-primary); color: #fff; }
.ed-contact-hours { display: grid; gap: 10px; margin: 32px 0 0; padding: 0; list-style: none; }
.ed-contact-hours li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 14px 18px; border-radius: 14px; background: #f4f7fd; font-size: 14.5px; color: var(--ed-body); }
.ed-contact-hours b { color: var(--ed-blue-dark); }

/* The form card: grey, fields as single underlines with lifting labels. */
.ed-cform { padding: 44px 44px 40px; border-radius: 26px; background: #f3f5f9; }
.ed-cform-title {
  margin: 0;
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  text-transform: none !important;
  color: var(--ed-blue-dark);
}
.ed-cform-intro { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ed-body); }
.ed-cform form { margin-top: 26px; }
.ed-cform-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
.ed-cform-field { position: relative; margin-bottom: 22px; }
.ed-cform-field input,
.ed-cform-field textarea,
.ed-cform-field select {
  display: block;
  width: 100%;
  padding: 22px 0 10px;
  border: 0;
  border-bottom: 1.5px solid #cfd6e2;
  border-radius: 0;
  background: transparent;
  font-size: 15.5px;
  color: var(--ed-blue-dark);
  transition: border-color 0.2s ease;
  appearance: none;
}
.ed-cform-field textarea { min-height: 104px; resize: vertical; }
.ed-cform-field.is-select::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 18px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #7b8494;
  border-bottom: 1.5px solid #7b8494;
  rotate: 45deg;
  pointer-events: none;
}
.ed-cform-field label {
  position: absolute;
  top: 22px;
  left: 0;
  margin: 0;
  font-size: 15.5px;
  color: #7b8494;
  pointer-events: none;
  transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease;
}
.ed-cform-field input:focus,
.ed-cform-field textarea:focus,
.ed-cform-field select:focus { outline: none; border-bottom-color: var(--tp-theme-primary); }
.ed-cform-field:has(:focus) label,
.ed-cform-field:has(input:not(:placeholder-shown), textarea:not(:placeholder-shown), select.has-value) label {
  top: 0;
  font-size: 12.5px;
}
.ed-cform-field:has(:focus) label { color: var(--tp-theme-primary); }
.ed-cform-error { margin: 0 0 16px; font-size: 14px; color: #b3261e; }
.ed-cform-submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 7px 24px 7px 7px;
  border: 0;
  border-radius: 40px;
  background: var(--ed-blue-dark);
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ed-cform-submit-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tp-theme-primary);
  transition: rotate 0.25s ease;
}
.ed-cform-submit:hover:not(:disabled) { background: var(--tp-theme-primary); }
.ed-cform-submit:hover .ed-cform-submit-icon { background: #fff; color: var(--tp-theme-primary); rotate: -45deg; }
.ed-cform-submit:disabled { opacity: 0.65; cursor: default; }
.ed-cform.is-done { text-align: left; }
.ed-cform-again { margin-top: 18px; padding: 0; border: 0; background: none; font-weight: 600; color: var(--tp-theme-primary); text-decoration: underline; cursor: pointer; }

/* The map: full container width, rounded, greyscale until hovered. */
.ed-contact-map { padding: 0 0 100px; }
.ed-contact-map-frame { position: relative; height: 480px; overflow: hidden; border-radius: 28px; background: #eef1f6; }
.ed-contact-map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); transition: filter 0.4s ease; }
.ed-contact-map-frame:hover iframe { filter: none; }
.ed-contact-map-card {
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 300px;
  padding: 18px 20px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 40px -20px rgba(5, 20, 46, 0.4);
  font-size: 14.5px;
  color: var(--ed-body);
}
.ed-contact-map-card b { font-family: var(--ed-ff-display); font-size: 17px; color: var(--ed-blue-dark); }
.ed-contact-map-card a { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; color: var(--tp-theme-primary); }
@media (max-width: 991.98px) {
  .ed-contact-main { padding: 56px 0 64px; }
  .ed-contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .ed-cform { padding: 30px 22px 26px; border-radius: 22px; }
  .ed-cform-pair { grid-template-columns: minmax(0, 1fr); }
  .ed-contact-info { grid-template-columns: minmax(0, 1fr); }
  .ed-contact-map-frame { height: 380px; border-radius: 22px; }
  .ed-contact-map-card { top: auto; right: 14px; bottom: 14px; left: 14px; max-width: none; }
}
/* Google's embed puts its own place card top-left; ours goes top-right. */
.ed-contact-map-card { top: 24px; right: 24px; left: auto; }
@media (max-width: 575.98px) { .ed-contact-map-card { top: auto; right: 14px; left: 14px; } }
/* No full-caps type: the scrolling strip too. */
.tp-text-slider-item,
.tp-text-slider-item * { text-transform: none !important; }

/* ---- Inner-page banner: full width ----
   Edge to edge under the header, square corners; the title and the
   breadcrumb tab stay on the 1230px content grid. */
.ed-banner-area { --ed-gutter: max(15px, calc((100vw - 1230px) / 2 + 15px)); padding-top: 83px; }
.ed-banner-area > .container { max-width: none; padding: 0; }
.ed-banner { min-height: 460px; border-radius: 0; }
.ed-banner-body { max-width: calc(760px + var(--ed-gutter)); padding: 90px 24px 80px var(--ed-gutter); }
.ed-banner-crumbs { right: var(--ed-gutter); border-top-right-radius: 22px; }
.ed-banner-crumbs::before { top: auto; right: -22px; bottom: 0; background: radial-gradient(circle at 100% 0, transparent 22px, #fff 22.5px); }
@media (max-width: 767.98px) {
  .ed-banner-area { padding-top: 62px; }
  .ed-banner { min-height: 340px; }
  .ed-banner-body { padding: 56px 20px 80px; }
  .ed-banner-crumbs { right: 20px; }
}

/* ---- Post sidebar ----
   Author, categories and recent articles, then a group that follows the
   reader down the article: contents with reading progress, share, quote. */
.ed-post-side { position: static; align-self: stretch; gap: 18px; }
.ed-side-sticky { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 18px; }
.ed-side-card { padding: 22px; border: 1px solid rgba(5, 20, 46, 0.08); border-radius: 22px; background: #fff; }
.ed-side-label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  color: #7b8494;
}
.ed-side-author { display: flex; align-items: center; gap: 14px; background: linear-gradient(160deg, #f4f7fd, #fff); }
.ed-side-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tp-theme-primary), var(--ed-blue-light));
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
}
.ed-side-author-text { display: flex; flex-direction: column; min-width: 0; }
.ed-side-author-text small { font-size: 12.5px; color: #7b8494; }
.ed-side-author-text b { font-family: var(--ed-ff-display); font-size: 17px; color: var(--ed-blue-dark); }
.ed-side-author-text em { font-style: normal; font-size: 13px; color: var(--ed-body); }
.ed-side-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-side-cats a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px 7px 13px;
  border: 1px solid rgba(5, 20, 46, 0.1);
  border-radius: 30px;
  font-size: 13.5px;
  color: var(--ed-blue-dark);
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.ed-side-cats a span {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #eef3ff;
  font-size: 11.5px;
  color: var(--tp-theme-primary);
}
.ed-side-cats a:hover,
.ed-side-cats a.is-active { border-color: var(--tp-theme-primary); color: var(--tp-theme-primary); }
.ed-side-cats a.is-active { background: #f4f7fd; }
.ed-side-recent { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ed-side-recent a { display: flex; gap: 12px; align-items: center; color: var(--ed-blue-dark); }
.ed-side-thumb { flex: none; width: 74px; height: 58px; overflow: hidden; border-radius: 12px; background: #eef3ff; }
.ed-side-thumb img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.4s ease; }
.ed-side-recent a:hover .ed-side-thumb img { scale: 1.08; }
.ed-side-recent-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ed-side-recent-text b {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color 0.2s ease;
}
.ed-side-recent a:hover b { color: var(--tp-theme-primary); }
.ed-side-recent-text small { font-size: 12px; color: #7b8494; }

/* Contents card. */
.ed-toc {
  position: relative;
  overflow: hidden;
  padding: 24px 22px 18px;
  border: 1px solid rgba(5, 20, 46, 0.08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 50px -36px rgba(5, 20, 46, 0.35);
}
.ed-toc-progress { position: absolute; inset: 0 0 auto 0; height: 3px; background: #eef3ff; }
.ed-toc-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--tp-theme-primary), var(--ed-blue-light));
  transform: scaleX(0);
  transform-origin: left;
}
.ed-toc-list {
  max-height: 46vh;
  margin: 0 -6px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  counter-reset: toc;
  scrollbar-width: thin;
}
.ed-toc-list li { counter-increment: toc; }
.ed-toc-list a {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 7px 10px 7px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ed-body);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ed-toc-list li:not(.is-sub) > a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  min-width: 18px;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.75;
  color: #a5adbb;
}
.ed-toc-list li.is-sub { counter-increment: none; }
.ed-toc-list li.is-sub > a { padding-left: 40px; font-size: 13.5px; }
.ed-toc-list a:hover { background: #f4f7fd; color: var(--ed-blue-dark); }
.ed-toc-list li.is-active > a { background: #eef3ff; color: var(--tp-theme-primary); font-weight: 600; }
.ed-toc-list li.is-active > a::before { color: var(--tp-theme-primary); }
.ed-toc-list li.is-active > a::after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--tp-theme-primary);
}
.ed-toc-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(5, 20, 46, 0.07);
}
.ed-toc-share > span { font-family: var(--ed-ff-display); font-weight: 600; font-size: 13px; color: #7b8494; }
.ed-toc-share div { display: flex; gap: 8px; }
.ed-toc-share a,
.ed-toc-share button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eef3ff;
  font-size: 14px;
  color: var(--tp-theme-primary);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, translate 0.2s ease;
}
.ed-toc-share a:hover,
.ed-toc-share button:hover { translate: 0 -2px; background: var(--tp-theme-primary); color: #fff; }
.ed-toc-share button.is-done { background: #16a34a; color: #fff; }
/* Headings land clear of the sticky header when jumped to. */
.ed-post-body h2,
.ed-post-body h3 { scroll-margin-top: 110px; }
@media (max-width: 991.98px) {
  .ed-side-sticky { position: static; }
  .ed-toc-list { max-height: none; }
}

/* Pinned by ScrollTrigger (PinSide), not CSS sticky: ScrollSmoother's
   transform defeats position: sticky. */
.ed-side-sticky { position: relative; top: auto; width: 100%; }

.ed-toc-list li:not(.is-sub) > a::before { content: none; }
.ed-toc-num {
  flex: none;
  min-width: 20px;
  font-family: var(--ed-ff-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.75;
  color: #a5adbb;
}
.ed-toc-list li.is-active .ed-toc-num { color: var(--tp-theme-primary); }

/* ==========================================================================
   Icon cards / tiles and the team grid (About page and beyond)
   ========================================================================== */
.ed-igrid { padding: 100px 0; background: #fff; }
.ed-igrid.is-tint { background: radial-gradient(60% 80% at 100% 0%, rgba(6, 85, 237, 0.06), rgba(6, 85, 237, 0) 70%), #f6f9ff; }
.ed-igrid-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.ed-igrid-head .ed-sec-title { margin: 0; }
.ed-igrid-intro { max-width: 60ch; margin: 16px auto 0; font-size: 16.5px; line-height: 1.65; color: var(--ed-body); }
.ed-igrid-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.ed-icard {
  display: flex;
  flex: 0 1 calc((100% - (var(--cols, 3) - 1) * 20px) / var(--cols, 3));
  flex-direction: column;
  padding: 30px 28px;
  border: 1px solid rgba(5, 20, 46, 0.07);
  border-radius: 24px;
  background: #fff;
  transition: translate 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ed-igrid.is-tint .ed-icard { border-color: rgba(6, 85, 237, 0.08); }
.ed-icard:hover { translate: 0 -6px; border-color: rgba(6, 85, 237, 0.2); box-shadow: 0 30px 60px -34px rgba(5, 20, 46, 0.35); }
.ed-icard-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: #eef3ff;
  color: var(--tp-theme-primary);
  transition: background-color 0.3s ease, color 0.3s ease, rotate 0.3s ease;
}
.ed-icard:hover .ed-icard-icon { background: var(--tp-theme-primary); color: #fff; rotate: -6deg; }
.ed-icard-title {
  margin: 0 0 10px;
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
  text-transform: none !important;
  color: var(--ed-blue-dark);
}
.ed-icard-text { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ed-body); }
.ed-icard-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.ed-icard-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 30px;
  background: #f4f7fd;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ed-blue-dark);
}
.ed-icard-chips li::before { content: "✓"; font-weight: 700; color: var(--tp-theme-primary); }

.ed-igrid-grid.is-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ed-itile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 44px 16px 16px;
  border: 1px solid rgba(5, 20, 46, 0.08);
  border-radius: 18px;
  background: #fff;
  color: var(--ed-blue-dark);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, translate 0.25s ease;
}
.ed-itile-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #eef3ff;
  color: var(--tp-theme-primary);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.ed-itile-name { font-family: var(--ed-ff-display); font-weight: 600; font-size: 15px; line-height: 1.3; }
.ed-itile-go {
  position: absolute;
  top: 50%;
  right: 16px;
  margin-top: -7px;
  color: #a5adbb;
  transition: color 0.25s ease, rotate 0.25s ease;
}
a.ed-itile:hover { translate: 0 -3px; border-color: rgba(6, 85, 237, 0.25); box-shadow: 0 20px 40px -28px rgba(6, 85, 237, 0.5); color: var(--ed-blue-dark); }
a.ed-itile:hover .ed-itile-icon { background: var(--tp-theme-primary); color: #fff; }
a.ed-itile:hover .ed-itile-go { color: var(--tp-theme-primary); rotate: 45deg; }

.ed-team { padding: 100px 0; background: #fff; }
.ed-team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ed-member {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(5, 20, 46, 0.07);
  border-radius: 24px;
  background: #fff;
  transition: translate 0.3s ease, box-shadow 0.3s ease;
}
.ed-member:hover { translate: 0 -6px; box-shadow: 0 30px 60px -34px rgba(5, 20, 46, 0.35); }
.ed-member-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3.4;
  margin: 10px 10px 0;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(70% 70% at 80% 10%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 60%),
    linear-gradient(140deg, var(--tp-theme-primary), var(--ed-blue-dark));
}
.ed-member-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-member-initials {
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: 64px;
  letter-spacing: -0.03em;
  color: #fff;
  opacity: 0.95;
  transition: scale 0.4s ease;
}
.ed-member:hover .ed-member-initials { scale: 1.08; }
.ed-member-in {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--tp-theme-primary);
}
.ed-member-body { padding: 20px 22px 24px; }
.ed-member-name {
  margin: 0;
  font-family: var(--ed-ff-display);
  font-weight: 700;
  font-size: 19px;
  text-transform: none !important;
  color: var(--ed-blue-dark);
}
.ed-member-role {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 12px;
  border-radius: 30px;
  background: #eef3ff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tp-theme-primary);
}
.ed-member-bio { margin: 14px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--ed-body); }

@media (max-width: 1199.98px) {
  .ed-igrid-grid.is-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ed-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .ed-igrid, .ed-team { padding: 72px 0; }
  .ed-icard { flex-basis: calc((100% - 20px) / 2); }
  .ed-igrid-grid.is-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .ed-icard { flex-basis: 100%; }
  .ed-igrid-grid.is-tiles,
  .ed-team-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Two white sections in a row would stack 200px of padding into one empty
   band; the second one tucks up under the first. */
.ed-igrid:not(.is-tint) + .ed-team,
.ed-igrid:not(.is-tint) + .ed-igrid:not(.is-tint),
.ed-team + .ed-igrid:not(.is-tint) { padding-top: 0; }
@media (max-width: 991px) {
  .ed-igrid:not(.is-tint) + .ed-team,
  .ed-igrid:not(.is-tint) + .ed-igrid:not(.is-tint),
  .ed-team + .ed-igrid:not(.is-tint) { padding-top: 0; }
}

/* On a phone a full-width initials tile is a screen of blue per person: the
   avatar shrinks to sit beside the name and role, the bio runs underneath. */
@media (max-width: 575.98px) {
  .ed-member {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "m n" "m r" "b b";
    column-gap: 16px;
    padding: 16px 18px 20px;
  }
  .ed-member-body { display: contents; }
  .ed-member-media { grid-area: m; aspect-ratio: 1; margin: 0; border-radius: 18px; }
  .ed-member-initials { font-size: 26px; }
  .ed-member-in { right: -4px; bottom: -4px; width: 28px; height: 28px; font-size: 12px; }
  .ed-member-name { grid-area: n; align-self: end; font-size: 18px; }
  .ed-member-role { grid-area: r; align-self: start; justify-self: start; margin-top: 6px; }
  .ed-member-bio { grid-area: b; margin-top: 14px; }
}

/* ============================================================
   Editorial section layouts — statements, focus list, team
   spotlight and the index — used on About and reusable anywhere.
   ============================================================ */

/* Heading left, intro or a count on the right: reads as a page of a
   magazine rather than a centred template banner. */
.ed-shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; }
.ed-shead .ed-sec-title { max-width: 15ch; margin: 0; text-align: left; }
.ed-shead-aside { max-width: 380px; font-size: 16.5px; line-height: 1.65; color: var(--ed-body); }
.ed-shead-aside p { margin: 0; }

/* --- Statements -------------------------------------------------------- */
.ed-vmv { padding: 110px 0; background: #fff; }
.ed-vmv.is-tint { background: radial-gradient(60% 80% at 100% 0%, rgba(6, 85, 237, 0.06), rgba(6, 85, 237, 0) 70%), #f6f9ff; }
.ed-vmv-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.ed-vmv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  grid-column: span 5;
  min-height: 380px;
  padding: 36px;
  overflow: hidden;
  border: 1px solid rgba(5, 20, 46, 0.07);
  border-radius: 28px;
  background: #fff;
}
.ed-vmv-card.is-lead {
  grid-column: span 7;
  border: 0;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(6, 85, 237, 0.6), rgba(6, 85, 237, 0) 62%),
    linear-gradient(155deg, #0b2250, var(--ed-blue-dark));
  color: #fff;
}
.ed-vmv-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.ed-vmv-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #eef3ff;
  color: var(--tp-theme-primary);
}
.is-lead .ed-vmv-icon { background: rgba(255, 255, 255, 0.12); color: #fff; }
.ed-vmv-title {
  margin: 0;
  font-family: var(--tp-ff-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none !important;
  color: var(--ed-blue-dark);
}
.is-lead .ed-vmv-title { color: #fff; }
.ed-vmv-num { margin-left: auto; font-size: 13px; font-weight: 600; color: #9aa3b2; }
.is-lead .ed-vmv-num { color: rgba(255, 255, 255, 0.5); }
.ed-vmv-text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--tp-ff-heading);
  font-size: clamp(19px, 1.65vw, 22px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ed-blue-dark);
}
.is-lead .ed-vmv-text { max-width: 26ch; font-size: clamp(24px, 2.3vw, 31px); line-height: 1.32; color: #fff; }
.ed-vmv-rings {
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 300px;
  height: 300px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1;
}
.ed-vmv-rings circle:nth-child(2) { stroke-dasharray: 3 7; transform-origin: center; animation: ed-spin 40s linear infinite; }
@keyframes ed-spin { to { rotate: 360deg; } }
.ed-vmv-strip {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  min-height: 0;
  padding: 30px 36px;
}
.ed-vmv-strip .ed-vmv-top { flex-shrink: 0; width: 210px; }
.ed-vmv-cells {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.ed-vmv-cells li {
  padding: 6px 20px;
  border-left: 1px solid rgba(5, 20, 46, 0.08);
  font-family: var(--tp-ff-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ed-blue-dark);
  transition: color 0.25s ease;
}
.ed-vmv-cells li:hover { color: var(--tp-theme-primary); }
.ed-vmv-cells span { display: block; margin-bottom: 10px; font-size: 12px; color: var(--tp-theme-primary); }

/* --- Focus list --------------------------------------------------------- */
.ed-igrid-sticky { padding: 110px 0; }
.ed-focus { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.ed-focus-head .ed-sec-title { margin: 0; text-align: left; }
.ed-focus-head .ed-igrid-intro { margin: 18px 0 0; }
.ed-focus-count { display: flex; align-items: baseline; gap: 10px; margin-top: 56px; font-family: var(--tp-ff-heading); }
.ed-focus-now { display: inline-block; height: 1em; overflow: hidden; font-size: 120px; font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: var(--tp-theme-primary); }
.ed-focus-now b { display: block; font-weight: inherit; animation: ed-count-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes ed-count-in { from { translate: 0 100%; } }
.ed-focus-of { font-size: 20px; font-weight: 600; color: #9aa3b2; }
.ed-focus-bar { display: flex; gap: 6px; max-width: 280px; margin-top: 24px; }
.ed-focus-bar i { flex: 1; height: 3px; border-radius: 3px; background: rgba(5, 20, 46, 0.1); transition: background-color 0.4s ease; }
.ed-focus-bar i.is-on { background: var(--tp-theme-primary); }
.ed-focus-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(5, 20, 46, 0.09); }
.ed-focus-row {
  display: grid;
  grid-template-columns: 44px 56px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 38px 0;
  border-bottom: 1px solid rgba(5, 20, 46, 0.09);
  transition: opacity 0.45s ease;
}
.ed-focus.is-live .ed-focus-row { opacity: 0.32; }
.ed-focus.is-live .ed-focus-row.is-active { opacity: 1; }
.ed-focus-num { padding-top: 16px; font-size: 14px; font-weight: 600; color: #9aa3b2; transition: color 0.4s ease; }
.ed-focus-row.is-active .ed-focus-num { color: var(--tp-theme-primary); }
.ed-focus-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #eef3ff;
  color: var(--tp-theme-primary);
  transition: background-color 0.4s ease, color 0.4s ease, rotate 0.4s ease;
}
.ed-focus.is-live .ed-focus-row.is-active .ed-focus-icon { background: var(--tp-theme-primary); color: #fff; rotate: -6deg; }
.ed-focus-copy h3 {
  margin: 0 0 10px;
  font-family: var(--tp-ff-heading);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none !important;
  color: var(--ed-blue-dark);
}
.ed-focus-copy p { max-width: 52ch; margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ed-body); }

/* --- Team spotlight ----------------------------------------------------- */
.ed-team.is-spot .ed-igrid-head { max-width: none; margin: 0 0 56px; text-align: left; }
.ed-team.is-spot .ed-igrid-intro { margin-left: 0; }
.ed-spot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: stretch; }
.ed-spot-list { display: flex; flex-direction: column; justify-content: center; border-top: 1px solid rgba(5, 20, 46, 0.09); }
.ed-spot-tab {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 26px 18px;
  border: 0;
  border-bottom: 1px solid rgba(5, 20, 46, 0.09);
  background: none;
  text-align: left;
  cursor: pointer;
}
.ed-spot-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #eef3ff, rgba(238, 243, 255, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ed-spot-tab.is-active::before { transform: scaleX(1); }
.ed-spot-num { font-size: 13px; font-weight: 600; color: #9aa3b2; transition: color 0.3s ease; }
.ed-spot-tab.is-active .ed-spot-num { color: var(--tp-theme-primary); }
.ed-spot-who { transition: translate 0.35s ease; }
.ed-spot-tab.is-active .ed-spot-who { translate: 6px 0; }
.ed-spot-who b { display: block; font-family: var(--tp-ff-heading); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--ed-blue-dark); }
.ed-spot-who small { display: block; margin-top: 4px; font-size: 14px; color: var(--ed-body); }
.ed-spot-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tp-theme-primary);
  color: #fff;
  opacity: 0;
  translate: -10px 0;
  transition: opacity 0.3s ease, translate 0.35s ease;
}
.ed-spot-tab.is-active .ed-spot-arrow { opacity: 1; translate: 0 0; }
.ed-spot-stage { display: grid; }
.ed-spot-card {
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(5, 20, 46, 0.07);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 40px 80px -50px rgba(5, 20, 46, 0.35);
  opacity: 0;
  visibility: hidden;
  translate: 0 14px;
  transition: opacity 0.45s ease, translate 0.45s ease, visibility 0s 0.45s;
}
.ed-spot-card.is-active { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 0.45s ease, translate 0.45s ease; }
.ed-spot-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 80% 0%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 60%),
    linear-gradient(155deg, var(--tp-theme-primary), var(--ed-blue-dark));
}
.ed-spot-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-spot-initials {
  position: relative;
  z-index: 1;
  font-family: var(--tp-ff-heading);
  font-size: 110px;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #fff;
}
.ed-spot-card.is-active .ed-spot-initials { animation: ed-spot-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes ed-spot-in { from { opacity: 0; scale: 0.85; } }
.ed-spot-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 75%);
}
.ed-spot-body { display: flex; flex-direction: column; align-items: flex-start; padding: 40px 36px; }
.ed-spot-count { margin-bottom: 20px; font-size: 13px; font-weight: 600; color: #9aa3b2; }
.ed-spot-name {
  margin: 0 0 12px;
  font-family: var(--tp-ff-heading);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none !important;
  color: var(--ed-blue-dark);
}
.ed-spot-body .ed-member-role { margin-top: 0; }
.ed-spot-bio { margin: 20px 0 0; font-size: 16px; line-height: 1.7; color: var(--ed-body); }
.ed-spot-in { display: grid; place-items: center; width: 40px; height: 40px; margin-top: auto; border-radius: 50%; background: #eef3ff; color: var(--tp-theme-primary); }

/* --- Index -------------------------------------------------------------- */
.ed-index { padding: 110px 0; background: #fff; }
.ed-index.is-tint { background: radial-gradient(60% 80% at 0% 100%, rgba(6, 85, 237, 0.06), rgba(6, 85, 237, 0) 70%), #f6f9ff; }
.ed-index-count {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid rgba(5, 20, 46, 0.1);
  border-radius: 30px;
  background: #fff;
  font-family: var(--tp-ff-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--ed-blue-dark);
}
.ed-index-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.ed-index-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 34px 44px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 16px;
  padding: 20px 14px;
  border-bottom: 1px solid rgba(5, 20, 46, 0.1);
  color: var(--ed-blue-dark);
  transition: color 0.35s ease;
}
.ed-index-row:nth-child(-n + 2) { border-top: 1px solid rgba(5, 20, 46, 0.1); }
.ed-index-row::before {
  content: "";
  position: absolute;
  inset: 4px 0;
  z-index: -1;
  border-radius: 16px;
  background: var(--tp-theme-primary);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
a.ed-index-row:hover { color: #fff; }
a.ed-index-row:hover::before { transform: scaleY(1); }
.ed-index-num { font-size: 13px; font-weight: 600; color: #9aa3b2; transition: color 0.35s ease; }
a.ed-index-row:hover .ed-index-num { color: rgba(255, 255, 255, 0.7); }
.ed-index-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(5, 20, 46, 0.08);
  border-radius: 12px;
  background: #fff;
  color: var(--tp-theme-primary);
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
a.ed-index-row:hover .ed-index-icon { border-color: transparent; background: rgba(255, 255, 255, 0.15); color: #fff; }
.ed-index-name { font-family: var(--tp-ff-heading); font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.015em; }
.ed-index-go {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(5, 20, 46, 0.12);
  border-radius: 50%;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, rotate 0.35s ease;
}
a.ed-index-row:hover .ed-index-go { border-color: #fff; background: #fff; color: var(--tp-theme-primary); rotate: 45deg; }

.ed-igrid-sticky + .ed-team,
.ed-vmv:not(.is-tint) + .ed-igrid-sticky:not(.is-tint) { padding-top: 0; }

@media (max-width: 1199.98px) {
  .ed-vmv-strip { flex-direction: column; align-items: stretch; }
  .ed-vmv-strip .ed-vmv-top { width: auto; }
  .ed-vmv-cells li:first-child { padding-left: 0; border-left: 0; }
  .ed-spot-card { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
  .ed-vmv, .ed-index, .ed-igrid-sticky { padding: 72px 0; }
  .ed-shead { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 40px; }
  .ed-vmv-card, .ed-vmv-card.is-lead { grid-column: 1 / -1; min-height: 0; }
  .ed-focus { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ed-focus-count, .ed-focus-bar { display: none; }
  .ed-focus-row { padding: 28px 0; }
  /* The tabs need a side-by-side stage; stacked, every profile is shown. */
  .ed-spot { grid-template-columns: minmax(0, 1fr); }
  .ed-spot-list { display: none; }
  .ed-spot-stage { gap: 16px; }
  .ed-spot-card,
  .ed-spot-card.is-active {
    grid-area: auto;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas: "m n" "m r" "b b";
    column-gap: 18px;
    padding: 20px;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    translate: none;
  }
  .ed-spot-body { display: contents; }
  .ed-spot-count { display: none; }
  .ed-spot-media { grid-area: m; min-height: 0; height: 76px; border-radius: 18px; }
  .ed-spot-initials { font-size: 28px; animation: none !important; }
  .ed-spot-name { grid-area: n; align-self: end; margin: 0; font-size: 20px; }
  .ed-spot-body .ed-member-role { grid-area: r; align-self: start; justify-self: start; margin-top: 8px; }
  .ed-spot-bio { grid-area: b; margin-top: 16px; }
  .ed-spot-in { grid-area: n; justify-self: end; margin: 0; }
}
@media (max-width: 767.98px) {
  .ed-vmv-card { padding: 28px 24px; gap: 28px; }
  .ed-vmv-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .ed-vmv-cells li, .ed-vmv-cells li:first-child { padding: 0 14px 0 0; border-left: 0; }
  .ed-index-list { grid-template-columns: minmax(0, 1fr); }
  .ed-index-row:nth-child(2) { border-top: 0; }
  .ed-focus-row { grid-template-columns: 48px minmax(0, 1fr); }
  .ed-focus-num { display: none; }
  .ed-focus-icon { width: 48px; height: 48px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-vmv-rings circle:nth-child(2), .ed-focus-now b, .ed-spot-initials { animation: none !important; }
}

/* Numbers band: a grainy blue aura (the client's reference) — near-black
   through the middle where the figures sit, the brand blue rising to a
   pale glow in two opposite corners, and film grain over the lot so the
   gradient reads as light, not as a CSS fill. */
.ed-nband {
  background:
    radial-gradient(70% 130% at 104% -14%, #f1f5ff 0%, #a9c3ff 10%, #3d74f4 22%, #1146d6 34%, rgba(10, 50, 180, 0.5) 48%, rgba(6, 40, 150, 0) 66%),
    radial-gradient(64% 130% at -6% 116%, #f6f8ff 0%, #b3caff 9%, #3f76f5 20%, #1248d8 32%, rgba(10, 50, 180, 0.5) 46%, rgba(6, 40, 150, 0) 64%),
    radial-gradient(70% 120% at 50% 50%, #03050f 0%, #050a1d 45%, #071437 100%);
}
.ed-nband::before {
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.38;
  mix-blend-mode: overlay;
  -webkit-mask-image: none;
  mask-image: none;
}
.ed-nband-glow { display: none; }
/* A slow breathing of the light, so the band feels alive without moving
   anything the eye has to follow. */
.ed-nband-aura {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(30% 45% at 85% 15%, rgba(80, 130, 255, 0.35), rgba(80, 130, 255, 0) 70%),
    radial-gradient(28% 45% at 15% 85%, rgba(80, 130, 255, 0.3), rgba(80, 130, 255, 0) 70%);
  animation: ed-aura 12s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ed-aura {
  from { opacity: 0.6; translate: -2% 1%; }
  to { opacity: 1; translate: 2% -1%; }
}
.ed-nband-item { background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)); border-color: rgba(255, 255, 255, 0.1); }
@media (prefers-reduced-motion: reduce) {
  .ed-nband-aura { animation: none; }
}

/* Footer social links in their brand colours (client request). Each icon
   sits in a disc of the network's own logo colour — white mark on brand
   fill, the way the logos themselves are drawn — so the row reads as
   Facebook, Instagram, LinkedIn… at a glance. The label stays white for
   contrast on the dark footer; on hover the whole pill takes the colour. */
.tp-footer-area .tp-footer-social ul li a[data-platform] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 18px 5px 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, translate 0.25s ease;
}
.tp-footer-area .tp-footer-social ul li a[data-platform] i {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 50%;
  background: var(--brand, #3a3f4a);
  color: #fff;
  font-size: 14px;
}
.tp-footer-area .tp-footer-social ul li a[data-platform]:hover {
  border-color: transparent;
  background: var(--brand, #3a3f4a);
  color: #fff;
  translate: 0 -2px;
}
.tp-footer-area .tp-footer-social ul li a[data-platform]:hover i { background: rgba(255, 255, 255, 0.18); }
[data-platform="facebook"] { --brand: #1877f2; }
[data-platform="instagram"] { --brand: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
[data-platform="linkedin"] { --brand: #0a66c2; }
[data-platform="x"] { --brand: #000; }
[data-platform="youtube"] { --brand: #ff0000; }
[data-platform="whatsapp"] { --brand: #25d366; }
[data-platform="pinterest"] { --brand: #e60023; }
[data-platform="dribbble"] { --brand: #ea4c89; }
[data-platform="behance"] { --brand: #1769ff; }
.tp-footer-area .tp-footer-social ul li a[data-platform="x"] i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.tp-footer-area .tp-footer-social ul li a[data-platform]:hover,
.tp-footer-area .tp-footer-social ul li a[data-platform="facebook"]:hover,
.tp-footer-area .tp-footer-social ul li a[data-platform="instagram"]:hover,
.tp-footer-area .tp-footer-social ul li a[data-platform="linkedin"]:hover,
.tp-footer-area .tp-footer-social ul li a[data-platform="youtube"]:hover,
.tp-footer-area .tp-footer-social ul li a[data-platform="whatsapp"]:hover { color: #fff; }
/* The phone menu's round icons take the same colours. */
.tp-offcanvas-social ul li a[data-platform] { background: var(--brand, #3a3f4a); border-color: transparent; color: #fff; }

/* ---------------------------------------------------------------- hero banner video */
/* The video fills the same frame the banner image did; the button sits in the
   corner away from the template's cut-out shape at the bottom left. */
.tp-hero-bottom-height { position: relative; }
.tp-hero-bottom-height video { display: block; object-fit: cover; }
.ed-hero-vid-btn {
  position: absolute; right: 22px; bottom: 22px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(5, 20, 46, 0.55); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ed-hero-vid-btn:hover { background: #0655ed; border-color: #0655ed; }
.ed-hero-vid-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 767px) { .ed-hero-vid-btn { right: 14px; bottom: 14px; width: 34px; height: 34px; } }

/* ---------------------------------------------------------------- header once scrolled */
/* The stuck bar was 90% white over a white page, so it read as part of the
   content. A pale tint of the logo blue, a hairline and a soft shadow set it
   apart without leaving the white theme. Doubled id so it outranks the
   internal-page rule that paints the bar plain white. */
#header-sticky#header-sticky.header-sticky {
  background: rgba(236, 242, 255, 0.94);
  border-bottom: 1px solid rgba(6, 85, 237, 0.14);
  box-shadow: 0 10px 30px -12px rgba(5, 20, 46, 0.18);
}

/* ---------------------------------------------------------------- home "Who we are" */
/* The template indented the statement's first line with an empty span; with
   that gone the statement and the paragraph share one left edge. The
   paragraph is left-aligned, like all body text (see "Body text alignment"). */
/* The small photo is wider now, so it takes the height the shape below it
   leaves, and the pair lines up with the tall photo beside it. */
@media (min-width: 992px) { .ed-about .tp-about-thumb-height { height: 315px; } }
/* The round link sat as a hairline on white and read as empty space. A tint
   of the logo blue gives it a body; the template's fill still grows on hover. */
.ed-about .ed-about-btn { display: flex; align-items: center; justify-content: center; }
@media (min-width: 992px) { .ed-about .ed-about-btn { min-height: 400px; } }
.ed-about .ed-about-btn a {
  background: #eaf1ff;
  border: 1px solid rgba(6, 85, 237, 0.22);
  color: var(--ed-blue-dark, #05142e);
  box-shadow: 0 22px 44px -24px rgba(6, 85, 237, 0.55);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.ed-about .ed-about-btn a:hover { color: #fff; border-color: #0655ed; }

/* ---------------------------------------------------------------- "Trusted by" strip */
/* The strip was white on white with only hairlines to mark it. A pale band of
   the logo blue sets it off, and each logo sits on its own white card — which
   also tidies the JPG logos that carry a white box of their own. */
.tp-brand-area.tp-brand-spacing {
  background-color: #eef3ff;
  border-color: rgba(6, 85, 237, 0.12);
  padding: 78px 0 64px;
}
.tp-brand-area .tp-brand-bottom-border { background: #e6eeff; border-color: rgba(6, 85, 237, 0.12); }
.tp-brand-area .tp-brand-customer { border-color: rgba(6, 85, 237, 0.18); }
.tp-brand-area .ed-brand-cell { position: relative; height: 124px; padding: 0 34px; }
.tp-brand-area .ed-brand-cell::before {
  content: "";
  position: absolute;
  inset: 0 10px;
  background: #fff;
  border: 1px solid rgba(6, 85, 237, 0.08);
  border-radius: 16px;
  box-shadow: 0 14px 30px -24px rgba(5, 20, 46, 0.45);
}
.tp-brand-area .ed-brand-cell img,
.tp-brand-area .ed-brand-cell a { position: relative; }
.tp-brand-area .ed-brand-cell img { max-height: 64px; }
@media (max-width: 991.98px) {
  .tp-brand-area .ed-brand-cell { height: 108px; padding: 0 28px; }
  .tp-brand-area .ed-brand-cell img { max-height: 54px; }
}
@media (max-width: 575.98px) {
  .tp-brand-area.tp-brand-spacing { padding: 60px 0 48px; }
  .tp-brand-area .ed-brand-cell { height: 92px; padding: 0 24px; }
  .tp-brand-area .ed-brand-cell::before { inset: 0 7px; border-radius: 12px; }
  .tp-brand-area .ed-brand-cell img { max-height: 46px; }
}

/* ---------------------------------------------------------------- home "Our work" */
/* "OUR WORK" at the template's 145px broke over two lines in its column. Sized
   to the viewport it stays on one, rule and all, at every width. */
.ed-work .tp-portfolio-sectitle {
  font-size: clamp(46px, 7vw, 112px);
  line-height: 1;
  white-space: nowrap;
  margin-bottom: 0;
}
.ed-work .tp-portfolio-sectitle .borders { width: clamp(56px, 11vw, 170px); height: 5px; flex: none; }
.ed-work .tp-portfolio-sectitle .borders.ml-40 { margin-left: clamp(16px, 2.4vw, 36px); }
.ed-work-head { margin-bottom: 56px; }
.ed-work-head .tp-portfolio-para p { margin-bottom: 18px; }
@media (max-width: 991.98px) {
  .ed-work-head .tp-portfolio-title-wrap { margin-bottom: 28px; }
  .ed-work-head { margin-bottom: 40px; }
}
/* Both images in a pair share one height, level with each other. */
.ed-work .tp-portfolio-thumb.thumb-pair { height: 480px; width: 100%; overflow: hidden; }
.ed-work .tp-portfolio-thumb.thumb-1 { height: 540px; }
@media (max-width: 1199.98px) { .ed-work .tp-portfolio-thumb.thumb-pair { height: 420px; } }
@media (max-width: 767.98px) {
  .ed-work .tp-portfolio-thumb.thumb-pair,
  .ed-work .tp-portfolio-thumb.thumb-1 { height: 300px; }
}
/* The template pulled the intro 54px down into the staggered grid; with the
   pairs level it would sit on top of the first image. */
.ed-work .tp-portfolio-para { margin-bottom: 0; }

/* ---------------------------------------------------------------- home counters */
/* The template draws the rings in its 1px border grey, which all but vanishes
   on white. A heavier line in the logo blue, and a faint wash inside each
   ring, make the four circles read as the shapes they are meant to be. */
.tp-counter-item {
  border: 1.5px solid rgba(6, 85, 237, 0.42);
  background: radial-gradient(circle at 50% 35%, rgba(6, 85, 237, 0.07), rgba(6, 85, 237, 0) 70%);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.tp-counter-item:hover { border-color: rgba(6, 85, 237, 0.75); }

/* ---------------------------------------------------------------- home blog head */
.ed-blog-head { margin-bottom: 56px; }
.ed-blog-intro { max-width: 440px; margin-left: auto; }
@media (max-width: 991.98px) {
  .ed-blog-head { margin-bottom: 40px; }
  .ed-blog-intro { margin: 22px 0 0; }
}
/* Covers arrive in different shapes (the WhatsApp one is wider), which put
   the first card's meta and title higher than the other two. One frame for
   all of them keeps the row level. */
.ed-blog .tp-blog-thumb { display: block; aspect-ratio: 3 / 2; }
.ed-blog .tp-blog-thumb .tp--hover-img,
.ed-blog .tp-blog-thumb img { width: 100%; height: 100%; }
.ed-blog .tp-blog-thumb img { object-fit: cover; }

/* ---------------------------------------------------------------- body text alignment */
/* Body text follows the design's own alignment again — left-aligned with a
   ragged right edge, as on hexaware.com (client, 7 Nov). This removes the
   site-wide justified text asked for earlier, which opened uneven gaps between
   words. Intros set under a centred heading stay centred. */
#smooth-content :is(.text-center p, .ed-hstage-intro, .ed-hubsec-caption, .ed-hubsec-lead, .ed-ushow-intro) {
  text-align: center;
}
#smooth-content :is(p, li, .ed-faqx-a-inner) { -webkit-hyphens: manual; hyphens: manual; }

/* ---------------------------------------------------------------- footer CTA title */
/* The title is split into single letters for its entrance, so the browser may
   wrap it between any two of them: "Let's Connect" at the template's 145px
   broke as "Connec / t". Sized to the column instead, and kept on one line. */
.tp-footer-top-title { font-size: clamp(36px, 5vw, 76px); white-space: nowrap; }

/* ---------------------------------------------------------------- offer stack: lead + item detail */
/* A group can open with a line of its own and each item can carry a line of
   detail — the WhatsApp page lists four services per group, each explained. */
.ed-offer-lead { margin: -6px 0 14px; font-size: 16px; line-height: 1.55; color: var(--ed-body); }
.ed-offer-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ed-offer-list.has-detail li { padding: 9px 0; }
.ed-offer-list.has-detail .ed-offer-name { font-weight: 600; color: var(--ed-blue-dark); }
.ed-offer-detail { font-size: 15px; line-height: 1.55; color: var(--ed-body); }
.ed-offer-list.has-detail .ed-offer-tick { margin-top: 3px; }

/* ---------------------------------------------------------------- service areas with text */
.ed-areas-split:has(.ed-areas-grid.has-text) { align-items: start; }
.ed-areas-grid.has-text { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-areas-grid.has-text .ed-atile { justify-content: flex-start; gap: 14px; min-height: 0; padding: 22px 24px 24px; }
.ed-atile-text { font-size: 15px; line-height: 1.6; color: var(--ed-body); transition: color 0.3s ease; }
@media (max-width: 767.98px) {
  .ed-areas-grid.has-text { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- index rows with a description */
.ed-index-name { display: flex; flex-direction: column; gap: 4px; }
.ed-index-text {
  font-family: var(--tp-ff-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--ed-body);
  transition: color 0.35s ease;
}
a.ed-index-row:hover .ed-index-text { color: rgba(255, 255, 255, 0.82); }

/* ---------------------------------------------------------------- package cards */
.ed-plans { padding: 72px 0 24px; }
.ed-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}
.ed-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  border: 1px solid rgba(6, 85, 237, 0.14);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 50px -36px rgba(5, 20, 46, 0.4);
}
.ed-plan.is-featured {
  border-color: transparent;
  background: linear-gradient(160deg, #0655ed 0%, #0a3fb8 100%);
  color: #fff;
  box-shadow: 0 34px 60px -30px rgba(6, 85, 237, 0.7);
}
.ed-plan-badge {
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  color: #0655ed;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ed-plan-name { margin: 0 0 14px; font-family: var(--ed-ff-display, var(--tp-ff-heading)); font-size: 22px; font-weight: 700; color: var(--ed-blue-dark); }
.ed-plan.is-featured .ed-plan-name { color: #fff; }
.ed-plan-price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 10px; }
.ed-plan-price b { font-family: var(--ed-ff-display, var(--tp-ff-heading)); font-size: 44px; line-height: 1; letter-spacing: -0.02em; color: var(--ed-blue-dark); }
.ed-plan-price span { font-size: 16px; color: var(--ed-body); }
.ed-plan.is-featured .ed-plan-price b,
.ed-plan.is-featured .ed-plan-price span { color: #fff; }
#smooth-content .ed-plan-note { margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid rgba(6, 85, 237, 0.12); font-size: 15px; line-height: 1.55; color: var(--ed-body); text-align: left; }
#smooth-content .ed-plan.is-featured .ed-plan-note { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.22); }
.ed-plan-list { margin: 0 0 28px; padding: 0; list-style: none; display: grid; gap: 12px; }
.ed-plan-list li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--ed-blue-dark); }
.ed-plan.is-featured .ed-plan-list li { color: #fff; }
.ed-plan-tick {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ed-blue-50, #eef3ff);
  color: #0655ed;
}
.ed-plan.is-featured .ed-plan-tick { background: rgba(255, 255, 255, 0.18); color: #fff; }
.ed-plan-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  border-radius: 26px;
  border: 1.5px solid #0655ed;
  color: #0655ed;
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 15px;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.ed-plan-cta:hover { background: #0655ed; color: #fff; }
.ed-plan.is-featured .ed-plan-cta { border-color: #fff; background: #fff; color: #0655ed; }
.ed-plan.is-featured .ed-plan-cta:hover { background: transparent; color: #fff; }
@media (max-width: 991.98px) {
  .ed-plans-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
}

/* ---------------------------------------------------------------- tile subtitles, second plan button */
.ed-itile-name { display: flex; flex-direction: column; gap: 2px; }
.ed-itile-sub { font-family: var(--tp-ff-body); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ed-body); }
.ed-plan-cta2 {
  margin-top: 12px;
  text-align: center;
  font-family: var(--tp-ff-heading);
  font-size: 14.5px;
  font-weight: 600;
  color: #0655ed;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ed-plan.is-featured .ed-plan-cta2 { color: #fff; }

/* ---------------------------------------------------------------- split service hero (location pages) */
/* The bar is 83px tall since it became a contained header, so the old 76px
   offset left the eyebrow and the quote form tucked under it. */
body:not(:has(.tp-hero-area)) .ed-shero { padding-top: 132px; }
/* Location headings run long ("WhatsApp Marketing Kenya | No #1 WhatsApp
   Business Messaging Solutions for Kenyan Businesses"); at 70px that was five
   lines. Sized to the column instead. */
.ed-shero .ed-shero-title { font-size: clamp(34px, 3.5vw, 52px); line-height: 1.08; }
@media (max-width: 991.98px) {
  body:not(:has(.tp-hero-area)) .ed-shero { padding-top: 104px; }
}

/* ---------------------------------------------------------------- compact prose (policy pages) */
.ed-prose-compact .row > .col-lg-12 { max-width: 880px; margin-left: auto; margin-right: auto; }
.ed-prose-compact .row > .col-lg-9.text-center { margin-bottom: 24px !important; }
.ed-prose-compact h3 { font-size: 22px; margin-bottom: 10px; }
.ed-prose-compact .mb-50 { margin-bottom: 18px !important; }

/* ---------------------------------------------------------------- pay page images */
/* A QR code and a bank slip must show whole: no crop, no parallax drift. */
:is(#pay-upi, #pay-bank, #pay-paypal) .ed-feature-media {
  aspect-ratio: auto;
  height: auto;
  margin-bottom: 0;
  padding: 24px;
  background: #fff;
  border: 1px solid rgba(6, 85, 237, 0.12);
}
:is(#pay-upi, #pay-bank, #pay-paypal) .ed-feature-media-inner,
:is(#pay-upi, #pay-bank, #pay-paypal) .ed-feature-media img {
  height: auto !important;
  max-height: 520px;
  object-fit: contain !important;
  transform: none !important;
  position: static !important;
}
:is(#pay-upi, #pay-bank, #pay-paypal).ed-feature { padding-bottom: 80px; }

/* ---------------------------------------------------------------- why-choose header width */
/* At 16ch the industry pages' headings ("Why Choose eDigiTech for Hospital
   Management Software?") broke over four lines, and the 42ch intro opened
   wide gaps once justified. */
.ed-ushow .ed-sec-title { max-width: 26ch; }
.ed-ushow-intro { max-width: 72ch; }
.ed-ushow-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 22px auto 0;
  padding: 0;
  list-style: none;
}
.ed-ushow-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(6, 85, 237, 0.18);
  border-radius: 999px;
  background: #eef3ff;
  color: var(--ed-blue-dark, #05142e);
  font-size: 14.5px;
  font-weight: 600;
}
.ed-ushow-points li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0655ed;
}

/* ================================================================ type scale
   One scale for the whole site, after the client asked for consistent type on
   every device. Two faces only — Figtree for headings and statements, Archivo
   for running text — and five sizes:
     section title   Figtree 700   48px → 30px on a phone
     statement       Figtree 500   for long sentence-headings and lead copy
     card title      Figtree 700   22px → 19px
     body            Archivo 400   about 17px → 16px
     small           Archivo 400   15px
   Before this the same roles were set in seven paragraph sizes (14–25px) and
   three title weights, and nothing below a section title shrank on a phone.
   Display pieces with a size of their own (hero headlines, OUR WORK, the
   footer's Let's Connect, the big counters) are left alone. */
:root {
  --ed-fs-title: clamp(30px, 3.5vw, 48px);
  --ed-fs-statement: clamp(22px, 2.5vw, 34px);
  --ed-fs-lead-display: clamp(17px, 1.45vw, 21px);
  --ed-fs-card: clamp(19px, 1.55vw, 22px);
  --ed-fs-lead: clamp(16.5px, 1.25vw, 18px);
  --ed-fs-body: clamp(15.5px, 1.1vw, 16.5px);
}

/* Section titles */
#smooth-content :is(.ed-sec-title, .tp-section-title, .ed-pban-title, .ed-qpanel-title, .tp-awards-right h2) {
  font-family: var(--ed-ff-display);
  font-size: var(--ed-fs-title);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
}

/* Statements: a long sentence set as a heading, and the lead copy beside it */
#smooth-content .tp-about-title {
  font-family: var(--ed-ff-display);
  font-size: var(--ed-fs-statement);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
#smooth-content :is(.tp-about-para, .ed-about-intro, .ed-vmv-text, .tp-awards-left p) {
  font-family: var(--ed-ff-display);
  font-size: var(--ed-fs-lead-display);
  font-weight: 500;
  line-height: 1.55;
}
#smooth-content .ed-about-feature-text { font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.55; }

/* Card titles */
#smooth-content :is(.ed-icard-title, .ed-ushow-title, .ed-offer-title, .ed-scard-title, .tp-portfolio-title,
  .ed-plan-name, .ed-spot-name, .ed-focus-copy h3, .ed-cdark-title, .ed-ofs-title, .ed-atile-name,
  .ed-quote-title, .tp-blog-content h3, .ed-prose-compact h3) {
  font-family: var(--ed-ff-display);
  font-size: var(--ed-fs-card);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Running text */
#smooth-content :is(.ed-sec-intro, .ed-feature-text, .ed-igrid-intro, .ed-ushow-intro, .ed-banner-intro,
  .ed-contact-intro, .ed-steps-intro, .ed-blog-intro p, .tp-portfolio-para p, .tp-hero-customer-text p,
  .ed-hstage-intro, .ed-hubsec-lead, .ed-pban-text, .ed-shero-intro) {
  font-size: var(--ed-fs-lead);
  font-weight: 400;
  line-height: 1.65;
}
#smooth-content :is(.ed-icard-text, .ed-ushow-text, .ed-scard-text, .ed-offer-detail, .ed-atile-text, .ed-plan-note,
  .ed-index-text, .ed-cdark-text, .ed-ofs-text, .ed-spot-bio, .ed-hsteps-text, .accordion-body, .tp-faq-details-para,
  .ed-faqx-a-inner, .accordion-body p, .ed-prose-compact p, .ed-post-body p, .ed-post-body li) {
  font-size: var(--ed-fs-body);
  font-weight: 400;
  line-height: 1.65;
}
#smooth-content :is(.tp-about-area, .ed-feature, .ed-igrid) p:is(.fs-17, .fs-18, .fs-20) { font-size: var(--ed-fs-lead); }

/* Phones */
@media (max-width: 767.98px) {
  /* The home headline: the "India's #1" pill on its own line above the
     words, not wedged in front of "Web" with the rest wrapping round it. */
  .tp-hero-title { font-size: 34px; line-height: 1.08; }
  .tp-hero-title .tp-hero-title-sm {
    display: flex !important;
    width: fit-content;
    margin: 0 0 14px;
    font-size: 15px;
    padding: 9px 16px;
  }
  .tp-hero-title .tp-hero-title-sm svg { width: 46px; height: auto; }
  #smooth-content :is(.ed-hstage-title, .ed-shero-title, .ed-banner-title) { font-size: 32px; line-height: 1.12; }
  #smooth-content .tp-about-title { line-height: 1.32; }
  #smooth-content p:is(.fs-18, .fs-20, .fs-22, .fs-25) { font-size: 16.5px; line-height: 1.6; }
}

/* ---------------------------------------------------------------- footer quote button */
/* The round "Get a Free Quote" button sat near-black on the black footer and
   only turned blue on hover. It is brand blue from the start; on hover the
   template's growing fill is white, with the label turning blue. */
.tp-footer-btn a {
  background: #0655ed;
  border-color: #0655ed;
  color: #fff;
  box-shadow: 0 18px 40px -18px rgba(6, 85, 237, 0.75);
}
.tp-footer-btn a:hover { color: #0655ed; border-color: #fff; }
.tp-footer-btn .tp-btn-circle-dot { background: #fff; }

/* ---------------------------------------------------------------- stage hero: second (external) link */
.ed-hstage-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 22px;
  font-family: var(--tp-ff-heading);
  font-weight: 600;
  font-size: 15.5px;
  color: #0655ed;
  border-bottom: 1.5px solid rgba(6, 85, 237, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
.ed-hstage-link:hover { border-color: #0655ed; color: #0655ed; }
.ed-hstage-link svg { width: 14px; height: 14px; }
@media (max-width: 575.98px) {
  .ed-hstage-step:has(> .ed-hstage-link) { display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .ed-hstage-link { margin: 0; }
}

/* ---------------------------------------------------------------- footer description */
/* The company line under the footer logo was justified in a narrow column,
   which opened wide gaps between words, and set at 17px medium. Ragged, a
   size smaller, regular weight and a comfortable measure. */
.tp-footer-logo { margin-bottom: 20px !important; }
#smooth-content .ed-footer-about {
  max-width: 36ch;
  margin: 0;
  font-family: var(--ed-ff-body, var(--tp-ff-body));
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.68);
  text-align: left;
  text-align-last: auto;
}

/* --- Vision, Mission & Core Values (client, 6 Nov: font and spacing; the
   reference was hexaware.com's service pages) ------------------------------
   Left-aligned copy: in a card column, justifying opened wide gaps between
   words. Regular weight with an open line height, a readable card title, and
   tighter, even spacing — the cards size to their copy instead of a fixed
   minimum height. */
#smooth-content .ed-vmv { padding: 96px 0; }
#smooth-content .ed-vmv .ed-sec-head,
#smooth-content .ed-vmv .tp-section-title-wrapper { margin-bottom: 44px; }
#smooth-content .ed-vmv-grid { gap: 24px; }
#smooth-content .ed-vmv-card { gap: 28px; min-height: 0; padding: 40px; justify-content: flex-start; }
#smooth-content .ed-vmv-card.is-lead { padding-bottom: 48px; }
#smooth-content .ed-vmv-top { gap: 14px; }
#smooth-content .ed-vmv-icon { width: 48px; height: 48px; }
#smooth-content .ed-vmv-title { font-family: var(--ed-ff-display); font-size: clamp(19px, 1.5vw, 21px); font-weight: 600; letter-spacing: -0.005em; }
#smooth-content .ed-vmv-num { font-size: 14px; }
#smooth-content .ed-vmv-text {
  max-width: 46ch;
  font-family: var(--ed-ff-display);
  font-size: clamp(17px, 1.3vw, 19px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  text-align: left;
  text-align-last: auto;
  hyphens: manual;
  color: #3b4a63;
}
#smooth-content .is-lead .ed-vmv-text {
  max-width: 30ch;
  font-size: clamp(22px, 1.95vw, 28px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #fff;
}
#smooth-content .ed-vmv-strip { gap: 36px; padding: 32px 40px; }
#smooth-content .ed-vmv-strip .ed-vmv-top { width: 220px; }
#smooth-content .ed-vmv-cells li { padding: 4px 22px; font-family: var(--ed-ff-display); font-size: 16.5px; font-weight: 500; line-height: 1.4; }
#smooth-content .ed-vmv-cells span { margin-bottom: 8px; font-size: 13px; font-weight: 600; }
@media (max-width: 991.98px) {
  #smooth-content .ed-vmv { padding: 72px 0; }
  #smooth-content .ed-vmv-card { padding: 32px 28px; }
}
@media (max-width: 575.98px) {
  #smooth-content .ed-vmv { padding: 60px 0; }
  #smooth-content .ed-vmv .ed-sec-head,
  #smooth-content .ed-vmv .tp-section-title-wrapper { margin-bottom: 32px; }
  #smooth-content .ed-vmv-card { gap: 22px; padding: 26px 22px; }
  #smooth-content .ed-vmv-strip { gap: 22px; padding: 26px 22px; }
  #smooth-content .ed-vmv-text { font-size: 16.5px; line-height: 1.65; }
  #smooth-content .is-lead .ed-vmv-text { font-size: 20px; line-height: 1.5; }
}
@media (max-width: 1199.98px) {
  #smooth-content .ed-vmv-strip { gap: 24px; }
  #smooth-content .ed-vmv-strip .ed-vmv-top { width: auto; }
  #smooth-content .ed-vmv-cells li:first-child { padding-left: 0; }
}
@media (max-width: 767.98px) {
  #smooth-content .ed-vmv-cells li, #smooth-content .ed-vmv-cells li:first-child { padding: 0 14px 0 0; }
}
/* "Talk to an Expert" in the round button: two even lines inside the circle
   rather than one line touching its edges. */
.tp-btn-rounded-label { display: block; max-width: 6.5em; margin: 0 auto; line-height: 1.25; text-align: center; text-wrap: balance; }

/* Home hero headline, smaller (client, 7 Nov: "font on the main screen needs
   to be reduced"). The template set it at 80–100px on large screens; it now
   scales with the width, to 56px at 1440px and 58px at most. */
#smooth-content .tp-hero-title { font-size: clamp(38px, 3.9vw, 58px); line-height: 1.1; }
#smooth-content .tp-hero-title .tp-hero-title-sm { font-size: clamp(15px, 1.15vw, 18px); padding: 11px 22px; vertical-align: 0.35em; }
#smooth-content .tp-hero-title .tp-hero-title-sm svg { width: 54px; height: auto; }
@media (max-width: 767.98px) {
  #smooth-content .tp-hero-title { font-size: 30px; line-height: 1.12; }
  #smooth-content .tp-hero-title .tp-hero-title-sm { font-size: 14px; padding: 8px 15px; vertical-align: baseline; }
  #smooth-content .tp-hero-title .tp-hero-title-sm svg { width: 42px; }
}

/* ===================================================================
   Type, after hexaware.com's service pages (client, 7 Nov: "for fonts,
   follow hexaware"). Manrope throughout; light, large display lines;
   regular-weight section titles at a calmer size; semibold card titles;
   16px body at an open line height. Measured there at 1024–1440px:
     h1 46px 300 · h2 36px 400 / 1.3 · card title 20px 600 · body 16px 400 / 1.6
   Paragraph alignment is unchanged (the client asked for justified text).
   =================================================================== */
:root {
  --ed-fs-title: clamp(27px, 2.55vw, 38px);
  --ed-fs-statement: clamp(20px, 1.95vw, 28px);
  --ed-fs-lead-display: clamp(17px, 1.35vw, 20px);
  --ed-fs-card: clamp(18px, 1.4vw, 20.5px);
  --ed-fs-lead: clamp(16px, 1.15vw, 17.5px);
  --ed-fs-body: 16px;
}
/* Section titles: regular weight; the highlighted words keep their blue and
   a touch more weight. */
#smooth-content :is(.ed-sec-title, .tp-section-title, .ed-pban-title, .ed-qpanel-title, .tp-awards-right h2, .ed-cdark-title) {
  font-weight: 400 !important;
  line-height: 1.28;
  letter-spacing: -0.015em;
}
#smooth-content :is(.ed-sec-accent, .ed-cdark-accent, .ed-sec-title b, .ed-sec-title strong, .tp-section-title b, .tp-section-title strong) { font-weight: 600; }
#smooth-content .tp-about-title { font-weight: 400; line-height: 1.38; letter-spacing: -0.01em; }
#smooth-content :is(.tp-about-para, .ed-about-intro, .ed-vmv-text, .tp-awards-left p) { font-weight: 400; line-height: 1.6; }
/* Card and item titles */
#smooth-content :is(.ed-icard-title, .ed-ushow-title, .ed-offer-title, .ed-scard-title, .tp-portfolio-title,
  .ed-plan-name, .ed-spot-name, .ed-focus-copy h3, .ed-ofs-title, .ed-atile-name,
  .ed-quote-title, .tp-blog-content h3, .ed-prose-compact h3, .ed-vmv-title, .ed-cdark-client, .ed-case-client) {
  font-weight: 600;
  letter-spacing: -0.005em;
}
/* Running text */
#smooth-content :is(.ed-sec-intro, .ed-feature-text, .ed-igrid-intro, .ed-ushow-intro, .ed-banner-intro,
  .ed-contact-intro, .ed-steps-intro, .ed-blog-intro p, .tp-portfolio-para p, .tp-hero-customer-text p,
  .ed-hstage-intro, .ed-hubsec-lead, .ed-pban-text, .ed-shero-intro) { line-height: 1.6; }
#smooth-content :is(.ed-icard-text, .ed-ushow-text, .ed-scard-text, .ed-offer-detail, .ed-atile-text, .ed-plan-note,
  .ed-index-text, .ed-cdark-text, .ed-ofs-text, .ed-spot-bio, .ed-hsteps-text, .accordion-body, .tp-faq-details-para,
  .ed-faqx-a-inner, .accordion-body p, .ed-prose-compact p, .ed-post-body p, .ed-post-body li) { line-height: 1.6; }
/* Headlines: the home hero, service and location heroes, page banners — light
   and large, as the reference's h1. */
#smooth-content .tp-hero-title { font-weight: 400; letter-spacing: -0.02em; }
#smooth-content :is(.ed-hstage-title, .ed-shero-title, .ed-banner-title, .ed-pban-title, .tp-breadcrumb-title, .ed-qhero-title, .ed-post-title) {
  font-weight: 400 !important;
  letter-spacing: -0.018em;
}
#smooth-content :is(.ed-hstage-title, .ed-shero-title, .ed-banner-title, .tp-breadcrumb-title) b,
#smooth-content :is(.ed-hstage-title, .ed-shero-title, .ed-banner-title, .tp-breadcrumb-title) strong,
#smooth-content :is(.ed-hstage-title, .ed-shero-title, .ed-banner-title, .tp-breadcrumb-title) [class*="accent"] { font-weight: 600; }
/* UI: buttons and the menu in Manrope semibold. */
:is(.tp-btn, .tp-btn-lg, .tp-btn-sm, .tp-btn-black, .tp-btn-blue, .ed-btn, .tp-header-btn a, .tp-main-menu nav > ul > li > a) { font-weight: 600; }
/* Larger titles with sizes of their own: down to the same light-to-medium
   weights. */
#smooth-content :is(.ed-contact-title, .tp-portfolio-sectitle) { font-weight: 400 !important; }
#smooth-content :is(.ed-hsteps-title, .ed-qpanel-form-title, .ed-cform-title, .ed-pcard-title, .ed-faqx-help-title) { font-weight: 500; letter-spacing: -0.01em; }
#smooth-content .ed-faqx-q { font-weight: 600; }
/* Big figures (counters, scores, prices): medium rather than bold, as the
   reference sets its numbers. */
#smooth-content :is(.ed-about-stat-value, .ed-nband-value, .ed-tq-score-value, .ed-hstage-points-value,
  .ed-hstage-deal-value, .ed-offshow-stat-value, .ed-cdark-value, .tp-counter-number, .ed-case-figure) { font-weight: 500; }
/* The headline pill reads as typed ("We Are #1"), not in capitals. */
#smooth-content .tp-hero-title .tp-hero-title-sm { text-transform: none; letter-spacing: 0; }
/* The hero's side note is now the tagline, a longer line than "Websites, Apps
   & Growth." — set a little smaller so it keeps to three lines. */
#smooth-content .tp-hero-right-content h5 { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.3; font-weight: 500; }

/* FAQ heading width (client, 7 Nov). The cap was 24ch on the wrapper, which
   counts in the wrapper's 16px text: about 234px, so "Frequently Asked
   Questions" broke over three lines. The measure now sits on the heading,
   in its own size: one line for the usual title, two for a longer one. */
#smooth-content .ed-faq-head { max-width: none; }
#smooth-content .ed-faq-head .ed-sec-title { max-width: 30ch; }

/* Footer bottom menu: four links now (About Us, Contact, Terms & Policies,
   Payment Options). Each label stays on one line; when the row runs out of
   room the list wraps to a second row instead of breaking labels in two. */
.ed-footer .tp-footer-menu ul { flex-wrap: wrap; column-gap: 40px; row-gap: 6px; }
.ed-footer .tp-footer-menu ul li { margin-left: 0; margin-right: 0; }
.ed-footer .tp-footer-menu ul li a { white-space: nowrap; }
@media (max-width: 991.98px) {
  .ed-footer .tp-footer-menu ul { column-gap: 28px; }
}

/* Hero badges are white pills now, but the earlier divider style's
   "li:last-child { padding-right: 0 }" still applied, so the last pill's
   text touched its right edge (seen on Terms and Pay). Same padding on
   every pill. */
.ed-shero-badges li:last-child { padding-right: 15px; }

/* Pay page, PayPal: the official PayPal logo (vector, sharp at any size)
   sits centred at a modest size in its card, instead of a small JPG blown up
   to twice its width; and the "Pay via PayPal" button lines up with the
   middle of the card (client, 7 Nov). */
#pay-paypal .ed-feature-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 48px 40px;
}
#pay-paypal .ed-feature-media-inner {
  display: block;
  width: 100%;
  overflow: visible;
}
#pay-paypal .ed-feature-media img {
  display: block;
  width: 260px !important;
  max-width: 80%;
  max-height: none;
  margin: 0 auto;
}
@media (min-width: 992px) {
  /* The button column stretches to the card's height and centres the
     button in it, so the button sits level with the middle of the logo card. */
  #pay-paypal .ed-feature-body { align-items: stretch; }
  #pay-paypal .ed-feature-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0; /* a general rule adds 104px here, which lifted the button */
  }
  #pay-paypal .ed-feature-cta { margin-top: 0; align-self: flex-start; }
}