/* =============================================================================
   Data Processing, LLC - site styles (Bootstrap 5.3 theme layer)

   Brand palette (matches the logo and the ColdFusion site's custom.cfm):
     teal    #07809b  - primary (logo "DATA", section-primary backgrounds)
     orange  #ff914d  - accent  (logo "PROCESSING, LLC", buttons/borders)
     slate   #383f48  - neutral text (ColdFusion FRONTEND_COLOR_QUATERNARY)
   ============================================================================= */

:root {
  /* Brand */
  --dp-teal: #07809b;
  --dp-teal-rgb: 7, 128, 155;
  --dp-teal-dark: #06687e;
  --dp-teal-darker: #054f60;
  --dp-teal-soft: #e6f4f7;
  --dp-teal-soft-2: #cfe9ef;
  --dp-orange: #ff914d;
  --dp-orange-rgb: 255, 145, 77;
  --dp-orange-dark: #f07a30;
  --dp-orange-soft: #fff1e7;
  --dp-orange-text: #c2561a; /* orange for TEXT on white/light (>=4.5:1) */
  --dp-navy: #0b2530;
  --dp-navy-2: #102f3d;
  --dp-ink: #1b2430;
  --dp-slate: #383f48;
  --dp-muted: #5b6673;
  --dp-border: #e3e9ee;
  --dp-soft: #f5f8fa;
  --dp-white: #ffffff;

  --dp-font-heading: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dp-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --dp-radius: 1rem;
  --dp-radius-sm: .625rem;
  --dp-shadow-sm: 0 1px 2px rgba(16, 35, 48, .06), 0 1px 3px rgba(16, 35, 48, .08);
  --dp-shadow: 0 10px 30px -12px rgba(16, 35, 48, .25);
  --dp-shadow-lg: 0 30px 60px -20px rgba(16, 35, 48, .35);
  --dp-header-h: 76px;
  --dp-topbar-h: 40px;

  /* Bootstrap overrides */
  --bs-primary: var(--dp-teal);
  --bs-primary-rgb: var(--dp-teal-rgb);
  --bs-secondary: var(--dp-orange);
  --bs-secondary-rgb: var(--dp-orange-rgb);
  --bs-body-font-family: var(--dp-font-body);
  --bs-body-color: var(--dp-ink);
  --bs-body-bg: var(--dp-white);
  --bs-heading-color: var(--dp-ink);
  --bs-link-color: var(--dp-teal);
  --bs-link-color-rgb: var(--dp-teal-rgb);
  --bs-link-hover-color: var(--dp-teal-dark);
  --bs-link-hover-color-rgb: 6, 104, 126;
  --bs-border-color: var(--dp-border);
  --bs-focus-ring-color: rgba(var(--dp-teal-rgb), .25);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--dp-header-h) + 1rem); overflow-x: clip; }
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }
@media (min-width: 992px) { html { scroll-padding-top: calc(var(--dp-header-h) + var(--dp-topbar-h) + 1rem); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--dp-font-body);
  color: var(--dp-ink);
  background: var(--dp-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: var(--dp-header-h);
}
@media (min-width: 992px) { body { padding-top: calc(var(--dp-header-h) + var(--dp-topbar-h)); } }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--dp-font-heading);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--dp-ink);
}
.lead { font-weight: 400; color: var(--dp-muted); }
.text-muted { color: var(--dp-muted) !important; }
.text-teal { color: var(--dp-teal) !important; }
.text-orange { color: var(--dp-orange) !important; }
.bg-soft { background-color: var(--dp-soft) !important; }
.bg-navy { background-color: var(--dp-navy) !important; }
.bg-teal { background-color: var(--dp-teal) !important; }
.bg-teal-soft { background-color: var(--dp-teal-soft) !important; }
.bg-orange-soft { background-color: var(--dp-orange-soft) !important; }
.fw-800 { font-weight: 800 !important; }
.fs-7 { font-size: .875rem !important; }
.ls-wide { letter-spacing: .12em; }
.max-w-sm { max-width: 36rem; }
.max-w-md { max-width: 44rem; }
.max-w-lg { max-width: 56rem; }
.container { --bs-gutter-x: 1.5rem; }
@media (min-width: 1400px) { .container { max-width: 1280px; } }

