/* ==========================================================================
   Dfly Inc — Global Design System
   Base tokens, reset, typography, layout, and core components.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  /* clip, not hidden: hidden would make the root a scroll container and
     silently disable the sticky header. */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

section {
  /* Local clip boundary for [data-reveal="left"/"right"] elements, which
     sit translated off-canvas until scrolled into view — without this,
     one near a viewport edge can push real horizontal scroll. */
  overflow-x: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

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

ul,
ol {
  list-style: none;
}

/* --- Design Tokens --------------------------------------------------------
   Breakpoints (reference only — applied in responsive.css):
   sm: 576px | md: 768px | lg: 992px | xl: 1200px | xxl: 1400px
   ========================================================================== */
:root {
  /* Brand colors — sampled from the Dfly Inc logo */
  --color-primary: #eb651f;
  --color-primary-dark: #c8500f;
  /* Darker still — .btn-primary:hover. Also, --color-primary-dark (not
     --color-primary) is used for orange TEXT and for the button's own
     background: the sampled brand orange is ~3.3:1 against white in either
     direction, short of WCAG AA's 4.5:1 for text. primary-dark clears it
     (~4.6:1) while staying visibly the same hue. --color-primary itself is
     kept at full brand strength for icons/decorative graphics, which only
     need to meet the 3:1 non-text threshold. */
  --color-primary-darker: #a8420c;
  --color-primary-light: #f28c55;
  --color-primary-tint: #fdefe7;

  --color-navy: #171a2c;
  --color-navy-700: #232640;
  --color-navy-600: #2e3350;

  --color-white: #ffffff;
  --color-neutral-50: #f7f8fa;
  --color-neutral-100: #eef0f3;
  --color-neutral-200: #dfe3e9;
  --color-neutral-300: #c7ccd4;
  --color-neutral-500: #8a93a3;
  --color-neutral-700: #4a5568;
  --color-neutral-900: #1a202c;

  /* Semantic aliases */
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-neutral-50);
  --color-bg-dark: var(--color-navy);
  --color-text: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-700);
  --color-text-on-dark: var(--color-white);
  --color-text-on-dark-muted: var(--color-neutral-300);
  --color-border: var(--color-neutral-200);

  /* Typography */
  --font-base: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-base);

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
  --fs-2xl: clamp(2.25rem, 1.9rem + 1.6vw, 3rem);
  --fs-3xl: clamp(2.75rem, 2.2rem + 2.4vw, 4rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Layout */
  --container-max: 1320px;
  --container-padding: 12px; /* reference Bootstrap gutter: 1320px container, 1296px content */
  --grid-gap: 20px;
  --header-h: 81px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(11, 18, 32, 0.06);
  --shadow-md: 0 12px 32px rgba(11, 18, 32, 0.1);
  --shadow-lg: 0 24px 56px rgba(11, 18, 32, 0.16);
  --shadow-primary: 0 12px 28px rgba(235, 101, 31, 0.28);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;

  /* Z-index scale */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* --- Base ------------------------------------------------------------------ */
body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 1.875; /* 30px at 16px base, matching reference */
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* [data-reveal="left"/"right"] elements sit translated off-canvas until
     scrolled into view; near a viewport edge that pushes real horizontal
     overflow unless it's clamped here. clip keeps the sticky header working. */
  overflow-x: clip;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  color: var(--color-navy);
}

/* Sizes/weights/line-heights below match the reference site's measured
   computed styles (Lexend, H1 60/72, H2 40/60 uppercase, H3 20/24).
   Heading case: H2 section titles are uppercase; H3 and below keep their
   written Title Case everywhere (14 October 2026). */
h1 {
  /* Stepped, not fluid: reference is 60 / 42 / 38 / 28 (responsive.css). */
  font-size: 3.75rem;
  line-height: 1.2;
  font-weight: var(--fw-semibold);
  letter-spacing: normal;
}
h2 {
  font-size: 2.5rem;
  line-height: 1.5;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: normal;
}

/* Two-tone section headings (reference pattern): the highlighted words
   take the brand accent. */
h2 .hl {
  color: var(--color-primary-dark);
}

.section-dark h2 .hl,
.cta-banner h2 .hl,
.idea-cta-section h2 .hl,
.trust-strip-section:not(.is-light) h2 .hl,
.reviews-strip-section h2 .hl {
  color: var(--color-primary-light);
}
h3 {
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: var(--fw-bold);
  text-transform: none;
  letter-spacing: normal;
}
h4 {
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

p {
  color: var(--color-text-muted);
}

a {
  transition: color var(--duration-fast) var(--ease-standard);
}

/* --- Accessibility helpers -------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: var(--z-modal);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  transition: top var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  top: var(--space-sm);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

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

.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid-6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- Section spacing --------------------------------------------------------- */
.section {
  padding-block: 60px;
}

.section-sm {
  padding-block: 40px;
}

.section-lg {
  padding-block: calc(var(--space-3xl) + var(--space-xl));
}

.section-dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: var(--color-white);
}

.section-dark p {
  color: var(--color-text-on-dark-muted);
}

.section-alt {
  background-color: var(--color-bg-alt);
}

.text-center {
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 30px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}

/* --- Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 7px 20px;
  font-size: 16px;
  font-weight: var(--fw-semibold);
  line-height: 24px;
  border-radius: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  /* primary-dark, not primary: see the --color-primary-darker comment above. */
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-darker);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.btn-secondary:hover {
  background-color: var(--color-navy-600);
  transform: translateY(-2px);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-navy);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-navy);
  padding-inline: var(--space-2xs);
}

.btn-ghost:hover {
  color: var(--color-primary-dark);
}

.btn-sm {
  padding: 4px 14px;
  font-size: 14px;
}

.btn-lg {
  padding: 10px 20px;
  font-size: 20px;
  line-height: 30px;
}

/* --- Cards --------------------------------------------------------------------- */
.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: transform var(--duration-base) var(--ease-emphasized),
    box-shadow var(--duration-base) var(--ease-emphasized),
    border-color var(--duration-base) var(--ease-standard);
}

.card-hover:hover,
.card-hover.is-visible:hover {
  /* The .is-visible variant is required because [data-reveal].is-visible in
     animations.css (loaded after this file) shares this rule's specificity
     and would otherwise win the transform tie by source order, silently
     cancelling the hover lift on any card revealed via scroll animation. */
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-tint);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.card-icon .icon {
  width: 26px;
  height: 26px;
}

.card-dark {
  background-color: var(--color-navy-700);
  border-color: var(--color-navy-600);
}

.card-dark h3,
.card-dark h4 {
  color: var(--color-white);
}

.card-dark p {
  color: var(--color-text-on-dark-muted);
}

/* --- Form controls --------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.form-label {
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: var(--color-neutral-700);
}

.form-control {
  width: 100%;
  min-height: 40px;
  padding: 7px 20px;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
  background-color: var(--color-white);
  border: 1px solid #d1d1d1;
  border-radius: 3px;
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.form-control::placeholder {
  color: var(--color-neutral-500);
}

.form-control:hover {
  border-color: var(--color-neutral-300);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-tint);
}

textarea.form-control {
  min-height: 140px;
  resize: vertical;
}

.form-hint {
  font-size: var(--fs-xs);
  color: var(--color-neutral-500);
}

/* --- Icon system -------------------------------------------------------------------- */
.icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.icon-sm {
  width: 18px;
  height: 18px;
}

.icon-lg {
  width: 32px;
  height: 32px;
}

/* --- Header / Navigation -------------------------------------------------------------
   One shared header on every page (stamped by tools/build-chrome.js).
   Geometry measured against the reference at 1440px: 46px utility bar, 81px
   main bar, ~196x52 logo, 16px/30px nav links, 991px three-column mega menu
   hanging from the nav's baseline with a 3px top rule, instant open/close.
   Below 1200px the nav collapses to the slide-down panel (responsive.css). */

/* Utility bar: quick contact line + About/Contact + CTA. Not sticky. */
.utility-bar {
  background-color: var(--color-navy);
  color: var(--color-white);
  font-size: 16px;
  line-height: 30px;
}

.utility-bar-inner {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.utility-bar-left,
.utility-bar-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.utility-bar-right {
  gap: 18px;
}

.utility-bar a,
.utility-bar-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-white);
}

.utility-bar-left a {
  font-weight: var(--fw-semibold);
}

.utility-bar a:hover {
  color: var(--color-primary-light);
}

.utility-bar .icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary-light);
}

.utility-bar-divider {
  opacity: 0.7;
}

.utility-bar a.utility-cta {
  margin-left: 24px;
  padding: 1px 10px;
  border-radius: 4px;
  background-color: var(--color-primary-dark);
  font-weight: var(--fw-medium);
}

.utility-bar a.utility-cta:hover {
  background-color: var(--color-primary-darker);
  color: var(--color-white);
}

/* Main bar */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-white);
  box-shadow: 4px 1px 14px 1px rgba(0, 0, 0, 0.17);
}

.site-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.logo img {
  height: 32px;
  width: auto;
}

.site-header .logo img {
  height: 55px;
}

.logo-text {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Mega menus position against .site-header-inner, plain dropdowns against
   their own item. */
.nav-item {
  position: static;
}

.nav-item.has-dropdown:not(.has-mega) {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px;
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: var(--color-navy);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard);
}

.nav-dropdown-toggle {
  position: relative;
  padding-right: 18px;
  cursor: pointer;
}

.nav-link:hover,
.nav-link.is-active,
.nav-item.is-open > .nav-link {
  color: var(--color-primary-dark);
}

/* "+" that turns into "−" while open (reference indicator) */
.nav-indicator {
  position: absolute;
  top: 50%;
  right: 2px;
  width: 9px;
  height: 9px;
  transform: translateY(-50%);
}

.nav-indicator::before,
.nav-indicator::after {
  content: "";
  position: absolute;
  background-color: currentColor;
}

.nav-indicator::before {
  top: 4px;
  left: 0;
  right: 0;
  height: 1.5px;
}

.nav-indicator::after {
  top: 0;
  bottom: 0;
  left: 4px;
  width: 1.5px;
}

.nav-item.is-open .nav-indicator::after {
  display: none;
}

/* Dropdown panels — shown/hidden instantly, as on the reference. */
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 5;
  min-width: 170px;
  padding: 10px 0;
  background-color: var(--color-white);
  border-top: 3px solid var(--color-navy);
  box-shadow: 4px 1px 14px 1px rgba(0, 0, 0, 0.17);
}

.nav-item.is-open > .dropdown-menu {
  display: block;
}

.dropdown-menu a {
  display: block;
  padding: 4px 16px;
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: var(--color-navy);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard);
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible,
.dropdown-menu a[aria-current="page"] {
  color: var(--color-primary-dark);
}

.dropdown-menu.mega-menu {
  top: calc(50% + 24px);
  left: auto;
  right: var(--container-padding);
  width: min(991px, calc(100% - 2 * var(--container-padding)));
  padding: 20px;
}

.nav-item.is-open > .dropdown-menu.mega-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
}

.mega-menu a {
  white-space: normal;
}

.nav-panel-extra,
.header-quick-links {
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 36px;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-navy);
  border-radius: var(--radius-full);
  transition: transform var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard);
}

/* --- "We Serve" locations/industries block (pre-footer, every page) ------------- */
.serve-section {
  padding-block: 44px 48px;
  background-color: var(--color-bg-alt);
}

.serve-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 30px;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--color-border);
}

