/* ==========================================================================
   DigiDesire — Design Refinement Layer (V2 master prompt §1-122)
   Structure/IA/routes untouched. This is a CSS-only visual overhaul of the
   opaque source blobs: fluid type scale, editorial hierarchy, section rhythm,
   button/card/form/footer system, motion. Loaded AFTER monochrome sheet.
   Fluid clamp() keeps the low end near source values so narrow/mobile never
   overflows; the high end gives desktop the premium composition.
   ========================================================================== */
:root {
  /* Fluid type scale */
  --dd-fs-hero: clamp(2rem, 5.4vw, 4.5rem);      /* hero H1 */
  --dd-fs-h2: clamp(1.6rem, 3.4vw, 3rem);         /* section titles */
  --dd-fs-h3: clamp(1.25rem, 2vw, 1.75rem);
  --dd-fs-body: clamp(0.95rem, 0.55vw + 0.85rem, 1.0625rem); /* ~15-17px */
  --dd-fs-eyebrow: clamp(0.7rem, 0.8vw, 0.8125rem);
  /* Rhythm */
  --dd-section-y: clamp(3.5rem, 7vw, 8rem);
  --dd-section-y-tight: clamp(2.5rem, 4vw, 4.5rem);
  /* Motion */
  --dd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dd-t-fast: 180ms;
  --dd-t: 320ms;
}

/* ----- TYPOGRAPHY & HIERARCHY (§10-11) ----- */
/* Section title system (used site-wide, incl. service hero H1 which is h2.genericHead__title) */
.genericHead__title,
.genericHead__title.lg-font {
  font-size: var(--dd-fs-h2) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}
/* Eyebrow / label — a signature DigiDesire editorial marker */
.genericHead__subTitle {
  font-size: var(--dd-fs-eyebrow) !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.9rem;
}

/* Hero headings — larger, editorial, controlled measure */
.homeHero h1,
.industryBanner .title,
.innerBanner .genericHead__title,
.servicesHeroBanner .genericHead__title,
.case-studies-banner .genericHead__title,
.innerBanner h1 {
  font-size: var(--dd-fs-hero) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
}
.homeHero h1,
.industryBanner .title { max-width: 20ch; }

/* Body readability (gentle; low end stays near source to avoid reflow breakage) */
.genericHead p,
.industryBanner p,
.innerBanner p,
.digitalSec p,
.expertiesSec p,
.storySec p,
.aboutSec p,
p.lg-font,
.contentBody p { font-size: var(--dd-fs-body) !important; line-height: 1.75 !important; }

/* ----- SECTION RHYTHM (§13) — break the monotonous uniform padding ----- */
section.section,
.section { padding-top: var(--dd-section-y) !important; padding-bottom: var(--dd-section-y) !important; }
/* Heroes / banners keep their own spacing */
.homeHero, .innerBanner, .industryBanner, .servicesHeroBanner, .caseStudyBanner { padding-top: 0 !important; }
/* Compact transition sections stay tighter for contrast */
.ourClients.section, .homeTestimonials.section { padding-top: var(--dd-section-y-tight) !important; padding-bottom: var(--dd-section-y-tight) !important; }

/* ----- BUTTON SYSTEM (§18) ----- */
.primary-btn {
  min-height: clamp(46px, 3.4vw, 56px);
  padding: 0.9em 1.9em !important;
  font-size: clamp(0.8125rem, 0.9vw, 0.9375rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  border-radius: 999px;
  transition: transform var(--dd-t) var(--dd-ease), box-shadow var(--dd-t) var(--dd-ease);
}
.primary-btn:hover { transform: translateY(-2px); }
.primary-btn .btnText, .primary-btn span:not(.spark):not(.primary-btn__bg) { position: relative; z-index: 2; }

/* Text / arrow links: consistent motion */
.overlayBtn a, .seeMoreBtn a, a.text-link {
  transition: color var(--dd-t-fast) var(--dd-ease), opacity var(--dd-t-fast) var(--dd-ease);
}

/* ----- INTERACTIVE FEEDBACK (§40) ----- */
a, button, .primary-btn, .servicesSection__slider--card, .process__card, .ourWork__card {
  transition: transform var(--dd-t) var(--dd-ease), color var(--dd-t-fast) var(--dd-ease),
              border-color var(--dd-t) var(--dd-ease), background-color var(--dd-t) var(--dd-ease);
}

/* ----- CARD SYSTEM (§19) — hover lift + border reveal (monochrome) ----- */
.servicesSection__slider--card,
.process__card,
.ourWork__card,
.card-with-popup,
.stickyCardsList--card,
.blog-info-box {
  transition: transform var(--dd-t) var(--dd-ease), border-color var(--dd-t) var(--dd-ease), box-shadow var(--dd-t) var(--dd-ease);
}
.servicesSection__slider--card:hover,
.process__card:hover,
.ourWork__card:hover,
.blog-info-box:hover { transform: translateY(-4px); }

/* ----- FORM SYSTEM (§28 / §137) — clean fields, strong neutral focus ----- */
.input-field,
.select-field,
textarea.input-field {
  border-radius: 10px !important;
  transition: border-color var(--dd-t-fast) var(--dd-ease), box-shadow var(--dd-t-fast) var(--dd-ease), background-color var(--dd-t-fast) var(--dd-ease);
}
.input-field:focus,
.select-field:focus,
textarea.input-field:focus {
  outline: none;
  border-color: var(--dd-off-black) !important;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12);
}