/* --- Buttons -------------------------------------------------------------- */
.btn { font-weight: 600; border-radius: .75rem; padding: .7rem 1.35rem; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
.btn-lg { padding: .9rem 1.75rem; font-size: 1.05rem; }
.btn-sm { padding: .45rem .9rem; font-size: .85rem; border-radius: .6rem; }
.btn:focus-visible { box-shadow: 0 0 0 .25rem rgba(var(--dp-teal-rgb), .35); }
.btn-primary {
  --bs-btn-bg: var(--dp-teal); --bs-btn-border-color: var(--dp-teal);
  --bs-btn-hover-bg: var(--dp-teal-dark); --bs-btn-hover-border-color: var(--dp-teal-dark);
  --bs-btn-active-bg: var(--dp-teal-darker); --bs-btn-active-border-color: var(--dp-teal-darker);
  --bs-btn-disabled-bg: var(--dp-teal); --bs-btn-disabled-border-color: var(--dp-teal);
  --bs-btn-focus-shadow-rgb: var(--dp-teal-rgb);
  box-shadow: 0 8px 20px -8px rgba(var(--dp-teal-rgb), .6);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(var(--dp-teal-rgb), .7); }
.btn-accent {
  /* Dark text on orange: white on #ff914d is only ~2.2:1 contrast (WCAG fail);
     the navy ink reads at ~7:1 while keeping the brand orange surface. */
  --bs-btn-color: var(--dp-navy); --bs-btn-bg: var(--dp-orange); --bs-btn-border-color: var(--dp-orange);
  --bs-btn-hover-color: var(--dp-navy); --bs-btn-hover-bg: var(--dp-orange-dark); --bs-btn-hover-border-color: var(--dp-orange-dark);
  --bs-btn-active-color: var(--dp-navy); --bs-btn-active-bg: var(--dp-orange-dark); --bs-btn-active-border-color: var(--dp-orange-dark);
  --bs-btn-disabled-color: var(--dp-navy); --bs-btn-disabled-bg: var(--dp-orange); --bs-btn-disabled-border-color: var(--dp-orange);
  --bs-btn-focus-shadow-rgb: var(--dp-orange-rgb);
  box-shadow: 0 8px 20px -8px rgba(var(--dp-orange-rgb), .7);
}
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(var(--dp-orange-rgb), .8); }
.btn-outline-primary {
  --bs-btn-color: var(--dp-teal); --bs-btn-border-color: var(--dp-teal);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--dp-teal); --bs-btn-hover-border-color: var(--dp-teal);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--dp-teal-dark); --bs-btn-active-border-color: var(--dp-teal-dark);
  --bs-btn-focus-shadow-rgb: var(--dp-teal-rgb);
}
.btn-outline-light { --bs-btn-border-color: rgba(255,255,255,.45); }
.btn-outline-light:hover { --bs-btn-hover-bg: rgba(255,255,255,.12); --bs-btn-hover-border-color: rgba(255,255,255,.8); color: #fff; }
.btn-ghost { --bs-btn-color: var(--dp-ink); --bs-btn-hover-color: var(--dp-teal); --bs-btn-hover-bg: var(--dp-teal-soft); }
.btn-link { font-weight: 600; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
.btn .bi { vertical-align: -.125em; }
.btn-icon-right .bi { transition: transform .18s ease; }
.btn-icon-right:hover .bi { transform: translateX(3px); }

/* --- Utility: eyebrow / section headings ----------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dp-teal-dark); background: var(--dp-teal-soft);
  border-radius: 999px; padding: .4rem .9rem;
}
.eyebrow::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--dp-orange); }
.eyebrow-orange { color: #a64914; background: var(--dp-orange-soft); }
.eyebrow-orange::before { background: var(--dp-orange); }
.eyebrow-light { color: #fff; background: rgba(255,255,255,.12); }
.section { padding: 4.5rem 0; }
@media (min-width: 768px) { .section { padding: 6rem 0; } }
.section-title { font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.75rem); margin-bottom: 1rem; }
.section-sub { font-size: 1.125rem; color: var(--dp-muted); }
.text-gradient {
  background: linear-gradient(90deg, var(--dp-teal) 0%, #1ea5c2 45%, var(--dp-orange) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.divider-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dp-orange); display: inline-block; }

/* --- Top bar --------------------------------------------------------------- */
.topbar {
  background: var(--dp-navy); color: rgba(255,255,255,.85);
  font-size: .8125rem; height: var(--dp-topbar-h);
}
.topbar a { color: rgba(255,255,255,.85); text-decoration: none; transition: color .15s ease; }
.topbar a:hover { color: var(--dp-orange); }
.topbar .bi { color: var(--dp-orange); }
.topbar .sep { width: 1px; height: 16px; background: rgba(255,255,255,.18); }

/* --- Header / navbar --------------------------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1040;
  transition: transform .3s ease, box-shadow .3s ease;
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .navbar {
  /* NOTE: no backdrop-filter below lg - it would create a CSS containing
     block and trap the fixed-position mobile offcanvas inside the navbar. */
  background: #fff;
  border-bottom: 1px solid var(--dp-border);
  min-height: var(--dp-header-h);
  padding-top: 0; padding-bottom: 0;
  transition: box-shadow .3s ease;
}
.site-header.is-scrolled .navbar { box-shadow: 0 6px 24px -12px rgba(16,35,48,.25); }
.navbar-brand { display: flex; align-items: center; gap: .75rem; padding: 0; }
.navbar-brand img { height: 44px; width: auto; }
@media (min-width: 992px) { .navbar-brand img { height: 50px; } }
.navbar-nav { gap: .35rem; }
.navbar-nav .nav-link {
  font-weight: 600; color: var(--dp-ink); font-size: .95rem;
  padding: .6rem .9rem !important; border-radius: .6rem;
  transition: color .15s ease, background-color .15s ease;
}
/* Tighter, brand-colored focus ring that stays inside the .35rem item gap. */
.navbar-nav .nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(var(--dp-teal-rgb), .3);
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus-visible, .navbar-nav .nav-link.active, .navbar-nav .show > .nav-link { color: var(--dp-teal); background: var(--dp-teal-soft); }
.navbar-nav .dropdown-toggle::after { margin-left: .35rem; vertical-align: .15em; opacity: .6; }
.navbar .dropdown-menu {
  border: 1px solid var(--dp-border); border-radius: .9rem; padding: .5rem;
  box-shadow: var(--dp-shadow); min-width: 15rem; margin-top: .5rem;
}
/* The OPEN panel must beat every sibling nav item's pill/underline/menu -
   items later in the DOM (e.g. Resources) otherwise paint over an open
   Services panel at equal z-index. */
.navbar .dropdown-menu.show { z-index: 1031; }
.navbar .nav-item.dropdown:has(> .dropdown-menu.show) { z-index: 1031; }
.navbar .dropdown-menu.dropdown-menu-wide { min-width: 34rem; }
.navbar .dropdown-item {
  border-radius: .55rem; padding: .55rem .8rem; font-weight: 500; font-size: .9rem; color: var(--dp-ink);
  display: flex; align-items: center; gap: .6rem;
}
.navbar .dropdown-item .bi { color: var(--dp-teal); font-size: 1rem; width: 1.25rem; text-align: center; }
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus, .navbar .dropdown-item.active { background: var(--dp-teal-soft); color: var(--dp-teal-darker); }
.navbar .dropdown-header { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dp-muted); padding: .5rem .8rem .25rem; }
.navbar-toggler { border: 1px solid var(--dp-border); border-radius: .6rem; padding: .45rem .6rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(var(--dp-teal-rgb), .25); }
/* Desktop: frosted-glass navbar (safe here - the offcanvas is static at lg+)
   and open dropdowns on hover as well as click. */