.serve-tab {
  padding: 9px 30px;
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 24px;
  color: var(--color-navy);
  background-color: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.serve-tab:hover {
  color: var(--color-primary-dark);
}

.serve-tab.is-active {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.serve-panel[hidden] {
  display: none;
}

.serve-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 24px;
}

.serve-grid li {
  flex: 0 0 calc((100% - 4 * 24px) / 5);
}

.serve-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: var(--color-navy);
  background-color: var(--color-white);
  border-left: 3px solid var(--color-navy);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.serve-chip:hover,
.serve-chip[aria-current="page"] {
  color: var(--color-primary-dark);
  border-left-color: var(--color-primary);
}

/* --- Footer ----------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-navy);
  color: var(--color-text-on-dark-muted);
  padding-block: 60px 80px;
}

.site-footer a {
  color: var(--color-white);
}

.site-footer a:hover {
  color: var(--color-primary-light);
}

.footer-logo {
  margin-top: var(--space-sm);
}

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

.footer-logo-tagline {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--color-text-on-dark-muted);
  letter-spacing: 0;
}

.footer-columns {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 1.15fr 0.95fr 1.05fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-navy-600);
}

.footer-blurb {
  font-size: 14px;
  line-height: 26px;
  color: var(--color-text-on-dark-muted);
}

.footer-col h3 {
  margin-bottom: 18px;
  font-size: 24px;
  font-weight: var(--fw-semibold);
  line-height: 30px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-primary-light);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-links a {
  display: inline-block;
  font-size: 16px;
  font-weight: var(--fw-semibold);
  line-height: 30px;
  transition: color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.footer-links a:hover {
  transform: translateX(3px);
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: 15px;
  line-height: 26px;
  color: var(--color-white);
}

.footer-contact-list .icon {
  margin-top: 4px;
  color: var(--color-primary-light);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 28px;
  text-align: center;
}

.footer-follow-title {
  font-size: 20px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  color: var(--color-primary-light);
}

.social-links {
  display: flex;
  gap: var(--space-2xs);
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background-color: var(--color-navy-700);
  transition: background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.social-links .icon {
  width: 18px;
  height: 18px;
}

.social-links a:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-3px);
}

.footer-copyright {
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 30px;
  text-transform: uppercase;
  letter-spacing: normal;
  color: var(--color-white);
}

/* ==========================================================================
   Homepage Sections
   ========================================================================== */

/* --- Shared section heading -------------------------------------------------- */
.section-heading {
  max-width: none;
  margin-inline: auto;
  margin-bottom: 36px;
}

/* Supporting copy under a heading keeps a readable measure. */
.section-heading > p {
  max-width: 1000px;
  margin-inline: auto;
}

.section-heading h2 {
  margin-top: var(--space-2xs);
}

.section-subtext {
  margin-top: var(--space-sm);
  font-size: var(--fs-md);
}

.text-center .eyebrow {
  justify-content: center;
}

/* --- Hero -------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-3xl) calc(var(--space-3xl) + var(--space-lg));
}

/* Worded titles in the Strength grid replace the former numeric counters. */
.strength-item .stat-number.stat-text {
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-navy);
}

.stat-number {
  font-size: 40px;
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  line-height: 30px;
}

.stat-label {
  margin-top: var(--space-3xs);
  font-size: 18px;
  line-height: 30px;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

/* --- About --------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: var(--space-2xl);
}

.about-visual {
  position: relative;
  min-height: 360px;
}

.about-lead {
  margin-top: var(--space-md);
  font-size: var(--fs-md);
}

.about-checklist {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.about-checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: var(--fw-medium);
  color: var(--color-navy);
}

.about-checklist .icon {
  flex-shrink: 0;
  color: var(--color-primary);
  padding: 4px;
  background-color: var(--color-primary-tint);
  border-radius: var(--radius-full);
}

/* --- Multi-card carousel (Services, Portfolio: N cards visible, scroll-snap) ----- */
.card-carousel {
  position: relative;
}

.card-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 20px;
  scrollbar-width: none;
  padding-bottom: 6px;
}

.card-carousel-track::-webkit-scrollbar {
  display: none;
}

.card-carousel-track > * {
  flex: 0 0 calc((100% - 2 * 20px) / 3);
  scroll-snap-align: start;
}

/* --- Services grid spacing ------------------------------------------------------- */
.services-grid .card {
  display: flex;
  flex-direction: column;
  position: relative;
}

.services-grid .card p {
  flex-grow: 1;
}

.services-grid .card > .btn {
  margin-top: var(--space-sm);
  align-self: flex-start;
}

.services-grid .card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background-color: var(--color-navy);
  color: var(--color-white);
  margin-bottom: calc(var(--space-sm) + 14px);
  box-shadow: 0 4px 0 0 var(--color-primary);
}

.services-grid .card h3 {
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}

.services-grid .card > .btn {
  font-weight: var(--fw-regular);
}

/* --- Feature grid (Why Choose Us) ------------------------------------------------- */
.feature-item .icon {
  width: 30px;
  height: 30px;
  color: var(--color-primary);
  padding: var(--space-xs);
  background-color: var(--color-primary-tint);
  border-radius: var(--radius-md);
}

.feature-item h3 {
  margin-top: var(--space-sm);
  font-size: var(--fs-md);
}

.feature-item p {
  margin-top: var(--space-3xs);
  font-size: var(--fs-sm);
}

/* --- Process timeline -------------------------------------------------------------- */
.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-lg);
  counter-reset: none;
}

.process-steps-4 {
  grid-template-columns: repeat(4, 1fr);
}

.process-step {
  position: relative;
  text-align: center;
  padding-top: var(--space-lg);
}

.process-step::before {
  content: "";
  position: absolute;
  top: 34px;
  left: calc(50% + 34px);
  width: calc(100% - 68px);
  height: 2px;
  background-image: linear-gradient(to right, var(--color-border) 0 6px, transparent 6px 12px);
  background-size: 12px 2px;
  background-repeat: repeat-x;
}

.process-step:last-child::before {
  display: none;
}

.process-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  color: var(--color-primary);
  position: relative;
  z-index: 1;
}

.process-step-number {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
}

.process-step h3 {
  margin-top: var(--space-2xs);
  font-size: var(--fs-md);
}

.process-step p {
  margin-top: var(--space-3xs);
  font-size: var(--fs-sm);
}

/* --- Portfolio ------------------------------------------------------------------------ */
.portfolio-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-white);
  transition: transform var(--duration-base) var(--ease-emphasized),
    box-shadow var(--duration-base) var(--ease-emphasized);
}

.portfolio-card:hover,
.portfolio-card.is-visible:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.portfolio-visual {
  position: relative;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.portfolio-visual-orange {
  background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
}

.portfolio-visual-navy {
  background: linear-gradient(145deg, var(--color-navy-700) 0%, var(--color-navy) 100%);
  color: var(--color-white);
}

.portfolio-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--space-lg);
}

.portfolio-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.portfolio-body h3 {
  margin-top: var(--space-2xs);
  font-size: var(--fs-md);
}

.portfolio-body p {
  margin-top: var(--space-2xs);
  font-size: var(--fs-sm);
  flex-grow: 1;
}

.portfolio-body .btn-ghost {
  margin-top: var(--space-sm);
}

.testimonial-card {
  flex: 0 0 calc((100% - 2 * 20px) / 3);
  scroll-snap-align: start;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
}

.testimonial-quote-icon {
  width: 34px;
  height: 34px;
  color: var(--color-primary-light);
}

.testimonial-stars {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: var(--space-sm);
  color: var(--color-primary);
}

/* Reference rating stars are solid gold. */
.testimonial-stars .icon {
  color: #f5b83d;
  fill: currentColor;
}

.testimonial-text {
  margin-top: var(--space-md);
  font-size: var(--fs-md);
  color: var(--color-navy);
  line-height: var(--lh-normal);
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.testimonial-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-primary-tint);
  color: var(--color-primary-dark);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}

.testimonial-author div {
  text-align: left;
}

.testimonial-author strong {
  display: block;
  color: var(--color-navy);
  font-size: var(--fs-sm);
}

.testimonial-author span {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.testimonial-controls {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* --- Tabs widget (icon-tab strip + swapping content panel) ---------------------------------- */
.tabs-widget {
  max-width: 960px;
  margin-inline: auto;
}

.tab-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  background-color: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
}

.tab-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-sm);
  background-color: var(--color-white);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.tab-trigger .icon {
  width: 26px;
  height: 26px;
}

.tab-trigger:hover {
  background-color: var(--color-primary-tint);
}

.tab-trigger.is-active {
  background-color: var(--color-white);
  color: var(--color-primary-dark);
  box-shadow: inset 0 -3px 0 var(--color-primary);
}

.tab-panels {
  background-color: var(--color-navy);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-xl);
}

.tab-panel {
  display: none;
  color: var(--color-white);
}

.tab-panel.is-active {
  display: block;
}

.tab-panel h3 {
  color: var(--color-primary-light);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-sm);
  border-bottom: 1px dashed var(--color-navy-700);
}

.tab-panel p {
  color: var(--color-neutral-200);
  line-height: var(--lh-normal);
}

/* --- Help tabs (pill-style tab triggers + side-by-side content panel) ------------------------ */
.help-tab-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  background: none;
  border: none;
  border-radius: 0;
}

.help-tab-trigger {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-navy);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
}

.help-tab-trigger .icon {
  width: 18px;
  height: 18px;
}

.help-tab-trigger:hover {
  background-color: var(--color-neutral-50);
}

.help-tab-trigger.is-active {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
  box-shadow: none;
}

.help-tab-panels {
  background: none;
  border-radius: 0;
  padding: 0;
  margin-top: var(--space-2xl);
}

.help-tab-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  color: inherit;
}

.help-tab-panel.is-active {
  display: grid;
}

.help-tab-panel .slide-visual {
  order: 2;
}

.help-tab-content {
  order: 1;
}

.help-tab-content h3 {
  color: var(--color-navy);
  text-transform: none;
  letter-spacing: normal;
  padding-bottom: 0;
  margin-bottom: var(--space-sm);
  border-bottom: none;
  font-size: var(--fs-2xl);
}

.help-tab-content p {
  color: var(--color-text-muted);
}

/* --- Trust badge strip (certifications / tools / platforms) --------------------------------- */
.trust-strip-section {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.trust-strip-section.is-light {
  background-color: var(--color-neutral-50);
  color: var(--color-navy);
}

.trust-strip-section .section-heading h2,
.reviews-strip-section .section-heading h2 {
  color: var(--color-white);
}

.trust-strip-section.is-light .section-heading h2 {
  color: var(--color-navy);
}

.trust-strip-lead {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  color: var(--color-neutral-200);
}

.trust-strip-section.is-light .trust-strip-lead {
  color: var(--color-text-muted);
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.trust-strip-section.is-light .trust-badge {
  background-color: var(--color-white);
  border-color: var(--color-border);
  color: var(--color-navy);
}

.trust-badge .icon {
  color: var(--color-primary-light);
}

.trust-strip-section.is-light .trust-badge .icon {
  color: var(--color-primary);
}

/* --- Secondary reviews strip ------------------------------------------------------------------ */
.reviews-strip-section {
  background-color: var(--color-navy);
  color: var(--color-white);
}

/* --- Mid-page "bring ideas to life" CTA section ---------------------------------------------- */
.idea-cta-section {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-700) 100%);
  color: var(--color-white);
}

.idea-cta-grid-2col h2 {
  color: var(--color-white);
  margin-top: var(--space-2xs);
}

.idea-cta-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.idea-cta-list {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: left;
}

.idea-cta-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  color: var(--color-neutral-200);
}

.idea-cta-list .icon {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-primary-light);
}

/* --- Lead capture form card (hero + mid-page CTA embedded forms) ---------------------------- */
.lead-form-card {
  background-color: var(--color-white);
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  padding: 16px 16px 20px;
  width: 100%;
  max-width: 531px;
}

.lead-form-card-title {
  font-size: 20px;
  font-weight: var(--fw-semibold);
  line-height: 30px;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-navy);
  padding: 18px 12px 19px;
  margin-bottom: 21px;
  background-color: var(--color-primary-tint);
  border-bottom: 2px dashed var(--color-primary);
}

.lead-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.lead-form-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2xs);
  padding: 10px 20px;
  font-size: 20px;
  line-height: 30px;
}

.lead-form-success {
  text-align: center;
  padding: var(--space-md) 0;
}

.lead-form-success .icon {
  color: var(--color-success, var(--color-primary));
  width: 36px;
  height: 36px;
}

.lead-form-success p {
  margin-top: var(--space-xs);
  color: var(--color-text-muted);
}

/* --- Slide carousel (single-slide-at-a-time, e.g. "Why Us") ---------------------------------- */
.slide-carousel {
  position: relative;
}

.slide-carousel-track {
  position: relative;
  min-height: 380px;
}

.slide {
  display: none;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-2xl);
  align-items: center;
}

