:root {
  --color-body: #f9f8f5;
  --color-body1: #ffffff;
  --color-accent-primary: #05cafa;
  --color-tech-primary: #f35ef2;
  --color-accent-secondary: #632fed;
  --color-accent-white: #fff;
  --color-accent-black: #000;
  --color-accent-grey: #c3c3c3;
  --color-text-light: #363636;
  --color-black-button: #101010;
  --color-border-light: #eae7e7;
  --color-border-dark: #2e2c2c;
  --color-text-grey-2: #737373;
  --color-text-grey-3: #979797;
  --color-accent-secondary-tint: #f4effd;
  --radius-lg: 16px;
  --font-primary: "Boldonse", system-ui;
  --font-body: "Plus Jakarta Sans", sans-serif;
  --font-mono: "Courier New", monospace;

  --text-xs: clamp(0.625rem, 1vw, 0.75rem);
  /* 10–12px */
  --text-sm: clamp(0.75rem, 1.2vw, 0.875rem);
  /* 12–14px */
  --text-base: clamp(1rem, 1.5vw, 1rem);
  /* 14–16px */
  --text-md: clamp(10px, 1.8vw + 11px, 12px);
  /* 16–18px */
  --text-lg: 16px;

  --text-xl: clamp(12px, 0.95vw + 6px, 16px);

  --text-1xl: clamp(16px, 1.1vw + 8px, 20px);
  --text-1xls: clamp(16px, 1.1vw + 10px, 24px);

  --text-1-2xl: clamp(24px, 1.15vw + 9px, 28px);

  --text-2xl: clamp(20px, 1.2vw + 8px, 28px);

  --text-3-4xl: clamp(20px, 1.3vw + 7px, 24px);
  --text-2-3xl: clamp(2.25rem, 3vw, 2.5rem);
  /* 36px-40px */
  --text-3xl: clamp(2rem, 4vw, 2.75rem);
  /* 32–44px */
  --text-4xl: clamp(1.35rem, 5vw, 3.67rem);
  /* 20–58px */
  --text-4-5xl: clamp(1.75rem, 3.5vw, 3.75rem);
  /* ~28px → 60px */
  --text-5xl: clamp(1.9375rem, 5vw, 2rem);
  /* 31–80px */
  --text-5-6xl: clamp(3rem, 4vw, 4.5rem);
  /* 48–72px */
  --text-6xl: clamp(1.875rem, 8vw, 5rem);
  /* 30–80px */

  /* --- Layout --- */
  --container-max: 1728px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  /* Real fallback until Header's ResizeObserver (see header.jsx) overwrites
     this with the actual measured height on mount. Breakpoints below are
     measured header-wrapper.offsetHeight values on the overlay-variant
     header (Home/Tech) at representative widths in each bucket — a flat
     150px here was routinely 40-60px off, which is what .hero-container's
     padding-top (below) turns into a visible layout shift once JS corrects
     it. Keep this in sync if header.css's padding/logo clamp()s change. */
  --navbar-height: 100px;
  /* Width of one column in the site's 4-column grid overlay (.v-lines-overlay,
     .hero-grid-lines, .faq-section__vlines, etc.) — content width of
     .container divided by 4. Used to cap SectionHeader's heading/paragraph/
     button widths so they align to the grid lines instead of arbitrary
     percentages. */
  --grid-col: calc((min(100vw, var(--container-max)) - (var(--gutter) * 2)) / 4);

  /* --- Section spacing scale ---
     Shared vertical padding/margin values for the gaps between/within
     page sections. Change a value here to update every section that
     references it. */
  --section-spacing-2xs: clamp(20px, 4vw, 30px);
  --section-spacing-xs: clamp(24px, 5vw, 40px);
  --section-spacing-sm: clamp(18px, 2vw, 42px);
  --section-spacing-md: clamp(40px, 3vw, 60px);
  --section-spacing-lg: clamp(36px, 5vw, 60px);
  --section-spacing-xl: clamp(60px, 6vw, 100px);
  --section-spacing-2xl: clamp(56px, 6vw, 90px);
  --section-spacing-3xl: clamp(80px, 8vw, 100px);

  /* Section-header top padding — used where a SectionHeader sits inside a
     stacked/message case-study or FAQ block. Kept separate from the
     --section-spacing-* scale above because these were already authored as
     distinct clamp ranges (different min/vw) rather than sharing one. */
  --section-spacing-header-xs: clamp(34px, 3.7vw, 60px);
  --section-spacing-header-sm: clamp(40px, 3vw, 70px);
  --section-spacing-header-lg: clamp(56px, 6vw, 80px);
  --section-spacing-header-xl: clamp(60px, 6vw, 100px);
  --section-spacing-header-2xl: clamp(115px, 11vw, 156px);
  --section-spacing-faq-header-sm: clamp(60px, 5vw, 80px);
  --section-spacing-faq-header-lg: clamp(80px, 5vw, 100px);

  /* Case-study block content padding / header margins — flat rem values
     reused verbatim across many case-study section components (see
     src/components/case-study/*). */
  --section-spacing-rem-sm: 1.75rem;
  --section-spacing-rem-md: 2rem;
  --section-spacing-rem-lg: 3rem;
  --section-spacing-rem-xl: 4rem;
  --section-spacing-client-details: clamp(4rem, 8vw, 5rem);
  --section-spacing-case-content-2100: clamp(40px, 6vw, 60px);
  --section-spacing-rem-2xl: 5rem;

  /* Page-level section spacing (Career, JobForm, Services, ServiceDetail,
     Work/Projects, About/ProjectsStats) — same rule as above: existing
     values lifted verbatim, exact-magnitude matches reuse the scale. */
  --section-spacing-cap-margin: clamp(60px, 6vw, 80px);
  --section-spacing-potential-desc-top: clamp(1.25rem, 4vw, 2.5rem);
  --section-spacing-potential-desc-bottom: clamp(3.75rem, 8vw, 5rem);
  --section-spacing-service-card-last: clamp(48px, 8vh, 100px);
  --section-spacing-project: clamp(3.8rem, 6vw, 5rem);
  --section-spacing-stats-grid: clamp(20px, 4vw, 40px);
  --section-spacing-stats-total-bottom: 7rem;

  /* Remaining shared components (TeamMembers, WhyUs, RecognitionImpact,
     RelevantWork, Banner/CTABar) — values lifted verbatim from source. */
  --section-spacing-team-grid: clamp(2.5rem, 3vw, 5rem);
  --section-spacing-why-panel: clamp(20px, 3vw, 30px);
  --section-spacing-impact-left-top: clamp(1.5rem, 3vw, 4rem);
  --section-spacing-impact-left-bottom: clamp(2rem, 4vw, 4rem);
  --section-spacing-rw-heading: clamp(24px, 3vw, 40px);
  --section-spacing-banner-sm: 1.5rem;
  --section-spacing-banner-lg: 2.25rem;

  /* Testimonials header-text top margin, per breakpoint (kept as the
     original flat values — not merged into a single clamp curve). */
  --section-spacing-header-text-sm: 20px;
  --section-spacing-header-text-md: 2rem;
  --section-spacing-header-text-lg: 3.5rem;

  --dot-base-radius: clamp(90px, 11vw, 160px);
  interpolate-size: allow-keywords;
}

/* --navbar-height per-breakpoint fallback — see the comment on its
   definition above. Measured header-wrapper.offsetHeight buckets (mobile
   Chrome, overlay variant): ~90-110px under 768px, ~110-141px 768-1023px,
   a real breakpoint drop to ~72-94px from ~1030px, settling ~94-96px from
   1440px, then back up around ~156px past 2200px. */
@media (min-width: 768px) {
  :root {
    --navbar-height: 125px;
  }
}

@media (min-width: 1030px) {
  :root {
    --navbar-height: 85px;
  }
}

@media (min-width: 1440px) {
  :root {
    --navbar-height: 95px;
  }
}

@media (min-width: 2200px) {
  :root {
    --navbar-height: 150px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  transition: 0.3s ease;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  background-color: var(--color-body1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  display: inline-block;
}

input,
textarea,
select {
  width: 100%;
  font-size: var(--text-lg);
}

.color-primary {
  color: var(--color-accent-primary);
}

.text-white {
  color: var(--color-accent-white);
}

.text-grey_2 {
  color: var(--color-accent-secondary);
}

.font-primary {
  font-family: var(--font-primary);
}

.font-body {
  font-family: var(--font-body);
}

.text-sm {
  font-size: var(--text-lg);
}

.text-lg {
  font-size: var(--text-2xl);
}

.visually-hidden {
  display: none;
}

.link::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: var(--color-accent-white);
  transition: width 0.3s;
}

.link:hover::after,
.link.active::after {
  width: 100%;
}

.text-style {
  position: relative;
  padding-left: 25px;
  margin-left: 4px;
  color: #363636;

  margin-bottom: 16px;
  color: var(--color-text-light);
}

.text-style::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  transform: rotate(45deg);
  width: 12px;
  height: 12px;
  background: #6a36d8;
}

.text-style.tech::before {
  background: var(--color-tech-primary);
}

.text-style .creative {
  margin-bottom: 2rem;
}

.client-section-heading .diamond-bullet {
  display: inline-block;
  width: clamp(0.5rem, 1.2vw, 0.75rem);
  height: clamp(0.5rem, 1.2vw, 0.75rem);
  transform: rotate(45deg);
  background-color: #6a36d8;
  /* fallback */
  flex-shrink: 0;
  margin-right: 12px;
  margin-top: 0px;
}

.container {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.social-media ul {
  list-style-type: none;
  padding: 0;
  display: flex;
}

.social-media.social-header ul {
  justify-content: flex-start;
  gap: 0;
}

.social-media.social-header ul li svg {
  width: clamp(20px, 1.8vw, 28px);
  height: clamp(20px, 1.8vw, 28px);
}

.badge {
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-size: var(--text-lg);
  color: #363636;
  /* color: var(--color-accent-secondary); */
  /* margin-bottom: 0.75rem; */

  /* white-space: nowrap; */
}

.heading {
  font-weight: 400;
  font-size: var(--text-3-4xl);
  font-family: var(--font-primary);
  width: 90%;
  /* --section-grid-span (set by SectionHeader's gridSpan prop, default 1)
     scales this to span multiple grid columns instead of just one. */
  max-width: calc(var(--grid-col) * var(--section-grid-span, 1));
  line-height: 1.6;
  margin: 0;
  color: var(--color-accent-black);
}

.heading.dark {
  color: var(--color-accent-white);
}

.highlight {
  color: var(--color-accent-secondary);
}

.highlight.tech {
  color: var(--color-tech-primary);
}

.paragraph {
  font-size: var(--text-lg);
  color: var(--color-text-light);
  line-height: 1.5;
  margin-bottom: 0.5rem;
  width: var(--para-width);
  /* Independent of .heading's span (see --section-grid-span below) so
     SectionHeader's paragraphGridSpan prop can size this without also
     resizing the heading. Falls back to --section-grid-span when
     paragraphGridSpan isn't explicitly set (its own JS default), and to
     1 if neither is present (e.g. variants that don't set either var). */
  max-width: calc(var(--grid-col) * var(--section-paragraph-grid-span, var(--section-grid-span, 1)));
}

@media (max-width: 1024px) {
  .paragraph:not(.advantages-hero-paragraph) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 1024px) {
  .heading:not(.advantages-hero-heading) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 1024px) {
  .paragraph:not(.advantages-hero-paragraph) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.paragraph.dark {
  color: var(--color-accent-white);
  line-height: 1.6;
  margin-bottom: clamp(1rem, 2vw, 2rem);
}

.badge.dark {
  color: var(--color-accent-white);
}

/* .badge.tech {
  color: var(--color-tech-primary);
} */
.text-style.dark {
  color: var(--color-accent-white);
}

.header-wrapper {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.header-wrapper.header-gray {
  background: transparent;
}

.header-wrapper.header-white {
  position: sticky;
  background: transparent;
}

/* Base styles directly on both classes */
.header-btn,
.footer-start-btn,
.btn-white {
  font-family: var(--font-body);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  padding: 0.8rem 2rem;
  transition: opacity 0.2s;
}

.header-btn:hover,
.footer-start-btn:hover,
.btn-white:hover {
  /* opacity: 0.8; */
}

/* Text link button — used in grid variant (e.g. View All Tools) */
.header-text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  margin-top: clamp(12px, 2vw, 20px);
  font-family: var(--font-body);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  color: var(--color-primary, #6c2bd9);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.header-text-link:hover {
  opacity: 0.75;
}

/* Individual overrides */
.header-btn {
  background: var(--color-black-button);
  color: var(--color-accent-white);
  font-size: var(--text-xl);
  width: 100%;
  max-width: var(--grid-col);
}

/* .btn-animated (shared, applied via AnimatedButton) sets white-space:
   nowrap, which fights the max-width above — the text just bleeds out
   past the box instead of fitting inside it. Override scoped to the
   combined selector (higher specificity than either class alone) so
   only the SectionHeader button wraps, not every .btn-animated. */
.header-btn.btn-animated {
  white-space: normal;
  text-align: center;
}

.footer-start-btn {
  background: var(--color-accent-black);
  color: var(--color-accent-white);
  font-size: var(--text-lg);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  /* no min-width — yahi fix hai */
}

.btn-white {
  background: var(--color-accent-white);
  color: var(--color-accent-black);
  font-size: var(--text-lg);
  width: 100%;
  text-align: center;
}

/* --- Section Header --- */
.section-header {
  display: flex;
  padding-bottom: var(--section-spacing-header-xs);
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.title-row {
  display: flex;
  align-items: start;
  gap: 1rem;
  flex-wrap: wrap;
}

.section-header.centered .title-row {
  /* justify-content: space-between; */
}

.header-left .badge {
  /* margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem); */
}

.header-left .paragraph {
  margin-top: clamp(16px, 2vw, 28px);
  margin-bottom: 0;
  /* font-size: var(--text-lg); */
  font-size: 16px;
}

.section-header.stacked {
  flex-direction: column;
  gap: 1rem;
}

.header-content-wrapper.stacked .header-left {
  display: flex;
  flex-direction: column;
  /* gap: 20px; */
}

.testimonials__header-text .section-header.centered {
  display: grid;
  grid-template-columns: 1.13fr 3fr;

  align-items: flex-start;
  width: 100%;
  /* margin: 80px 0 0; */
}

.section-header.centered {
  display: grid;
  grid-template-columns: 1fr 3fr;

  align-items: flex-start;
  width: 100%;
  /* margin: 80px 0 0; */
}

/* .section-header.centered > .badge { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } */
.section-header.right-aligned {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}

.section-header.side-button {
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
}

.section-header.side-button .title-row {
  justify-content: flex-start;
}

.section-header.side-button .header-left {
  flex: 0 0 50%;
  max-width: 50%;
}

.section-header.side-button .header-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.section-header.side-button .header-btn {
  width: 100%;
}

/* --- Section Header Bullet Points Variant --- */
.section-header.bullet-points {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  /* padding: 5rem 0; */
  width: 100%;
}

.bullet-points__vlines {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
}

.bullet-points__vlines span {
  border-left: 1px solid var(--color-border-light);
}

.bullet-points__vlines span:last-child {
  border-right: 1px solid var(--color-border-light);
}

.bullet-points__badge {
  grid-column: 1;
  position: relative;
  z-index: 1;
}

.bullet-points__col {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-left: clamp(0.75rem, 1.75vw, 1rem);
}

.bullet-points__col.empty {
  display: block;
}

.bullet-points__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bullet-points__list li {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-light);
  margin-bottom: 12px;
  white-space: nowrap;
}

.bullet-points__list li::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-text-light);
}

@media (max-width: 768px) {
  .section-header.bullet-points {
    grid-template-columns: 1fr;
    /* padding: 3.75rem 0; */
  }

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

  .bullet-points__vlines span:nth-child(4) {
    display: none;
  }

  .bullet-points__vlines span:nth-child(3),
  .bullet-points__vlines span:last-child {
    border-right: 1px solid var(--color-border-light);
  }

  .bullet-points__badge {
    grid-column: 1;
    margin-bottom: 1.25rem;
  }

  .bullet-points__col {
    padding-left: 1.5rem;
  }

  .bullet-points__col.empty {
    display: none;
  }

  .bullet-points__list li {
    white-space: normal;
  }
}

.header-btn {
  width: 100%;
  max-width: var(--grid-col);
}

.section-header.split .header-left {
  flex: 1.2;
}

.section-header.split .header-right {
  flex: 1;
}

/* --- Header Content Wrappers --- */
.header-content-wrapper.split,
.header-content-wrapper.split-centered-right {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* gap: clamp(2rem, 5vw, 4rem); */
  width: 100%;
  text-align: left;
  max-width: 100%;
  margin-top: var(--section-spacing-header-xl);
}

/* secondPartColumn (e.g. <SectionHeader variant="split" secondPartColumn={4} />):
   moved out of inline styles and into CSS custom property + class here so
   the mobile/tablet breakpoints below can override `display` back to flex
   for stacking. Inline `display:grid` never got reset by those breakpoints
   (they only forced flex-direction/width), so it silently stayed a 4-column
   grid on small screens regardless of viewport. */
.header-content-wrapper.split.has-second-part-column,
.header-content-wrapper.split-centered-right.has-second-part-column {
  display: grid;
  grid-template-columns: repeat(4, var(--grid-col));
}

.header-content-wrapper.split.has-second-part-column .header-left,
.header-content-wrapper.split-centered-right.has-second-part-column .header-left {
  grid-column: 1 / var(--second-part-column);
}

.header-content-wrapper.split.has-second-part-column .header-right,
.header-content-wrapper.split-centered-right.has-second-part-column .header-right {
  grid-column: var(--second-part-column) / 5;
}

.header-content-wrapper.split .header-left,
.header-content-wrapper.split-centered-right .header-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.header-content-wrapper.split .header-right,
.header-content-wrapper.split-centered-right .header-right {
  flex: 1;
}

.header-content-wrapper.split .header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.header-content-wrapper.split .header-right .header-btn {
  width: 100%;
  align-self: end;
}

.header-content-wrapper.split-centered-right .header-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  max-width: 750px;
}

.header-content-wrapper.split-centered-right .header-right .header-btn {
  width: 100%;
}

.header-content-wrapper.side-button {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* align-items: center; */
}

.header-content-wrapper.centered {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: clamp(18.75rem, 70vw, 49.375rem);
  margin-inline: auto;
}

.header-content-wrapper.centered .header-left {
  width: 100%;
}

.header-content-wrapper.centered .paragraph {
  margin-inline: auto;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  width: 100%;
}

.header-content-wrapper.centered .header-right {
  width: 100%;
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  justify-content: center;
}

.header-content-wrapper.centered .header-btn {
  width: auto;
  min-width: min(clamp(12.5rem, 25vw, 20rem), var(--grid-col));
}

.header-content-wrapper.right-aligned {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  max-width: clamp(25rem, 60vw, 55rem);
  width: 100%;
}

.header-content-wrapper.right-aligned .header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* margin-top: 20px; */
  /* gap: 20px; */
}

/* .header-content-wrapper.right-aligned .badge {
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
} */
.header-content-wrapper.right-aligned .paragraph {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  /* margin-left: auto; */
  margin-right: 0;
}

.header-content-wrapper.right-aligned .header-right {
  margin-top: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .header-content-wrapper.right-aligned .header-right {
    margin-top: clamp(2rem, 4vw, 3rem);
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}

.header-content-wrapper.right-aligned .header-btn {
  width: auto;
  min-width: min(clamp(12rem, 20vw, 20rem), var(--grid-col));
}

/* --- V-Lines Overlay --- */
.v-lines-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  z-index: 1;
}

.v-line {
  border-left: 1px solid var(--color-border-light);
}

.v-line:last-child {
  border-right: 1px solid var(--color-border-light);
}

.responsive-vlines {
  --vlines-color: var(--color-border-light);
  --vlines-inset-inline: var(--gutter);
  --vlines-z: 1;
  position: absolute;
  inset: 0 var(--vlines-inset-inline);
  z-index: var(--vlines-z);
  pointer-events: none;
  background-image:
    linear-gradient(var(--vlines-color), var(--vlines-color)),
    linear-gradient(var(--vlines-color), var(--vlines-color)),
    linear-gradient(var(--vlines-color), var(--vlines-color)),
    linear-gradient(var(--vlines-color), var(--vlines-color)),
    linear-gradient(var(--vlines-color), var(--vlines-color));
  background-position:
    left top,
    25% top,
    50% top,
    75% top,
    right top;
  background-repeat: no-repeat;
  background-size: 1px 100%;
}

@media (max-width: 768px) {
  .responsive-vlines {
    background-image:
      linear-gradient(var(--vlines-color), var(--vlines-color)),
      linear-gradient(var(--vlines-color), var(--vlines-color)),
      linear-gradient(var(--vlines-color), var(--vlines-color)),
      linear-gradient(var(--vlines-color), var(--vlines-color));
    background-position:
      left top,
      33.333% top,
      66.667% top,
      right top;
  }
}

/* --- Plus Icon (shared SVG) --- */
:is(.border-bottom-plus, .h-border-plus)::before,
:is(.border-bottom-plus, .h-border-plus)::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 10;
}

.border-bottom-plus {
  position: relative;
  border-bottom: 1px solid var(--color-border-light);
}

.border-bottom-plus::before,
.border-bottom-plus::after {
  bottom: -7px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25994 10V5.74H-5.85318e-05V4.24H4.25994V0H5.75994V4.24H9.99994V5.74H5.75994V10H4.25994Z' fill='%23979797'/%3E%3C/svg%3E");
}

.border-bottom-plus::before {
  left: -7px;
}

.border-bottom-plus::after {
  right: -7.5px;
}

.advantage-item:last-child::before,
.advantage-item:last-child::after,
.advantages-footer .footer-col::before,
.advantages-footer .footer-col::after,
.advantages-title:first-child::before,
.advantages-title:first-child::after {
  display: none !important;
}

.footer-section {
  display: flex;
  padding-block: 1.5rem;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-accent-black);
}

/* --- Advantages --- */
.advantages-container {
  position: relative;
  width: 100%;
}

.advantages-container .v-lines-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gutter);
  right: var(--gutter);
  width: auto;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* --- Framer Dot Reveal (ball scale-enlarge animation) --- */
.framer-2bt3nz {
  background-color: #1a1c20;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: flex-end;
  /* height: clamp(460px, calc(32vw + 461px), 1200px); */
  /* height: clamp(340px, 38vw, 520px); */
  margin-top: 0;
  padding: 0;
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
}

.framer-1tpn2vu {
  --reveal-scale: 0;
  align-items: center;
  display: flex;
  flex: none;
  flex-flow: column;
  gap: 0;
  height: 118%;
  justify-content: flex-end;
  padding: 0;
  pointer-events: none;
  position: relative;
  width: 100%;
  z-index: 1;
  clip-path: inset(-250vh 0 0 0);
  overflow: visible;
}

.framer-1sxj8uj {
  align-items: center;
  display: flex;
  flex: none;
  flex-flow: column;
  gap: 0;
  height: 24px;
  justify-content: center;
  overflow: visible;
  padding: 0;
  pointer-events: none;
  position: relative;
  user-select: none;
  width: 100%;
  z-index: 1;
}

.framer-1mrxzx3 {
  aspect-ratio: 1;
  background-color: var(--color-body1, #ffffff);
  border-radius: 50%;
  flex: none;
  height: auto;
  overflow: hidden;
  pointer-events: none;
  transform-origin: 50% 50%;
  user-select: none;
  width: clamp(180px, 22vw, 320px);
  will-change: transform;
  position: relative;
  bottom: -20vh;
}

.framer-1cv5fi0 {
  align-items: center;
  display: flex;
  flex: none;
  flex-flow: column;
  gap: 0;
  height: min-content;
  justify-content: center;
  overflow: visible;
  padding: 0;
  position: relative;
  transform-origin: 50% 50%;
  width: 100%;
  z-index: 2;
  margin-top: clamp(-170px, -11vw, -92px);
  will-change: transform, clip-path;

  clip-path: circle(calc(var(--dot-base-radius) * var(--reveal-scale, 0)) at 50% 0%);
}

.framer-1cv5fi0 .advantages-container {
  background: transparent;
  padding-top: var(--section-spacing-sm);
  padding-bottom: var(--section-spacing-xl);
}

.framer-1cv5fi0 .advantages-container .v-lines-overlay {
  top: clamp(-1013px, -77vw, -560px);
  bottom: 0;
  height: auto;
}

@supports not (overflow: clip) {
  .framer-2bt3nz {
    overflow-x: hidden;
  }
}

@media (max-width: 809.98px) {
  .hidden-4s4wnh {
    display: none !important;
  }

  .framer-2bt3nz {
    background-color: var(--color-body1, #ffffff);
    height: auto;
    margin-top: 0;
    overflow: visible;
  }

  .framer-1tpn2vu {
    clip-path: none;
    height: auto;
  }

  .framer-1cv5fi0 {
    clip-path: none !important;
    margin-top: 0;
    opacity: 1 !important;
    transform: none !important;
  }

  .framer-1cv5fi0 .advantages-container {
    background: var(--color-body1, #ffffff);
    padding-top: var(--section-spacing-xl);
  }

  .framer-1cv5fi0 .advantages-container .v-lines-overlay {
    top: 0;
  }
}

.advantages-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  z-index: 1;
  /* padding-top: clamp(60px, 5vw, 80px); */
  /* margin-top:0.7rem; */
}

/* ── Stacked advantages layout ── */
.advantages-stacked {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.advantages-header-row {
  position: relative;
  z-index: 2;
  /* padding-bottom: clamp(1.5rem, 3vw, 2.5rem); */
}

.advantages-header-badge {
  position: relative;
}

.advantages-header-row--hero {
  display: flex;
  justify-content: center;
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
  padding-bottom: var(--section-spacing-header-lg);
}

.advantages-hero-heading {
  width: 100%;
  max-width: 1650px;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(32px, 6vw, 80px);
}

.advantages-hero-heading__accent {
  font-size: 48px;
  color: #737373;
}

.advantages-hero-side {
  display: none;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 20px);
}

.advantages-hero-paragraph {
  margin: 0;
  width: auto;
  text-align: left;
}

.advantages-header-row--fallback {
  display: none;
}


@media (max-width: 768px) {
  .advantages-header-row--hero {
    display: none !important;
  }

  .advantages-header-row--fallback {
    display: block;
  }
}

/* Push the advantages list area to start at vline 2 (25% from left) */
.advantages-list-area {
  position: relative;
  z-index: 2;
  margin-left: 25%;
  margin-right: 25%;
}

.advantages-list-area .advantages-title {
  padding-bottom: clamp(16px, 1vw, 20px);
}

.advantages-list-area .advantages-list {
  position: relative;
  z-index: 2;
}

.advantages-list-area .advantages-list::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 10px;
  background-color: var(--color-body1);
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

.advantages-list-area .advantage-item {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px clamp(12px, 4vw, 12px);
  transition: background 0.3s ease;
}

.advantages-list-area .advantages-title:first-child::before,
.advantages-list-area .advantages-title:first-child::after {
  display: none !important;
}

@media (min-width: 769px) {
  .advantages-stacked {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0;
  }

  .advantages-header-row--hero {
    grid-column: 1 / 5;
    grid-row: 1;
  }

  .advantages-hero-side {
    display: flex;
    grid-column: 1 / 2;
    grid-row: 2;
  }

  .advantages-list-area {
    grid-column: 3 / 5;
    grid-row: 2;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 768px) {
  .advantages-grid {
    display: flex;
    flex-direction: column;
    /* padding-top: 20px; */
  }

  .right-col {
    order: 1;
  }

  .left-col {
    order: 2;
  }

  /* Stacked layout mobile */
  .advantages-list-area {
    margin-left: 0;
    margin-right: 0;
  }

  .advantages-list-area .advantages-list {
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
  }

  .advantages-list-area .advantages-list::after {
    display: none;
  }
}

.advantages-column {
  /* border-left: 1px solid var(--color-border-light);
  border-right: 1px solid var(--color-border-light); */
  display: flex;
  flex-direction: column;
}

@media (min-width: 769px) {
  .advantages-grid .advantages-column+.advantages-column {
    margin-left: -1px;
  }
}

.right-col {
  padding-left: clamp(4rem, 5vw, 8rem);
  justify-content: center;
}

.advantages-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  font-size: 10px;
  color: #adadad;
  /* text-transform: uppercase; */
  flex-grow: 1;
}

@media (max-width: 768px) {
  .advantages-footer {
    grid-template-columns: 1fr auto;
  }
}

.what-we-do-list__header .header-content-wrapper.split .header-right {
  display: flex;
  flex-direction: column;
}

.what-we-do-list__header .header-content-wrapper.split:not(:has(.paragraph)) .header-right {
  align-items: flex-end;
  align-self: end;
}

.footer-col {
  padding: 1.5rem 0 1.5rem 1rem;
  /* border-left: 1px solid var(--color-border-light); */
  margin-left: -1px;
  font-size: var(--text-sm);
}

.footer-col.centered-text {
  text-align: center;
  color: var(--color-accent-black);
}

.footer-col.right-text {
  text-align: right;
  color: var(--color-accent-black);
}

.advantages-list {
  position: relative;
  z-index: 2;
}

.advantages-list::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 10px;
  background-color: var(--color-body1);
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

.advantage-item {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px clamp(12px, 4vw, 12px);
  transition: background 0.3s ease;
}

.advantages-title {
  padding-bottom: clamp(16px, 1vw, 20px);
}

.advantages-title h3 {
  font-family: var(--font-body);
  font-size: 20px;
  /* font-size: var(--text-1xl); */
  font-weight: 600;
  color: var(--color-text-grey-3);
}

/* .advantages-title h3 span {
  color: var(--color-accent-black);
} */
.item-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.item-number {
  width: 40px;
  height: 40px;
  background: var(--color-accent-black);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: 600;
}

.item-text {
  font-size: var(--text-lg);
  color: var(--color-accent-black);
}

.item-icon,
.about-service-icon {
  width: 24px;
  height: 24px;
}

.advantages-right {
  padding-left: clamp(2rem, 5vw, 6rem);
  display: flex;
  align-items: center;
}

.advantages-right .header-content-wrapper.right-aligned {
  max-width: 100%;
}

/* --- Stats --- */
.stats-section-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.stats-section--message {
  position: relative;
}

.stats-section__scroll-track {
  position: relative;
  background-image:
    linear-gradient(var(--color-border-light), var(--color-border-light)),
    linear-gradient(var(--color-border-light), var(--color-border-light)),
    linear-gradient(var(--color-border-light), var(--color-border-light)),
    linear-gradient(var(--color-border-light), var(--color-border-light)),
    linear-gradient(var(--color-border-light), var(--color-border-light));
  background-position:
    0 top,
    25% top,
    50% top,
    75% top,
    100% top;
  background-repeat: no-repeat;
  background-size: 1px 100%;
}

.stats-section__pin {
  position: sticky;
  top: calc((100svh - 75svh) / 2);
  height: 75svh;
  min-height: 75svh;
  display: flex;
  align-items: stretch;
}

.stats-bg {
  width: 100%;
  min-height: calc(20vh + 150px);
  background-color: #f3f3f3;
  background-image: url("/images/sdsLines.png");
  background-repeat: no-repeat;
  background-position: 62% bottom;
  /* sdsLines.png's native pixel size (878x420) is roughly double the old
     sdsLines.svg's intrinsic size (431x195) — with no background-size set,
     browsers render a raster image at its native size, so swapping the
     file alone doubled it on screen. Locking the height and letting width
     scale keeps the original visual size regardless of the source file's
     own pixel dimensions. */
  background-size: auto 195px;
  position: relative;
  overflow: hidden;
}

/* .stats-bg {
  width: 100%;
  background-color: #f3f3f3;
  background-image: url("/images/statsDesktop_swirl.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(100%, 1820px) auto;
  position: relative;
  overflow: hidden;
} */
/* .stats-bg__phone-desktop {
    position: absolute;
    right: -544px;
    bottom: -409px;
    width: min(84%, 1120px);
    height: auto;
    z-index: 1;
    pointer-events: none;
} */
.stats-bg__phone-desktop {
  position: absolute;
  right: -32px;
  bottom: 38px;
  width: min(32%, 280px);
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.stats-bg__gradient-desktop {
  position: absolute;
  /* --gradient-size drives both the box and the offset, so right/bottom
       are always exactly -40% of its own current size — 40% of the image
       stays cropped past .stats-bg's overflow:hidden edge at every
       breakpoint, no matter how --gradient-size changes below. */
  --gradient-size: min(66%, 1200px);
  right: calc(var(--gradient-size) * -0.4);
  bottom: calc(var(--gradient-size) * -0.4);
  width: var(--gradient-size);
  height: auto;
  aspect-ratio: 1 / 1;
  z-index: 0;
  pointer-events: none;
}

@media (min-width: 769px) and (max-width: 1199px) {
  .stats-bg__phone-desktop {
    width: clamp(280px, 30vw, 610px);
    bottom: 12px;
    right: -49px;
  }

  .stats-bg__gradient-desktop {
    --gradient-size: clamp(800px, 68vw, 1040px);
  }
}

@media (min-width: 1200px) {

  /* --grid-col already caps itself at --container-max (see :root), so
     scaling off it lets these grow with the viewport up through large/4K
     screens without needing extra breakpoints past this one. */
  .stats-bg__phone-desktop {
    width: clamp(280px, calc(var(--grid-col) * 1), 450px);
  }

  .stats-bg__gradient-desktop {
    --gradient-size: clamp(620px, calc(var(--grid-col) * 2.3), 960px);
  }
}

.project-border {
  border-left: var(--color-border-light) solid 1px;
  border-right: var(--color-border-light) solid 1px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  border-left: var(--color-border-light) solid 1px;
  border-right: var(--color-border-light) solid 1px;
  position: relative;
  z-index: 2;
}

.stats-grid-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  position: relative;
}

.stats-grid-card .v-lines-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 133.333%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  z-index: 0;
}

/* @media (max-width: 600px) {
  .stats-grid-card {
    grid-template-columns: 1fr;
  }
} */
.grid-cell {
  position: relative;
  /* border-left: 1px solid var(--color-border-light); */
  padding: clamp(1.5rem, 4vw, 4rem);
}

.grid-cell:last-child {
  /* border-right: 1px solid var(--color-border-light); */
}

.col-span-3 {
  grid-column: span 3;
}

.border-bottom {
  border-bottom: 1px solid var(--color-border-light);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 768px) {
  .stat-content {
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }
}

@media (max-width: 1024px) {
  .stat-content {
    flex-wrap: wrap;
  }
}

.stat-value {
  font-size: var(--text-2xl);
  color: var(--color-accent-black);
  display: block;
  font-family: var(--font-primary);
}

.stat-label {
  font-size: var(--text-xl);
  color: var(--color-text-light);
}

.stats-text-wrapper {
  max-width: 700px;
}

.stats-copy-line {
  display: block;
}

.stats-text-wrapper .grid-cell {
  padding-inline: clamp(1.5rem, 3vw, 3rem);
}

.stats-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-light);
  font-size: var(--text-lg);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.diamond {
  width: 12px;
  height: 12px;
  background: var(--color-text-light);
  transform: rotate(45deg);
}

.stats-heading {
  font-family: var(--font-primary);
  font-size: var(--text-1-2xl);
  font-weight: 400;
  margin-bottom: 2rem;
}

.stats-image-cell {
  position: relative;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  z-index: 2;
}

.phone-img {
  width: 100%;
  height: auto;
  z-index: 2;
}

.stats-section--message .stats-bg {
  height: 100%;
  min-height: 75svh;
  display: flex;
  align-items: stretch;
}

.stats-section--message .stats-grid {
  align-self: stretch;
}

.stats-section--message .main-text-cell {
  display: flex;
  align-items: flex-end;
}

.stats-section--message .stats-grid-card {
  align-content: start;
}

.bg-glow {
  display: none;
}

/* ══════════════════════════════════════════
   ADD to your existing CSS
   ══════════════════════════════════════════ */

/* ── left-header: heading col ── */
.adv-heading-col {
  padding-right: clamp(2rem, 4vw, 4rem);
  border-left: 1px solid var(--color-border-light);
  border-right: 1px solid var(--color-border-light);
}

/* ── left-header: metrics col ── */
.adv-metrics-col {
  display: flex;
  position: relative;

  flex-direction: column;
  /* border-left: 1px solid var(--color-border-light); */
  border-right: 1px solid var(--color-border-light);
}

/* ── Metric row ── */
.metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
  gap: 1rem;
  border: var(--color-border-light) 1px solid;
}

.metric-row__left {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.metric-row__label {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-accent-black);
  margin: 0;
}

.metric-row__desc {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin: 0;
  line-height: 1.5;
}

.metric-row__value {
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  color: var(--color-accent-black);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   FEATURED-WORK VARIANT
   Paste into your existing stylesheet.
   All rules scoped to .section-header.featured-work
   ═══════════════════════════════════════════════════════ */

/* ── TOP ROW: badge | heading | paragraph ── */
.fw-top-row {
  display: grid;
  grid-template-columns: 1fr 3fr;

  padding-top: 1rem;

  padding-bottom: clamp(4rem, 13vw, 19rem);
}

.fw-card-rightCenter {
  column-span: 3;
  display: flex;
  justify-content: space-between;
}

.fw-top-row__left {}

.fw-top-row__center {
  display: flex;
  width: 100%;
}

.fw-top-row__right {
  display: flex;
  justify-content: flex-end;
  width: 75% !important;
}

.fw-top-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--color-text-light, #888);
  /* letter-spacing: 0.06em; */
}

.fw-top-badge img {
  width: 12px;
  height: 12px;
}

/* Make top heading match Figma — medium weight centered title */
.fw-top-heading {
  font-family: var(--font-primary, serif);
  font-size: var(--text-3-4xl);
  font-weight: 500;
  /* was 400 */
  color: var(--color-accent-black, #000000);
  line-height: 1.5;
  margin: 0;
  position: relative;
  text-align: center;
}

/* Shift card ratio so image panel is dominant — matches Figma ~40/60 */
.fw-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  /* ← 1fr hatao teesre ka */
  min-height: clamp(280px, 32vw, 420px);
  background: #f0efec;
  overflow: visible;
}

.fw-top-paragraph {
  font-size: var(--text-lg);
  color: #363636;
  line-height: 1.55;
  margin: 0;
  position: relative;

  text-align: right;
  /* max-width: 260px; */
}

/* ── LEFT: static text panel ── */
.fw-card__left {
  position: relative;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  padding: clamp(1.75rem, 2.8vw, 2.5rem) clamp(1.5rem, 2.8vw, 2.75rem);
  /* Was #f0efec (same shade as .fw-card's own background) — grid items
     paint at their own stacking level ordered by DOM position, so this
     opaque fill sat on top of the sdsLines watermark (an earlier sibling)
     everywhere under this column, cutting it off at the column boundary.
     Transparent lets .fw-card's shared background (and the watermark
     painted just above it) show through instead; text here still stays
     legible since it's part of this same later-painted grid item. */
  background: transparent;
  overflow: hidden;
  /* ensure left panel never shrinks below its content */
  min-width: 0;
  gap: 2.5rem;
  /* z-index: 5; */
}

.fw-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-lg);
  color: #363636;
  flex-shrink: 0;
}

.fw-card__badge img {
  width: 20px;
  height: 20px;
}

.fw-card__text {
  position: relative;
  overflow: hidden;
  min-height: 180px;
}

/* COMMON */
.fw-text-slide {
  width: 100%;
  transition:
    transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.42s ease;
}

/* CURRENT TEXT GOING DOWN */
.fw-text-out {
  transform: translateY(80px);
  opacity: 0;
}

/* INCOMING TEXT */
.fw-text-incoming {
  position: absolute;
  inset: 0;

  transform: translateY(-80px);
  opacity: 0;

  animation: textSlideIn 0.42s forwards;
}

/* INCOMING ENTER */
@keyframes textSlideIn {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Prevent global .heading styles bleeding in */
.fw-card__heading {
  font-family: var(--font-primary, serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
  color: #000000;
  line-height: 2;
  margin: 0;
  /* reset any global heading overrides */
  text-transform: none;
  letter-spacing: normal;
}

.fw-card__paragraph {
  font-size: var(--text-lg);
  color: #363636;
  line-height: 1.6;
  margin: 0;
  max-width: 640px;
}

/* ── DOTS ── */
.fw-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-block: 40px;
  /* margin-top:4.9rem; */
}

.fw-dots-sm {
  display: none;
  /* default hide */
}

@media (max-width: 768px) {
  .fw-dots {
    display: none;
    /* large wale hide */
  }

  .fw-dots-sm {
    display: flex;
    /* small wale show */
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    margin-top: 1rem;
  }

  .fw-top-row {
    padding-top: 0;
  }

  .fw-card-rightCenter {
    display: flex;
    gap: 1.25rem;
    flex-direction: column;
  }

  .item-number {
    width: 40px;
    height: 40px;
    background: #e3e3e3;
    color: black;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    padding: 12px;
  }
}

.fw-dot {
  position: relative;
  height: 3px;
  width: 36px;
  background: #979797;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  overflow: visible;
  padding: 0;
  transition: width 0.25s ease;
}

.fw-dot--active {
  width: 30px;
}

.fw-dot__fill {
  display: block;
  position: absolute;
  inset: 0 auto 0 0;
  background: #000000;
  border-radius: 2px;
  height: 100%;
  transition: width 50ms linear;
}

/* GPU-composited replacement for the old setInterval-driven width tween —
   same 0%->100% fill, driven by the compositor instead of React state. */
.fw-dot__fill--animated {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  animation-name: fw-dot-fill-progress;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  will-change: transform;
}

@keyframes fw-dot-fill-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* Right panel normal grid cell — sirf top/bottom overflow karo */
.fw-card__right {
  position: relative;
  overflow: visible;
  /* ← hidden hatao */
  background: transparent;
  margin-top: -70px;
  /* ← yeh hatao */
  margin-bottom: 0px;
  /* ← sirf neeche rakho */
  /* z-index: 5; */
  max-height: 650px;
}

@media (max-width: 768px) {
  .fw-card__right {
    margin-top: 0;
    /* Desktop pe normal margin rakho */
  }
}

/* Image apne parent se bahar jayegi */
.fw-img {
  position: absolute;
  bottom: 0;
  top: auto;
  left: 0;
  right: -40px;
  /* ← right side overflow — container padding match karo */
  bottom: 0;
  width: auto;
  max-height: 650px;
  /* ← add */
  object-fit: cover;
  object-position: center top;
  display: block;
}

.fw-img-slot {
  position: absolute;
  top: auto;
  left: 0;
  bottom: 0;
  right: -40px;

  padding: 5rem 2.5rem 0rem 3rem;
}

@media (max-width: 768px) {
  .fw-img-slot {
    padding: 0rem 0rem 0 0rem;
  }
}

.fw-img-slot img {
  width: 100%;

  object-fit: cover;
  object-position: center top;
  display: block;
  max-height: 600px;
}

@keyframes fw-img-blink-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fw-img-blink-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fw-img-outgoing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  animation: fw-img-blink-out 0.2s ease-out forwards;
}

.fw-img-incoming {
  position: absolute;
  top: 0;
  left: 0;
  right: -40px;
  bottom: 0;
  width: auto;
  height: 100%;
  z-index: 2;
  opacity: 0;
  animation: fw-img-blink-in 0.3s ease-in forwards;
  animation-delay: 0.8s;
  /* ← outgoing khatam hone ke baad */
}

/* Text same */
.fw-text-out {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

@keyframes textSlideIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fw-text-incoming {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: textSlideIn 0.3s ease-in forwards;
  animation-delay: 0.8s;
  /* ← same delay */
}

/* Children of fw-img-incoming also need to fill */
.fw-img-incoming .fw-img,
.fw-img-incoming .fw-img-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  max-height: 650px;
}

.fw-img-incoming .fw-img-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@keyframes fw-img-slide-in {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0%);
  }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .fw-card {
    display: flex;
    flex-direction: column;
  }

  .header-left .paragraph {
    margin-top: 20px;
  }

  .fw-card__right {
    height: 290px;
    /* ← height badao */
    margin: 0;
    overflow: visible;
    /* ← hidden hatao */
    position: relative;
  }

  .fw-img-slot {
    position: absolute;
    inset: 0;
    right: 0;
    /* ← -24px hatao mobile pe */
    width: 100%;
    max-height: 650px;
    overflow: hidden;
    /* ← slot ke andar clip */
  }

  .fw-img-slot img {
    width: 100%;
    max-height: 650px;
    object-fit: cover;
    object-position: center top;
  }

  .fw-img {
    position: absolute;
    inset: 0;
    right: 0;
    width: 100%;
    max-height: 650px;
    object-fit: cover;
  }

  /* Dots visible rahein */
  /* .fw-card__left {
    overflow: visible;
    padding: 0.75rem;
  } */

  .fw-dots {
    margin-top: 1rem;
  }
}

.fw-img-incoming .fw-img,
.fw-img-incoming .fw-img-slot {
  max-height: 650px;
  max-width: 650px;
}

@media (max-width: 900px) {
  .fw-top-row__center {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .fw-top-heading {
    text-align: left;
  }

  .fw-top-paragraph {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .fw-top-row {
    grid-template-columns: 1fr;
    gap: 0rem;
    padding-top: 0;
  }

  .fw-top-row__right {
    justify-content: flex-start;
    width: 100% !important;
  }

  .fw-top-paragraph {
    text-align: left;
    max-width: 100%;
    width: auto !important;
  }

  .fw-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 280px;
  }

  .fw-card__left {
    border-right: none;
    padding: 0.75rem;
    gap: 8px;
  }

  .fw-card__right {
    min-height: 290px;
    /* z-index: 5; */
  }
}

.sdsLinesBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  /* ← sirf left panel tak */
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ── SECTION ── */
.project-section {
  padding: var(--section-spacing-xl) 0;
}

.project-card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── HEADER ROW ── */
.project-header {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  position: relative;
  gap: 0.8rem;
  padding-bottom: var(--section-spacing-xs);
}

.project-section-title {
  font-family: var(--font-primary, serif);
  font-size: var(--text-3-4xl);
  font-weight: 400;
  color: #000000;
  margin: 0;
  flex-shrink: 0;
}

/* ── FILTER BAR ── */
.project-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
}

.project-filter-btn {
  background: none;
  border: none;
  font-family: var(--font-body);
  cursor: pointer;
  font-size: var(--text-lg);
  color: #737373;
  padding: 0.25rem 0.45rem;
  transition: color 0.2s ease;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.project-filter-btn:hover {
  color: #000000;
}

.project-filter-btn--active {
  color: #000000;
  font-weight: 700;
}

/* ── GRID ── */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  /* 1px gap = border line effect */
  background: #f3f3f3;
  /* gap color acts as border */
  padding: 1.25rem;
  position: relative;
}

/* ── CARD ── */
.project-card {
  background: #101010;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: white;
  padding: 1.3rem;
  transition: background 0.25s ease;
}

.project-card:hover {
  background: #000000;

  .project-section-title {
    color: #ffffff;
  }

  .project-card__image {
    padding: 0rem;
  }
}

/* ALL text inside card becomes white */
.project-card:hover .project-card__type,
.project-card:hover .project-card__title,
.project-card:hover .project-card__desc,
.project-card:hover .project-card__year {
  color: #fff !important;
}

/* ── IMAGE ── */
.project-card__image-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.project-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.5s ease;
}

.project-card:hover .project-card__image {
  /* transform: scale(1.03); */
}

/* ── BODY ── */
.project-card__body {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.project-card__type {
  font-size: 0.75rem;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.project-card__title {
  font-family: var(--font-primary, serif);
  font-size: var(--text-lg) !important;
  font-weight: 400 !important;
  color: black !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.project-card__desc-wrapper {
  display: flex;
  justify-content: space-between;
}

.project-card__desc {
  font-size: var(--text-lg);
  color: #363636;
  margin: 0;
  padding-top: 0.75rem;
  font-family: var(--font-body);
  overflow: hidden;
}

.project-card__year {
  font-size: var(--text-lg);
  font-family: var(--font-body);

  color: #737373;
  margin-top: auto;
  padding-top: 0.75rem;
}

.project-card__image-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: visible;
  position: relative;
  transition:
    transform 0.4s ease,
    border-radius 0.4s ease;
}

.project-card:hover .project-card__image-wrap {
  /* 👈 this creates “padding feel” */
  border-radius: 0 0 300px 0;
}

/* clip only the image itself, not the whole wrap */
.project-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.5s ease;
  border-radius: inherit;
  /* follows wrap's border-radius */
}

/* ── ARROW: sits outside at the curved corner ── */
.project-card__arrow {
  position: absolute;
  bottom: 0px;
  /* half outside the image bottom */
  right: 10px;
  /* half outside the image right */
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #000000;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 3;
}

.project-card__arrow img {
  width: 1rem;
}

.project-card:hover .project-card__arrow {
  opacity: 1;
  transform: scale(1);
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .project-card__title {
    font-size: 1.25rem !important;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .project-header {
    gap: 0.75rem;
  }
}

/* --- Testimonials --- */
.testimonials__section-wrapper {
  position: relative;
}

.testimonials__vlines {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.testimonials__vlines--full {
  inset: 0;
  display: flex;
  justify-content: space-between;
  z-index: 3;
}

.testimonials__vline--outer {
  width: 0.5px;
  height: 100%;
  background: var(--color-border-light);
  position: relative;
}

.testimonials__vline--outer:nth-child(3),
.testimonials__vline--outer:nth-child(4) {
  display: none;
}

.testimonials__vline--outer::after,
.testimonials__vline--outer::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  display: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25994 10V5.74H-5.85318e-05V4.24H4.25994V0H5.75994V4.24H9.99994V5.74H5.75994V10H4.25994Z' fill='%23979797'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.testimonials__vline--outer::after {
  left: -7px;
}

.testimonials__vline--outer::before {
  right: -7px;
}

.testimonials__vline--outer:nth-child(1)::before,
.testimonials__vline--outer:nth-child(2)::after {
  display: block;
  top: auto;
  bottom: -7px;
}

.testimonials__vline--outer:nth-child(1)::before {
  right: -7px;
}

.testimonials__vline--outer:nth-child(2)::after {
  left: -7px;
}

.testimonials__header .testimonials__vlines--header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding-inline: 25%;
  z-index: 0;
  height: 100%;
}

.testimonials__vline--inner {
  width: 0.5px;
  height: 100%;
  background: var(--color-border-light);
}

.testimonials__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.testimonials__header-text {
  margin-top: var(--section-spacing-header-text-lg);
  flex: 1;
}

.testimonials__nav {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex-shrink: 0;
  margin-bottom: 20px;
}

.testimonials__nav-btn {
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: #e3e3e3;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.testimonials__nav-btn:hover {
  background: var(--color-border-light);
}

.testimonials__cards {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 18px;
  scroll-padding-inline: 18px;
  -webkit-overflow-scrolling: touch;
  background-color: #e3e3e3;
  position: relative;
  z-index: 1;
}

.testimonials__cards::-webkit-scrollbar {
  display: none;
}

.testimonials__card {
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  scroll-snap-align: start;
  aspect-ratio: 369 / 450;
  width: 100%;
}

.testimonials__quote-icon {
  color: var(--color-accent-secondary);
  margin-bottom: 1rem;
}

.testimonials__quote {
  font-size: var(--text-lg);
  color: var(--color-text-light);
  line-height: 1.6;
  flex: 1;
  margin: 0;
}

.testimonials__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4.5rem;
}

.testimonials__author-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.testimonials__author-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonials__author-name {
  font-size: var(--text-1xl);
  font-weight: 700;
  color: var(--color-accent-black);
  margin: 0;
}

.testimonials__author-company {
  font-size: var(--text-lg);
  color: var(--color-text-grey-2);
  margin: 0;
}

/* --- Insight Section --- */
.insight-section {
  display: none;
}

.insight-card {
  cursor: pointer;
}

.blog-detail-view .insight-section__wrapper .insight-section__grid {
  margin-bottom: var(--section-spacing-xl);
}

.insight-section .insight-section__wrapper .insight-section__grid {
  margin-bottom: var(--section-spacing-xl);
}

.layout .insight-section .insight-section__wrapper .insight-section__grid {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .insight-section {
    display: block;
    /* background: var(--color-body); */
  }

  .layout .advantages-container.container {
    padding-inline: calc(var(--gutter) + 2px);
  }

  .insight-section__wrapper {
    position: relative;
    min-height: auto;
    overflow: hidden;
  }

  /* The blog detail page's sticky sidebar image lives inside this same
     wrapper. overflow: hidden on an ancestor clips/breaks position: sticky
     tracking, so the sidebar would disappear instead of staying visible
     while scrolling through the article. Scoped back to visible here so it
     can stick all the way down to where .relevant-blogs__header starts. */
  .blog-detail-view .insight-section__wrapper {
    overflow: visible;
  }

  .insight-section__vlines {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    pointer-events: none;
    z-index: 0;
    bottom: -20px;
  }

  .insight-section__vlines span {
    border-left: 1px solid var(--color-border-light);
  }

  .insight-section__vlines span:last-child {
    border-right: 1px solid var(--color-border-light);
  }

  .insight-section__header {
    position: relative;
    z-index: 1;
    margin-bottom: var(--section-spacing-md);
  }

  .insight-section__grid {
    position: relative;
    z-index: 1;
    /* margin-bottom: var(--section-spacing-xs); */
  }

  .insight-section__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 40px;
  }

  .insight-section__header {
    min-height: clamp(205px, 17vw, 250px);
  }

  .insight-section__header.blog {
    min-height: auto;
  }

  .insight-section__header .section-header {
    width: 100%;
    padding: 0;
  }

  .insight-section__header .header-content-wrapper.side-button {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    align-items: start;
  }

  .insight-section__header .section-header.side-button .header-left {
    display: flex;
    flex-direction: column;
    grid-column: 1 / span 2;
    flex: none;
    max-width: 690px;
    padding-top: var(--section-spacing-header-xl);
  }

  .insight-section__header .header-right {
    grid-column: 4;
    flex: none;
    display: flex;
    justify-content: stretch;
    width: 100%;
    margin: var(--section-spacing-header-2xl) 0 0;
    align-self: end;
  }

  .insight-section__header.blog .header-right {
    grid-column: 4;
    flex: none;
    display: flex;
    justify-content: stretch;
    width: 100%;
    margin: 0;
  }

  .insight-card {
    min-width: 0;
    background: transparent;
  }

  .insight-card_text {
    display: flex;
    align-items: center;
    place-items: baseline;
    gap: 2px;
  }

  .insight-card_text img {
    width: 12px;
    height: 12px;
  }

  .insight-card__date {
    position: relative;
    display: block;
    height: 36px;
    margin-bottom: 12px;
    padding: 0 16px 0 6px;
    color: var(--color-text-grey-2);
    font-size: var(--text-lg);
    line-height: 36px;
    white-space: nowrap;
  }

  .insight-card__image {
    width: 100%;
    /* height: 280px; */
    overflow: hidden;
    /* background: #e8e8e8; */
  }

  .insight-card__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  /* .insight-card:nth-child(2) .insight-card__image {
    height: 433px;
  }

  .insight-card:nth-child(3) .insight-card__image {
    height: 530px;
  }

  .insight-card:nth-child(4) .insight-card__image {
    height: 280px;
  }

  .insight-card:nth-child(5) .insight-card__image {
    height: 530px;
  } */

  .insight-card:nth-child(1) .insight-card__image img {
    object-position: center 58%;
  }

  .insight-card:nth-child(2) .insight-card__image img {
    /* object-fit: contain; */
    object-position: center bottom;
    background: #151515;
  }

  .insight-card:nth-child(3) .insight-card__image img {
    object-position: center;
  }

  .insight-card:nth-child(4) .insight-card__image img {
    object-position: center;
  }

  .insight-card__title {
    margin: 0;
    padding: 12px 0 0 0;
    max-width: 310px;
    color: var(--color-accent-black);
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 1.45;
  }
}

/* Responsive Insight Section for Tablet and Mobile (<= 1072px) */
@media (max-width: 1072px) {
  .insight-section {
    display: block;
    padding-top: var(--section-spacing-xl);
  }

  .blogs-page-container .insight-section {
    padding: 0;
  }

  .insight-section__wrapper {
    position: relative;
    min-height: auto;
    overflow: visible;
    margin-bottom: 12px;
  }

  .insight-section__vlines {
    position: absolute;
    top: calc(clamp(60px, 8vw, 100px) * -1);
    bottom: calc(clamp(60px, 8vw, 100px) * -1);
    left: 0;
    right: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    pointer-events: none;
  }

  .insight-section__vlines span {
    border-left: 1px solid var(--color-border-light);
  }

  .insight-section__vlines span:last-child {
    border-right: 1px solid var(--color-border-light);
  }

  .insight-section__header {
    position: relative;
    z-index: 1;
    /* margin-bottom: 48px; */
  }

  .insight-section__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
  }

  .insight-card {
    min-width: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
  }

  .insight-card__date {
    position: relative;
    /* display: block; */
    height: 36px;
    padding: 0 16px 0 6px;
    margin-bottom: 8px;
    color: #9a9a9a;
    font-size: var(--text-base);
    line-height: 36px;
    white-space: nowrap;
  }

  .insight-card__image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #e8e8e8;
  }

  /* .insight-card:nth-child(2) .insight-card__image {
    height: 433px;
  }

  .insight-card:nth-child(3) .insight-card__image {
    height: 550px;
  }

  .insight-card:nth-child(4) .insight-card__image {
    height: 280px;
  }

  .insight-card:nth-child(5) .insight-card__image {
    height: 550px;
  } */

  .insight-card__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .insight-card:nth-child(1) .insight-card__image img {
    object-position: center 58%;
  }

  .insight-card:nth-child(2) .insight-card__image img {
    object-position: center bottom;
    background: #151515;
  }

  .insight-card:nth-child(3) .insight-card__image img {
    object-position: center;
  }

  .insight-card:nth-child(4) .insight-card__image img {
    object-position: center;
  }

  .insight-card__title {
    margin: 0;
    padding: 12px 0 0;
    color: var(--color-accent-black);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.45;
  }
}

@media (max-width: 840px) {

  /* .insight-section {
    padding: clamp(40px, 8vw, 100px) 0;
  } */
  .blogs-page-container .insight-section {
    padding: 0;
  }
}

/* Specific adjustments for mobile screens (< 768px) */
@media (max-width: 768px) {
  .insight-section__vlines {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .insight-section__vlines span:first-child,
  .insight-section__vlines span:last-child {
    z-index: 10;
    /* position: relative; */
  }

  .insight-section__vlines span:nth-child(4) {
    display: none !important;
  }

  .insight-section__vlines span:nth-child(3) {
    border-right: 1px solid var(--color-border-light) !important;
  }

  .insight-section__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-top: var(--section-spacing-xs);
  }

  .insight-card__title {
    /* font-size: var(--text-md); */
    padding-left: 0.5rem;
  }

  .testimonials__header-text {
    margin-top: var(--section-spacing-header-text-sm);
  }
}

/* --- FAQ Section --- */
.faq-section {
  /* background: var(--color-body); */
}

.faq-section .section-header.centered {
  align-items: flex-start;
  width: 100%;
  margin: 0;
  /* padding-top: 80px; */
}

.faq-section__wrapper {
  --faq-question-top: 214px;
  position: relative;
}

.faq-section__vlines {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  pointer-events: none;
}

.faq-section__vlines::after {
  content: "";
  position: absolute;
  top: var(--faq-question-top);
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  background-image:
    linear-gradient(var(--color-border-light), var(--color-border-light)),
    linear-gradient(var(--color-border-light), var(--color-border-light)),
    linear-gradient(var(--color-border-light), var(--color-border-light));
  background-position:
    50% top,
    75% top,
    100% top;
  background-repeat: no-repeat;
  background-size: 1px 100%;
}

.faq-section__vlines span {
  border-left: 1px solid var(--color-border-light);
}

.faq-section__vlines span:last-child {
  border-right: 1px solid var(--color-border-light);
}

.faq-section__vlines span:nth-child(4) {
  display: none;
}

.faq-section__vlines span:nth-child(3) {
  border-right: 1px solid var(--color-border-light);
}

/* .faq-section__vlines span:nth-child(2),
.faq-section__vlines span:nth-child(3) {
  height: var(--faq-question-top);
} */

/* --- Our Clients Section (scoped vlines — does not affect FAQ) --- */
.our-clients-section__wrapper {
  position: relative;
}

/* @media (max-width: 760px) {
  .our-clients-section__wrapper {
    padding-top: 3rem;
  }
} */
.our-clients-section__vlines {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  pointer-events: none;
}

.our-clients-section__vlines::after {
  content: "";
  position: absolute;
  top: var(--our-clients-grid-bottom, 100%);
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--color-border-light), var(--color-border-light)),
    linear-gradient(var(--color-border-light), var(--color-border-light));
  background-position:
    33.333% top,
    66.667% top;
  background-repeat: no-repeat;
  background-size: 1px 100%;
}

.our-clients-section__vlines span {
  border-left: 1px solid var(--color-border-light);
}

.our-clients-section__vlines span:last-child {
  border-right: 1px solid var(--color-border-light);
}

.our-clients-section__vlines span:nth-child(4) {
  display: none;
}

.our-clients-section__vlines span:nth-child(3) {
  border-right: 1px solid var(--color-border-light);
}

.our-clients-section .section-header.grid {
  position: relative;
  z-index: 1;
}

/* .our-clients-section .header-left {
  position: relative;
  z-index: 2;
} */

.our-clients-section .grid-slider-wrapper {
  position: relative;
  z-index: 1;
}

.our-clients-section .client-grid-cell {
  /* position: relative;
  z-index: 2; */
  background: #ffffff;
}

/* Edge vlines sit above cards; inner lines stay behind cells */
.our-clients-section__vlines span:first-child {
  position: relative;
  z-index: 3;
}

@media (min-width: 769px) {
  .our-clients-section__vlines {
    grid-template-columns: repeat(4, 1fr);
  }

  .our-clients-section__vlines::after {
    background-image:
      linear-gradient(var(--color-border-light), var(--color-border-light)),
      linear-gradient(var(--color-border-light), var(--color-border-light));
    background-position:
      50% top,
      75% top;
  }

  .our-clients-section__vlines span:nth-child(4) {
    display: block;
    border-left: none;
    position: relative;
    align-self: stretch;
    height: auto;
    z-index: 3;
  }

  .our-clients-section__vlines span:nth-child(4)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: var(--our-clients-grid-top, 100%);
    border-left: 1px solid var(--color-border-light);
  }

  .our-clients-section__vlines span:nth-child(3) {
    border-right: 0;
    height: var(--our-clients-grid-top, 100%);
    align-self: start;
  }
}

@media (min-width: 769px) and (max-width: 900px) {
  .our-clients-section__vlines span:nth-child(2) {
    height: var(--our-clients-grid-top, 100%);
    align-self: start;
  }

  .our-clients-section__vlines::after {
    background-image:
      linear-gradient(var(--color-border-light), var(--color-border-light)),
      linear-gradient(var(--color-border-light), var(--color-border-light)),
      linear-gradient(var(--color-border-light), var(--color-border-light));
    background-position:
      25% top,
      50% top,
      75% top;
  }
}

/* Opt-in sticky-heading variant (About page's clients section only —
   pass className="our-clients-section--sticky" to <OurClients>). Same
   technique as .process-left in the "PROCESS SECTION - FIXED STICKY"
   block: header-right's client grid is taller than header-left's
   badge/heading/paragraph, so header-left sticks while the grid scrolls
   past it. Scoped under this class so every other .header-content-wrapper.grid
   usage (ServiceDetail's tools stack, Work's featured clients, etc.) is
   completely unaffected. */
@media (min-width: 901px) {
  .our-clients-section--sticky .header-content-wrapper.grid {
    /* The unscoped .header-content-wrapper.grid rule sets overflow: hidden,
       which makes it the sticky child's containing scroll box — with no
       extra height to scroll within that box, header-left couldn't stick
       to anything. */
    overflow: visible;
  }

  .our-clients-section--sticky .header-content-wrapper.grid .header-left {
    position: sticky;
    top: 20px;
    align-self: flex-start;
  }
}

@media (max-width: 768px) {
  .testimonials__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4.5rem;
  }

  .our-clients-section__vlines span:nth-child(2) {
    height: var(--our-clients-grid-top, 100%);
    align-self: start;
  }

  .our-clients-section__vlines span:nth-child(3) {
    border-left: none;
    position: relative;
    align-self: stretch;
    height: auto;
    z-index: 3;
  }

  .our-clients-section__vlines span:nth-child(3)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: var(--our-clients-grid-top, 100%);
    border-left: 1px solid var(--color-border-light);
  }
}

.faq-section__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  padding: 0 0 44px;
}

.faq-section__intro {
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 1;
}

.faq-list {
  /* margin-top: 22px; */
  border-top: 1px solid var(--color-border-light);
  border-inline: 1px solid var(--color-border-light);
}

.faq-item {
  border-bottom: 1px solid var(--color-border-light);
  background: #ffffff;
}

.faq-item__button {
  width: 100%;
  min-height: 70px;
  display: grid;
  grid-template-columns: auto 2fr auto;
  align-items: center;
  column-gap: 20px;
  gap: 0;
  column-gap: 20px;
  padding: 12px;
  border: 0;
  background: transparent;
  color: var(--color-accent-black);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.faq-item__button[aria-expanded="true"] {
  border-bottom: 1px solid var(--color-border-light);
}

.faq-item__number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-accent-black);
  color: var(--color-accent-white);
  font-size: var(--text-lg);
  line-height: 1;
}

.faq-item__question {
  color: var(--color-accent-black);
  font-size: var(--text-lg);
  line-height: 1.45;
}

.faq-item__toggle {
  margin-left: 180px;
  justify-self: end;
  color: var(--color-accent-black);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1;
}

.faq-item__icon {
  width: 16px;
  height: 16px;
}

.faq-section__footer-lines {
  display: none;
  /* hidden on desktop */
}

@media (max-width: 1023px) {
  .faq-item__toggle {
    margin-left: 80px;
  }
}

.faq-item__toggle svg {
  display: block;
}

.faq-item__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.faq-item__answer-wrap.open {
  grid-template-rows: 1fr;
}

.faq-item__answer-inner {
  min-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item__answer-wrap.open .faq-item__answer-inner {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.5s ease 0.1s,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.faq-item__answer {
  margin: 0;
  padding: 0 64px 26px 78px;
  max-width: clamp(320px, 90vw, 1148px);
  color: var(--color-text-grey-2);
  font-size: var(--text-lg);
  transition: padding-top 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item__answer-wrap.open .faq-item__answer {
  padding-top: 20px;
}

/* --- Contact Us Section --- */
.contact-us-section {
  /* background: var(--color-body); */
}

.contact-us-section__wrapper {
  position: relative;
  min-height: 188px;
  padding-bottom: var(--section-spacing-2xl);
}

.contact-us-section__vlines {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
}

.contact-us-section__vlines span {
  border-left: 1px solid var(--color-border-light);
}

.contact-us-section__vlines span:last-child {
  border-right: 1px solid var(--color-border-light);
}

/* =============================================
   CONTACT BUTTON - Effica-style Upward Text Slide
   (Fixed & Prioritized)
   ============================================= */

.contact-us-section__button {
  width: 100%;
  min-height: 44px;
  /* margin-top: 26px; */
  border: 1px solid var(--color-accent-black);
  background: transparent;
  color: var(--color-accent-black);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 500;
  border-radius: 9999px;
  padding: 1rem 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 9999px;
  /* Rounded like modern buttons */
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  text-decoration: none;
}

/* Hover - Background + Lift */
.contact-us-section__button:hover {
  background: var(--color-accent-white);
  color: var(--color-accent-black);
  /* transform: translateY(-2px); */
}

/* Text Slide Animation */
.contact-us-section__button-text-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.4em;
  line-height: 1.4em;
}

.contact-us-section__button-text {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.contact-us-section__button-text--hover {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(120%);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Trigger the slide */
.contact-us-section__button:hover .contact-us-section__button-text {
  transform: translateY(-120%);
}

.contact-us-section__button:hover .contact-us-section__button-text--hover {
  transform: translateY(0);
}

/* Icon Rotation */
.contact-us-section__button-icon {
  display: block;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.contact-us-section__button:hover .contact-us-section__button-icon {
  transform: rotate(45deg);
}

/* Desktop / Mobile Text */
/* .contact-us-section__button-text--desktop {
  display: none;
} */

.contact-us-section__button-text--mobile {
  display: inline;
  font-size: var(--text-lg);
}

@media (max-width: 768px) {
  .contact-us-section__button {
    border: 1px solid var(--color-accent-black);
    background: var(--color-accent-white) !important;
    color: var(--color-accent-black);
    margin-top: 26px;
  }
}

@media (min-width: 769px) {
  .contact-us-section__vlines {
    grid-template-columns: 25% calc(25% - 0.5px) 25% calc(25% + 0.5px);
  }
}

.contact-us-section__content {
  position: relative;
  z-index: 1;
  min-height: inherit;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto;
  align-items: start;
}

.contact-us-section__content .section-header {
  display: contents;
}

.contact-us-section__content .header-content-wrapper.split {
  display: contents;
}

.contact-us-section__content .header-content-wrapper.split>.header-left {
  display: contents;
  flex: none;
}

.contact-us-section__content .text-style {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  /* padding-top: 43px; */
  /* color: var(--color-text-light); */
  font-size: var(--text-lg);
  line-height: 1.2;
}

.contact-us-section__content .text-style::before {
  /* top: calc(43px + 0.6em); */
  top: 12px;
  transform: translateY(-50%) rotate(45deg);
  /* background-color: #6a36d8; */
}

.contact-us-section__content .heading {
  text-wrap: nowrap;
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
  /* padding-top: 43px; */
  max-width: 400px;
  color: var(--color-accent-black);
  /* font-size: clamp(2.55rem, 2.7vw, 3.25rem); */
  line-height: 2;
}

.contact-us-section__content .header-right {
  grid-column: 4;
  grid-row: 1;
  /* padding-top: 38px; */
}

.contact-us-section__content .paragraph {
  max-width: 437px;
  margin: 0;
  color: var(--color-text-light);
  font-size: var(--text-lg);
  line-height: 1.45;
}

.contact-us-section__button {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  width: 100%;
  min-height: 44px;
  /* margin-top: 26px; */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--color-accent-black);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent-black);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 500;
  cursor: pointer;
  padding-block: 1rem;
}

.contact-us-section__button-icon {
  display: none;
}

/* .contact-us-section__button-text--mobile {
  display: none;
} */

@media (min-width: 768px) and (max-width: 1290px) {
  .contact-us-section__content .heading {
    grid-column: 2 / span 2;
    max-width: none;
    padding-right: 24px;
    font-size: clamp(2rem, 4vw, 2.85rem);
    line-height: 1.18;
  }

  .contact-us-section__button {
    grid-column: 2 / span 2;
    max-width: 420px;
  }

  .contact-us-section__content .paragraph {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  }
}

/* @media (min-width: 768px) {
  .paragraph {
    width: 96%;
  }
} */
@media (min-width: 768px) {
  .faq-section__wrapper {
    --faq-question-top: 278px;
  }

  .what-we-do__grid {
    display: block !important;
  }

  .what-we-do__accordion {
    display: none !important;
  }

  /* .faq-list {
    margin-top: 28px;
  } */
}

.contact-us-section__mobile-header {
  display: none;
}

.contact-us-section__desktop-header {
  display: contents;
}

@media (max-width: 767px) {
  .faq-section__wrapper {
    --faq-question-top: 390px;
  }

  /* .faq-section__content {
    padding: 44px 0 0;
  } */

  .faq-section__intro {
    max-width: 100%;
  }

  /* .faq-list {
    margin-top: 22px;
  } */

  .faq-item__button {
    min-height: 62px;
    grid-template-columns: auto 1fr auto;
    column-gap: 20px;
    padding: 12px;
  }

  .faq-item__toggle {
    margin-left: 12px;
  }

  .faq-item__answer {
    padding-left: 70px;
    padding-right: 12px;
    line-height: 24px;
  }

  /* .faq-section__footer-lines {
    display: flex;
    justify-content: space-between;
    height: 48px;
  } */

  .faq-section__footer-line {
    /* width: 1px; */
    height: 100%;
    background: var(--color-border-light);
  }

  .what-we-do__center .what-we-do__box {
    display: none;
  }

  .what-we-do__center_video .what-we-do__box {
    display: none;
  }
}

/* --- Case Studies --- */

.case__studies {
  position: relative;
  z-index: 10;
}

.case__studies__vlines--full {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 0;
}

.case__studies__vline--outer {
  width: 0.5px;
  height: 100%;
  background: var(--color-border-light);
}

.case__studies__vline--outer:nth-child(3),
.case__studies__vline--outer:nth-child(4) {
  display: none;
}

.case__studies__vline--inner {
  position: absolute;
  top: 0;
  width: 0.5px;
  height: 100%;
  background: var(--color-border-light);
  transform: translateX(-50%);
}

.case__studies__vline--inner:nth-child(1) {
  left: 25%;
}

.case__studies__vline--inner:nth-child(2) {
  left: 50%;
}

.case__studies__vline--inner:nth-child(3) {
  left: 75%;
}

.case__studies__cards {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.case__studies__cards::-webkit-scrollbar {
  display: none;
}

.case__studies__cards--single {
  overflow-x: visible;
  scroll-snap-type: none;
  flex-direction: column;
}

.case__studies__cards--single .case__studies__card {
  min-width: unset;
  width: 100%;
  scroll-snap-align: none;
}

.case__studies__card {
  position: relative;
  overflow: hidden;
  height: 450px;
  min-width: 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.case__studies__header__wrapper {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.case__studies__header__badge {
  position: relative;
  padding-left: 25px;
}

.case__studies__header {
  max-width: 780px !important;
  margin: 0 auto;
}

.case__studies__nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 20px;
}

.case__studies__nav__btn {
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: #e3e3e3;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.case__studies__nav__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.case__studies__card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: none;
  object-position: top center;
  display: block;
}

.case__studies__card__top {
  position: relative;
  z-index: 1;
  padding: 24px 46px 0;
  display: flex;
  justify-content: flex-end;
}

.case__studies__card__tag {
  font-size: var(--text-xl);
  font-family: var(--font-body);
  color: var(--color-accent-white);
}

.case__studies__card__bottom {
  position: relative;
  z-index: 1;
  padding: 0 46px 24px;
}

.case__studies__card__title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 400;
  font-family: var(--font-primary);
  color: var(--color-accent-white);
  margin: 0 0 4px;
}

.case__studies__card__meta {
  font-size: var(--text-lg);
  color: var(--color-accent-white);
}

.case__studies--message {
  /* background: var(--color-body); */
}

.case__studies--single .section-header.centered {
  margin: 0;
}

@media (min-width: 769px) {

  .cs-stack__header .section-header,
  .case__message__content .section-header,
  .case__studies__header__text .section-header {
    padding-top: var(--section-spacing-header-xl);
  }
}

/* --- Case Message --- */
.case__message__scroll-track {
  position: relative;
}

/* Same short, partial-height pin as StatsSection — sticks for a couple of
   scroll notches, not a full 100vh lock. */
.case__message__pin {
  position: sticky;
  top: calc((100svh - 75svh) / 2);
  height: 75svh;
  min-height: 75svh;
  display: flex;
  align-items: stretch;
}

.case__message__pin .case__message {
  height: 100%;
  min-height: 75svh;
  flex: 1;
}

.case__message {
  position: relative;
  /* min-height: clamp(560px, 48vw, 838px); */
  min-height: 838px;
  overflow: hidden;
  background: #1f1f1f;
  border-block: none;
}

.case__message__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  min-height: inherit;
  align-items: center;
}

.case__message__vlines {
  position: absolute;
  inset: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
}

.case__message__vlines span {
  position: relative;
  z-index: 3;
  border-left: 1px solid rgba(132, 128, 128, 0.11);
}

.case__message__vlines span:nth-child(2) {
  z-index: 1;
}

.case__message__vlines span:last-child {
  border-right: 1px solid rgba(132, 128, 128, 0.11);
}

.case__message__vlines span:nth-child(4) {
  border-right: 1px solid rgba(132, 128, 128, 0.11);
}

.case__message__vlines span:nth-child(5) {
  display: none;
}

.case__message__image-panel {
  position: relative;
  min-height: inherit;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-left: clamp(2rem, 5vw, 6rem);
  z-index: 1;
}

.case__message__glow {
  position: absolute;
  left: clamp(1rem, 4vw, 4rem);
  bottom: -100px;
  width: 591.5px;
  height: 591.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 100%,
      rgba(56, 133, 243, 0.9) 0%,
      rgba(240, 113, 239, 0.9) 100%);
  transform: rotate(57.74deg);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.case__message__person-img {
  position: relative;
  z-index: 4;
  width: min(98%, 620px);
  max-height: 88%;
  object-fit: contain;
  object-position: left bottom;
  display: block;
}

.case__message__content {
  position: relative;
  z-index: 1;
}

.case__message__content .section-header {
  padding: 0;
  margin: 0;
}

.case__message__content .text-style {
  /* color: var(--color-accent-white);
  line-height: 2.5; */
}

.case__message__content .heading {
  color: var(--color-accent-white);
  font-size: var(--text-3-4xl);
  line-height: 1.8;
}

.case__message__content .paragraph {
  margin-top: clamp(12px, 2vw, 40px);
  margin-bottom: clamp(12px, 2vw, 40px);
  padding-left: 22px;
  color: var(--color-text-grey-2);
  border-left: 1px solid rgba(255, 255, 255, 0.48);
  line-height: 1.55;
}

@media (max-width: 1728px) {
  .case__message__content .paragraph {
    max-width: 540px;
  }
}

.case__message__person {
  margin-top: 0px;
  display: grid;
  gap: 8px;
  padding-left: 22px;
  color: var(--color-text-grey-2);
  font-size: var(--text-lg);
  line-height: 1.2;
}

/* When paragraph is omitted: flush left + spacing under heading */
.case__message__person--no-paragraph {
  padding-left: 0;
  margin-top: clamp(16px, 2.5vw, 32px);
}

.case__message__person strong {
  color: var(--color-accent-white);
  font-weight: 700;
  font-size: var(--text-1xls);
}

/* ═══════════════════════════════════════════════
    cs-stack — Corrected Fullscreen Stacked Variant
═══════════════════════════════════════════════ */
@media (min-width: 1200px) and (max-width: 1500px) {
  .case__message__content .heading {
    font-size: var(--text-2xl);
  }
}

.cs-stack__header {
  position: relative;
  /* ← so grid lines are contained */
  overflow: hidden;
  /* ← clips lines at header boundary */
}

.cs-stack__cards-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  height: calc(var(--card-count, 3) * 100vh);
  /* set --card-count via JS or hardcode */
}

/* New wrapper — clips the scaling image */
.cs-stack__card__img-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* ← clips scale() expansion */
  z-index: 0;
}

/* ============================================
   STACKED FULLSCREEN SCROLL CARDS
   ============================================ */

.cs-stack {
  position: relative;
  width: 100%;
}

/* .cs-stack__header {
  padding-top: 4rem;
  padding-bottom: 0rem;
} */

/* Pin wrapper — tall enough so card sticks on screen long enough */
.cs-stack__pin {
  position: sticky;
  /* ← change: pin itself is sticky */
  top: 0;
  /* ← sticks at viewport top */
  height: 100vh;
  /* ← each pin is exactly one screen tall */
  width: 100%;
}

/* The actual visible card — sticky */
.cs-stack__card {
  position: absolute;
  /* ← sits inside the sticky pin */
  inset: 0;
  width: 100%;
  height: 100%;
}

/* BG image */
.cs-stack__card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: transform;
  transform-origin: center center;
  /* ← ensures zoom happens from center */
}

/* Dark gradient */
.cs-stack__overlay {
  position: absolute;
  inset: 0;

  z-index: 10;
}

/* Top row — tag + counter */
.cs-stack__card__top {
  position: absolute;
  top: clamp(4.5rem, 3vw, 2.5rem);
  /*  */
  left: clamp(2.5rem, 6vw, 9rem);
  right: clamp(1.5rem, 4vw, 3.5rem);
  z-index: 10;
  display: flex;
  justify-content: start;
  align-items: center;
  overflow: hidden;
}

.cs-stack__tag {
  font-size: var(--text-1xl);
  font-family: var(--font-body);
  color: rgba(255, 255, 255);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cs-stack__counter {
  font-size: 0.8rem;
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.1em;
}

/* Bottom — title + meta */
.cs-stack__card__bottom {
  position: absolute;
  bottom: clamp(3rem, 6vw, 5.5rem);
  left: clamp(1.5rem, 4vw, 3.5rem);
  right: clamp(1.5rem, 4vw, 3.5rem);
  z-index: 2;
}

.cs-stack__title {
  font-size: var(--text-3-4xl);
  font-weight: 400;
  font-family: var(--font-primary);
  color: #fff;
  margin: 0 0 0.6rem;
  line-height: 1.5;
  letter-spacing: -0.025em;
}

.cs-stack__meta {
  font-size: var(--text-1xl);
  color: #fff;
  font-family: var(--font-body);
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .cs-stack__pin {
    height: 100vh;
  }

  .cs-stack__card {
    border-radius: 14px 14px 0 0;
  }

  /* .cs-stack__title {
    font-size: clamp(1.8rem, 9vw, 2.8rem);
  } */

  .cs-stack__card__bottom {
    bottom: 26px;
    left: 1.25rem;
    right: 1.25rem;
  }

  .cs-stack__card__top {
    top: 1.25rem;
    /* left: 6.25rem; */
    right: 1.25rem;
  }
}

/* --- What We Do --- */
.what-we-do {
  position: relative;
  display: block;
  margin-top: 0;
}

.what-we-do__section-wrapper {
  position: relative;
}

.what-we-do__vlines {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.what-we-do__vlines--full {
  inset: 0;
  display: flex;
  justify-content: space-between;
  z-index: 0;
}

.what-we-do__vline--outer {
  width: 1px;
  height: 100%;
  background: var(--color-border-light);
  position: relative;
}

.what-we-do__vline--outer:nth-child(3),
.what-we-do__vline--outer:nth-child(4) {
  display: none;
}

.what-we-do__vline--outer::after {
  content: "";
  position: absolute;
  top: 0;
  left: -7px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25994 10V5.74H-5.85318e-05V4.24H4.25994V0H5.75994V4.24H9.99994V5.74H5.75994V10H4.25994Z' fill='%23979797'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  display: none;
}

.what-we-do__header {
  position: relative;
  z-index: 0;
}

.what-we-do__header .what-we-do__vlines--header {
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding-inline: 25%;
  z-index: 0;
}

/* Responsive fix for WhatWeDo's SectionHeader (variant="split"), scoped to
   this component instead of the shared .header-content-wrapper.split
   selector — that selector is redeclared in several other places across
   this file (some unscoped, appearing later in the cascade), which kept
   silently undoing fixes written against it directly. Scoping under
   .what-we-do__header gives this 3-class specificity, higher than any of
   those, so it wins outright without needing !important — and it can be
   tuned here without touching (or being touched by) any other page that
   uses the same split variant. */
@media (max-width: 1024px) {
  .what-we-do__header .header-content-wrapper.split {
    /* Overrides the has-second-part-column grid layout (see shared base
       rule near .header-content-wrapper.split) back to flex so
       flex-direction: column above actually takes effect. */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .what-we-do__header .header-content-wrapper.split .header-left,
  .what-we-do__header .header-content-wrapper.split .header-right {
    width: 100% !important;
    flex: none !important;
  }

  .what-we-do__header .header-content-wrapper.split .header-btn {
    max-width: 100% !important;
  }
}

.what-we-do__vlines--footer {
  position: relative;
  height: clamp(60px, 8vw, 100px);
  display: flex;
  justify-content: space-between;
  z-index: 0;
}

.what-we-do__vlines--footer .what-we-do__vline--outer:nth-child(5) {
  display: block;
}

.what-we-do__vlines--footer .what-we-do__vline--outer::after {
  display: none;
}

.what-we-do__vline--inner {
  width: 0.5px;
  height: 100%;
  background: var(--color-border-light);
}

.what-we-do__grid {
  display: grid;
  gap: 0;
  position: relative;
  z-index: 1;
  border: solid var(--color-border-light);
  border-width: 1px;
}

.what-we-do__plus {
  position: absolute;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25994 10V5.74H-5.85318e-05V4.24H4.25994V0H5.75994V4.24H9.99994V5.74H5.75994V10H4.25994Z' fill='%23979797'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 4;
}

.what-we-do__plus--top-left,
.what-we-do__plus--middle-left,
.what-we-do__plus--bottom-left {
  left: -7.5px;
}

.what-we-do__plus--top-right,
.what-we-do__plus--middle-right,
.what-we-do__plus--bottom-right {
  right: -7.5px;
}

.what-we-do__plus--top-left,
.what-we-do__plus--top-right {
  top: -7.5px;
}

.what-we-do__plus--bottom-left,
.what-we-do__plus--bottom-right {
  bottom: -7px;
}

.what-we-do__plus--middle-left,
.what-we-do__plus--middle-right {
  top: 50%;
  transform: translateY(-50%);
}

.what-we-do__row {
  --what-we-do-row-pad: clamp(20px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* minmax(72px, 0.45fr) minmax(180px, 0.95fr) minmax(260px, 369px)
    minmax(190px, 1fr); */
  align-items: start;
  /* column-gap: clamp(24px, 3vw, 40px); */
  /* padding: 1rem var(--what-we-do-row-pad); */
  border-bottom: 1px solid var(--color-border-light);
  /* padding-top:1rem; */
  /* padding-left: 1rem; */
}

.what-we-do__row:last-child {
  border-bottom: none;
}

.what-we-do__left {
  padding-top: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-self: start;
  padding-left: 1rem;
  /* margin-left: calc(var(--what-we-do-row-pad) * -1); */
}

.what-we-do__title,
.what-we-do__left {
  padding-top: 1.5rem;
  /* clamp(1rem, 4vw, 4.5rem); */
}

.what-we-do__number {
  font-size: var(--text-1xl);
  font-weight: 700;
  color: #000;
  font-family: var(--font-body);
}

.what-we-do__title {
  padding-top: 0;
  font-size: var(--text-1xl);
  font-family: var(--font-body);
  color: var(--color-accent-secondary);
  min-width: 0;
  padding-top: 1.5rem;
}

.what-we-do__center .what-we-do__box {
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.what-we-do__center_video .what-we-do__box {
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.what-we-do__right {
  justify-self: end;
  padding-block: 1rem;
  /* margin-right: calc(var(--what-we-do-row-pad) * -1); */
}

.what-we-do__right ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 2.1;
  font-size: 1.05rem;
}

.what-we-do__list li {
  font-size: var(--text-lg);
  text-align: right;
  padding: 0 20px;
}

.what-we-do__accordion .what-we-do__list li {
  text-align: left !important;
  padding: 8px 0 !important;
  font-size: var(--text-base);
  color: var(--color-text-light);
}

.what-we-do__accordion {
  display: none;
}

.what-we-do__accordion-item {
  border-bottom: 1px solid var(--color-border-light);
}

.what-we-do__accordion-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  font-size: var(--text-base);
}

.what-we-do__accordion-icon {
  font-size: 24px;
  color: var(--color-accent-black);
}

.what-we-do__accordion .what-we-do__number {
  font-size: var(--text-1xls);
  /* font-size: 24px; */
  font-weight: 700;
  color: #000;
}

.what-we-do__accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition:
    grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.what-we-do__accordion-content.open {
  grid-template-rows: 1fr;
  padding-bottom: 20px;
}

.what-we-do__accordion-inner {
  min-height: 0;
  overflow: hidden;
}

.what-we-do__accordion-media {
  margin-top: 12px;
}

.what-we-do__accordion-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  object-fit: cover;
}

.what-we-do--list .what-we-do__vlines--full .what-we-do__vline--outer {
  display: block;
}

.what-we-do--list .what-we-do__vlines--full {
  display: flex;
}

.what-we-do--list .what-we-do__vlines--full .what-we-do__vline--outer:nth-child(3),
.what-we-do--list .what-we-do__vlines--full .what-we-do__vline--outer:nth-child(4) {
  height: var(--what-we-do-list-rows-start);
}

.what-we-do-list__wrapper {
  --what-we-do-list-rows-start: 430px;
  /* padding-top: clamp(48px, 7vw, 110px); */
}

.what-we-do-list--third .what-we-do-list__wrapper {
  padding-bottom: 60px;
}

.what-we-do-list--third .what-we-do-list__item {
  transition: all 0.35s ease;
}

.what-we-do-list--third .what-we-do-list__item.is-open {
  background: #000;
  color: white;
  margin: 8px 0;
  padding: 28px 32px;
  border-radius: 12px;
}

.what-we-do-list__header {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(28px, 5vw, 64px);
}

.what-we-do-list__header .section-header {
  padding: 0;
}

.what-we-do-list__rows {
  position: relative;
  z-index: 1;
  width: 75%;
  margin-left: auto;
  border-top: 1px solid var(--color-border-light);
}

.what-we-do-list__item {
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
  min-height: clamp(68px, 6vw, 96px);
  overflow: hidden;
  transition: min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  justify-content: space-between;
  overflow: visible;
  position: relative;
}

.what-we-do--list:not(.what-we-do-list--third) .what-we-do-list__item {
  display: block;
}

.what-we-do-list__item_contnet {
  width: 100%;
}

.what-we-do-list__button {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 32px;
  align-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-accent-black);
  cursor: pointer;
  text-align: left;
  gap: 1rem;
  /* margin-block: clamp(20px, 2vw, 46px); */
  /* margin-left: 2px; */
}

.what-we-do-list__number {
  font-size: var(--text-lg);
  font-family: var(--font-body);
  color: var(--color-text-light);
  line-height: 1;
}

.what-we-do-list--third .what-we-do-list__number--third {
  font-size: var(--text-lg);
  color: var(--color-text-grey-2);
  background: #f3f3f3;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  transform: translateY(0);
  margin-left: 1px;
  transition: all 0.3s ease;
}

.what-we-do-list--third .what-we-do-list__item.is-open .what-we-do-list__number--third {
  background: var(--color-accent-black);
  color: #fff;
}

.what-we-do-list--third .what-we-do-list__button {
  gap: 20px;
}

.what-we-do-list--third .what-we-do-list__title {
  font-family: var(--font-body);
  font-size: var(--text-1xl);
}

.what-we-do-list__title {
  font-family: var(--font-primary);
  font-size: var(--text-1xl);
}

.what-we-do-list--third .what-we-do-list__item.is-open .what-we-do-list__title {
  color: var(--color-accent-white);
}

.what-we-do-list--third .what-we-do-list__item.is-open .what-we-do-list__number--third {
  color: var(--color-accent-black);
  background-color: var(--color-accent-white);
}

.what-we-do-list__arrow {
  justify-self: end;
  /* width: clamp(28px, 3vw, 40px); */
  width: 24px;
  height: 24px;
  color: var(--color-text-grey-2);
  stroke-width: 1.5;
  transition: transform 0.25s ease;
}

.what-we-do-list__item.is-open .what-we-do-list__arrow {
  transform: rotate(45deg);
  opacity: 0;
}

.what-we-do-list__panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr);
  grid-template-rows: 0fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.what-we-do-list__item.is-open .what-we-do-list__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

.what-we-do-list__copy {
  min-height: 0;
  overflow: hidden;
  margin-left: 2px;
}

.what-we-do-list__copy p {
  max-width: 660px;
  color: #363636;
  font-size: var(--text-lg);
  line-height: 1.55;
  /* Scoped to the plain "list" variant only (Tech page case studies) — the
     "third" variant has its own ".what-we-do-list--third .what-we-do-list__copy p"
     rules elsewhere and is untouched by this. */
  margin-top: 28px;
  margin-bottom: 20px;
}

.work-text {
  color: var(--color-text-light) !important;
}

.what-we-do-list__tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 2vw, 20px);
  margin-top: 18px;
}

.what-we-do-list--third .what-we-do-list__copy p {
  max-width: 660px;
  padding: 0 0 0 64px;
  color: #f3f3f3;
  font-size: var(--text-lg);
  line-height: 1.55;
}

.what-we-do-list--third .what-we-do-list__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding: 0 0 0 64px;
}

.what-we-do-list__tags span {
  padding: 12px 16px;
  border-radius: 999px;
  color: var(--color-black-button);
  font-size: var(--text-lg);
  line-height: 1;
  background: #f3f3f3;
}

.work-tag span {
  color: var(--color-text-light) !important;
  background-color: #f3f3f3 !important;
}

.what-we-do-list__media {
  opacity: 0;
  visibility: hidden;
  filter: blur(12px);
  transform: scale(0.90) translate3d(0, 0, 0);

  /* Motion extended to 1.2s, fade/blur to 0.8s */
  transition:
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    filter 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0.8s;

  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}

/* Active state for list variant media container */
.what-we-do-list__media.media-visible {
  opacity: 1;
  visibility: visible;
  filter: blur(0px);
  transform: scale(1) translate3d(0, 0, 0);
}

.what-we-do-list__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transition: transform 1.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.what-we-do-list__item.is-open .what-we-do-list__image {
  transform: scale(1);
}

.what-we-do-list__panel-arrow-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  border: 0;
  color: var(--color-text-grey-2);
  cursor: pointer;
}

.what-we-do-list__panel-arrow {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
  transform: rotate(45deg);
}

@media (min-width: 769px) {
  .what-we-do-list__media {
    display: block;
    position: absolute;
    /* Matches the 24px buffer already reserved below the image (see the
       min-height calc on .is-open) so the image has equal breathing room
       above and below instead of sitting flush against the row's top. */
    top: 24px;
    right: 0;
    width: min(45%, 428px);
    height: min(38vw, 300px);
    max-height: none;
    pointer-events: none;
    overflow: hidden;
  }

  .what-we-do-list__item.is-open .what-we-do-list__media {
    opacity: 1;
    pointer-events: auto;
  }

  .what-we-do-list__item.is-open {
    /* Image box height + matching 24px buffer on both top and bottom. */
    min-height: calc(min(38vw, 300px) + 48px);
  }

  .what-we-do-list__item.is-open .what-we-do-list__panel.third-variant {
    width: calc(55% - 24px);
    padding-bottom: 20px;
  }

  .what-we-do-list__image {
    /* Explicit (not 100%): at 1440px+ this element becomes a CSS Grid item
       inside an auto-sized row, where a percentage height doesn't reliably
       resolve against the media box's own fixed height — it was measuring
       taller than the box and getting clipped by overflow: hidden, cropping
       the image despite object-fit: contain. Matching the box's own height
       formula directly sidesteps that grid-row ambiguity. */
    height: min(38vw, 300px);
  }

  .what-we-do-list__panel-arrow-btn {
    /* On laptop widths the box is tight enough that the arrow ends up
       sitting over the picture (and was contributing to the crop). Hide
       it here and let the image have the full space; it comes back once
       there's real room to spare, see the 1440px breakpoint below. */
    display: none;
  }

  .what-we-do--list:not(.what-we-do-list--third) .what-we-do-list__item.is-open .what-we-do-list__item_contnet {
    /* Reserves exactly the image's own width (+ gap) so text always wraps
       before the picture, regardless of viewport width. */
    padding-right: calc(min(45%, 428px) + 32px);
    /* Matches the image's own 24px top offset so the heading aligns with
       the top of the image instead of sitting flush against the row. */
    padding-top: 24px;
    transition: padding-right 0.3s ease;
  }
}

@media (min-width: 1440px) {
  .what-we-do-list__media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    gap: 18px;
    /* Slightly wider cap so giving the arrow its own column doesn't shrink
       the picture back down noticeably. */
    width: min(45%, 480px);
  }

  .what-we-do-list__panel-arrow-btn {
    display: inline-flex;
    position: static;
    width: 40px;
    height: 40px;
    /* Sits in plain space next to the picture now, not over it — drop the
       floating-button styling used for the corner-overlay version. */
    background: transparent;
    border-radius: 0;
  }

  .what-we-do-list__panel-arrow {
    width: 32px;
    height: 32px;
  }

  .what-we-do--list:not(.what-we-do-list--third) .what-we-do-list__item.is-open .what-we-do-list__item_contnet {
    padding-right: calc(min(45%, 480px) + 32px);
  }
}

@media (max-width: 991px) {
  .what-we-do-list__rows {
    width: 100%;
    margin-left: 0;
  }

  .what-we-do--list .what-we-do__vlines--full .what-we-do__vline--outer:nth-child(2) {
    height: var(--what-we-do-list-rows-start);
  }

  .what-we-do-list__item.is-open .what-we-do-list__panel {
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .cs-stack__header {
    padding-top: var(--section-spacing-lg);
  }

  .what-we-do--list .what-we-do__section-wrapper {
    overflow: hidden;
  }

  .what-we-do--list .what-we-do__vlines--full {
    display: flex;
  }

  .what-we-do--list .what-we-do__vlines--full .what-we-do__vline--outer:nth-child(5) {
    display: none;
  }

  .what-we-do--list .what-we-do__vlines--full .what-we-do__vline--outer:nth-child(2),
  .what-we-do--list .what-we-do__vlines--full .what-we-do__vline--outer:nth-child(3) {
    height: var(--what-we-do-list-rows-start);
  }

  .what-we-do--list .what-we-do__vlines--full .what-we-do__vline--outer:nth-child(4) {
    height: 100%;
  }

  /* .what-we-do-list__wrapper {
    padding-top: 40px;
  } */
  .what-we-do-list__header {
    margin-bottom: 28px;
  }

  .what-we-do-list__button {
    /* min-height: 72px; */
    grid-template-columns: 36px minmax(0, 1fr) 28px;
    gap: 12px;
    margin-block: clamp(20px, 2vw, 46px);
  }

  .what-we-do-list__title {
    font-size: var(--text-xl);
  }

  .what-we-do-list__item.is-open .what-we-do-list__arrow {
    opacity: 1;
    color: var(--color-text-grey-2);
  }

  .what-we-do-list__panel {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .what-we-do-list--third .what-we-do-list__number--third {
    width: 38px;
    height: 38px;
  }

  .what-we-do-list__item.is-open {
    min-height: 0;
  }

  .what-we-do-list__item.is-open .what-we-do-list__panel-arrow-btn {
    display: none;
  }

  .what-we-do-list__media {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0fr;
    max-height: none;
    gap: 0;
    overflow: hidden;
    transition:
      grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s ease;
  }

  .what-we-do-list__item.is-open .what-we-do-list__media {
    grid-template-rows: 1fr;
    max-height: none;
    opacity: 1;
  }

  .what-we-do-list__item.is-open .what-we-do-list__panel {
    padding: 0 0 22px 0;
  }

  .what-we-do-list__image {
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
  }

  .what-we-do-list__item {
    flex-direction: column;
  }

  .what-we-do-list__copy p {
    padding: 0;
  }

  .what-we-do-list--third .what-we-do-list__copy p {
    padding-top: 20px;
  }

  .what-we-do-list--third .what-we-do-list__copy p {
    padding: 0 0 0 58px;
  }

  .what-we-do-list--third .what-we-do-list__tags {
    padding: 0;
  }
}

/* --- What We Do Variant 3 (third) --- */
.what-we-do-list--third .what-we-do-list__rows {
  width: 100%;
  margin-left: 0;
  position: relative;
  overflow: visible;
}

.what-we-do-list--third .what-we-do__vlines--full .what-we-do__vline--outer:nth-child(2),
.what-we-do-list--third .what-we-do__vlines--full .what-we-do__vline--outer:nth-child(3),
.what-we-do-list--third .what-we-do__vlines--full .what-we-do__vline--outer:nth-child(4) {
  height: var(--what-we-do-list-rows-start);
}

@media (max-width: 768px) {
  .what-we-do-list--third .what-we-do__vlines--full .what-we-do__vline--outer:nth-child(4) {
    height: 100%;
  }
}

.what-we-do-list--third .what-we-do__vlines--third-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  justify-content: space-between;
  z-index: 0;
  pointer-events: none;
}

.what-we-do-list--third .what-we-do__vlines--third-footer .what-we-do__vline--outer {
  width: 0.5px;
  height: 100%;
  background: var(--color-border-light);
  display: block;
}

@media (max-width: 768px) {
  .what-we-do-list--third .what-we-do__vlines--third-footer .what-we-do__vline--outer:nth-child(5) {
    display: none;
  }
}

.what-we-do-list--third .what-we-do-list__media--desktop-shared {
  display: none;
}

@media (min-width: 769px) {
  .what-we-do-list--third .what-we-do-list__item {
    /* position: static; */
  }

  .what-we-do-list--third .what-we-do-list__item.is-open {
    min-height: 0;
  }

  .what-we-do-list--third .what-we-do-list__button,
  .what-we-do-list--third .what-we-do-list__panel.third-variant {
    /* width: calc(55% - 24px); */
  }

  .what-we-do-list--third .what-we-do-list__media {
    display: none !important;
  }

  .what-we-do-list--third .what-we-do-list__media--desktop-shared {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: min(45%, 480px);
    display: flex;
    align-items: center;
    /* Changed from flex-start */
    justify-content: center;
    transform: none;
    pointer-events: auto;
    opacity: 1;
    transform: rotate(12deg);
    transform-origin: center;
    overflow: hidden;
  }

  .what-we-do-list--third .what-we-do-list__media--desktop-shared img {
    /* height: 100%; */
    width: 100%;
    /* max-width: 401px; */
    object-fit: cover;
    /* Best for keeping full image visible */
    object-position: center;
    /* Centers the image */
    border-radius: 8px;
    /* Optional: soft corners */
    flex-shrink: 0;
  }
}

/* --- Process --- */
.process-section {
  position: relative;
  overflow: visible;
  width: 100%;
}

.process-section {
  padding-top: var(--section-spacing-lg);
}

.process-container {
  background-color: #1a1a1a;
  max-width: var(--container-max);
  margin-inline: auto;
  position: relative;
  /* display: flow-root; */
}

.process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.process-left {
  padding-top: var(--section-spacing-xs);
  /* padding-bottom: var(--section-spacing-xs); */
  padding-left: var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 2;
}

.process-header-content {
  max-width: 540px;
}

.process-right {
  position: relative;
  z-index: 3;
  background-color: #1a1a1a;
  border-inline: 1px solid var(--color-border-dark);
  margin: var(--section-spacing-xs) 24px var(--section-spacing-xs) 0px;
}

/* .process-right-container { padding-block: clamp(2rem, 4vw, 4rem); } */
.process-step-item {
  background-color: #1a1a1a;
  padding: clamp(0.7rem, 4vw, 1.5rem);
  transition: background 0.3s ease;
  position: relative;
  border-bottom: 1px solid var(--color-border-dark);
}

.process-step-item:first-child {
  border-top: 1px solid var(--color-border-dark);
}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.step-title {
  font-family: var(--font-body);
  font-size: var(--text-1xl);
  color: var(--color-accent-white);
  font-weight: 700;
}

.step-number {
  font-family: var(--font-body);
  font-size: var(--text-1xls);
  color: var(--color-accent-white);
  opacity: 0.8;
}

.step-description {
  font-size: var(--text-lg);
  color: var(--color-accent-white);
  font-weight: 300;
  line-height: 1.6;
  max-width: 90%;
}

.process-section .v-lines-overlay {
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--gutter);
  right: var(--gutter);
  width: auto;
  height: 100%;
  position: absolute;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
}

.process-section .v-line {
  position: relative;
  width: 1px;
  border-left: none;
  background: linear-gradient(to bottom,
      var(--color-border-dark) 60px,
      var(--color-border-dark) 60px);
}

.process-section .v-line {
  background: linear-gradient(to bottom,
      var(--color-border-light) 100px,
      var(--color-border-dark) 100px);
}

.process-section .v-line:nth-child(1) {
  width: 1px;
  border-left: none;
  background: var(--color-border-light);
}

.process-section .v-line:last-child {
  border-right: none;
}

.process-section .v-lines-overlay::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border-light);
}

.process-section .h-border-plus {
  border-bottom: 1px solid var(--color-border-dark);
}

.h-border-plus::before,
.h-border-plus::after {
  bottom: -7px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.26 10V5.74H0V4.24H4.26V0H5.74V4.24H10V5.74H5.74V10H4.26Z' fill='white' fill-opacity='0.2'/%3E%3C/svg%3E");
}

.h-border-plus::before {
  /* left: -6px; */
  left: -7.5px;
}

.h-border-plus::after {
  right: -7px;
}

.process-step-item:last-child::before,
.process-step-item:last-child::after {
  display: none !important;
}

.layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
}

.hero-viewport {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.hero-viewport .hero-section-outer {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.hero-viewport .hero-section {
  flex: 1;
  min-height: 0;
}

.hero-viewport .hero-container {
  flex: 1;
  height: auto;
}

/* --- Hero --- */
.hero-section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-body);
  margin-top: 0 !important;
  padding-top: 0 !important;
  /* border-block: 1px solid red; */
}

.hero-container {
  position: relative;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Clears the fixed/overlay header sitting on top of the hero */
  padding-top: calc(var(--navbar-height) + 8px);
  padding-bottom: var(--gutter);
  display: flex;
  align-items: center;
}

.hero-grid-lines {
  position: absolute;
  inset: 0 var(--gutter);
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  z-index: 0;
}

.hero-grid-lines span {
  border-left: 1px solid var(--color-border-light);
}

.hero-grid-lines span:last-child {
  border-right: 1px solid var(--color-border-light);
}

.hero-grid-lines.dark span {
  border-left: 1px solid var(--color-border-dark);
}

.hero-grid-lines.dark span:last-child {
  border-right: 1px solid var(--color-border-dark);
}

.hero-content {
  /* position: relative; */
  z-index: 1;
  /* min-height: inherit; */
  display: grid;
  flex: 1;
  /* align-items: center; */
  grid-template-columns: repeat(4, 1fr);
}

/* .hero-left,
.hero-center,
.hero-side {
  max-height: 100%;
  overflow: hidden;
} */
.hero-left {
  grid-column: 1 / 4;
  position: relative;
  z-index: 2;
  padding-top: clamp(12px, 1.8vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.5rem, 2.5vw, 45px);
  justify-content: space-between;
}

.hero-title {
  max-width: calc(var(--grid-col) * 1.7);
  color: var(--color-text-light);
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.75;
}

.hero-title.dark {
  color: var(--color-accent-white);
}

.hero-title span {
  /* display: block; */
  /* padding-bottom: 30px; */
}

.hero-brand-row {
  /* margin-top: clamp(28px, 4vw, 40px); */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 1.3vw, 18px);
  font-family: var(--font-body);
  line-height: 0.92;
}

.hero-brand-main {
  position: relative;
  color: var(--color-accent-secondary);
  /* Scaled off the grid column (not a vw clamp) so it tracks --grid-col's
     own cap at --container-max, including 2K+, rather than a fixed vw
     value. .hero-brand-row no longer caps its width to one column, so this
     is free to wrap onto its own line on narrower screens instead of being
     squeezed. */
  font-size: clamp(1.75rem, calc(var(--grid-col) * 0.11), 4rem);
  letter-spacing: 0;
}

/* .hero-brand-main::after { content: ""; position: absolute; left: 0.06em; right: 0.02em; bottom: -0.2em; height: 0.08em; background: currentColor; } */
.hero-brand-slash {
  color: #c7c7c7;
  font-size: clamp(2.25rem, calc(var(--grid-col) * 0.11), 4rem);
  font-weight: 700;
  line-height: 0.92;
  margin-bottom: 48px;
}

.hero-brand-muted {
  color: #c7c7c7;
  font-size: clamp(1.75rem, calc(var(--grid-col) * 0.11), 4rem);
}

.hero-services {
  list-style: none;
  /* margin-top: clamp(70px, 8vw, 138px); */
  display: grid;
  gap: 1rem;
  color: #090909;
  font-size: var(--text-lg);
  line-height: 1;
  max-width: var(--grid-col);
  position: relative;
  bottom: -40px;
}

.hero-services.dark {
  color: var(--color-accent-white);
}

.hero-services li {
  display: grid;
  grid-template-columns: 34px auto;
  align-items: center;
  gap: clamp(0.5rem, -0.5rem + 1.5vw, 3rem);
  font-size: var(--text-lg);
}

/* .hero-services span {
  font-size: 0.9em;
} */
.hero-center {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  grid-column: unset;
  /* bottom: clamp(-28px, 2vw, -64px); */
}

.hero-layers {
  width: clamp(320px, 40vw, 920px);
  aspect-ratio: 976 / 453;
  height: auto;
  max-width: 100%;
  display: block;
  /* filter: saturate(1.08) contrast(1.08); */
}

.hero-center.dark {
  /* margin-bottom: -95px; */
}

.dark-layer {
  /* width: clamp(360px, 50vw, 976px);
  aspect-ratio: 976 / 453; */
  height: 90%;
  max-width: 90%;
  display: block;
  /* filter: saturate(1.08) contrast(1.08); */
}

.hero-side {
  grid-column: 4;
  position: relative;
  z-index: 2;
  padding-top: clamp(10px, 1.2vw, 22px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  max-width: var(--grid-col);
}

.hero-stat {
  min-height: 155px;
  text-align: right;
  padding-bottom: clamp(2rem, 3vw, 40px);
}

.hero-stat strong {
  display: block;
  color: var(--color-accent-secondary);
  position: relative;
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1;
  right: -2px;
}

.hero-stat.dark strong {
  color: var(--color-tech-primary);
}

.hero-stat p {
  margin-top: 12px;
  /* max-width: 480px; */
  color: var(--color-text-light);
  font-size: 16px;
  line-height: 1.45;
}

.hero-stat.dark p {
  color: var(--color-accent-white);
}

.hero-video-card {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  border-inline: 1px solid var(--color-border-light);
  background-color: var(--color-body);
  padding: 20px 16px 22px;
}

.hero-video-card.dark {
  border-color: var(--color-border-dark);
  background-color: #000000;
}

.hero-video-meta {
  display: flex;
  justify-content: space-between;
  place-items: center;
  gap: 16px;
  color: #111;
  font-size: var(--text-lg);
}

.hero-video-meta .video-title {
  font-size: var(--text-lg);
}

.hero-video-meta.dark {
  color: var(--color-accent-white);
}

.hero-video-card h2 {
  margin-top: 18px;
  color: #050505;
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.5;
}

.hero-video-card.dark h2,
.hero-video-card.dark p {
  color: var(--color-accent-white) !important;
}

.hero-video-thumb {
  position: relative;
  margin-top: 16px;
  aspect-ratio: 306 / 191;
  overflow: hidden;
}

.hero-video-thumb video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hero-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border: 0;
  background: rgba(5, 202, 250, 0.78);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.hero-play span {
  display: block;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
}

.hero-video-card p {
  margin: 18px 0 0 auto;
  max-width: 571px;
  color: #111;
  text-align: right;
  font-size: var(--text-lg);
  line-height: 1.45;
}

.hero-plus {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 5;
}

.hero-plus::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25994 10V5.74H-5.85318e-05V4.24H4.25994V0H5.75994V4.24H9.99994V5.74H5.75994V10H4.25994Z' fill='%23979797'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.hero-plus-top-left {
  left: -7.5px;
  top: -7.5px;
}

.hero-plus-top-right {
  right: -7.5px;
  top: -7.5px;
}

.hero-plus-bottom-left {
  left: -7.5px;
  bottom: -7.25px;
}

.hero-plus-bottom-right {
  right: -7.5px;
  bottom: -7.25px;
}

.hero-brand-toggle {
  position: relative;
  display: inline-block;
  padding-bottom: 32px;
  color: #c3c3c3;
  transition: color 0.4s ease;
  font-family: var(--font-primary);
}

.hero-brand-toggle::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 10px;
  background: var(--active-color);
  transition: width 0s;
}

.hero-brand-toggle.is-active {
  color: var(--active-color);
}

.hero-brand-toggle.is-active.dark {
  color: var(--color-tech-primary);
}

.hero-brand-toggle.is-active::before {
  width: 100%;
  transition: width 0s;
}

.hero-brand-toggle.is-hovered {
  color: var(--active-color);
}

.hero-brand-toggle.is-hovered::before {
  width: 100%;
  transition: width 0.6s ease;
}

.hero-brand-toggle:not(.is-hovered):not(.is-active)::before {
  width: 0%;
  transition: width 0s;
}

/* .hero-container {
  min-height: clamp(500px, 68vw, 740px);
} */

/* ===================== MEDIA QUERIES ===================== */

/* --- Responsive Layout Solution --- */
@media (max-width: 768px) {
  .hero-section {
    display: block;
  }

  /* Force all header variants to stack vertically on mobile */
  .header-content-wrapper.split,
  .header-content-wrapper.split-centered-right,
  .header-content-wrapper.side-button {
    /* Overrides the has-second-part-column grid layout (see base rule)
       back to flex so flex-direction: column below actually takes effect. */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 12px;
  }

  .header-left,
  .header-right {
    width: 100% !important;
    flex: none !important;
  }

  .header-btn {
    /* --grid-col is 1/4 of the container width and isn't tier-aware —
       on narrow mobile viewports that's far too small for a button, so
       let it fill its parent instead of snapping to the desktop grid. */
    max-width: 100% !important;
  }

  .header-right .header-btn {
    /* Make button feel natural on mobile */
    min-width: 0 !important;
    width: 100% !important;
    margin-top: 1rem;
  }

  /* .header-left .heading {
    font-size: 20px;
    line-height: 1.7;
  } */
  .process-section {
    padding-top: var(--section-spacing-lg);
  }

  .hero-plus-top-left {
    left: -8px;
    top: -7.5px;
  }

  .hero-plus-top-right {
    right: -7.5px;
    top: -7.5px;
  }

  .hero-plus-bottom-left {
    left: -8px;
    bottom: -7px;
  }

  .hero-plus-bottom-right {
    right: -7.5px;
    bottom: -7px;
  }

  .border-bottom-plus::before {
    left: -8px;
  }

  .fw-card__heading {
    font-size: 1.75rem;
  }
}

/* Maintain desktop look for split */
@media (min-width: 769px) {
  .faq-section__vlines {
    grid-template-columns: repeat(4, 1fr);
  }

  .faq-section__vlines::after {
    display: block;
  }

  .faq-section__vlines span:nth-child(4) {
    display: block;
  }

  .faq-section__vlines span:nth-child(2) {
    height: auto;
  }

  .faq-section__vlines span:nth-child(3) {
    border-right: 0;
  }

  .faq-section__vlines span:nth-child(3),
  .faq-section__vlines span:nth-child(4) {
    height: var(--faq-question-top);
  }

  .faq-section__content {
    margin-left: 25%;
    width: 75%;
    /* padding-top: 40px; */
    padding-bottom: var(--section-spacing-xl);
  }
}

@media (min-width: 769px) and (max-width: 1300px) {

  /* .hero-container {
    min-height: clamp(650px, 68vw, 820px);
  } */
  .hero-content {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero-left {
    grid-column: 1 / 4;
  }

  .hero-side {
    grid-column: 4;
    width: 100%;
  }

  .hero-video-card {
    width: 100%;
    padding: 16px 12px 18px;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .case__message__glow {
    width: 400px;
    height: 400px;
    bottom: -60px;
    filter: blur(60px);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .what-we-do__left {
    margin-left: 0 !important;
  }

  .what-we-do__right {
    margin-right: 0 !important;
  }

  .what-we-do__center .what-we-do__box {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    object-fit: contain;
  }

  .what-we-do__center_video .what-we-do__box {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    object-fit: contain;
  }

  .what-we-do__row {
    grid-template-columns: repeat(4, 1fr);
    /* minmax(60px, 0.4fr) minmax(140px, 0.8fr) minmax(180px, 1fr)
      minmax(140px, 0.8fr); */
    column-gap: clamp(12px, 2vw, 24px);
    /* padding: 32px clamp(12px, 2vw, 20px); */
  }

  .what-we-do__accordion {
    display: none;
  }
}

@media (min-width: 768px) {
  .testimonials__vline--outer:nth-child(1)::after {
    display: block;
    left: auto;
    right: -7px;
    top: calc(var(--testimonials-header-height, 0px) - 6px);
    transform: translateY(-2px);
  }

  .testimonials__vline--outer:nth-child(2)::before {
    display: block;
    right: auto;
    left: -7px;
    top: calc(var(--testimonials-header-height, 0px) - 6px);
    transform: translateY(-2px);
  }
}

@media (min-width: 667px) and (max-width: 1024px) {
  .testimonials__card {
    flex: 0 0 calc((100% - 24px) / 2);
  }
}

@media (min-width: 992px) {
  .what-we-do__grid {
    display: block;
  }

  .what-we-do__accordion {
    display: none;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .testimonials__card {
    flex: 0 0 calc((100% - 48px) / 3);
  }
}

@media (max-width: 1199px) {
  .testimonials__vlines--full {
    bottom: auto;
    height: var(--testimonials-header-height, 0px);
  }

  .testimonials__vline--outer:nth-child(1)::before,
  .testimonials__vline--outer:nth-child(2)::after {
    display: none;
  }
}

@media (min-width: 1200px) {
  .case__studies__cards {
    /* display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); */
    display: flex;
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .case__studies__card {
    min-width: unset;
    width: 100%;
    height: clamp(450px, 40vw, 727px);
    scroll-snap-align: none;
  }

  .case__studies__cards--single {
    display: flex;
  }

  .case__studies__cards--single .case__studies__card {
    width: 100%;
  }

  .case__studies__nav {
    display: none;
  }

  .testimonials__cards {
    display: flex;
    gap: 23px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .testimonials__card {
    flex: 0 0 calc((100% - 72px) / 4);
    scroll-snap-align: start;
  }

  .testimonials__nav {
    display: flex;
  }

  .case__studies__vlines {
    grid-template-columns: repeat(4, 1fr);
    --case-studies-lines-height: 45%;
  }
}

.single-img {
  width: 100%;
  position: relative;
  /* z-index: 5; */
}

@media (max-width: 1023px) {
  .case__studies__header__wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .case__studies__nav {
    align-self: flex-end;
  }

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

  .testimonials__header-text {
    width: 100%;
  }

  .testimonials__nav {
    align-self: flex-end;
  }

  .service-info {
    display: flex;
    flex-direction: column;
  }

  .service-info-left {
    display: contents;
  }

  .service-title {
    order: 1;
  }

  .service-description {
    order: 2;
  }

  .categories-section {
    order: 3;
  }

  .view-details {
    order: 4;
    margin-top: 32px;
  }
}

.process-bottom-spacer {
  display: none;
}

@media (max-width: 1024px) {

  /* Stack split-style SectionHeaders (left content / right button) a full
     tablet tier earlier than the rest of this block's ≤992px rules — a
     row layout here left too little room for heading + button together.
     !important because this file redeclares .header-content-wrapper.split
     and .process-right in several other places (some unscoped, appearing
     later in the cascade) that otherwise silently win and undo this. */
  .header-content-wrapper.split,
  .header-content-wrapper.split-centered-right {
    /* Overrides the has-second-part-column grid layout (see base rule)
       back to flex so flex-direction: column above actually takes effect. */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  /* align-items: flex-start (above) stops header-left/header-right from
     stretching to the container's width — without an explicit width they
     shrink-wrap to content instead, which collapses .header-btn's own
     width: 100% (it resolves against header-right's now content-sized
     box) and made this look broken/unresponsive below this breakpoint. */
  .header-content-wrapper.split .header-left,
  .header-content-wrapper.split .header-right,
  .header-content-wrapper.split-centered-right .header-left,
  .header-content-wrapper.split-centered-right .header-right {
    width: 100% !important;
    flex: none !important;
  }

  /* Otherwise the button stays capped to one grid column's width (its
     desktop sizing) while everything around it has gone full-width. */
  .header-content-wrapper.split .header-btn,
  .header-content-wrapper.split-centered-right .header-btn {
    max-width: 100% !important;
  }

  /* The ≤992px block further down already zeroes this out; extend that
     same fix a tier earlier so .process-right sits flush instead of
     leaving a 24px gap on the right between 993px and 1024px. */
  .process-right {
    margin-right: 0 !important;
  }
}

@media (max-width: 992px) {
  .section-header.side-button .header-left {
    flex: 0 0 70%;
    max-width: 70%;
  }

  .advantages-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .border-vertical,
  .border-plus {
    border-right: none;
  }

  .right-col {
    order: 1 !important;
    padding-left: 0;
    padding-right: 0.5rem;
    /* padding-top: 40px; */
  }

  .left-col {
    order: 2 !important;
  }

  .advantages-list::after {
    display: none !important;
  }

  .advantages-list {
    background-color: var(--color-body1) !important;
    position: relative;
    z-index: 2;
    border-left: 1px solid #e5e5e5 !important;
    border-right: 1px solid #e5e5e5 !important;
  }

  .advantages-right {
    padding-left: 0;
  }

  .advantages-container {
    padding-bottom: var(--section-spacing-md);
  }

  .advantages-container .header-content-wrapper.right-aligned {
    align-items: flex-start !important;
    text-align: left !important;
    max-width: 100% !important;
  }

  .advantages-container .header-content-wrapper.right-aligned .header-left {
    align-items: flex-start !important;
  }

  .advantages-container .header-content-wrapper.right-aligned .paragraph {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .advantages-container .header-content-wrapper.right-aligned .header-right {
    justify-content: flex-start !important;
  }

  .advantages-title h3 span {
    color: var(--color-text-grey-3);
  }

  .border-plus {
    border-left: none;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .process-left {
    padding-top: var(--section-spacing-lg);
    /* padding-bottom: 3rem; */
  }

  .process-section.light-mobile {
    background-color: var(--color-accent-white);
  }

  /* .process-section {
    padding-bottom: 40px;
  } */
  .process-left {
    padding-left: 0;
  }

  .process-section,
  .process-step-item {
    background-color: transparent !important;
  }

  .process-container {
    background-color: transparent !important;
    z-index: auto !important;
  }

  .process-right-container {
    position: relative;
    z-index: 3 !important;
  }

  .process-right {
    background-color: white !important;
    margin: 0;
    z-index: 3;
  }

  /* Remove left border on right container since they stack */
  .process-right {
    border-left: none;
    border-right: none;
    margin-left: 0;
    margin-right: 0;
  }

  .process-section .v-line,
  .process-section .h-border-plus,
  .process-step-item,
  .process-step-item:first-child {
    border-color: #e5e5e5 !important;
    border-inline: 1px solid;
  }

  .process-section .v-line {
    background: transparent !important;
    border-left: 1px solid #e5e5e5 !important;
    border-right: none !important;
    width: auto !important;
    height: 100% !important;
  }

  .process-section .v-line:nth-child(1) {
    z-index: 4 !important;
  }

  .process-section .v-line:nth-child(2),
  .process-section .v-line:nth-child(3),
  .process-section .v-line:nth-child(4) {
    z-index: 2 !important;
  }

  .process-section .v-lines-overlay::after {
    background: transparent !important;
    border-right: 1px solid #e5e5e5 !important;
    width: auto !important;
    z-index: 4 !important;
  }

  .process-container .heading,
  .process-container .paragraph,
  .process-container .text-style,
  .process-container .step-title,
  .process-container .step-number {
    color: var(--color-accent-black) !important;
  }

  .process-container .step-description {
    color: var(--color-text-light) !important;
  }

  .process-section .h-border-plus::before,
  .process-section .h-border-plus::after {
    display: none !important;
  }

  .process-section,
  .process-section .process-container,
  .process-section .process-step-item {
    background-color: #1a1a1a !important;
  }

  .process-section .v-lines-overlay .v-line {
    background: transparent !important;
    border-left: 1px solid var(--color-border-dark) !important;
  }

  .process-section .v-lines-overlay::after {
    background: transparent !important;
    border-right: 1px solid var(--color-border-dark) !important;
  }

  /* Keep text colors white for readability */
  .process-section .process-container .heading,
  .process-section .process-container .paragraph,
  .process-section .process-container .text-style,
  .process-section .process-container .step-title,
  .process-section .process-container .step-number {
    color: #ffffff !important;
  }

  .process-section .process-container .step-description {
    color: #c3c3c3 !important;
  }

  .process-section .process-right {
    background-color: #1a1a1a !important;
    /* border-inline-color: var(--color-border-dark) !important; */
  }

  .process-section .process-step-item {
    border-color: var(--color-border-dark) !important;
  }

  .process-bottom-spacer {
    display: block;
    height: 40px;
    width: 100%;
    background: transparent;
  }

  .process-section {
    padding-top: 0;
  }

  .home-spacer {
    position: relative;
    height: 80px;
    margin-inline: var(--gutter);
    background-image:
      linear-gradient(var(--color-border-light), var(--color-border-light)),
      linear-gradient(var(--color-border-light), var(--color-border-light)),
      linear-gradient(var(--color-border-light), var(--color-border-light));
    background-position:
      25% top,
      50% top,
      75% top;
    background-repeat: no-repeat;
    background-size: 1px 100%;
  }

  .home-spacer::before,
  .home-spacer::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--color-border-light);
  }

  .home-spacer::before {
    left: 0;
    background-color: var(--color-border-light);
  }

  .home-spacer::after {
    right: 0;
  }
}

@media (max-width: 768px) {
  .home-spacer {
    height: 60px;
    background-image:
      linear-gradient(var(--color-border-light), var(--color-border-light)),
      linear-gradient(var(--color-border-light), var(--color-border-light));
    background-position:
      33.333% top,
      66.667% top;
  }

  .left-col {
    margin-top: -3rem;
  }

  .process-section .v-lines-overlay {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .process-section .v-lines-overlay .v-line:nth-child(4),
  .process-section .v-lines-overlay .v-line:last-child {
    display: none !important;
  }

  .process-section .v-lines-overlay::after {
    display: block !important;
    border-right: 1px solid #e5e5e5 !important;
  }

  .process-section .v-lines-overlay .v-line:nth-child(2) {
    z-index: 2 !important;
  }

  .process-section .v-lines-overlay .v-line:nth-child(3) {
    border-right: none !important;
    z-index: 2 !important;
  }

  .process-section .v-lines-overlay::after {
    border-right: 1px solid var(--color-border-dark) !important;
  }

  .stats-grid-card .v-lines-overlay {
    display: none !important;
  }

  .advantages-container .v-lines-overlay {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .advantages-container .v-lines-overlay .v-line:last-child {
    display: none !important;
  }

  .advantages-container .v-lines-overlay .v-line:nth-child(3) {
    border-right: 1px solid #e5e5e5 !important;
  }

  .hero-container {
    flex-direction: row;
    /* min-height: 950px; */
    /* padding-inline: 8px; */
  }

  .hero-grid-lines {
    inset: 0 var(--gutter);
    display: block;
    background-image:
      linear-gradient(var(--color-border-light), var(--color-border-light)),
      linear-gradient(var(--color-border-light), var(--color-border-light)),
      linear-gradient(var(--color-border-light), var(--color-border-light)),
      linear-gradient(var(--color-border-light), var(--color-border-light));
    background-position:
      left top,
      33.333% top,
      67% top,
      calc(100% + 0.5px) top;
    background-repeat: no-repeat;
    background-size: 1px 100%;
    /* z-index: 1; */
  }

  .hero-grid-lines.dark {
    background-image:
      linear-gradient(var(--color-border-dark), var(--color-border-dark)),
      linear-gradient(var(--color-border-dark), var(--color-border-dark)),
      linear-gradient(var(--color-border-dark), var(--color-border-dark)),
      linear-gradient(var(--color-border-dark), var(--color-border-dark));
  }

  .hero-grid-lines span {
    display: none;
  }

  .hero-grid-lines span:nth-child(4) {
    display: none;
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    row-gap: 0;
    z-index: 2;
  }

  .hero-left {
    display: contents;
  }

  .hero-title {
    order: 1;
    max-width: 364px;
    /* padding-top: 40px; */
    /* font-size: 28px; */
    line-height: 1.75;
  }

  .hero-bl {
    order: 3;
  }

  /* .hero-stat.dark strong {
  padding: 20px 0 4px;
} */
  .hero-stat {
    order: 2;
    min-height: 0;
    margin-top: 18px;
    text-align: left;
    padding: 0;
  }

  .hero-brand-row {
    order: 3;
    margin-top: 28px;
    gap: 7px;
    max-width: 100%;
  }

  .hero-side {
    display: contents;
  }

  .hero-stat p {
    margin: 12px 0;
    margin-left: 0;
    line-height: 1.45;
  }

  .hero-brand-toggle {
    padding-bottom: 20px;
  }

  .hero-brand-slash {
    margin-bottom: 20px;
  }

  .hero-brand-toggle::before {
    height: 4px;
  }

  .hero-brand-main::after {
    bottom: -0.19em;
    height: 0.08em;
  }

  .hero-services {
    order: 4;
    /* margin-top: 30px; */
    gap: 14px;
    max-width: 100%;
    padding-bottom: 40px;
  }

  .hero-services li {
    grid-template-columns: 24px auto;
    gap: 10px;
  }

  .hero-center {
    display: none;
  }

  .hero-video-card {
    order: 5;
    position: relative;
    z-index: 3;
    margin-top: 40px;
    padding: 12px 7px 12px;
    background-color: var(--color-body);
    border-inline: 1px solid var(--color-border-light);
  }

  .hero-video-card.dark {
    background-color: #000000;
  }

  .hero-video-card h2 {
    margin-top: 12px;
    /* font-size: 0.98rem; */
    line-height: 1.3;
  }

  .hero-video-thumb {
    margin-top: 12px;
  }

  .hero-play {
    width: 28px;
    height: 28px;
  }

  .hero-play span {
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-left-width: 9px;
  }

  .hero-video-card p {
    /* max-width: 240px; */
    margin-top: 12px;
    line-height: 1.35;
  }

  .what-we-do-list__number {
    transform: translateY(0);
  }

  .what-we-do {
    --what-we-do-mobile-lines:
      linear-gradient(var(--color-border-light), var(--color-border-light)),
      linear-gradient(var(--color-border-light), var(--color-border-light)),
      linear-gradient(var(--color-border-light), var(--color-border-light)),
      linear-gradient(var(--color-border-light), var(--color-border-light));
  }

  .what-we-do__section-wrapper {
    overflow: hidden;
  }

  .what-we-do__vlines--full {
    display: none;
  }

  .what-we-do__header .what-we-do__vlines--header {
    display: none;
  }

  .what-we-do__vlines--footer {
    position: relative;
    display: flex;
    height: 0;
    justify-content: space-between;
    z-index: 0;
  }

  .what-we-do__vlines--footer .what-we-do__vline--outer,
  .what-we-do__vlines--footer .what-we-do__vline--inner {
    display: block;
  }

  .what-we-do__vlines--footer .what-we-do__vline--inner:nth-child(3) {
    display: none;
  }

  .what-we-do__header {
    position: relative;
    z-index: 1;
    padding-top: 0;
  }

  .what-we-do__header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--what-we-do-mobile-lines);
    background-position:
      left top,
      33.333% top,
      66.666% top,
      right top;
    background-repeat: no-repeat;
    background-size: 1px 100%;
    pointer-events: none;
    z-index: -1;
  }

  .what-we-do__grid {
    display: none;
  }

  .what-we-do__accordion {
    position: relative;
    z-index: 1;
    display: block;
    /* border-top: 1px solid var(--color-border-light); */
  }

  .what-we-do__accordion-item {
    background-color: #f3f3f3;
  }

  .what-we-do__accordion-header {
    min-height: 60px;
    padding: 0 8px;
    gap: 12px;
    background: transparent;
    /* border-bottom: 1px solid var(--color-border-light); */
    position: relative;
    z-index: 2;
    border-inline: 1px solid var(--color-border-light);
    border-top: 1px solid var(--color-border-light);
  }

  .what-we-do__accordion .what-we-do__number {
    /* font-size: 20px; */
    line-height: 1;
  }

  .what-we-do__header .section-header {
    padding-bottom: var(--section-spacing-md);
  }

  .what-we-do__accordion-title {
    color: var(--color-accent-black);
    font-family: var(--font-body);
    font-weight: 700;
    /* font-size: 20px; */
    line-height: 1.1;
    text-align: left;
  }

  .what-we-do__accordion-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    background: var(--color-accent-black);
    color: var(--color-accent-white);
    font-size: 0;
    line-height: 1;
    flex-shrink: 0;
    rotate: 90deg;
  }

  .what-we-do__accordion-icon::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(2px) rotate(225deg);
  }

  .what-we-do__accordion-header[aria-expanded="true"] .what-we-do__accordion-icon {
    background: var(--color-accent-black);
    rotate: 180deg;
  }

  .what-we-do__accordion-header[aria-expanded="true"] .what-we-do__accordion-title {
    color: var(--color-accent-secondary);
  }

  .what-we-do__accordion-header[aria-expanded="true"] .what-we-do__number {
    color: var(--color-accent-secondary);
  }

  /* .what-we-do__accordion-content {
    background-image:
      linear-gradient(var(--color-border-light), var(--color-border-light)),
      linear-gradient(var(--color-border-light), var(--color-border-light));
    background-position:
      33.333% top,
      66.666% top;
    background-repeat: no-repeat;
    background-size: 1px 100%;
  } */
  .what-we-do__accordion-item:last-child .what-we-do__accordion-content:not(.open) {
    min-height: 0;
  }

  .what-we-do__accordion-header[aria-expanded="false"] {
    border-bottom: none;
  }

  .what-we-do__accordion-content.open {
    min-height: 0;
    grid-template-rows: 1fr;
    padding: 0 12px 12px 12px;
    border-inline: 1px solid var(--color-border-light);
  }

  .what-we-do__accordion-item:last-child .what-we-do__accordion-content {
    border-bottom: 1px solid var(--color-border-light);
  }

  .what-we-do__accordion-item {
    border-bottom: none;
  }

  .what-we-do__accordion .what-we-do__accordion-item:first-child {
    padding-top: 20px;
  }

  .what-we-do__accordion .what-we-do__accordion-item:last-child {
    padding-bottom: 20px;
  }

  /* .what-we-do__accordion-item:last-child .what-we-do__accordion-header {
  border-bottom: 1px solid var(--color-border-light);
} */
  .what-we-do__accordion-item:last-child .what-we-do__accordion-header[aria-expanded="false"] {
    border-bottom: 1px solid var(--color-border-light);
  }

  .what-we-do__accordion .what-we-do__list li {
    /* font-size: var(--text-md); */
    /* font-size: 20px; */
    font-weight: 400;
    color: #000;
    line-height: 20px;
  }

  .insight-section .section-header.side-button {
    flex-direction: column;
    padding: 0;
    align-items: flex-start;
  }

  .section-header.side-button .header-left,
  .section-header.side-button .header-right {
    display: flex;
    flex-direction: column;
    flex: 0 0 100%;
    max-width: 100%;
    justify-content: flex-start;
  }

  .section-header.centered {
    flex-direction: column;
    gap: 0 !important;
  }

  .section-header.centered .header-content-wrapper {
    max-width: 100%;
  }

  .header-content-wrapper.centered {
    flex-direction: column;
    align-items: flex-start;
    margin-inline: 0;
    max-width: 100%;
    text-align: left;
  }

  .header-content-wrapper.right-aligned {
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
  }

  .header-content-wrapper.right-aligned .header-left,
  .header-content-wrapper.right-aligned .header-right {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .testimonials__header .testimonials__vlines--header,
  .case__studies__vlines--header {
    padding-inline: 0.1%;
    justify-content: space-evenly;
  }

  .testimonials__header .testimonials__vline--inner:nth-child(2),
  .case__studies__vlines--header .case__studies__vline--inner:nth-child(2),
  .testimonials__vline--inner:nth-child(2) {
    display: none;
  }

  .case__studies__vlines--header {
    display: none;
  }

  .testimonials__nav-btn,
  .case__studies__nav__btn {
    width: 40px;
    height: 40px;
  }

  .case__studies__vlines--full .case__studies__vline--outer:nth-child(3),
  .case__studies__vlines--full .case__studies__vline--outer:nth-child(4) {
    display: block;
  }

  .case__studies__card__top {
    padding: 24px 16px 0;
    justify-content: flex-start;
  }

  .case__studies__card__bottom {
    padding: 0 16px 16px;
  }

  .case__message {
    min-height: 620px;
  }

  .case__message__wrapper {
    display: flex;
    flex-direction: column;
    min-height: inherit;
  }

  .case__message__vlines {
    inset: 0;
    left: var(--gutter);
    right: var(--gutter);
    grid-template-columns: repeat(3, 1fr);
  }

  .case__message__vlines span:nth-child(4) {
    display: none;
    border-right: 0;
  }

  .case__message__vlines span:nth-child(3) {
    border-right: 1px solid rgba(132, 128, 128, 0.11);
  }

  .case__message__content {
    order: 1;
    align-self: stretch;
    max-width: none;
    padding: var(--section-spacing-xl) 0 var(--section-spacing-xs);
  }

  /* .case__message__content .text-style { padding-left: 24px; } */
  .case__message__content .heading {
    max-width: 480px;
  }

  .case__message__content .paragraph {
    margin-top: 12px;
    margin-bottom: 12px;
    padding-left: 22px;
    font-size: var(--text-lg);
    line-height: 1.45;
    border-left: 1px solid rgba(255, 255, 255, 0.48);
  }

  .case__message__content .section-header {
    padding-bottom: 0;
  }

  .case__message__person {
    margin-top: 0;
    padding-top: 14px;
    align-items: flex-start;
    gap: 8px;
    padding-left: 22px;
    border-left: 1px solid rgba(255, 255, 255, 0.48);
  }

  .case__message__person--no-paragraph {
    padding-left: 0;
    border-left: none;
    margin-top: clamp(12px, 2vw, 20px);
    padding-top: 0;
    /* spacing comes from margin-top instead */
  }

  .case__message__person__info {
    display: flex;
    gap: 5px;
  }

  .case__message__image-panel {
    order: 2;
    flex: 1;
    min-height: 290px;
    align-items: flex-end;
    justify-content: center;
    padding-left: 0;
  }

  .case__message__glow {
    left: 50%;
    top: auto;
    bottom: -116px;
    width: 358px;
    height: 380px;
    transform: translateX(-50%) rotate(57.74deg);
    filter: blur(25px);
  }

  .case__message__person-img {
    width: min(96%, 300px);
    max-height: 315px;
    object-position: center bottom;
  }

  .case__studies__vlines {
    grid-template-columns: repeat(3, 1fr);
    --case-studies-lines-height: 42%;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-bg__phone-desktop {
    display: none;
  }

  .col-span-3 {
    grid-column: span 2;
  }

  .stats-image-cell {
    grid-column: span 2;
    padding-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .phone-img {
    width: 100%;
  }

  .grid-cell {
    padding: 0.9rem 0 0.9rem 0;
    border: none;
  }

  .grid-cell:last-child {
    border: none;
    padding-right: 0;
  }

  .stats-section-container {
    background-image: none !important;
    background-color: #f3f3f3;
    padding: 0;
  }

  .stats-grid-card {
    padding-inline: var(--gutter);
    padding-top: var(--gutter);
    padding-bottom: calc(var(--gutter) * 2.5);
    gap: 4px;
  }

  .main-text-cell {
    padding-inline: var(--gutter);
    /* padding-top: var(--gutter); */
  }

  .stats-image-cell {
    display: block;
  }

  .stats-heading {
    margin-bottom: 1rem;
  }
}

@media (max-width: 768px) {
  .testimonials__nav {
    display: none;
  }

  .testimonials__cards {
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    /* background-color: transparent;
    padding: 0; */
  }

  .testimonials__card {
    flex: 1 1 auto;
    width: 100%;
    aspect-ratio: unset;
    height: auto;
    scroll-snap-align: none;
    gap: 20px;
  }

  .testimonials__cards {
    margin-inline: calc(var(--gutter) * -1);
  }
}

@media (max-width: 667px) {

  .testimonials__vline--outer:nth-child(1)::before,
  .testimonials__vline--outer:nth-child(2)::after {
    display: none;
  }
}

/* ───────────────────────────────────────
   TeamMembers
─────────────────────────────────────── */
/* ───────────────────────────────────────
   TeamMembers
─────────────────────────────────────── */

.team__section {}

/* ── Accordion Header ── */
.team__section-header {
  display: flex;

  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  cursor: pointer;
  user-select: none;
  background: #fff;
  /* closed: white bg */
  transition: background 0.25s ease;
}

/* Open state: black bg, white text */
.team__section-header.is-open {
  background: #000;
}

.team__section-title {
  font-family: var(--font-primary);
  font-size: var(--text-3xl);
  font-weight: 400;
  color: #000000;
  /* closed: black text */
  margin: 0;
  letter-spacing: -0.01em;
  transition: color 0.25s ease;
  position: relative;
}

@media (max-width: 760px) {
  .team__section-title {
    font-size: 20px;
  }

  .team__section-header {
    position: relative;
    border: var(--color-border-light) 1px solid;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

/* Open state: title turns white */
.team__section-header.is-open .team__section-title {
  color: #fff;
  font-size: 16px;
}

/* ── Chevron pill ── */
.team__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8%;
  background: #7c3aed;
  /* closed: purple */
  transition: background 0.25s ease;
  flex-shrink: 0;
}

/* Open state: white bg, black chevron (stroke handled in JSX) */
.team__chevron.is-open {
  background: #fff;
}

/* ── Accordion collapse ── */
.team__accordion {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.team__accordion.open {
  grid-template-rows: 1fr;
}

.team__accordion-inner {
  min-height: 0;
  overflow: hidden;
}

.team__accordion-inner .team__grid {
  padding: var(--section-spacing-md) 0px;
  padding-bottom: var(--section-spacing-team-grid);
}

/* ── Grid ── */
.team__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/* ── Card ── */
.team__card {
  display: flex;
  flex-direction: column;
}

.team__card-img-wrap {
  width: 100%;
  max-width: 403px;
  aspect-ratio: 403 / 433;
  overflow: hidden;
  background: #e5e5e5;
}

.team__card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.team__card:hover .team__card-img-wrap img {
  filter: grayscale(0%);
}

.team__card-info {
  padding: 1.5rem 0 0;
}

.team__card-name {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 400;
  color: #000;
  position: relative;
  padding-bottom: 0.5rem;
  margin: 0 0 4px;
  line-height: 1.3;
}

.team__card-role {
  font-size: var(--text-lg);
  font-weight: 400;
  color: #737373;
  margin: 0;
  position: relative;

  line-height: 1.4;
}

@media (min-width: 891px) and (max-width: 1034px) {
  .hero-container {
    /* min-height: 700px; */
    /* padding-inline: 8px; */
  }
}

/* ────────────────────────────────────────
           RESPONSIVE BREAKPOINTS for teammebers
        ──────────────────────────────────────── */

/* ── 3 columns: 600px+ ── */
@media (max-width: 768px) {
  .team__grid {
    gap: 12px;
  }
}

@media (min-width: 600px) {
  .team__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .team__section {
    border-bottom: none;
  }

  /* Last section ka margin zero karo */
  .team__section:last-child {
    margin-bottom: 0;
    /* ← ADD THIS */
  }
}

@media (min-width: 1024px) {

  /* Last section ka margin zero karo */
  .team__section:last-child {
    margin-bottom: 0;
    /* ← ADD THIS */
  }
}

/* ── Desktop: accordion OFF ── */
@media (min-width: 768px) {
  .team__section {
    /* margin-bottom: 48px; */
    border-bottom: none;
  }

  /* Reset header styles — no bg color game on desktop */
  .team__section-header,
  .team__section-header.is-open {
    background: transparent;
    cursor: default;
    padding: 0 0 10px 0;
  }

  .team__section-title,
  .team__section-header.is-open .team__section-title {
    color: #000;
    font-size: var(--text-1-2xl);
  }

  /* Hide chevron on desktop */
  .team__chevron {
    display: none;
  }

  /* Always expanded */
  .team__accordion {
    display: block;
  }

  .team__accordion-inner {
    overflow: visible;
  }

  .team__accordion-inner .team__grid {
    /* padding: 0; */
    /* padding-top:rem; */
  }

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

/* ── 4 columns: 1024px+ ── */
@media (min-width: 1024px) {
  .team__section-title {
    font-size: var(--text-1-2xl);
  }

  .team__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .faq-section .section-header.centered {
    /* padding-top: var(--section-spacing-lg); */
  }
}

.faq-section .section-header.centered {
  padding-top: var(--section-spacing-lg);
}

@media (min-width: 1200px) {
  .team__card-name {
    font-size: var(--text-lg);
  }

  .team__card-role {
    font-size: var(--text-lg);
  }
}

/* ══════════════════════════════════════════════════
   grid variant — matches split flex proportions
   so right column aligns with section above
   ══════════════════════════════════════════════════ */

.section-header.grid {
  display: flex;
  flex-direction: column;
  /* badge on top, then wrapper row */
  align-items: flex-start;
}

.header-content-wrapper.grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  /* top-align left text with grid top */
  /* gap: clamp(2rem, 5vw, 4rem); */
  width: 100%;
  max-width: 100%;
  padding-top: var(--section-spacing-xl);
  overflow: hidden;
  /* prevent grid from overflowing */
}

/* Left — flex: 1.2 same as split */
.header-content-wrapper.grid .header-left {
  flex: 1;
  min-width: 0;
  /* prevent flex blowout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* gap: 1rem; */
}

/* Right — flex: 1 same as split, constrained */
.header-content-wrapper.grid .header-right {
  flex: 1;
  min-width: 0;
  /* prevent flex blowout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ── Logo grid ── */
.grid-variant__right {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 2), 1fr);
  border-top: 5px solid #f3f3f3;
  border-left: 5px solid #f3f3f3;
  width: 100%;
  overflow: hidden;
}

.client-grid-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  padding: 0.75rem 1rem;
  border-right: 5px solid #f3f3f3;
  border-bottom: 5px solid #f3f3f3;
  min-height: 120px;
  gap: 5rem;
  overflow: hidden;
}

.grid-cell__label {
  font-size: var(--text-sm);
  color: #737373;
  line-height: 1.3;
  align-items: center;
  white-space: nowrap;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.grid-cell__icon {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
}

/* Hide broken images gracefully — show nothing if src is missing */
.grid-cell__icon img {
  /* max-width: 8rem; */
  align-items: center;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* filter: grayscale(1); */
  /* opacity: 0.65; */
  transition:
    filter 0.25s,
    opacity 0.25s;
  /* Hide alt text when image fails to load */
  overflow: hidden;
  color: transparent;
  font-size: 0;
}

.grid-cell:hover .grid-cell__icon img {
  filter: grayscale(0);
  opacity: 1;
}

/* Fallback placeholder when no real image exists */
.grid-cell__icon img::before {
  content: "";
  display: block;
  width: 48px;
  height: 32px;
  background: var(--color-border-light);
  border-radius: 4px;
}

.grid-cell__icon svg {
  width: 36px;
  height: 36px;
  opacity: 0.65;
  transition: opacity 0.25s;
}

.grid-cell:hover .grid-cell__icon svg {
  opacity: 1;
}

.grid-cell__year {
  font-size: var(--text-sm);
  align-items: center;
  color: #737373;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .header-content-wrapper.grid {
    flex-direction: column;
    gap: 2rem;
  }

  .header-content-wrapper.grid .header-left,
  .header-content-wrapper.grid .header-right {
    width: 100%;
  }
}

/* Desktop static grid — keep 2-column layout on all breakpoints */
.grid-slider-wrapper--static .grid-variant__right--static {
  display: grid !important;
  width: 100% !important;
  animation: none !important;
  transform: none !important;
}

@media (min-width: 769px) {
  .our-clients-section--static .header-content-wrapper.grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
    align-items: start;
  }

  .our-clients-section--static .header-content-wrapper.grid .header-left {
    grid-column: 1;
    flex: none;
    max-width: 100%;
    min-width: 0;
  }

  .our-clients-section--static .header-content-wrapper.grid .header-right {
    grid-column: 3 / -1;
    flex: none;
    width: 100%;
    min-width: 0;
  }

  .our-clients-section--static .client-grid-cell {
    min-height: clamp(140px, 16vw, 200px);
  }
}

/* =========================================
   MOBILE GRID SLIDER
========================================= */

.grid-slider-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Desktop */
.grid-variant__right {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 2), 1fr);
}

/* Mobile */
@media (max-width: 768px) {
  .mobile-slider {
    display: flex !important;

    width: max-content;
    overflow-x: auto;
    /* slower + smoother */
    animation: scrollSlider 28s linear infinite;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }

  .mobile-slider.paused {
    animation-play-state: paused;
  }

  /* Chevron clicked → animation off, translateX takes over */
  .mobile-slider.manual-mode {
    animation: none !important;
  }

  .client-grid-cell {
    min-width: 180px;
    flex-shrink: 0;

    background: #ffffff;
  }

  /* =========================
     SIDE FADE ANGLES
  ========================= */

  .grid-slider-wrapper::before,
  .grid-slider-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 70px;
    height: 100%;
    z-index: 5;
    pointer-events: none;
  }

  /* left fade */
  .grid-slider-wrapper::before {
    left: 0;
    /* background: linear-gradient(
      to right,
      #f3f3f3 0%,
      rgba(243,243,243,0.9) 30%,
      rgba(243,243,243,0) 100%
    ); */
  }

  /* right fade */
  .grid-slider-wrapper::after {
    right: 0;
    /* background: linear-gradient(
      to left,
      #f3f3f3 0%,
      rgba(243,243,243,0.9) 30%,
      rgba(243,243,243,0) 100%
    ); */
  }

  /* Static 2x2 grid (service detail — no carousel) */
  .grid-slider-wrapper--static {
    overflow: visible;
  }

  .grid-slider-wrapper--static::before,
  .grid-slider-wrapper--static::after {
    display: none;
  }

  .grid-variant__right--static {
    display: grid !important;
    width: 100% !important;
    max-width: 100%;
    animation: none !important;
    transform: none !important;
    flex-wrap: unset;
  }

  .grid-variant__right {
    grid-template-columns: 1fr;
  }

  .grid-slider-wrapper--static .client-grid-cell {
    min-width: 0;
    width: auto;
    flex-shrink: 1;
  }

  .our-clients-section--static .client-grid-cell {
    gap: clamp(1.5rem, 3vw, 3rem);
  }

  /* smooth movement */
  @keyframes scrollSlider {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-35%);
    }
  }
}

.grid-navigation {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  /* Pushes to the right */
  width: 100%;
  margin-top: 1rem;
}

.nav-btn {
  background-color: #e3e3e3;
  padding: 10px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-btn img {
  width: 16px;
  /* w-4 replacement */
  height: 16px;
  /* h-4 replacement */
}

.nav-btn:active {
  transform: scale(0.9);
  /* Visual feedback on click */
}

/* --- RESPONSIVE LOGIC --- */

/* Hide on Desktop (Large Screens) */
@media (min-width: 769px) {
  .grid-navigation {
    display: none;
  }
}

/* Show on Mobile (Small Screens) */
@media (max-width: 768px) {
  .grid-navigation {
    display: flex;
  }
}

/* --- Image Grid Variant --- */
.what-we-do--image-grid .what-we-do__section-wrapper {
  padding-top: clamp(48px, 7vw, 110px);
}

.what-we-do-image-grid__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Two columns on large screens */
  gap: 24px;
  /* Gap between items */
  margin-top: clamp(40px, 6vw, 80px);
}

.what-we-do-image-grid__item {
  background-color: #f3f3f3;
  /* Light background for cards */
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.what-we-do-image-grid__media {
  width: 100%;
  height: 478px;
  /* Fixed height for large screens */
  overflow: hidden;
}

.what-we-do-image-grid__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.what-we-do-image-grid__content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.what-we-do-image-grid__number {
  font-size: var(--text-md);
  color: var(--color-text-grey-2);
}

.what-we-do-image-grid__title {
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-accent-black);
  margin: 0;
}

.what-we-do-image-grid__panel {
  display: none;
  /* Hidden on large screens, shown as accordion on small */
}

/* Small screen UI for image-grid (accordion-like, similar to list variant) */
@media (max-width: 768px) {
  .what-we-do--image-grid .what-we-do__header .section-header {
    padding: 0;
    /* Reset padding from split variant */
  }

  .what-we-do-image-grid__items {
    display: block;
    /* Stack items vertically */
    margin-top: 40px;
  }

  .what-we-do-image-grid__item {
    background-color: transparent;
    /* No background for accordion items */
    border: none;
    border-bottom: 1px solid var(--color-border-light);
    /* Separator */
    margin-bottom: 0;
    /* No margin between items */
  }

  .what-we-do-image-grid__item:first-child {
    border-top: 1px solid var(--color-border-light);
    /* Top border for the first item */
  }

  .what-we-do-image-grid__button {
    width: 100%;
    display: grid;
    grid-template-columns: 44px 1fr 28px;
    /* Number, Title, Toggle Icon */
    align-items: center;
    padding: 12px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
  }

  .what-we-do-image-grid__media {
    display: none;
    /* Hide image in accordion header */
  }

  .what-we-do-image-grid__content {
    flex-direction: row;
    /* Number and title in a row */
    align-items: center;
    padding: 0;
    gap: 12px;
  }

  .what-we-do-image-grid__number {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-accent-black);
    color: var(--color-accent-white);
    font-size: var(--text-lg);
    line-height: 1;
  }

  .what-we-do-image-grid__title {
    font-size: var(--text-lg);
    font-family: var(--font-primary);
    color: var(--color-accent-black);
    flex-grow: 1;
  }

  .what-we-do-image-grid__toggle {
    justify-self: end;
    color: var(--color-accent-black);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  .what-we-do-image-grid__panel {
    display: grid;
    /* Show panel for accordion content */
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
  }

  .what-we-do-image-grid__item.is-open .what-we-do-image-grid__panel {
    grid-template-rows: 1fr;
  }

  .what-we-do-image-grid__copy {
    min-height: 0;
    overflow: hidden;
    padding: 12px 0 20px 50px;
    /* Indent content */
  }

  .what-we-do-image-grid__copy p {
    font-size: var(--text-base);
    color: var(--color-text-light);
    line-height: 1.5;
  }
}

/*--Projectstats--*/
.project-stats-section {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  /* padding: var(--gutter); */
  padding-bottom: 0%;
  position: relative;
  /* ← add this */
  z-index: 1;
}

@media (max-width: 1023px) {
  .fw__row {
    padding-top: var(--section-spacing-xs);
  }
}

.project-stats-grid {
  display: grid;
  /* 2 columns for mobile as per Figma mobile view */
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.7rem, 2vw, 2.5rem);
  padding-bottom: var(--section-spacing-stats-grid);
  padding-top: var(--section-spacing-xl);
}

.project-stats-card {
  background-color: #f3f3f3;
  /* Light grey from Figma */
  /* padding: clamp(1.5rem, 4vw, 3rem); */
  padding: 1rem;
  display: flex;
  gap: 4rem;
  flex-direction: column;
  /* justify-content: space-between; */
  position: relative;
  /* Matching the square/tall proportions in Figma */
}

.project-stats-card__title {
  color: #363636;
  font-family: var(--font-body);
  /* Plus Jakarta Sans */
  font-size: var(--text-lg);
  /* Specific size from Figma properties */
  font-weight: 400;
  margin: 0;
  height: 5rem;
  text-transform: capitalize;
}

.project-stats-card__total {
  color: #363636;
  font-family: var(--font-primary);
  /* Boldonse */
  font-size: var(--text-3-4xl);
  line-height: 1;
  margin: 0;
  font-weight: 400;
  /* Align to bottom left */
  align-self: center;
}

.project-stats-boxes {
  display: flex;
  /* gap: 3rem; */
  background-color: #f3f3f3;
  /* Light grey from Figma */
  /* padding: clamp(1.5rem, 4vw, 3rem); */
  padding: clamp(20px, 2vw, 32px);
  flex-direction: column;
  /* justify-content: space-between; */
  position: relative;
  /* Matching the square/tall proportions in Figma */
}

@media (max-width: 657px) {
  .project-stats-boxes {
    gap: 1rem;
  }

  .project-stats-card {
    gap: 0rem;
  }
}

.project-stats-paragraph {
  color: #363636;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.4;
}

.project-stats-icon {
  width: clamp(24px, 3vw, 48px);
  height: clamp(24px, 3vw, 48px);
}

.project-stats-boxes-title {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  color: #000000;
  font-weight: 400;
  margin: 0;
  padding-top: clamp(20px, 4vw, 60px);
  padding-bottom: clamp(20px, 2vw, 30px);
  text-transform: capitalize;
  /* Reserves room for a 2-line title even when a card's title only wraps
     to 1 line, so .project-stats-paragraph always starts at the same
     height across cards instead of following each title's own wrap.
     box-sizing: border-box (global reset) means min-height includes this
     element's own padding, so the padding has to be added into the min-
     height total explicitly — otherwise the padding alone already
     exceeds a plain "2 lines" value and the floor never binds. */
  line-height: 1.4;
  min-height: calc(clamp(20px, 4vw, 60px) + clamp(20px, 2vw, 30px) + (1.4em * 2));
}

.merged-section {
  display: flex;
  flex-direction: column;
}

/* --- Responsive Adjustments --- */
@media (max-width: 657px) {
  .project-stats-grid:has(.project-stats-boxes) {
    grid-template-columns: 1fr;
  }
}

/* Tablet/Desktop: 3 columns per row as seen in Figma desktop */
@media (min-width: 992px) {
  .stats-section--message+.process-section {
    padding-top: 0;
  }

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

  .project-stats-card__total {
    margin-top: var(--section-spacing-rem-lg);
    margin-bottom: var(--section-spacing-stats-total-bottom);
  }
}

/* @media (max-width: 769px) {
  .project-stats-card__total {
    font-size: 28px;
  }
} */
@media (min-width: 769px) {
  .contact-page .contact-us-section {
    background: white;
  }

  .about-page .contact-us-section {
    background: white;
  }
}

.contact-page .faq-section {
  background: white;
}

/* .contact-page .faq-section {
  padding-top: 30px;
} */
.faq-section .faq-section__vlines {
  /* top: -30px; */
}

.contact-page .faq-item {
  border-bottom: 1px solid var(--color-border-light);
  background: white;
}

.about-page .faq-item {
  border-bottom: 1px solid var(--color-border-light);
  background: white;
}

.about-page .faq-section {
  background: white;
}

.about-page .contact-us-section {
  background: white;
}

.contact-form-section {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  /* padding: 0 var(--gutter) 0; */
  background-color: #ffffff;
  overflow: hidden;
}

.contact-form-section__wrapper {
  position: relative;
  width: 100%;
}

/* .contact-form-section__wrapper header {
  padding: 60px 0 0;
} */

.contact-form__vlines {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
}

.contact-form__vlines span {
  border-left: 1px solid var(--color-border-light);
}

.contact-form__vlines span:last-child {
  position: relative;
}

.contact-form__vlines span:last-child::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background-color: var(--color-border-light);
  z-index: 2;
}

.contact-form__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

.contact-form__form-block {
  grid-column: 2 / span 3;
  grid-row: 2;
  margin-top: 1rem;
  width: 100%;
}

.contact-form__subheading {
  font-family: var(--font-primary);
  font-size: var(--text-1xl);
  font-weight: 400;
  color: var(--color-accent-black);
  margin-top: 24px;
  margin-bottom: 2.5rem;
}

.contact-form__form {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.contact-form-section__wrapper .section-header.centered {
  margin: 0;
  padding: 0;
}

.contact-form__row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 15px;
  width: 100%;
}

.contact-form__row>div {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  min-width: 280px;
}

.contact-form__row>div .contact-form__input {
  flex: 1;
  width: 100%;
}

.contact-form__field-control {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 200px;
  min-height: calc(var(--text-lg) + 8px);
}

.contact-form__row>.contact-form__field-control {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 280px;
}

.contact-form__label {
  display: inline-flex;
  align-items: center;
  min-height: calc(1.5em + 24px);
  padding-top: 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-accent-black);
}

.contact-form__input {
  border: none;
  outline: none;
  background-color: #f3f3f3;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-accent-black);
  width: auto;
  min-width: 200px;
}

.contact-form__input--name {
  flex: 1;
  max-width: none;
}

.contact-form__input--company {
  flex: 1;
  max-width: none;
}

.contact-form__input--phone {
  flex: 1;
  max-width: none;
}

.contact-form__input--email {
  flex: 1;
  max-width: 500px;
}

.contact-form__select-wrapper {
  position: relative;
  flex: 1;
  max-width: none;
  display: flex;
  align-items: center;
  z-index: 4;
}

.contact-form__select {
  border: none;
  outline: none;
  background-color: #f3f3f3;
  padding: 12px 24px 12px 12px;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-accent-black);
  width: 100%;
  appearance: none;
  cursor: pointer;
  padding-right: 48px;
  text-align: left;
}



.contact-form__select-option {
  border: 0;
  background: #ffffff;
  padding: 12px;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-accent-black);
  text-align: left;
  cursor: pointer;
}

.contact-form__select-option:hover,
.contact-form__select-option[aria-selected="true"] {
  background-color: #f3f3f3;
}

.contact-form__select-wrapper::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: transform 0.25s ease;
}

.contact-form__select-wrapper.open::after {
  transform: translateY(-50%) rotate(180deg);
}

.contact-form__submit-row {
  margin-top: 20px;
  width: calc(100% * 2 / 3);
}

.contact-form__button {
  width: 100%;
  background-color: var(--color-black-button);
  color: var(--color-accent-white);
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 500;
  padding: 18px 40px;
  border-radius: 50px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    opacity 0.2s ease;
  text-align: center;
}

.contact-form__button:hover {
  opacity: 0.9;
  background-color: #000000;
}

.contact-form__agreement {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-grey-2);
  line-height: 1.5;
  cursor: pointer;
}

.contact-form__agreement-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  /* margin-top: 1rem; */
  margin-left: 0.5px;
}

.contact-form__agreement-row input[type="checkbox"] {
  width: 1rem;
  height: 1.2rem;
  margin-top: 0.2rem;
  accent-color: #632fed;
  cursor: pointer;
  flex: 0 0 auto;
}

.contact-form__button:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.7;
}

.contact-form__link {
  color: var(--color-accent-black);
  border-bottom: none;
  display: inline;
  text-decoration: none;
}

/* .contact-form__link:hover {
  text-decoration: underline;
} */

.contact-us-section__title {
  margin-top: 20px;
  color: var(--color-accent-white);
  font-size: var(--text-3-4xl);
  font-family: var(--font-primary);
  line-height: 1.15;
  font-weight: 400;
}

/* @media (max-width: 1142px) { */
@media (max-width: 768px) {
  /* .contact-form-section {
    padding: 0 var(--gutter) 0;
  } */

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

  .contact-form__vlines span:nth-child(4) {
    display: none;
  }

  .contact-form__vlines span:first-child {
    position: relative;
    z-index: 2;
  }

  .contact-form__vlines span:nth-child(3) {
    position: relative;
  }

  .contact-form__vlines span:nth-child(3)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background-color: var(--color-border-light);
    z-index: 2;
  }

  .contact-form__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .contact-form__content .section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-form__content .header-content-wrapper.split {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-form__content .header-content-wrapper.split>.header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-form__content .text-style {
    margin-bottom: 20px;
    padding-top: 0;
  }

  .contact-form__content .heading {
    margin-bottom: var(--section-spacing-rem-md);
    /* font-size: clamp(2rem, 6vw, 3rem); */
  }

  .contact-form__form-block {
    margin-top: 0rem;
    width: 100%;
  }

  .contact-form__subheading {
    margin-block: 1.25rem;
    font-size: var(--text-xl);
  }

  .contact-form__form {
    gap: 0px;
  }

  .contact-form__row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .contact-form__row>div {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    width: 100%;
    max-width: 100%;
  }

  .contact-form__label {
    padding-top: 0;
  }

  .contact-form__input,
  .contact-form__select-wrapper,
  .contact-form__select {
    width: 100% !important;
    max-width: 100% !important;
    /* font-size: clamp(1rem, 3.5vw, 1.25rem); */
    /* border-inline: 1px solid var(--color-border-light); */
  }

  .contact-form__submit-row {
    margin-block: 1rem var(--section-spacing-md);
    width: 100%;
  }

  .project-stats-grid {
    padding-top: 0;
  }

  .what-we-do__plus {
    display: none;
  }

  .faq-item__number {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
  }

  .contact-us-section {
    background: var(--color-accent-black);
  }

  /* .contact-us-section .container {
    padding-inline: 20px;
  } */

  .contact-us-section__wrapper {
    min-height: 0;
    padding-bottom: 0;
  }

  .contact-us-section__vlines {
    display: none;
  }

  .contact-us-section__content {
    min-height: 229px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 1.95rem 3px 0;
  }

  .contact-us-section__content .section-header,
  .contact-us-section__content .header-content-wrapper.split {
    display: block;
    width: 100%;
  }

  .contact-us-section__content .header-content-wrapper.split>.header-left {
    display: contents;
  }

  /* .contact-us-section__content .text-style {
    color: var(--color-accent-white);
    line-height: 1;
    padding-left: 19px;
  } */

  .contact-us-section__content .text-style::before {
    background: var(--color-accent-white);
  }

  .contact-us-section__content .heading {
    order: 2;
    margin-top: 16px;
    padding-top: 0;
    max-width: 280px;
    color: var(--color-accent-white);
    font-size: 2.05rem;
    line-height: 1.15;
  }

  .contact-us-section__content .header-right {
    display: block;
    padding-top: 0;
  }

  .contact-us-section__content .paragraph {
    order: 1;
    max-width: 335px;
    margin-top: 17px;
    color: var(--color-accent-white);
    /* font-size: 0.92rem; */
    line-height: 1.5;
  }

  /*  .contact-us-section__button {
    width: 100%;
    min-height: 42px;
    margin-top: 17px;
    border: 0;
    background: var(--color-accent-white);
    color: var(--color-accent-black);
  }

  .contact-us-section__button-icon {
    display: block;
  }

  .contact-us-section__button-text--desktop {
    display: none;
  }

  .contact-us-section__button-text--mobile {
    display: inline;
    font-size: var(--text-lg);
  } */
  .contact-us-section__desktop-header {
    display: none;
  }

  .contact-us-section__mobile-header {
    display: flex;
    flex-direction: column;
  }

  .contact-us-section__badge {
    color: var(--color-accent-white);
    font-size: var(--text-lg);
  }

  .contact-us-section__para {
    margin-top: 20px;
    color: var(--color-accent-white);
    font-size: var(--text-lg);
    line-height: 1.5;
  }

  /* .contact-us-section__title {
    margin-top: 20px;
    color: var(--color-accent-white);
    font-size: var(--text-1xl);
    font-family: var(--font-primary);
    line-height: 1.15;
    font-weight: 400;
  } */
}

/* .project-stats-section {
    padding-bottom: clamp(20px, 5vw, 65px);
  }
  .project-stats-section .faq-section__vlines {
    bottom: clamp(-65px, -5vw, -20px);
  } */
/* ===================== RECOGNITION & IMPACT ===================== */
.recognition-impact-section {
  padding: clamp(60px, 8vw, 100px) 0;
  background: #ffffff;
}

.impact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.impact-left {
  padding-top: var(--section-spacing-impact-left-top);
  padding-bottom: var(--section-spacing-impact-left-bottom);
}

.impact-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #6a36d8;
  margin-bottom: 12px;
}

.impact-badge::before {
  content: "◆";
  font-size: 10px;
}

.impact-heading {
  font-family: var(--font-primary);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.1;
  font-weight: 400;
  color: #000;
}

/* RIGHT SIDE - CARDS */
.impact-right {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* No gap between cards */
  border: 1px solid var(--color-border-light);
  margin: var(--section-spacing-xs) 0 var(--section-spacing-xl) 0;
  position: relative;
}

.impact-card {
  padding: 28px 32px;
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #ffff;
  transition: background 0.3s ease;
}

.impact-card:last-child {
  border-bottom: none;
}

.impact-label {
  font-size: var(--text-1xl);
  font-weight: 700;
  font-family: var(--font-body);
  color: var(--color-accent-black);
  margin: 0 0 1rem 0;
}

.impact-description {
  font-size: var(--text-lg);
  line-height: 1.5;
  font-family: var(--font-body);
  color: var(--color-text-light);
  margin: 0;
  width: 80%;
}

.impact-source {
  font-size: var(--text-sm);
  line-height: 1.4;
  font-family: var(--font-body);
  color: var(--color-text-light);
  opacity: 0.7;
  margin: 0.5rem 0 0 0;
  width: 80%;
}

.impact-value {
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-accent-black);
  line-height: 1;
  white-space: nowrap;
}

.impact-card {
  /* background-color: #1a1a1a; */
  padding: clamp(0.7rem, 4vw, 1.5rem);
  transition: background 0.3s ease;
  position: relative;
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.impact-card:first-child {
  /* border-top: 1px solid var(--color-border-light); */
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  .impact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .impact-description {
    width: 100%;
  }

  .impact-source {
    width: 100%;
  }

  .impact-left {
    padding-bottom: 0;
  }

  .impact-right {
    border: 1px solid var(--color-border-light);
    margin: 0 0 var(--section-spacing-xs) 0;
  }

  .impact-card {
    padding: 18px 12px;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12px;
  }

  .impact-value {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .project-grid {
    padding: 0.75rem;
  }

  .project-card {
    padding: 0.75rem;
  }
}

/* ============================================
   Opera GX Compatibility Fixes
   Targets Opera GX via user-agent detection
   ============================================ */

/* Fix 1: 100vw causes horizontal scroll due to GX sidebar */
html.opera-gx *,
html.opera-gx *::before,
html.opera-gx *::after {
  /* max-width: 100% !important; */
}

html.opera-gx [style*="100vw"],
html.opera-gx .full-width,
html.opera-gx section,
html.opera-gx header,
html.opera-gx footer {
  width: 100% !important;
}

/* Fix 2: Vertical text / rotated sidebar elements */
html.opera-gx [class*="sidebar"],
html.opera-gx [class*="vertical"],
html.opera-gx [class*="side-label"] {
  left: 0 !important;
  transform-origin: left center !important;
}

/* Fix 3: Fixed/sticky elements shifted by GX sidebar */
html.opera-gx [class*="sticky"],
html.opera-gx [class*="fixed"],
html.opera-gx .wp-block-cover,
html.opera-gx [style*="position: fixed"] {
  left: 0 !important;
  max-width: 100vw !important;
}

/* Fix 4: Overflow clipping issues */
html.opera-gx body {
  overflow-x: hidden !important;
}

/* ── Outer 2-col grid ── */
.why-grid-outer {
  padding-top: var(--section-spacing-xl);
  padding-bottom: var(--section-spacing-rem-2xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--color-border-light);
  border-top: none;
  border-bottom: none;

  overflow: hidden;
}

/* Mobile: right panel top, left cards bottom */
@media (max-width: 768px) {
  .why-grid-outer {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .why-grid-outer {
    padding-top: var(--section-spacing-lg);
    padding-bottom: var(--section-spacing-lg);
  }

  .why-right-panel {
    order: -1;
    /* right panel pehle aaye */
  }

  .why-cards-grid {
    order: 1;
    /* cards baad mein */
  }
}

/* ── Left: 2x2 cards ── */
.why-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  position: relative;
}

.why-cards-grid::before {
  content: "+";
  position: absolute;
  top: 49.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.1rem;
  color: #aaaaaa;
  z-index: 1;
  pointer-events: none;
}

/* Mobile: single column */
@media (max-width: 768px) {
  .why-cards-grid {
    grid-template-columns: 1fr;
    grid-template-rows: unset;
  }

  .why-cards-grid::before {
    display: none;
  }
}

.why-card {
  background: #f3f3f3;
  padding: 1.5rem;
  border-right: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  min-height: 180px;
  justify-content: space-between;
  gap: clamp(80px, 8vw, 100px);
}

.why-card:nth-child(2),
.why-card:nth-child(4) {
  border-right: none;
}

.why-card:nth-child(3),
.why-card:nth-child(4) {
  border-bottom: none;
}

/* Mobile: reset nth-child borders, all cards full width */
@media (max-width: 768px) {
  .why-card:nth-child(n) {
    border-right: none;
    border-bottom: 1px solid var(--color-border-light);
  }

  .why-card:last-child {
    border-bottom: none;
  }
}

.why-card-header {
  display: flex;
  font-family: var(--font-primary);
  justify-content: space-between;
  align-items: flex-start;
}

.why-card-number {
  color: #000000;
  font-family: var(--font-primary);
  font-size: var(--text-xl);
}

.why-card-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #767676;
}

.why-card-text {
  color: #363636;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.65;
  height: 90%;
}

/* ── Right: heading panel ── */
.why-right-panel {
  padding-bottom: var(--section-spacing-why-panel);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: clamp(12px, 2vw, 20px);
  position: relative;
}

@media (max-width: 768px) {
  .why-right-panel {
    border-left: none;
    border-bottom: 1px solid var(--color-border-light);
    align-items: flex-start;
    text-align: left;
    /* padding:1rem; */
  }
}

.why-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-lg);
  color: #363636;
  font-family: var(--font-body);
}

.why-tag-dot {
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-size: var(--text-lg);
  color: #363636;
  margin-bottom: 0.75rem;
  white-space: nowrap;
}

.why-title {
  font-size: var(--text-1-2xl);
  font-weight: 400;
  color: #000000;
  line-height: 1.8;
  width: 70%;
  font-family: var(--font-primary);
}

@media (max-width: 768px) {
  .why-title {
    width: 100%;
  }

  .faq-section .section-header.centered {
    padding-top: var(--section-spacing-lg);
  }
}

.why-title-accent {
  color: #f35ef2;
  font-style: var(--font-primary);
}

.why-desc {
  font-size: var(--text-lg);
  color: #363636;
  line-height: 1.75;
  font-family: var(--font-body);
  width: 80%;
}

@media (max-width: 768px) {
  .why-desc {
    width: 100%;
  }

  .process-section--tech {
    background-color: #1a1a1a !important;
  }
}

.cta-bar {
  position: relative;
  overflow: hidden;
  background-color: #0b0b0b;
  padding: var(--section-spacing-banner-sm);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 254px;
}

/* ── Gradients ── */
.cta-bar__gradient {
  pointer-events: none;
  position: absolute;
  background: linear-gradient(77deg, #3885f3 50%, #f071ef 50%);
  filter: blur(85px);
  opacity: 0.85;
}

/* Desktop: right side — hidden on mobile */
.cta-bar__gradient--desktop {
  display: none;
  right: -5px;
  top: 2rem;
  width: 200px;
  height: 400px;
}

/* Mobile: bottom strip — hidden on desktop */
.cta-bar__gradient--mobile {
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
}

.cta-bar__text {
  position: relative;
  z-index: 1;
}

.cta-bar__title {
  color: #ffffff;
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: var(--text-1xl);
  line-height: 1.75;
  padding: 0.75rem 0;
  /* width: 50%; */
  margin: 0;
}

.cta-bar__subtitle {
  color: #ffffff;
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: var(--text-1-2xl);
  line-height: 1.75;
  margin: 0;
}

.cta-bar__action {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
}

.cta-bar__btn {
  background-color: #f35ef2;
  color: #101010;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xl);
  border: none;
  border-radius: 9999px;
  padding: 0.625rem 1.75rem;
  /* white-space: nowrap; */
  width: 100%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cta-bar__btn:hover {
  background-color: #f35ef2;
}

@media (min-width: 768px) and (max-width: 1075px) {
  .contact-form__row>div {
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    width: 100%;
  }

  .contact-form__row {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-form__input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

.contact-form__error {
  display: none;
  font-size: var(--text-sm);
  color: #e53e3e;
  font-family: var(--font-body);
}

.contact-form__error:not(:empty) {
  display: block;
  margin-top: 4px;
}

/* ── Desktop ── */
@media (min-width: 768px) {
  .cta-bar {
    grid-template-columns: 1fr 1fr;
    padding: var(--section-spacing-banner-lg);
    gap: 0;
  }

  .cta-bar__gradient--desktop {
    display: block;
  }

  .cta-bar__gradient--mobile {
    display: none;
  }

  .cta-bar__title {
    width: 75%;
  }

  .cta-bar__subtitle {}

  .cta-bar__action {
    margin-top: 0;
    margin-right: 4rem;
  }

  .cta-bar__btn {
    width: auto;
    padding: 16px 30px;
  }
}

@media (min-width: 1024px) and (max-width: 1072px) {
  .insight-section__wrapper {
    padding-bottom: clamp(1px, 1px, 1px);
  }
}

@media (max-width: 767px) {
  .cta-bar {
    min-height: 324px;
  }

  .cta-bar__btn {
    padding: 4px;
    font-size: 16px;
    padding: 16px 30px;
  }

  .cta-bar__action {
    justify-content: start;
  }
}

.services-page {
  position: relative;
  /* padding: 120px 0 80px;
  background: #fff; */
}

.services-page__bottom-blur {
  display: none;
}

@media (min-width: 769px) {
  .services-page__bottom-blur {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    height: 60px;
    pointer-events: none;
    overflow: visible;
    background: transparent;
  }

  .services-page__bottom-blur::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 45%,
        rgba(0, 0, 0, 1) 100%);
    mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 45%,
        rgba(0, 0, 0, 1) 100%);
  }

  /* FROSTED WHITE TINT — gives it that milky glass look */
  .services-page__bottom-blur::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.45) 40%,
        rgba(255, 255, 255, 0.85) 100%);
  }
}

.services-container {
  display: grid;
  grid-template-columns: 0.8fr 0.2fr 1fr;
  position: relative;
  z-index: 1;
}

.services-sidebar {
  position: sticky;
  top: 120px;
  height: fit-content;
  align-self: start;
  margin-bottom: 20px;
  min-width: 0;
}

.services-nav {
  width: 100%;
}

@media (min-width: 769px) {
  .services-nav {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding-right: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .services-nav::-webkit-scrollbar {
    display: none;
  }
}

.services-content {
  grid-column: 1 / -1;
  --services-image-height: clamp(340px, 40.3333vw, 460px);
  /* --services-image-height: height: clamp(175px, 27.85vw, 589px);; */
  --services-overlap: clamp(96px, 14vh, 168px);
  --services-details-height: clamp(150px, 30vh, 200px);
}

.services-nav .nav-item {
  display: block;
  width: 100%;
  padding: 10px 0;
  font-size: var(--text-1xl);
  font-weight: 500;
  color: #999;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  transition: color 0.3s ease;
}

.services-nav .nav-item__slot {
  --nav-line-height: 1.65;
  display: block;
  overflow: hidden;
  height: calc(var(--nav-line-height) * 1em);
  line-height: calc(var(--nav-line-height) * 1em);
}

.services-nav .nav-item__track {
  display: flex;
  flex-direction: column;
  gap: 7px;
  transform: translateY(0);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}

.services-nav .nav-item__label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: calc(var(--nav-line-height) * 1em);
  line-height: var(--nav-line-height);
  white-space: nowrap;
  transition: color 0.35s ease;
  font-weight: 400;
  color: var(--color-text-grey-2);
}

.services-nav .nav-item__label--hover {
  color: #6b4eff;
}

.services-nav .nav-item:hover .nav-item__track,
.services-nav .nav-item:focus-visible .nav-item__track {
  transform: translateY(calc(-50% - 3.5px));
}

.services-nav .nav-item.active.slid-down .nav-item__track {
  transform: translateY(calc(-50% - 3.5px));
}

.services-nav .nav-item.active.slid-up .nav-item__track {
  transform: translateY(calc(-50% - 3.5px));
}

.services-nav .nav-item.active .nav-item__label:first-child {
  color: var(--color-accent-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .services-nav .nav-item__track {
    transition: none;
  }

  .services-nav .nav-item:hover .nav-item__track,
  .services-nav .nav-item:focus-visible .nav-item__track,
  .services-nav .nav-item.active.slid-down .nav-item__track,
  .services-nav .nav-item.active.slid-up .nav-item__track {
    animation: none;
    transform: none;
  }
}

@media (min-width: 769px) {
  .services-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .services-sidebar {
    grid-column: 1;
    max-width: 100%;
    overflow: visible;
  }

  .services-content {
    grid-column: 3 / -1;
  }

  .services-nav .nav-item {
    max-width: 100%;
    padding: 0;
  }

  .services-nav .nav-item__slot {
    --nav-lines: 1;
    height: calc(var(--nav-line-height) * var(--nav-lines) * 1em);
    overflow: hidden;
    position: relative;
  }

  .services-nav .nav-item__label {
    display: block;
    width: 100%;
    height: calc(var(--nav-line-height) * var(--nav-lines, 1) * 1em);
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    overflow: hidden;
    line-height: var(--nav-line-height);
    flex-shrink: 0;
  }
}

.services-page__wrapper {
  position: relative;
  isolation: isolate;
}

.services-page .section-header {
  position: relative;
  z-index: 2;
}

.services-page .insight-section__vlines {
  z-index: -1;
}

.services-page .section-header .highlight {
  display: block;
}

.service-number-inline {
  font-size: var(--text-lg);
  color: #000000;
  margin-right: 12px;
  font-weight: 700;
}

.service-title {
  display: flex;
  align-items: flex-start;
  margin-bottom: clamp(16px, 1.5vw, 28px);
}

.service-title-inline {
  font-family: var(--font-primary);
  font-size: var(--text-xl);
  font-weight: 400;
}

.service-info {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}

.categories-label {
  font-size: var(--text-lg);
  color: #737373;
  margin-bottom: 12px;
  font-weight: 500;
  display: flex;
  gap: clamp(2px, 1.5vw, 12px);
}

.services-section-header .highlight {
  display: block;
}

.categories-label::before {
  content: "◆";
  color: #888;
  width: 12px;
  height: 12px;
  position: relative;
  left: -1.2px;
}

@media (min-width: 1024px) {
  .service-info {
    display: grid;
    grid-template-columns: 1.01fr 1fr;
    align-items: start;
  }

  .service-info-left {
    display: flex;
    flex-direction: column;
  }

  .view-details {
    order: 0;
  }

  .service-info .categories-section {
    justify-self: end;
    text-align: right;
  }

  .service-info .categories-label {
    justify-content: flex-end;
  }

  .service-info .categories-tags {
    justify-content: flex-end;
  }
}

/* Service Card */
.service-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: var(--section-spacing-xs);
  scroll-margin-top: 140px;
}

.service-image-wrapper {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 803 / 390;
}

.service-image-wrapper img,
.service-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  .service-image-wrapper {
    height: auto;
  }

  .service-image {
    transform: none !important;
    height: 100%;
    object-position: center;
    will-change: auto;
  }

  .service-info {
    margin-top: 12px;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
    transform: none !important;
    will-change: auto;
  }

  .service-info__vlines {
    display: none;
  }
}

@media (min-width: 769px) {
  .service-card {
    position: relative;
    gap: 0;
    margin-bottom: 0;
    scroll-margin-top: 120px;
  }

  .service-card:last-child {
    margin-bottom: var(--section-spacing-service-card-last);
  }

  .service-image-wrapper {
    position: relative;
    z-index: 1;
    height: var(--services-image-height);
    aspect-ratio: unset;
  }

  .service-image-wrapper img,
  .service-image {
    height: calc(100% + 150px);
    object-position: center 42%;
    will-change: transform;
    backface-visibility: hidden;
  }

  /* object-position: center 42% was tuned for the static service photos —
     on video it reads as off-center/low since the crop favors the top of
     the frame. Center it vertically for video specifically. */
  .service-image-wrapper video.service-image {
    object-position: center;
    /* JS gives video its own BASE_IMAGE_OFFSET_VIDEO (~-143px) so its
       resting parallax transform lands where it visually centers (see
       Services.jsx) — with the ±75px shift range on top, translateY can
       reach about -218px. The shared 150px overscan isn't enough buffer
       for that, so video gets extra height to avoid exposing a gap at
       the wrapper's bottom edge when scrolled. */
    height: calc(100% + 230px);
  }

  .service-info {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--services-overlap));
    min-height: var(--services-details-height);
    padding-top: clamp(20px, 3vw, 40px);
    padding-bottom: 15px;
    background: var(--color-body1);
    box-sizing: border-box;
    will-change: transform;
    backface-visibility: hidden;
  }

  .service-info__vlines {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    pointer-events: none;
  }

  .service-info__vlines span {
    border-left: none;
    border-right: none;
  }

  .service-info__vlines span:nth-child(1),
  .service-info__vlines span:nth-child(3) {
    border-left: 1px solid var(--color-border-light);
  }

  .service-info__vlines span:nth-child(4) {
    border-right: 1px solid var(--color-border-light);
  }

  .service-info-left,
  .service-info .categories-section {
    position: relative;
    z-index: 1;
    left: -0.8px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .service-image,
  .service-info {
    will-change: auto;
  }
}

/* .service-card:hover img {
  transform: scale(1.05);
} */

.service-details {
  padding-top: 20px;
}

.service-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}

.service-number {
  font-size: 1.1rem;
  color: #666;
  font-weight: 500;
}

.service-details h2 {
  font-size: 2.4rem;
  line-height: 1.1;
  font-weight: 700;
}

.service-description {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: #555;
  margin-bottom: 24px;
  max-width: clamp(330px, 20vw, 340px);
}

.view-details {
  color: #6b4eff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: var(--text-base);
  font-weight: 400;
  font-family: var(--font-primary);
}

.categories-header {
  font-size: 0.95rem;
  color: #888;
  margin-bottom: 12px;
  font-weight: 500;
}

.categories-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.category-tag {
  background: #f3f3f3;
  padding: 6px 14px;
  font-size: var(--text-base);
  color: #444;
}

.about-page__intro .highlight {
  color: var(--color-accent-secondary);
  display: block;
}

@media (max-width: 768px) {
  .about-page__intro .highlight {
    display: inline;
  }
}

/* Mobile */
@media (max-width: 1024px) {

  /* .services-container {
    grid-template-columns: 1fr;
    gap: 60px;
  } */
  .hero-stat {
    min-height: 120px;
    padding-bottom: clamp(1rem, 2vw, 60px);
  }

  .service-card {
    grid-template-columns: 1fr;
  }

  .services-sidebar {
    position: relative;
    top: 0;
  }
}

@media (max-width: 768px) {
  .blog-detail__content .heading {
    font-size: 28px;
  }

  .relevant-blogs__header .heading {
    font-size: 28px;
  }

  .services-sidebar {
    display: none;
  }

  .services-container {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .services-content {
    grid-column: 1;
  }

  .services-page .section-header .highlight {
    display: inline;
  }
}

@media (min-width: 769px) and (max-width: 921px) {
  .services-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .section-header.centered {
    grid-template-columns: auto 1fr;
    gap: 1rem;
  }

  .testimonials__header {
    flex-direction: row;
    align-items: flex-end;
  }

  .testimonials__header-text {
    margin-top: var(--section-spacing-header-text-md);
  }
}

@media (min-width: 769px) and (max-width: 1150px) {
  .services-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .services-nav .nav-item {
    font-size: var(--text-xl);
  }
}

/* ==========================================================================
   Service Detail (child page)
   ========================================================================== */

.service-detail-page {
  position: relative;
}

.service-detail-page__wrapper {
  position: relative;
  isolation: isolate;
}

.service-detail-page__grid .insight-section__vlines {
  z-index: -1;
}

.service-detail-page .section-header {
  position: relative;
  z-index: 2;
}

.service-detail-page__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  /* gap: clamp(24px, 4vw, 40px); */
}

.service-detail-page__header,
.service-detail-page__media {
  grid-column: 1;
  min-width: 0;
}

.service-detail-page__media {
  overflow: hidden;
}

.service-detail-page__image {
  display: block;
  width: 100%;
  height: clamp(200px, 55vw, 200px);
  object-fit: cover;
}

video.service-detail-page__image {
  object-fit: cover;
  background: #0a0a0a;
}

@media (min-width: 769px) {
  .service-detail-page__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: 0;
    height: calc(100vh - var(--navbar-height));
  }

  .service-detail-page__header {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .service-detail-page__media {
    grid-column: 2 / -1;
    grid-row: 2;
    min-height: 300px;
    margin: 0;
    padding: 0;
  }

  .service-detail-page .section-header.centered {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: 100%;
  }

  .service-detail-page .section-header.centered>.badge {
    grid-column: 1;
    align-self: start;
  }

  .service-detail-page .section-header.centered>.header-content-wrapper {
    grid-column: 2 / -1;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* .service-detail-page .section-header .highlight {
    display: block;
  } */

  .service-detail-page__image {
    width: 100%;
    height: 100%;
  }

  video.service-detail-page__image {
    object-position: center;
  }
}

/* ==========================================================================
   Service Capabilities
   ========================================================================== */

.service-capabilities {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: clamp(24px, 4vw, 40px);
  margin-top: var(--section-spacing-cap-margin);
  isolation: isolate;
}

.service-capabilities__vlines {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
}

.service-capabilities__header {
  position: relative;
  z-index: 1;
  grid-column: 1;
  min-width: 0;
}

.service-capabilities__badge {
  margin-bottom: clamp(12px, 2vw, 20px);
}

.service-capabilities__heading {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-1xl);
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-accent-black);
}

.service-capabilities__grid {
  position: relative;
  z-index: -1;
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
  /* border: 1px soligrid-cell__icond var(--color-border-light); */
}

.service-capabilities__card {
  display: flex;
  flex-direction: column;
  /* gap: clamp(32px, 3vw, 40px); */
  gap: 120px;
  min-width: 0;
  padding: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--color-border-light);
  background: #f3f3f3;
}

.service-capabilities__card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.service-capabilities__card-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-1xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-accent-black);
  max-width: 363px;
}

.service-capabilities__card-icon {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  opacity: 0.6;
}

.service-capabilities__card-desc {
  margin: 0;
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.5;
  color: #363636;
}

.service-capabilities__tags {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(16px, 2vw, 20px);
  width: 100%;
}

.service-capabilities__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 24px;
  background: #fff;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.2;
  color: #444;
  text-align: center;
}

.service-capabilities__card--cta {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(20px, 3vw, 28px);
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: transparent;
  border-bottom: none;
}

.service-capabilities__cta-heading {
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-family: var(--font-primary);
  font-size: var(--text-1xl);
  font-weight: 400;
  line-height: 1.8;
  color: var(--color-accent-black);
  overflow-wrap: break-word;
  word-break: break-word;
}

.service-capabilities__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 312px;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px clamp(16px, 4vw, 32px);
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  transition: opacity 0.25s ease;
  text-wrap: nowrap;
}

.service-capabilities__cta-btn:hover,
.service-capabilities__cta-btn:focus-visible {
  opacity: 0.85;
}

@media (max-width: 768px) {
  .service-capabilities__grid {
    border: none;
    z-index: 1;
  }

  .service-capabilities__card:not(.service-capabilities__card--cta) {
    border: 1px solid var(--color-border-light);
  }

  .service-capabilities__card--cta {
    margin-top: clamp(8px, 3vw, 16px);
    padding: clamp(24px, 6vw, 40px) clamp(16px, 4vw, 24px);
    border: none;
    border-top: none;
    border-bottom: none;
    background: transparent;
  }
}

@media (min-width: 769px) {
  .service-capabilities {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
  }

  .service-capabilities__vlines {
    top: calc(clamp(40px, 6vw, 80px) * -1);
    bottom: calc(clamp(40px, 6vw, 80px) * -1);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .service-capabilities__header,
  .service-capabilities__grid {
    grid-column: 2 / -1;
  }

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

  .service-capabilities__card--cta {
    min-height: 100%;
    padding-inline: clamp(12px, 1.5vw, 24px);
  }
}

/* ==========================================================================
   Service Results (stat cards section)
   ========================================================================== */

.stat-cards-section {
  position: relative;
  /* padding-block: clamp(40px, 6vw, 80px); */
}

.stat-cards-section__wrapper {
  position: relative;
  isolation: isolate;
  padding-bottom: var(--section-spacing-cap-margin);
}

.stat-cards-section__vlines {
  z-index: 2;
}

.stat-cards-section__content {
  position: relative;
  z-index: 1;
}

.stat-cards-section__badge {
  margin-bottom: clamp(12px, 2vw, 20px);
}

.stat-cards-section__heading {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-accent-black);
}

.stat-cards-section__paragraph {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: #363636;
  max-width: clamp(280px, 42vw, 640px);
}

.stat-cards-section__cards {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--section-spacing-xs);
  border: 1px solid var(--color-border-light);
  background-color: #f9f9f9;
}

.stat-cards-section__cell .card-wrap {
  /* border-right: 1px solid var(--color-border-light); */
  border-bottom: 1px solid var(--color-border-light);
}

.stat-cards-section__cell:last-child .card-wrap {
  border-bottom: none;
}

.stat-cards-section__header .heading {
  font-size: var(--text-1xl);
}

.requirements-section__header .heading {
  font-size: var(--text-1xl);
}

.relevant-work__content-col .heading {
  font-size: var(--text-1xl);
}

@media (min-width: 769px) {
  .stat-cards-section__content {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0;
  }

  .stat-cards-section__header {
    grid-column: 2 / -1;
  }

  .stat-cards-section__cards {
    grid-column: 2 / -1;
    grid-template-columns: repeat(var(--stat-cards-cols, 3), minmax(0, 1fr));
  }

  .stat-cards-section__cell .card-wrap {
    border-bottom: none;
    height: 100%;
  }

  .stat-cards-section__cell:last-child .card-wrap {
    border-right: none;
  }
}

/* ==========================================================================
   Blog Detail Layout - Mobile First Definitions
   ========================================================================== */

.blog-detail__layout {
  display: grid;
  grid-template-columns: 1fr;
  /* Single column layout stack on mobile */
  gap: 0;
  position: relative;
  z-index: 1;
}

/* Hide desktop sidebar on mobile views */
.blog-detail__sidebar {
  display: none;
}

/* Mobile-specific featured image box layout styling */
.blog-detail__mobile-image {
  display: block !important;
  width: 100%;
  margin-block: 24px;
  overflow: hidden;
}

.blog-detail__mobile-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.blog-detail__content {
  grid-column: 1;
  min-width: 0;
}

.blog-detail__content>h1.heading {
  width: 100%;
  max-width: calc(var(--grid-col) * 2);
}

.info {
  color: var(--color-accent-secondary);
  font-weight: 600;
}

/* Typography elements */
.blog-detail__date {
  color: #9a9a9a;
  font-size: var(--text-base);
}

.blog-detail__intro-quote {
  position: relative;
  margin: clamp(1.5rem, 6vw, 2.25rem) 0;
  padding: 4px 0 4px clamp(18px, 4vw, 24px);
  border-left: 1px solid var(--color-accent-black);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-light);
}

.blog-detail__body-text p.blog-detail__lead {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text-light);
  margin-bottom: 24px;
}

.blog-detail__body-text p:not(.blog-detail__lead) {
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-light);
  margin-bottom: 24px;
}

.blog-detail__body-text h2 {
  font-size: var(--text-1xl);
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--color-text-light);
  margin-top: clamp(32px, 5vw, 48px);
  margin-bottom: 20px;
  line-height: 1.5;
}

.blog-detail__body-text h3.blog-subheading {
  font-family: var(--font-body);
  font-size: var(--text-1xl);
  font-weight: 700;
  color: var(--color-text-light);
  margin-top: 28px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.blog-detail__body-text p {
  color: var(--color-text-light);
  margin-top: 0;
  margin-bottom: 24px;
}

/* ==========================================================================
   Blog Content Blocks — TOC, callout, table, checklist, FAQ, CTA banner
   ========================================================================== */

/* Table of Contents — inline, below the title/intro */
.blog-toc {
  margin-block: clamp(24px, 4vw, 32px);
}

.blog-toc__heading {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--text-2-3xl);
  color: var(--color-text-light);
  margin: 0 0 16px;
}

.blog-toc__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.blog-toc__link {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-toc__link:hover {
  color: var(--color-accent-secondary);
}

.blog-toc__link:focus-visible {
  outline: 2px solid var(--color-accent-secondary);
  outline-offset: 2px;
}

/* .blog-toc__link.is-active {
  color: var(--color-accent-secondary);
  font-weight: 600;
} */

.blog-toc__number {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* border: 1px solid var(--color-accent-secondary); */
  /* color: var(--color-accent-secondary); */
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  background: var(--color-accent-black);
  color: #ffffff;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

/* Keep in-page anchor targets clear of the sticky header */
.blog-detail__body-text h2[id] {
  scroll-margin-top: var(--navbar-height);
}

/* Quick answer / worth-knowing note box */
.blog-note {
  background: #632fed1a;
  border-left: 3px solid var(--color-accent-secondary);
  padding: 16px 20px;
}

.blog-note strong {
  color: var(--color-accent-secondary);
}

/* Purple callout box */
.blog-callout {
  position: relative;
  overflow: hidden;
  /* border-radius: var(--radius-lg); */
  padding: clamp(32px, 5vw, 48px) clamp(24px, 4vw, 40px);
  margin-block: clamp(28px, 5vw, 48px);
  background-color: #0b0b0b;
  /* fallback */
  background-image: url("/images/blogCTAbg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Optional subtle dark overlay so text stays readable on any image */
/* .blog-callout::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 0;
} */

.blog-callout__question,
.blog-callout__text,
.blog-callout__btn {
  position: relative;
  z-index: 1;
  color: var(--color-accent-white) !important;
}

.blog-callout__question {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--text-1-2xl) !important;
  /* larger title look */
  line-height: 1.35;
  color: #ffffff;
  margin: 0;
  max-width: 28ch;
}

.blog-callout__text {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 42ch;
}

/* Purple pill button */
.blog-callout__btn.btn-animated {
  background: var(--color-accent-secondary);
  /* #632fed */
  color: #ffffff;
  margin-top: 8px;
  min-width: 160px;
  width: 50%;
}

.blog-callout__btn.btn-animated:hover {
  opacity: 0.9;
}

/* In-body content images (inserted via the Sanity Portable Text editor) */
.blog-detail__inline-image {
  margin-block: clamp(1.5rem, 4vw, 2.25rem);
}

.blog-detail__inline-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

.blog-detail__inline-image figcaption {
  margin-top: 10px;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-light);
  text-align: center;
}

/* Comparison table */
.blog-table__wrapper {
  overflow-x: auto;
  margin-block: 24px;
  -webkit-overflow-scrolling: touch;
  /* border-radius: 8px; */
  border: 1px solid var(--color-border-light);
}

.blog-table__wrapper:focus-visible {
  outline: 2px solid var(--color-accent-secondary);
}

.blog-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-lg);
}

.blog-table th,
.blog-table td {
  /* border: 1px solid var(--color-border-light); */
  padding: 14px 18px;
  text-align: left;
  /* vertical-align: top; */
  color: var(--color-text-light);
}

/* Black header row */
.blog-table thead th {
  font-family: var(--font-primary);
  background: #000000;
  color: #ffffff;
  font-weight: 400;
  border-color: #000000;
  text-wrap: nowrap;
}

/* Body cells */
.blog-table tbody td {
  background: #ffffff;
  font-weight: 400;
  border-bottom: 1px solid var(--color-border-light);
}

.blog-table tbody tr:last-child td {
  border-bottom: none;
}

.blog-table tbody td strong {
  font-weight: 700;
  color: var(--color-text-light);
}

/* Checklist */
.blog-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 24px 0 24px 12px;
  padding: 0;
}

.blog-checklist__item {
  position: relative;
  display: block;
  padding-left: 22px;
  /* room for the bullet */
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-light);
}

/* Solid circular bullet */
.blog-checklist__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  /* optical vertical center with first line */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-accent-secondary);
  /* #632fed */
  flex-shrink: 0;
}

/* Bold part of each item (the label before the colon) */
.blog-checklist__item strong {
  font-weight: 700;
  color: var(--color-text-light);
}

/* Bold label in checklist items → purple */
.blog-checklist__item strong {
  font-weight: 700;
  color: var(--color-accent-secondary);
  /* #632fed purple */
}

/* FAQ */
.blog-faq {
  margin-top: clamp(32px, 5vw, 48px);
}

.blog-faq__item {
  margin-block: 20px;
}

.blog-faq__item h3 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-light);
  margin: 0 0 8px;
}

.blog-faq__item p {
  font-family: var(--font-body);
  color: var(--color-text-grey-2);
  margin: 0;
}

/* Closing gradient CTA banner — mirrors .cta-bar's visual language */
.blog-cta-banner {
  position: relative;
  overflow: hidden;
  /* border-radius: var(--radius-lg); */
  /* match callout (no radius) */
  padding: clamp(32px, 5vw, 48px) clamp(24px, 4vw, 40px);
  margin-block: clamp(28px, 5vw, 48px);
  background-color: #0b0b0b;
  /* fallback */
  background-image: url("/images/blogCTAbg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.blog-cta-banner__gradient {
  display: none;
}

.blog-cta-banner__text {
  position: relative;
  z-index: 1;
}

.blog-cta-banner__title {
  color: #ffffff !important;
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: var(--text-1xl);
  margin: 0 0 8px;
}

.blog-cta-banner__desc {
  color: #ffffff !important;
  opacity: 0.8;
  font-family: var(--font-body);
  margin: 0;
}

.blog-cta-banner__actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.blog-cta-banner__actions .btn-animated {
  background: var(--color-accent-secondary);
  /* #632fed */
  color: #ffffff;
  min-width: 160px;
  width: auto;
  /* or 50% if you want it to match callout width */
}

.blog-cta-banner__btn--secondary.btn-animated {
  background: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
}

.insight-section__wrapper .insight-section__vlines {
  z-index: -1;
}

@media (min-width: 1024px) {
  .blog-toc--mobile {
    display: none !important;
  }

  .blog-toc--desktop {
    display: block;
  }
}

@media (max-width: 768px) {
  .blog-checklist {
    gap: 16px;
  }

  .blog-checklist__item {
    padding-left: 20px;
  }

  .blog-checklist__item::before {
    width: 7px;
    height: 7px;
    top: 0.58em;
  }

  .blog-detail__body-text h2 {
    line-height: 1.85;
  }

  .blog-callout {
    background-image: url("/images/CTAbgMobile.webp");
  }

  .blog-toc__number {
    width: 38px;
    height: 38px;
  }

  .blog-callout__btn.btn-animated {
    width: 100%;
  }

  .blog-cta-banner__actions {
    flex-direction: column;
    width: 100%;
  }
}

/* Bottom header sections on small screens */
.relevant-blogs__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* gap: 16px; */
  margin-block: 40px 24px;
  position: relative;
  z-index: 1;
}

.relevant-blogs__header .view-all-btn {
  background: var(--color-black-button);
  width: auto;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--text-base);
  font-weight: 400;
  border: none;
  padding: 18px 32px;
  border-radius: 2rem;
  cursor: pointer;
}

/* ==========================================================================
   Desktop Responsive Breakpoints (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .blog-detail__layout {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* stretch (the grid default) makes .blog-detail__sidebar's cell match
       .blog-detail__content's full height, i.e. reach down to exactly where
       the "Relevant blogs" section starts. That gives .sticky-box a tall
       enough containing block to scroll within — it stays pinned at
       `top: 40px` while its column is in view, then naturally releases and
       scrolls with the page once the column ends, landing flush above
       .relevant-blogs__header instead of sticking past it. */
    align-items: stretch;
  }

  /* Show sidebar container and activate sticky settings */
  .blog-detail__sidebar {
    display: block;
    grid-column: 1;
    height: auto;
    align-self: stretch;
  }

  .blog-detail__sidebar .sticky-box {
    position: -webkit-sticky;
    /* Support Safari */
    position: sticky;
    top: 110px;
    z-index: 10;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Hide the duplicate mobile context image on desktop */
  .blog-detail__mobile-image {
    display: none !important;
  }

  /* Shift core right content column back to space span index 3 */
  .blog-detail__content {
    grid-column: 3 / span 3;
  }

  /* Re-align footer headers into grid columns */
  .relevant-blogs__header {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex-direction: row;
    align-items: center;
    margin-block: 60px 32px;
  }

  .relevant-blogs__header h2 {
    grid-column: 2 / span 2;
  }

  .relevant-blogs__header .view-all-btn {
    grid-column: 4;
    justify-self: end;
    width: 100%;
    font-size: var(--text-xl);
  }
}

/* ==========================================================================
   Blog Navigation Blocks (Prev/Next Section)
   ========================================================================== */

.blog-pagination {
  display: flex;
  flex-direction: column;
  /* Stacks links vertically on mobile screens */
  gap: 1px;
  /* Emulates a subtle interior line when paired with border-light */
  /* background-color: var(--color-border-light, #e5e5e5);  */
  margin-top: clamp(48px, 6vw, 64px);
}

.blog-pagination__btn {
  display: flex;
  gap: 16px;
  background-color: #f3f3f3;
  /* Soft background panel fill tint */
  padding: 16px 20px;
  text-decoration: none;
  color: inherit;
  width: 100%;
  transition: background-color 0.2s ease;
  border-left: 1px solid var(--color-border-light);
}

.blog-pagination__btn:hover {
  background-color: #f1f1f1;
  /* Interactive hover overlay effect */
}

/* LEFT SIDE IMAGE PREVIEW BOX WRAPPER */
.blog-pagination__img-wrapper {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  /* Prevents the image frame from squeezing on small screens */
  overflow: hidden;
  background-color: #eaeaea;
}

.blog-pagination__img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centers and crops the blog graphic uniformly into a square box */
  filter: grayscale(100%);
  /* FORCES THE MONOCHROME LOOK FROM THE UI DESIGN */
  display: block;
}

.blog-pagination__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Meta Data label row setup */
.blog-pagination__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm, 0.875rem);
  color: #666666;
  font-weight: 500;
}

.blog-pagination__diamond {
  color: #666666;
  font-size: 0.65rem;
  vertical-align: middle;
}

/* Post Article Header Strings */
.blog-pagination__title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  color: #111111;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Safe truncation fallback path */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive side-by-side split row on tablet/desktop views */
@media (min-width: 768px) {
  .blog-pagination {
    flex-direction: row;
    gap: 1px;
  }

  .blog-pagination__btn {
    width: 50%;
    /* Distributes screen space symmetrically into two parallel halves */
  }
}

/* Career.css */

/* ─── Section wrapper ─────────────────────────────────────────────────────── */
.career-section {
  /* mirrors: container pt-11 relative min-h-screen */
  position: relative;
  min-height: 100vh;
  width: 100%;

  margin-inline: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2.75rem;
  /* pt-11 = 44px */
  box-sizing: border-box;
}

/* @media (max-width:760px) {
  .career-top{
    padding-top:1rem;
  }
} */
/* ─── Background grid lines ───────────────────────────────────────────────── */
.career-grid-bg {
  /* mirrors: absolute container inset-0 z-0 grid grid-cols-3 md:grid-cols-4 pointer-events-none */
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: 1280px;
  padding-inline: 1rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .career-grid-bg {
    grid-template-columns: repeat(4, 1fr);
  }
}

.career-grid-line {
  border-left: 1px solid var(--color-border-light);
  height: 100%;
}

/* 4th line: hidden on mobile, visible on md+ */
.career-grid-line--md {
  display: none;
}

@media (min-width: 768px) {
  .career-grid-line--md {
    display: block;
  }
}

/* ─── Content grid (label col + main col) ─────────────────────────────────── */
.price-highlight {
  font-family: "Boldonse", serif;
  font-size: 0.75rem;
  /* font-weight: 700;
  color: #632FED;                  
  letter-spacing: -0.02em; */
}

.career-content {
  /* mirrors: grid grid-cols-1 md:grid-cols-4 pt-0 lg:pt-11 relative z-10 items-stretch */
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr;
  padding-top: 0;
  align-items: stretch;
}

@media (min-width: 778px) {
  .career-content {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .career-job-id {
    font-size: 20px;
  }
}

/* ─── Left label column ───────────────────────────────────────────────────── */
.career-label-col {
  /* mirrors: col-span-1 py-2 flex gap-3 items-start */
  grid-column: span 1;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.career-label-icon {
  margin-top: 0.25rem;
}

.career-label-text {
  /* mirrors: font-jakarta text-base text-[#363636] */
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: #363636;
  margin: 0;
}

/* ─── Right main column ───────────────────────────────────────────────────── */
.career-main-col {
  /* mirrors: col-span-1 md:col-span-3 flex flex-col pt-4 md:pt-0 */
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
}

@media (min-width: 768px) {
  .career-main-col {
    grid-column: span 3;
    padding-top: 0;
  }
}

/* ─── Heading block ───────────────────────────────────────────────────────── */
.career-heading-wrap {
  /* mirrors: pb-12 max-w-[850px] */
  padding-bottom: 3rem;
  max-width: 850px;
}

.career-heading {
  /* mirrors: font-boldonse font-bold text-5xl lg:leading-loose md:leading-relaxed text-black tracking-tight leading-tight */
  font-family: "Boldonse", sans-serif;
  font-weight: 700;
  font-size: 3rem;
  /* text-5xl */
  line-height: 1.25;
  /* leading-tight */
  color: #000;
  letter-spacing: -0.025em;
  margin: 0;
}

@media (min-width: 768px) {
  .career-heading {
    line-height: 1.625;
    /* leading-relaxed */
  }
}

@media (min-width: 1024px) {
  .career-heading {
    line-height: 2;
    /* leading-loose */
  }
}

.career-heading-brand {
  /* mirrors: text-[#632FED] block md:inline */
  color: #632fed;
  display: block;
}

@media (min-width: 768px) {
  .career-heading-brand {
    display: inline;
  }
}

/* ─── Jobs container (bordered box with corner marks) ────────────────────── */
.career-jobs-container {
  /* mirrors: relative border border-[#D9D9D9] divide-y divide-[#D9D9D9] */
  position: relative;
  border: 1px solid var(--color-border-light);
}

/* Simulate divide-y: add top border on every child except the first */
.career-jobs-container>a+a {
  border-top: 1px solid var(--color-border-light);
}

.career-wrap-width {
  width: "70%";
}

@media (max-width: 760px) {
  .career-wrap-width {
    width: 100%;
  }
}

/* ─── Corner markers ──────────────────────────────────────────────────────── */
.career-corner {
  /* mirrors: absolute text-[#737373] font-jakarta text-base z-20 */
  position: absolute;
  z-index: 20;
  color: #737373;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  line-height: 1;
}

.career-corner--tl {
  top: -3px;
  left: 0;
  transform: translate(-50%, -50%);
}

.career-corner--tr {
  top: -3px;
  right: 0;
  transform: translate(50%, -50%);
}

.career-corner--bl {
  bottom: 2.5px;
  left: 0;
  transform: translate(-50%, 50%);
}

.career-corner--br {
  bottom: 2.5px;
  right: 0;
  transform: translate(50%, 50%);
}

/* ─── Individual job row (Link) ───────────────────────────────────────────── */
.career-job-link {
  /* mirrors: group relative flex flex-col md:flex-row md:items-center justify-between p-6 md:p-8 bg-white hover:bg-[#F9F9F9] transition-colors duration-200 */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
  text-decoration: none;
  color: inherit;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;

  transition: background-color 200ms ease;
}

.career-job-link:hover {
  background-color: #f9f9f9;
}

@media (min-width: 768px) {
  .career-job-link {
    flex-direction: row;
    align-items: center;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    padding-right: 1.3rem;
    padding-left: 1.3rem;
  }
}

/* ─── Job info (left side) ────────────────────────────────────────────────── */
.career-job-info {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 825px;
  width: 100%;
}

.career-job-mobile-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* ─── ID badge ────────────────────────────────────────────────────────────── */

.career-job-id {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-accent-black);
  color: var(--color-accent-white);
  font-size: var(--text-lg);
  line-height: 1;
}

@media (max-width: 768px) {
  .career-job-id {
    width: 38px;
    height: 38px;
  }
}

/* ─── Job text details ────────────────────────────────────────────────────── */
.career-job-details {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 0.5rem, 1rem);
  min-width: 0;
}

@media (min-width: 768px) {
  .career-job-info {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }

  .career-job-mobile-header {
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
  }

  .career-job-mobile-header .career-job-title {
    display: none;
    /* title lives in details on desktop */
  }

  .career-job-details .career-job-title {
    display: block;
    /* show title in details on desktop */
  }
}

/* On mobile hide title from details, show in header */
.career-job-details .career-job-title {
  display: none;
}

@media (min-width: 768px) {
  .career-job-details .career-job-title {
    display: block;
  }

  .career-job-mobile-header .career-job-title {
    display: none;
  }
}

.career-job-title {
  /* mirrors: font-jakarta font-bold text-lg md:text-xl text-black group-hover:text-[#632FED] transition-colors */
  font-family: var(--font-body);

  font-size: var(--text-1xl);
  color: var(--color-accent-black);
  margin: 0;
  transition: color 200ms ease;
}

@media (max-width: 760px) {
  .career-job-title {
    font-size: 20px;
    align-items: center;
  }
}

.career-job-link:hover .career-job-title {
  color: #632fed;
}

.career-job-desc {
  /* mirrors: font-jakarta font-light text-lg text-[#363636] */
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: #363636;
  margin: 0;
}

.career-paragraph {
  width: 100%;
  padding-bottom: 2px;
}

@media screen {
  .career-paragraph {
    padding-bottom: 16px;
  }
}

/* ─── Tags ────────────────────────────────────────────────────────────────── */
.career-job-tags {
  /* mirrors: flex flex-wrap gap-2 mt-2 */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
  width: 100%;
}

.career-job-tag {
  /* mirrors: bg-[#F3F3F3] text-[#363636] font-jakarta text-lg px-3 py-1.5 */
  background-color: #f3f3f3;
  color: #363636;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--text-lg);
  padding: 0.375rem 0.75rem;
}

/* ─── Apply button (right side) ───────────────────────────────────────────── */
.career-job-apply {
  /* mirrors: mt-6 md:mt-0 flex items-center self-end md:self-center */
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  align-self: flex-end;
}

@media (min-width: 768px) {
  .career-job-apply {
    margin-top: 0;
    align-self: center;
  }
}

.career-apply-btn {
  /* mirrors: font-boldonse text-sm font-[400] md:text-base text-black flex items-center gap-1.5 border-b border-transparent group-hover:border-black transition-all */
  font-family: "Boldonse", sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  color: #000;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

/* @media (min-width: 768px) {
  .career-apply-btn {
    font-size: 1rem;
  }
} */

.career-job-link:hover .career-apply-btn {
  border-bottom-color: #000;
}

.career-apply-icon {
  width: 24px;
  height: 24px;
}

/* ─── Per-job-row corner plus markers ─────────────────────────────────────── */
.job-corner {
  position: absolute;
  z-index: 20;
  color: #737373;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
}

.job-corner--tl {
  top: -2px;
  left: 0;
  transform: translate(-50%, -50%);
}

.job-corner--tr {
  top: -2px;
  right: 0;
  transform: translate(50%, -50%);
}

.job-corner--bl {
  bottom: 2px;
  left: 0;
  transform: translate(-50%, 50%);
}

.job-corner--br {
  bottom: 2px;
  right: 0;
  transform: translate(50%, 50%);
}

@media (max-width: 767px) {
  .job-corner {
    display: none;
  }
}

/* AboutUs.css */

/* ─── Section wrapper ─────────────────────────────────────────────────────── */
.about-section {
  /* mirrors: container pt-11 relative */
  position: relative;
  width: 100%;
  margin-inline: auto;

  padding-top: var(--section-spacing-xl);
  /* pt-11 = 44px */
  box-sizing: border-box;
}

/* ─── Right edge vertical rule ────────────────────────────────────────────── */
.about-right-rule {
  /* mirrors: absolute top-0 right-3 w-[1px] h-full bg-gray-300 z-10 */
  position: absolute;
  top: 0;
  right: 0.75rem;
  width: 1px;
  height: 100%;
  background-color: #d1d5db;
  /* gray-300 */
  z-index: 10;
}

/* ─── Background grid lines ───────────────────────────────────────────────── */
.about-grid-bg {
  /* mirrors: absolute container inset-0 z-0 grid grid-cols-3 md:grid-cols-4 pointer-events-none */
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: 1280px;
  padding-inline: 1rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .about-grid-bg {
    grid-template-columns: repeat(4, 1fr);
  }
}

.about-grid-line {
  border-left: 1px solid var(--color-border-light);
  /* mirrors: h-[500px] lg:h-full */
  height: 500px;
}

@media (min-width: 1024px) {
  .about-grid-line {
    height: 100%;
  }
}

/* 4th line: shorter on lg+ */
.about-grid-line--short {
  /* mirrors: h-[500px] lg:h-[90px] */
  height: 500px;
}

@media (min-width: 1024px) {
  .about-grid-line--short {
    height: 90px;
  }
}

/* ─── Main content grid ───────────────────────────────────────────────────── */
.about-content {
  /* mirrors: grid grid-cols-1 lg:grid-cols-2 pt-0 lg:pt-11 items-stretch */
  display: grid;
  grid-template-columns: 1fr;
  padding-top: 0;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .about-content {
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: var(--section-spacing-xs);
  }
}

/* ─── Left column ─────────────────────────────────────────────────────────── */
.about-left {
  /* mirrors: relative flex flex-col */
  position: relative;
  display: flex;
  flex-direction: column;
}

.about-left-inner {
  /* mirrors: relative z-10 */
  position: relative;
  z-index: 10;
}

/* ─── Label row ───────────────────────────────────────────────────────────── */
.about-label-row {
  /* mirrors: flex gap-3 py-2 */
  display: flex;
  gap: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.about-label-text {
  /* mirrors: font-jakarta text-base lg:text-lg w-full text-[#363636] */
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  width: 100%;
  color: #363636;
  margin: 0;
}

@media (min-width: 1024px) {
  .about-label-text {
    font-size: 1.125rem;
  }
}

/* ─── Heading ─────────────────────────────────────────────────────────────── */
.about-heading {
  /* mirrors: font-boldonse font-bold text-[28px] leading-relaxed
              md:text-3xl md:leading-relaxed
              lg:text-4xl lg:leading-loose py-6 pl-1 w-full lg:max-w-[470px] */
  font-family: "Boldonse", sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  /* 28px */
  line-height: 1.625;
  /* leading-relaxed */
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 0.25rem;
  width: 100%;
  margin: 0;
}

@media (min-width: 768px) {
  .about-heading {
    font-size: 1.875rem;
    line-height: 1.625;
  }
}

@media (min-width: 1024px) {
  .about-heading {
    font-size: 2.25rem;
    /* text-4xl */
    line-height: 2;
    /* leading-loose */
    max-width: 470px;
  }
}

.about-heading-highlight {
  color: #632fed;
}

/* ─── Background image ────────────────────────────────────────────────────── */
.about-bg-image {
  /* mirrors: hidden lg:block absolute bottom-0 left-0 w-full z-0 */
  display: none;
}

@media (min-width: 1024px) {
  .about-bg-image {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 0;
  }
}

/* ─── Services grid (right column) ───────────────────────────────────────── */
.about-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-self: flex-start;
  position: relative;
  /* border-block: 0.5px solid var(--color-border-light); */
}

@media (max-width: 767px) {
  .about-services-grid {
    margin-top: var(--section-spacing-xs);
    margin-bottom: var(--section-spacing-xs);
  }
}

@media (min-width: 768px) {
  .about-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── Service card ────────────────────────────────────────────────────────── */
.about-service-card {
  /* mirrors: border border-[var(--color-border-light)] p-4 flex flex-col gap-3 bg-[#F3F3F3] */
  border-bottom: 1px solid var(--color-border-light);
  border-right: 1px solid var(--color-border-light);
  padding: 1.3rem 1.3rem 0 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  background-color: #f3f3f3;
}

/* ─── Card header row ─────────────────────────────────────────────────────── */
.about-service-card-header {
  /* mirrors: flex flex-row justify-between pb-4 */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 1rem;
}

.about-service-num {
  /* mirrors: font-boldonse text-xl */
  font-family: "Boldonse", sans-serif;
  font-size: var(--text-xl);
  margin: 0;
  font-weight: 400;
}

/* ─── Card title ──────────────────────────────────────────────────────────── */
.about-service-title {
  /* mirrors: font-jakarta text-xl text-black font-bold py-2 */
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--text-1xl);
  color: #000;
  font-weight: 700;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin: 0;
  height: 21%;
}

/* ─── Card description ────────────────────────────────────────────────────── */
.about-service-desc {
  /* mirrors: font-jakarta font-light text-lg text-[#363636] break-words py-4 leading-6 */
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: var(--text-lg);
  color: #363636;
  word-break: break-word;
  padding-top: 1rem;
  padding-bottom: 1rem;
  line-height: 1.5rem;
  margin: 0;
  height: 21%;
}

/* ─── Grid intersection cross marker ─────────────────────────────────────── */
.about-cross-marker {
  /* mirrors: hidden md:block absolute z-10 text-[#737373] font-jakarta font-light text-lg leading-none -translate-x-1/2 -translate-y-1/2 */
  display: none;
}

@media (min-width: 768px) {
  .about-cross-marker {
    display: block;
    position: absolute;
    z-index: 10;
    color: #737373;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 300;
    font-size: 1.125rem;
    line-height: 1;
    transform: translate(-50%, -55%);
  }
}

/* =============================================
   JobForm.css — Pure CSS (Tailwind → CSS)
   Matches exact colors, fonts, layout
   ============================================= */

/* ── Container ── */
.job-form-section {
  position: relative;
  min-height: 100vh;
  padding-bottom: var(--section-spacing-rem-2xl);
  /* pb-20 */
  /* assumes a .container wrapper adds horizontal padding */
}

/* ── Vertical rule — right edge ── */
.job-form-section .right-rule {
  position: absolute;
  top: 0;
  right: 0.75rem;
  /* right-3 */
  width: 1px;
  height: 100%;
  background-color: var(--color-border-light);
  z-index: 10;
}

/* ── Navbar wrapper ── */
.job-form-section .navbar-wrapper {
  position: relative;
  z-index: 20;
}

/* ── Grid lines overlay ── */
.job-form-section .grid-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  pointer-events: none;
}

@media (min-width: 768px) {
  .job-form-section .grid-lines {
    grid-template-columns: repeat(4, 1fr);
  }
}

.job-form-section .grid-lines span {
  border-left: 1px solid var(--color-border-light);
  height: 100%;
}

.job-form-section .grid-lines span.md-only {
  display: none;
}

@media (min-width: 768px) {
  .job-form-section .grid-lines span.md-only {
    display: block;
  }
}

/* ══════════════════════════════════════
   TOP SECTION  (badge + heading + tags …)
   ══════════════════════════════════════ */
.job-form-top {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  z-index: 10;
  align-items: stretch;
}

@media (min-width: 768px) {
  .job-form-top {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Badge column */
.job-form-top .badge-col {
  grid-column: span 1;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.job-form-top .badge-col img {
  margin-top: 0.25rem;
}

.job-form-top .badge-col h2 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  /* text-base */
  color: #363636;
  width: 100%;
}

@media (min-width: 1024px) {
  .job-form-top .badge-col h2 {
    font-size: 1.125rem;
    /* text-lg */
  }
}

/* Content column (3 of 4) */
.job-form-top .content-col {
  grid-column: span 1;
  padding-top: 0.5rem;
  padding-left: 0;
}

@media (min-width: 768px) {
  .job-form-top .content-col {
    grid-column: span 3;
    padding-top: 0;
  }
}

/* Main heading */
.job-form-top .main-heading {
  font-family: "Boldonse", sans-serif;
  font-weight: 700;
  line-height: 1.625;
  /* leading-relaxed */
  font-size: 2.25rem;
  /* text-4xl */
  padding: 1.5rem 0 1.5rem 0.25rem;
  width: 100%;
  color: inherit;
}

@media (min-width: 768px) {
  .job-form-top .main-heading {
    font-size: 3rem;
    /* text-5xl */
    line-height: 1.625;
  }
}

@media (min-width: 1024px) {
  .job-form-top .main-heading {
    line-height: 2;
    /* lg:leading-loose */
    max-width: 470px;
  }
}

.job-form-top .main-heading .highlight {
  color: #632fed;
}

/* Tags grid */
.job-form-top .tags-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* gap: 1.3rem; */
  margin-bottom: 3.8rem;
  /* mb-9 */
}

/* @media (min-width: 760px) {
  .job-form-top .tags-grid {
    gap: 0.6rem;
  }
} */
@media (min-width: 768px) {
  .job-form-top .tags-grid {
    grid-template-columns: repeat(2, 1fr);
    /* margin-top: 2.5rem; */
    margin-bottom: var(--section-spacing-header-xs);
  }
}

@media (min-width: 1024px) {
  .job-form-top .tags-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.job-form-top .tags-grid .tag-item {
  display: flex;
  gap: 1rem;
  /* align-items: center; */
}

@media (min-width: 768px) {
  .job-form-top .tags-grid .tag-item {
    gap: 0.5rem;
  }
}

.job-form-top .tags-grid .tag-item img {
  height: 1.5rem;
  width: 1.5rem;
}

.job-form-top .tags-grid .tag-item span {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #737373;
  font-size: var(--text-lg);
}

/* Section wrappers (JobHeader blocks) */
.job-form-top .section-wrapper {
  margin-bottom: 3.8rem;
  /* mb-12 */
}

@media (min-width: 760px) {
  .job-form-top .section-wrapper {
    margin-bottom: var(--section-spacing-header-xs);
  }
}

/* Cards grid */
.job-form-top .cards-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--color-border-light);
  background-color: #f9f9f9;
  /* margin: 2rem 0; */
}

@media (min-width: 768px) {
  .job-form-top .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.job-form-top .cards-grid .card-cell-first {
  border-bottom: 1px solid var(--color-border-light);
}

@media (min-width: 768px) {
  .job-form-top .cards-grid .card-cell-first {
    border-bottom: none;
    border-right: 1px solid var(--color-border-light);
  }
}

/* Potential desc */
.job-form-top .potential-desc {
  margin-top: var(--section-spacing-potential-desc-top);
  margin-bottom: var(--section-spacing-potential-desc-bottom);
  /* padding-left: 0.25rem; */
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--text-lg);
  color: #363636;
  line-height: 1.625;
}

/* ExpectData block */
/* .job-form-top .expect-block {
  margin-bottom: 1.3rem;
} */

/* ── Requirements (suchen) ── */
.job-form-top .requirements-block {
  margin-bottom: var(--section-spacing-rem-xl);
}

.job-form-top .requirements-list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.job-form-top .requirement-item {
  display: flex;
  /* align-items: center; */
  gap: 1rem;
  /* padding-left: 0.25rem; */
}

.job-form-top .requirement-item .req-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-accent-black);
  color: var(--color-accent-white);
  font-size: var(--text-lg);
  line-height: 1;
}

.requirement-item {
  display: flex;
  align-items: center;
}

.job-form-top .requirement-item p {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--text-lg);
  color: #363636;
  line-height: 1.625;
  /* padding-top: 0.2rem; */
}

/* Responsive Top Spacer Utility */
.spacer-top-responsive {
  padding-top: var(--section-spacing-md);
  /* Default for mobile/small screens */
}

@media (min-width: 1024px) {
  .spacer-top-responsive {
    padding-top: var(--section-spacing-rem-2xl);
    /* Applied on large screens (desktop) */
  }
}

/* ══════════════════════════════════════
   APPLICATION FORM SECTION
   ══════════════════════════════════════ */
.job-form-apply {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  z-index: 10;
  align-items: stretch;
  padding-bottom: var(--section-spacing-rem-2xl);
  padding-top: 3.8rem;
  overflow: visible;
}

.job-form-apply .form-bg-decor {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 30%);
  width: min(870px, 70%);
  height: auto;
  z-index: -1;
  pointer-events: none;
}

@media (min-width: 768px) {
  .job-form-apply {
    grid-template-columns: repeat(4, 1fr);
    padding-top: var(--section-spacing-rem-2xl);
  }
}

/* Background gradient image */
.job-form-apply .bg-gradient-img {
  display: none;
  position: absolute;
  left: 5%;
  right: 0;
  overflow: hidden;
  top: 2%;
  inset: 0;
  z-index: 0;
  margin-top: 8rem;
}

@media (min-width: 768px) {
  .job-form-apply .bg-gradient-img {
    display: block;
  }
}

.job-form-apply .bg-gradient-img img {
  object-fit: cover;
  object-position: center;
}

/* Form badge column */
.job-form-apply .form-badge-col {
  grid-column: span 1;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.job-form-apply .form-badge-col h2 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  color: #363636;
}

@media (min-width: 768px) {
  .job-form-apply .form-badge-col h2 {
    font-size: 1.125rem;
  }
}

/* Form content column */
.job-form-apply .form-content-col {
  grid-column: span 1;
  padding-left: 0;
}

@media (min-width: 768px) {
  .job-form-apply .form-content-col {
    grid-column: span 3;
    /* padding-left: 0.25rem; */
  }
}

/* Form heading block */
.job-form-apply .form-heading-block {}

.job-form-apply .form-heading {
  font-family: "Boldonse", sans-serif;
  font-weight: 400;
  line-height: 1.625;
  font-size: var(--text-3-4xl);
  color: #000;
}

@media (min-width: 768px) {
  .job-form-apply .form-heading {
    /* font-size: 3rem; */
    line-height: 1.625;
    padding-bottom: var(--section-spacing-md);
  }
}

@media (min-width: 1024px) {
  .job-form-apply .form-heading {
    line-height: 2;
  }
}

.job-form-apply .form-heading .highlight {
  color: #632fed;
}

.job-form-apply .form-subtitle {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: var(--text-lg);
  color: #363636;
  margin-bottom: clamp(1.2rem, 3vw, 2.5rem);
  /* margin-top: clamp(1.2rem, 3vw, 2.5rem); */
}

/* ── Form itself ── */
.job-form-apply form {
  /* space-y-6 equivalent handled by gap on children */
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 3vw, 2.5rem);
}

/* Why row */
.job-form-apply .why-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .job-form-apply .why-row {
    flex-direction: row;
  }
}

.job-form-apply .why-row label {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--text-lg);
  color: #000;
}

@media (min-width: 768px) {
  .job-form-apply .why-row label {
    font-size: var(--text-lg);

    width: 23%;
  }
}

.job-form-apply .why-row .textarea-wrap {
  width: 100%;
  position: relative;
}

.job-form-apply .why-row textarea {
  width: 100%;
  background-color: #f3f3f3;
  border: none;
  border-radius: 0;
  height: 10rem;
  padding: 1rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--text-base);
  color: #000;
  outline: none;
  resize: none;
  box-sizing: border-box;
}

.job-form-apply .why-row textarea::placeholder {
  color: #737373;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .job-form-apply .why-row textarea::placeholder {
    font-size: 1.125rem;
  }
}

@media (max-width: 768px) {
  .job-form-apply .why-row textarea {
    height: 18rem;
  }
}

.job-form-apply .why-row textarea:focus {
  box-shadow: 0 0 0 1px #632fed;
}

/* Email / Phone fields — aligned to the uploads grid columns below */
.job-form-apply .contact-fields-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .job-form-apply .contact-fields-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.job-form-apply .contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
  width: 100%;
}

@media (min-width: 768px) {
  .job-form-apply .contact-field {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
}

.job-form-apply .contact-field label {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--text-lg);
  color: #000;
  white-space: nowrap;
  flex-shrink: 0;
}

.job-form-apply .contact-field-control {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  width: 100%;
}

.job-form-apply .contact-field-control input {
  width: 100%;
  background-color: #f3f3f3;
  border: none;
  border-radius: 0;
  padding: 1rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--text-base);
  color: #000;
  outline: none;
  box-sizing: border-box;
  height: 3.25rem;
}

.job-form-apply .contact-field-control input::placeholder {
  color: #737373;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .job-form-apply .contact-field-control input::placeholder {
    font-size: 1.125rem;
  }

  .job-form-apply .contact-field label {
    padding-bottom: 2rem;
  }
}

.job-form-apply .contact-field-control input:focus {
  box-shadow: 0 0 0 1px #632fed;
}

.job-form-apply .contact-field-control input.input-error {
  box-shadow: 0 0 0 1px #ef4444;
}

/* File uploads grid */
.job-form-apply .uploads-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 1024px) {
  .job-form-apply .uploads-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Individual upload field */
.job-form-apply .upload-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.job-form-apply .upload-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

@media (min-width: 768px) {
  .job-form-apply .upload-inner {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
}

.job-form-apply .upload-inner>label {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--text-lg);
  color: #000;
  white-space: nowrap;
  flex-shrink: 0;
  /* don't let label shrink */
  padding-bottom: 0;
  /* remove old hack */
}

.job-form-apply .upload-box-error {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* fill remaining row space */
  min-width: 0;
  /* prevent overflow */
  width: 100%;
}

/* @media (min-width: 768px) {
  .job-form-apply .upload-box-error {
    width: 100%;
    flex: 0 0 50%;
  }
} */
.job-form-apply .upload-box {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  background: #f3f3f3;
  padding: 0.75rem;
  cursor: pointer;
  width: 100%;
  /* <-- full width of parent */
  box-sizing: border-box;
}

/* @media (min-width:1550px) {
  .job-form-apply .upload-box{
   width: 146%;
  }
} */
.job-form-apply .upload-box input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  display: none;
}

.job-form-apply .upload-box .file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-lg);
  color: #737373;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.job-form-apply .upload-box .upload-btn-label {
  cursor: pointer;
  font-weight: 700;
  color: #000;
  transition: color 0.2s;
  flex-shrink: 0;
}

.job-form-apply .upload-box .upload-btn-label:hover {
  color: #632fed;
}

/* Format error messages */
.job-form-apply .format-error {
  color: #ef4444;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  min-height: 1rem;
  /* always occupies space even when empty */
  visibility: visible;
}

/* Status messages */
.job-form-apply .status-error {
  color: #ef4444;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.875rem;
}

.job-form-apply .status-success {
  color: #16a34a;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
}

/* ── NEW: Consent checkbox row ── */
.job-form-apply .consent-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.job-form-apply .consent-row input[type="checkbox"] {
  /* margin-top: 0.5rem; */
  width: 1rem;
  height: 1.2rem;
  accent-color: #632fed;
  cursor: pointer;
  flex-shrink: 0;
}

.job-form-apply .consent-row label {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--text-lg);
  color: #737373;
  line-height: 1.625;
  cursor: pointer;
}

.job-form-apply .consent-row a {
  color: #632fed;
  border-bottom: 0.5px solid #632fed;
  text-decoration: none;
  transition: color 0.2s;
  font-weight: 500;
}

.job-form-apply .consent-row a:hover {
  color: #4a1fc0;
}

/* Submit button row */
.job-form-apply .submit-row {
  /* padding-top: 2rem; */
  display: flex;
  position: relative;
}

.job-form-apply .submit-btn {
  position: relative;
  z-index: 10;
  width: 100%;
  cursor: pointer;
  background-color: #000;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: var(--text-xl);
  padding: 0.875rem 2rem;
  border-radius: 9999px;
  border: none;
  transition: background-color 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* @media (min-width: 768px) {
  .job-form-apply .submit-btn {
    font-size: 1.25rem;
  }
} */
@media (min-width: 1024px) {
  .job-form-apply .submit-btn {
    max-width: 66%;
  }
}

.job-form-apply .submit-btn:hover {
  background-color: #1f1f1f;
}

.job-form-apply .submit-btn:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

/* ── Banner wrapper ── */
.job-form-banner {
  position: relative;
  z-index: 10;
}

/* bg-[#F3F3F3] border-r border-[var(--color-border-light)] p-10 flex flex-col gap-8 */
.card-wrap {
  background-color: #f3f3f3;
  /* border-right: 1px solid var(--color-border-light); */
  padding: clamp(20px, 3vw, 28px);
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: clamp(1.75rem, 2vw, 2rem);
}

.btn-animated.btn-disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}

/* flex justify-between items-start */
.card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* text-[#632FED] font-boldonse text-4xl md:text-5xl */
.card-value {
  color: #632fed;
  font-family: "Boldonse", sans-serif;
  font-size: var(--text-1-2xl);
  margin: 0;
}

/* w-5 h-5 */
.card-icon {
  width: 24px;
  height: 24px;
}

/* text-[#363636] font-jakarta text-base md:text-lg w-[60%] */
.card-desc {
  color: #363636;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--text-lg);
  /* width: 60%; */
  margin: 0;
}

@media (max-width: 768px) {
  .card-desc {
    width: 100%;
  }
}

/* relative overflow-hidden bg-[#0B0B0B] p-6 md:p-9 grid grid-cols-1 md:grid-cols-2 items-center */
.banner-wrap {
  position: relative;
  overflow: hidden;
  background-color: #0b0b0b;
  padding: var(--section-spacing-banner-sm);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  width: 100%;
  /* ✅ don't exceed container */
  box-sizing: border-box;
  /* ✅ padding included in width */
}

@media (min-width: 768px) {
  .banner-wrap {
    padding: var(--section-spacing-banner-lg);
    grid-template-columns: repeat(2, 1fr);
  }
}

.job-role-section {
  position: relative;
  /* padding-left: 4px; */
}

.jr-role-badge {
  display: flex;
  gap: 8px;
}

.jr-role-text {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  width: 100%;
  color: #737373;
}

.jr-heading-block {
  /* no classes on this div in original */
}

.jr-main-heading {
  font-family: "Boldonse", sans-serif;
  font-size: var(--text-1xl);
  line-height: 1.8;
  margin-top: 12px;
  margin-bottom: var(--section-spacing-2xs);
  font-weight: 400;
}

@media (max-width: 760px) {
  .jr-main-heading {
    margin-top: 20px;
    margin-bottom: 22px;
  }
}

.jr-heading-highlight {
  color: #632fed;
  font-size: var(--text-1xl);
}

.jr-desc-text {
  color: #363636;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--text-lg);
  padding-bottom: 0;
  padding-bottom: var(--section-spacing-2xs);
}

/* pointer-events-none absolute hidden lg:block -right-5 top-8 w-[200px] h-[400px]
   bg-[linear-gradient(77deg,_#3885F3_50%,_#F071EF_50%)] blur-[85px] opacity-85 */
.banner-grad-desktop {
  pointer-events: none;
  position: absolute;
  display: none;
  right: -1.25rem;
  top: 2rem;
  width: 200px;
  height: 400px;
  background: linear-gradient(77deg, #3885f3 50%, #f071ef 50%);
  filter: blur(85px);
  opacity: 0.85;
}

@media (min-width: 1024px) {
  .banner-grad-desktop {
    display: block;
  }
}

/* pointer-events-none absolute lg:hidden bottom-0 left-0 right-0 h-[100px]
   bg-[linear-gradient(77deg,_#3885F3_50%,_#F071EF_50%)] blur-[85px] opacity-85 */
.banner-grad-mobile {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(77deg, #3885f3 50%, #f071ef 50%);
  filter: blur(85px);
  opacity: 0.85;
}

@media (min-width: 1024px) {
  .banner-grad-mobile {
    display: none;
  }
}

/* relative z-10 */
.banner-text-col {
  position: relative;
  z-index: 10;
}

/* text-white font-boldonse font-light py-3 w-1/2 md:w-full text-2xl leading-loose md:text-2xl md:leading-relaxed */
.banner-title {
  color: #fff;
  width: 100%;
  font-family: "Boldonse", sans-serif;
  font-weight: 300;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;

  font-size: var(--text-xl);
  line-height: 2;
  margin: 0;
}

/* text-[#737373] */
.banner-subtitle {
  color: #632fed;
}

/* relative z-10 flex md:justify-start mt-4 md:mt-0 */
.banner-btn-col {
  position: relative;
  z-index: 10;
  display: flex;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .banner-title {
    width: 100%;
    font-size: var(--text-1xl);
    line-height: 1.625;
  }

  .banner-btn-col .banner-btn {
    justify-content: flex-start;
    margin-top: 0;
    padding: 16px 46px;
  }
}

/* bg-[#632FED] w-full text-lg md:text-xl md:w-auto hover:bg-purple-700 transition-colors
   text-white font-jakarta font-light rounded-full px-7 py-2.5 whitespace-nowrap */
.banner-btn {
  background-color: #632fed;
  width: 100%;
  font-size: var(--text-xl);
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  border-radius: 9999px;
  padding: 0.625rem 0.75rem;
  border: none;
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.banner-btn:hover {
  background-color: #7e22ce;
}

/* ✅ reuse same animation classes */
.banner-btn .btn-text-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.3em;
  line-height: 1.3em;
}

.banner-btn .btn-text {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.banner-btn .btn-text--hover {
  position: absolute;
  top: 100%;
  left: 0;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.banner-btn:hover .btn-text:first-child {
  transform: translateY(-100%);
}

.banner-btn:hover .btn-text--hover {
  transform: translateY(-100%);
}

@media (max-width: 768px) {
  .banner-btn {
    width: auto;
    font-size: var(--text-lg);
    white-space: nowrap;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

.banner-btn:hover {
  background-color: #7e22ce;
}

/* Animated Button - Same feel as effica.framer.ai */
.btn-animated {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 32px;
  background: var(--color-black-button);
  color: #fff;
  /* font-weight: 600; */
  font-size: var(--text-xl);
  border-radius: 9999px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  white-space: nowrap;
}

.btn-text-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.3em;
  line-height: 1.3em;
}

.btn-text {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-text--hover {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(120%);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-animated:hover .btn-text {
  transform: translateY(-120%);
}

.btn-animated:hover .btn-text--hover {
  transform: translateY(0);
}

.btn-icon {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-animated:hover .btn-icon {
  transform: rotate(45deg);
}

/* Optional: Add subtle scale on active */
.btn-animated:active {
  transform: scale(0.97);
}

@media (max-width: 768px) {
  .service-description {
    max-width: 100%;
  }

  .hero-title span {
    display: inline;
  }

  .hero-stat strong {
    padding: 20px 0 12px;
  }

  .header-content-wrapper.stacked .header-left {
    gap: 0;
  }

  .section-header.centered {
    display: flex;
    flex-direction: column;
  }

  .testimonials__header-text .section-header.centered {
    display: flex;
    flex-direction: column;
  }

  .case__studies__header__text .section-header.centered {
    margin-top: 0;
  }

  .btn-animated {
    font-size: 1rem;
  }

  .project-section-title {
    font-size: 1.75rem;
  }

  .blog-pagination {
    margin-top: 0;
  }
}

.so-row-left,
.so-row-right {
  padding-bottom: 2.5rem;
}

/* ── Grid Lines ── */
/* .hero-grid-lines {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 0;
}

.hero-grid-lines span {
  display: block;
  width: 1px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.08);
} */
.relative {
  position: relative;
}

/* ── Inner wrapper ── */
.main-modules-inner {
  position: relative;
  z-index: 1;
  padding-block: 30px;
}

@media (min-width: 760px) {
  .main-modules-heading {
    margin-bottom: 3.8rem;
  }
}

/* ── Modules list ── */
.main-modules-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (min-width: 760px) {
  .main-modules-list {
    gap: 60px;
  }
}

/* ── Each row ── */
.main-module-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: flex-end;
  /* gap: 2rem; */
  border-radius: 0.75rem;
}

@media (min-width: 768px) {
  .main-module-row {
    grid-template-columns: 1fr 1fr;
    /* ✅ 2 equal columns */
  }

  /* ✅ row-reverse — image column pehle, text baad mein */
  .main-module-row.row-reverse .module-image-wrap {
    order: -1;
  }
}

/* ── Text side ── */
.module-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--text-sm);
  /* padding:0rem 3rem; */
}

.module-text--even {
  padding-left: 3rem;
}

@media (max-width: 767px) {
  .module-text {
    padding-bottom: 28px;
    padding-left: 0rem;
  }
}

/* ── Image side ── */
.module-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* ── Icon ── */
.module-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ── Title ── */
.module-title {
  font-weight: 400;
  font-size: var(--text-2xl);
  font-family: var(--font-primary);
  padding-bottom: 0.3rem;
}

/* ── Description ── */
.module-description {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.625;
  color: var(--color-text-grey-3);
}

/* ── Image side ── */
.module-image-wrap {
  flex: 1;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 2.75rem;
}

@media (max-width: 760px) {
  .module-image-wrap {
    padding: 0.75rem;
  }
}

/* ── Image ── */
.module-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ── Keyframes ── */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* ── Section ── */
.so-section {
  width: 100%;
  /* padding-bottom: 1rem; */
  overflow: hidden;
}

/* ── Inner ── */
.so-section {
  padding-block: 30px;
}

/* ── Heading ── */

@media (min-width: 760px) {
  .so-heading {
    margin-bottom: var(--section-spacing-xs) !important;
  }
}

/* ── Row wrapper ── */
.so-row-left,
.so-row-right {
  overflow: hidden;
  cursor: default;
  padding-bottom: clamp(0.5rem, 1vw, 1.25rem);
}

/* ── Track ── */
.so-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.so-track-left {
  animation: scroll-left var(--dur) linear infinite;
}

.so-track-right {
  animation: scroll-right var(--dur) linear infinite;
}

/* ── Pause on hover ── */
.so-row-left:hover .so-track,
.so-row-right:hover .so-track {
  animation-play-state: paused;
}

/* ── Each slide ── */
.so-slide {
  flex-shrink: 0;
  width: 340px;
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}

@media (min-width: 768px) {
  .so-slide {
    width: 420px;
  }
}

@media (min-width: 1024px) {
  .so-slide {
    width: 500px;
  }
}

/* ── Image ── */
.so-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top;
  display: block;
}

/* ── Section ── */
.dev-section {
  background-color: #fff;
  width: 100%;
  padding-block: 30px;
}

/* ── Inner ── */
.dev-inner {
  padding-top: var(--section-spacing-rem-md);
  padding-bottom: var(--section-spacing-rem-md);
}

/* ── Challenges grid ── */
.dev-grid {
  display: grid;
  grid-template-columns: 1fr;
}

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

/* ── Left ── */
.dev-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* ── Challenges heading ── */
.dev-challenges-heading {
  font-weight: 400;

  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  margin-bottom: 1rem;
  word-break: break-words;
  position: relative;
}

@media (min-width: 640px) {
  .dev-challenges-heading {
    word-break: normal;
    width: 80%;
  }
}

/* ── Challenge list ── */
.dev-challenge-list {
  display: flex;
  flex-direction: column;
}

.dev-challenge-item {
  display: flex;
  align-items: center;
  font-size: var(--text-xl);
  font-family: var(--font-primary);
  gap: 1.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  position: relative;
  border-bottom: 1px solid;
}

@media (min-width: 640px) {
  .dev-challenge-item {
    gap: 3rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* ── Challenge number badge ── */
.dev-challenge-number {
  color: #fff;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: var(--text-1xl);
  font-family: var(--font-primary);
  font-weight: 400;
  flex-shrink: 0;
  min-width: 36px;
  text-align: center;
}

@media (min-width: 640px) {
  .dev-challenge-number {
    min-width: 40px;
  }
}

/* ── Challenge title ── */
.dev-challenge-title {
  font-weight: 400;
  font-size: var(--text-lg);
  font-family: var(--font-primary);
}

@media (min-width: 760px) {
  .dev-challenge-title {
    width: 50%;
  }
}

/* ── Mobile cards ── */
.dev-mobile-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

@media (min-width: 1024px) {
  .dev-mobile-cards {
    display: none;
  }

  /* hidden on desktop */
}

.relevant-blogs__header {
  margin-block: var(--section-spacing-3xl) 58px;
}

/* .insight-section__grid {
  margin-bottom: var(--section-spacing-xl);
} */
.faq-section .section-header.centered {
  padding-top: var(--section-spacing-faq-header-xl);
  padding-bottom: var(--section-spacing-xs);
}

.blog-detail__body-text p.blog-detail__lead {
  margin-bottom: clamp(1.5rem, 6vw, 3.75rem);
}

.relevant-blogs__header .view-all-btn {
  width: 100%;
}

.cs-stack__title {
  font-size: var(--text-3-4xl);
}

.cs-stack__meta {
  font-size: var(--text-1xl);
}

/* } */

/* ── Right — desktop only ── */
.dev-right {
  display: none;
}

@media (min-width: 1024px) {
  .dev-right {
    display: block;
    padding-left: 2rem;
  }
}

/* ── Image wrap ── */
.dev-image-wrap {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin-left: auto;
}

/* ── Side image ── */
.dev-side-image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ── Overlay cards (desktop) ── */
.dev-overlay-cards {
  position: absolute;
  top: -10%;
  right: 3%;
  width: 98%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 10;
}

/* ✅ Correct */
@media (min-width: 768px) and (max-width: 1224px) {
  .dev-overlay-cards {
    right: 1px;
  }
}

/* ── Shared card ── */
.dev-card {
  position: relative;
  padding: 0.75rem;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  gap: 1.75rem;
}

.dev-card-normal {
  flex-direction: row;
}

.dev-card-reverse {
  flex-direction: row-reverse;
}

/* ── Card text block ── */
.dev-card-text {
  flex: 1;
}

.dev-card-p {
  font-size: var(--text-base);
  color: #fff;
  line-height: 1.625;
}

@media (max-width: 1164px) {
  .dev-card-p {
    font-size: var(--text-sm);
  }
}

/* .dev-card-p-sm { font-size: 10px; }

@media (min-width: 1024px) {
  .dev-card-p-sm { font-size: 16px; }
} */

.dev-card-p-mt {
  margin-top: 0.25rem;
}

.dev-card-bold {
  font-weight: 700;
}

/* ── Big number in card ── */
.dev-card-num {
  font-size: var(--text-2-3xl);
  font-weight: 900;
  font-family: var(--font-primary);
  color: #fff;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
}

/* ── Section ── */
.kpi-section {
  width: 100%;
  padding-block: 30px;
  background-color: #fff;
}

/* ── Top row: title + description ── */
.kpi-top-row {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  margin-bottom: var(--section-spacing-xs);
}

@media (min-width: 1024px) {
  .kpi-top-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ── Main title ── */
/* .kpi-main-title {
  font-size: var(--text-2-3xl);
  font-family: var(--font-primary);
  font-weight: 400;
  color: #000000;
  position: relative;
  flex-shrink: 0;
} */

/* ── Main description ── */
.kpi-main-desc {
  font-size: var(--text-lg);
  font-family: var(--font-body);
  color: #979797;
  position: relative;
}

@media (min-width: 1024px) {
  .kpi-main-desc {
    width: 50%;
  }
}

/* ── Header block ── */
.kpi-header {
  margin-bottom: var(--section-spacing-rem-lg);
}

.kpi-subtitle {
  font-size: var(--text-2xl);
  font-family: var(--font-primary);
  font-weight: 400;
  color: #000000;
  position: relative;
  margin-bottom: 1rem;
}

.kpi-desc {
  font-size: var(--text-lg);
  font-family: var(--font-body);
  color: #979797;
  position: relative;
}

@media (min-width: 1024px) {
  .kpi-desc {
    width: 50%;
    padding-right: 0.75rem;
  }
}

/* ── KPI grid ── */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  /* gap: 2rem; */
}

/* ── KPI card ── */
.kpi-card {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* ── Card top: dot + info ── */
.kpi-card-top {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.kpi-accent-dot {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.375rem;
  flex-shrink: 0;
}

.kpi-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.graphic-design {
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.graphic-design::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 882px;
  /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 20%, rgba(25, 115, 190, 0.45) 80%); */
  z-index: 1;
  pointer-events: none;
}

.graphic-design__vlines {
  --vlines-color: var(--color-border-dark);
  --vlines-z: 2;
}

.graphic-design>.container {
  position: relative;
  z-index: 2;
  padding-block: clamp(40px, 3vw, 80px);
}

.graphic-design__heading {
  margin-top: 0;
  margin-bottom: 16px;
  color: #fff;
  font-size: var(--text-3-4xl);
  font-weight: 400;
  letter-spacing: -0.01em;
  font-family: var(--font-primary);
}

.graphic-design__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.graphic-design__row {
  position: relative;
  padding-block: 1.5rem;
}

.graphic-design__row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--row-border-color, rgba(255, 255, 255, 0.15));
}

.graphic-design__row-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.graphic-design__label {
  display: flex;
  align-items: center;
}

.graphic-design__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 clamp(8px, 10px, 12px);
  color: #02182e;
  font-size: var(--text-lg);
  font-weight: 400;
  margin-left: 0.04rem;
  font-family: var(--font-primary);
}

.graphic-design__title {
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.04em;
  font-family: var(--font-primary);
}

.graphic-design__title--mobile {
  margin-left: 1rem;
  font-size: 14px;
}

.graphic-design__title--desktop {
  display: none;
  text-align: start;
  font-size: var(--text-2xl);
}

.graphic-design__subitems {
  color: #fff;
  font-family: var(--font-body);
}

.graphic-design__subitems--desktop {
  display: none;
}

.graphic-design__subitems--mobile {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 12px;
  column-gap: 1.5rem;
  margin-top: 12px;
  padding-left: 0.25rem;
}

.graphic-design__subitem {
  color: #fff;
  font-size: var(--text-base);
  font-weight: 500;
}

.graphic-design__subitems-spacer {
  display: none;
}

@media (min-width: 768px) {
  .graphic-design__row-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
    align-items: center;
    text-align: left;
  }

  .graphic-design__title--mobile {
    display: none;
  }

  .graphic-design__title--desktop {
    display: block;
    grid-column: 2 / 4;
  }

  .graphic-design__subitems--desktop {
    display: flex;
    grid-column: 4;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
  }

  .graphic-design__subitems--mobile {
    display: none;
  }
}

@media (min-width: 1024px) {
  .graphic-design__subitems--desktop {
    align-items: flex-start;
    align-self: end;
    text-align: left;
  }

  .graphic-design__subitems-spacer {
    display: block;
  }

  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1024px) {
  .graphic-design__heading {
    margin-bottom: 6px;
  }
}

/* branding section (FullGraphicDesignSection / GraphicDesignSteps) */
.branding-section {
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #000;
}

.branding-section__left-glow {
  display: none;
  pointer-events: none;
  position: absolute;
  z-index: 0;
  top: 80px;
  width: clamp(300px, 50vw, 600px);
  height: clamp(350px, 60vw, 700px);
  filter: blur(80px);
  opacity: 0.3;
}

.branding-section__glow-gradient {
  display: none;
  position: absolute;
  z-index: 0;
  inset: 0;
  top: -10%;
  right: -50%;
  height: 110%;
  padding-bottom: 2.5rem;
}

.branding-section__glow-gradient img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.branding-section__vlines {
  --vlines-color: var(--color-border-dark);
  --vlines-z: 1;
}

.branding-section__content {
  position: relative;
  z-index: 10;
  padding-block: var(--section-spacing-xs);
}

.branding-section__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: var(--section-spacing-rem-md);
}

.branding-section__header-left {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
}

.branding-section__number {
  color: #fff;
  font-weight: 400;
  line-height: 1;
  font-size: var(--text-5xl);
  letter-spacing: -0.03em;
  font-family: var(--font-primary);
  margin-right: clamp(8px, 1vw, 12px);
}

.branding-section__number-dot {
  flex-shrink: 0;
  display: flex;
  align-self: flex-end;
  margin-bottom: 0.25rem;
  rotate: 45deg;
  width: clamp(20px, 3vw, 32px);
  height: clamp(20px, 3vw, 32px);
}

.branding-section__title {
  display: block;
  width: 100%;
  font-size: var(--text-4-5xl);
  line-height: 100%;
  letter-spacing: 0;
  -webkit-text-stroke: 2px #fff;
  color: transparent;
}

@media (min-width: 768px) {
  .branding-section__header {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 1rem;
  }

  .branding-section__header-left {
    align-self: flex-end;
  }

  .branding-section__title {
    display: flex;
    width: auto;
    align-self: flex-end;
  }
}

.branding-section__media {
  width: 100%;
}

.branding-section__top-images {
  display: flex;
  flex-direction: row;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.branding-section__top-image {
  flex: 1;
  min-width: 0;
  border-radius: 2px;
  overflow: hidden;
}

.branding-section__top-image img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .branding-section__media {
    padding: 2rem;
    max-width: 1124px;
    margin-inline: auto;
  }
}

.branding-section__bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
}

.branding-section__bottom-grid--swap {
  direction: rtl;
}

.branding-section__bottom-left {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  overflow: hidden;
  order: 1;
}

.branding-section__bottom-grid--swap .branding-section__bottom-left {
  order: 2;
}

.branding-section__bottom-left img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.branding-section__bottom-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  order: 2;
}

.branding-section__bottom-grid--swap .branding-section__bottom-right {
  order: 1;
}

.branding-section__bottom-right-top {
  position: relative;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
  z-index: 1;
}

.branding-section__bottom-right-top img {
  height: auto;
  width: 100%;
  object-fit: contain;
  padding-inline: 4px;
}

.branding-section__bottom-right-bottom {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  overflow: hidden;
  z-index: 1;
}

.branding-section__bottom-right-behind {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.branding-section__bottom-right-behind img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0) invert(1);
}

.branding-section__bottom-right-glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: blur(80px);
  border-radius: 50%;
  transform: scale(0.8);
}

.branding-section__bottom-right-img {
  position: relative;
  z-index: 1;
  height: auto;
  width: 100%;
  object-fit: contain;
}

@media (min-width: 640px) {
  /* .branding-section__left-glow,
  .branding-section__glow-gradient {
    display: block;
  } */

  .branding-section__bottom-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .branding-section__bottom-grid--margin-right {
    margin-right: 1.75rem;
  }

  .branding-section__bottom-left {
    grid-column: span 2 / span 2;
  }

  .branding-section__bottom-right {
    grid-column: span 3 / span 3;
  }
}

@media (min-width: 1024px) {
  .branding-section__bottom-right-img {
    width: var(--custom-width);
  }
}

/* colour palette section */
.colour-palette {
  position: relative;
  z-index: 10;
}

.colour-palette__glow {
  display: none;
  pointer-events: none;
  position: absolute;
  z-index: 0;
  inset: 0;
  right: -50%;
  top: -20%;
}

.colour-palette__glow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.colour-palette__vlines {
  --vlines-color: var(--color-border-dark);
  --vlines-z: 1;
}

.colour-palette__content {
  position: relative;
  z-index: 2;
  padding-block: var(--section-spacing-xs);
}

.colour-palette__header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: var(--section-spacing-rem-sm);
}

.colour-palette__header-left {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
}

.colour-palette__number {
  color: #fff;
  font-weight: 400;
  line-height: 1;
  font-size: var(--text-5xl);
  letter-spacing: -0.03em;
  font-family: var(--font-primary);
}

.colour-palette__number-dot {
  flex-shrink: 0;
  display: flex;
  align-self: flex-end;
  margin-bottom: 0.25rem;
  rotate: 45deg;
  width: clamp(20px, 3vw, 32px);
  height: clamp(20px, 3vw, 32px);
}

.colour-palette__title {
  display: block;
  width: 100%;
  font-size: var(--text-4-5xl);
  line-height: 100%;
  letter-spacing: 0;
  -webkit-text-stroke: 2px #fff;
  color: transparent;
}

@media (min-width: 768px) {
  .colour-palette__header {
    flex-direction: row;
    align-items: flex-end;
  }

  .colour-palette__header-left {
    align-self: flex-end;
  }

  .colour-palette__title {
    display: flex;
    width: auto;
    align-self: flex-end;
  }
}

.colour-palette__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1124px;
  margin-inline: auto;
}

.colour-palette__header {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.5rem;
  margin-bottom: var(--section-spacing-rem-sm);
}

.colour-palette__number-dot {
  flex-shrink: 0;
  display: flex;
  align-self: flex-end;
  margin-bottom: 0.25rem;
  width: clamp(20px, 3vw, 30px);
  height: clamp(20px, 3vw, 30px);
}

.colour-palette__swatches {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding-top: 1rem;
}

.colour-palette__swatches-group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.colour-palette__swatches-row {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: clamp(46px, 3vw, 48px);
  padding-inline: 1rem;
  width: 100%;
}

.colour-palette__swatch {
  flex-shrink: 0;
  width: 4.5rem;
  height: 3rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.colour-palette__swatches-labels {
  display: flex;
  justify-content: center;
  gap: clamp(38px, 3vw, 42px);
  padding: 0.75rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  width: 100%;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(8px);
}

.colour-palette__swatch-label {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  width: 4.5rem;
  font-size: var(--text-lg);
  text-align: center;
}

.colour-palette__caption {
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(0, 0, 0, 0.1) 100%);
  backdrop-filter: blur(4px);
}

.colour-palette__swatches-row--contrast .colour-palette__swatch {
  height: 3rem;
  width: auto;
  flex: 1;
  min-width: 4.5rem;
  max-width: 150px;
}

.colour-palette__swatches-labels--contrast {
  flex-direction: row;
  gap: clamp(38px, 3vw, 42px);
}

.colour-palette__swatches-labels--gradient {
  flex-direction: column;
  min-width: 10rem;
}

.colour-palette__swatch-label--contrast {
  min-width: 4.5rem;
  white-space: nowrap;
  padding-inline: 0.25rem;
}

.colour-palette__swatch-label--gradient {
  font-weight: 500;
  white-space: nowrap;
  padding-inline: 1rem;
}

.colour-palette__caption--with-description {
  flex-direction: column;
  flex: 1;
  min-width: fit-content;
  padding: 0.5rem 1.5rem;
}

.colour-palette__caption-title--contrast {
  font-weight: 400;
  letter-spacing: 0.1em;
  padding-top: 0.5rem;
}

.colour-palette__caption-description {
  color: #fff;
  letter-spacing: 0.1em;
  white-space: nowrap;
  font-size: 10px;
  margin-top: 0.25rem;
}

.colour-palette__palette-grid {
  padding: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 3.5rem;
  margin-inline: auto;
  margin-top: 3.5rem;
}

.colour-palette__palette-inner {
  background: #bdbdbd;
  padding-block: clamp(12px, 2vw, 20px);
  padding-inline: clamp(10px, 1.5vw, 15px);
  margin-top: 0.25rem;
}

.colour-palette__palette-cells {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.375rem;
}

.colour-palette__palette-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 5rem;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.colour-palette__caption-title {
  color: #fff;
  font-family: var(--font-primary);
  text-transform: uppercase;
  font-size: var(--text-2-3xl);
  font-weight: 400;
  text-align: center;
}

.colour-palette__palette-cell--span {
  grid-column: span 3 / span 3;
}

.colour-palette__palette-hex {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-family: "Inter", sans-serif;
}

.colour-palette__palette-name {
  text-align: center;
  font-weight: 700;
  font-size: 0.58rem;
  font-family: "Inter", sans-serif;
}

@media (min-width: 768px) {
  /* .colour-palette__header,
  .colour-palette__body {
    padding-inline: 2rem;
  } */

  .colour-palette__swatches,
  .colour-palette__swatches--contrast {
    flex-direction: row;
    justify-content: space-between;
    gap: 3rem;
    min-height: 200px;
    padding-top: 0;
  }

  .colour-palette__swatches-group {
    /* align-items: flex-start; */
    width: auto;
  }

  .colour-palette__swatches-row,
  .colour-palette__swatches-labels {
    width: auto;
    justify-content: flex-start;
  }

  .colour-palette__caption {
    width: 40%;
  }

  .colour-palette__caption--with-description {
    width: auto;
  }

  .colour-palette__palette-cell {
    height: 6rem;
  }
}

@media (min-width: 1024px) {
  .colour-palette__glow {
    display: block;
  }

  .colour-palette__palette-cells {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .colour-palette__palette-cell {
    height: 110px;
  }

  .colour-palette__palette-cell--span {
    grid-column: span 1 / span 1;
  }
}

/* disclosure box */
.disclosure-box {
  display: flex;
  gap: 1.3rem;
  /* background-color: #f3f3f3; */
  /* padding: 0.5rem; */
  padding-left: 0rem;
  padding-top: 1.3rem;
  /* margin-bottom: 0.5rem; */
}

.disclosure-icon {
  color: #632ffd;
  margin-top: 2px;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.disclosure-text {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-light);
}

.section-desc {
  /* margin-bottom: 2rem; */
  /* padding-left: 0.25rem; */
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-light);
  line-height: 1.625;
}

/* ============================================================
   SDS HERO SECTION — standalone custom CSS (no Tailwind)
   ------------------------------------------------------------
   Prefix:  .sdsh-   (verified: 0 collisions with your index.css)
   Fonts:   uses  --font-primary  (Boldonse)  and
                  --font-body     (Plus Jakarta Sans)
            which are already defined in your index.css :root.
            Fallbacks are included so this file also works alone.

   Responsive tiers (as requested):
     • base                        -> MOBILE
     • @media (min-width: 1024px)  -> DESKTOP   (≈1728px Figma frame;
                                       content capped at 1728px,
                                       fluid via clamp() up to there)
     • @media (min-width: 2100px)  -> ULTRAWIDE (≈2560px Figma frame;
                                       this is where the layout SWAPS,
                                       matching the old `4xl:` branch)

   NOTE: the 2100px switch point matches the breakpoint already used
   elsewhere in your codebase. Change it in the two media queries below
   if you want the swap to happen exactly at 2560px instead.
   ============================================================ */

/* ---------- ROOT SECTION ---------- */
.sdsh-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-bottom: 2.75rem;
  color: #fff;
  font-family: var(--font-body, "Plus Jakarta Sans", sans-serif);
}

/* ---------- BACKGROUND IMAGE ---------- */
.sdsh-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* next/image fill sets position/size inline; we only set fit + position */
.sdsh-bg-img {
  object-fit: cover;
  object-position: center;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  color: transparent;
}

/* ---------- WATERMARK ---------- */
.sdsh-watermark {
  position: relative;
  z-index: 1;
  top: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 2rem;
  padding-bottom: 1rem;
  pointer-events: none;
  user-select: none;
}

.sdsh-watermark-track {
  display: flex;
  white-space: nowrap;
}

.sdsh-watermark-text {
  font-weight: 900;
  line-height: 1;
  font-size: clamp(90px, 22vw, 310px);
  letter-spacing: -0.04em;
  padding-right: 0.3em;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- TOP ACCENT LINE (spacers) ---------- */
.sdsh-topline {
  position: relative;
  z-index: 8;
  width: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 28px 1rem 14px;
}

.sdsh-topline-spacer {
  flex-shrink: 0;
  width: 80px;
  opacity: 0;
  pointer-events: none;
}

.sdsh-topline-spacer--left {
  margin-right: 1rem;
}

.sdsh-topline-spacer--right {
  margin-left: 1rem;
}

/* ---------- TEXT CONTENT (default / non-ultrawide block) ---------- */
.sdsh-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sdsh-container {
  width: 100%;
  max-width: 1728px;
  /* your --container-max */
  margin-inline: auto;
  padding-inline: 1rem;
}

.sdsh-content-col {
  width: 100%;
}

.sdsh-content-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---------- BREADCRUMBS ---------- */
.sdsh-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0.025em;
}

.sdsh-crumb {
  display: flex;
  align-items: center;
}

.sdsh-crumb-sep {
  margin: 0 5px;
  color: #fff;
  font-size: 0.875rem;
}

.sdsh-crumb-link {
  font-weight: 400;
  color: var(--sdsh-crumb,
      #fff);
  /* --sdsh-crumb passed in only when crumb.crumbaccent exists */
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.sdsh-crumb-link:hover {
  opacity: 0.75;
}

.sdsh-crumb-text {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.52);
}

.sdsh-crumb-text.sdsh-crumb-accent {
  color: var(--sdsh-accent, #e91e8c);
}

/* ---------- HEADING ---------- */
.sdsh-heading {
  margin: 0;
  font-family: var(--font-primary, "Boldonse", system-ui);
  font-weight: 400;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.025em;
  border-top: 1px solid #99a1af;
  padding-top: 0.75rem;
  font-size: var(--text-2xl);
}

/* ---------- SUBHEADING ---------- */
.sdsh-subheading {
  margin: 0;
  line-height: 1.625;
  font-size: clamp(0.82rem, 1.1vw, 0.93rem);
  color: rgba(255, 255, 255, 0.5);
  max-width: 360px;
}

/* ---------- CTA ---------- */
.sdsh-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
  padding: 10px 1.5rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  background: var(--sdsh-accent, #e91e8c);
}

.kpi-card-title {
  font-size: var(--text-lg);
  font-family: var(--font-primary);
  position: relative;
  font-weight: 400;
  line-height: 1.25;
}

.kpi-card-desc {
  color: var(--color-text-grey-3);
  font-size: var(--text-lg);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.625;
  width: 90%;

  position: relative;
}

@media (min-width: 768px) {
  .kpi-card-desc {
    min-height: 8rem;
  }
}

/* ── Metrics grid ── */
.kpi-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  position: relative;
  margin-left: 2.3rem;
  /* aligns under card info, past the dot */
  margin-right: 2rem;
}

/* ── Single metric ── */
.kpi-metric {
  padding: 1.25rem;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 760px) {
  .kpi-metric {
    padding: 0.9rem;
  }
}

.kpi-metric-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  width: 100%;
}

.kpi-metric-label {
  font-size: var(--text-xl);
  font-weight: 700;
  /* medium */
}

.kpi-metric-badge {
  padding: 0.25rem 0.75rem;
  font-size: var(--text-base);
  font-weight: 400;
  font-family: var(--font-primary);
  color: #fff;
}

.kpi-metric-value {
  font-size: var(--text-2xl);
  font-weight: 400;
  font-family: var(--font-primary);
  margin-bottom: 0.25rem;
}

.kpi-metric-unit {
  font-size: 0.875rem;
  color: #acacac;
}

/*technical css*/
/* ===== Section / Container ===== */
.technical-section {
  background-color: #ffffff;
  width: 100%;
  padding-block: 30px;
}

.technical-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ===== Heading / Description grid ===== */
.technical-header-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: var(--section-spacing-xs);
}

@media (min-width: 768px) {
  .technical-header-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .technical-header-grid {
    align-items: center;
    justify-content: space-between;
  }
}

.technical-heading {
  font-size: var(--text-2-3xl);
  /* text-3xl */
  font-weight: 400;
  font-family: var(--font-primary);
  flex-shrink: 0;
  position: relative;
  line-height: 1.8;
}

@media (min-width: 1024px) {
  .technical-heading {
    max-width: 48rem;
    /* lg:max-w-xl */
  }
}

.technical-description-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-body);
  position: relative;
  color: var(--color-text-grey-3);
  font-size: var(--text-lg);
  font-weight: 400;
}

/* ===== Technology cards grid ===== */
.technical-tech-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .technical-tech-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.technical-tech-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.technical-tech-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border: 1px solid #e5e7eb;
  /* border-gray-200 */
  padding-left: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 1rem;
}

.technical-tech-marker {
  position: absolute;
  left: -8px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 0.3rem;
}

@media (min-width: 760px) {
  .technical-tech-marker {
    margin-top: 0.5rem;
  }
}

.technical-tech-title {
  font-size: var(--text-base);
  /* text-lg */
  font-family: var(--font-primary);
  font-weight: 400;
}

.technical-tech-description {
  word-break: break-word;
  overflow-wrap: break-word;
  color: var(--color-text-grey-3);
  line-height: 1.625;
  font-size: var(--text-lg);
  font-family: var(--font-body);
  font-weight: 400;
}

/* ===== Image section ===== */
.technical-image-wrap {
  display: none;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .technical-image-wrap {
    display: block;
  }
}

.technical-image-wrap img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/*Conclusion*/
/* ===== Section ===== */
.conclusion-section {
  background-color: #ffffff;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  /* padding-left: 1.25rem;
  padding-right: 1.25rem; */
}

@media (min-width: 1024px) {
  .conclusion-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* ===== Container ===== */
.conclusion-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Heading ===== */
/* .conclusion-heading {
  font-size: var(--text-2-3xl); 
  font-weight: 600;
  position: relative;
  font-family: var(--font-primary);
  padding-bottom: clamp(1rem, 1.8rem, 1.8rem);
  text-transform: uppercase;
  line-height: 1.1;
} */

/* ===== Description ===== */
.conclusion-description {
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: relative;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  /* text-sm */
}

@media (min-width: 760px) {
  .conclusion-description {
    padding-top: 0.5rem;

    padding-bottom: 0.8rem;
  }
}

/* ===== CTA box ===== */
.conclusion-cta-box {
  background-color: #05cafa;
  padding: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 1rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

@media (min-width: 760px) {
  .conclusion-cta-box {
    margin-bottom: clamp(1rem, 2vw, 3rem);
  }
}

@media (min-width: 1024px) {
  .conclusion-cta-box {
    justify-content: space-between;
  }
}

.conclusion-cta-heading {
  color: #ffffff;
  font-weight: 400;
  font-family: var(--font-primary);
  font-size: var(--text-2-3xl);
  /* text-3xl */
  text-align: center;
}

.conclusion-cta-button {
  padding: 1rem 6rem;
  background-color: #632fed;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: var(--text-xl);
  border-radius: 5rem;
  border: none;
  cursor: pointer;
}

@media (max-width: 760px) {
  .conclusion-cta-button {
    padding: 1rem 4rem;
  }
}

/*conclusion popup */
/* ===== Overlay ===== */
.popup-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  padding: 1rem;
}

@media (min-width: 768px) {
  .popup-overlay {
    padding: 2rem;
  }
}

/* ===== Panel ===== */
.popup-panel {
  position: relative;
  width: 100%;
  max-width: 860px;
  max-height: 100%;
  overflow-y: auto;
  padding: 1.5rem;
  background-color: rgba(255, 255, 255, 0.3);
  /* #FFFFFF4D */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(64px);
  backdrop-filter: blur(64px);
}

@media (min-width: 768px) {
  .popup-panel {
    padding: 3rem;
  }
}

@media (min-width: 1024px) {
  .popup-panel {
    padding: 80px;
  }
}

/* ===== Header ===== */
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.popup-heading {
  color: #ffffff;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  max-width: 600px;
}

@media (min-width: 768px) {
  .popup-heading {
    line-height: 68px;
  }
}

@media (min-width: 1024px) {
  .popup-heading {
    font-size: 58px;
  }
}

.popup-close-btn {
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.popup-close-btn:hover {
  background-color: #e5e7eb;
}

@media (min-width: 768px) {
  .popup-close-btn {
    width: 60px;
    height: 60px;
  }
}

/* ===== Success state ===== */
.popup-success {
  margin-top: 2rem;
  padding: 40px;
  background-color: #424242;
  color: #ffffff;
  text-align: center;
}

.popup-success-title {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.popup-success-msg {
  font-size: 1.125rem;
  color: #d1d5db;
}

/* ===== Form ===== */
.popup-form {
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  background-color: #424242;
}

@media (min-width: 768px) {
  .popup-form {
    padding: 30px 40px;
  }
}

.popup-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1.5rem;
  row-gap: 2rem;
}

@media (min-width: 768px) {
  .popup-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== Fields (shared by input / textarea / budget) ===== */
.popup-field {
  position: relative;
  grid-column: span 1 / span 1;
}

.popup-field--span2 {
  grid-column: span 1 / span 1;
}

@media (min-width: 768px) {
  .popup-field--span2 {
    grid-column: span 2 / span 2;
  }
}

.popup-label {
  position: absolute;
  left: 12px;
  transition: all 0.2s ease;
  pointer-events: none;
  line-height: 1;
}

.popup-label--zindex {
  z-index: 1;
}

/* ===== Input ===== */
.popup-input {
  width: 100%;
  padding-top: 1.25rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  background-color: transparent;
  font-size: 18px;
  color: #ffffff;
  border: none;
  border-bottom: 1px solid;
  /* color set inline */
}

.popup-input:focus {
  outline: none;
}

@media (min-width: 768px) {
  .popup-input {
    font-size: 20px;
  }
}

/* ===== Textarea ===== */
.popup-textarea {
  width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  background-color: transparent;
  font-size: 18px;
  color: #ffffff;
  border: none;
  border-bottom: 1px solid #ffffff;
  height: 6rem;
  resize: none;
}

.popup-textarea:focus {
  outline: none;
}

@media (min-width: 768px) {
  .popup-textarea {
    font-size: 20px;
  }
}

/* ===== Error text ===== */
.popup-error {
  color: #f87171;
  font-size: 11px;
  margin-top: 4px;
  padding-left: 12px;
}

/* ===== Budget dropdown ===== */
.popup-budget-trigger {
  width: 100%;
  padding-top: 1.25rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  background-color: transparent;
  font-size: 18px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

@media (min-width: 768px) {
  .popup-budget-trigger {
    font-size: 20px;
  }
}

.popup-budget-arrow {
  transition: transform 0.2s;
  flex-shrink: 0;
}

.popup-budget-options {
  position: absolute;
  left: 0;
  width: 100%;
  background-color: #424242;
  margin-top: 0.5rem;
  max-height: 15rem;
  overflow-y: auto;
  z-index: 50;
  border: 1px solid rgba(255, 255, 255, 0.35);
  /* #ffffff59 */
}

.popup-budget-option {
  padding: 0.75rem;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.popup-budget-option:hover {
  background-color: #4b5563;
}

/* ===== Submit button ===== */
.popup-submit-btn {
  margin-top: 1.5rem;
  width: 100%;
  color: #ffffff;
  padding: 12px 40px;
  font-size: 18px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.popup-submit-btn:hover {
  opacity: 0.9;
}

.popup-submit-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (min-width: 768px) {
  .popup-submit-btn {
    font-size: 20px;
  }
}

/*country select*/
/* ===== Wrapper ===== */
.country-select {
  position: relative;
  width: 100%;
}

/* ===== Trigger (selected value row) ===== */
.country-select-trigger {
  padding: 0.75rem;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.country-select-current {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.country-select-current img {
  display: block;
}

.country-select-placeholder {
  color: #9ca3af;
  /* text-gray-400 */
}

.country-select-arrow {
  transition: transform 0.2s;
  flex-shrink: 0;
}

/* ===== Dropdown list ===== */
.country-select-options {
  position: absolute;
  left: 0;
  width: 100%;
  background-color: #424242;
  margin-top: 0.5rem;
  max-height: 15rem;
  overflow-y: auto;
  z-index: 50;
  border: 1px solid rgba(255, 255, 255, 0.35);
  /* #ffffff59 */
}

.country-select-option {
  padding: 0.75rem;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.2s ease;
}

.country-select-option:hover {
  background-color: #4b5563;
  /* gray-600 */
}

.country-select-option img {
  display: block;
}

/*landing page*/
/* ===== Section / Container ===== */
.landing-section {
  background-color: #ffffff;
  width: 100%;
  padding-block: 30px;
}

.landing-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 3.5rem;
  /* pb-14 */
}

@media (min-width: 768px) {
  .landing-container {
    padding-top: 1rem;
    padding-bottom: 5rem;
    /* md:pb-20 */
  }
}

/* ===== Top row (heading + description) ===== */
.landing-top-row {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 760px) {
  .landing-top-row {
    flex-direction: row;
    justify-content: space-between;

    align-items: center;
  }
}

.landing-heading {
  font-size: var(--text-2-3xl);
  /* text-4xl */
  font-weight: 1000;
  font-family: var(--font-primary);
  letter-spacing: -0.025em;
  color: #000000;
  flex-shrink: 0;
  line-height: 1.1;
}

.landing-description {
  color: #979797;
  font-size: var(--text-lg);
  /* text-sm */
  line-height: 1.625;
  font-family: var(--font-body);
}

/* ===== Hero image ===== */
.landing-hero-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.landing-hero-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ===== Preview images grid ===== */
.landing-preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .landing-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.landing-preview-card {
  width: 100%;
  overflow: hidden;
  background-color: #f3f3f3;
  position: relative;
  padding: 1.5rem;
}

.landing-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*w3uiux*/
/* ===== Section / Container ===== */
.w3uiux-section {
  background-color: #ffffff;
  width: 100%;
  padding-block: 30px;
}

.w3uiux-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 3rem;
  /* py-12 */
  padding-bottom: 3rem;
}

/* ===== Top row: heading + description ===== */
.w3uiux-top-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .w3uiux-top-row {
    flex-direction: row;
    align-items: center;
  }
}

.w3uiux-heading {
  font-size: 3rem;
  /* text-5xl */
  font-weight: 1000;
  letter-spacing: -0.025em;
  color: #000000;
  line-height: 1.1;
  position: relative;
}

@media (min-width: 768px) {
  .w3uiux-heading {
    font-size: 3.75rem;
    /* md:text-6xl */
  }
}

@media (min-width: 1024px) {
  .w3uiux-heading {
    font-size: 4.5rem;
    /* lg:text-7xl */
  }
}

.w3uiux-description {
  color: var(--color-text-grey-3);
  font-size: var(--text-lg);
  /* text-sm */
  line-height: 1.625;
  max-width: 32rem;
  /* max-w-lg */
  text-align: left;
  position: relative;
}

@media (min-width: 768px) {
  .w3uiux-description {
    text-align: left;
  }
}

/* ===== Panel ===== */
.w3uiux-panel {
  background-color: #f3f3f3;
  padding: 1.25rem;
  /* p-5 */
  position: relative;
}

@media (min-width: 768px) {
  .w3uiux-panel {
    padding: 2.75rem;
    /* md:p-11 */
  }
}

.w3uiux-panel-title {
  font-size: var(--text-1xl);
  /* text-4xl */
  font-weight: 700;
  font-family: var(--font-primary);
  color: #000000;
  margin-bottom: 1.3rem;
}

@media (min-width: 760px) {
  .w3uiux-panel-title {
    margin-bottom: var(--section-spacing-xs);
  }
}

/* ===== Large screen image (hidden below md, visible from md up) ===== */
.w3uiux-large-screen {
  display: none;
}

@media (min-width: 768px) {
  .w3uiux-large-screen {
    display: block;
  }
}

.w3uiux-large-screen img {
  width: 100%;
  display: block;
}

/* ===== Widgets grid (visible below sm, hidden from sm up — matches original sm:hidden) ===== */
.w3uiux-widgets-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .w3uiux-widgets-grid {
    display: none;
  }
}

.w3uiux-widget-col {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  /* gap-16 */
}

.w3uiux-widgets-grid img {
  width: 100%;
  display: block;
}

/* ==================== CLIENT DETAILS SECTION ==================== */
.client-details-section {
  background: var(--color-body1);
  padding: var(--section-spacing-client-details) 0;
  min-height: 420px;
  /* ← Minimum height guarantee */
  position: relative;
  overflow: hidden;
}

.client-details-section,
.pain-solutions-section {
  position: relative;
}

.client-top-bar {
  position: relative;
  z-index: 2;
}

.client-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
  position: relative;
  z-index: 2;
}

.client-col {
  position: relative;
  padding-left: 0.3rem;
}

.client-section-heading {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-accent-black);
  display: flex;
  align-items: center;
  /* gap: 0.75rem; */
  margin-bottom: 1rem;
}

.bullet {
  font-size: 1.35rem;
  line-height: 1;
}

.client-content {
  padding-left: 1.25rem;
}

.client-list-item {
  font-size: var(--text-lg);
  color: var(--color-text-grey-3);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.list-dot {
  color: var(--color-text-grey-3);
  margin-top: 0.2em;
}

/* Button */
.client-button-wrapper {
  margin-top: var(--section-spacing-xs);
  display: flex;
  justify-content: center;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(4px);
}

.client-visit-btn {
  color: white;
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 0.85rem 2.25rem;
  border-radius: 9999px;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.client-visit-btn:hover {
  opacity: 0.9;
}

/* ==================== FULL HEIGHT GRID LINES ==================== */

.colour-palette__palette-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 5rem;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.colour-palette__palette-cell--span {
  grid-column: span 3 / span 3;
}

.colour-palette__palette-hex {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-family: "Inter", sans-serif;
}

.colour-palette__palette-name {
  text-align: center;
  font-weight: 700;
  font-family: "Inter", sans-serif;
}

@media (min-width: 768px) {

  .colour-palette__swatches,
  .colour-palette__swatches--contrast {
    flex-direction: row;
    justify-content: space-between;
    gap: 3rem;
    min-height: 200px;
    padding-top: 0;
  }

  .client-grid-lines {
    position: absolute;
    inset: 0;
    left: 50%;
    width: 100%;
    max-width: var(--container-max);
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    pointer-events: none;
    transform: translateX(-50%);
    z-index: 1;
    height: 100%;
  }

  .client-grid-lines span {
    height: 100%;
    border-left: 1px solid var(--color-border-light);
  }

  .client-grid-lines span:last-child {
    border-right: 1px solid var(--color-border-light);
  }

  /* ==================== PAIN POINTS + SOLUTIONS SECTION ==================== */

  .colour-palette__palette-cell--span {
    grid-column: span 1 / span 1;
  }
}

/* ==================== RESPONSIVE ==================== */
/* ==================== MOBILE - Reduce to 3 lines ==================== */
@media (max-width: 767px) {
  .client-grid-lines {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .relevant-blogs__header {
    margin-block: var(--section-spacing-3xl) 58px;
  }

  .client-details-section {
    padding-block: 44px 80px;
  }

  .client-grid {
    gap: 0.75rem;
  }
}

/* Large screens keep full 4 lines */
@media (min-width: 768px) {
  .client-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
  }

  .colour-palette__palette-cell {
    height: 6rem;
  }

  .colour-palette__palette-hex {
    font-size: var(--text-base);
  }

  .colour-palette__palette-name {
    font-size: var(--text-md);
  }
}

@media (min-width: 2100px) {
  .client-grid-lines span {
    border-left: 1px solid var(--color-border-light);
  }
}

.faq-section .section-header.centered {
  padding-top: var(--section-spacing-xl);
  padding-bottom: var(--section-spacing-md);
}

/* typography section (Typography / IconStyle / Illustration) */
.typography-section {
  width: 100%;
  position: relative;
  overflow-x: hidden;
}

.typography-section__glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.typography-section__glow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
  opacity: 0.7;
}

.typography-section__glow--center {
  top: 0%;
  width: clamp(900px, 150vw, 2000px);
  height: 80%;
}

.typography-section__glow--top {
  top: -30%;
  width: clamp(800px, 100vw, 2000px);
  height: 60%;
}

.typography-section__glow--bottom {
  top: -10%;
  width: clamp(800px, 100vw, 2000px);
  height: 90%;
}

.typography-section__glow--bottom img {
  object-position: bottom;
}

.typography-section__vlines {
  --vlines-color: var(--color-border-dark);
  --vlines-z: 1;
}

.typography-section__content {
  position: relative;
  z-index: 2;
  padding-block: var(--section-spacing-xs);
}

.typography-section__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: var(--section-spacing-rem-md);
}

.typography-section__header-left {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
}

.typography-section__number {
  color: #fff;
  font-weight: 400;
  line-height: 1;
  font-size: var(--text-5xl);
  letter-spacing: -0.03em;
  font-family: var(--font-primary);
  margin-right: clamp(8px, 1vw, 12px);
}

.typography-section__number-dot {
  flex-shrink: 0;
  display: flex;
  align-self: flex-end;
  margin-bottom: 0.25rem;
  rotate: 45deg;
  width: clamp(20px, 3vw, 32px);
  height: clamp(20px, 3vw, 32px);
}

.typography-section__title {
  display: block;
  width: 100%;
  font-size: var(--text-4-5xl);
  line-height: 100%;
  letter-spacing: 0;
  -webkit-text-stroke: 2px #fff;
  color: transparent;
}

@media (min-width: 768px) {
  .typography-section__header {
    flex-direction: row;
    align-items: flex-end;
  }

  .typography-section__header-left {
    align-self: flex-end;
  }

  .typography-section__title {
    display: flex;
    width: auto;
    align-self: flex-end;
  }

  .typography-section__inner {
    max-width: 1124px;
    margin-inline: auto;
  }
}

.typography-section__inner {
  width: 100%;
}

.typography-section__logo {
  position: relative;
  width: 100%;
  margin-bottom: 2.5rem;
  overflow: hidden;
}

.typography-section__logo-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 2vw, 40px) 0;
}

.typography-section__logo-inner img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.typography-section__row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-block: clamp(28px, 2vw, 40px);
  flex-wrap: wrap;
}

.typography-section__row_w3 {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-block: clamp(28px, 2vw, 40px);
  flex-wrap: wrap;
}

.typography-section__readability {
  font-family: var(--font-primary);
  font-weight: 900;
  color: #fff;
  line-height: 1.9;
  text-transform: uppercase;
  white-space: pre-line;
  font-size: var(--text-3-4xl);
}

.typography-section__divider {
  width: 1px;
  align-self: stretch;
  background-color: #fff;
}

.typography-section__fonts {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.typography-section__fonts--row {
  flex-direction: row;
  align-items: center;
}

.typography-section__font {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.25rem;
}

.typography-section__font-label {
  color: #fff;
  font-size: var(--text-2-3xl);
}

.typography-section__font-name {
  font-weight: 600;
  font-size: var(--text-3xl);
  border-top: 1px solid #fff;
  padding-top: 0.25rem;
  max-width: 177px;
}

.typography-section__font-name_w3 {
  font-weight: 600;
  font-size: var(--text-3xl);
  border-top: 1px solid #fff;
  padding-top: 0.25rem;
}

.typography-section__font-image {
  display: flex;
  align-items: center;
  flex: 1;
}

.typography-section__font-image img {
  width: 100%;
  height: auto;
  max-height: 15.5rem;
  object-fit: contain;
}

.typography-section__weights {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.typography-section__weight-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 2px;
  position: relative;
  padding: 0 1rem 1rem;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(0, 0, 0, 0.22) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 0.65px dashed #a0a0a0;
}

.typography-section__weight-badge {
  align-self: flex-start;
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 400;
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  letter-spacing: 0.02em;
}

.typography-section__weight-label {
  color: #fff;
  font-size: var(--text-1xl);
  letter-spacing: 0.02em;
  padding: 8px 0;
}

.typography-section__weight-sample {
  margin-top: auto;
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--text-base);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .typography-section__row {
    gap: 9rem;
  }

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

@media (min-width: 1024px) {
  .typography-section__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1124px;
    margin-inline: auto;
    column-gap: 0;
    gap: 0;
  }

  .typography-section__row_w3 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-inline: auto;
    column-gap: 0;
    gap: 0;
  }

  .typography-section__readability {
    grid-row: 1;
    grid-column: 2 / span 2;
    justify-self: start;
    align-self: center;
    text-align: left;
    width: 100%;
  }

  .typography-section__divider {
    grid-row: 1;
    grid-column-start: 3;
    justify-self: start;
  }

  .typography-section__fonts {
    grid-row: 1;
    grid-column: 3 / 5;
    padding-left: 1.5rem;
  }

  .typography-section__fonts_w3 {
    /* grid-row: 1; */
    /* grid-column: 3 / 5; */
    padding-left: rem;
    padding-right: 1.2rem;
  }

  .typography-section__font-image {
    grid-row: 1;
    grid-column: 4 / 5;
    padding-left: 1rem;
  }

  .typography-section__weights {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .typography-section__row--left .typography-section__divider {
    grid-column-start: 1;
  }

  .typography-section__row--left .typography-section__fonts {
    grid-column: 1 / 3;
    padding-left: 0;
  }

  .typography-section__row--left .typography-section__font-image {
    grid-column: 2 / 3;
  }
}

/* icon style section */
.icon-style {
  position: relative;
}

.icon-style__vlines {
  --vlines-color: var(--color-border-dark);
  --vlines-z: 1;
}

.icon-style__content {
  position: relative;
  z-index: 2;
  padding-top: var(--section-spacing-xs);
}

.icon-style__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;

  margin-bottom: var(--section-spacing-rem-md);
}

.icon-style__header-left {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
}

.icon-style__number {
  color: #fff;
  font-weight: 400;
  line-height: 1;
  font-size: var(--text-5xl);
  letter-spacing: -0.03em;
  margin-right: clamp(8px, 1vw, 12px);
  font-family: var(--font-primary);
}

.icon-style__number-dot {
  flex-shrink: 0;
  display: flex;
  align-self: flex-end;
  margin-bottom: 0.25rem;
  rotate: 45deg;
  width: clamp(20px, 3vw, 32px);
  height: clamp(20px, 3vw, 32px);
}

.icon-style__title {
  display: block;
  width: 100%;
  font-size: var(--text-4-5xl);
  line-height: 100%;
  letter-spacing: 0;
  -webkit-text-stroke: 2px #fff;
  color: transparent;
}

/* Button */
.client-button-wrapper {
  margin-top: var(--section-spacing-xs);
  display: flex;
  justify-content: center;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(4px);
}

@media (min-width: 768px) {
  .icon-style__header {
    flex-direction: row;
    align-items: flex-end;
  }

  .icon-style__header-left {
    align-self: flex-end;
  }

  .icon-style__title {
    display: flex;
    width: auto;
    align-self: flex-end;
  }
}

.icon-style__body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1124px;
  margin-inline: auto;
  padding: 2.5rem 0 0;
}

.icon-style__body .icon-style__row:nth-child(3),
.icon-style__body .icon-style__row:nth-child(4) {
  margin-bottom: clamp(28px, 1.5vw, 40px);
}

/* ==================== FULL HEIGHT GRID LINES ==================== */
.client-grid-lines {
  position: absolute;
  inset: 0;
  /* Full height of the section */
  left: 50%;
  width: 100%;
  max-width: var(--container-max);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* gap: 0.375rem; */
}

.icon-style__row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  /* padding-inline: 0.5rem; */
}

.icon-style__row--left {
  justify-content: center;
}

.icon-style__row--center {
  justify-content: center;
  /* padding-bottom: clamp(28px, 1.5vw, 40px); */
}

.icon-style__row--right {
  justify-content: center;
}

.icon-style__icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .icon-style__row--left {
    justify-content: flex-start;
  }

  /* ==================== PAIN POINTS + SOLUTIONS SECTION ==================== */

  .icon-style__row--right {
    justify-content: flex-end;
  }
}

/* illustration section */
.illustration-section {
  position: relative;
  z-index: 1;
}

.illustration-section__glow {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  width: 600px;
  height: 300px;
  filter: blur(325px);
}

.illustration-section__vlines {
  --vlines-color: var(--color-border-dark);
  --vlines-z: 1;
}

.illustration-section__content {
  position: relative;
  z-index: 2;
  padding-top: clamp(28px, 3vw, 40px);
  padding-bottom: clamp(40px, 5vw, 80px);
}

.illustration-section__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: var(--section-spacing-rem-md);
}

.illustration-section__header-left {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
}

.illustration-section__number {
  color: #fff;
  font-weight: 400;
  line-height: 1;
  font-size: var(--text-5xl);
  letter-spacing: -0.03em;
  font-family: var(--font-primary);
  margin-right: clamp(8px, 1vw, 12px);
}

.illustration-section__number-dot {
  flex-shrink: 0;
  display: flex;
  align-self: flex-end;
  margin-bottom: 0.25rem;
  rotate: 45deg;
  width: clamp(20px, 3vw, 32px);
  height: clamp(20px, 3vw, 32px);
}

.illustration-section__title {
  display: block;
  width: 100%;
  font-size: var(--text-4-5xl);
  line-height: 100%;
  letter-spacing: 0;
  -webkit-text-stroke: 2px #fff;
  color: transparent;
}

@media (min-width: 768px) {
  .illustration-section__header {
    flex-direction: row;
    align-items: flex-end;
  }

  .illustration-section__header-left {
    align-self: flex-end;
  }

  .illustration-section__title {
    display: flex;
    width: auto;
    align-self: flex-end;
    font-size: var(--text-5-6xl);
  }
}

.illustration-section__media {
  width: 100%;
  max-width: 1124px;
  margin-inline: auto;
  overflow: hidden;
  background: #000;
}

.illustration-section__media--image {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: transparent;
}

.illustration-section__media--image img {
  height: auto;
  object-fit: contain;
}

.illustration-section__video {
  width: 100%;
  height: auto;
}

/* Larger diamond for Pain Points / Solutions section */
.pain-heading-wrapper .diamond-bullet,
.solution-heading-wrapper .diamond-bullet {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  margin-right: 14px;
}

/* White version for Solutions box */
.solution-heading-wrapper .diamond-bullet {
  background-color: white;
}

.journey-item-heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-1xl);
  color: var(--color-text-light);
  margin-bottom: 0.8rem;
}

.journey-item-desc {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-light);
  padding-bottom: clamp(1rem, 3vw, 2rem);
}

/* disclosure box */
.disclosure-box {
  display: flex;
  gap: 1.3rem;
  /* background-color: #f3f3f3; */
  /* padding: 0.5rem; */
  padding-left: 0rem;
  padding-top: 1.3rem;
  /* margin-bottom: 0.5rem; */
}

.disclosure-icon {
  color: #632ffd;
  margin-top: 2px;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.disclosure-text {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--color-text-light);
}

.section-desc {
  /* margin-bottom: 2rem; */
  /* padding-left: 0.25rem; */
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-light);
  line-height: 1.625;
}

/* ============================================================
   SDS HERO SECTION — standalone custom CSS (no Tailwind)
   ------------------------------------------------------------
   Prefix:  .sdsh-   (verified: 0 collisions with your index.css)
   Fonts:   uses  --font-primary  (Boldonse)  and
                  --font-body     (Plus Jakarta Sans)
            which are already defined in your index.css :root.
            Fallbacks are included so this file also works alone.

   Responsive tiers (as requested):
     • base                        -> MOBILE
     • @media (min-width: 1024px)  -> DESKTOP   (≈1728px Figma frame;
                                       content capped at 1728px,
                                       fluid via clamp() up to there)
     • @media (min-width: 2100px)  -> ULTRAWIDE (≈2560px Figma frame;
                                       this is where the layout SWAPS,
                                       matching the old `4xl:` branch)

   NOTE: the 2100px switch point matches the breakpoint already used
   elsewhere in your codebase. Change it in the two media queries below
   if you want the swap to happen exactly at 2560px instead.
   ============================================================ */

/* ---------- ROOT SECTION ---------- */
.sdsh-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-bottom: 2.75rem;
  color: #fff;
  font-family: var(--font-body, "Plus Jakarta Sans", sans-serif);
}

/* ==================== OVERVIEW SECTION ==================== */
.overview-section {
  background: var(--color-body1);
  padding: 60px 0 30px 0;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .overview-section {
    padding: 40px 0;
  }

  .pain-solutions-section {
    padding-bottom: 40px;
  }
}

/* Header */
.overview-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: var(--section-spacing-rem-xl);
  position: relative;
  z-index: 2;
}

@media (min-width: 1024px) {
  .overview-header {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
  }
}

.overview-title-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 0.5rem;
}

.overview-title-wrapper .diamond-bullet,
.services-header .diamond-bullet,
.decision-header .diamond-bullet {
  width: var(--text-2xl);
  height: var(--text-2xl);
  margin-top: 3px;
  margin-right: 14px;
}

.overview-title {
  font-family: var(--font-primary);
  font-size: var(--text-3-4xl);
  line-height: 1.1;
  color: var(--color-accent-black);
  margin: 0;
  font-weight: 400;
}

.overview-text {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--color-text-grey-3);
  max-width: 780px;
}

/* Grid Lines */
.overview-grid-lines {
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100%;
  max-width: var(--container-max);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  pointer-events: none;
  transform: translateX(-50%);
  z-index: 1;
  height: 100%;
}

.overview-grid-lines span {
  height: 100%;
  border-left: 1px solid var(--color-border-light);
}

.overview-grid-lines span:last-child {
  border-right: 1px solid var(--color-border-light);
}

@media (max-width: 767px) {
  .overview-grid-lines {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .overview-grid-lines span:nth-child(4) {
    display: none;
  }

  .overview-section-col.wide {
    grid-column: span 1;
  }

  .overview-title-wrapper .diamond-bullet,
  .services-header .diamond-bullet,
  .decision-header .diamond-bullet {
    width: var(--text-xl);
    height: var(--text-xl);
    margin-top: 3px;
    margin-right: 8px;
  }
}

/* Header */
.services-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2.5rem;
  padding-left: 0.5rem;
}

.services-title {
  font-family: var(--font-primary);
  font-size: var(--text-2-3xl);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-accent-black);
  margin: 0;
  z-index: 2;
}

/* Grid Lines */
.services-grid-lines {
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100%;
  max-width: var(--container-max);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  pointer-events: none;
  transform: translateX(-50%);
  z-index: 1;
  height: 100%;
}

.services-grid-lines span {
  height: 100%;
  border-left: 1px solid var(--color-border-light);
}

.services-grid-lines span:last-child {
  border-right: 1px solid var(--color-border-light);
}

@media (max-width: 767px) {
  .overview-header {
    margin-bottom: var(--section-spacing-md);
  }

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

  .services-grid-lines span:nth-child(4) {
    display: none;
  }

  .overview-sections {
    gap: 0;
    padding-left: 0.3rem;
  }

  .section-heading {
    height: auto;
    margin-bottom: 0.75rem;
  }

  .overview-section-col {
    padding-bottom: 1.25rem;
  }
}

/* Sections Container */
.overview-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .overview-sections {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .overview-sections {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding-left: 0.5rem;
  }
}

.overview-section-col {
  position: relative;
  padding-bottom: 2rem;
}

@media (min-width: 1024px) {
  .overview-section-col {
    padding-bottom: 0;
    padding-right: 3rem;
    /* border-right: 1px solid var(--color-border-light); */
    flex: 1;
  }

  .overview-section-col:last-child {
    border-right: none;
    padding-right: 0;
  }

  .overview-section-col.wide {
    /* flex: 1.35; */
    grid-column: span 2;
  }
}

/* Section Heading */
.section-heading {
  display: flex;
  align-items: start;
  gap: 12px;
  margin-bottom: 1.75rem;
  min-height: 54px;
}

.section-title {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-accent-black);
  margin: 0;
}

/* Items */
.section-items {
  margin-left: 1.75rem;
  display: flex;
  flex-direction: column;
  /* flex-wrap: wrap; */
  list-style: none;
  /* padding: 0;
  margin: 0; */

  /* CRITICAL: This ensures equal horizontal and vertical spacing */
  gap: 0.75rem;
}

.section-items.two-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 2rem;
}

@media (min-width: 1024px) {
  .section-items.two-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

.section-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.25rem 0;
}

.section-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.item-name {
  font-size: var(--text-lg);
  color: var(--color-text-grey-3);
  line-height: 1.5;
}

/* ==================== SERVICES SECTION ==================== */
.services-section {
  background: var(--color-body1);
  padding: var(--section-spacing-2xs) 0;
  position: relative;
  overflow: hidden;
}

.conclusion-section,
.uiux-section {
  padding-block: var(--section-spacing-2xs);
}

@media (min-width: 1024px) {
  .services-section {
    padding: var(--section-spacing-xs) 0;
  }

  .w3uiux-section,
  .landing-section,
  .main-modules-inner,
  .so-section,
  .kpi-section,
  .dev-section,
  .technical-section,
  .conclusion-section,
  .uiux-section {
    padding-block: var(--section-spacing-xs);
  }
}

@media (min-width: 2100px) {
  .services-section {
    padding: var(--section-spacing-lg) 0;
  }

  .w3uiux-section,
  .landing-section,
  .main-modules-inner,
  .so-section,
  .kpi-section,
  .dev-section,
  .technical-section,
  .conclusion-section,
  .uiux-section {
    padding-block: var(--section-spacing-lg);
  }
}

/* Header */
.services-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2.5rem;
  padding-left: 0.5rem;
}

.services-title {
  font-family: var(--font-primary);
  font-size: var(--text-3-4xl);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-accent-black);
  margin: 0;
  z-index: 2;
}

/* Grid Lines */
.services-grid-lines {
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100%;
  max-width: var(--container-max);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  pointer-events: none;
  transform: translateX(-50%);
  z-index: 1;
  height: 100%;
}

.services-grid-lines span {
  height: 100%;
  border-left: 1px solid var(--color-border-light);
}

.services-grid-lines span:last-child {
  border-right: 1px solid var(--color-border-light);
}

@media (max-width: 767px) {
  .overview-header {
    margin-bottom: var(--section-spacing-md);
  }

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

  .services-grid-lines span:nth-child(4) {
    display: none;
  }

  .overview-sections {
    gap: 0;
    padding-left: 0.3rem;
  }

  .section-heading {
    height: auto;
    margin-bottom: 0.75rem;
  }

  .overview-section-col {
    padding-bottom: 1.25rem;
  }
}

/* Blue Banner */
.services-banner {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

@media (min-width: 1024px) {
  .services-banner {
    flex-direction: row;
  }
}

/* Left - Description */
.services-description {
  padding: var(--section-spacing-xs) 2rem;
  flex: 1;
}

.services-description p {
  color: white;
  font-size: var(--text-lg);
  line-height: 1.75;
  max-width: 85%;
}

/* Right - Services List */
.services-list {
  padding: var(--section-spacing-xs) 2rem;
  flex: 1;
  display: flex;
  align-items: center;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 640px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .services-list {
    padding: var(--section-spacing-md);
  }

  .services-description {
    padding: var(--section-spacing-md) 1.25rem 0 1.25rem;
  }

  .services-grid {
    gap: 0.75rem;
  }
}

/* Service Pills */
.service-pill {
  background: white;
  color: var(--color-accent-black);
  font-weight: 700;
  font-size: var(--text-lg);
  padding: 1rem 1.5rem;
  text-align: center;
  transition: transform 0.2s ease;
}

.service-pill:hover {
  transform: translateY(-2px);
}

/* Responsive Adjustments */
@media (min-width: 1024px) {
  .services-description {
    padding: 3.5rem 2.5rem;
  }

  .services-list {
    padding: var(--section-spacing-xs);
  }
}

/* ==================== DECISION SECTION ==================== */
.decision-section {
  background: var(--color-body1);
  padding: var(--section-spacing-2xs) 0;
  position: relative;
}

@media (min-width: 1024px) {
  .decision-section {
    padding: var(--section-spacing-xs) 0;
  }
}

/* Blue Top & Bottom Borders */
.decision-top-border,
.decision-bottom-border {
  height: 4px;
  background: linear-gradient(to right, #1a56db, #3b82f6);
  width: 100%;
  margin-bottom: 2rem;
}

.decision-bottom-border {
  margin-top: 3rem;
  margin-bottom: 0;
}

/* Header */
.decision-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--section-spacing-xs);
  padding-left: 0.5rem;
}

.diamond-bullet {
  display: inline-block;
  width: var(--text-sm);
  height: var(--text-sm);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-top: 4px;
}

.main-modules-heading,
.so-heading {
  margin-bottom: 1rem;
  line-height: 1.6;
  font-family: var(--font-primary);
  font-size: var(--text-3-4xl);
  font-weight: 400;

  color: var(--color-accent-black);
  /* text-transform: uppercase; */

  z-index: 2;
  position: relative;
}

.decision-title,
.kpi-main-title,
.conclusion-heading {
  font-family: var(--font-primary);
  font-size: var(--text-3-4xl);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-accent-black);
  /* text-transform: uppercase; */
  margin: 0;
  z-index: 2;
  position: relative;
}

/* Content */

.decision-content p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-grey-3);
}

/* Responsive */
@media (min-width: 1024px) {
  .decision-content p {
    font-size: var(--text-lg);
  }
}

/* ==================== APP SHOWCASE SECTION WITH GRID LINES ==================== */
.app-showcase-section {
  background: var(--color-body1);
  padding: var(--section-spacing-2xs) 0;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .app-showcase-section {
    padding: var(--section-spacing-xs) 0;
  }
}

/* Grid Lines - Full height & aligned */
.app-showcase-grid-lines {
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100%;
  max-width: var(--container-max);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  pointer-events: none;
  transform: translateX(-50%);
  z-index: 1;
  height: 100%;
}

.app-showcase-grid-lines span {
  height: 100%;
  border-left: 1px solid var(--color-border-light);
}

.app-showcase-grid-lines span:last-child {
  border-right: 1px solid var(--color-border-light);
}

@media (max-width: 767px) {
  .app-showcase-grid-lines {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app-showcase-grid-lines span:nth-child(4) {
    display: none;
  }
}

/* Rest of your styles (unchanged) */
.app-showcase-title {
  font-family: var(--font-primary);
  font-size: var(--text-3-4xl);
  font-weight: 400;
  line-height: 1.1;
  position: relative;
  color: var(--color-accent-black);
  margin-bottom: 3rem;
  z-index: 2;
  position: relative;
}

.app-showcase-main-row {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .app-showcase-main-row {
    flex-direction: row;
    gap: 3rem;
  }
}

.app-showcase-main-row.reverse {
  flex-direction: column-reverse;
}

@media (min-width: 768px) {
  .app-showcase-main-row.reverse {
    flex-direction: row-reverse;
  }
}

/* Hero */
.app-showcase-hero {
  width: 100%;
  /* w-full */
  display: flex;
  /* flex */
  align-items: flex-start;
  /* items-start */
  justify-content: flex-start;
  /* justify-start */
  overflow: hidden;
  /* overflow-hidden */
  padding-bottom: 1.5rem;
  /* pb-6 (24px) */
  padding-right: 1.5rem;
}

.reverse .app-showcase-hero {
  padding-left: 1.5rem;
  padding-right: 0;
}

@media (min-width: 768px) {
  .app-showcase-hero {
    width: 40%;
    /* md:w-[40%] */
  }
}

.app-showcase-hero-image {
  width: 100%;
  /* w-full */
  height: 100%;
  /* h-full */
  object-fit: contain;
}

/* Right Column */
.app-showcase-right-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.app-showcase-description {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--color-text-grey-3);
}

/* 3 Small Screens */
.app-showcase-side-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.app-showcase-side-item {
  padding: 0.75rem;
  background: #f8f8f8;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-showcase-side-image {
  width: 100%;
  height: auto;
  /* max-height: 320px; */
  object-fit: contain;
}

/* Bottom Grid */
.app-showcase-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 4rem;
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .app-showcase-bottom-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {

  .app-showcase-title,
  .decision-title {
    line-height: 1.6;
  }
}

.app-showcase-bottom-item {
  padding: 1rem;
  background: #f8f8f8;
  border-radius: 12px;
  overflow: hidden;
}

.app-showcase-bottom-image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ==================== HERO GRID LINES ==================== */
.hero-grid-case-lines {
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100%;
  max-width: var(--container-max);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  pointer-events: none;
  transform: translateX(-50%);
  z-index: 1;
  /* Above background, below content */
  height: 100%;
}

.hero-grid-case-lines span {
  height: 100%;
  border-left: 1px solid var(--color-border-dark);
}

.hero-grid-case-lines span:last-child {
  border-right: 1px solid var(--color-border-dark);
}

/* Slightly stronger middle line for visual balance */
.hero-grid-case-lines span:nth-child(2) {
  border-left: 1px solid var(--color-border-dark);
}

/* Mobile: 3 lines only */
@media (max-width: 767px) {
  .hero-grid-case-lines {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-grid-case-lines span:nth-child(4) {
    display: none;
  }
}

/* Dark hero compatibility */
.sdsh-section .hero-grid-case-lines span {
  border-left: 1px solid var(--color-border-dark);
}

.sdsh-section .hero-grid-case-lines span:last-child {
  border-right: 1px solid var(--color-border-dark);
}

/* ── Grid Lines ── */
/* .hero-grid-case-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* next/image fill sets position/size inline; we only set fit + position */
.sdsh-bg-img {
  object-fit: cover;
  object-position: center;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  color: transparent;
}

/* ---------- WATERMARK ---------- */
.sdsh-watermark {
  position: relative;
  z-index: 1;
  top: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 2rem;
  padding-bottom: 1rem;
  pointer-events: none;
  user-select: none;
  font-family: var(--font-body);
}

.sdsh-watermark-track {
  display: flex;
  white-space: nowrap;
}

.sdsh-watermark-text {
  font-weight: 900;
  line-height: 1;
  font-size: clamp(90px, 22vw, 310px);
  letter-spacing: -0.04em;
  padding-right: 0.3em;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- TOP ACCENT LINE (spacers) ---------- */
.sdsh-topline {
  position: relative;
  z-index: 8;
  width: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 28px 1rem 14px;
}

.sdsh-topline-spacer {
  flex-shrink: 0;
  width: 80px;
  opacity: 0;
  pointer-events: none;
}

.sdsh-topline-spacer--left {
  margin-right: 1rem;
}

.sdsh-topline-spacer--right {
  margin-left: 1rem;
}

/* ---------- TEXT CONTENT (default / non-ultrawide block) ---------- */
.sdsh-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sdsh-container {
  width: 100%;
  max-width: 1728px;
  /* your --container-max */
  margin-inline: auto;
  padding-inline: 1rem;
}

.sdsh-content-col {
  width: 100%;
}

.sdsh-content-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---------- BREADCRUMBS ---------- */
.sdsh-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0.025em;
}

.sdsh-crumb {
  display: flex;
  align-items: center;
}

.sdsh-crumb-sep {
  margin: 0 5px;
  color: #fff;
  font-size: 0.875rem;
}

.sdsh-crumb-link {
  font-weight: 400;
  color: var(--sdsh-crumb,
      #fff);
  /* --sdsh-crumb passed in only when crumb.crumbaccent exists */
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.sdsh-crumb-link:hover {
  opacity: 0.75;
}

.sdsh-crumb-text {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.52);
}

.sdsh-crumb-text.sdsh-crumb-accent {
  color: var(--sdsh-accent, #e91e8c);
}

/* ---------- HEADING ---------- */
.sdsh-heading {
  margin: 0;
  font-family: var(--font-primary, "Boldonse", system-ui);
  font-weight: 400;
  color: #fff;
  line-height: 1.6;
  letter-spacing: -0.025em;
  border-top: 1px solid #99a1af;
  padding-top: 0.75rem;
  font-size: var(--text-2xl);
}

/* ---------- SUBHEADING ---------- */
.sdsh-subheading {
  margin: 0;
  line-height: 1.625;
  font-size: clamp(0.82rem, 1.1vw, 0.93rem);
  color: rgba(255, 255, 255, 0.5);
  max-width: 360px;
}

/* ---------- CTA ---------- */
.sdsh-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
  padding: 10px 1.5rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  background: var(--sdsh-accent, #e91e8c);
}

/* ---------- MOCKUP (default block) ---------- */
.sdsh-mockup {
  position: relative;
  z-index: 5;
  width: 100%;
  margin-top: auto;
  max-width: 900px;
}

.sdsh-mockup-ratio {
  position: relative;
  width: 100%;
  padding-top: 72.54%;
  filter: drop-shadow(0 -6px 32px rgba(0, 0, 0, 0.35)) drop-shadow(0 24px 56px rgba(0, 0, 0, 0.55));
}

.sdsh-mockup-img {
  object-fit: contain;
  object-position: bottom;
  max-width: 100%;
}

/* ---------- BOTTOM FADE ---------- */
.sdsh-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: 4rem;
  pointer-events: none;
  background: linear-gradient(to bottom,
      transparent 0%,
      rgba(13, 27, 53, 0.4) 100%);
}

/* ---------- ULTRAWIDE BLOCK (hidden until ultrawide) ---------- */
.sdsh-xl {
  display: none;
}

.sdsh-xl-content {
  width: fit-content;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sdsh-xl-container {
  width: fit-content;
  padding-inline: 1rem;
}

.sdsh-xl-col {
  max-width: 84%;
}

.sdsh-cta--xl {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding: 10px 1.5rem;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--sdsh-accent, #e91e8c);
}

.sdsh-cta-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.sdsh-mockup--xl {
  position: relative;
  z-index: 5;
  width: 100%;
  margin-top: auto;
  max-width: 900px;
}

.sdsh-mockup-ratio--xl {
  position: relative;
  width: 100%;
  padding-top: 74.54%;
  filter: drop-shadow(0 -6px 32px rgba(0, 0, 0, 0.35)) drop-shadow(0 24px 56px rgba(0, 0, 0, 0.55));
}

/* ============================================================
   DESKTOP TIER  ·  ≈1728px Figma frame
   ============================================================ */
@media (min-width: 1024px) {
  .sdsh-content-inner {
    gap: 1.25rem;
  }

  .sdsh-topline {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sdsh-watermark {
    position: absolute;
    top: 200px;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-2rem);
  }

  .sdsh-content {
    position: absolute;
    inset: 0;
    top: 15rem;
    flex: 1 1 0%;
    padding-top: 6rem;
  }

  .sdsh-content-col {
    max-width: 44%;
  }

  .sdsh-heading {
    max-width: 28rem;
  }

  .sdsh-mockup {
    position: absolute;
    right: 0;
    bottom: 0;
    top: auto;
    left: auto;
    margin-top: 0;
    width: 58%;
    max-width: 900px;
  }
}

/*main modules-casestudies*/
/* ── Section ── */
.main-modules-section {
  position: relative;
  background-color: #fff;
  width: 100%;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .main-modules-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* ==================== CLIENT DETAILS SECTION ==================== */
.client-list-item

/* Button */
.client-button-wrapper {
  margin-top: var(--section-spacing-xs);
  display: flex;
  justify-content: center;
}

.client-visit-btn {
  color: white;
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 0.85rem 2.25rem;
  border-radius: 9999px;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.client-visit-btn:hover {
  opacity: 0.9;
}

/* ==================== FULL HEIGHT GRID LINES ==================== */
.client-grid-lines {
  position: absolute;
  inset: 0;
  /* Full height of the section */
  left: 50%;
  width: 100%;
  max-width: var(--container-max);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  pointer-events: none;
  transform: translateX(-50%);
  z-index: 1;
  height: 100%;
}

.client-grid-lines span {
  height: 100%;
  border-left: 1px solid var(--color-border-light);
}

.client-grid-lines span:last-child {
  border-right: 1px solid var(--color-border-light);
}

/* ==================== RESPONSIVE ==================== */
/* ==================== MOBILE - Reduce to 3 lines ==================== */
@media (max-width: 767px) {
  .client-grid-lines {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .client-grid-lines span:nth-child(4) {
    border-right: none;
  }
}

/* Large screens keep full 4 lines */
@media (min-width: 768px) {
  .client-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
}

@media (min-width: 1024px) {
  .client-button-wrapper {
    /* margin-top: 0; */
    justify-content: flex-end;
    padding-right: 1rem;
  }
}

@media (min-width: 2100px) {
  .client-grid-lines span {
    border-left: 1px solid var(--color-border-light);
  }
}

/* ==================== PAIN POINTS + SOLUTIONS SECTION ==================== */

.conclusion-heading {
  padding-bottom: var(--section-spacing-header-xs) !important;
}

/* .section-header {
  padding-bottom: 60px;
} */

/* ── Requirements Section ── */
.requirements-section {
  position: relative;
}

.requirements-section__wrapper {
  position: relative;
  isolation: isolate;
  /* padding-block: clamp(40px, 6vw, 80px); */
}

.requirements-section__content {
  position: relative;
  z-index: 1;
}

.requirements-section__badge {
  margin-bottom: clamp(12px, 2vw, 24px);
}

.requirements-section__heading {
  margin: 0 0 clamp(24px, 4vw, 40px);
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-accent-black);
}

.requirements-section__heading .highlight {
  color: var(--color-accent-secondary);
}

@media (min-width: 768px) {
  .requirements-section__heading {
    white-space: nowrap;
  }
}

.requirements-section__paragraph {
  margin: 0 0 clamp(24px, 4vw, 40px);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: #363636;
  max-width: clamp(280px, 42vw, 640px);
}

.requirements-section .requirements-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.requirements-section .requirement-item {
  display: flex;
  align-items: start;
  gap: 1.5rem;
}

.requirements-section .requirement-item .req-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-accent-black);
  color: var(--color-accent-white);
  font-size: var(--text-lg);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1;
}

.requirements-section .requirement-item .req-content {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 12px);
  padding-top: 0.2rem;
}

.requirements-section .requirement-item .requirement-item-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-1xl);
  color: var(--color-text-light);
  margin: 0;
}

.requirements-section .requirement-item .requirement-item-desc {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-light);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 769px) {
  .requirements-section .requirement-item .req-number {
    width: 38px;
    height: 38px;
  }
}

@media (min-width: 769px) {
  .requirements-section__content {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0;
  }

  .requirements-section__header {
    grid-column: 2 / -1;
  }

  .requirements-section__content .requirements-list {
    grid-column: 2 / -1;
  }
}

/* RELEVANT WORK SECTION */
.relevant-work {
  position: relative;
}

.relevant-work__inner {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  padding-top: var(--section-spacing-cap-margin);
  /* padding-bottom: clamp(60px, 6vw, 80px); */
}

/* Reuses .insight-section__vlines' border-grid technique (same as the
   ServiceCapabilities/StatCardsSection lines directly above it on the
   service detail page) instead of the old background-gradient-line
   approach — the two techniques round sub-pixel positions differently,
   which showed up as a doubled/misaligned line at the section seam
   instead of one continuous line. bottom:0 undoes insight-section's own
   -20px extension so the box still matches .relevant-work__inner exactly,
   as it did before. */
.relevant-work__vlines {
  bottom: 0;
  z-index: 0;
}

.relevant-work>.container {
  position: relative;
  z-index: 1;
}

.relevant-work__badge-col {
  position: relative;
  z-index: 1;
}

.relevant-work__content-col {
  position: relative;
  z-index: 1;
}

.relevant-work__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-light);
  margin-bottom: 0.25rem;
}

.relevant-work__badge img {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.relevant-work__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-accent-black);
  line-height: 1.15;
  margin: 0;
  /* white-space: nowrap; */
}

.relevant-work__content-col .heading {
  white-space: nowrap;
}

.requirements-section__header .heading {
  white-space: nowrap;
}

.relevant-work__heading span {
  color: var(--color-accent-pink, #e040fb);
}

.relevant-work__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.relevant-work__item {
  display: flex;
  flex-direction: column;
  /* gap: 1rem; */
}

.relevant-work__img-wrap {
  width: 100%;
  aspect-ratio: 855 / 559;
  overflow: hidden;
  background: var(--color-bg-soft, #f5f5f5);
}

.relevant-work__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.relevant-work__item-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-accent-black);
  margin: 0;
}

.relevant-work__item-desc {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-light);
  line-height: 1.625;
  margin: 0;
}

@media (min-width: 769px) {
  .relevant-work__inner {
    grid-template-columns: 1fr 3fr;
    gap: 0;
    align-items: start;
  }

  .relevant-work__badge-col {
    min-width: 0;
  }

  .relevant-work__content-col {
    min-width: 0;
    overflow: hidden;
  }

  .relevant-work__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/* Relevant Work — heading row with nav arrows */
.rw-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: var(--section-spacing-rw-heading);
}

/* SectionHeader inside rw-heading-row must shrink to allow nav to sit beside it */
.rw-heading-row .section-header {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.rw-heading-row .header-content-wrapper {
  margin: 0 !important;
}

.rw-nav {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  align-self: center;
}

/* Relevant Work — desktop carousel */
.rw-carousel {
  width: 100%;
  display: flex;
  gap: 2rem;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.rw-carousel::-webkit-scrollbar {
  display: none;
}

.rw-carousel__item {
  flex: 0 0 calc(50% - 1rem);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.stat-cards-section__header .section-header

/* .requirements-section__header .section-header,
.relevant-work__content-col .section-header */
  {
  padding-bottom: 0;
}

.job-form-section .highlight {
  display: block;
}

.career-top .highlight {
  display: block;
}

/* ==================== CLIENT DETAILS SECTION ==================== */
/* .client-details-section {
  background: var(--color-body1);
  padding-block: clamp(4rem, 8vw, 5rem) clamp(4rem, 8vw, 5rem);
  position: relative;
  overflow: hidden;
}
.client-details-section,
.pain-solutions-section {
  position: relative;
}
.client-top-bar {
  position: relative;
  z-index: 2;
}

.client-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
  position: relative;
  z-index: 2;
}

.client-col {
  position: relative;
}

.client-section-heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-accent-black);
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.bullet {
  font-size: 1.35rem;
  line-height: 1;
}

.client-content {
  padding-left: 1.25rem;
}

.client-list-item {
  font-size: var(--text-base);
  color: #909090;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.list-dot {
  color: #909090;
  margin-top: 0.2em;
} */

/* Button */
.client-button-wrapper {
  margin-top: var(--section-spacing-xs);
  display: flex;
  justify-content: center;
}

.client-visit-btn {
  color: white;
  font-weight: 600;
  font-size: var(--text-base);
  padding: 0.85rem 2.25rem;
  border-radius: 9999px;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.client-visit-btn:hover {
  opacity: 0.9;
}

/* ==================== FULL HEIGHT GRID LINES ==================== */
/* .client-grid-lines {
  position: absolute;
  inset: 0; 
  left: 50%;
  width: 100%;
  max-width: var(--container-max);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  pointer-events: none;
  transform: translateX(-50%);
  z-index: 1;
  height: 100%;
}

.client-grid-lines span {
  height: 100%;
  border-left: 1px solid var(--color-border-light);
}

.client-grid-lines span:last-child {
  border-right: 1px solid var(--color-border-light);
} */

/* ==================== RESPONSIVE ==================== */
/* ==================== MOBILE - Reduce to 3 lines ==================== */
@media (max-width: 767px) {
  .client-grid-lines {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .process-section .v-line {
    background: linear-gradient(to bottom,
        #e5e5e5 200px,
        rgba(255, 255, 255, 0.08) 120px);
  }

  .process-section .v-line:nth-child(1) {
    background: #e5e5e5;
  }

  /* .why-card {
    gap: 9rem;
  } */
  .what-we-do-list--third .what-we-do-list__media--desktop-shared {
    /* width: min(45%, 640px); */
  }
}

/* ==================== PAIN POINTS + SOLUTIONS SECTION ==================== */

.what-we-do-list--third .what-we-do-list__media--desktop-shared img {
  /* max-width: 640px; */
}

.what-we-do-list--third .what-we-do-list__button {
  gap: 50px;
}

.what-we-do-list--third .what-we-do-list__copy p,
.what-we-do-list--third .what-we-do-list__tags {
  /* max-width: 993px; */
  padding: 0 0 0 96px;
}

.insight-section__header .section-header.side-button .header-left {
  max-width: 1055px;
  /* padding-top: clamp(62px, 5vw, 120px); */
}

.testimonials__header-text .section-header.centered {
  grid-template-columns: 1.13fr 3fr;
}

.header-content-wrapper.split,
.header-content-wrapper.split-centered-right {
  margin-top: var(--section-spacing-header-xl);
}

.testimonials__header {
  padding-top: var(--section-spacing-header-sm);
}

.career-job-info {
  gap: 20px;
}

.career-job-details {
  gap: 1.5rem;
}

.section-header.bullet-points {
  padding: var(--section-spacing-xl) 0;
}

.contact-form__subheading {
  margin-block: clamp(20px, 3vw, 40px);
}

.bullet-points__list li {
  margin-bottom: 16px;
}

.client-grid-cell {
  gap: clamp(40px, 4vw, 100px);
}

/* .faq-section .section-header.centered {
    padding-top: clamp(80px, 5vw, 120px);
  } */
.grid-variant__right {
  border-top: 12px solid #f3f3f3;
  border-left: 12px solid #f3f3f3;
}

.client-grid-cell {
  border-right: 12px solid #f3f3f3;
  border-bottom: 12px solid #f3f3f3;
}

/* .contact-form__label {
  min-height: calc(1.5em + 48px);
} */

.project-grid {
  gap: 29px;
}

.service-card {
  gap: clamp(16px, 1.6vw, 40px);
}

.service-description {
  margin-bottom: clamp(16px, 2vw, 28px);
  max-width: clamp(280px, 20vw, 540px);
}

.categories-label {
  margin-bottom: clamp(12px, 1.2vw, 28px);
}

.category-tag {
  padding: 12px 20px;
}

.project-card__arrow {
  width: 80px;
  height: 80px;
}

.project-card__arrow img {
  width: 25px;
}

.blog-detail__body-text h2 {
  margin-bottom: clamp(1rem, 5vw, 2rem);
  margin-top: clamp(1.5rem, 6vw, 3.75rem);
}

.pain-solutions-section {
  background: var(--color-body1);
  /* padding: clamp(3rem, 6vw, 6rem) 0; */
  position: relative;
}

.pain-solutions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.pain-box,
.solutions-box {
  padding: clamp(2.5rem, 5vw, 3.5rem);
  /* border: 1px solid var(--color-border-light); */
  position: relative;
  z-index: 1;
}

.pain-box {
  background: #f3f3f3;
}

.solutions-box {
  color: white;
}

/* Headings */
.pain-heading-wrapper,
.solution-heading-wrapper {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

/* Larger diamond for Pain Points / Solutions section */
.pain-heading-wrapper .diamond-bullet,
.solution-heading-wrapper .diamond-bullet {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  margin-right: 14px;
}

/* White version for Solutions box */
.solution-heading-wrapper .diamond-bullet {
  background-color: white;
}

/* Fallback / legacy support */
.diamond-bullet {
  display: inline-block;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background-color: #6a36d8;
  flex-shrink: 0;
}

.pain-heading,
.solution-heading {
  font-family: var(--font-primary);
  font-size: var(--text-1xl);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.pain-heading {
  color: var(--color-accent-black);
}

.solution-heading {
  color: var(--color-accent-white);
}

/* Text */
.pain-text,
.solution-text {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--color-text-grey-3);
}

.solution-text {
  color: #f3f3f3;
}

/* ==================== RACE MEDIA UI/UX SECTION ==================== */
/* .uiux-section {
  background: var(--color-body1);
  padding: 30px 0;
  position: relative;
}

@media (min-width: 1024px) {
  .uiux-section { padding: 40px 0; }
}

@media (min-width: 2100px) {
  .uiux-section { padding: 60px 0; }
} */

/* Header Row */
.uiux-header {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: var(--text-3xl);
}

@media (min-width: 1024px) {
  .uiux-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
  }
}

.uiux-title {
  font-family: var(--font-primary);
  font-size: var(--text-3-4xl);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-accent-black);
  margin: 0;
}

.uiux-description {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--color-text-grey-3);
  max-width: 520px;
}

/* Widgets Box */
.uiux-widgets-box {
  background: #f3f3f3;
  padding: 3.5rem 2rem;
  border-radius: 8px;
  position: relative;
}

.uiux-widgets-title {
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-accent-black);
  margin-bottom: 2.5rem;
}

.uiux-widgets-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.uiux-widget-item {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.uiux-widget-image {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
}

/* ==================== COLOUR PALETTE STEP ==================== */
.colour-palette-section {
  position: relative;
  overflow: hidden;
  background: #000;
}

.colour-palette-section.bg-black {
  background: #000;
}

.glow-background {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.glow-image {
  object-fit: cover;
  object-position: center;
}

/* Header */
.colour-palette-header {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 4rem;
  position: relative;
  z-index: 2;
}

.number-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-number {
  font-family: "Lexend", sans-serif;
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 900;
  line-height: 0.8;
  color: white;
}

/* .diamond-bullet {
  display: inline-block;
  width: 28px;
  height: 28px;
  transform: rotate(45deg);
  flex-shrink: 0;
} */

/* .section-title {
  font-family: "Lexend", sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 12vw, 72px);
  line-height: 0.8;
  -webkit-text-stroke: 2px #fff;
  color: transparent;
} */

/* Swatches Row */
.swatches-row {
  max-width: 80rem;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-bottom: 4rem;
  position: relative;
  z-index: 2;
}

.swatches-container {
  flex: 1;
}

.swatches-grid {
  display: flex;
  gap: 1.5rem;
  padding: 0 2rem;
}

.swatch {
  width: 5.5rem;
  height: 3.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.swatch-labels {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.125rem;
}

.swatch-label {
  color: white;
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Label Boxes */
.color-label-box,
.contrast-label-box {
  padding: 1rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
}

.color-label,
.contrast-label {
  color: white;
  font-family: "Lexend", sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 4rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

.contrast-description {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

/* Palette Grid */
.palette-grid-container {
  padding: 3rem 1.5rem;
  border-radius: 8px;
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

.palette-item {
  height: 110px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  text-align: center;
}

.palette-hex {
  font-size: 0.85rem;
  font-family: monospace;
  opacity: 0.85;
}

.palette-name {
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.colour-palette-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* ==================== FIX GRAPHIC DESIGN STEPS ==================== */
.fix-graphic-design-section {
  position: relative;
  overflow: hidden;
  background: #000;
  padding: clamp(1rem, 5vw, 3.5rem) 0;
}

.left-glow {
  position: absolute;
  top: 80px;
  left: 0;
  width: clamp(300px, 50vw, 600px);
  height: clamp(350px, 60vw, 700px);
  filter: blur(80px);
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
}

/* Header */
.fix-graphic-content {
  position: relative;
  z-index: 2;
}

.graphic-header {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: var(--section-spacing-rem-lg);
}

/* Top Images */
.top-images-row {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 3rem;
  padding: 1rem 4rem;
}

.top-image-wrapper {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
}

.top-image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Bottom Grid */
.bottom-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.bottom-grid.swap {
  grid-template-columns: 2fr 1fr;
}

.left-image-col,
.right-images-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.left-image-col {
  grid-column: span 2 / span 2;
}

.right-images-col {
  grid-column: span 3 / span 3;
}

.bottom-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

.right-top-wrapper,
.right-bottom-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.behind-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.behind-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0) invert(1);
}

/* Responsive */
@media (max-width: 1024px) {
  /* .bottom-grid,
  .bottom-grid.swap {
    grid-template-columns: 1fr;
  } */

  .top-images-row {
    flex-direction: column;
  }
}

/* @media (min-width: 2100px) {
  .fix-graphic-design-section {
        padding: clamp(1rem, 5vw, 3.5rem) 0;
  }
} */

/* ==================== RESPONSIVE ==================== */
@media (min-width: 768px) {
  .pain-solutions-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .pain-box,
  .solutions-box {
    padding: clamp(3rem, 5vw, 4rem);
  }

  .uiux-widgets-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {

  .pain-box,
  .solutions-box {
    padding: 3.5rem 3rem;
  }

  .section-heading .diamond-bullet {
    margin-top: 14px !important;
  }

  .uiux-widgets-box {
    padding: 4.5rem 3rem;
  }

  .uiux-widgets-grid {
    gap: 2.5rem;
  }

  .swatches-row {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
  }

  .techservices-content {
    padding-bottom: var(--section-spacing-rem-2xl);
  }
}

/* ==================== MOBILE - Reduce to 3 lines ==================== */
@media (max-width: 768px) {
  .client-grid-lines {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .relevant-blogs__header {
    margin-block: var(--section-spacing-3xl) 28px;
  }

  .client-details-section {
    padding-block: 44px var(--section-spacing-lg);
  }

  .client-grid {
    gap: 0.75rem;
  }

  .client-top-bar {
    padding-left: 0.2rem;
  }

  .client-button-wrapper {
    margin-top: var(--section-spacing-md);
    padding: 0;
  }

  .client-visit-btn {
    text-align: center;
    width: 100%;
  }

  .colour-palette-content {
    gap: 1rem;
  }

  .swatches-grid {
    gap: 1rem;
    padding: 0 1.3rem;
    justify-content: center;
  }

  .swatch {
    width: 4.5rem;
    height: 3rem;
  }

  .swatches-row {
    margin-bottom: 0;
  }

  .swatch-labels {
    justify-content: center;
  }

  .top-images-row {
    padding: 0;
    margin-bottom: 1rem;
  }

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

  .left-image-col {
    grid-column: span 1 / span 1;
  }

  .right-images-col {
    grid-column: span 1 / span 1;
  }

  .sdsh-mockup-ratio {
    padding-top: 0;
  }

  .techservices-content {
    padding-bottom: var(--section-spacing-xs);
  }
}

.colour-palette-black-section {
  background: #000;
  position: relative;
  overflow-x: hidden;
}

.radial-glow-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  display: none;
}

@media (min-width: 640px) {
  .radial-glow-wrapper {
    display: block;
    right: -75%;
    top: -20%;
  }

  .swatch-label {
    width: 5.2rem;
  }
}

.radial-glow {
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
}

/*fixmyfoto icon style section*/
/* ─────────────────────────────────────────────
   IconStyle Component Styles
   ───────────────────────────────────────────── */

/* ── Section wrapper ── */
.icon-style-section {
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #000;
}

/* ── Glow gradient background ── */
.icon-style-section__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.icon-style-section__glow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* ── Inner container ── */
.icon-style-section__container {
  max-width: 1280px;
  margin-inline: auto;
  padding: 2.5rem 1rem;
  position: relative;
  z-index: 1;
}

/* ── Section heading wrapper ── */
.icon-style-section__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: var(--section-spacing-rem-md);

  /* animation: starts hidden */
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.5s ease-out,
    transform 0.5s ease-out;
}

.icon-style-section__heading.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 768px) {
  .icon-style-section__heading {
    flex-direction: row;
    align-items: flex-end;
  }
}

/* ── Number + bullet wrapper ── */
.icon-style-section__heading-left {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

/* ── Section number ── */
.icon-style-section__number {
  color: #fff;
  font-weight: 900;
  font-family: "Lexend", sans-serif;
  font-size: clamp(3rem, 12vw, 8rem);
  line-height: 0.8;
  display: block;
}

/* ── Accent square bullet ── */
.icon-style-section__bullet {
  flex-shrink: 0;
  border-radius: 0;
  width: clamp(20px, 3vw, 30px);
  height: clamp(20px, 3vw, 30px);
  /* background-color is set inline per instance */
}

.icon-style-section__rows,
.icon-style-section__row,
.icon-style-section__heading,
.icon-style-section__rows {
  position: relative;
  z-index: 1;
  /* above the vlines */
}

/* ── Section title ── */
.icon-style-section__title {
  font-family: "Lexend", sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 12vw, 72px);
  line-height: 0.8;
  -webkit-text-stroke: 2px #ffffff;
  color: transparent;
  position: relative;
  display: block;
}

@media (min-width: 768px) {
  .icon-style-section__title {
    align-self: flex-end;
  }
}

/* ── Icon rows wrapper ── */
.icon-style-section__rows {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 6vw, 80px) 0;
  padding-bottom: 2.5rem;
}

/* ── Single icon row ── */
.icon-style-section__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-inline: 0.5rem;

  /* animation: starts hidden */
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.45s ease-out,
    transform 0.45s ease-out;
}

.icon-style-section__row.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1024px) {
  .icon-style-section__row {
    padding-inline: 2.5rem;
  }
}

/* ── Row alignment variants ── */
.icon-style-section__row--align-left {
  justify-content: center;
}

.icon-style-section__row--align-center {
  justify-content: center;
}

.icon-style-section__row--align-right {
  justify-content: center;
}

@media (min-width: 640px) {
  .icon-style-section__row--align-left {
    justify-content: flex-start;
  }

  .icon-style-section__row--align-right {
    justify-content: flex-end;
  }
}

/* ── Default gap between icons ── */
.icon-style-section__row {
  gap: 0.5rem;
  /* gap-2 default */
}

/* ── Single icon box ── */
.icon-style-section__icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  /* animation: starts hidden */
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
}

.icon-style-section__icon-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Icon image inside the box ── */
.icon-style-section__icon-img {
  object-fit: contain;
  display: block;
}

/* ── Our Clients View All Button ── */
.our-clients-section__view-all {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 2rem;
}

.our-clients__view-all-btn {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-accent-secondary);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-accent-secondary);
  border-radius: 0;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: auto;
  width: auto;
}

.our-clients__view-all-btn:hover {
  opacity: 0.7;
  border-bottom-color: var(--color-accent-secondary);
}

.our-clients__view-all-btn .btn-text-wrapper {
  position: relative;
}

.our-clients__view-all-btn .btn-text {
  color: var(--color-accent-secondary);
}

.our-clients__view-all-btn .btn-text--hover {
  color: var(--color-accent-secondary);
}

.tech-services-section {
  background: var(--color-body1);
  overflow: hidden;
  position: relative;
}

.tech-services-list {
  display: flex;
  flex-direction: column;
  z-index: 1;
  position: relative;
}

.tech-services-item {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 2fr 1.2fr;
  align-items: start;
  gap: 40px;
  padding: 32px 40px;
  /* padding-left: 0; */
  cursor: pointer;
  /* Explicit properties instead of "all": the browser only has to watch
     background/border for changes on each hover switch, not every property. */
  transition:
    background-color 0.7s ease,
    border-color 0.7s ease;
  isolation: isolate;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 0;
  border-left: 1px solid var(--color-border-light);
  border-right: 1px solid var(--color-border-light);
  background-color: var(--color-accent-white);
  perspective: 1000px;
  /* Gives the picture real 3D depth when tilted */
  /* Scopes the expand/collapse reflow (grid-template-rows) to this card so
     it doesn't force a layout recalculation of the whole list on every
     hover switch — key fix for jank when the cursor crosses cards quickly. */
  contain: layout;
}

.tech-services-item:last-child {
  border-bottom: 1px solid var(--color-border-light);
}

.tech-services-item.active {
  background-color: transparent !important;
  border-color: transparent !important;
  /* Keeps the spacing box intact so your image doesn't get clipped or hidden */
  z-index: 10 !important;
}

/* --- 2K Screen Safe Animation Layer --- */
.tech-services-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #111111;
  /* border-radius: 12px; */
  z-index: -1;
  /* Scale safely instead of changing left position to handle ultra-wide resolutions perfectly */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.tech-services-item.active::before {
  transform: scaleX(1);
}

/* --- Content Blocks Positioning --- */
.tech-services-left-block,
.tech-services-content-collapse {
  position: relative;
  z-index: 2;
}

.tech-services-left-block {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.56vw, 40px);
}

/* Collapsed by default: the card only takes up as much height as the
   number + heading need. Hovering/activating grows this track from 0fr to
   1fr, which smoothly animates the item's own height since it's an
   auto-sized grid row — no JS height measurement needed. */
.tech-services-content-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: grid-template-rows;
}

.tech-services-item.active .tech-services-content-collapse {
  grid-template-rows: 1fr;
}

.tech-services-middle-block {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.56vw, 40px);
  overflow: hidden;
  min-height: 0;
  /* Hidden by default: only number + title show until the card is hovered/active */
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: opacity, transform;
}

.tech-services-item.active .tech-services-middle-block {
  opacity: 1;
  transform: translateY(0);
}

/* --- Typography & Elements Style --- */
.tech-services-number {
  flex-shrink: 0;
  width: clamp(36px, 3vw, 48px);
  height: clamp(36px, 3vw, 48px);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text-grey-2);
  background: #f3f3f3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.7s ease;
}

.tech-services-item.active .tech-services-number {
  background: #ffffff;
  color: #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tech-services-title {
  font-size: var(--text-1xl);
  font-weight: 700;
  color: var(--color-accent-black);
  margin: 0;
  line-height: 1.3;
  transition: color 0.7s ease;
}

.tech-services-item.active .tech-services-title {
  color: #ffffff;
}

/* Collapsed: heading stays on a single line. Hover/active: it's free to wrap
   into its allocated width, matching the reference design. Scoped to the
   grid layout viewport so mobile's stacked, full-width heading is untouched. */
@media (min-width: 1025px) {
  .tech-services-title {
    white-space: nowrap;
  }

  .tech-services-item.active .tech-services-title {
    white-space: normal;
    max-width: 300px;
  }
}

.tech-services-description {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-grey-3);
  /* Readable gray on a light background default */
  margin: 0;
  /* max-width: 540px; */
  transition: color 0.7s ease;
}

.tech-services-item.active .tech-services-description {
  color: #f3f3f3;
  /* Lighter clean grey text on black active background */
}

/* --- Tags Layout --- */
.tech-services-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tech-services-tag {
  padding: clamp(4px, 0.63vw, 16px) clamp(12px, 0.93vw, 28px);
  background: #f3f3f3;
  color: var(--color-accent-black);
  border-radius: 50px;
  font-size: var(--text-lg);
  transition: all 0.7s ease;
}

.tech-services-item.active .tech-services-tag {
  background: var(--color-text-light);
  color: var(--color-accent-white);
}

.tech-services-tag:hover {
  background: var(--color-text-light);
}

.tech-services-item.active .tech-services-tag:hover {
  background: var(--color-text-light);
}

/* --- Tilted Image Breakout Controls --- */
.tech-services-image-wrapper {
  position: absolute;
  right: 10px;
  top: 50%;
  /* Hidden by default, slightly dropped down */
  transform: translateY(-40%) rotate(0deg) scale(0.9);
  width: 350px;
  height: auto;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: opacity, transform;
}

.tech-services-image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Shows and gracefully tilts on hover/click activation */
.tech-services-item.active .tech-services-image-wrapper {
  opacity: 1;
  transform: translateY(-52%) rotate(12deg) scale(1.1);
}

/* --- Arrow Handling --- */
.tech-services-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  opacity: 0;
  transition: all 0.7s ease;
  color: #ffffff;
  z-index: 3;
}

.tech-services-item.active .tech-services-arrow {
  opacity: 0.4;
}

.tech-services-arrow:hover {
  opacity: 1 !important;
}

/* --- Responsive Viewports --- */
@media (max-width: 1024px) {
  .tech-services-item {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 30px 24px;
  }

  .tech-services-number {
    margin-left: 0;
  }

  .tech-services-image-wrapper {
    position: relative;
    transform: none !important;
    right: 0;
    top: 0;
    margin: 20px auto 0;
    width: 100%;
    max-width: 220px;
    display: none;
    opacity: 1;
  }

  .tech-services-item.active .tech-services-image-wrapper {
    display: block;
  }

  .tech-services-description,
  .tech-services-title {
    max-width: none;
  }
}

/* --- Tech Services Section Grid Lines --- */
.techservices-section__wrapper {
  position: relative;
  width: 100%;
}

.techservices-section__vlines {
  position: absolute;
  /* Nested inside .techservices-content (itself inside .container), so inset:0
     already aligns with the same gutter-bound, container-max-capped content
     width every other section's vlines use. */
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  z-index: 0;
}

.techservices-section__vlines span {
  border-left: 1px solid var(--color-border-light);
}

.techservices-section__vlines span:last-child {
  border-right: 1px solid var(--color-border-light);
}

/* Responsive adjustment to switch to a 3-column line grid on mobile (matching your responsive-vlines behavior) */
@media (max-width: 768px) {
  .techservices-section__vlines {
    grid-template-columns: repeat(3, 1fr);
  }

  .techservices-section__vlines span:last-child {
    border-right: 1px solid var(--color-border-light);
  }
}

/* Container for the list */
.social-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 12px;
  /* Spacing between icons if you add more later */
}

/* The circular link box wrapper */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 2.5vw, 40px);
  height: clamp(28px, 2.5vw, 40px);
  border: 1px solid var(--color-border-light);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

/* Boxes sit with zero gap (see .social-media ul); pull each one left by its
   own border-width so adjacent borders overlap into a single shared line
   instead of doubling up into a visible seam. */
.social-media ul li+li {
  margin-left: -1px;
}

/* The actual SVG icon inside */
.social-icon {
  width: clamp(16px, 1.4vw, 22px);
  height: clamp(16px, 1.4vw, 22px);
  object-fit: contain;
  /* Ensures the SVG scales beautifully without breaking */
  display: block;
}

/* ==================== PROCESS SECTION - FIXED STICKY ==================== */
.process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Better ratio */
  gap: 0;
  position: relative;
  /* padding-bottom: clamp(40px, 5vw, 60px); */
  margin-top: var(--section-spacing-xs);
  /* margin-bottom: 40px; */
}

/* 2K / ultrawide tier (matches the min-width: 2100px breakpoint used
   elsewhere for this switch point) */
@media (min-width: 2100px) {
  .framer-2bt3nz {
    height: clamp(560px, 58vw, 760px);
  }

  /* .process-left {
    padding-top: var(--section-spacing-lg);
    padding-bottom: var(--section-spacing-lg);
  } */

  .process-right {
    margin: var(--section-spacing-lg) 24px var(--section-spacing-lg) 0px;
  }
}

.process-left {
  position: sticky;
  top: 20px;
  /* Adjust if your navbar is taller */
  height: fit-content;
  align-self: start;
  z-index: 2;
}

/* .process-right-container {
  min-height: 100vh;
} */

.process-right {
  display: flex;
  flex-direction: column;

  /* gap: 4rem; */
}

/* Make sure steps are visible */
.process-step-item {
  /* background: white;
  padding: 2.5rem;
  border: 1px solid #e5e5e5; */
  position: relative;
}

/* Mobile */
@media (max-width: 1024px) {
  .process-grid {
    grid-template-columns: 1fr;
    /* gap: 3rem; */
  }

  .process-left {
    position: relative;
    top: 0;
  }

  .process-right-container {
    min-height: auto;
  }
}

/* GRID VARIANT - BIGGER IMAGE + TALLER ACTIVE ROW */
.what-we-do__grid .what-we-do__center {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-height: 0;
  /* No space at all until the row is active */
  padding: 0;
  transition:
    max-height 0.5s ease,
    padding 0.5s ease;
}

.what-we-do__grid .what-we-do__center_video {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-height: 0;
  /* No space at all until the row is active */
  padding: 0;
  grid-template-rows: 0fr;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  align-self: stretch;
}

.what-we-do__row {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  backface-visibility: hidden;
  /* Prevents text pixel jitter during animation */
}

.what-we-do__row.active {
  min-height: 280px;
  /* Makes active row much taller */
}

.what-we-do__row.active .what-we-do__center {
  max-height: 87%;
  /* Row content height (280px - row's own padding) */
  padding: 0;
  /* Breathing room around the video, only while shown */
}

.what-we-do__row.active .what-we-do__center_video {
  max-height: 100%;
  grid-template-rows: 1fr;
  /* Expand on hover */
  /* Small top/bottom breathing room around the video, scaling from ~10px on
     small screens up to 20px on 2K (clamped so the video's own width:100%
     fill from earlier stays untouched — only vertical padding here). */
  padding: clamp(10px, 1vw, 20px) 0;
}

.what-we-do__box {
  opacity: 0.4;
  transform: scale(0.88);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  will-change: transform, opacity;
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Active / Hovered state for grid row media */
.what-we-do__box.active-image {
  opacity: 1;
  transform: scale(1);
}

.what-we-do__row.active .what-we-do__box {
  opacity: 1;
  /* transform: scale(1); */
}

.what-we-do__center_video video.what-we-do__box {
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

/* Hover effect */
.what-we-do__row:hover:not(.active) {
  /* background: rgba(99, 47, 237, 0.03); */
}

/* GPU Acceleration for smooth Framer Motion rendering */
.fw-img {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Pause on hover state polish */
.fw-card {
  cursor: pointer;
}

.cs-stack__card-wrapper {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.cs-stack__card {
  position: relative;
  height: 100%;
  width: 100%;
}

.overlay-casestudy {
  position: absolute;
  background-color: #0000004d;
}

/* Background Image Container */
.cs-stack__card__img-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  background: #111111;
  /* Darker fallback to reduce gray flash */
}

@media (max-width: 768px) {

  .cs-stack__card__img-container,
  .cs-stack__card__content-fixed {
    max-height: 460px;
  }

  .cs-stack__card-wrapper {
    /* height: 50vh; */
    height: 460px;
  }

  .cs-stack__cards-wrapper {
    height: calc(var(--card-count, 3) * 460px);
  }
}

.cs-stack__card__img {
  /* Always fill the card edge-to-edge, cropping as needed to match the
     card's own ratio — like the Sonance reference. A little oversize
     (height/inset buffer) gives the scroll parallax room to pan without
     ever exposing an edge. */
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  inset: -15% 0;
  z-index: 1;
  scale: 1.3;
}

/* Curtain-style reveal panel — sits above the image, then animates
   scaleY: 1 -> 0 (transform-origin: top) via Framer Motion, "opening"
   like a blind to uncover the image as the card scrolls into view. */
.cs-stack__card__reveal {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #111111;
  /* match card fallback bg / swap for a brand color */
  transform-origin: top;
  pointer-events: none;
}

.cs-stack__img-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.55) 55%,
    rgba(0,0,0,0.9) 100%
  ); */
  background: rgba(0, 0, 0, 0.36);
  pointer-events: none;
}

/* Fixed content */
.cs-stack__card__content-fixed {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2.5rem, 6vw, 7rem) clamp(2.5rem, 6vw, 7rem);
}

.cs-stack__card__top {
  align-self: flex-end;
  pointer-events: auto;
}

/* .cs-stack__tag {
  font-size: var(--text-lg);
  font-family: var(--font-body);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(0, 0, 0, 0.65);
  padding: 10px 26px;
  border-radius: 50px;
  backdrop-filter: blur(12px);
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
} */

.cs-stack__card__content-bottom {
  pointer-events: auto;
}

.cs-stack__card__bottom {
  color: white;
}

/* .cs-stack__title {
  font-family: var(--font-primary);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: 1.05;
  margin-bottom: 0.75rem;
  font-weight: 400;
} */

.cs-stack__meta {
  font-size: var(--text-1xl);
  opacity: 0.95;
  max-width: 520px;
}

/* Wrapper for all cards */
.cs-stack__cards-wrapper {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .cs-stack__card__img {
    scale: 1;
  }
}

@media (max-width: 992px) {
  .process-section .process-right {
    margin: var(--section-spacing-xs) 0 var(--section-spacing-xs) 0px;
  }
}

/* ==================== HERO VIDEO PREVIEW + CUSTOM MODAL PLAYER ==================== */
.hero-video-inline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.hero-video-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  z-index: 2;
  background: #000;
  pointer-events: none;
}

/* Decorative play affordance over the poster; clicks pass through to the trigger */
.hero-video-play-icon {
  z-index: 3;
  pointer-events: none;
}

/* Invisible full-area click target */
.hero-video-trigger {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hero-video-trigger:disabled {
  cursor: not-allowed;
}

.hero-video-trigger:focus-visible {
  outline: 2px solid var(--color-accent-primary, #05cafa);
  outline-offset: 2px;
}

.hero-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  transition:
    opacity 0.28s ease,
    background-color 0.28s ease;
}

.hero-video-modal.is-open {
  opacity: 1;
  background: rgba(0, 0, 0, 0.82);
}

.hero-video-modal__panel {
  position: relative;
  width: min(100%, 960px);
  max-width: 100%;
  transform: scale(0.96);
  opacity: 0;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}

.hero-video-modal.is-open .hero-video-modal__panel {
  transform: scale(1);
  opacity: 1;
}

.hero-video-modal__close {
  position: absolute;
  top: -2.75rem;
  right: 0;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.hero-video-modal__close:hover,
.hero-video-modal__close:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  outline: none;
}

.hero-video-modal__close:focus-visible {
  box-shadow: 0 0 0 2px #fff;
}

.hero-video-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(80vh, calc(100vw * 9 / 16));
  background: #000;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.hero-video-modal__frame:fullscreen {
  max-height: none;
  border-radius: 0;
}

.hero-video-modal__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  cursor: pointer;
}

/* Custom controls bar */
.hero-video-modal__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.85),
      rgba(0, 0, 0, 0.55) 65%,
      transparent);
}

.hvmc-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.hvmc-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.hvmc-btn:hover,
.hvmc-btn:focus-visible {
  background: rgba(5, 202, 250, 0.78);
  outline: none;
}

.hvmc-time {
  flex: 0 0 auto;
  min-width: 38px;
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.hero-video-modal__controls input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: transparent;
  accent-color: #05cafa;
  cursor: pointer;
  outline: none;
}

/* Chrome / Safari / Edge — track is painted here.
   No `background` here: .hvmc-seek/.hvmc-volume own the fill so their
   gradient isn't shadowed by a same-specificity flat-color rule. */
.hero-video-modal__controls input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
}

.hero-video-modal__controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #05cafa;
  border: 0;
  margin-top: -4px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

/* Firefox */
.hero-video-modal__controls input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
}

.hero-video-modal__controls input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #05cafa;
  border: 0;
  cursor: pointer;
}

/* Seek — fill driven by --progress from JS */
.hvmc-seek {
  flex: 1 1 auto;
  min-width: 60px;
}

.hvmc-seek::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
      #05cafa var(--progress, 0%),
      rgba(255, 255, 255, 0.25) var(--progress, 0%));
}

.hvmc-seek::-moz-range-track {
  background: linear-gradient(to right,
      #05cafa var(--progress, 0%),
      rgba(255, 255, 255, 0.25) var(--progress, 0%));
}

.hvmc-seek::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: #05cafa;
}

/* Volume — fill driven by --vprogress */
.hvmc-volume {
  flex: 0 0 auto;
  width: 70px;
}

.hvmc-volume::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
      #05cafa var(--vprogress, 100%),
      rgba(255, 255, 255, 0.25) var(--vprogress, 100%));
}

.hvmc-volume::-moz-range-track {
  background: linear-gradient(to right,
      #05cafa var(--vprogress, 100%),
      rgba(255, 255, 255, 0.25) var(--vprogress, 100%));
}

.hvmc-volume::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: #05cafa;
}

@media (max-width: 768px) {
  .hero-video-modal {
    padding: 12px;
  }

  .hero-video-modal__close {
    top: -2.5rem;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.5rem;
  }

  .hero-video-modal__frame {
    max-height: min(56vh, calc(100vw * 9 / 16));
  }

  .hero-video-modal__controls {
    gap: 8px;
    padding: 8px 10px;
  }
}

@media (max-width: 480px) {
  .hvmc-volume {
    display: none;
  }
}

.project-filter-btn {
  background: transparent;
  border: none;
  padding: 8px 4px;
}

.project-filter-btn__text {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

.project-filter-btn--active .project-filter-btn__text,
.project-filter-btn:hover .project-filter-btn__text {
  color: #632fed;
  border-bottom-color: #632fed;
  font-weight: 600;
}

@media (min-width: 2100px) {
  .hero-video-modal__panel {
    width: min(100%, 1280px);
  }

  .services-content {
    --services-image-height: clamp(420px, 36vw, 540px);
  }
}

@media (min-width: 769px) {
  .hero-bl {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    top: -155px;
  }

  .hero-brand-row {
    padding-bottom: 20px;
  }
}

@media (min-width: 1700px) {
  .services-content {
    --services-image-height: clamp(420px, 36vw, 540px);
  }

  .hero-title {
    position: relative !important;
    top: -30px !important;
  }

  .hero-stat {
    position: relative !important;
    top: -30px !important;
  }

  .hero-brand-row {
    position: relative !important;
    top: -40px !important;
  }

  .hero-services {
    position: relative;
    bottom: -70px;
  }
}

@media (min-width: 2000px) {
  .hero-side {
    justify-content: space-between;
    /* gap: 300px; */
    height: 700px;
    padding-top: 0;
  }

  .hero-bl {
    order: 2;
    height: 70px;
    display: flex;
    flex-direction: column;
    gap: 98px;
    position: relative;
    top: -358px;
  }

  .hero-left {
    padding-top: 0;
  }

  .hero-container {
    padding-top: 0;
  }

  .hero-title {
    position: relative;
    top: -50px;
  }

  .hero-stat {
    position: relative;
    top: -50px;
  }

  .hero-services {
    position: relative;
    bottom: -40px;
  }
}

@media (min-width: 2360px) {
  .hero-services {
    position: relative;
    bottom: -170px;
  }
}

@media (max-width: 768px) {
  .hero-container {
    padding-bottom: var(--section-spacing-xl);
  }

  .process-grid {
    margin-top: 0;
  }
}

/* ── Blog skeleton / loader ── */
@keyframes blog-skeleton-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

.blog-skeleton {
  animation: blog-skeleton-pulse 1.4s ease-in-out infinite;
}

.blog-skeleton__card {
  background: var(--color-body1);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.blog-skeleton__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(90deg,
      #f0eeeb 0%,
      #e8e5e0 50%,
      #f0eeeb 100%);
  background-size: 200% 100%;
  animation: blog-skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes blog-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.blog-skeleton__body {
  padding: 20px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-skeleton__line {
  height: 14px;
  border-radius: 4px;
  background: #ebe8e4;
}

.blog-skeleton__line--sm {
  height: 11px;
  width: 40%;
}

.blog-skeleton__line--md {
  width: 75%;
}

.blog-skeleton__line--lg {
  width: 92%;
}

.blog-skeleton__line--title {
  height: 18px;
  width: 85%;
  margin-top: 4px;
}

/* Purple accent bar on the left of the card (subtle brand touch) */
.blog-skeleton__card::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--color-accent-secondary);
  opacity: 0.35;
}

/* ═══════════════════════════════════════════════
    Cookie Consent — banner + preferences modal
═══════════════════════════════════════════════ */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--color-body1);
  border: 1px solid var(--color-border-light);
  border-radius: 0;
  box-shadow:
    0 -20px 60px rgba(0, 0, 0, 0.18),
    0 -4px 16px rgba(0, 0, 0, 0.08);
  padding: 22px var(--gutter);
  font-family: var(--font-body);
}

.cookie-banner__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cookie-banner__title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--color-text-light);
}

.cookie-banner__desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-grey-2);
}

.cookie-banner__prefs-link {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: var(--color-accent-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.cookie-banner__prefs-link:hover {
  color: var(--color-accent-primary);
}

.cookie-banner__prefs-link:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.cookie-banner__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 10px;
}

.cookie-banner__btn {
  appearance: none;
  cursor: pointer;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.cookie-banner__btn--reject {
  background: transparent;
  border: 1px solid var(--color-border-dark, #2e2c2c);
  color: var(--color-text-light);
}

.cookie-banner__btn--reject:hover {
  background: var(--color-border-light);
}

.cookie-banner__btn--accept {
  background: var(--color-black-button);
  border: 1px solid var(--color-black-button);
  color: #fff;
}

.cookie-banner__btn--accept:hover {
  background: #000;
}

.cookie-banner__btn:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .cookie-banner {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .cookie-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-banner__btn {
    width: 100%;
    text-align: center;
  }
}

/* --- Preferences modal --- */
.cookie-prefs-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
}

.cookie-prefs-panel {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-body1);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  padding: 32px;
  font-family: var(--font-body);
}

.cookie-prefs__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.cookie-prefs__heading {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--text-1xl);
  color: var(--color-text-light);
}

.cookie-prefs__close-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-border-light);
  border: none;
  border-radius: 50%;
  color: var(--color-text-light);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cookie-prefs__close-btn:hover {
  background: #e2e2e2;
}

.cookie-prefs__close-btn:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.cookie-prefs__intro {
  margin: 0 0 20px;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-grey-2);
}

.cookie-prefs__categories {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border-light);
}

.cookie-prefs__category {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.cookie-prefs__category-text {
  flex: 1;
}

.cookie-prefs__category-label {
  display: block;
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text-light);
  margin-bottom: 4px;
}

.cookie-prefs__category-desc {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--color-text-grey-2);
}

.cookie-prefs__always-on {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--color-border-light);
  color: var(--color-text-grey-2);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.cookie-prefs__toggle {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  padding: 0;
  border-radius: 9999px;
  border: 1px solid var(--color-border-light);
  background: #d9d9d9;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cookie-prefs__toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

.cookie-prefs__toggle.is-on {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

.cookie-prefs__toggle.is-on .cookie-prefs__toggle-thumb {
  transform: translateX(18px);
}

.cookie-prefs__toggle:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.cookie-prefs__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.cookie-prefs__btn {
  appearance: none;
  cursor: pointer;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.cookie-prefs__btn--text {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-grey-2);
}

.cookie-prefs__btn--text:hover {
  color: var(--color-text-light);
}

.cookie-prefs__btn--save {
  background: var(--color-black-button);
  border: 1px solid var(--color-black-button);
  color: #fff;
}

.cookie-prefs__btn--save:hover {
  background: #000;
}

.cookie-prefs__btn:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .cookie-prefs-panel {
    padding: 24px 20px;
  }

  .cookie-prefs__footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .cookie-prefs__btn {
    width: 100%;
    text-align: center;
  }
}

/* --- Footer "Cookie Settings" reopen link --- */
.footer-cookie-settings-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--color-accent-white);
  cursor: pointer;
}

.footer-cookie-settings-btn:hover {
  opacity: 0.8;
}

.footer-cookie-settings-btn:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}


/* ── Empty-state message (blog list, blog article, work grid) ── */
.project-empty-state {
  width: 100%;
  padding: 2rem 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-grey-2);
}

/* Full-page "article not found" state — the only content between header and
   footer, so it needs real height instead of sitting flush against both. */
.blog-detail__not-found {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-height: 50vh;
  padding: var(--section-spacing-3xl) 0;
}

.blog-detail__not-found .project-empty-state,
.blog-detail__not-found .btn-animated {
  /* .v-lines-overlay (position:absolute, z-index:1) is a sibling, not an
     ancestor — each of these needs its own stacking position to paint
     above it; z-index on the shared parent alone doesn't reorder them. */
  position: relative;
  z-index: 2;
}

.blog-detail__not-found .project-empty-state {
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════
   Deadline Guarantee section
   Matches reference + existing design system
   ═══════════════════════════════════════════════════════════ */

.deadline-guarantee {
  position: relative;
  width: 100%;
  background: var(--color-body1, #ffffff);
}

.deadline-guarantee__inner {
  position: relative;
}

/* ── Vertical grid lines (4-col) ── */
.deadline-guarantee__vlines {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  z-index: 0;
}

.deadline-guarantee__vlines span {
  border-left: 1px solid var(--color-border-light, #eae7e7);
}

.deadline-guarantee__vlines span:last-child {
  border-right: 1px solid var(--color-border-light, #eae7e7);
}

/* ── Header: left eyebrow + main content ── */
.deadline-guarantee__header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: flex-start;
  gap: 0;
  padding-bottom: var(--section-spacing-md, clamp(40px, 3vw, 60px));
  padding-top: var(--section-spacing-header-lg);

  /* border-bottom: 1px solid var(--color-border-light, #eae7e7); */
}

.deadline-guarantee__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.15em;
  max-width: var(--grid-col, 25%);
}

.deadline-guarantee__diamond {
  display: inline-block;
  width: clamp(0.5rem, 1.2vw, 0.75rem);
  height: clamp(0.5rem, 1.2vw, 0.75rem);
  transform: rotate(45deg);
  background-color: var(--color-accent-secondary, #632fed);
  flex-shrink: 0;
}

.deadline-guarantee__eyebrow .badge {
  margin: 0;
  font-size: var(--text-lg, 16px);
  color: var(--color-text-light, #363636);
}

.deadline-guarantee__header-main {
  min-width: 0;
  padding-left: 0;
}

.deadline-guarantee__heading {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--text-3-4xl, clamp(20px, 1.3vw + 7px, 24px));
  line-height: 1.5;
  color: var(--color-accent-black, #000);
  margin: 0 0 clamp(16px, 2vw, 28px);
  max-width: none;
  width: 100%;
}

.deadline-guarantee__heading .highlight {
  color: var(--color-accent-secondary, #632fed);
}

.deadline-guarantee__intro {
  font-size: var(--text-lg, 16px);
  color: var(--color-text-light, #363636);
  line-height: 1.55;
  margin: 0;
  max-width: 42rem;
  width: 100%;
}

/* ── Three feature cards ── */
.deadline-guarantee__cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* border-top: 1px solid var(--color-border-light, #eae7e7);
  border-bottom: 1px solid var(--color-border-light, #eae7e7); */
}

.deadline-guarantee__card {
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.5rem);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  background: #f3f3f3;
  border-top: 1px solid var(--color-border-light, #eae7e7);
  border-bottom: 1px solid var(--color-border-light, #eae7e7);
  border-left: 1px solid var(--color-border-light, #eae7e7);
  /* margin-left: -1px; collapse double with previous card / v-line */
}

/* First card starts at column 2 (column 1 stays empty) */
.deadline-guarantee__card:first-child {
  grid-column: 2;
  margin-left: 0;
}

.deadline-guarantee__card:last-child {
  border-right: 1px solid var(--color-border-light, #eae7e7);
}

.deadline-guarantee__card-title {
  font-family: var(--font-body);
  font-size: var(--text-1xl, clamp(16px, 1.1vw + 8px, 20px));
  font-weight: 600;
  color: var(--color-accent-black, #000);
  margin: 0;
  line-height: 1.3;
}

.deadline-guarantee__card-body {
  font-family: var(--font-body);
  font-size: var(--text-lg, 16px);
  color: var(--color-text-light, #363636);
  line-height: 1.55;
  margin: 0;
}

/* ── Bottom commitment row ── */
.deadline-guarantee__footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gap: 1.5rem; */
  padding: clamp(1rem, 1.5vw, 1.25rem) 0;
  flex-wrap: wrap;
}

.deadline-guarantee__commitment {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
  flex: 1 1 auto;
  grid-column: 2 / 4;
  /* starts at col 2, spans two cols */
}

.deadline-guarantee__commitment-dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  /* margin-top: 0.45em; */
  color: var(--color-accent-secondary);
  /* border-radius: 50%; */
  /* border: 1.5px solid var(--color-text-grey-2, #737373);
  background: transparent; */
}

.deadline-guarantee__commitment-text {
  font-family: var(--font-body);
  font-size: var(--text-sm, clamp(0.75rem, 1.2vw, 0.875rem));
  color: var(--color-text-grey-2, #737373);
  line-height: 1.5;
  margin: 0;
}

.deadline-guarantee__commitment-text strong {
  font-weight: 400;
  color: var(--color-accent-black, #363636);
}

.deadline-guarantee__footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: clamp(1rem, 1.5vw, 1.25rem) 0;
}

.deadline-guarantee__promise {


  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  grid-column: 4;
  /* aligned with third card */
  justify-content: flex-end;
  color: var(--color-accent-secondary, #632fed);
  font-family: var(--font-body);
  font-size: var(--text-sm, clamp(0.75rem, 1.2vw, 0.875rem));
  font-weight: 500;
}

.deadline-guarantee__promise-label {
  white-space: nowrap;
}

.deadline-guarantee__promise-icon {
  display: inline-flex;
  color: inherit;
  line-height: 0;
}

.deadline-guarantee__promise-icon svg {
  width: 16px;
  height: 16px;
}

/* ═══════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .deadline-guarantee__header {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .deadline-guarantee__eyebrow {
    max-width: none;
  }

  .deadline-guarantee__heading {
    width: 100%;
  }

  .deadline-guarantee__intro {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  /* .deadline-guarantee {
    padding-top: var(--section-spacing-lg, clamp(36px, 5vw, 60px));
    padding-bottom: var(--section-spacing-md, clamp(40px, 3vw, 60px));
  } */

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

  .deadline-guarantee__vlines span:nth-child(4) {
    display: none;
  }

  .deadline-guarantee__vlines span:nth-child(3) {
    border-right: 1px solid var(--color-border-light, #eae7e7);
  }

  .deadline-guarantee__cards {
    grid-template-columns: 1fr;
    border-top: 1px solid var(--color-border-light, #eae7e7);
    border-bottom: none;
  }

  .deadline-guarantee__card {
    grid-column: 1 / -1;
    margin-left: 0;
    border-left: 1px solid var(--color-border-light);
    border-right: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    /* padding: 1.25rem 0; */
    background: #f3f3f3;
  }

  .deadline-guarantee__card:first-child {
    grid-column: 1 / -1;
  }

  .deadline-guarantee__card:last-child {
    border-right: none;
    border-bottom: 1px solid var(--color-border-light, #eae7e7);
  }

  .deadline-guarantee__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding-top: 1.25rem;
  }

  .deadline-guarantee__promise {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    align-self: flex-end !important;
  }

  .deadline-guarantee__commitment {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .deadline-guarantee__heading {
    font-size: clamp(18px, 5vw, 22px);
  }

  .deadline-guarantee__card-title {
    font-size: 18px;
  }
}

/* Top empty space on right side for visual alignment */

/* Base text color transition */
.process-step-item {
  color: #737373;
  transition: color 0.4s ease;
}

.process-step-item .step-title,
.process-step-item .step-number,
.process-step-item .step-description {
  color: inherit;
  transition: color 0.4s ease;
}

/* Active center state: Text turns white (works scrolling down and up) */
.process-step-item.is-active,
.process-step-item.is-active .step-title,
.process-step-item.is-active .step-number,
.process-step-item.is-active .step-description {
  color: #ffffff;
}

/* ==========================================
   Symmetrical Curtain Hover & Unhover
   ========================================== */
/* ==========================================
   Top-to-Bottom Drop Reveal Animation
   ========================================== */

/* 1. Base Element (Controls the Reverse / Exit Animation) */
.what-we-do__center_video,
.what-we-do__box,
.what-we-do-list__panel,
.what-we-do-list__media {
  overflow: hidden;

  /* Closed State: Clipped 100% from the bottom, anchoring to the top */
  clip-path: inset(0% 0% 100% 0%);
  opacity: 0;
  transform: scaleY(0.96);

  /* Crucial: anchor scaling to the top edge instead of center */
  transform-origin: top center;

  /* Smooth Reverse Transition on Hover-Out */
  transition:
    clip-path 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: clip-path, transform, opacity;
}

/* 2. Open State (Forward Animation on Hover-In) */
.what-we-do__row:hover .what-we-do__center_video,
.what-we-do__row:hover .what-we-do__box,
.what-we-do__row.active .what-we-do__center_video,
.what-we-do__row.active .what-we-do__box,
.what-we-do-list__item:hover .what-we-do-list__panel,
.what-we-do-list__item:hover .what-we-do-list__media,
.what-we-do-list__item.is-open .what-we-do-list__panel,
.what-we-do-list__item.is-open .what-we-do-list__media {

  /* Fully Open State */
  clip-path: inset(0% 0% 0% 0%);
  opacity: 1;
  transform: scaleY(1);

  /* Match Forward Transition Parameters */
  transition:
    clip-path 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* :root {
  --ink: #0B0B0F;
  --ink-60: #5B5B66;
  --ink-40: #8C8C97;
  --paper: #FFFFFF;
  --field: #F4F4F6;
  --field-hover: #EDEDF1;
  --rule: #E3E3E9;
  --violet: #5B21F0;
  --violet-dark: #4718C4;
  --cyan: #00DCF5;
  --magenta: #FF2FD6;
  --error: #D01B3C;

  --font-display: 'BrandDisplay', 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body: 'BrandText', 'Inter', system-ui, -apple-system, sans-serif;

  --gut: clamp(20px, 4vw, 48px);
}

.sds-contact * {
  box-sizing: border-box;
}

.sds-contact {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.sds-shell {
  max-width: 1240px;
  margin: 0 auto;
}

.sds-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink);
}

.sds-diamond {
  width: 9px;
  height: 9px;
  background: var(--violet);
  transform: rotate(45deg);
  flex: none;
}

.sds-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.02;
  letter-spacing: -.03em;
  max-width: 14ch;
}

.sds-title span {
  color: var(--violet);
}

.sds-lead {
  margin: 22px 0 0;
  max-width: 48ch;
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--ink-60);
}



.sds-formcol {
  padding-top: 8px;
  padding-right: clamp(32px, 5vw, 72px);
}

.sds-aside {
  border-left: 1px solid var(--rule);
}

.sds-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}


.sds-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(16px, 2.5vw, 28px);
  padding: 20px 0 20px 18px;
}

.sds-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
  width: 2px;
  background: var(--violet);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

.sds-row:focus-within::before {
  transform: scaleY(1);
}

.sds-row--single {
  grid-template-columns: 1fr;
}

.sds-row--split {
  grid-template-columns: 140px 1fr 1fr;
}

.sds-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sds-contact label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--ink);
}

.sds-opt {
  color: var(--ink-40);
  font-weight: 400;
}

.sds-req {
  color: var(--violet);
  margin-left: 2px;
}

.sds-contact input[type=text],
.sds-contact input[type=email],
.sds-contact input[type=tel],
.sds-contact select,
.sds-contact textarea {
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #f3f3f3;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 13px 14px;
  width: 100%;
  transition: background .15s, border-color .15s;
}

.sds-contact input::placeholder,
.sds-contact textarea::placeholder {
  color: var(--ink-40);
}

.sds-contact input:hover,
.sds-contact select:hover,
.sds-contact textarea:hover {
  background: var(--field-hover);
}

.sds-contact input:focus,
.sds-contact select:focus,
.sds-contact textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(91, 33, 240, .14);
}

.sds-contact textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

.sds-contact select {
  appearance: none;
  cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%230B0B0F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.sds-hint {
  font-size: 13px;
  color: var(--ink-40);
  margin: 7px 0 0;
}

.sds-err {
  font-size: 13px;
  color: var(--error);
  margin: 7px 0 0;
  font-weight: 500;
  display: block;
}

.sds-contact [aria-invalid="true"] {
  border-color: var(--error);
  background: #FEF4F6;
}

.sds-contact [aria-invalid="true"]:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(208, 27, 60, .14);
}




.sds-consent input[type=checkbox] {
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--violet);
  cursor: pointer;
}

.sds-consent label {
  font-size: 14px;
  color: var(--ink-60);
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
}

.sds-consent a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sds-consent a:hover {
  color: var(--violet);
}



.sds-submit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
  color: #fff;
  background: var(--violet);
  border: 0;
  border-radius: 999px;
  padding: 17px 42px;
  cursor: pointer;
  transition: background .18s, transform .18s;
}

.sds-submit:hover {
  background: var(--violet-dark);
}

.sds-submit:active {
  transform: translateY(1px);
}

.sds-submit[disabled] {
  background: var(--ink-40);
  cursor: not-allowed;
  transform: none;
}

.sds-privacy-note {
  font-size: 13px;
  color: var(--ink-40);
  margin: 0;
}

.sds-contact :focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

.sds-submit:focus-visible {
  outline-offset: 4px;
}

.sds-alert {
  border-left: 3px solid var(--error);
  background: #FEF4F6;
  padding: 14px 18px;
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--error);
  font-weight: 500;
}

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

.sds-success {
  padding: 40px 0 0 18px;
  max-width: 52ch;
}

.sds-check {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--violet);
  display: grid;
  place-items: center;
  margin-bottom: 24px;
}

.sds-check svg {
  display: block;
}

.sds-success h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.1;
  letter-spacing: -.025em;
  margin: 0 0 14px;
}

.sds-success p {
  margin: 0 0 18px;
  color: var(--ink-60);
}

.sds-ref {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  background: var(--field);
  padding: 9px 15px;
  color: var(--ink);
}

.sds-again {
  background: none;
  border: 0;
  padding: 0;
  margin-top: 26px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* .sds-aside h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin: 0 0 18px;
} */

.sds-benefits {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}



.sds-direct {
  border-top: 1px solid var(--rule);
  padding-top: 26px;
}

.sds-direct a {
  display: block;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 9px;
  font-weight: 500;
}

.sds-direct a:hover {
  color: var(--violet);
}

.sds-direct p {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--ink-40);
  line-height: 1.5;
}

@media (max-width: 1000px) {
  .sds-body {
    grid-template-columns: 1fr;
  }

  .sds-formcol {
    padding-right: 0;
    order: 1;
  }

  .sds-aside {
    order: 2;
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding: 36px 0 0;
    margin-top: 48px;
  }
}

@media (max-width: 640px) {

  .sds-row,
  .sds-row--split {
    grid-template-columns: 1fr;
    gap: 20px 0;
  }

  .sds-row {
    padding-left: 14px;
  }

  .sds-consent,
  .sds-actions,
  .sds-success {
    padding-left: 14px;
  }

  .sds-submit {
    width: 100%;
    text-align: center;
  }

  .sds-actions {
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sds-contact * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

.contact-form-container,
.job-form-container {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--section-spacing-xl);
}

.contact-form-grid,
.job-form-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  z-index: 2;
}

.form-vlines-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  z-index: 1;
}

.form-vlines-overlay span {
  border-left: 1px solid var(--color-border-light);
}

.form-vlines-overlay span:last-child {
  border-right: 1px solid var(--color-border-light);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  position: relative;
}


.form-help-text {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-grey-2);
  margin-top: 0.25rem;
}

.form-error-text {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-tech-primary);
  margin-top: 0.25rem;
}

.form-submit-btn {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-accent-white);
  background: var(--color-black-button);
  border: none;
  border-radius: 50px;
  padding: 0.8rem 2rem;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.3s ease;
  width: 100%;
  max-width: var(--grid-col);
  text-align: center;
}

.form-submit-btn:hover {
  opacity: 0.85;
}

@media (max-width: 768px) {

  .contact-form-grid,
  .job-form-grid,
  .form-vlines-overlay {
    grid-template-columns: repeat(3, 1fr);
  }

  .form-vlines-overlay span:nth-child(4) {
    display: none;
  }

  .form-vlines-overlay span:nth-child(3) {
    border-right: 1px solid var(--color-border-light);
  }

  .form-submit-btn {
    max-width: 100%;
  }
}

/* --- SDS Contact Form Layout & Theme --- */


.contact-form-section__wrapper {
  position: relative;
  max-width: var(--container-max, 1728px);
  margin-inline: auto;
  padding-inline: var(--gutter, 2.5rem);
}

/* Background vertical grid line alignment */
.contact-form__vlines {
  position: absolute;
  inset: 0 var(--gutter, 2.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  z-index: 0;
}

.contact-form__vlines span {
  border-left: 1px solid var(--color-border-light, #eae7e7);
}

.contact-form__vlines span:last-child {
  border-right: 1px solid var(--color-border-light, #eae7e7);
}

/* Main 4-column layout container (3 columns Form, 1 column Aside) */
.sds-body {
  position: relative;
  background-color: var(--color-accent-white);
  /* z-index: 1; */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: start;
  border-left: 1px solid var(--color-border-light);
  border-right: 1px solid var(--color-border-light);
}

.sds-formcol {
  grid-column: span 3;
}

.sds-aside {
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-left: 1px solid var(--color-border-light);
}

/* .sds-aside h2 {
  font-family: var(--font-primary);
  font-size: var(--text-1-2xl, 24px);
  color: var(--color-accent-black, #000);
  font-weight: 500;
  margin-bottom: 0.75rem;
} */

.sds-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sds-benefits li {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--text-base, 16px);
  color: var(--color-text-light, #363636);
  line-height: 1.5;
}


.sds-direct {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sds-direct a {
  font-family: var(--font-body);
  font-size: var(--text-base, 16px);
  color: var(--color-accent-black, #000);
  font-weight: 600;
  transition: color 0.2s ease;
}

.sds-direct a:hover {
  color: var(--color-accent-secondary, #632fed);
}

.sds-direct p {
  font-family: var(--font-body);
  font-size: var(--text-sm, 14px);
  color: var(--color-text-grey-2, #737373);
  line-height: 1.6;
  margin-top: 0.5rem;
}

/* Legend adjustment (Req 1) */
.sds-legend {
  border-bottom: none !important;
  font-family: var(--font-primary);
  font-size: var(--text-1xl, 20px);
  font-weight: 400;
  color: var(--color-accent-secondary, #000);
  margin-bottom: 1.5rem;
  padding: 0;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 2.25rem 0;
}

/* Form Row Layouts */
.sds-row {
  margin-bottom: 1.25rem;
}

.sds-row--two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.sds-row--single {
  display: block;
}

.sds-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.contact-form__label {
  font-family: var(--font-body);
  font-size: var(--text-sm, 14px);
  font-weight: 600;
  color: var(--color-accent-black, #000);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.sds-req {
  color: var(--color-accent-secondary, #f35ef2);
}

.sds-opt {
  font-weight: 400;
  color: var(--color-text-grey-2, #737373);
  font-size: var(--text-xs, 12px);
}

/* Input Fields & Height Harmonization (Req 5) */
.contact-form__input,
.contact-form__select {
  width: 100%;
  height: 52px;
  padding: 0 1rem;
  font-family: var(--font-body);
  font-size: var(--text-base, 16px);
  color: var(--color-accent-black, #000);
  background-color: #f3f3f3;
  /* border: 1px solid var(--color-border-light, #eae7e7);
  border-radius: 8px; */
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;

}

textarea.contact-form__input {
  height: 140px;
  padding: 0.875rem 1rem;
  resize: vertical;
}

.contact-form__input:focus,
.contact-form__select:focus {
  outline: none;
  border-color: var(--color-accent-secondary, #632fed);
  box-shadow: 0 0 0 3px rgba(99, 47, 237, 0.12);
}

/* Custom Select Dropdown Styling (Req 6) */
.contact-form__field-control {
  position: relative;
  width: 100%;
}

.contact-form__select-wrapper {
  position: relative;
  width: 100%;
}

.contact-form__select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
  padding-right: 2.5rem;
  background-color: #f3f3f3;
}


.contact-form__arrow {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.contact-form__arrow.is-open {
  transform: rotate(180deg);
}

/* .contact-form__select-wrapper.open .contact-form__select::after {
  transform: translateY(-25%) rotate(-135deg);
} */

.contact-form__select-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background-color: #f3f3f3;
  border: 1px solid var(--color-border-light, #eae7e7);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  max-height: 280px;
  overflow-y: auto;
  padding: 0.5rem;

}

.contact-form__select-option {
  width: 100%;
  text-align: left;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-body);
  font-size: var(--text-sm, 14px);
  color: var(--color-accent-black, #000);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.contact-form__select-option:hover,
.contact-form__select-option[aria-selected="true"] {
  background-color: var(--color-accent-secondary-tint, #f4effd);
  color: var(--color-accent-secondary, #632fed);
}

.contact-form__select-group {
  margin-bottom: 0.5rem;
}

.contact-form__select-group-label {
  padding: 0.5rem 0.875rem 0.25rem;
  font-size: var(--text-xs, 12px);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-grey-2, #737373);
  letter-spacing: 0.05em;
}

/* Error & Hint Styles */
.contact-form__error {
  font-size: var(--text-xs, 12px);
  color: #e53e3e;
  margin-top: 0.35rem;
  display: block;
}

.sds-hint {
  font-size: var(--text-xs, 12px);
  color: var(--color-text-grey-2, #737373);
  margin-top: 0.35rem;
}

.sds-hp {
  display: none !important;
}

.sds-consent {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.sds-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--color-accent-secondary, #632fed);
}

.sds-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.sds-submit {
  font-family: var(--font-body);
  font-size: var(--text-base, 16px);
  font-weight: 600;
  color: #ffffff;
  background-color: var(--color-black-button, #101010);
  border: none;
  border-radius: 50px;
  padding: 1rem 2rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.sds-submit:hover {
  opacity: 0.9;
}

.sds-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.sds-privacy-note {
  font-size: var(--text-xs, 12px);
  color: var(--color-text-grey-2, #737373);
}

.sds-alert {
  padding: 1rem;
  margin-bottom: 1.5rem;
  background-color: #fff5f5;
  border: 1px solid #fed7d7;
  color: #c53030;
  border-radius: 8px;
  font-size: var(--text-sm, 14px);
}

/* Responsive Behavior */
@media (max-width: 1024px) {
  .sds-body {
    grid-template-columns: 1fr;
  }

  .sds-formcol {
    grid-column: span 1;
  }

  .sds-aside {
    grid-column: span 1;
    padding-left: 0;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border-light, #eae7e7);
  }
}

@media (max-width: 640px) {
  .sds-row--two-col {
    grid-template-columns: 1fr;
  }
}

/* 404 page */
.not-found-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: var(--color-body1);
  padding: clamp(24px, 5vw, 64px);
}

.not-found-page__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 520px);
  min-height: auto;
  padding: 0;
  text-align: center;
}

.not-found-page__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 22px);
  line-height: 0.82;
  margin-bottom: clamp(26px, 3vw, 36px);
}

.not-found-page__code span {
  font-family: var(--font-primary);
  font-size: clamp(92px, 12vw, 160px);
  font-weight: 400;
  color: #2f2f2f;
  letter-spacing: 0;
}

.not-found-page__code img {
  width: clamp(108px, 13vw, 172px);
  height: auto;
  display: block;
}

.not-found-page__heading {
  font-family: var(--font-primary);
  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 400;
  color: var(--color-text-grey-2);
  line-height: 1.25;
  margin: 0 0 12px;
}

.not-found-page__description {
  font-family: var(--font-body);
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 500;
  color: #8a8a8a;
  line-height: 1.45;
  max-width: 430px;
  margin: 0 0 18px;
}

.not-found-page__home-btn.btn-animated {
  min-width: 136px;
  min-height: 40px;
  padding: 0 24px;
  background: #050505;
  color: var(--color-accent-white);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}