@media (min-width: 992px) {
  .site-header .navbar { background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  /* Hover-open is handled in main.js via the Bootstrap Dropdown API; a CSS
     display:block here would fight the click toggle (double-toggle bug). */
  .navbar .dropdown > .dropdown-menu { top: 100%; }
  .navbar .dropdown:hover > .nav-link { color: var(--dp-teal); background: var(--dp-teal-soft); }
  .navbar .dropdown-menu.dropdown-menu-wide { left: 50%; transform: translateX(-50%); }
  .navbar .dropdown-menu.dropdown-menu-wide .dropdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .5rem; }
  .navbar-nav .nav-item { position: relative; }
  .navbar-nav .nav-item > .nav-link.active::after {
    content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .15rem; height: 2px; border-radius: 2px; background: var(--dp-orange);
  }
}
/* Mobile offcanvas menu */
.offcanvas.offcanvas-end { width: min(22rem, 90vw); }
@media (max-width: 991.98px) {
  .offcanvas-body .navbar-nav .nav-link { font-size: 1.05rem; padding: .8rem .9rem !important; }
  .offcanvas-body .dropdown-menu { box-shadow: none; border: 0; background: var(--dp-soft); margin: .25rem 0 .5rem; min-width: 0; width: 100%; }
  .offcanvas-body .dropdown-menu.dropdown-menu-wide .dropdown-grid { display: block; }
  .offcanvas-body .dropdown-menu .dropdown-header { padding-top: .75rem; }
}