.slide.is-active {
  display: grid;
}

.slide-visual {
  min-height: 320px;
}

.slide-eyebrow-tag {
  display: inline-block;
  padding: var(--space-3xs) var(--space-sm);
  background-color: var(--color-neutral-100);
  color: var(--color-primary-dark);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
}

.slide-content h3 {
  margin-top: var(--space-sm);
  font-size: var(--fs-2xl);
}

.slide-content p {
  margin-top: var(--space-md);
  color: var(--color-text-muted);
  max-width: 52ch;
}

.slide-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.slide-carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  color: var(--color-navy);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.slide-carousel-btn:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.slide-carousel-dots {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-left: var(--space-sm);
}

.slide-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--color-neutral-300);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.slide-carousel-dot.is-active {
  background-color: var(--color-primary);
  transform: scale(1.3);
}

/* --- Sticky bottom conversion bar ------------------------------------------------------------ */
.sticky-conversion-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-700) 100%);
  box-shadow: 0 -8px 24px rgba(11, 18, 32, 0.18);
  transform: translateY(0);
  transition: transform var(--duration-base) var(--ease-emphasized);
}

.sticky-conversion-bar.is-dismissed {
  transform: translateY(100%);
}

.sticky-conversion-bar-inner {
  display: flex;
  align-items: stretch;
}

.sticky-conversion-item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-xs);
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.sticky-conversion-item:last-of-type {
  border-right: none;
}

.sticky-conversion-item:hover,
.sticky-conversion-item:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
}

.sticky-conversion-item .icon {
  flex-shrink: 0;
  color: var(--color-primary-light);
}

.sticky-conversion-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.sticky-conversion-close:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Keep the bar from ever covering page content, footer included */
body.has-sticky-bar {
  padding-bottom: 52px;
}

@media (prefers-reduced-motion: reduce) {
  .sticky-conversion-bar {
    transition: none;
  }
}

/* --- Result KPI table + growth badges (individual result/case detail pages) ------------------ */
.kpi-table-wrap {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow-x: auto;
  max-width: 900px;
  margin-inline: auto;
}

.kpi-table {
  width: 100%;
  border-collapse: collapse;
}

.kpi-table thead th {
  background-color: var(--color-primary-tint);
  color: var(--color-primary-dark);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-sm) var(--space-md);
  text-align: left;
}

.kpi-table thead th:not(:first-child) {
  text-align: center;
}

.kpi-table tbody td {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px dashed var(--color-border);
  font-size: var(--fs-sm);
}

.kpi-table tbody td:not(:first-child) {
  text-align: center;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
}

.kpi-table tbody tr:nth-child(even) {
  background-color: var(--color-neutral-50);
}

.growth-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.growth-badge {
  padding: var(--space-md) var(--space-lg);
  border: 2px solid var(--color-primary-tint);
  border-radius: var(--radius-md);
  text-align: center;
  min-width: 130px;
}

.growth-badge-value {
  display: block;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary-dark);
}

.growth-badge-label {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* --- Growth comparison (illustrative before/after dashboard mockups) ------------------------- */
.growth-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  max-width: 1000px;
  margin-inline: auto;
}

.growth-compare-panel-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
}

.growth-compare-panel-label.is-before {
  background-color: var(--color-neutral-100);
  color: var(--color-text-muted);
}

.growth-compare-panel-label.is-after {
  background-color: var(--color-primary-tint);
  color: var(--color-primary-dark);
}

.dashboard-mockup {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.dashboard-mockup-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-xs) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.dashboard-mockup-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-neutral-200);
}

.dashboard-mockup-bar-label {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--color-neutral-500);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}

.dashboard-mockup-body {
  padding: var(--space-md);
}

.dashboard-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xs);
  margin-bottom: var(--space-sm);
}

.dashboard-kpi-chip {
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--color-neutral-50);
  border-radius: var(--radius-sm);
  text-align: center;
}

.dashboard-kpi-chip strong {
  display: block;
  font-size: var(--fs-md);
  color: var(--color-navy);
}

.dashboard-kpi-chip span {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

.dashboard-mockup.is-after .dashboard-kpi-chip strong {
  color: var(--color-primary-dark);
}

.dashboard-mockup-chart {
  width: 100%;
  height: 90px;
  color: var(--color-neutral-300);
}

.dashboard-mockup.is-after .dashboard-mockup-chart {
  color: var(--color-primary);
}

/* --- Results snapshots gallery ----------------------------------------------------------------- */
.snapshot-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.snapshot-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-emphasized),
    box-shadow var(--duration-base) var(--ease-emphasized);
}

.snapshot-card:hover,
.snapshot-card.is-visible:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.snapshot-card-visual {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background-color: var(--color-neutral-50);
}

.snapshot-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.snapshot-card-caption {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-border);
}

.snapshot-card-caption strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-navy);
}

.snapshot-card-caption span {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.illustrative-note {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-neutral-500);
  margin-top: var(--space-lg);
}

/* --- FAQ ------------------------------------------------------------------------------------ */
.faq-container {
  max-width: var(--container-max);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background-color: var(--color-white);
  border-radius: 30px;
  box-shadow: 0 2px 14px rgba(11, 18, 32, 0.06);
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: 20px 30px;
  text-align: left;
  font-size: 18px;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-navy);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.faq-question:hover {
  background-color: var(--color-bg-alt);
}

.faq-question .icon {
  flex-shrink: 0;
  color: var(--color-primary);
  transition: transform var(--duration-base) var(--ease-emphasized);
}

.faq-item.is-open .faq-question .icon {
  transform: rotate(135deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-base) var(--ease-emphasized);
}

.faq-answer p {
  padding: 0 30px 20px;
  font-size: 16px;
  line-height: 30px;
}

/* --- CTA banner ------------------------------------------------------------------------------ */
.cta-banner {
  padding-block: var(--space-3xl);
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-700) 100%);
  color: var(--color-white);
  text-align: center;
}

.cta-banner-content {
  max-width: 640px;
}

.cta-banner h2 {
  color: var(--color-white);
}

.cta-banner p {
  margin-top: var(--space-sm);
  color: var(--color-text-on-dark-muted);
}

.cta-banner .btn {
  margin-top: var(--space-lg);
}

/* --- Contact -------------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-2xl);
}

.contact-info h2 {
  margin-top: var(--space-2xs);
}

.contact-info-list {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-info-list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.contact-info-list .icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: var(--space-2xs);
  color: var(--color-primary);
  background-color: var(--color-primary-tint);
  border-radius: var(--radius-md);
}

.contact-form {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.form-success {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-tint);
  color: var(--color-primary-dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: center;
}

/* ==========================================================================
   About Page
   ========================================================================== */

/* --- Page hero (compact inner-page header band) ------------------------------ */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-3xl) var(--space-2xl);
  background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
  text-align: center;
}

.page-hero-glow {
  position: absolute;
  top: -240px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-primary-tint) 0%, rgba(253, 239, 231, 0) 70%);
  z-index: -1;
  pointer-events: none;
}

.page-hero-content {
  max-width: 700px;
}

/* --- Page hero with embedded lead form (service, industry and location
   templates): reference composition — full-bleed dark visual, H1 + accent
   line left, tall lead form right. ---------------------------------------- */
.page-hero.has-form {
  padding-block: 70px;
  color: var(--color-white);
  background: var(--color-navy) url("../assets/images/photos/hero-backdrop.jpg") center / cover no-repeat;
  isolation: isolate;
}

.page-hero.has-form::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(16, 19, 38, 0.92) 0%, rgba(16, 19, 38, 0.6) 55%, rgba(16, 19, 38, 0.25) 100%);
}

.page-hero.has-form .page-hero-glow {
  display: none;
}

.page-hero.has-form .container {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  justify-content: space-between;
  gap: var(--space-lg);
  align-items: center;
  text-align: left;
}

.page-hero.has-form h1 {
  color: var(--color-white);
}

.page-hero.has-form .page-hero-lead {
  margin-top: 12px;
  font-size: 20px;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--color-primary-light);
}

.page-hero.has-form .page-hero-content {
  max-width: none;
}

.page-hero-content h1 {
  margin-top: var(--space-sm);
}

.page-hero-lead {
  margin-top: var(--space-md);
  font-size: var(--fs-md);
}

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

/* --- Timeline ------------------------------------------------------------------- */
.timeline {
  position: relative;
  max-width: 780px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.timeline::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 27px;
  width: 2px;
  background-color: var(--color-border);
}

.timeline-item {
  position: relative;
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}

.timeline-marker {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  color: var(--color-primary);
}

.timeline-year {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}

.timeline-body h3 {
  margin-top: var(--space-3xs);
  font-size: var(--fs-md);
}

.timeline-body p {
  margin-top: var(--space-3xs);
  font-size: var(--fs-sm);
}

/* --- Team / culture -------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.discipline-panel {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.discipline-panel-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  margin-bottom: var(--space-md);
}

.discipline-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.discipline-bar-row {
  display: grid;
  grid-template-columns: 132px 1fr 44px;
  align-items: center;
  gap: var(--space-sm);
}

.discipline-bar-label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.discipline-bar-track {
  display: block;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-neutral-100);
  overflow: hidden;
}

.discipline-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  transition: width 1.1s var(--ease-emphasized);
}

.discipline-panel.is-visible .discipline-bar-fill {
  width: var(--bar, 0%);
}

.discipline-bar-value {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  text-align: right;
}

/* ==========================================================================
   Services Page
   ========================================================================== */

/* --- Alternating service rows -------------------------------------------------- */
.services-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-2xl);
  scroll-margin-top: var(--header-h);
}

.service-row:nth-of-type(even) .service-visual {
  order: 2;
}

.service-visual {
  position: relative;
  min-height: 320px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.service-content .card-icon {
  margin-bottom: var(--space-sm);
}

.service-content h2 {
  font-size: var(--fs-xl);
}

.service-content > p {
  margin-top: var(--space-sm);
  font-size: var(--fs-md);
}

.service-checklist {
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* --- Work teaser band ------------------------------------------------------------ */
.work-teaser {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.work-teaser-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.work-teaser h2 {
  color: var(--color-white);
  font-size: var(--fs-xl);
}

.work-teaser .section-subtext {
  color: var(--color-text-on-dark-muted);
}

.work-teaser .btn-secondary {
  background-color: var(--color-white);
  color: var(--color-navy);
  flex-shrink: 0;
}

.work-teaser .btn-secondary:hover {
  background-color: var(--color-primary-tint);
}

/* ==========================================================================
   Service Sub-Pages
   ========================================================================== */

/* --- Breadcrumb ------------------------------------------------------------------ */
.breadcrumb {
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

/* Reference: the breadcrumb is a tinted bar directly under the hero/banner. */
.page-hero + .breadcrumb,
.page-banner + .breadcrumb {
  background-color: var(--color-primary-tint);
  border-bottom: 0;
}

.page-hero + .breadcrumb a,
.page-banner + .breadcrumb a {
  color: var(--color-primary-dark);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.breadcrumb a {
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-standard);
}

.breadcrumb a:hover {
  color: var(--color-primary-dark);
}

.breadcrumb .icon {
  width: 14px;
  height: 14px;
  color: var(--color-neutral-300);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-navy);
  font-weight: var(--fw-medium);
}

/* --- Related services cross-links -------------------------------------------------- */
.related-services-grid a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--duration-base) var(--ease-emphasized),
    box-shadow var(--duration-base) var(--ease-emphasized),
    border-color var(--duration-base) var(--ease-standard);
}

.related-services-grid a:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.related-services-grid .icon:first-child {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--color-primary);
}

.related-services-grid span {
  flex-grow: 1;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  font-size: var(--fs-sm);
}

.related-services-grid .icon-arrow-up-right,
.related-services-grid svg:last-child {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-neutral-500);
}

/* --- Sub-service chip links (e.g. Digital Marketing's SEO/CRO/etc.) ------------------ */
.subpage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}