/* ----- FOOTER (§30) — stronger typographic anchor ----- */
.footer__quickLinks--title {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer a { transition: opacity var(--dd-t-fast) var(--dd-ease); }
.footer a:hover { opacity: 0.65; }

/* ==========================================================================
   DISTINCTIVE DIGIDESIRE COMPONENT TREATMENTS (21st.dev-referenced, same stack)
   ========================================================================== */

/* ----- DECORATIVE SYSTEM (§36) — editorial eyebrow rule ----- */
/* The eyebrow marker becomes a short precise rule instead of a soft dot. */
.genericHead__subTitle::before {
  content: "";
  width: 1.8em; height: 2px;
  border-radius: 0;
  flex: 0 0 auto;
}

/* ----- PROCESS / NUMBERED STEPS (§25) — large editorial numerals ----- */
.seamlessProc .item .number,
.contentWithCounters .item .number,
.ourProcess .number,
.ourProcess .item__left .number {
  font-size: clamp(2.25rem, 4vw, 3.75rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  opacity: 0.9;
}
.seamlessProc .item,
.ourProcess .item { transition: opacity var(--dd-t) var(--dd-ease); }

/* ----- LARGE STATISTICS (§26) — editorial stat numerals ----- */
.contentWithCounters__image + * .number,
.count .number,
.counter,
[data-target] {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* ----- CARD HOVER (§19 / §40) — precise border + lift, no cartoon ----- */
.servicesSection__slider--card,
.stickyCardsList--card,
.ourWork__cardsWrapper .image-box,
.card-with-popup {
  transition: transform var(--dd-t) var(--dd-ease), border-color var(--dd-t) var(--dd-ease), box-shadow var(--dd-t) var(--dd-ease);
}
.ourWork__cardsWrapper .image-box img,
.servicesSection__slider--card img { transition: transform var(--dd-t) var(--dd-ease); }
.ourWork__cardsWrapper .image-box:hover img { transform: scale(1.04); }

/* ----- FOOTER (§30) — memorable final moment ----- */
.footer__top { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.footer__quickLinks--list a,
.footer__bottom--links a { transition: opacity var(--dd-t-fast) var(--dd-ease); }
.footer__quickLinks--list a:hover,
.footer__bottom--links a:hover { opacity: 0.6; }

/* ----- HEADER (§16) — refined, understated ----- */
.header { transition: background-color var(--dd-t) var(--dd-ease), padding var(--dd-t) var(--dd-ease); }
.header__nav--listAnchor { transition: opacity var(--dd-t-fast) var(--dd-ease); }

/* ----- HERO MEDIA (§14 / §125) — abstract particle video to monochrome -----
   The source hero video is a blue particle glow (a generic AI-agency cliché).
   Grayscale keeps the motion/energy while enforcing the monochrome brand.
   Real-footage videos elsewhere are left in colour. */
.homeHero video,
.homeHero .video-wrapper video {
  filter: grayscale(1) brightness(1.08) contrast(1.08);
}

/* ==========================================================================
   OUR PROCESS — redesigned as a numbered vertical timeline (§25)
   CSS-only over the source markup; position + CMS-editability preserved.
   ========================================================================== */
/* Sticky heading on desktop while the timeline scrolls */
@media (min-width: 1200px) {
  .ourProcess .processContent { position: sticky; top: 110px; }
}
.ourProcess .process-cards__container {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  counter-reset: ddproc;
  position: relative;
}
/* connecting spine */
.ourProcess .process-cards__container::before {
  content: "";
  position: absolute;
  left: 27px; top: 20px; bottom: 64px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.06));
}
.ourProcess .process__card {
  counter-increment: ddproc;
  position: relative;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 2px 0 46px 88px !important;
}
/* icon node sitting on the spine */
.ourProcess .process__card .icon-wrapper {
  position: absolute; left: 0; top: 0;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: var(--dd-off-black, #111);
  z-index: 2;
  transition: border-color var(--dd-t) var(--dd-ease), transform var(--dd-t) var(--dd-ease);
}
.ourProcess .process__card .icon-wrapper img {
  width: 26px; height: 26px;
  filter: brightness(0) invert(1);
}
.ourProcess .process__card:hover .icon-wrapper {
  border-color: rgba(255,255,255,0.45);
  transform: translateY(-2px);
}
/* large faint watermark numeral */
.ourProcess .process__card::after {
  content: "0" counter(ddproc);
  position: absolute; right: 0; top: -8px;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  color: rgba(255,255,255,0.07);
  pointer-events: none;
}
/* phase title */
.ourProcess .process__card--title {
  font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 4px 0 16px !important;
  line-height: 1.1;
}
/* steps as clean dashed rows (override the eyebrow style within cards only) */
.ourProcess .process__card .genericHead__subTitle {
  display: block !important;
  position: relative;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--dd-gray-mid, #a0a0a0) !important;
  padding-left: 22px;
  margin: 0 0 11px !important;
  line-height: 1.55;
}
.ourProcess .process__card .genericHead__subTitle::before {
  content: "" !important;
  position: absolute; left: 0; top: 10px;
  width: 12px; height: 1.5px;
  background: rgba(255,255,255,0.45) !important;
}

/* ----- MOTION / ACCESSIBILITY (§48) ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}