/* --- Hero ------------------------------------------------------------------ */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(1200px 600px at 85% -10%, rgba(var(--dp-teal-rgb), .55), transparent 60%),
              radial-gradient(800px 500px at -10% 110%, rgba(var(--dp-orange-rgb), .35), transparent 60%),
              linear-gradient(160deg, #0a2531 0%, #0c3443 45%, #0a2531 100%);
  padding: 4rem 0 5rem;
}
@media (min-width: 992px) { .hero { padding: 6rem 0 7rem; min-height: min(calc(100vh - var(--dp-header-h) - var(--dp-topbar-h)), 820px); display: flex; align-items: center; } }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.9rem); line-height: 1.08; }
.hero h1 .hl { color: var(--dp-orange); }
.hero .lead { color: rgba(255,255,255,.82); font-size: 1.125rem; }
@media (min-width: 768px) { .hero .lead { font-size: 1.25rem; } }
.hero .eyebrow-light { color: #fff; }
.hero-badges { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; font-size: .9rem; color: rgba(255,255,255,.8); }
.hero-badges .bi { color: var(--dp-orange); margin-right: .35rem; }
.hero-stars { color: #ffc107; letter-spacing: .05em; }

/* Hero visual: browser mock + floating cards */
.hero-visual { position: relative; max-width: 560px; margin: 0 auto; }
.hero-visual .glow { position: absolute; inset: -10% -10% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--dp-orange-rgb), .45), transparent 65%); filter: blur(20px); pointer-events: none; }
.browser {
  position: relative; background: #fff; border-radius: 1.1rem; overflow: hidden; color: var(--dp-ink);
  box-shadow: var(--dp-shadow-lg), 0 0 0 1px rgba(255,255,255,.08);
  transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
}
@media (max-width: 991.98px) { .browser { transform: none; } }
.browser-bar { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; background: #f1f5f8; border-bottom: 1px solid var(--dp-border); }
.browser-bar .dot { width: .7rem; height: .7rem; border-radius: 50%; }
.browser-bar .url { flex: 1; min-width: 0; margin-left: .5rem; background: #fff; border: 1px solid var(--dp-border); border-radius: .5rem; font-size: .75rem; color: var(--dp-muted); padding: .25rem .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser-body { padding: 1.1rem; display: grid; grid-template-columns: 1.2fr 1fr; gap: .9rem; }
.browser-body > * { min-width: 0; }
.mock-card { background: var(--dp-soft); border: 1px solid var(--dp-border); border-radius: .8rem; padding: .9rem; overflow: hidden; }
.mock-card.teal { background: linear-gradient(135deg, var(--dp-teal), #1ea5c2); color: #fff; border: 0; }
.mock-card .t { font-family: var(--dp-font-heading); font-weight: 800; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1; }
.mock-card .s { font-size: .7rem; opacity: .75; margin-top: .25rem; }
.mock-line { height: .5rem; border-radius: 999px; background: #dfe6ec; margin-top: .5rem; }
.mock-line.w-60 { width: 60%; } .mock-line.w-80 { width: 80%; } .mock-line.w-40 { width: 40%; }
.mock-bars { display: flex; align-items: flex-end; gap: .4rem; height: 76px; margin-top: .75rem; }
.mock-bars span { flex: 1; border-radius: .35rem .35rem 0 0; background: linear-gradient(180deg, var(--dp-teal), #5fc3d8); animation: barGrow 1.2s ease both; transform-origin: bottom; }
.mock-bars span:nth-child(odd) { background: linear-gradient(180deg, var(--dp-orange), #ffc39b); }
.mock-bars span:nth-child(1) { height: 45%; animation-delay: .05s; }
.mock-bars span:nth-child(2) { height: 70%; animation-delay: .15s; }
.mock-bars span:nth-child(3) { height: 55%; animation-delay: .25s; }
.mock-bars span:nth-child(4) { height: 90%; animation-delay: .35s; }
.mock-bars span:nth-child(5) { height: 65%; animation-delay: .45s; }
.mock-bars span:nth-child(6) { height: 100%; animation-delay: .55s; }
.mock-bars span:nth-child(7) { height: 80%; animation-delay: .65s; }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.mock-code { grid-column: 1 / -1; min-width: 0; background: var(--dp-navy); color: #cfe3ea; border-radius: .8rem; padding: .85rem 1rem; font: 600 .72rem/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; white-space: nowrap; }
.mock-code .k { color: #ffb27f; } .mock-code .f { color: #7fd6ea; } .mock-code .s2 { color: #b5e48c; } .mock-code .c { color: #6f8a96; }
.float-card {
  position: absolute; background: #fff; color: var(--dp-ink); border-radius: .9rem; padding: .75rem .95rem;
  box-shadow: var(--dp-shadow-lg); display: flex; align-items: center; gap: .7rem; font-size: .85rem;
  animation: floatY 6s ease-in-out infinite;
}
.float-card .ic { width: 2.4rem; height: 2.4rem; border-radius: .7rem; display: grid; place-items: center; font-size: 1.15rem; color: #fff; flex: none; }
.float-card strong { display: block; font-family: var(--dp-font-heading); font-size: 1rem; line-height: 1.1; }
.float-card small { color: var(--dp-muted); }
.float-card.fc-1 { left: -1.25rem; bottom: 2.25rem; animation-delay: 0s; }
.float-card.fc-2 { right: -1rem; top: -.9rem; animation-delay: -3s; }
@media (max-width: 575.98px) { .float-card.fc-1 { left: .25rem; bottom: -1rem; } .float-card.fc-2 { right: .25rem; top: -.75rem; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 0; }
.hero-wave svg { width: 100%; height: 60px; display: block; }
@media (min-width: 768px) { .hero-wave svg { height: 90px; } }

/* --- Stats band ------------------------------------------------------------ */
.stats-band { position: relative; z-index: 2; margin-top: -3rem; }
@media (min-width: 992px) { .stats-band { margin-top: -5.5rem; } }
.stat-card {
  background: #fff; border: 1px solid var(--dp-border); border-radius: var(--dp-radius);
  padding: 1.5rem 1rem; text-align: center; box-shadow: var(--dp-shadow-sm); height: 100%;
}
.stat-card .num { font-family: var(--dp-font-heading); font-weight: 800; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); color: var(--dp-teal); line-height: 1; }
.stat-card .num.orange { color: var(--dp-orange-text); }
.stat-card .lbl { font-size: .9rem; color: var(--dp-muted); margin-top: .4rem; font-weight: 500; }

/* --- Service cards ----------------------------------------------------------- */
.service-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--dp-border); border-radius: var(--dp-radius);
  padding: 1.6rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--dp-shadow); border-color: var(--dp-teal-soft-2); }
.service-card .icon {
  width: 3.25rem; height: 3.25rem; border-radius: .9rem; display: grid; place-items: center;
  font-size: 1.45rem; color: var(--dp-teal); background: var(--dp-teal-soft); margin-bottom: 1.1rem;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.service-card:hover .icon { background: var(--dp-teal); color: #fff; transform: scale(1.05) rotate(-3deg); }
.service-card.accent .icon { color: #c2561a; background: var(--dp-orange-soft); }
.service-card.accent:hover .icon { background: var(--dp-orange); color: #fff; }
.service-card h3 { font-size: 1.15rem; margin-bottom: .55rem; }
.service-card p { color: var(--dp-muted); font-size: .95rem; flex: 1; margin-bottom: 1rem; }
.service-card .more { font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--dp-teal); display: inline-flex; align-items: center; gap: .35rem; }
.service-card .more .bi { transition: transform .2s ease; }
.service-card:hover .more .bi { transform: translateX(4px); }
.service-card .stretched-link::after { border-radius: var(--dp-radius); }

/* --- Feature / why-us ----------------------------------------------------------- */
.feature-item { display: flex; gap: 1rem; align-items: flex-start; }
.feature-item .ic { flex: none; width: 3rem; height: 3rem; border-radius: .85rem; display: grid; place-items: center; font-size: 1.35rem; color: #fff; background: linear-gradient(135deg, var(--dp-teal), #1ea5c2); box-shadow: 0 10px 20px -10px rgba(var(--dp-teal-rgb), .8); }
.feature-item .ic.orange { background: linear-gradient(135deg, var(--dp-orange), #ffb07a); box-shadow: 0 10px 20px -10px rgba(var(--dp-orange-rgb), .9); }
.feature-item h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.feature-item p { color: var(--dp-muted); margin: 0; font-size: .95rem; }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding-left: 2rem; margin-bottom: .65rem; }
.check-list li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .05rem; color: var(--dp-teal); font-size: 1.15rem; }
.check-list.orange li::before { color: var(--dp-orange); }

/* --- About visual ----------------------------------------------------------- */
.about-visual { position: relative; }
.about-visual img { border-radius: var(--dp-radius); box-shadow: var(--dp-shadow-lg); width: 100%; height: auto; object-fit: cover; }
.about-visual::before { content: ""; position: absolute; inset: auto -1rem -1rem auto; width: 55%; height: 55%; border-radius: var(--dp-radius); background: var(--dp-teal-soft); z-index: -1; }
.about-visual::after { content: ""; position: absolute; inset: -1rem auto auto -1rem; width: 40%; height: 40%; border-radius: var(--dp-radius); background: var(--dp-orange-soft); z-index: -1; }
.about-badge { position: absolute; left: 1rem; bottom: 1rem; background: #fff; border-radius: .9rem; padding: .8rem 1rem; box-shadow: var(--dp-shadow-lg); display: flex; align-items: center; gap: .75rem; }
.about-badge .n { font-family: var(--dp-font-heading); font-weight: 800; font-size: 1.6rem; color: var(--dp-teal); line-height: 1; }
.about-badge small { display: block; color: var(--dp-muted); font-size: .78rem; }

/* --- Process ----------------------------------------------------------- */
.process { position: relative; }
.process-step { position: relative; text-align: center; padding: 0 .5rem; }
.process-step .n {
  width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--dp-font-heading); font-weight: 800; font-size: 1.25rem; color: #fff;
  background: linear-gradient(135deg, var(--dp-teal), #1ea5c2); box-shadow: 0 12px 24px -12px rgba(var(--dp-teal-rgb), .9);
  position: relative; z-index: 1;
}
.process-step:nth-child(even) .n { background: linear-gradient(135deg, var(--dp-orange), #ffb07a); box-shadow: 0 12px 24px -12px rgba(var(--dp-orange-rgb), .9); }
.process-step h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.process-step p { color: var(--dp-muted); font-size: .93rem; margin: 0; }
@media (min-width: 992px) {
  .process-line { position: absolute; top: 2rem; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--dp-teal-soft-2) 0 10px, transparent 10px 18px); }
}

/* --- Tech strip ----------------------------------------------------------- */
.tech-pill {
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--dp-border); font-weight: 600; font-size: .9rem; color: var(--dp-ink);
  box-shadow: var(--dp-shadow-sm); transition: transform .2s ease, border-color .2s ease;
}
.tech-pill:hover { transform: translateY(-2px); border-color: var(--dp-teal-soft-2); }
.tech-pill .bi { color: var(--dp-teal); }
.tech-pill:nth-child(3n) .bi { color: var(--dp-orange); }

/* --- Testimonials ----------------------------------------------------------- */
.testimonial-card {
  background: #fff; border: 1px solid var(--dp-border); border-radius: var(--dp-radius); padding: 1.75rem;
  height: 100%; display: flex; flex-direction: column; box-shadow: var(--dp-shadow-sm); position: relative;
}
.testimonial-card .quote-mark { position: absolute; top: 1rem; right: 1.25rem; font-size: 3.5rem; line-height: 1; color: var(--dp-teal-soft-2); font-family: Georgia, serif; }
.testimonial-card .stars { color: #ffb400; font-size: .95rem; margin-bottom: .75rem; }
.testimonial-card blockquote { font-size: 1rem; color: var(--dp-slate); flex: 1; margin: 0 0 1.25rem; line-height: 1.65; }
.testimonial-card .who { display: flex; align-items: center; gap: .75rem; }
.testimonial-card .avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--dp-teal), #1ea5c2); font-family: var(--dp-font-heading); }
.row > div:nth-child(even) .testimonial-card .avatar { background: linear-gradient(135deg, var(--dp-orange), #ffb07a); }
.row > div:nth-child(3n) .testimonial-card .avatar { background: linear-gradient(135deg, var(--dp-navy), #2b5b70); }
.testimonial-card .who strong { display: block; font-size: .95rem; }
.testimonial-card .who small { color: var(--dp-muted); }

/* --- FAQ ----------------------------------------------------------- */
.faq .accordion-item { border: 1px solid var(--dp-border); border-radius: var(--dp-radius-sm) !important; margin-bottom: .75rem; overflow: hidden; background: #fff; }
.faq .accordion-button { font-weight: 700; font-family: var(--dp-font-heading); color: var(--dp-ink); padding: 1.1rem 1.25rem; background: #fff; box-shadow: none; font-size: 1rem; }
.faq .accordion-button:not(.collapsed) { color: var(--dp-teal-darker); background: var(--dp-teal-soft); }
.faq .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(var(--dp-teal-rgb), .2); }
.faq .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2307809b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
.faq .accordion-body { color: var(--dp-muted); padding: 1rem 1.25rem 1.25rem; line-height: 1.7; }

/* --- CTA band ----------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; border-radius: 1.5rem; color: #fff;
  background: radial-gradient(700px 300px at 100% 0%, rgba(var(--dp-orange-rgb), .45), transparent 60%), linear-gradient(135deg, var(--dp-teal-darker), var(--dp-teal) 60%, #1ea5c2);
  padding: 3rem 1.5rem;
}
@media (min-width: 768px) { .cta-band { padding: 4rem 3rem; } }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); }
.cta-band::after { content: ""; position: absolute; right: -6rem; bottom: -8rem; width: 22rem; height: 22rem; border-radius: 50%; border: 40px solid rgba(255,255,255,.08); pointer-events: none; }
.cta-band .row { position: relative; z-index: 1; }
.cta-contact { display: flex; align-items: center; gap: .8rem; color: #fff; text-decoration: none; }
.cta-contact .ic { width: 2.75rem; height: 2.75rem; border-radius: .8rem; background: rgba(255,255,255,.14); display: grid; place-items: center; font-size: 1.2rem; flex: none; }
.cta-contact small { display: block; opacity: .75; font-size: .78rem; }
.cta-contact strong { font-size: 1rem; }
.cta-contact:hover { color: #fff; } .cta-contact:hover .ic { background: rgba(255,255,255,.24); }

/* --- Contact form ----------------------------------------------------------- */
.contact-card { background: #fff; border: 1px solid var(--dp-border); border-radius: var(--dp-radius); box-shadow: var(--dp-shadow); padding: 1.75rem; }
@media (min-width: 768px) { .contact-card { padding: 2.25rem; } }
.form-label { font-weight: 600; font-size: .9rem; }
.form-control, .form-select { border-radius: .7rem; padding: .7rem .9rem; border-color: var(--dp-border); font-size: .95rem; }
.form-control:focus, .form-select:focus { border-color: var(--dp-teal); box-shadow: 0 0 0 .2rem rgba(var(--dp-teal-rgb), .18); }
.form-control::placeholder { color: #767676; }
.req { color: #e03131; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.contact-info-item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-info-item .ic { flex: none; width: 2.75rem; height: 2.75rem; border-radius: .8rem; display: grid; place-items: center; font-size: 1.2rem; background: var(--dp-teal-soft); color: var(--dp-teal); }
.contact-info-item strong { display: block; font-size: .95rem; }
.contact-info-item a, .contact-info-item span { color: var(--dp-muted); text-decoration: none; }
.contact-info-item a:hover { color: var(--dp-teal); }

/* --- Footer ----------------------------------------------------------- */
.site-footer { background: var(--dp-navy); color: rgba(255,255,255,.75); font-size: .93rem; }
.site-footer .footer-top { padding: 4rem 0 2.5rem; }
.site-footer .footer-heading { color: #fff; font-family: var(--dp-font-heading); font-weight: 700; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1.1rem; }
.site-footer a { color: rgba(255,255,255,.75); text-decoration: none; transition: color .15s ease; }
.site-footer a:hover { color: var(--dp-orange); }
.site-footer .footer-links { list-style: none; margin: 0; padding: 0; }
.site-footer .footer-links li { margin-bottom: .5rem; }
.site-footer .footer-brand img { height: 52px; width: auto; background: #fff; border-radius: .6rem; padding: .35rem .6rem; }
.site-footer .footer-contact li { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .6rem; }
.site-footer .footer-contact .bi { color: var(--dp-orange); margin-top: .15rem; }
.site-footer .social a { width: 2.4rem; height: 2.4rem; border-radius: .7rem; display: inline-grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; font-size: 1.05rem; margin-right: .4rem; }
.site-footer .social a:hover { background: var(--dp-teal); color: #fff; }
.site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 1.25rem 0; font-size: .85rem; color: rgba(255,255,255,.55); }
.site-footer .footer-bottom a { color: rgba(255,255,255,.65); }
@media (max-width: 767.98px) { .site-footer .footer-bottom { padding-bottom: 5.5rem; } }

/* --- Mobile sticky action bar ------------------------------------------------ */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: #fff; border-top: 1px solid var(--dp-border); box-shadow: 0 -6px 20px -12px rgba(16,35,48,.35);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: .55rem 0 .5rem; font-size: .72rem; font-weight: 600; color: var(--dp-ink); text-decoration: none; }
.mobile-bar a .bi { font-size: 1.15rem; color: var(--dp-teal); }
.mobile-bar a.primary { background: var(--dp-teal); color: #fff; }
.mobile-bar a.primary .bi { color: #fff; }
@media (min-width: 768px) { .mobile-bar { display: none; } }

/* --- Scroll to top / cookie banner ----------------------------------------------- */
.scroll-top {
  position: fixed; right: 1.25rem; bottom: 5rem; z-index: 1034; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--dp-teal); color: #fff; border: 0; display: grid; place-items: center; font-size: 1.1rem;
  box-shadow: var(--dp-shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.scroll-top:hover { background: var(--dp-teal-dark); color: #fff; }
@media (min-width: 768px) { .scroll-top { bottom: 1.5rem; } }
.cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 4.5rem; z-index: 1039; margin: 0 auto; max-width: 46rem;
  background: #fff; border: 1px solid var(--dp-border); border-radius: var(--dp-radius); box-shadow: var(--dp-shadow-lg); padding: 1rem 1.25rem;
}
@media (min-width: 768px) { .cookie-banner { bottom: 1.25rem; } }
.cookie-banner[hidden] { display: none !important; }

/* --- Skip link ----------------------------------------------------------- */
.skip-link { z-index: 1050; }

/* --- Scroll reveal ----------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .6s ease-out, transform .6s ease-out; will-change: opacity, transform; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="zoom"] { transform: scale(.94); }
[data-reveal].is-visible { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .float-card, .mock-bars span { animation: none; }
  .service-card, .btn, .tech-pill { transition: none; }
}

/* --- Generic page (coming soon / 404) ------------------------------------------------ */
.page-hero { background: linear-gradient(160deg, var(--dp-navy), var(--dp-navy-2)); color: #fff; padding: 4rem 0; }
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,.8); }
.breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.45); font-size: .85rem; }
.breadcrumb a { color: rgba(255,255,255,.8); text-decoration: none; }
.breadcrumb .active { color: #fff; }

/* --- Article cards (blog / newsletter) -------------------------------------- */
.article-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--dp-border); border-radius: var(--dp-radius);
  overflow: hidden; transition: transform .25s ease, box-shadow .25s ease;
}
.article-card:hover { transform: translateY(-5px); box-shadow: var(--dp-shadow); }
.article-card .thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dp-teal-soft); }
.article-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.article-card:hover .thumb img { transform: scale(1.04); }
.article-card .thumb-fallback { display: grid; place-items: center; color: var(--dp-teal); font-size: 2.4rem; background: linear-gradient(135deg, var(--dp-teal-soft), #fff); }
.col-md-6:nth-child(3n+2) .article-card .thumb-fallback { background: linear-gradient(135deg, var(--dp-orange-soft), #fff); color: var(--dp-orange-text); }
.col-md-6:nth-child(3n) .article-card .thumb-fallback { background: linear-gradient(135deg, var(--dp-teal-soft-2), var(--dp-teal-soft)); }
.article-card .body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.4rem 1.4rem; }
.article-card .meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .8rem; color: var(--dp-muted); margin-bottom: .6rem; }
.article-card .meta .bi { color: var(--dp-teal); }
.article-card h3 { font-size: 1.05rem; line-height: 1.35; margin-bottom: .5rem; }
.article-card h3 a { color: var(--dp-ink); text-decoration: none; }
.article-card h3 a:hover { color: var(--dp-teal); }
.article-card p { color: var(--dp-muted); font-size: .92rem; flex: 1; margin-bottom: .9rem; }
.article-card .more { color: var(--dp-teal); font-weight: 600; font-size: .9rem; }
.article-card .more .bi { transition: transform .2s ease; }
.article-card:hover .more .bi { transform: translateX(4px); }

/* --- Article detail --------------------------------------------------------- */
.article-body { font-size: 1.05rem; line-height: 1.8; color: var(--dp-slate); overflow-wrap: anywhere; }
.article-body p { margin-bottom: 1.25rem; }
.article-hero-img { border-radius: var(--dp-radius); box-shadow: var(--dp-shadow); width: 100%; height: auto; max-height: 460px; object-fit: cover; }
.article-nav a { text-decoration: none; }

/* --- Related-services strip -------------------------------------------------- */
.related-card {
  display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem;
  background: #fff; border: 1px solid var(--dp-border); border-radius: var(--dp-radius-sm);
  color: var(--dp-ink); font-weight: 600; font-size: .92rem; text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, color .2s ease;
}
.related-card > .bi:first-child { color: var(--dp-teal); font-size: 1.15rem; }
.related-card:hover { border-color: var(--dp-teal-soft-2); transform: translateY(-2px); color: var(--dp-teal); }

/* --- Timeline (about page) --------------------------------------------------- */
.timeline { position: relative; padding-left: 2.25rem; }
.timeline::before { content: ""; position: absolute; left: .55rem; top: .4rem; bottom: .4rem; width: 2px; background: repeating-linear-gradient(180deg, var(--dp-teal-soft-2) 0 10px, transparent 10px 18px); }
.timeline-item { position: relative; padding-bottom: 2.25rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; left: -2.25rem; top: .35rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--dp-teal); box-shadow: 0 0 0 4px var(--dp-teal-soft); }
.timeline-item:nth-child(even)::before { background: var(--dp-orange); box-shadow: 0 0 0 4px var(--dp-orange-soft); }
.timeline-item .year { font-family: var(--dp-font-heading); font-weight: 800; color: var(--dp-teal); font-size: 1.05rem; }
.timeline-item:nth-child(even) .year { color: var(--dp-orange-text); }
.timeline-item h3 { font-size: 1.15rem; margin: .15rem 0 .5rem; }
.timeline-item p { color: var(--dp-muted); margin: 0; }

/* --- Quote/testimonial page grid uses .testimonial-card (already defined) ---- */
.filter-pills .btn { border-radius: 999px; }
.filter-pills .btn.active { background: var(--dp-teal); color: #fff; border-color: var(--dp-teal); }

/* --- Legal pages -------------------------------------------------------------- */
.legal-body h2 { font-size: 1.3rem; margin-top: 2.25rem; margin-bottom: .75rem; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { color: var(--dp-slate); line-height: 1.75; }
.legal-toc { position: sticky; top: calc(var(--dp-header-h) + var(--dp-topbar-h) + 1.5rem); max-height: calc(100vh - var(--dp-header-h) - var(--dp-topbar-h) - 3rem); overflow-y: auto; }
.legal-toc a { display: block; padding: .35rem 0; color: var(--dp-muted); text-decoration: none; font-size: .9rem; border-left: 2px solid transparent; padding-left: .75rem; }
.legal-toc a:hover { color: var(--dp-teal); border-left-color: var(--dp-teal-soft-2); }