.subpage-chips a {
  padding: var(--space-3xs) var(--space-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-navy);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.subpage-chips a:hover {
  background-color: var(--color-primary-tint);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* ==========================================================================
   Portfolio & Case Studies
   ========================================================================== */

/* --- Filter bar (reused by both Portfolio and Case Studies) ---------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xl);
}

.filter-btn {
  padding: var(--space-2xs) var(--space-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.filter-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.filter-btn.is-active {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

.filterable-grid [data-category] {
  transition: opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.filterable-grid [data-category].is-filtered-out {
  display: none;
}

.filter-empty-state {
  display: none;
  padding: var(--space-3xl) 0;
  text-align: center;
  color: var(--color-text-muted);
}

.filter-empty-state.is-visible {
  display: block;
}

/* --- Case study cards --------------------------------------------------------------- */
.case-study-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: transform var(--duration-base) var(--ease-emphasized),
    box-shadow var(--duration-base) var(--ease-emphasized);
}

.case-study-card:hover,
.case-study-card.is-visible:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.case-study-card:nth-child(3n+2) {
  border-top-color: var(--color-navy);
}

.case-metric {
  display: flex;
  align-items: baseline;
  gap: var(--space-3xs);
}

.case-metric-value {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  line-height: 1;
}

.case-metric-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.case-tag {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: 3px var(--space-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-primary-dark);
  background-color: var(--color-primary-tint);
  border-radius: var(--radius-full);
}

.case-study-card h3 {
  margin-top: var(--space-sm);
  font-size: var(--fs-md);
}

.case-study-card p {
  margin-top: var(--space-2xs);
  font-size: var(--fs-sm);
}

.case-study-card .btn-ghost {
  margin-top: var(--space-sm);
}

/* --- Portfolio <-> Case Studies cross-link band ------------------------------------- */
.cross-link-band {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.cross-link-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.cross-link-content h2 {
  color: var(--color-white);
  font-size: var(--fs-xl);
}

.cross-link-content .section-subtext {
  color: var(--color-text-on-dark-muted);
}

.cross-link-content .btn-secondary {
  background-color: var(--color-white);
  color: var(--color-navy);
  flex-shrink: 0;
}

.cross-link-content .btn-secondary:hover {
  background-color: var(--color-primary-tint);
}

/* ==========================================================================
   Case Study Detail Pages
   ========================================================================== */

/* --- Meta / overview grid ----------------------------------------------------------- */
.case-meta-grid {
  max-width: 900px;
  margin-inline: auto;
}

.case-meta-item {
  text-align: center;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-alt);
}

.case-meta-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.case-meta-value {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-navy);
}

/* --- Narrative sections (Challenge / Strategy / Implementation) --------------------- */
.case-narrative {
  max-width: 760px;
  margin-inline: auto;
}

.case-narrative p + p {
  margin-top: var(--space-sm);
}

.case-narrative .eyebrow {
  justify-content: center;
}

.case-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-md);
  background-color: var(--color-primary-tint);
  color: var(--color-primary);
}

/* --- Results comparison cards -------------------------------------------------------- */
.metric-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  transition: transform var(--duration-base) var(--ease-emphasized),
    box-shadow var(--duration-base) var(--ease-emphasized);
}

.metric-card:hover,
.metric-card.is-visible:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.metric-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.metric-values {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
}

.metric-before {
  font-size: var(--fs-sm);
  color: var(--color-neutral-500);
  text-decoration: line-through;
  text-decoration-color: var(--color-neutral-300);
}

.metric-values .icon {
  width: 16px;
  height: 16px;
  color: var(--color-neutral-300);
}

.metric-after {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

/* --- Technology / service tags -------------------------------------------------------- */
.tech-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
}

.tech-tags span {
  padding: var(--space-2xs) var(--space-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-navy);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

/* --- Before/after visual panel ---------------------------------------------------------- */
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  max-width: 640px;
  margin-inline: auto;
}

.before-after-panel {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}

.before-after-panel .icon {
  color: currentColor;
  opacity: 0.85;
}

.before-after-label {
  margin-top: var(--space-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   Legal Pages
   ========================================================================== */
.legal-content {
  max-width: 760px;
  margin-inline: auto;
}

.legal-updated {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.legal-content h2 {
  font-size: var(--fs-lg);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-2xs);
}

.legal-content h2:first-of-type {
  margin-top: 0;
}

.legal-content p {
  margin-top: var(--space-sm);
}

.legal-content ul {
  margin-top: var(--space-sm);
  padding-left: var(--space-lg);
  list-style: disc;
}

.legal-content ul li {
  color: var(--color-text-muted);
  margin-top: var(--space-2xs);
}

.legal-content a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-decoration-color: var(--color-primary-tint);
  text-underline-offset: 3px;
}

.legal-content a:hover {
  color: var(--color-primary-darker);
}

/* --- Contact page "what happens next" reuses .process-steps; only new bit
   below is the compact FAQ spacing already covered by .faq-container --- */
.contact-page-faq {
  margin-top: var(--space-3xl);
}

/* Forensic service-template parity: reference uses five process steps. */
.process-steps-5 {
  grid-template-columns: repeat(5, 1fr);
}

/* Samples template */
.section-inline-cta {
  margin-top: var(--space-xl);
}

/* ==========================================================================
   Reference-composition components (homepage first, reused by templates)
   Proportions measured from the reference at 1440px; colours, copy and
   imagery are Dfly's own.
   ========================================================================== */

/* --- Homepage hero: full-bleed dark visual, H1 + accent line left, tall
   seven-field lead form right (~962px tall at 1440). ---------------------- */
.home-hero {
  position: relative;
  overflow: hidden;
  padding-block: 70px;
  background-color: var(--color-navy);
  color: var(--color-white);
}

.home-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16, 19, 38, 0.92) 0%, rgba(16, 19, 38, 0.6) 55%, rgba(16, 19, 38, 0.25) 100%);
}

.home-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* Reference 7:5 split (749 + 531 in the 1296px container). */
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
}

.home-hero h1 {
  color: var(--color-white);
}

.home-hero-sub {
  margin-top: 12px;
  font-size: 28px;
  line-height: 1.3;
  color: var(--color-primary-light);
}

.home-hero-lead {
  margin-top: var(--space-md);
  max-width: 560px;
  color: var(--color-neutral-200);
}

.req {
  color: var(--color-primary-dark);
}

.phone-field {
  display: flex;
}

.phone-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: 15px;
  color: var(--color-navy);
  background-color: var(--color-neutral-50);
  border: 1px solid #d1d1d1;
  border-right: 0;
  border-radius: 3px 0 0 3px;
}

.phone-field .form-control {
  border-radius: 0 3px 3px 0;
}

.lead-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}

/* --- Who We Are -------------------------------------------------------- */
.who-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 520px);
  gap: 56px;
  align-items: center;
}

.who-content > p {
  color: var(--color-text);
}

.who-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 26px;
}

.who-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-text);
}

.who-checklist .icon {
  margin-top: 6px;
  padding: 3px;
  width: 20px;
  height: 20px;
  color: var(--color-white);
  background-color: var(--color-navy);
  border-radius: 50%;
}

.who-visual {
  position: relative;
  padding: 0 0 24px 24px;
}

.who-visual-frame {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 78%;
  height: 72%;
  background-color: var(--color-primary);
  border-radius: 22px;
}

.who-visual img {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 22px;
}

.who-badge {
  position: absolute;
  top: 24px;
  right: -12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 22px;
  text-align: center;
  background-color: var(--color-white);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  font-size: 15px;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.who-badge strong {
  font-size: 36px;
  line-height: 1.2;
  color: var(--color-navy);
}

/* --- Our Strength: soft panel with six equal cards (3 / 2 / 1 columns) --- */
.strength-box {
  position: relative;
  overflow: hidden;
  padding: 56px 48px;
  background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-primary-tint) 100%);
  border-radius: 20px;
}

/* Soft orange glow in the corner instead of the former solid triangle. */
.strength-box::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(235, 101, 31, 0.16), transparent);
  pointer-events: none;
}

.strength-box h2 {
  position: relative;
  text-align: center;
  margin-bottom: 40px;
}

.strength-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  counter-reset: strength;
}

.strength-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 30px 28px 32px;
  background-color: var(--color-white);
  border: 1px solid rgba(11, 18, 32, 0.06);
  border-radius: 16px;
  box-shadow: 0 14px 34px -22px rgba(11, 18, 32, 0.35);
  counter-increment: strength;
  transition: transform var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}

/* Faint 01–06 index in the top-right corner. */
.strength-item::before {
  content: counter(strength, decimal-leading-zero);
  position: absolute;
  top: 22px;
  right: 26px;
  font-size: 38px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: rgba(11, 18, 32, 0.06);
}

/* Orange top line that grows in on hover. */
.strength-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-base) var(--ease-out);
}

.strength-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -22px rgba(11, 18, 32, 0.4);
}

.strength-item:hover::after {
  transform: scaleX(1);
}

.strength-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  color: var(--color-primary-dark);
  background-color: var(--color-primary-tint);
  border-radius: 14px;
}

.strength-icon .icon {
  width: 28px;
  height: 28px;
}

.strength-item .stat-label {
  margin-top: 8px;
  font-size: 16px;
  line-height: 26px;
}

/* --- Side-arrow carousels (services, portfolio) ------------------------- */
.card-carousel.side-arrows {
  padding-inline: 44px;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-navy);
  background-color: var(--color-white);
  border: 1.5px solid var(--color-navy);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.carousel-arrow:hover {
  color: var(--color-white);
  background-color: var(--color-navy);
}

.carousel-arrow .icon {
  width: 18px;
  height: 18px;
}

.carousel-arrow-prev {
  left: 0;
}

.carousel-arrow-prev .icon {
  transform: rotate(90deg);
}

.carousel-arrow-next {
  right: 0;
}

.carousel-arrow-next .icon {
  transform: rotate(-90deg);
}

.card-carousel-track > .svc-card,
.card-carousel-track > .work-card,
.card-carousel-track > .voice-card {
  flex-basis: calc((100% - 2 * 24px) / 3);
}

.svc-track,
.work-track,
.voice-track {
  gap: 24px;
  padding: 6px 4px 40px;
}

/* Service card: title, copy, icon block low-left overlapping the edge,
   outlined "Know More" right (reference composition). */
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 24px 24px 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(11, 18, 32, 0.06);
}

.svc-card h3 {
  color: var(--color-navy);
}

.svc-card p {
  margin-top: 14px;
  color: var(--color-text);
}

.svc-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 20px;
  transform: translateY(26px);
}

.svc-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  color: var(--color-white);
  background-color: var(--color-navy);
  border-radius: 6px;
  box-shadow: inset 0 -4px 0 var(--color-primary);
}

.svc-card-icon .icon {
  width: 32px;
  height: 32px;
}

.svc-card-link {
  margin-bottom: 38px;
}

/* --- Certified band ------------------------------------------------------ */
.certified-section {
  background: var(--color-navy) url("../assets/images/banner-backdrop.svg") center / cover no-repeat;
  color: var(--color-white);
}

.certified-section h2 {
  color: var(--color-white);
}

.certified-lead {
  text-align: center;
  color: var(--color-neutral-200);
}

.certified-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 16px;
  margin-top: 30px;
  padding: 16px 20px;
  background-color: var(--color-white);
  border-radius: 6px;
}

.certified-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 17px;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
}

.certified-badge .icon {
  width: 30px;
  height: 30px;
  color: var(--color-primary);
}

/* --- How We Can Help (tabs) --------------------------------------------- */
.help-tabs {
  max-width: 1080px;
}

.help-tab-trigger {
  position: relative;
  gap: 12px;
  padding: 18px 26px;
  border-radius: 8px;
  font-size: 15px;
  box-shadow: 0 4px 16px rgba(11, 18, 32, 0.08);
}

.help-tab-trigger .icon {
  width: 30px;
  height: 30px;
}

.help-tab-trigger.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  border: 9px solid transparent;
  border-bottom: 0;
  border-top-color: var(--color-navy);
  transform: translateX(-50%);
}

.help-tab-panels {
  margin-top: 36px;
}

.help-tab-panel {
  gap: 36px;
}

.help-tab-content h3 {
  font-size: 26px;
  line-height: 1.35;
}

.help-tab-content p {
  color: var(--color-text);
}

.help-tab-visual {
  order: 2;
  width: 100%;
  height: auto;
  border-radius: 22px;
}

/* --- Tools we use -------------------------------------------------------- */
.tools-lead {
  color: var(--color-text);
}

.tools-marquee {
  margin-top: 28px;
  padding-top: 28px;
  overflow: hidden;
  border-top: 1px dashed var(--color-neutral-300);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.tools-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: tools-scroll 40s linear infinite;
}

.tools-marquee:hover .tools-track {
  animation-play-state: paused;
}

@keyframes tools-scroll {
  to {
    transform: translateX(calc(-50% - 9px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .tools-track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }
}

.tool-tile {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 230px;
  min-height: 64px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.tool-tile .icon {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}

/* --- Point cards: short scannable points instead of long centred
   paragraphs (Tools We Use, Practical Expertise) ------------------------- */
.certified-lead,
.tools-lead {
  max-width: 760px;
  margin-inline: auto;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
}

.point-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.point-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 22px;
  text-align: left;
  background-color: var(--color-white);
  border: 1px solid rgba(11, 18, 32, 0.06);
  border-radius: 16px;
  box-shadow: 0 14px 34px -22px rgba(11, 18, 32, 0.35);
}

.point-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  color: var(--color-primary-dark);
  background-color: var(--color-primary-tint);
  border-radius: 12px;
}

.point-icon .icon {
  width: 24px;
  height: 24px;
}

.point-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-navy);
}

.point-card p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-muted);
}

/* On the dark Practical Expertise band. */
.certified-section .point-card {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.certified-section .point-icon {
  color: var(--color-primary-light);
  background-color: rgba(235, 101, 31, 0.16);
}

.certified-section .point-card h3 {
  color: var(--color-white);
}

.certified-section .point-card p {
  color: var(--color-neutral-200);
}

@media (max-width: 991px) {
  .point-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .point-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 24px;
  }

  .point-card {
    flex-direction: row;
    align-items: flex-start;
    padding: 18px;
  }

  .certified-lead,
  .tools-lead {
    font-size: 16px;
    line-height: 27px;
  }
}

/* --- Why Us (single slide: large visual + copy, arrows low right) ------- */
.why-carousel .slide {
  grid-template-columns: minmax(0, 480px) 1fr;
  gap: 40px;
  align-items: start;
}

.slide-image {
  width: 100%;
  height: auto;
  border-radius: 22px;
}

.why-carousel .slide-content h3 {
  margin-top: 10px;
  font-size: 30px;
  line-height: 1.3;
}

.why-carousel .slide-content p {
  max-width: none;
  color: var(--color-text);
}

.why-carousel .slide-carousel-controls {
  justify-content: flex-end;
  margin-top: 6px;
}

.why-carousel .slide-carousel-btn {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--color-navy);
}

.why-carousel .slide-carousel-btn .icon {
  width: 18px;
  height: 18px;
}

.why-carousel [data-slide-prev] .icon {
  transform: rotate(90deg);
}

.why-carousel [data-slide-next] .icon {
  transform: rotate(-90deg);
}

/* --- Platform expertise strip (overlaps the navy CTA band below) -------- */
.platforms-section {
  position: relative;
  z-index: 1;
  padding-top: 44px;
  margin-bottom: -60px;
}

.platforms-section h2 {
  margin-bottom: 18px;
}

.platforms-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: 12px 28px;
  padding: 22px 30px;
  background-color: var(--color-white);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 10px 30px rgba(11, 18, 32, 0.12);
}

.platform-mark {
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--color-navy-600);
  opacity: 0.85;
}



.idea-cta-section h2 {
  line-height: 1.5;
}

/* --- Across-Gujarat strip (reference "featured on") --------------------- */
.gujarat-strip-section h2 {
  margin-bottom: 26px;
}

.gujarat-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
}

.city-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 26px;
  font-weight: var(--fw-bold);
  color: var(--color-navy-600);
  transition: color var(--duration-fast) var(--ease-standard);
}

.city-mark .icon {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.city-mark:hover {
  color: var(--color-primary-dark);
}

/* --- Services We Offer (boxed tabs) ------------------------------------- */
.offer-box {
  padding: 50px 30px 30px;
  background: linear-gradient(120deg, #eef1fb 0%, #fff8f3 55%, #fdefe7 100%);
  border-radius: 20px;
}

.offer-tabs {
  max-width: none;
}

.offer-tabs .tab-list {
  max-width: 1040px;
  margin-inline: auto;
  grid-template-columns: repeat(7, 1fr);
  border-radius: 6px 6px 0 0;
}

.offer-tabs .tab-trigger {
  padding: 16px 8px;
  font-size: 14px;
  font-weight: var(--fw-regular);
  color: var(--color-neutral-500);
  text-transform: uppercase;
  letter-spacing: normal;
}

.offer-tabs .tab-trigger .icon {
  width: 36px;
  height: 36px;
}

.offer-tabs .tab-trigger.is-active {
  color: var(--color-navy);
}

.offer-tabs .tab-panels {
  padding: 26px 40px 34px;
  text-align: center;
  border-radius: 0;
}

.offer-tabs .tab-panel h3 {
  font-size: 26px;
  line-height: 1.4;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
}

.offer-tabs .tab-panel p {
  line-height: 30px;
  text-align: left;
}

.offer-tabs .tab-panel .btn {
  margin-top: 20px;
}

/* --- Portfolio cards ----------------------------------------------------- */
.work-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 16px rgba(11, 18, 32, 0.06);
}

.work-card-media {
  position: relative;
  aspect-ratio: 864 / 440;
  overflow: hidden;
  background-color: var(--color-neutral-50);
}

.work-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-card-tag {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  background-color: var(--color-navy);
}

.work-card-body {
  padding: 16px 20px 18px;
}

.work-card-body h3 {
  font-size: 18px;
  line-height: 1.35;
}

.work-card-metric {
  margin-top: 8px;
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
}

.work-card-metric strong {
  font-size: 20px;
  color: var(--color-primary-dark);
}

.work-card-meta {
  margin-top: 2px;
  font-size: 14px;
}

.work-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  background-color: var(--color-navy);
}

.work-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--color-navy);
  background-color: var(--color-primary-light);
  border-radius: 50%;
}

.work-card-link:hover .work-card-arrow {
  background-color: var(--color-white);
}

/* --- Illustrative feedback: the one feedback section on every page -------- */
.voices-section {
  background: linear-gradient(120deg, #eef1fb 0%, #ffffff 45%, #fff8f3 100%);
}

.voice-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 28px 24px;
  background-color: var(--color-white);
  border: 1px solid rgba(11, 18, 32, 0.06);
  border-radius: 16px;
  box-shadow: 0 14px 34px -22px rgba(11, 18, 32, 0.35);
}

/* Orange top line that grows in on hover (as on the Strength cards). */
.voice-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-base) var(--ease-out);
}

.voice-card:hover::after {
  transform: scaleX(1);
}

.voice-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.voice-card-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  color: var(--color-primary-dark);
  background-color: var(--color-primary-tint);
  border-radius: 14px;
}

.voice-card-mark .icon {
  width: 24px;
  height: 24px;
}

.voice-card-badge {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  line-height: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy-700);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

.voice-card-quote {
  flex: 1;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-text);
}

.voice-card-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.voice-card-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--color-white);
  background-color: var(--color-navy);
  border-radius: 50%;
}

.voice-card-avatar .icon {
  width: 20px;
  height: 20px;
}

.voice-card-foot strong {
  display: block;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-navy);
}

.voice-card-foot div span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 18px;
  font-style: italic;
  color: var(--color-text-muted);
}

.voices-more {
  margin-top: 8px;
  text-align: center;
}

.voices-more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-semibold);
  color: var(--color-primary-darker);
}

.voices-more-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--color-neutral-300);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.carousel-dot.is-active {
  background-color: var(--color-navy);
}

.carousel-dots.is-light .carousel-dot {
  background-color: rgba(255, 255, 255, 0.35);
}

.carousel-dots.is-light .carousel-dot.is-active {
  background-color: var(--color-white);
}

/* --- Reviews: boxed navy carousel --------------------------------------- */
.reviews-box {
  padding: 36px 40px 30px;
  background: var(--color-navy) url("../assets/images/banner-backdrop.svg") center / cover no-repeat;
  border-radius: 8px;
}

/* Reference: the reviews heading is 32/38.4 bold, left-aligned, at every width. */
.reviews-box h2 {
  margin-bottom: 26px;
  font-size: 32px;
  font-weight: var(--fw-bold);
  line-height: 38.4px;
  color: var(--color-white);
}

.review-track {
  gap: 24px;
  padding-bottom: 20px;
}

.card-carousel-track > .review-tile {
  flex-basis: calc((100% - 24px) / 2);
}

.review-tile {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 16px;
  background-color: var(--color-white);
  border-radius: 4px;
}

.review-tile-name {
  font-size: 18px;
  color: var(--color-navy);
}

.review-tile-role {
  font-size: 14px;
  color: var(--color-text-muted);
}

.review-tile p {
  margin-top: 12px;
  color: var(--color-text);
}

.review-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.review-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
}

.review-source .icon {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-radius: 50%;
  padding: 2px;
}

/* --- FAQ: navy +/- disc ------------------------------------------------ */

.faq-question {
  padding-right: 64px;
  position: relative;
}

.faq-toggle {
  position: absolute;
  right: 26px;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--color-navy);
  transform: translateY(-50%);
}

.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  background-color: var(--color-white);
  transform: translate(-50%, -50%);
}

.faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.is-open .faq-toggle::after {
  display: none;
}

.faq-question .icon {
  display: none;
}

.faq-item.is-open .faq-answer p {
  color: var(--color-text);
}

.section-subtext {
  color: var(--color-text);
}

/* ==========================================================================
   Service / industry / location templates (reference composition)
   ========================================================================== */

/* Intro: centred two-tone heading over copy + checklist left, visual right. */
.svc-intro-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px);
  gap: 48px;
  align-items: center;
}

.svc-intro-content > p {
  color: var(--color-text);
}

.svc-intro-content > p + p {
  margin-top: 12px;
}

.svc-intro-visual img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}

/* Numbered navy service cards in a carousel (reference services carousel). */
.num-cards-section {
  background: linear-gradient(120deg, #fff8f3 0%, #ffffff 50%, #fdefe7 100%);
}

.num-track {
  gap: 24px;
  padding: 34px 4px 30px;
}

.card-carousel-track > .num-card {
  flex-basis: calc((100% - 3 * 24px) / 4);
}

.num-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 330px;
  padding: 44px 22px 0;
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-navy);
  border-radius: 2px;
}

.num-card-index {
  position: absolute;
  top: -28px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 18px;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  background-color: var(--color-white);
  border: 2px dashed var(--color-navy-600);
  border-radius: 50%;
  outline: 5px solid var(--color-white);
  transform: translateX(-50%);
}

.num-card h3 {
  color: var(--color-white);
}

.num-card p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 26px;
  color: var(--color-neutral-200);
}

.num-card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: stretch;
  margin: auto -22px 0;
  padding: 9px 12px;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  background-color: var(--color-primary-light);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.num-card-link.is-static {
  min-height: 8px;
  padding: 0;
}

a.num-card-link:hover {
  background-color: var(--color-white);
}

/* Things to know: vertical question list + answer panel in a bordered box. */
.ttk-box {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 30px;
  padding: 40px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.ttk-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 460px;
  overflow-y: auto;
  padding-right: 6px;
}

.ttk-tab {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 24px;
  text-align: left;
  color: var(--color-navy);
  background-color: #fff8f3;
  border: 1px solid var(--color-primary-light);
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.ttk-tab .icon {
  margin-top: 4px;
  color: var(--color-primary-dark);
}

.ttk-tab:hover {
  background-color: var(--color-primary-tint);
}

.ttk-tab.is-active {
  color: var(--color-white);
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.ttk-tab.is-active .icon {
  color: var(--color-white);
}

.ttk-panel {
  padding: 26px 30px 30px;
  background-color: var(--color-white);
  box-shadow: 0 6px 24px rgba(11, 18, 32, 0.1);
}

.ttk-panel[hidden] {
  display: none;
}

.ttk-panel h3 {
  padding-bottom: 14px;
  margin-bottom: 16px;
  font-size: 22px;
  line-height: 1.35;
  text-transform: none;
  border-bottom: 1px solid var(--color-primary-light);
}

.ttk-panel p {
  color: var(--color-text);
}

/* Approach: icon tab row + white panel (copy + framed visual) on a split
   light / navy band. */
.approach-section {
  position: relative;
  background-color: var(--color-bg-alt);
}

/* Navy band on the right, starting below the heading (reference split). */
.approach-section::before {
  content: "";
  position: absolute;
  top: 150px;
  right: 0;
  bottom: 0;
  width: 39%;
  background-color: var(--color-navy);
}

.approach-section > .container {
  position: relative;
}

.approach-icons {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 28px;
}

.approach-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  color: var(--color-navy);
  background-color: var(--color-white);
  box-shadow: 0 6px 18px rgba(11, 18, 32, 0.12);
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.approach-icon .icon {
  width: 34px;
  height: 34px;
}

.approach-icon.is-active,
.approach-icon:hover {
  color: var(--color-white);
  background-color: var(--color-navy);
  outline: 3px solid var(--color-white);
}

.approach-panel {
  display: grid;
  grid-template-columns: 1fr minmax(0, 470px);
  gap: 40px;
  align-items: center;
  padding: 40px;
  background-color: var(--color-white);
  box-shadow: 0 8px 30px rgba(11, 18, 32, 0.1);
}

.approach-panel[hidden] {
  display: none;
}

.approach-step {
  font-size: 15px;
  color: var(--color-primary-dark);
}

.approach-copy h3 {
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.35;
  text-transform: none;
}

.approach-copy p {
  margin-top: 12px;
  color: var(--color-text);
}

.approach-copy .btn {
  margin-top: 22px;
}

.approach-visual {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 14px -14px 0 var(--color-navy);
}

/* Benefits: six centred white cards with corner accents. */
.feature-grid.grid-4 {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-grid .feature-item {
  position: relative;
  padding: 34px 28px 30px;
  text-align: center;
  background-color: var(--color-white);
  box-shadow: 0 6px 24px rgba(11, 18, 32, 0.08);
}

.feature-grid .feature-item:first-child::before,
.feature-grid .feature-item:last-child::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 90px;
  pointer-events: none;
}

.feature-grid .feature-item:first-child::before {
  top: -6px;
  left: -6px;
  border-top: 4px solid var(--color-navy);
  border-left: 4px solid var(--color-primary);
}

.feature-grid .feature-item:last-child::after {
  right: -6px;
  bottom: -6px;
  border-right: 4px solid var(--color-navy);
  border-bottom: 4px solid var(--color-primary);
}

.feature-grid .feature-item .icon {
  width: 52px;
  height: 52px;
  margin-inline: auto;
  padding: 0;
  color: var(--color-navy);
  background: none;
  stroke-width: 1.4;
}

.feature-grid .feature-item h3 {
  margin-top: 14px;
  font-size: 20px;
  line-height: 1.3;
}

.feature-grid .feature-item p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 26px;
  color: var(--color-text);
}

/* Industry link blocks (Rajkot service + industry entry points). */
.industry-links-section h2 {
  margin-bottom: 24px;
}

.industry-groups {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.industry-group {
  padding: 22px 24px;
  background-color: var(--color-white);
  border-top: 3px solid var(--color-primary);
  box-shadow: 0 4px 18px rgba(11, 18, 32, 0.07);
}

.industry-group h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.industry-group h3 a:hover,
.industry-group li a:hover {
  color: var(--color-primary-dark);
}

.industry-group li a {
  font-size: 15px;
  line-height: 30px;
  color: var(--color-text);
}

.related-cities-section h2 {
  margin-bottom: 24px;
}

.city-mark.is-current {
  color: var(--color-primary-dark);
}

/* Lead forms (hero, mid-page and sidebar): the same compact card as the
   homepage hero (css/home-hero.css). */
.dhero-card.lead-dcard {
  padding: 30px 32px 32px;
  text-align: left;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(11, 18, 32, 0.06);
  color: var(--color-navy-700);
}

.lead-dcard .dhero-card-title {
  max-width: 330px;
  margin: 0 auto 22px;
  font-size: 22px;
  line-height: 27px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--color-navy-700);
}

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

.lead-dcard .dhero-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 14px;
}

.lead-dcard .dhero-form .form-group {
  display: block;
  margin: 0;
}

.lead-dcard .dhero-field-full,
.lead-dcard .dhero-submit {
  grid-column: 1 / -1;
}

.lead-dcard .dhero-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--color-navy-700);
}

.lead-dcard .dhero-req {
  color: var(--color-primary);
}

.lead-dcard .dhero-input {
  display: block;
  width: 100%;
  height: 45px;
  padding: 0 18px;
  font-size: 15px;
  color: var(--color-neutral-900);
  background-color: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.lead-dcard .dhero-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-tint);
}

.lead-dcard .dhero-select {
  height: 46px;
  padding-left: 19px;
}

.lead-dcard .dhero-textarea {
  height: 87px;
  min-height: 87px;
  padding: 14px 15px;
  font-size: 14px;
  line-height: 20px;
  resize: vertical;
}

.lead-dcard .dhero-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 49px;
  margin-top: 6px;
  font-size: 17px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--color-white);
  background-color: var(--color-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-primary);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.lead-dcard .dhero-submit:hover {
  background-color: var(--color-primary-dark);
}

.lead-dcard .dhero-submit:focus-visible {
  outline: 2px solid var(--color-navy-700);
  outline-offset: 3px;
}

.lead-dcard .dhero-submit-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

@media (max-width: 1199px) {
  .dhero-card.lead-dcard {
    padding: 28px 24px;
  }
}

@media (max-width: 575px) {
  .dhero-card.lead-dcard {
    padding: 24px 20px;
  }

  .lead-dcard .dhero-card-title {
    font-size: 20px;
    line-height: 26px;
    margin-bottom: 18px;
  }

  .lead-dcard .dhero-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lead-dcard .dhero-input,
  .lead-dcard .dhero-submit {
    transition: none;
  }
}

/* ==========================================================================
   Inner content pages (reference composition)
   ========================================================================== */

/* ~260px banner: dark visual, centred white H1. */
.page-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 260px;
  padding-block: 60px;
  overflow: hidden;
  text-align: center;
  background-color: var(--color-navy);
}

.page-banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-banner .container {
  position: relative;
}

.page-banner h1 {
  color: var(--color-white);
}

.page-intro {
  padding-top: 40px;
}

.page-intro-lead {
  max-width: 900px;
  margin-inline: auto;
  font-size: 18px;
  line-height: 32px;
  text-align: center;
  color: var(--color-text);
}

.idea-cta-lead {
  margin-top: 16px;
  color: var(--color-neutral-200);
}

/* Portfolio / samples cards: image-led. */
.portfolio-media,
.case-media {
  aspect-ratio: 864 / 440;
  overflow: hidden;
  background-color: var(--color-neutral-50);
}

.portfolio-media img,
.case-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-emphasized);
}

.portfolio-card:hover .portfolio-media img,
.case-study-card:hover .case-media img {
  transform: scale(1.04);
}

.case-study-card {
  overflow: hidden;
}

.case-study-card .case-media {
  margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) var(--space-md);
}

/* Services hub rows. */
.service-media img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}

/* Result / case-study detail: client header + large preview. */
.result-showcase-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--color-primary-light);
}

.result-showcase-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
  border-radius: 14px;
}

.result-showcase-title {
  font-size: 30px;
  line-height: 1.3;
}

.result-showcase-note {
  margin-left: auto;
  font-size: 14px;
  color: var(--color-text-muted);
}

.result-showcase {
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
}

.result-showcase img {
  width: 100%;
  height: auto;
}

/* Results archive (every result page, filterable). */
.results-archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}

.results-archive-toolbar .form-control {
  width: auto;
  min-width: 280px;
}

.results-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.results-archive-grid li[hidden] {
  display: none;
}

.result-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 16px 18px;
  background-color: var(--color-white);
  border-left: 3px solid var(--color-navy);
  box-shadow: 0 2px 10px rgba(11, 18, 32, 0.07);
  transition: border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.result-tile:hover {
  border-left-color: var(--color-primary);
  transform: translateY(-2px);
}

.result-tile-name {
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
}

.result-tile-industry {
  font-size: 14px;
  color: var(--color-text-muted);
}

.result-tile-growth {
  margin-top: 4px;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--color-primary-dark);
}

/* Result detail: preview sits in the content column; the KPI table lives in
   a navy box (reference "Results Overview"). */
.result-showcase {
  width: min(1296px, calc(100% - 2 * var(--container-padding)));
  margin-inline: auto;
}

#results-overview .container {
  padding: 44px 40px 48px;
  background: var(--color-navy) url("../assets/images/banner-backdrop.svg") center / cover no-repeat;
  border-radius: 20px;
}

#results-overview .section-heading h2 {
  color: var(--color-white);
}

#results-overview .section-heading h2 .hl {
  color: var(--color-primary-light);
}

.voice-grid {
  gap: 24px;
}

/* Contact consent: occupies the reference captcha slot (bordered 64px box). */
.form-consent {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px;
  border: 1px solid #d1d1d1;
  border-radius: 3px;
}

.form-consent-input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-primary-dark);
}

.form-consent-label {
  font-size: 14px;
  line-height: 22px;
  color: var(--color-neutral-700);
}

.form-consent-label a {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.lead-form-grid .form-consent {
  grid-column: 1 / -1;
}

/* Certified: reference caps the heading at ~746px (two lines). */
.certified-section h2 {
  max-width: 760px;
  margin-inline: auto;
}

/* Ideas CTA: reference hangs the card 200px below the band top (the platform
   strip overlaps the first 60px) with 80px beneath; copy column ~450px. */
.platforms-section + .idea-cta-section {
  padding-top: 190px;
  padding-bottom: 80px;
}

.idea-cta-grid-2col > :first-child {
  max-width: 540px;
}

.idea-cta-grid-2col h2 {
  max-width: 450px;
}

/* Benefit cards: reference cards are ~416x332 with a large outline icon. */
.feature-grid .feature-item {
  min-height: 332px;
  padding: 44px 30px 36px;
}

.feature-grid .feature-item .icon {
  width: 64px;
  height: 64px;
}

/* ==========================================================================
   Work hubs (Portfolio / Case Studies / Results / Samples): reference
   composition — filters + two-column cards left, sticky contact form and
   categories right.
   ========================================================================== */
.hub-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 30px;
  align-items: start;
}

.hub-aside {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hub-aside .lead-form-card {
  max-width: none;
  border-top: 3px solid var(--color-navy);
}

.hub-form-title {
  text-align: left;
  text-transform: none;
  background: none;
  padding: 4px 0 10px;
  font-size: 22px;
  border-bottom: 2px dashed var(--color-primary);
}

.hub-aside-card {
  padding: 22px 24px;
  background-color: var(--color-white);
  border-top: 3px solid var(--color-navy);
  box-shadow: var(--shadow-sm);
}

.hub-aside-title {
  margin-bottom: 12px;
  font-size: 22px;
  line-height: 1.4;
  text-transform: none;
}

.hub-categories li + li {
  border-top: 1px solid var(--color-border);
}

.hub-categories a {
  display: block;
  padding: 8px 0;
  font-size: 15px;
  color: var(--color-text);
}

.hub-categories a:hover {
  color: var(--color-primary-dark);
}

/* Filter pills: accent outline, navy when active. */
.hub-main .filter-bar {
  justify-content: flex-start;
  margin-bottom: 24px;
}

.hub-main .filter-btn {
  padding: 4px 14px;
  font-size: 14px;
  color: var(--color-primary-dark);
  border-color: var(--color-primary-light);
  border-radius: 4px;
}

.hub-main .filter-btn.is-active {
  color: var(--color-white);
  background-color: var(--color-navy);
  border-color: var(--color-navy);
}

.hub-main .filterable-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* Cards: image, tag badge, accent title, navy "Know More" bar. */
.hub-main .portfolio-card,
.hub-main .case-study-card:not(.cs-card) {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
}

.hub-main .case-study-card:not(.cs-card) .case-media {
  margin: 0;
}

.hub-main .portfolio-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 0;
}

.hub-main .case-study-card:not(.cs-card) > :not(.case-media):not(.btn-ghost) {
  margin-inline: 18px;
}

.hub-main .portfolio-tag,
.hub-main .case-tag {
  position: absolute;
  right: 0;
  /* Bottom-right corner of the 864:440 image (reference placement). */
  top: calc(100cqw * 440 / 864 - 28px);
  margin: 0;
  line-height: 16px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  background-color: var(--color-navy);
  border-radius: 0;
}

.hub-main .portfolio-card h3,
.hub-main .case-study-card:not(.cs-card) h3 {
  margin-top: 4px;
  font-size: 20px;
  line-height: 1.35;
  text-transform: none;
  color: var(--color-primary-dark);
}

.hub-main .case-metric {
  margin-top: 14px;
}

.hub-main .portfolio-card .btn-ghost,
.hub-main .case-study-card:not(.cs-card) .btn-ghost {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto 0 0;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  background-color: var(--color-navy);
}

.hub-main .portfolio-body .btn-ghost {
  margin: 16px -18px 0;
}

.hub-main .case-study-card:not(.cs-card) .btn-ghost {
  margin-top: 16px;
}

.hub-main .btn-ghost .icon {
  width: 26px;
  height: 26px;
  padding: 5px;
  color: var(--color-navy);
  background-color: var(--color-primary-light);
  border-radius: 50%;
}

/* Breadcrumb bar under banners/heroes: reference is 90px tall. */
.page-hero + .breadcrumb,
.page-banner + .breadcrumb {
  padding-block: 30px;
}

.page-hero + .breadcrumb ol,
.page-banner + .breadcrumb ol {
  line-height: 30px;
}

/* Result detail: the client's quote sits inside the navy overview box. */
.overview-quote {
  max-width: 820px;
  margin: 32px auto 0;
  text-align: center;
  color: var(--color-white);
}

.overview-quote blockquote {
  font-size: 18px;
  line-height: 30px;
  font-style: italic;
}

.overview-quote figcaption {
  margin-top: 10px;
  font-size: 15px;
  color: var(--color-primary-light);
}

/* Tools band tiles: uniform 243x67, five per row (reference). */
.tools-marquee {
  padding-top: 34px;
  margin-top: 30px;
}

.tools-track {
  gap: 20px;
}

.tool-tile {
  flex: 0 0 243px;
  min-width: 0;
  min-height: 67px;
  justify-content: center;
  padding: 10px 16px;
  font-size: 15px;
  text-align: left;
}

@keyframes tools-scroll {
  to {
    transform: translateX(calc(-50% - 10px));
  }
}

/* Reviews: 80px rhythm with the centred tab above the navy box (reference). */
.reviews-box-section {
  padding-block: 80px;
}

.reviews-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  padding: 25px 40px;
  margin: 0 auto 20px;
  line-height: 24px;
  font-size: 16px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-navy);
  border-radius: 4px;
}

.reviews-tab .icon {
  color: var(--color-primary-light);
}

.reviews-tab:hover {
  background-color: var(--color-navy-600);
}

.tool-tile {
  gap: 10px;
  padding: 10px 12px;
  white-space: nowrap;
}

.tool-tile .icon {
  width: 24px;
  height: 24px;
}

/* Reference: 10px between Home and the first dropdown, 20px elsewhere. */
@media (min-width: 992px) {
  .nav-links > .nav-item:first-child {
    margin-right: -10px;
  }
}

/* How We Can Help: full-width tabs panel, 97px tab buttons (reference). */
.help-tabs {
  max-width: none;
}

.help-tab-trigger {
  min-height: 97px;
  padding: 18px 30px;
}

.help-tab-trigger .icon {
  width: 45px;
  height: 45px;
}

/* Why Us: square 408px visual (reference). */
.why-carousel .slide {
  grid-template-columns: 408px 1fr;
}

.why-carousel .slide-image {
  width: 408px;
  height: 408px;
  object-fit: cover;
}

/* Partner / Gujarat strips: reference strip weight. */
.platforms-strip {
  padding: 34px 30px;
}

.gujarat-strip-section {
  padding-block: 56px;
}

/* Footer meta row: occupies the reference's payment/trust-badge row with
   Dfly's own service facts. */
.footer-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 16px 40px;
  flex-wrap: wrap;
  padding-block: 16px;
  border-bottom: 1px solid var(--color-navy-600);
  font-size: 15px;
  line-height: 30px;
  color: var(--color-white);
}

.footer-meta-row strong {
  color: var(--color-primary-light);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
}

/* Partner strip carries the reference's logo-row height. */
.platforms-strip {
  min-height: 120px;
}

/* Cross-sell cards: reference 356px wide, taller body. */
.card-carousel-track > .num-card {
  flex-basis: 356px;
}

.num-card {
  min-height: 440px;
}

.num-card p {
  font-size: 16px;
  line-height: 30px;
}

/* Approach: taller framed visual (reference panel weight). */
.approach-panel {
  padding: 50px;
}

.approach-visual {
  height: 480px;
  object-fit: cover;
}

/* ==========================================================================
   "More from Our Work" strip (section.work-nav)
   Closes the four Our Work pages (Case Studies, Results, Website, Social
   Media) with links to the other three. Markup: tools/components.js workNav.
   ========================================================================== */
.work-nav {
  padding: 8px 0 56px;
  background-color: var(--color-white);
}

.work-nav-inner {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 20px 32px;
  align-items: center;
  padding: 24px 28px;
  background-color: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: 20px;
}

.work-nav-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  text-transform: none;
  color: var(--color-navy);
}

.work-nav-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 14px 16px;
  color: var(--color-text-muted);
  background-color: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: 14px;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.work-nav-link > .icon:first-child {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 10px;
  color: var(--color-primary-dark);
  background-color: rgba(235, 101, 31, 0.08);
  border: 1px solid rgba(235, 101, 31, 0.16);
  border-radius: 11px;
}

.work-nav-link span {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
}

.work-nav-link strong {
  display: block;
  margin-bottom: 1px;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
}

.work-nav-arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-primary-dark);
  transition: transform 220ms ease;
}

.work-nav-link:hover,
.work-nav-link:focus-visible {
  color: var(--color-text-muted);
  border-color: rgba(235, 101, 31, 0.45);
  box-shadow: 0 14px 28px -20px rgba(23, 26, 44, 0.45);
}

.work-nav-link:hover .work-nav-arrow,
.work-nav-link:focus-visible .work-nav-arrow {
  transform: translateX(4px);
}

.work-nav-link:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

@media (max-width: 991px) {
  .work-nav-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .work-nav {
    padding-bottom: 44px;
  }

  .work-nav-inner {
    padding: 20px 16px;
  }

  .work-nav-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-nav-link,
  .work-nav-arrow {
    transition: none;
  }

  .work-nav-link:hover .work-nav-arrow,
  .work-nav-link:focus-visible .work-nav-arrow {
    transform: none;
  }
}

/* --- Hero "Chat on WhatsApp" button (homepage and every hero with a form):
   a quick contact option above the fold, especially on phones where the
   form fills the first screen (14 October 2026). ------------------------- */
.hero-whatsapp {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-top: 22px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  line-height: 22px;
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.hero-whatsapp .icon {
  width: 18px;
  height: 18px;
  color: #25d366;
}

.hero-whatsapp:hover {
  color: var(--color-white);
  background-color: rgba(37, 211, 102, 0.16);
  border-color: #25d366;
}

.hero-whatsapp:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-whatsapp {
    transition: none;
  }
}

/* --- Footer (15 October 2026) ----------------------------------------------
   1. Orange CTA card (replaces the closing CTA banner pages used to have).
   2. Brand + contact on the left; Company / Services / Our Work links
      (header-menu pages only) on the right.
   3. Thin bottom row: copyright and legal links.
   The older .footer-* rules above are no longer used by the markup. */
.site-footer.sf {
  padding-block: 72px 0;
}

/* 1. CTA card: the darker orange gradient keeps white text above 4.5:1. */
.sf-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 64px;
  padding: 44px 48px;
  background: linear-gradient(120deg, var(--color-primary-dark) 0%, var(--color-primary-darker) 100%);
  border-radius: 24px;
  box-shadow: 0 30px 60px -30px rgba(200, 80, 15, 0.6);
}

.sf-cta::before {
  content: "";
  position: absolute;
  top: -140px;
  right: -80px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.18), transparent);
  pointer-events: none;
}

.sf-cta-copy,
.sf-cta-actions {
  position: relative;
}

.sf-cta-eyebrow {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  line-height: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.sf-cta-title {
  margin: 0;
  font-size: 32px;
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-transform: none;
  color: var(--color-white);
}

.sf-cta-text {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.9);
}

.sf-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex-shrink: 0;
}

.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: var(--fw-semibold);
  line-height: 24px;
  border-radius: 999px;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.site-footer.sf .sf-btn-light {
  color: var(--color-navy);
  background-color: var(--color-white);
}

.site-footer.sf .sf-btn-light:hover {
  color: var(--color-navy);
  background-color: #fff3ea;
  transform: translateY(-2px);
}

.site-footer.sf .sf-btn-ghost {
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.site-footer.sf .sf-btn-ghost:hover {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.sf-btn:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* 2. Brand + links */
.sf-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr);
  gap: 48px;
  padding-bottom: 56px;
}

.sf-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sf-logo .logo-text {
  font-size: 22px;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  color: var(--color-white);
}

.sf-tagline {
  display: block;
  font-size: 12px;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: var(--color-text-on-dark-muted);
}

.sf-blurb {
  max-width: 320px;
  margin-top: 16px;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-on-dark-muted);
}

.sf-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.sf-contact li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.82);
}

.sf-contact .icon {
  flex-shrink: 0;
  box-sizing: content-box;
  padding: 8px;
  color: var(--color-primary-light);
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.site-footer.sf .sf-contact a {
  color: rgba(255, 255, 255, 0.82);
}

.sf-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.sf-title {
  position: relative;
  margin: 0 0 22px;
  padding-bottom: 12px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Short orange accent under each column title. */
.sf-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

.sf-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer.sf .sf-col a {
  display: inline-block;
  font-size: 15px;
  font-weight: var(--fw-regular);
  line-height: 22px;
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.site-footer.sf .sf-col a:hover {
  transform: translateX(3px);
}

/* 3. Bottom row */
.sf-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sf-copy {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-on-dark-muted);
}

.sf-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer.sf .sf-legal a {
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-on-dark-muted);
  transition: color var(--duration-fast) var(--ease-standard);
}

.site-footer.sf .sf-col a:hover,
.site-footer.sf .sf-legal a:hover,
.site-footer.sf .sf-contact a:hover {
  color: var(--color-white);
}

.site-footer.sf a[aria-current="page"] {
  color: var(--color-primary-light);
}

@media (max-width: 1199px) {
  .sf-cta {
    padding: 40px;
  }

  .sf-cta-title {
    font-size: 28px;
  }
}

@media (max-width: 991px) {
  .sf-cta {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 48px;
  }

  .sf-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-bottom: 40px;
  }
}

@media (max-width: 575px) {
  .site-footer.sf {
    padding-top: 48px;
  }

  .sf-cta {
    padding: 28px 22px;
    border-radius: 18px;
  }

  .sf-cta-title {
    font-size: 24px;
  }

  .sf-cta-actions,
  .sf-btn {
    width: 100%;
  }

  .sf-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }

  .sf-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-btn,
  .site-footer.sf .sf-col a,
  .site-footer.sf .sf-legal a {
    transition: none;
  }

  .site-footer.sf .sf-col a:hover,
  .site-footer.sf .sf-btn:hover {
    transform: none;
  }
}

/* --- Numbered cards ("What's included", "Services covered", "Related
   services"): a slider whose cards are sized so only whole cards show
   (4 / 2 / 1 per view; Related services 3 / 2 / 1) — no cut-off card —
   in the same card style as Our Strength and the feedback cards
   (15 October 2026). Overrides the older navy carousel rules for these
   sections only. ---------------------------------------------------------- */
.num-cards-section .num-track {
  gap: 24px;
  margin-top: 0;
  padding: 8px 2px 28px;
  scroll-snap-type: x mandatory;
}

.num-cards-section .card-carousel-track > .num-card {
  flex: 0 0 calc((100% - 3 * 24px) / 4);
  scroll-snap-align: start;
}

#related-services .card-carousel-track > .num-card {
  flex-basis: calc((100% - 2 * 24px) / 3);
}

.num-cards-section .num-card {
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  min-height: 0;
  padding: 28px 24px 26px;
  text-align: left;
  color: var(--color-text);
  background-color: var(--color-white);
  background-image: none;
  border: 1px solid rgba(11, 18, 32, 0.06);
  border-radius: 16px;
  box-shadow: 0 14px 34px -22px rgba(11, 18, 32, 0.35);
  transition: transform var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}

/* Orange top line that grows in on hover (as on the other card sets). */
.num-cards-section .num-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-base) var(--ease-out);
}

.num-cards-section .num-card-index {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--color-primary-dark);
  background-color: var(--color-primary-tint);
  border: 0;
  border-radius: 12px;
  outline: 0;
  transform: none;
  transition: background-color var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard);
}

.num-cards-section .num-card h3 {
  font-size: 19px;
  line-height: 1.3;
  color: var(--color-navy);
}

.num-cards-section .num-card p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 25px;
  color: var(--color-text-muted);
}

.num-cards-section .num-card-link.is-static {
  display: none;
}

/* Related services: "Know More" as a quiet text link at the card foot. */
.num-cards-section a.num-card-link {
  align-self: flex-start;
  justify-content: flex-start;
  margin: auto 0 0;
  padding: 16px 0 0;
  color: var(--color-primary-darker);
  background: none;
}

.num-cards-section a.num-card-link:hover {
  color: var(--color-primary-dark);
  background: none;
}

@media (hover: hover) and (pointer: fine) {
  .num-cards-section .num-card:hover {
    transform: translateY(-4px);
    background-image: none;
    box-shadow: 0 22px 44px -22px rgba(11, 18, 32, 0.4);
  }

  .num-cards-section .num-card:hover::after {
    transform: scaleX(1);
  }

  .num-cards-section .num-card:hover .num-card-index {
    color: var(--color-white);
    background-color: var(--color-primary-dark);
    transform: none;
  }
}

@media (max-width: 1199px) {
  .num-cards-section .card-carousel-track > .num-card {
    flex-basis: calc((100% - 2 * 24px) / 3);
  }
}

@media (max-width: 991px) {
  .num-cards-section .card-carousel-track > .num-card,
  #related-services .card-carousel-track > .num-card {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media (max-width: 575px) {
  .num-cards-section .card-carousel.side-arrows {
    padding-inline: 36px;
  }

  .num-cards-section .num-track {
    gap: 16px;
  }

  .num-cards-section .card-carousel-track > .num-card,
  #related-services .card-carousel-track > .num-card {
    flex-basis: 100%;
  }

  .num-cards-section .num-card {
    padding: 22px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .num-cards-section .num-card,
  .num-cards-section .num-card::after,
  .num-cards-section .num-card-index {
    transition: none;
  }

  .num-cards-section .num-card:hover {
    transform: none;
  }
}

/* Related services: all three cards fit from 992px, so no slider arrows there. */
@media (min-width: 992px) {
  #related-services .carousel-arrow {
    display: none;
  }
}

/* --- Social media accounts we manage (16 October 2026) ---------------------
   Shared by social-media-portfolio.html and results.html (section
   #social-accounts, from socialAccounts() in tools/components.js). */
.sa-section {
  background: linear-gradient(160deg, #fff7f1 0%, #ffffff 45%, #f4f5fb 100%);
}

.sa-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 32px;
}

.sa-tabs .filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

.sa-tabs .filter-btn.is-active {
  color: var(--color-white);
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.sa-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  font-size: 12px;
  color: var(--color-text-muted);
  background-color: var(--color-bg-alt);
  border-radius: 999px;
}

.sa-tabs .filter-btn.is-active .sa-count {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.22);
}

/* Flex so a short last row stays centred (10 accounts = 3 + 3 + 3 + 1). */
.sa-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.sa-card {
  flex: 0 1 calc((100% - 2 * 24px) / 3);
}

.sa-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background-color: var(--color-white);
  border: 1px solid rgba(11, 18, 32, 0.08);
  border-radius: 18px;
  box-shadow: 0 14px 34px -24px rgba(11, 18, 32, 0.35);
  transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.sa-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Instagram-style ring around an initials avatar. */
.sa-avatar {
  display: inline-flex;
  flex-shrink: 0;
  padding: 3px;
  background: conic-gradient(from 210deg, #f58529, #dd2a7b, #8134af, #515bd4, #f58529);
  border-radius: 50%;
}

.sa-avatar span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--color-white);
  background-color: var(--color-navy);
  border: 3px solid var(--color-white);
  border-radius: 50%;
}

.sa-id {
  min-width: 0;
}

.sa-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  line-height: 1.3;
  color: var(--color-navy);
}

.sa-verified {
  display: inline-flex;
  color: #3897f0;
}

.sa-handle {
  display: block;
  overflow: hidden;
  font-size: 14px;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sa-handle:hover {
  color: var(--color-primary-dark);
}

.sa-tag {
  align-self: flex-start;
  margin-top: 16px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--color-primary-darker);
  background-color: var(--color-primary-tint);
  border-radius: 999px;
}

.sa-desc {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 23px;
  color: var(--color-text);
}

.sa-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 16px;
  padding: 14px 16px;
  background-color: var(--color-bg-alt);
  border-radius: 12px;
}

.sa-stat-value {
  font-size: 26px;
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--color-primary-dark);
}

.sa-stat-value--text {
  font-size: 18px;
}

.sa-stat-label {
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.sa-work {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 21px;
  color: var(--color-text-muted);
}

.sa-work .icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary-dark);
}

.sa-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

.sa-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--color-primary-darker);
}

.sa-link--ig {
  padding: 8px 14px;
  color: var(--color-white);
  background: linear-gradient(90deg, #dd2a7b, #f58529);
  border-radius: 999px;
}

.sa-link--ig:hover {
  color: var(--color-white);
  filter: brightness(1.05);
}

/* --- Client results summary (results.html #client-results) --------------- */
.cr-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.cr-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px;
  color: inherit;
  background-color: var(--color-white);
  border: 1px solid rgba(11, 18, 32, 0.08);
  border-radius: 16px;
  box-shadow: 0 14px 34px -24px rgba(11, 18, 32, 0.35);
  transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.cr-platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--color-primary-darker);
}

.cr-value {
  font-size: 30px;
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--color-navy);
}

.cr-label {
  font-size: 14px;
  color: var(--color-text-muted);
}

.cr-client {
  margin-top: 10px;
  padding-top: 10px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  border-top: 1px solid var(--color-border);
}

.cr-actions {
  margin-top: 28px;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .sa-card:hover,
  .cr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -22px rgba(11, 18, 32, 0.4);
  }
}

@media (max-width: 1199px) {
  .sa-card {
    flex-basis: calc((100% - 24px) / 2);
  }

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

@media (max-width: 575px) {
  .sa-card {
    flex-basis: 100%;
  }

  .cr-grid {
    gap: 12px;
  }

  .cr-card {
    padding: 16px;
  }

  .cr-value {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-card,
  .cr-card {
    transition: none;
  }

  .sa-card:hover,
  .cr-card:hover {
    transform: none;
  }
}

/* Social Media Accounts We Manage: four cards per row on desktop (client
   request, 19 October 2026); a short last row stays centred. */
@media (min-width: 1200px) {
  .sa-grid {
    gap: 20px;
  }

  .sa-card {
    flex: 0 0 calc((100% - 3 * 20px) / 4);
    min-width: 0;
    padding: 20px;
  }

  .sa-stat-value--text {
    white-space: nowrap;
  }

  .sa-avatar span {
    width: 46px;
    height: 46px;
    font-size: 15px;
  }

  .sa-name {
    font-size: 16px;
  }

  .sa-stat-value {
    font-size: 22px;
  }

  .sa-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Instagram button last, so it lines up at the bottom of every card. */
  .sa-link--ig {
    order: 2;
  }

  /* Value above its label, so "Brand page" and follower counts read alike. */
  .sa-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* =========================================================================
   Header dropdowns as icon cards (24 October 2026)
   Services (3 columns) and Our Work (2 columns): each item has a coloured
   round icon, a bold title and a one-line description; a footer line with a
   call-to-action button. Markup: richMenu() in tools/build-chrome.js.
   ========================================================================= */
.dropdown-menu.rich-menu {
  top: calc(50% + 24px);
  left: auto;
  right: var(--container-padding);
  width: min(960px, calc(100% - 2 * var(--container-padding)));
  min-width: 0;
  padding: 22px 22px 18px;
  background-color: var(--color-white);
  border-top: 0;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(23, 26, 44, 0.06), 0 28px 60px -24px rgba(23, 26, 44, 0.38);
}

.dropdown-menu.rich-menu--2 {
  width: min(620px, calc(100% - 2 * var(--container-padding)));
}

.nav-item.is-open > .dropdown-menu.rich-menu {
  display: block;
  animation: rich-menu-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rich-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 14px;
}

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

.rich-menu-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dropdown-menu a.rich-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.35;
  white-space: normal;
  border-radius: 12px;
  transition: background-color 160ms ease;
}

.dropdown-menu a.rich-item:hover,
.dropdown-menu a.rich-item:focus-visible {
  background-color: #f5f6fa;
}

.rich-ico {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #fff;
  background-color: var(--rich-c, var(--color-primary-dark));
  border-radius: 50%;
  box-shadow: 0 8px 16px -8px var(--rich-c, var(--color-primary-dark));
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rich-ico .icon {
  width: 19px;
  height: 19px;
  color: #fff;
}

.rich-ico--1 { --rich-c: #e11d48; }
.rich-ico--2 { --rich-c: #16a34a; }
.rich-ico--3 { --rich-c: #7c3aed; }
.rich-ico--4 { --rich-c: #2563eb; }
.rich-ico--5 { --rich-c: #eb651f; }
.rich-ico--6 { --rich-c: #0891b2; }
.rich-ico--7 { --rich-c: #db2777; }
.rich-ico--8 { --rich-c: #ca8a04; }

.rich-item:hover .rich-ico {
  transform: scale(1.08);
}

.rich-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rich-text strong {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
}

.rich-text small {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.rich-item:hover strong,
.rich-item[aria-current="page"] strong {
  color: var(--color-primary-dark);
}

.rich-menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 14px 12px 0;
  border-top: 1px solid var(--color-border);
}

.rich-menu-foot p {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

.dropdown-menu a.rich-menu-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--color-primary-darker);
  background-color: rgba(235, 101, 31, 0.1);
  border-radius: 999px;
  transition: background-color 160ms ease, color 160ms ease;
}

.dropdown-menu a.rich-menu-btn:hover,
.dropdown-menu a.rich-menu-btn:focus-visible {
  color: #fff;
  background-color: var(--color-primary-dark);
}

.rich-menu-btn .icon {
  width: 15px;
  height: 15px;
}

@keyframes rich-menu-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Phone / tablet menu panel: single column, compact. */
@media (max-width: 991px) {
  .nav .dropdown-menu.rich-menu {
    width: auto;
    padding-inline: 6px;
    border-radius: 14px;
    animation: none;
  }

  /* Open: tall enough for the whole list (the accordion caps others at 300px). */
  .nav .nav-item.is-open > .dropdown-menu.rich-menu {
    max-height: 70vh;
    padding-block: 6px;
  }

  .rich-menu-grid,
  .rich-menu--2 .rich-menu-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nav .dropdown-menu a.rich-item {
    gap: 12px;
    padding: 8px 10px;
  }

  .rich-ico {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  .rich-ico .icon {
    width: 16px;
    height: 16px;
  }

  .rich-menu-foot {
    margin-top: 6px;
    padding: 10px 6px 4px;
  }

  .rich-menu-foot p {
    display: none;
  }

  .nav .dropdown-menu a.rich-menu-btn {
    justify-content: center;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-item.is-open > .dropdown-menu.rich-menu {
    animation: none;
  }

  .rich-ico {
    transition: none;
  }
}