/* Sitek Agency — layout inspired by devagency.ma, palette: beige, gold, black */

:root {
  --color-bg: #f4ece2;
  --color-bg-alt: #ebe1d4;
  --color-surface: #faf6f0;
  --color-black: #14110d;
  --color-black-soft: #2a241c;
  --color-muted: #6b6257;
  --color-gold: #b8954a;
  --color-gold-deep: #8f6f2f;
  --color-gold-light: #d4bc7a;
  --color-accent: #c9a227;
  --radius-lg: 20px;
  --radius-md: 12px;
  --shadow-soft: 0 18px 50px rgba(20, 17, 13, 0.08);
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Raleway", system-ui, sans-serif;
}

/* Dark palette — applied when user/OS picks dark (see js/sitek-theme.js) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #14110e;
    --color-bg-alt: #1b1612;
    --color-surface: #242019;
    --color-black: #f7f1e8;
    --color-black-soft: #e8ddd0;
    --color-muted: #b0a295;
    --color-gold: #d4b45c;
    --color-gold-deep: #e4c66a;
    --color-gold-light: #efd78a;
    --color-accent: #e2ba4a;
    --shadow-soft: 0 22px 56px rgba(0, 0, 0, 0.52);
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #14110e;
  --color-bg-alt: #1b1612;
  --color-surface: #242019;
  --color-black: #f7f1e8;
  --color-black-soft: #e8ddd0;
  --color-muted: #b0a295;
  --color-gold: #d4b45c;
  --color-gold-deep: #e4c66a;
  --color-gold-light: #efd78a;
  --color-accent: #e2ba4a;
  --shadow-soft: 0 22px 56px rgba(0, 0, 0, 0.52);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-black-soft);
  background: var(--color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  color: var(--color-black);
  font-weight: 600;
  line-height: 1.15;
}

a {
  color: var(--color-gold-deep);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-accent);
}

/* Primary CTAs — Sitek black & gold (replaces Bootstrap default blue) */
.btn-primary {
  --bs-btn-color: #14110d;
  --bs-btn-bg: #b8954a;
  --bs-btn-border-color: #8f6f2f;
  --bs-btn-hover-color: #f7f1e8;
  --bs-btn-hover-bg: #14110d;
  --bs-btn-hover-border-color: #d4bc7a;
  --bs-btn-active-color: #f7f1e8;
  --bs-btn-active-bg: #0f0d0b;
  --bs-btn-active-border-color: #d4bc7a;
  --bs-btn-disabled-color: rgba(20, 17, 13, 0.55);
  --bs-btn-disabled-bg: #c8bba5;
  --bs-btn-disabled-border-color: #b5a68f;
  --bs-btn-focus-shadow-rgb: 184, 149, 74;
  color: var(--bs-btn-color) !important;
  background-color: var(--bs-btn-bg) !important;
  border-color: var(--bs-btn-border-color) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.btn-primary:not(.sideMenuButton):hover,
.btn-primary:not(.sideMenuButton):focus {
  color: var(--bs-btn-hover-color) !important;
  background-color: var(--bs-btn-hover-bg) !important;
  border-color: var(--bs-btn-hover-border-color) !important;
}

.btn-primary:not(.sideMenuButton):active,
.btn-primary:not(.sideMenuButton).active,
.show > .btn-primary:not(.sideMenuButton).dropdown-toggle {
  color: var(--bs-btn-active-color) !important;
  background-color: var(--bs-btn-active-bg) !important;
  border-color: var(--bs-btn-active-border-color) !important;
}

.btn-primary:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(184, 149, 74, 0.42) !important;
}

.btn-primary:disabled,
.btn-primary.disabled,
fieldset:disabled .btn-primary {
  color: var(--bs-btn-disabled-color) !important;
  background-color: var(--bs-btn-disabled-bg) !important;
  border-color: var(--bs-btn-disabled-border-color) !important;
  opacity: 1;
}

img {
  max-width: 100%;
  height: auto;
}

.divider {
  height: clamp(48px, 8vw, 96px);
}

.divider-sm {
  height: clamp(28px, 5vw, 48px);
}

/* ---------- Header ---------- */
.header-area {
  position: sticky;
  top: 0;
  z-index: 1040;
  background: rgba(244, 236, 226, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(184, 149, 74, 0.18);
}

.navbar-brand img {
  height: 44px;
  width: auto;
  object-fit: contain;
}

.header-area .navbar-nav .nav-link {
  color: var(--color-black-soft);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.06vw, 1.125rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 0.55rem 1.05rem !important;
}

.header-area .navbar-nav .nav-link:hover,
.header-area .navbar-nav .nav-link:focus {
  color: var(--color-gold-deep);
}

.header-area .navbar-nav .nav-link.active {
  color: var(--color-gold-deep);
  font-weight: 700;
}

.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(184, 149, 74, 0.35);
  background: var(--color-surface);
  color: var(--color-black);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.theme-btn .bi {
  font-size: 1.125rem;
  line-height: 1;
  display: block;
}

.sideMenuButton {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.95rem !important;
  border-radius: 999px !important;
  border: none !important;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold)) !important;
  color: var(--color-black) !important;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(184, 149, 74, 0.35);
}

.sideMenuButton svg path {
  stroke: currentColor !important;
}

.navbar-toggler {
  border: 1px solid rgba(184, 149, 74, 0.4);
  border-radius: 10px;
  padding: 0.4rem 0.55rem;
  color: var(--color-black);
}

/* ---------- Offcanvas ---------- */
.right-sitek-offcanvas {
  background: linear-gradient(165deg, #1a1714 0%, #0f0d0c 100%);
  color: #ebe1d4;
  max-width: min(440px, 92vw);
}

.right-sitek-offcanvas .btn-close {
  filter: invert(1) grayscale(100%) brightness(1.8);
}

.right-sitek-offcanvas h4 {
  color: var(--color-gold-light);
  font-size: 1.15rem;
}

.right-sitek-offcanvas .contact-info .icon svg path {
  fill: var(--color-gold);
}

.right-sitek-offcanvas .contact-info > div {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.right-sitek-offcanvas .contact-info p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.75;
}

.right-sitek-offcanvas .contact-info h5 a {
  color: #fff;
  font-size: 1rem;
}

.right-sitek-offcanvas .social-nav {
  display: flex;
  gap: 0.85rem;
}

.right-sitek-offcanvas .social-nav a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(212, 188, 122, 0.35);
  color: var(--color-gold-light);
}

.right-sitek-offcanvas .social-nav a:hover {
  background: rgba(212, 188, 122, 0.12);
  color: #fff;
}

.right-sitek-offcanvas .navbar-brand img {
  max-height: 48px;
  width: auto;
}

/* ---------- Hero ---------- */
.hero-wrapper .hero-title-responsive {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  letter-spacing: -0.02em;
}

.hero-content.home2 .hero-focus-strip {
  padding: 0.875rem 1.05rem;
  border-radius: 1rem;
  border: 1px solid rgba(184, 149, 74, 0.35);
  background: rgba(237, 225, 208, 0.35);
}

.hero-content.home2 .hero-focus-strip-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-content.home2 .hero-focus-strip-list li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.42rem;
  font-size: 0.925rem;
  line-height: 1.42;
  color: rgba(35, 30, 25, 0.88);
}

.hero-content.home2 .hero-focus-strip-list li:last-child {
  margin-bottom: 0;
}

.hero-content.home2 .hero-focus-strip-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-deep));
}

.hero-content.home2 .hero-focus-strip .parity-trust-caption {
  line-height: 1.35;
}

.hero-content.home2 .btn-primary {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  position: relative;
  overflow: hidden;
  padding: 0.95rem 1.25rem !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold)) !important;
  color: var(--color-black) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none !important;
  box-shadow: 0 12px 32px rgba(184, 149, 74, 0.4);
}

.hero-content.home2 .btn-primary:hover {
  filter: brightness(1.03);
}

/* Hero trust strip — avatars + Partner / 30+ + caption (homepage) */
.hero-trust-suite {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
}

.hero-trust-suite__lead {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: 0 1 auto;
}

.hero-trust-suite__avatars {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.hero-trust-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(253, 250, 244, 0.98);
  box-shadow:
    0 2px 0 rgba(184, 149, 74, 0.12),
    0 6px 16px rgba(20, 17, 13, 0.08);
}

.hero-trust-avatar + .hero-trust-avatar {
  margin-left: -13px;
}

.hero-trust-suite__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  line-height: 1;
  min-width: 0;
}

.hero-trust-suite__kicker {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.hero-trust-suite__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.hero-trust-suite__plus {
  font-weight: 800;
  font-size: 0.78em;
  margin-inline-start: 0.06em;
  color: var(--color-gold-deep);
}

.hero-trust-suite__caption.parity-trust-caption {
  flex: 1 1 min(220px, 100%);
  max-width: 16rem;
  margin-bottom: 0 !important;
  line-height: 1.42;
}

@media (max-width: 380px) {
  .hero-trust-suite__caption.parity-trust-caption {
    flex-basis: 100%;
    max-width: none;
  }
}

/* ---------- Video / stats CTA ---------- */
.cta-video-wrapper {
  padding-bottom: clamp(32px, 6vw, 64px);
}

.cta-video-wrapper .video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  box-shadow: var(--shadow-soft);
  background: linear-gradient(135deg, var(--color-bg-alt), #d8cbb8);
}

.cta-video-wrapper .video-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-video-wrapper .cta-content h2 {
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  color: var(--color-gold-deep);
}

.cta-video-wrapper .cta-content h4 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

/* ---------- Mission ---------- */
.mission-vision-wrapper {
  background: var(--color-surface);
  border-top: 1px solid rgba(184, 149, 74, 0.12);
  border-bottom: 1px solid rgba(184, 149, 74, 0.12);
}

.mission-vision-img-container {
  position: relative;
}

.mission-vision-img-container > img:first-of-type {
  border-radius: var(--radius-lg);
  width: 100%;
  box-shadow: var(--shadow-soft);
}

.mission-vision-img-container .experience {
  position: absolute;
  right: clamp(12px, 4vw, 28px);
  bottom: clamp(12px, 4vw, 28px);
  background: rgba(20, 17, 13, 0.92);
  color: var(--color-gold-light);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  text-align: center;
  border: 1px solid rgba(212, 188, 122, 0.35);
}

.mission-vision-img-container .experience h3 {
  color: #fff;
  font-size: 1.85rem;
  margin-bottom: 0.15rem !important;
}

.mission-vision-img-container .experience span {
  font-size: 0.82rem;
  opacity: 0.9;
}

.mission-vision-content > h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
}

.mission-vision-accordion .accordion-item {
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  margin-bottom: 0.65rem;
  overflow: hidden;
  border: 1px solid rgba(184, 149, 74, 0.22);
}

.mission-vision-accordion .accordion-button {
  background: var(--color-bg);
  color: var(--color-black);
  font-family: var(--font-display);
  font-weight: 600;
  box-shadow: none !important;
}

.mission-vision-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(90deg, rgba(212, 188, 122, 0.25), transparent);
  color: var(--color-gold-deep);
}

.mission-vision-accordion .accordion-body {
  background: #fff;
}

/* ---------- Portfolio ---------- */
.projects-wrapper-two .section-heading h2 {
  font-size: clamp(1.85rem, 3.8vw, 2.35rem);
}

.projects-wrapper-two .section-heading h5 {
  color: var(--color-muted);
  font-family: var(--font-body);
  font-weight: 500;
}

.portfolio-button-prev,
.portfolio-button-next {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(184, 149, 74, 0.35);
  background: var(--color-surface);
  transition: background 0.2s ease, transform 0.15s ease;
}

.portfolio-button-prev:hover,
.portfolio-button-next:hover {
  background: var(--color-bg-alt);
  transform: scale(1.05);
}

.portfolio-button-prev svg path,
.portfolio-button-next svg path {
  fill: var(--color-black);
}

.portfolio-card-two {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-bg-alt);
}

.portfolio-card-two img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.portfolio-card-two:hover img {
  transform: scale(1.04);
}

.portfolio-overlay-content {
  position: absolute;
  inset: 0;
  padding: 1rem;
  background: linear-gradient(
    to top,
    rgba(20, 17, 13, 0.75),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-card-two:hover .portfolio-overlay-content {
  opacity: 1;
}

.portfolio-overlay-content a {
  margin-left: auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gold-light);
  color: var(--color-black);
}

.portfolio-content-two {
  margin-top: 1rem;
}

.portfolio-content-two h3 {
  font-size: 1.2rem;
  margin-bottom: 0.2rem;
}

.portfolio-content-two h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.portfolio-content-two h3 a:hover {
  color: var(--color-gold-deep);
}

.portfolio-content-two p {
  color: var(--color-muted);
  font-size: 0.92rem;
}

/* ---------- Marquee ---------- */
.catagory-slide {
  overflow: hidden;
  padding: 1.75rem 0;
  border-top: 1px solid rgba(184, 149, 74, 0.15);
  border-bottom: 1px solid rgba(184, 149, 74, 0.15);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 188, 122, 0.12),
    transparent
  );
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: marquee-scroll 48s linear infinite;
}

.marquee-line {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  margin: 0;
  white-space: nowrap;
  color: rgba(40, 35, 30, 0.35);
}

.marquee-line span {
  display: inline-block;
  padding: 0 0.5rem;
  color: var(--color-muted);
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ---------- Process (enhanced stage) ---------- */
.process-wrapper.bg-secondary {
  background: var(--color-bg-alt) !important;
}

.process-enhanced.process-wrapper {
  position: relative;
  isolation: isolate;
  background: #1a1714 !important;
  overflow: clip;
}

.process-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 50% at 50% -18%, rgba(201, 162, 39, 0.12), transparent 52%),
    radial-gradient(ellipse 55% 45% at 100% 105%, rgba(184, 149, 74, 0.07), transparent 50%),
    linear-gradient(180deg, #1f1b17 0%, #1a1714 45%, #141210 100%);
}

.process-bg__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(88px);
  opacity: 0.72;
}

.process-bg__glow--1 {
  width: min(72vw, 520px);
  height: min(72vw, 520px);
  top: -12%;
  left: -8%;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.5) 0%, transparent 70%);
}

.process-bg__glow--2 {
  width: min(58vw, 420px);
  height: min(58vw, 420px);
  bottom: 8%;
  right: -10%;
  background: radial-gradient(circle, rgba(212, 188, 122, 0.32) 0%, transparent 68%);
}

.process-bg__mesh {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(201, 162, 39, 0.065) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, #000 35%, transparent 97%);
  opacity: 0.95;
}

.process-bg__grain {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.process-wrapper .section-heading h2 {
  font-size: clamp(1.85rem, 3.8vw, 2.35rem);
}

.process-header {
  max-width: 52rem;
}

.process-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.1);
  border: 1px solid rgba(201, 162, 39, 0.38);
  box-shadow: 0 0 28px rgba(201, 162, 39, 0.12);
}

.process-title-display {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.8vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #f7f0e6;
  margin: 0;
}

.process-enhanced .process-intro {
  max-width: 40rem;
  margin-inline: auto;
  font-size: clamp(0.95rem, 0.9rem + 0.22vw, 1.08rem);
  line-height: 1.68;
  color: rgba(232, 223, 208, 0.78) !important;
}

.stepper-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 720px;
  margin: 0 auto;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
}

.stepper-wrap--wide {
  max-width: 980px;
  gap: 0.35rem;
  padding-block: 0.35rem;
}

.stepper-wrap::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 10%;
  right: 10%;
  height: 3px;
  background: rgba(201, 162, 39, 0.14);
  z-index: 0;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stepper-wrap--wide::before {
  left: 4.5%;
  right: 4.5%;
}

.stepper-wrap--wide::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 4.5%;
  width: 0;
  max-width: 91%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-gold-deep),
    var(--color-accent) 45%,
    var(--color-gold-light) 100%
  );
  z-index: 0;
  border-radius: 4px;
  box-shadow: 0 0 24px rgba(201, 162, 39, 0.35);
  transition: width 1.15s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.process-enhanced.is-visible .stepper-wrap--wide::after {
  width: 91%;
}

.stepper-wrap > div {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.stepper-wrap h6 {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--color-gold-light), var(--color-gold));
  color: var(--color-black);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 0.7rem !important;
  box-shadow:
    0 10px 28px rgba(184, 149, 74, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(143, 111, 47, 0.25);
}

.stepper-wrap > div > span {
  display: block;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: linear-gradient(145deg, #3a332a, #1a1714);
  margin: 0.35rem auto 0;
  border: 2px solid var(--color-gold-light);
  box-shadow:
    0 0 0 3px rgba(201, 162, 39, 0.12),
    0 0 22px rgba(201, 162, 39, 0.35);
}

.process-cards-rail {
  position: relative;
  z-index: 1;
}

/* Connecting rail between cards (desktop) */
@media (min-width: 1200px) {
  .process-cards-row {
    position: relative;
  }

  .process-cards-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 6%;
    right: 6%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(201, 162, 39, 0.45) 8%,
      rgba(212, 188, 122, 0.35) 92%,
      transparent
    );
    box-shadow: 0 0 16px rgba(201, 162, 39, 0.25);
    pointer-events: none;
  }
}

.process-card-two {
  position: relative;
  background: transparent;
  border-radius: calc(var(--radius-lg) + 2px);
  padding: 0;
  height: 100%;
  border: none;
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, 0.2),
    0 0 52px rgba(201, 162, 39, 0.14),
    0 0 100px rgba(201, 162, 39, 0.07),
    0 26px 52px rgba(0, 0, 0, 0.55);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.process-card-enhanced::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8%;
  transform: translateX(-50%);
  width: 118%;
  height: 52%;
  z-index: 0;
  background: radial-gradient(ellipse 58% 85% at 50% 0%, rgba(201, 162, 39, 0.55), transparent 62%);
  filter: blur(38px);
  opacity: 0.52;
  pointer-events: none;
  transition: opacity 0.45s ease, filter 0.45s ease;
}

.process-card-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(212, 188, 122, 0.85),
    rgba(201, 162, 39, 0.28) 38%,
    rgba(60, 52, 42, 0.55) 50%,
    rgba(201, 162, 39, 0.4)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 0.35s ease;
}

.process-card-enhanced--accent .process-card-border {
  background: linear-gradient(
    135deg,
    var(--color-accent),
    rgba(255, 230, 170, 0.45) 32%,
    rgba(90, 75, 50, 0.5) 50%,
    var(--color-gold-deep)
  );
  opacity: 1;
  box-shadow: 0 0 40px rgba(201, 162, 39, 0.2);
}

.process-card-inner {
  position: relative;
  padding: 1.6rem 1.35rem 1.5rem;
  border-radius: calc(var(--radius-lg) + 1px);
  z-index: 2;
  background: linear-gradient(
    165deg,
    rgba(38, 33, 28, 0.94) 0%,
    rgba(20, 18, 15, 0.97) 48%,
    rgba(14, 12, 10, 0.99) 100%
  );
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(201, 162, 39, 0.08);
}

.process-card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 3;
  background: linear-gradient(
    105deg,
    transparent 34%,
    rgba(255, 248, 228, 0.18) 47%,
    rgba(201, 162, 39, 0.14) 52%,
    transparent 65%
  );
  transform: translateX(-120%) skewX(-12deg);
  pointer-events: none;
  opacity: 0;
}

.process-step-num {
  position: absolute;
  top: 0.85rem;
  right: 0.95rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.65rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(201, 162, 39, 0.2);
  letter-spacing: -0.04em;
  user-select: none;
  z-index: 1;
}

.process-icon-wrap {
  position: relative;
  width: 4.1rem;
  height: 4.1rem;
  display: grid;
  place-items: center;
  margin-bottom: 0.65rem;
}

.process-icon-aura {
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.55) 0%, transparent 68%);
  opacity: 0.75;
  filter: blur(12px);
  transform: scale(0.92);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  pointer-events: none;
}

.process-icon-ring {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: conic-gradient(
    from 220deg,
    var(--color-gold-deep),
    var(--color-gold-light),
    rgba(255, 255, 255, 0.75),
    var(--color-accent),
    var(--color-gold-deep)
  );
  opacity: 0.55;
  transition: transform 0.8s linear, opacity 0.35s ease;
  pointer-events: none;
}

.process-icon-ring::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 19px;
  background: linear-gradient(165deg, #2c2620 0%, #12100e 100%);
  box-shadow: inset 0 1px 0 rgba(201, 162, 39, 0.22);
}

.process-card-two .process-icon {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 1.85rem;
  line-height: 1;
  color: var(--color-gold-light);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 0 14px rgba(201, 162, 39, 0.35));
}

.process-phase-pill {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  padding: 0.3rem 0.65rem;
  border-radius: 8px;
  background: rgba(201, 162, 39, 0.12);
  border: 1px solid rgba(201, 162, 39, 0.35);
  margin-bottom: 0.35rem;
}

.process-phase-pill--accent {
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.3), rgba(201, 162, 39, 0.1));
  border-color: rgba(212, 188, 122, 0.45);
  color: #fdf4df;
}

.process-card-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
  padding-right: 2.25rem;
  line-height: 1.28;
  color: #f7efe4;
}

.process-card-lead {
  font-size: 0.89rem;
  color: rgba(220, 210, 195, 0.78);
  line-height: 1.65;
  margin-bottom: 0.95rem;
  flex-grow: 0;
}

.process-deliverables {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  font-size: 0.8rem;
  color: rgba(210, 200, 186, 0.9);
  line-height: 1.5;
  flex-grow: 1;
}

.process-deliverables li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.48rem;
}

.process-deliverables li:last-child {
  margin-bottom: 0;
}

.process-deliverables li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-gold-light);
  line-height: 1.45;
}

.process-outcome {
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(200, 190, 175, 0.9);
  margin: 0;
  padding-top: 0.75rem;
  margin-top: auto;
  border-top: 1px dashed rgba(201, 162, 39, 0.38);
}

.process-outcome strong {
  color: var(--color-gold-light);
  font-weight: 700;
}

.process-card-enhanced--accent .process-card-inner {
  background: linear-gradient(
    165deg,
    rgba(48, 40, 30, 0.96) 0%,
    rgba(24, 20, 16, 0.98) 45%,
    rgba(18, 15, 12, 1) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(201, 162, 39, 0.12),
    0 0 36px rgba(201, 162, 39, 0.06);
}

.process-card-two h4 {
  font-size: 1.15rem;
  margin-top: 1rem;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .process-card-enhanced:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow:
      0 8px 0 rgba(201, 162, 39, 0.22),
      0 0 72px rgba(201, 162, 39, 0.22),
      0 0 120px rgba(201, 162, 39, 0.1),
      0 44px 72px rgba(0, 0, 0, 0.55);
  }

  .process-card-enhanced:hover::before {
    opacity: 0.72;
    filter: blur(42px);
  }

  .process-card-enhanced:hover .process-card-border {
    opacity: 1;
  }

  .process-card-enhanced:hover .process-icon {
    transform: scale(1.08) rotate(-3deg);
  }

  .process-card-enhanced:hover .process-icon-ring {
    transform: rotate(180deg);
    opacity: 0.85;
  }

  .process-card-enhanced:hover .process-icon-aura {
    transform: scale(1.08);
    opacity: 0.95;
  }

  .process-card-enhanced:hover .process-card-shine {
    opacity: 1;
    transform: translateX(120%) skewX(-12deg);
    transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  }
}

.process-enhanced .process-reveal[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(0.985);
}

.process-enhanced.is-visible .process-reveal[data-reveal] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

@media (prefers-reduced-motion: no-preference) {
  .process-enhanced .process-reveal[data-reveal] {
    transition:
      opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.88s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(0.08s + var(--reveal-i, 0) * 0.11s);
  }

  body.page-home-parity .process-enhanced .process-reveal[data-reveal] {
    transform: translate3d(0, 56px, 0) scale(0.982);
    transition:
      opacity 1.08s cubic-bezier(0.22, 1, 0.36, 1),
      transform 1.26s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(0.14s + var(--reveal-i, 0) * 0.14s);
  }

  .process-enhanced.is-visible .process-bg__glow--1,
  .process-enhanced.is-visible .process-bg__glow--2 {
    animation: processGlowDrift 14s ease-in-out infinite alternate;
  }

  .process-enhanced.is-visible .process-bg__glow--2 {
    animation-delay: -7s;
  }
}

@keyframes processGlowDrift {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(18px, 12px) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-enhanced .process-reveal[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .process-enhanced .stepper-wrap--wide::after {
    width: 91%;
  }

  .process-card-shine {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .stepper-wrap h6 {
    padding: 0.32rem 0.5rem;
    font-size: 0.62rem;
  }

  .stepper-wrap--wide::before,
  .stepper-wrap--wide::after {
    left: 3%;
    right: 3%;
    top: 15px;
  }

  .process-enhanced.is-visible .stepper-wrap--wide::after {
    width: 94%;
  }

  .process-icon-wrap {
    width: 3.65rem;
    height: 3.65rem;
  }

  .process-card-two .process-icon {
    font-size: 1.65rem;
  }
}

/* ---------- FAQ ---------- */
.faq-wrapper .faq-image {
  position: relative;
}

.faq-wrapper .faq-image img {
  border-radius: var(--radius-lg);
  width: 100%;
  box-shadow: var(--shadow-soft);
}

.faq-wrapper .faq-info {
  position: absolute;
  left: clamp(14px, 4vw, 28px);
  bottom: clamp(14px, 4vw, 28px);
  gap: 0.85rem;
  background: rgba(20, 17, 13, 0.9);
  color: var(--color-gold-light);
  padding: 1rem 1.35rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(212, 188, 122, 0.35);
}

.faq-wrapper .faq-info h2 {
  font-size: 2rem;
  color: #fff;
}

.faq-wrapper .faq-info p {
  color: rgba(255, 255, 255, 0.88);
}

.faq-accordion .accordion-item {
  border: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 0.6rem;
  border: 1px solid rgba(184, 149, 74, 0.2);
}

.faq-accordion .accordion-button {
  font-family: var(--font-display);
  font-weight: 600;
  background: var(--color-bg);
  color: var(--color-black);
  box-shadow: none !important;
}

.faq-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(90deg, rgba(212, 188, 122, 0.22), transparent);
  color: var(--color-gold-deep);
}

/* ---------- Blog teaser ---------- */

.blog-teaser-wrapper {
  border-color: rgba(184, 149, 74, 0.25) !important;
  background: var(--color-bg-alt);
}

.blog-teaser-title {
  font-family: var(--font-display);
}

.blog-teaser-copy {
  max-width: 520px;
}

.footer-wrapper {
  color: rgba(235, 225, 212, 0.85);
  padding-bottom: 2rem;
}

.footer-wrapper.footer-dark-stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #1a1714 !important;
}

.footer-wrapper.footer-dark-stage > *:not(.footer-bg) {
  position: relative;
  z-index: 1;
}

.footer-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 55% at 12% 35%, rgba(201, 162, 39, 0.22), transparent 52%),
    radial-gradient(ellipse 70% 50% at 92% 78%, rgba(184, 149, 74, 0.1), transparent 50%),
    linear-gradient(180deg, #1f1b17 0%, #1a1714 45%, #141210 100%);
}

.footer-bg__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(88px);
  opacity: 0.72;
  pointer-events: none;
}

.footer-bg__glow--1 {
  width: min(72vw, 520px);
  height: min(72vw, 520px);
  top: 20%;
  left: -14%;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.5) 0%, transparent 70%);
}

.footer-bg__glow--2 {
  width: min(58vw, 420px);
  height: min(58vw, 420px);
  bottom: -5%;
  right: -12%;
  background: radial-gradient(circle, rgba(212, 188, 122, 0.32) 0%, transparent 68%);
}

.footer-bg__mesh {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(201, 162, 39, 0.065) 1px, transparent 0);
  background-size: 28px 28px;
  opacity: 0.95;
  pointer-events: none;
}

.footer-bg__grain {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.footer-wrapper h5 {
  color: var(--color-gold-light);
  font-family: var(--font-display);
}

.footer-wrapper .footer-card > p {
  max-width: 320px;
}

.footer-wrapper.footer-dark-stage .footer-card > a img {
  filter: drop-shadow(0 4px 28px rgba(201, 162, 39, 0.2));
}

.footer-wrapper .footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-wrapper .footer-nav li {
  margin-bottom: 0.45rem;
}

.footer-wrapper .footer-nav a {
  color: rgba(235, 225, 212, 0.78);
}

.footer-wrapper .footer-nav a:hover {
  color: #fff;
}

.footer-wrapper .social-nav a {
  color: rgba(235, 225, 212, 0.78);
  margin-right: 0.85rem;
  font-size: 1.1rem;
}

.footer-wrapper .social-nav a:hover {
  color: var(--color-gold-light);
}

.footer-wrapper .subscribe-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.footer-wrapper .subscribe-form .form-control {
  flex: 1 1 200px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(212, 188, 122, 0.25);
  color: #fff;
  border-radius: 999px;
  padding-left: 1.1rem;
}

.footer-wrapper .subscribe-form .form-control::placeholder {
  color: rgba(235, 225, 212, 0.45);
}

.footer-wrapper .subscribe-form .btn {
  border-radius: 999px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  border: none;
  color: var(--color-black);
}

.footer-line {
  height: 1px;
  background: rgba(212, 188, 122, 0.2);
  margin: 2rem 0 1rem;
}

.footer-wrapper .copyright {
  color: rgba(235, 225, 212, 0.55);
  font-size: 0.9rem;
}

/* ---------- Back to top ---------- */
.back-to-top-wrapper {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.back-to-top-wrapper.back-to-top-btn-show {
  opacity: 1;
  visibility: visible;
}

.back-to-top-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(184, 149, 74, 0.45);
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  color: var(--color-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

/* ---------- Inner pages (Services, Contact, Blog) ---------- */

.page-hero-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(200px, 28vh, 320px);
  text-align: center;
  padding: clamp(1.65rem, 4vw, 2.65rem) 0;
  color: #fff;
  overflow: hidden;
  background-image: linear-gradient(
      120deg,
      rgba(26, 22, 18, 0.88),
      rgba(184, 149, 74, 0.35)
    ),
    url("https://images.unsplash.com/photo-1557804506-669a67965ba0?w=1920&q=75");
  background-size: cover;
  background-position: center;
}

/* Projects + Services hero — coding / dev workspace (stronger veil for light areas in photo) */
body.page-projects .page-hero-banner,
body.page-services .page-hero-banner {
  background-image: linear-gradient(
      120deg,
      rgba(14, 12, 10, 0.92) 0%,
      rgba(22, 18, 14, 0.82) 45%,
      rgba(40, 32, 22, 0.55) 100%
    ),
    url("https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1920&q=75&auto=format&fit=crop");
}

/* Testimonials hero — coding photo + footer-matched gold/dark atmosphere */
body.page-testimonials .page-hero-banner {
  background-color: #1a1714;
  background-image:
    radial-gradient(ellipse 85% 55% at 12% 35%, rgba(201, 162, 39, 0.22), transparent 52%),
    radial-gradient(ellipse 70% 50% at 92% 78%, rgba(184, 149, 74, 0.12), transparent 50%),
    linear-gradient(180deg, rgba(31, 27, 23, 0.88) 0%, rgba(26, 23, 20, 0.84) 45%, rgba(20, 18, 16, 0.9) 100%),
    url("https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=1920&q=75&auto=format&fit=crop");
  background-size: auto, auto, 100% 100%, cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.page-testimonials .page-hero-banner.page-hero-banner--parity > .container {
  z-index: 2;
}

body.page-testimonials .page-hero-banner--parity .page-hero-banner__orb {
  filter: blur(88px);
  opacity: 0.72;
}

body.page-testimonials .page-hero-banner--parity .page-hero-banner__orb--1 {
  width: min(72vw, 520px);
  height: min(72vw, 520px);
  top: 20%;
  left: -14%;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.5) 0%, transparent 70%);
}

body.page-testimonials .page-hero-banner--parity .page-hero-banner__orb--2 {
  width: min(58vw, 420px);
  height: min(58vw, 420px);
  bottom: -5%;
  right: -12%;
  background: radial-gradient(circle, rgba(212, 188, 122, 0.32) 0%, transparent 68%);
}

/* Testimonials — centered gold blur bloom (footer-matched base + extra focal glow) */
body.page-testimonials .page-hero-banner--parity .page-hero-banner__fx::after {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55% 50% at 50% 40%,
    rgba(245, 232, 185, 0.42) 0%,
    rgba(201, 162, 39, 0.2) 38%,
    rgba(184, 149, 74, 0.06) 58%,
    transparent 72%
  );
  filter: blur(68px);
  opacity: 0.92;
}

/* Dot mesh + grain — same as .footer-bg__mesh / .footer-bg__grain */
body.page-testimonials .page-hero-banner--parity .page-hero-banner__mesh {
  background-image: radial-gradient(circle at 1px 1px, rgba(201, 162, 39, 0.065) 1px, transparent 0);
  background-size: 28px 28px;
  opacity: 0.95;
  inset: 0;
}

body.page-testimonials .page-hero-banner--parity .page-hero-banner__fx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Contact hero — code on screen (wide crop; distinct from Projects / Testimonials) */
body.page-contact .page-hero-banner {
  background-image: linear-gradient(
      120deg,
      rgba(14, 12, 10, 0.9) 0%,
      rgba(22, 18, 14, 0.78) 45%,
      rgba(36, 30, 22, 0.52) 100%
    ),
    url("https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=1920&h=720&fit=crop&q=75&auto=format");
  background-position: center center;
}

/* Inner-page hero — gold atmosphere (parity with home/footer glow language) */
.page-hero-banner.page-hero-banner--parity {
  isolation: isolate;
}

.page-hero-banner--parity .page-hero-banner__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.page-hero-banner--parity .page-hero-banner__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.58;
}

.page-hero-banner--parity .page-hero-banner__orb--1 {
  width: min(480px, 62vw);
  height: min(480px, 62vw);
  left: -16%;
  top: -30%;
  background: radial-gradient(circle, rgba(230, 204, 130, 0.62), transparent 68%);
}

.page-hero-banner--parity .page-hero-banner__orb--2 {
  width: min(420px, 56vw);
  height: min(420px, 56vw);
  right: -18%;
  bottom: -34%;
  background: radial-gradient(circle, rgba(184, 149, 74, 0.52), transparent 65%);
}

/* Extra gold haze in the opposite corners (above mesh, soft blur) */
.page-hero-banner--parity .page-hero-banner__fx::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 94% 10%,
      rgba(240, 214, 145, 0.55) 0%,
      rgba(184, 149, 74, 0.18) 38%,
      transparent 58%
    ),
    radial-gradient(
      circle at 6% 90%,
      rgba(184, 149, 74, 0.48) 0%,
      rgba(138, 112, 52, 0.15) 40%,
      transparent 56%
    );
  filter: blur(46px);
  opacity: 0.92;
}

.page-hero-banner--parity .page-hero-banner__mesh {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 90% 70% at 50% 100%, rgba(26, 22, 18, 0.45), transparent 55%);
  opacity: 0.85;
}

.page-hero-banner--parity > .container {
  position: relative;
  z-index: 1;
}

.breadcrumb-content .page-hero-title {
  font-size: clamp(2.05rem, 6vw, 3.35rem);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  text-shadow:
    0 2px 28px rgba(0, 0, 0, 0.55),
    0 12px 40px rgba(0, 0, 0, 0.35);
  color: rgba(250, 246, 240, 0.99);
}

.page-hero-banner .page-breadcrumb-list li {
  color: rgba(255, 255, 255, 0.9);
}

.page-breadcrumb-list {
  list-style: none;
  padding: 0;
  margin: 1.35rem 0 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  align-items: center;
  font-size: 0.92rem;
  opacity: 0.92;
}

.page-breadcrumb-list li {
  display: inline-flex;
  align-items: center;
}

.page-breadcrumb-list li:not(:last-child)::after {
  content: "›";
  margin-left: 0.6rem;
  opacity: 0.75;
}

.page-breadcrumb-list a {
  color: rgba(255, 255, 255, 0.9);
}

.page-breadcrumb-list a:hover {
  color: var(--color-gold-light);
}

/* ---------- Services page (section layout + Sitek palette / theme vars) ---------- */

body.page-services .service-wrapper {
  position: relative;
  background: var(--color-bg);
}

body.page-services .service-wrapper .row > [class*="col-"] {
  display: flex;
}

body.page-services .service-wrapper .row > [class*="col-"] > .parity-reveal {
  flex: 1;
  display: flex;
  width: 100%;
}

body.page-services .service-wrapper .parity-reveal .service-slide-card {
  flex: 1;
  width: 100%;
}

/*
 * Service grid cards: flex column + footer stack — title then description (no overlapping absolutes).
 * Description expands with max-height; hover/focus uses gold fill with light text for contrast.
 */
body.page-services .service-wrapper .service-slide-card {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  height: clamp(220px, 32vw, 300px);
  padding: clamp(1rem, 2.5vw, 1.65rem) clamp(1rem, 2.2vw, 1.45rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid rgba(184, 149, 74, 0.22);
  box-shadow: 0 14px 40px rgba(20, 17, 13, 0.06);
  transition:
    background-color 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease;
  cursor: pointer;
}

@media (min-width: 768px) {
  body.page-services .service-wrapper .service-slide-card {
    height: 300px;
    padding: 32px 22px;
  }
}

body.page-services .service-wrapper .service-slide-card:focus-visible {
  outline: 2px solid var(--color-gold-deep);
  outline-offset: 3px;
}

body.page-services .service-wrapper .service-slide-card span.material-symbols-outlined {
  flex-shrink: 0;
  align-self: flex-start;
  position: relative;
  z-index: 1;
  display: block;
  font-size: clamp(1.85rem, 4vw, 2.65rem) !important;
  line-height: 1;
  color: var(--color-gold);
  margin-bottom: 0;
  transition: color 0.35s ease;
}

body.page-services .service-wrapper .service-slide-card__footer {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  z-index: 1;
  min-height: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-services .service-wrapper .service-slide-card .service-title {
  position: relative;
  margin: 0 !important;
  max-width: none;
  font-size: clamp(0.94rem, 1.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-black);
  transition: color 0.35s ease;
}

body.page-services .service-wrapper .service-slide-card .service-description {
  position: relative;
  margin: 0 !important;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  padding-top: 0;
  color: var(--color-muted);
  line-height: 1.5;
  font-size: 0.875rem;
  transition:
    max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease,
    visibility 0.4s ease,
    padding-top 0.35s ease,
    color 0.35s ease;
}

body.page-services .service-wrapper .service-slide-card:hover,
body.page-services .service-wrapper .service-slide-card:focus,
body.page-services .service-wrapper .service-slide-card:focus-within,
body.page-services .service-wrapper .service-slide-card.is-active {
  background: var(--color-gold);
  border-color: var(--color-gold-deep);
  box-shadow: 0 22px 52px rgba(143, 111, 47, 0.22);
  height: auto;
  min-height: clamp(220px, 32vw, 300px);
}

@media (min-width: 768px) {
  body.page-services .service-wrapper .service-slide-card:hover,
  body.page-services .service-wrapper .service-slide-card:focus,
  body.page-services .service-wrapper .service-slide-card:focus-within,
  body.page-services .service-wrapper .service-slide-card.is-active {
    min-height: 300px;
  }
}

body.page-services .service-wrapper .service-slide-card:hover .service-slide-card__footer,
body.page-services .service-wrapper .service-slide-card:focus .service-slide-card__footer,
body.page-services .service-wrapper .service-slide-card:focus-within .service-slide-card__footer,
body.page-services .service-wrapper .service-slide-card.is-active .service-slide-card__footer {
  transform: translateY(-3px);
}

body.page-services .service-wrapper .service-slide-card:hover .service-title,
body.page-services .service-wrapper .service-slide-card:focus .service-title,
body.page-services .service-wrapper .service-slide-card:focus-within .service-title,
body.page-services .service-wrapper .service-slide-card.is-active .service-title {
  color: rgba(250, 246, 240, 0.98);
}

body.page-services .service-wrapper .service-slide-card:hover .service-description,
body.page-services .service-wrapper .service-slide-card:focus .service-description,
body.page-services .service-wrapper .service-slide-card:focus-within .service-description,
body.page-services .service-wrapper .service-slide-card.is-active .service-description {
  max-height: 18rem;
  opacity: 1;
  visibility: visible;
  padding-top: 0.35rem;
  color: rgba(250, 246, 240, 0.9);
}

body.page-services .service-wrapper .service-slide-card:hover span.material-symbols-outlined,
body.page-services .service-wrapper .service-slide-card:focus span.material-symbols-outlined,
body.page-services .service-wrapper .service-slide-card:focus-within span.material-symbols-outlined,
body.page-services .service-wrapper .service-slide-card.is-active span.material-symbols-outlined {
  color: rgba(250, 246, 240, 0.95);
}

@media (prefers-reduced-motion: reduce) {
  body.page-services .service-wrapper .service-slide-card__footer {
    transform: none !important;
  }

  body.page-services .service-wrapper .service-slide-card .service-description {
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    padding-top: 0.65rem !important;
    color: var(--color-muted) !important;
  }

  body.page-services .service-wrapper .service-slide-card .service-title {
    color: var(--color-black) !important;
  }

  body.page-services .service-wrapper .service-slide-card {
    height: auto !important;
    min-height: 0 !important;
    padding: 1.5rem 1.35rem !important;
  }

  body.page-services .service-wrapper .service-slide-card span.material-symbols-outlined {
    font-size: 2.35rem !important;
    margin-bottom: 1rem !important;
  }

  body.page-services .service-wrapper .service-slide-card:hover,
  body.page-services .service-wrapper .service-slide-card:focus,
  body.page-services .service-wrapper .service-slide-card:focus-within,
  body.page-services .service-wrapper .service-slide-card.is-active {
    background: var(--color-surface) !important;
    border-color: rgba(184, 149, 74, 0.22) !important;
  }

  body.page-services .service-wrapper .service-slide-card:hover span.material-symbols-outlined,
  body.page-services .service-wrapper .service-slide-card:focus span.material-symbols-outlined,
  body.page-services .service-wrapper .service-slide-card:focus-within span.material-symbols-outlined,
  body.page-services .service-wrapper .service-slide-card.is-active span.material-symbols-outlined {
    color: var(--color-gold) !important;
  }
}

body.page-services .bg-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

body.page-services .breadcrumb-wrapper.page-services-breadcrumb {
  position: relative;
  isolation: isolate;
  min-height: clamp(200px, 32vh, 380px);
  background-color: #14110d;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Gold–charcoal veil (same language as inner hero), not a flat gray wash */
body.page-services .breadcrumb-wrapper.page-services-breadcrumb.bg-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    rgba(26, 22, 18, 0.88),
    rgba(184, 149, 74, 0.35)
  );
}

body.page-services .breadcrumb-wrapper.page-services-breadcrumb > .container {
  position: relative;
  z-index: 1;
}

body.page-services .jarallax-services {
  background-attachment: fixed;
}

@media (max-width: 991.98px) {
  body.page-services .jarallax-services {
    background-attachment: scroll;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-services .jarallax-services {
    background-attachment: scroll !important;
  }
}

body.page-services .breadcrumb-content--da {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Always light on photo + charcoal/gold veil (surface token flips dark in theme) */
  color: rgba(250, 246, 240, 0.98);
  padding: clamp(1.5rem, 4vw, 2.45rem) 0;
}

body.page-services .breadcrumb-content--da .page-services-breadcrumb__title {
  color: rgba(250, 246, 240, 0.99);
}

body.page-services .page-services-breadcrumb__title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(2.15rem, 7vw, 3.85rem);
  line-height: 1.1;
  text-shadow: 0 12px 42px rgba(0, 0, 0, 0.45);
}

body.page-services .page-services-breadcrumb__crumb {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 1.25rem;
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.95;
  color: rgba(250, 246, 240, 0.9);
}

body.page-services .page-services-breadcrumb__crumb li {
  display: inline-flex;
  align-items: center;
}

body.page-services .page-services-breadcrumb__crumb li:not(:last-child)::after {
  content: "›";
  margin: 0 0.55rem;
  opacity: 0.65;
  font-weight: 400;
  text-transform: none;
}

body.page-services .page-services-breadcrumb__crumb a {
  color: rgba(250, 246, 240, 0.95);
  text-decoration: none;
}

body.page-services .page-services-breadcrumb__crumb a:hover {
  color: var(--color-gold-light);
}

body.page-services .page-services-breadcrumb__crumb li[aria-current="page"] {
  color: rgba(250, 246, 240, 0.8);
}

body.page-services .about-us-wrapper.page-services-about {
  position: relative;
  overflow: hidden;
  padding: 0;
}

body.page-services .about-us-wrapper.page-services-about > .container {
  position: relative;
  z-index: 1;
}

body.page-services .about-left-side-bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(48%, 640px);
  z-index: 0;
  pointer-events: none;
}

/* Fade photo into section background so text never sits on raw imagery */
body.page-services .about-left-side-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 42%, var(--color-bg-alt) min(88%, 100%));
}

body.page-services .page-services-about .about-text-col {
  position: relative;
  z-index: 2;
  background: var(--color-bg-alt);
}

body.page-services .about-us-text-content {
  color: var(--color-black-soft);
  border-radius: var(--radius-lg);
}

body.page-services .about-us-text-content .section-heading h2 {
  color: var(--color-black);
}

body.page-services .about-us-text-content > p {
  color: var(--color-muted);
}

@media (max-width: 767.98px) {
  body.page-services .about-left-side-bg {
    position: relative;
    width: 100%;
    height: clamp(220px, 48vw, 300px);
    bottom: auto;
  }

  body.page-services .about-left-side-bg::after {
    background: linear-gradient(180deg, transparent 35%, var(--color-bg-alt) 100%);
  }

  body.page-services .about-us-text-content.ps-md-4 {
    padding-left: 0 !important;
  }

  body.page-services .page-services-about .about-text-col {
    background: var(--color-bg-alt);
  }
}

body.page-services .page-services-about__checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-black-soft);
}

body.page-services .page-services-about__checks li:last-child {
  margin-bottom: 0;
}

body.page-services .page-services-about__check-ic {
  flex-shrink: 0;
  margin-top: 0.12rem;
  color: var(--color-gold);
}

body.page-services .cta-wrapper--services {
  position: relative;
  background: var(--color-bg);
  color: var(--color-black-soft);
  border-top: 1px solid rgba(184, 149, 74, 0.14);
  border-bottom: 1px solid rgba(184, 149, 74, 0.08);
}

body.page-services .cta-wrapper--services .cta-wrapper__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.55rem, 3.2vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

body.page-services .cta-wrapper--services .cta-wrapper__lead {
  color: var(--color-muted);
  line-height: 1.62;
  max-width: 38rem;
}

@media (min-width: 992px) {
  body.page-services .py-lg-6 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}

.about-us-split {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
  padding: clamp(3rem, 8vw, 5.5rem) 0;
}

.about-us-split::before {
  content: "";
  position: absolute;
  inset: 0;
  width: min(50%, 620px);
  background-image: url("https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=1200&q=75");
  background-size: cover;
  background-position: center;
}

.about-us-split::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent min(42%, 480px),
    var(--color-bg-alt) min(62%, 700px),
    var(--color-bg-alt) 100%
  );
}

.about-us-split .container {
  position: relative;
  z-index: 1;
}

.about-us-split .about-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.95rem;
  font-weight: 600;
  color: var(--color-black-soft);
}

.about-us-split .about-points .bi-check-lg {
  color: var(--color-gold);
  font-size: 1.5rem;
  flex-shrink: 0;
}

.inner-cta {
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.inner-cta h2 {
  font-size: clamp(1.85rem, 4vw, 2.65rem);
}

.inner-cta .cta-lead {
  color: var(--color-muted);
  max-width: 520px;
  margin-bottom: 0;
}

.contact-details-inner .contact-info-card {
  height: 100%;
  text-align: center;
  padding: 2rem 1.35rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid rgba(184, 149, 74, 0.2);
  box-shadow: var(--shadow-soft);
}

.contact-details-inner .contact-info-card .icon-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

.contact-details-inner .contact-info-card .icon-wrapper svg path {
  fill: var(--color-gold);
}

.contact-details-inner .contact-info-card .contact-card-icon {
  color: var(--color-gold);
  line-height: 1;
}

.contact-details-inner .contact-info-card h4 {
  font-size: 1.08rem;
  margin-bottom: 0;
}

.contact-details-inner .contact-info-card > p.mb-0 {
  color: var(--color-muted);
  font-size: 0.9rem;
}

.contact-page-form .contact-form {
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 6vw, 3rem);
  border: 1px solid rgba(184, 149, 74, 0.15);
}

.contact-page-form .form-control {
  border-radius: 12px;
  border: 1px solid rgba(40, 35, 30, 0.12);
  padding: 0.75rem 1rem;
  background: #fff;
}

.contact-page-form textarea.form-control {
  min-height: 200px;
  resize: vertical;
}

.contact-page-form .btn-primary.rounded-pill {
  padding: 0.75rem 2.25rem !important;
  font-weight: 700;
}

.blog-archive .blog-card-post {
  height: 100%;
  border-radius: var(--radius-md);
  border: 1px solid rgba(184, 149, 74, 0.18);
  background: var(--color-surface);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-archive .blog-card-post:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.blog-archive .blog-card-post .thumb {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

.blog-archive .blog-card-post .post-body {
  padding: 1.35rem 1.35rem 1.5rem;
}

.blog-archive .post-meta {
  font-size: 0.82rem;
  color: var(--color-muted);
  margin-bottom: 0.4rem;
}

/* Projects archive — responsive card grid, scroll reveal, hover polish */
.page-projects .project-archive-modern {
  position: relative;
  isolation: isolate;
}

.project-archive-grid-bg {
  position: absolute;
  inset: -2% max(-12%, -4vw) auto max(-12%, -4vw);
  height: clamp(340px, 42vw, 520px);
  background:
    radial-gradient(ellipse 70% 60% at 24% 18%, rgba(201, 162, 39, 0.13), transparent 58%),
    radial-gradient(ellipse 55% 50% at 88% 0%, rgba(184, 149, 74, 0.1), transparent 52%),
    radial-gradient(circle at 52% 100%, rgba(20, 17, 13, 0.05), transparent 48%);
  pointer-events: none;
  z-index: 0;
}

.project-archive-modern .container.position-relative {
  z-index: 1;
}

@keyframes projectShowcaseBorderGlow {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

.project-archive-grid.project-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3.2vw, 1.9rem);
}

@media (min-width: 640px) {
  .project-archive-grid.project-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .project-archive-grid.project-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* ~24–32px gutters, aligned with reference grid */
    gap: clamp(1.5rem, 2.6vw, 2.15rem);
  }
}

.project-cards-grid .project-showcase-row {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg-alt));
  /* Match reference portfolio cards: ~24–30px radius */
  border-radius: clamp(24px, 2.4vw, 30px);
  border: 1px solid color-mix(in srgb, rgba(184, 149, 74, 0.35) 70%, transparent);
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.07),
    0 0 0 1px color-mix(in srgb, white 50%, var(--color-surface)) inset;
  overflow: hidden;
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.38s ease,
    border-color 0.3s ease;
}

.project-cards-grid .project-showcase-media {
  display: block;
  flex-shrink: 0;
  border-radius: 0;
}

.project-cards-grid .project-showcase-frame {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(184, 149, 74, 0.16);
  /* moundirboufaa-style preview: uniform ~16:10 frame (wider than 4:3) */
  aspect-ratio: 16 / 10;
  box-shadow: none;
}

/* Bottom fade into card body (reference: image blends into content area) */
.project-cards-grid .project-showcase-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--color-surface) 75%, var(--color-black) 25%) 72%,
    var(--color-surface) 100%
  );
}

.project-cards-grid .project-showcase-frame::before {
  z-index: 2;
}

.project-cards-grid .project-showcase-frame-shine {
  z-index: 3;
}

.project-cards-grid .project-showcase-open {
  z-index: 4;
}

.project-cards-grid .project-showcase-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(1rem, 2.4vw, 1.35rem);
  min-height: 0;
}

.project-cards-grid .project-archive-tag {
  font-size: 0.61rem;
  max-width: 100%;
}

.project-cards-grid .project-archive-title {
  font-size: clamp(0.98rem, 0.92rem + 0.28vw, 1.1rem);
  margin: 0.15rem 0 0;
  line-height: 1.28;
}

.project-cards-grid .project-archive-desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.58;
  margin: 0.2rem 0 0;
  flex-grow: 1;
}

.project-cards-grid .project-showcase-cta {
  margin-top: 0.65rem;
  align-self: flex-start;
}

.project-showcase-media {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: calc(var(--radius-lg) + 6px);
  position: relative;
}

.project-showcase-media:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.project-showcase-frame {
  position: relative;
  border-radius: calc(var(--radius-lg) + 6px);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: linear-gradient(138deg, var(--color-bg-alt), #e0d6ca);
  border: 1px solid rgba(184, 149, 74, 0.2);
  box-shadow:
    0 3px 0 rgba(184, 149, 74, 0.14),
    0 26px 64px rgba(20, 17, 13, 0.1);
  transform: translateZ(0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease, border-color 0.35s ease;
}

.project-showcase-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    125deg,
    transparent 0%,
    rgba(201, 162, 39, 0.12) 35%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(201, 162, 39, 0.1) 65%,
    transparent 100%
  );
  background-size: 200% 200%;
  transition: opacity 0.45s ease;
  z-index: 1;
}

.project-showcase-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}

.project-showcase-frame-shine {
  position: absolute;
  inset: -45% -20%;
  background: linear-gradient(
    108deg,
    transparent 40%,
    rgba(255, 255, 255, 0.12) 48%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.08) 52%,
    transparent 60%
  );
  transform: translateX(-120%) rotate(11deg);
  pointer-events: none;
  z-index: 2;
}

.project-showcase-open {
  position: absolute;
  right: 1.05rem;
  bottom: 1.05rem;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(250, 246, 240, 0.97);
  color: var(--color-black);
  box-shadow: 0 14px 36px rgba(20, 17, 13, 0.2);
  opacity: 0;
  transform: scale(0.88) translateY(10px);
  z-index: 3;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-showcase-open i {
  font-size: 1.12rem;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .project-cards-grid .project-showcase-row:hover,
  .project-cards-grid .project-showcase-row:focus-within {
    transform: translateY(-7px);
    box-shadow:
      0 28px 68px rgba(0, 0, 0, 0.12),
      0 0 0 1px color-mix(in srgb, white 45%, var(--color-surface)) inset;
    border-color: rgba(184, 149, 74, 0.38);
  }

  .project-cards-grid .project-showcase-row:hover .project-showcase-frame,
  .project-cards-grid .project-showcase-row:focus-within .project-showcase-frame {
    transform: translateZ(0);
    border-bottom-color: rgba(184, 149, 74, 0.28);
  }

  .project-cards-grid .project-showcase-row:hover .project-showcase-frame::before,
  .project-cards-grid .project-showcase-row:focus-within .project-showcase-frame::before {
    opacity: 1;
    animation: projectShowcaseBorderGlow 2.2s ease-in-out infinite alternate;
  }

  .project-cards-grid .project-showcase-row:hover .project-showcase-frame img,
  .project-cards-grid .project-showcase-row:focus-within .project-showcase-frame img {
    transform: scale(1.06);
    filter: saturate(1.06);
  }

  .project-cards-grid .project-showcase-row:hover .project-showcase-frame-shine,
  .project-cards-grid .project-showcase-row:focus-within .project-showcase-frame-shine {
    transform: translateX(120%) rotate(11deg);
    transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .project-cards-grid .project-showcase-row:hover .project-showcase-open,
  .project-cards-grid .project-showcase-row:focus-within .project-showcase-open {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.project-showcase-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.2rem 0;
}

.project-showcase-cta {
  margin-top: 0.75rem;
  align-self: flex-start;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .project-cards-grid .project-showcase-row:hover .project-showcase-cta,
  .project-cards-grid .project-showcase-row:focus-within .project-showcase-cta {
    transform: translateX(4px);
  }
}

.project-archive-modern .project-archive-tag {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.14);
  border: 1px solid rgba(184, 149, 74, 0.2);
}

.project-archive-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.28rem);
  line-height: 1.3;
  margin: 0.4rem 0 0;
}

.project-archive-title a {
  color: var(--color-black);
  transition: color 0.2s ease;
}

.project-archive-title a:hover {
  color: var(--color-gold-deep);
}

.project-archive-desc {
  margin: 0.35rem 0 0;
  flex-grow: 0;
  font-size: clamp(0.875rem, 0.845rem + 0.08vw, 0.95rem);
  line-height: 1.65;
  color: var(--color-muted);
}

/* Projects card grid — scroll reveal (whole card) */
.project-cards-grid .project-showcase-row.project-reveal-item {
  opacity: 0;
  transform: translateY(36px);
}

.project-cards-grid .project-showcase-row.project-reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
  .project-cards-grid .project-showcase-row.project-reveal-item {
    transition:
      opacity 0.65s cubic-bezier(0.16, 1, 0.32, 1),
      transform 0.72s cubic-bezier(0.16, 1, 0.32, 1),
      box-shadow 0.38s ease,
      border-color 0.3s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-cards-grid .project-showcase-row.project-reveal-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .project-cards-grid .project-showcase-row.project-reveal-item .project-showcase-frame img {
    filter: none !important;
    transform: none !important;
  }

  .project-showcase-frame img {
    transition: none;
  }

  .project-showcase-frame::before {
    animation: none !important;
    opacity: 0.35;
  }

  .project-showcase-frame-shine {
    display: none;
  }

  .project-showcase-open {
    opacity: 0.9;
    transform: none;
  }
}

/* Testimonials inner page */
.testimonial-archive .testimonial-card {
  height: 100%;
  padding: 1.5rem 1.55rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(184, 149, 74, 0.18);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.testimonial-archive .testimonial-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.testimonial-archive .testimonial-avatar {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-black);
  background: linear-gradient(
    145deg,
    rgba(201, 162, 39, 0.35),
    rgba(244, 236, 226, 0.9)
  );
  border: 1px solid rgba(184, 149, 74, 0.25);
}

.testimonial-archive .testimonial-meta .name {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
}

.testimonial-archive .testimonial-meta .source {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.testimonial-archive .testimonial-meta .source .bi-facebook {
  font-size: 1rem;
  color: #1877f2;
}

.testimonial-archive .testimonial-stars {
  color: var(--color-accent);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.85rem;
  line-height: 1;
}

.testimonial-archive .testimonial-quote {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-black-soft);
}

/* Testimonials page — sliding spotlight (carousel) */
.page-testimonials .testimonials-page-stage {
  position: relative;
  overflow: clip;
}

.testimonials-swiper-ambient {
  pointer-events: none;
  position: absolute;
  inset: 40% auto auto 50%;
  width: min(92vw, 1100px);
  height: min(420px, 55vh);
  transform: translate(-50%, -42%);
  z-index: 0;
}

.testimonials-swiper-ambient__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.55;
  animation: testimonials-orb-float 14s ease-in-out infinite alternate;
}

.testimonials-swiper-ambient__orb--1 {
  width: 58%;
  height: 80%;
  left: -5%;
  top: -10%;
  background: radial-gradient(
    circle,
    rgba(201, 162, 39, 0.35) 0%,
    rgba(235, 225, 212, 0.05) 70%
  );
}

.testimonials-swiper-ambient__orb--2 {
  width: 52%;
  height: 76%;
  right: -14%;
  bottom: -26%;
  background: radial-gradient(
    circle,
    rgba(212, 188, 122, 0.28) 0%,
    rgba(235, 225, 212, 0.04) 72%
  );
  animation-duration: 18s;
  animation-delay: -3s;
}

@keyframes testimonials-orb-float {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(3%, -4%) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-swiper-ambient__orb {
    animation: none;
  }
}

.testimonials-swiper-container {
  position: relative;
  z-index: 1;
}

.testimonials-swiper-frame {
  position: relative;
  padding: clamp(8px, 2vw, 20px)
    clamp(40px, 5vw, 56px)
    clamp(14px, 3vw, 22px);
}

.testimonials-page-swiper {
  overflow: visible !important;
}

.testimonials-page-swiper .swiper-wrapper {
  align-items: stretch;
}

.testimonials-page-swiper .swiper-slide {
  height: auto;
}

.testimonial-slide-panel {
  position: relative;
  overflow: hidden;
  margin-inline: auto;
  max-width: 52rem;
  min-height: clamp(276px, 38vh, 404px);
  padding: clamp(2rem, 4.5vw, 3rem) clamp(1.35rem, 4vw, 2.75rem)
    clamp(1.65rem, 4vw, 2.75rem);
  border-radius: clamp(17px, 2.5vw, 26px);
  border: 1px solid rgba(184, 149, 74, 0.24);
  background:
    radial-gradient(
      ellipse 125% 90% at 50% -5%,
      rgba(232, 204, 130, 0.22),
      transparent 52%
    ),
    linear-gradient(
      154deg,
      rgba(253, 250, 244, 0.99) 0%,
      rgba(245, 238, 228, 0.78) 45%,
      rgba(237, 228, 214, 0.55) 100%
    );
  box-shadow:
    0 3px 0 rgba(143, 111, 47, 0.08),
    0 28px 72px rgba(20, 17, 13, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -36px 64px rgba(212, 188, 122, 0.06);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}

.testimonials-page-swiper:not(.swiper-initialized)
  .swiper-slide:first-child
  .testimonial-slide-panel {
  opacity: 1;
}

.testimonial-slide-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.45;
  background: linear-gradient(
    118deg,
    transparent 52%,
    rgba(255, 255, 255, 0.28) 70%,
    transparent 92%
  );
  pointer-events: none;
}

.testimonial-slide-deco {
  position: absolute;
  top: clamp(0rem, 0.9vw, 0.65rem);
  left: clamp(0.85rem, 3vw, 1.95rem);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.85rem, 14vw, 7.85rem);
  line-height: 0.74;
  color: rgba(201, 162, 39, 0.16);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
}

.testimonial-slide-label {
  position: relative;
  z-index: 1;
  margin: 0 0 clamp(1rem, 2vw, 1.35rem);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
}

.testimonial-slide-stars {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  color: var(--color-accent);
  font-size: 1.08rem;
  letter-spacing: 0.14em;
  line-height: 1;
  text-shadow: 0 0 26px rgba(201, 162, 39, 0.2);
}

.testimonial-slide-quote {
  position: relative;
  z-index: 1;
  margin: 0 0 clamp(1.65rem, 4vw, 2.35rem);
  padding: 0;
  padding-left: 0.06em;
  border: none;
  font-family: var(--font-body);
  font-size: clamp(1.08rem, 2.55vw, 1.42rem);
  font-style: italic;
  font-weight: 450;
  line-height: 1.76;
  color: var(--color-black-soft);
}

.testimonial-slide-footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.95rem, 2.8vw, 1.35rem);
  padding-top: clamp(1rem, 2.8vw, 1.55rem);
  border-top: 1px solid rgba(184, 149, 74, 0.18);
}

.testimonial-slide-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--color-black);
  background: linear-gradient(
    146deg,
    rgba(212, 188, 122, 0.38),
    rgba(250, 246, 240, 0.98)
  );
  border: 1px solid rgba(184, 149, 74, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 6px 16px rgba(20, 17, 13, 0.06);
}

.testimonial-slide-name {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 1.22;
  color: var(--color-black);
}

.testimonial-slide-source {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem !important;
  font-size: 0.855rem;
  color: var(--color-muted);
}

.testimonial-slide-source .bi-facebook {
  font-size: 1rem;
  color: #1877f2;
}

.testimonials-swiper-nav {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: min(52px, 11vw);
  height: min(52px, 11vw);
  padding: 0;
  margin: 0;
  border: 1px solid rgba(184, 149, 74, 0.38);
  border-radius: 50%;
  background: rgba(250, 246, 240, 0.9);
  color: var(--color-black-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow:
    0 8px 24px rgba(20, 17, 13, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(11px);
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.testimonials-swiper-nav .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: "wght" 600;
}

.testimonials-swiper-nav:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(184, 149, 74, 0.55);
  color: var(--color-gold-deep);
}

.testimonials-swiper-nav:active {
  transform: scale(0.95);
}

.testimonials-swiper-nav:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.testimonials-swiper-prev {
  left: 0;
  transform: translate(-45%, -50%);
}

.testimonials-swiper-next {
  right: 0;
  transform: translate(45%, -50%);
}

.testimonials-swiper-prev:active,
.testimonials-swiper-prev:hover {
  transform: translate(-45%, -50%) scale(1.05);
}

.testimonials-swiper-next:active,
.testimonials-swiper-next:hover {
  transform: translate(45%, -50%) scale(1.05);
}

.testimonials-page-pagination.swiper-pagination {
  position: relative;
  inset: auto !important;
  margin-top: 0.85rem !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.testimonials-page-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 4px !important;
  background: rgba(184, 149, 74, 0.32);
  opacity: 1 !important;
  transition:
    transform 0.25s ease,
    width 0.25s ease,
    background 0.25s ease;
}

.testimonials-page-pagination .swiper-pagination-bullet-active {
  width: 32px;
  border-radius: 100px;
  background: linear-gradient(
    90deg,
    var(--color-gold-deep),
    var(--color-accent)
  );
  transform: scale(1);
}

@media (max-width: 575.98px) {
  .testimonials-swiper-frame {
    padding-inline: clamp(6px, 2vw, 16px);
  }

  .testimonials-swiper-nav {
    display: none;
  }

  .testimonial-slide-quote {
    font-size: clamp(1.02rem, 4.25vw, 1.28rem);
  }
}

/* ---------- Project detail (gallery + narrative) ---------- */
.project-detail-meta-line-upper {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem !important;
}

.project-detail-cover {
  border-radius: calc(var(--radius-md) + 8px);
  overflow: hidden;
  border: 1px solid rgba(184, 149, 74, 0.2);
  box-shadow: var(--shadow-soft);
  background: var(--color-bg-alt);
}

.project-detail-cover-img {
  display: block;
  width: 100%;
  height: clamp(260px, 46vw, 520px);
  object-fit: cover;
}

.panel-surface {
  padding: 1.35rem 1.45rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid rgba(184, 149, 74, 0.16);
  box-shadow: var(--shadow-soft);
}

.border-top-subtle {
  border-top: 1px solid rgba(40, 35, 30, 0.08);
}

.project-detail-heading {
  font-family: var(--font-display);
  color: var(--color-black);
  margin-bottom: 0.85rem !important;
}

.project-detail-lead {
  font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.15rem);
  line-height: 1.72;
}

.project-detail-p {
  color: var(--color-muted);
  line-height: 1.7;
  margin-bottom: 1rem !important;
}

.project-detail-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.5rem;
}

.project-detail-tech-chip {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.32rem 0.82rem;
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.12);
  border: 1px solid rgba(184, 149, 74, 0.22);
  color: var(--color-gold-deep);
}

@media (min-width: 992px) {
  .sticky-lg-top {
    top: 6.5rem;
  }
}

.project-detail-gallery-card {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(184, 149, 74, 0.16);
  background: var(--color-surface);
  box-shadow: 0 8px 28px rgba(20, 17, 13, 0.06);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease,
    border-color 0.25s ease;
}

.project-detail-gallery-card:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 149, 74, 0.32);
  box-shadow: 0 22px 50px rgba(20, 17, 13, 0.1);
}

.project-detail-gallery-inner img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  .project-gallery-cell.gallery-reveal-init {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.986);
    transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
  }

  .project-gallery-cell.gallery-reveal-init.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .project-detail-gallery-inner img {
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .project-detail-gallery-card:hover .project-detail-gallery-inner img {
    transform: scale(1.035);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-gallery-cell.gallery-reveal-init {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .project-detail-gallery-inner img {
    transition: none;
  }
}

.project-detail-gallery-title {
  font-family: var(--font-display);
  color: var(--color-black);
}

/* =====================================================================
   Project showcase (detail) — asymmetric layout, no hero, lightbox UX
   ===================================================================== */


.row.gx-showcase-xl {
  --bs-gutter-x: clamp(2rem, 5vw, 3.75rem);
}

.page-project-showcase .py-6 {
  padding-top: clamp(3rem, 6vw, 4.75rem);
  padding-bottom: clamp(3rem, 6vw, 4.75rem);
}

.page-project-showcase .pb-7 {
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
}

html.project-lightbox-open,
html.project-lightbox-open body {
  overflow: hidden;
}

.footer--showcase-tight .divider.d-none.d-md-block {
  height: clamp(32px, 5vw, 56px);
}

.header-area.header-area--showcase {
  background: rgba(244, 236, 226, 0.88);
  border-bottom-color: rgba(184, 149, 74, 0.14);
}

.showcase-menu-btn.sideMenuButton {
  border-radius: 999px;
}

.project-showcase {
  position: relative;
  overflow: clip;
}

.project-showcase-bg-grid {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(184, 149, 74, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 149, 74, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(#000 58%, transparent 96%);
  opacity: 0.35;
}

.project-showcase-glow {
  pointer-events: none;
  position: absolute;
  width: clamp(520px, 72vw, 920px);
  height: clamp(520px, 72vw, 920px);
  left: -10%;
  top: min(-8rem, -12vw);
  background: radial-gradient(
    ellipse at center,
    rgba(212, 188, 122, 0.22),
    transparent 62%
  );
  filter: blur(36px);
  opacity: 0.9;
}

.project-showcase-intro {
  position: relative;
}

.project-showcase-intro-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

.project-showcase-crumbs {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

.project-showcase-crumbs a {
  color: var(--color-muted);
}

.project-showcase-crumbs a:hover {
  color: var(--color-gold-deep);
}

.project-showcase-crumbs-slash {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(184, 149, 74, 0.5);
}

.project-showcase-crumbs-current {
  color: var(--color-black);
  font-weight: 700;
}

.project-showcase-back-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.92rem;
  border-radius: 999px;
  border: 1px solid rgba(184, 149, 74, 0.28);
  background: rgba(250, 246, 240, 0.8);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-black-soft);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease,
    box-shadow 0.35s ease;
}

.project-showcase-back-chip:hover {
  border-color: rgba(184, 149, 74, 0.45);
  box-shadow: 0 14px 40px rgba(20, 17, 13, 0.08);
  transform: translateX(-4px);
  color: var(--color-black);
}

.project-showcase-meta {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem !important;
  font-weight: 700;
  color: var(--color-gold-deep);
  margin-bottom: 0.65rem !important;
}

.project-showcase-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.25rem + 3.8vw, 3.85rem);
  line-height: 1.06;
  color: var(--color-black);
  margin-bottom: 1.05rem !important;
}

.project-showcase-lead {
  font-size: clamp(1.05rem, 0.96rem + 0.42vw, 1.28rem);
  line-height: 1.73;
  color: var(--color-muted);
}

.project-showcase-cta-live {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.82rem 1.45rem !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  background: linear-gradient(145deg, #c9a227, #b8954a);
  border: none;
  color: #1a1610 !important;
  box-shadow: 0 16px 40px rgba(201, 162, 39, 0.28);
}

.project-showcase-cta-live:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 54px rgba(201, 162, 39, 0.36);
}

.project-showcase-microcopy {
  font-size: 0.78rem;
  color: var(--color-muted);
}

.panel-showcase-stack {
  position: relative;
  padding: 1.5rem 1.55rem calc(1.75rem + 6px);
  border-radius: calc(var(--radius-lg) + 6px);
  background: linear-gradient(165deg, rgba(250, 246, 240, 0.95), rgba(235, 225, 212, 0.55));
  border: 1px solid rgba(184, 149, 74, 0.18);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.panel-showcase-stack::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background: radial-gradient(circle at 20% 0%, rgba(201, 162, 39, 0.12), transparent 55%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .panel-showcase-stack {
    animation: showcase-panel-float 7s ease-in-out infinite alternate;
  }
}

@keyframes showcase-panel-float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-showcase-stack {
    animation: none !important;
  }
}

.project-showcase-side-label {
  font-family: var(--font-display);
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--color-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project-showcase-tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.52rem;
}

.project-showcase-tech-pill {
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  padding: 0.34rem 0.92rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(184, 149, 74, 0.26);
  color: var(--color-black-soft);
  box-shadow: 0 10px 24px rgba(20, 17, 13, 0.05);
}

.showcase-pulse-border {
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  .showcase-pulse-border::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid transparent;
    background: linear-gradient(
        135deg,
        rgba(212, 188, 122, 0.35),
        rgba(143, 111, 47, 0.15),
        rgba(212, 188, 122, 0.35)
      )
      border-box;
    opacity: 0;
    animation: pulse-border-soft 5s ease-in-out infinite;
  }
}

@keyframes pulse-border-soft {
  0%,
  100% {
    opacity: 0;
  }
  45% {
    opacity: 0.42;
  }
}

.project-showcase-side-deco {
  display: flex;
  align-items: center;
  opacity: 0.45;
}

.project-showcase-side-deco span {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .project-showcase-reveal.showcase-reveal-init {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.06s;
    will-change: transform, opacity;
  }

  .project-showcase-reveal.showcase-reveal-init:nth-of-type(even),
  .col-xl-5 .project-showcase-reveal.showcase-reveal-init {
    transition-delay: 0.14s;
  }

  .project-showcase-reveal.showcase-reveal-init.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .project-showcase-marquee-wrap.marquee-reveal-init {
    opacity: 0;
    transform: translate3d(0, 40px, 0) scale(0.985);
    transition: opacity 0.92s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.05s;
  }

  .project-showcase-marquee-wrap.marquee-reveal-init.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .nar-reveal-init {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity 0.66s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nar-reveal-init.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-showcase-reveal.showcase-reveal-init,
  .project-showcase-marquee-wrap.marquee-reveal-init,
  .nar-reveal-init {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.project-showcase-marquee-wrap {
  padding: 0 clamp(1rem, 4vw, 3.5rem);
  margin: -0.5rem 0 clamp(2.5rem, 5vw, 4rem);
}

.project-showcase-marquee-inner {
  position: relative;
  overflow: hidden;
  padding: clamp(8px, 1.2vw, 12px);
  background: linear-gradient(148deg, rgba(250, 246, 240, 0.95), rgba(225, 210, 192, 0.35));
  border: 1px solid rgba(184, 149, 74, 0.26);
  box-shadow: 0 40px 100px rgba(20, 17, 13, 0.12), 0 0 1px rgba(20, 17, 13, 0.08);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.85s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .project-showcase-marquee-wrap:focus-within .project-showcase-marquee-inner,
  .project-showcase-marquee-wrap:hover .project-showcase-marquee-inner {
    transform: translateY(-4px) rotateX(0.6deg);
    box-shadow: 0 52px 120px rgba(20, 17, 13, 0.14), 0 0 1px rgba(20, 17, 13, 0.1);
  }
}

.project-showcase-marquee-wrap:focus-visible {
  outline: 3px solid rgba(184, 149, 74, 0.55);
  outline-offset: 6px;
}

.project-showcase-marquee-img {
  display: block;
  width: 100%;
  height: clamp(220px, 46vw, 560px);
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .project-showcase-marquee-wrap:hover .project-showcase-marquee-img {
    transform: scale(1.02);
  }
}

.project-showcase-marquee-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  margin: clamp(8px, 1.2vw, 12px);
  border-radius: calc(var(--radius-lg) + 10px);
  box-shadow: inset 0 -80px 90px rgba(14, 12, 9, 0.18),
    inset 0 26px 50px rgba(250, 246, 240, 0.12);
}

.project-showcase-marquee-shine {
  pointer-events: none;
  position: absolute;
  inset: -130% -40%;
  background: linear-gradient(
    120deg,
    transparent 42%,
    rgba(255, 255, 255, 0.14) 50%,
    transparent 56%
  );
  animation: marquee-shine 7s linear infinite;
}

@keyframes marquee-shine {
  to {
    transform: translateX(52%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-showcase-marquee-shine {
    animation: none;
    opacity: 0;
  }
}

.project-showcase-block-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.28rem, 1.06rem + 0.72vw, 1.82rem);
  margin-bottom: 1rem !important;
}

.project-showcase-block-p {
  color: var(--color-muted);
  line-height: 1.8;
}

.project-showcase-narrative {
  position: relative;
}

.project-showcase-duo-band .col-lg-6 {
  perspective: min(980px, 96vw);
}

.project-showcase-duo-band {
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
}

.project-showcase-card-tilt {
  position: relative;
  padding: clamp(1.5rem, 2.8vw, 2.35rem);
  margin: 0 auto;
  max-width: 580px;
  border-radius: calc(var(--radius-lg) + 8px);
  background: rgba(250, 246, 240, 0.78);
  border: 1px solid rgba(184, 149, 74, 0.22);
  box-shadow: 0 26px 60px rgba(20, 17, 13, 0.08);
  transition: transform 0.68s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.68s ease,
    border-color 0.4s ease;
}

.project-showcase-card-tilt::before {
  content: "";
  width: 3px;
  border-radius: 999px;
  position: absolute;
  left: 1.05rem;
  top: clamp(1.5rem, 2.8vw, 2.35rem);
  bottom: clamp(1.5rem, 2.8vw, 2.35rem);
  background: linear-gradient(180deg, var(--color-gold), transparent);
  opacity: 0.72;
}

.project-showcase-card-tilt.pl-s-4-fix {
  padding-left: calc(1rem + 1.6rem + 14px);
}

.project-showcase-card-tilt:not(.project-showcase-card-tilt--alt) {
  padding-left: clamp(2.2rem, 4vw, 2.95rem);
}

.project-showcase-card-tilt.project-showcase-card-tilt--alt::before {
  left: auto;
  right: 1.05rem;
  background: linear-gradient(360deg, var(--color-gold), transparent);
}

.project-showcase-card-tilt.project-showcase-card-tilt--alt {
  padding-right: clamp(2.2rem, 4vw, 2.95rem);
  padding-left: clamp(1.5rem, 2.8vw, 2.35rem);
  background: linear-gradient(
    148deg,
    rgba(247, 240, 230, 0.85),
    rgba(235, 225, 210, 0.55)
  );
}

@media (prefers-reduced-motion: no-preference) {
  .project-showcase-card-tilt:hover {
    transform: translateY(-6px) rotateX(1deg) rotateY(-0.75deg);
    box-shadow: 0 42px 80px rgba(20, 17, 13, 0.11);
    border-color: rgba(184, 149, 74, 0.36);
  }
}

.project-showcase-card-title {
  font-family: var(--font-display);
  font-weight: 700 !important;
  font-size: 1.06rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-gold-deep) !important;
  margin-bottom: 0.75rem !important;
}

.project-showcase-card-p {
  color: var(--color-muted);
  margin-bottom: 0.82rem !important;
  font-size: 0.965rem !important;
  line-height: 1.78 !important;
}

.project-showcase-gallery-arc {
  position: relative;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.project-showcase-gallery-arc::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 140px;
  background: linear-gradient(180deg, rgba(235, 225, 210, 0.35), transparent);
  pointer-events: none;
}

.project-showcase-gallery-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.65rem);
}

.project-showcase-index-block {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
}

.project-showcase-index-num {
  color: var(--color-gold-deep);
}

.project-showcase-index-caption {
  font-size: 0.74rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
}

.project-showcase-h2 {
  font-size: clamp(1.72rem, 1.42rem + 1vw, 2.42rem);
}

.project-showcase-muted {
  color: var(--color-muted);
  line-height: 1.7;
}

.project-showcase-bento {
  display: grid;
  grid-auto-flow: dense;
  gap: clamp(14px, 2.2vw, 24px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(160px, 28vw);
}

@media (min-width: 992px) {
  .project-showcase-bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(140px, 18vw);
  }

  .project-showcase-bento > .project-showcase-tile:nth-child(4n + 1) {
    grid-column: span 2;
    grid-row: span 2;
  }

  .project-showcase-bento > .project-showcase-tile:nth-child(4n + 2) {
    grid-column: span 2;
    grid-row: span 1;
  }

  .project-showcase-bento > .project-showcase-tile:nth-child(4n + 3) {
    grid-column: span 1;
    grid-row: span 1;
  }

  .project-showcase-bento > .project-showcase-tile:nth-child(4n + 4) {
    grid-column: span 1;
    grid-row: span 1;
  }
}

@media (max-width: 991.98px) {
  .project-showcase-bento > .project-showcase-tile {
    grid-column: 1 / -1 !important;
    grid-row: span 1 !important;
    min-height: 220px !important;
  }
}

.project-showcase-tile {
  display: block;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: zoom-in;
  text-align: left;
  color: inherit;
  font: inherit;
  box-shadow: 0 22px 50px rgba(20, 17, 13, 0.08), 0 0 0 1px rgba(184, 149, 74, 0.16);
}

.project-showcase-tile:focus-visible {
  outline: 3px solid rgba(184, 149, 74, 0.55);
  outline-offset: 4px;
}

.project-showcase-tile-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.project-showcase-tile-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .project-showcase-tile:hover .project-showcase-tile-inner img {
    transform: scale(1.06);
  }
}

.project-showcase-tile-cap {
  position: absolute;
  inset: auto 14px 14px auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.52rem 0.92rem;
  border-radius: 999px;
  font-size: 0.92rem !important;
  background: rgba(20, 17, 13, 0.48);
  color: rgba(252, 250, 247, 0.95);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 0.42s ease, transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-showcase-tile:hover .project-showcase-tile-cap,
.project-showcase-tile:focus-visible .project-showcase-tile-cap {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.project-showcase-tail .btn-outline-dark:hover {
  background: var(--color-black-soft);
}

/* --------- Lightbox --------- */
.project-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-lightbox[hidden] {
  display: none !important;
}

.project-lightbox-backdrop {
  position: absolute;
  inset: 0;
  cursor: zoom-out;
  background: radial-gradient(circle at 50% 30%, rgba(40, 32, 24, 0.55), rgba(12, 10, 8, 0.88));
  backdrop-filter: blur(16px);
  animation: lb-backfade 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes lb-backfade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.project-lightbox-shell {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  width: min(1400px, 92vw);
  max-height: 88vh;
  padding-inline: clamp(8px, 2vw, 24px);
  animation: lb-shell-up 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes lb-shell-up {
  from {
    opacity: 0;
    transform: translate3d(0, 32px, 0) scale(0.964);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-lightbox-backdrop {
    animation: none;
  }

  .project-lightbox-shell {
    animation: none;
  }
}

.project-lightbox-dismiss {
  position: absolute;
  top: clamp(14px, 3vh, 32px);
  right: clamp(14px, 3vw, 32px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 246, 230, 0.14);
  background: rgba(18, 16, 12, 0.55);
  color: rgba(253, 250, 244, 0.95);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.project-lightbox-dismiss:hover {
  background: rgba(30, 26, 20, 0.78);
  transform: scale(1.05);
}

.project-lightbox-prev,
.project-lightbox-next {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 246, 230, 0.22);
  background: rgba(18, 16, 12, 0.35);
  color: rgba(253, 250, 244, 0.95);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.project-lightbox-prev:hover,
.project-lightbox-next:hover {
  background: rgba(30, 26, 20, 0.65);
}

.project-lightbox-figure {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) + 6px);
  border: 1px solid rgba(255, 246, 230, 0.12);
  background: rgba(10, 8, 6, 0.45);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}

.project-lightbox-img {
  display: block;
  width: 100%;
  max-height: min(76vh, 860px);
  object-fit: contain;
  animation: lb-img-soft 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes lb-img-soft {
  from {
    opacity: 0.35;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@media (max-width: 767.98px) {
  .project-lightbox-shell {
    flex-direction: column;
    gap: 0.75rem;
  }

  .project-lightbox-prev,
  .project-lightbox-next {
    display: none;
  }

  .project-lightbox-figure {
    width: 100%;
  }

  .project-lightbox-dismiss {
    top: clamp(18px, 4vw, 40px);
  }
}

/* ======================================================================
   Project detail — layout parity with moundirboufaa.live project pages
   (hero → gallery carousel + thumbnails → overview → challenge/solution
   grid → features → sticky details). Sitek light / gold palette.
   ====================================================================== */

.page-project-detail-mb {
  background: var(--color-bg);
}

.header-area.header-area--project-detail {
  background: rgba(244, 236, 226, 0.92);
}

.page-project-detail-mb .sideMenuButton.mbp-round-menu {
  border-radius: 0.875rem !important;
}

.pd-mb-root {
  overflow-x: clip;
}

.mbp-hero {
  position: relative;
  min-height: min(38vh, 21rem);
  display: flex;
  align-items: center;
}

.mbp-hero-gradient {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    138deg,
    rgba(212, 188, 122, 0.35) 0%,
    rgba(184, 149, 74, 0.12) 42%,
    rgba(247, 240, 230, 0.45) 100%
  );
}

.mbp-hero-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(244, 236, 226, 0.15) 0%, rgba(244, 236, 226, 0.94) 100%);
}

.mbp-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-bottom: clamp(2rem, 5vw, 3.25rem);
}

.mbp-back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.mbp-back:hover {
  color: var(--color-gold-deep);
}

.mbp-hero-title {
  font-family: var(--font-display);
  font-weight: 700 !important;
  font-size: clamp(2rem, 1.1rem + 4.8vw, 3.85rem);
  color: var(--color-black);
  line-height: 1.06;
  margin-bottom: 1rem !important;
}

.mbp-hero-desc {
  font-size: clamp(1.06rem, 0.96rem + 0.42vw, 1.38rem);
  color: var(--color-muted);
  max-width: 38rem;
  margin-bottom: 1.85rem !important;
  line-height: 1.65;
}

.mbp-btn-primary {
  padding: 0.65rem 1.45rem !important;
  border-radius: 0.875rem !important;
  border: none !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #c9a227, #b8954a) !important;
  color: #1a1610 !important;
  box-shadow: 0 14px 40px rgba(201, 162, 39, 0.35);
}

.mbp-btn-primary:hover {
  color: #0f0e0b !important;
  filter: brightness(1.06);
}

.mbp-btn-secondary {
  padding: 0.65rem 1.35rem !important;
  border-radius: 0.875rem !important;
  border: 1px solid rgba(184, 149, 74, 0.45) !important;
  background: rgba(250, 246, 240, 0.75) !important;
  font-weight: 600 !important;
  color: var(--color-black-soft) !important;
}

.mbp-btn-secondary:hover {
  border-color: var(--color-accent) !important;
  background: rgba(255, 252, 248, 0.95) !important;
}

.mbp-main {
  border-top-left-radius: 1.65rem;
  border-top-right-radius: 1.65rem;
  margin-top: -1rem;
  position: relative;
  z-index: 3;
  background: var(--color-bg);
  box-shadow: 0 -32px 60px rgba(20, 17, 13, 0.05);
}

.mbp-main-pad {
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
}

@media (min-width: 1200px) {
  .g-lg-mb-det {
    --bs-gutter-x: 3rem;
    --bs-gutter-y: 3rem;
  }
}

.mbp-section-title {
  font-family: var(--font-display);
  font-weight: 700 !important;
  font-size: clamp(1.55rem, 1.35rem + 1.1vw, 2rem) !important;
  color: var(--color-black);
  letter-spacing: -0.015em;
}

.mbp-bordered {
  border-radius: 1rem;
  border: 1px solid rgba(184, 149, 74, 0.22);
  background: linear-gradient(152deg, rgba(250, 246, 240, 0.98), rgba(235, 225, 210, 0.36));
  box-shadow: 0 26px 60px rgba(20, 17, 13, 0.07), 0 0 1px rgba(20, 17, 13, 0.04);
}

.mbp-carousel {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(54%, 36vw, 58%);
}

.mbp-carousel-view {
  position: absolute;
  inset: 0;
}

.mbp-carousel-main-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.mbp-carousel-zoom-layer {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(20, 17, 13, 0);
  transition: background 0.35s ease;
}

.mbp-zoom-fab {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%) scale(0.92);
  width: 3.55rem;
  height: 3.55rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 240, 230, 0.25);
  background: rgba(250, 246, 240, 0.22);
  backdrop-filter: blur(10px);
  color: #fff;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  cursor: zoom-in;
}

.mbp-zoom-fab:focus-visible {
  opacity: 1;
  outline: 3px solid rgba(212, 188, 122, 0.75);
}

.mbp-carousel-view:hover .mbp-carousel-zoom-layer,
.mbp-carousel-view:focus-within .mbp-carousel-zoom-layer {
  background: rgba(20, 17, 13, 0.28);
}

.mbp-carousel-view:hover .mbp-zoom-fab,
.mbp-carousel-view:focus-within .mbp-zoom-fab,
.mbp-zoom-fab:focus-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.mbp-carousel-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 8;
  width: 2.95rem;
  height: 2.95rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 240, 230, 0.25);
  background: rgba(20, 16, 12, 0.65);
  color: rgba(253, 250, 244, 0.98);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.mbp-carousel-nav:hover {
  background: rgba(201, 162, 39, 0.88);
  color: #1a1610;
  border-color: rgba(253, 250, 244, 0.25);
}

.mbp-carousel-nav--prev {
  left: clamp(10px, 2.5vw, 20px);
}

.mbp-carousel-nav--next {
  right: clamp(10px, 2.5vw, 20px);
}

@media (prefers-reduced-motion: reduce) {
  .mbp-zoom-fab {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .mbp-carousel-zoom-layer {
    background: rgba(20, 17, 13, 0.12);
  }
}

.mbp-carousel-counter {
  position: absolute;
  bottom: 1rem;
  right: clamp(12px, 2.8vw, 22px);
  z-index: 8;
  font-size: 0.815rem !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.92rem !important;
  background: rgba(20, 16, 12, 0.72);
  color: rgba(253, 250, 244, 0.94);
}

.mbp-carousel-thumbs-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.65rem;
  margin-top: 1rem;
  padding: 0.1rem 2px 0.45rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.mbp-carousel-thumb-slot {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  width: clamp(6.5rem, 19vw, 9.25rem);
  scroll-snap-align: start;
}

.mbp-thumb {
  position: relative;
  flex: 1;
  align-self: stretch;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--radius-md) * 0.85);
  overflow: hidden;
  background: var(--color-bg-alt);
  box-shadow:
    0 8px 22px rgba(20, 17, 13, 0.08),
    inset 0 0 0 1px rgba(255, 250, 244, 0.06);
  border: 2px solid rgba(40, 36, 31, 0.12);
  outline: none;
  cursor: pointer;
}

.mbp-thumb.is-active {
  border-color: var(--color-accent);
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, 0.4),
    0 12px 28px rgba(20, 17, 13, 0.12),
    inset 0 0 0 1px rgba(255, 250, 244, 0.08);
}

.mbp-thumb-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.mbp-thumb:focus-visible {
  outline: 3px solid rgba(184, 149, 74, 0.55);
  outline-offset: 3px;
}

.mbp-detail-card.mbp-bordered {
  padding: clamp(1.45rem, 3vw, 2.15rem);
  height: 100%;
}

.mbp-accent-challenge {
  font-family: var(--font-display);
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--color-gold-deep) !important;
}

.mbp-accent-solution {
  font-family: var(--font-display);
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #7a6845 !important;
}

@media (prefers-reduced-motion: no-preference) {
  .mbp-accent-solution {
    background: linear-gradient(90deg, #8f7a52, var(--color-gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
  }
}

.mbp-prose-p {
  font-size: 1rem;
  color: var(--color-muted);
  line-height: 1.74;
}

.mbp-prose-sm .mbp-prose-p:last-child {
  margin-bottom: 0 !important;
}

.mbp-prose .mbp-prose-p {
  margin-bottom: 1.1rem !important;
}

.mbp-prose .mbp-prose-p:last-child {
  margin-bottom: 0 !important;
}

.mbp-feature-row {
  display: flex;
  align-items: flex-start;
  gap: 0.82rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(184, 149, 74, 0.14);
  background: rgba(250, 246, 240, 0.55);
  height: 100%;
}

.mbp-ft-ico {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 162, 39, 0.15);
  color: var(--color-gold-deep);
  margin-top: 0.1rem;
  font-size: 0.9rem !important;
}

.mbp-ft-text {
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--color-muted);
}

.mbp-sidebar {
  padding: clamp(1.5rem, 3vw, 2rem) !important;
}

@media (min-width: 992px) {
  .page-project-detail-mb .mbp-sidebar-sticky.sticky-lg-top {
    top: 6.5rem;
    z-index: 20;
    align-self: flex-start;
  }
}

.mbp-sidebar-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.65vw, 1.42rem);
  font-weight: 700;
  margin: 0 !important;
  color: var(--color-black);
}

.mbp-tech-label {
  font-family: var(--font-display);
  font-size: 0.72rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: var(--color-muted) !important;
}

.mbp-tech-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.mbp-tech-chip {
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  padding: 0.42rem 0.92rem !important;
  border-radius: 0.55rem !important;
  border: 1px solid rgba(184, 149, 74, 0.22);
  background: rgba(255, 255, 255, 0.5);
  color: var(--color-black-soft);
}

.mbp-meta-line-sidebar {
  color: var(--color-muted);
}

.mbp-empty-gallery {
  font-size: 0.9375rem;
}

.page-project-detail-mb .project-lightbox .project-lightbox-backdrop {
  backdrop-filter: blur(14px);
}

/* --------- Project detail: motion & advanced UX (respects prefers-reduced-motion) --------- */

.page-project-detail-mb .mbp-reading-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  z-index: 2147483240;
  pointer-events: none;
}

.page-project-detail-mb .mbp-reading-progress-bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.09s linear;
  background: linear-gradient(90deg, #8f6f2f 0%, #c9a227 52%, #d4bc7a 100%);
  box-shadow: 0 0 18px rgba(201, 162, 39, 0.45);
}

.mbp-hero-auras {
  pointer-events: none;
  position: absolute;
  inset: -10% -20%;
  overflow: visible;
}

.mbp-aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(66px);
  opacity: 0.55;
  mix-blend-mode: multiply;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.mbp-enhanced-motion .mbp-aura--1 {
  width: clamp(340px, 46vw, 540px);
  height: clamp(340px, 46vw, 540px);
  left: -6%;
  top: -18%;
  background: radial-gradient(circle at 30% 30%, rgba(212, 188, 122, 0.55), transparent 72%);
  animation-name: mbp-aura-float-a;
  animation-duration: 11s;
}

.mbp-enhanced-motion .mbp-aura--2 {
  width: clamp(300px, 38vw, 440px);
  height: clamp(300px, 38vw, 440px);
  right: -4%;
  top: 22%;
  background: radial-gradient(circle at 40% 40%, rgba(184, 149, 74, 0.4), transparent 70%);
  animation-name: mbp-aura-float-b;
  animation-duration: 14s;
}

.mbp-enhanced-motion .mbp-aura--3 {
  width: clamp(520px, 62vw, 780px);
  height: clamp(520px, 62vw, 780px);
  left: 12%;
  bottom: -54%;
  background: radial-gradient(circle at 50% 42%, rgba(201, 162, 39, 0.22), transparent 68%);
  animation-name: mbp-aura-float-c;
  animation-duration: 18s;
}

@keyframes mbp-aura-float-a {
  50% {
    transform: translate3d(4%, -5%, 0) scale(1.08);
  }
}

@keyframes mbp-aura-float-b {
  50% {
    transform: translate3d(-8%, 6%, 0) scale(1.05);
  }
}

@keyframes mbp-aura-float-c {
  50% {
    transform: translate3d(3%, -3%, 0) scale(1.04);
  }
}

.mbp-hero-noise {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation: mbp-noise-shift 900ms linear infinite;
}

@keyframes mbp-noise-shift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-8%, -12%, 0);
  }
}

.mbp-enhanced-motion .mbp-hero-copy .mbp-hero-ent {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

.mbp-enhanced-motion .mbp-hero-copy--entered .mbp-he-1,
.mbp-enhanced-motion .mbp-hero-copy--entered .mbp-he-2,
.mbp-enhanced-motion .mbp-hero-copy--entered .mbp-he-3,
.mbp-enhanced-motion .mbp-hero-copy--entered .mbp-he-4 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-property: opacity, transform;
  transition-duration: 0.92s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.mbp-enhanced-motion .mbp-hero-copy--entered .mbp-he-1 {
  transition-delay: 50ms;
}
.mbp-enhanced-motion .mbp-hero-copy--entered .mbp-he-2 {
  transition-delay: 0.13s;
}
.mbp-enhanced-motion .mbp-hero-copy--entered .mbp-he-3 {
  transition-delay: 0.2s;
}
.mbp-enhanced-motion .mbp-hero-copy--entered .mbp-he-4 {
  transition-delay: 0.28s;
}

.mbp-enhanced-motion .mbp-scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity 0.82s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.88s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.82s cubic-bezier(0.16, 1, 0.3, 1);
  filter: blur(10px);
}

.mbp-enhanced-motion .mbp-scroll-reveal.mbp-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  html.mbp-enhanced-motion body.mbp-motion-reduced-boot *,
  body.mbp-motion-reduced-boot * {
    animation: none !important;
  }

  html.mbp-enhanced-motion body.mbp-motion-reduced-boot .mbp-carousel-main-img,
  body.mbp-motion-reduced-boot .mbp-carousel-main-img {
    transition-duration: 0.15s !important;
  }

  html.mbp-enhanced-motion body.mbp-motion-reduced-boot .mbp-scroll-reveal.mbp-visible,
  body.mbp-motion-reduced-boot .mbp-scroll-reveal.mbp-visible {
    filter: none !important;
  }

  html.mbp-enhanced-motion body.mbp-motion-reduced-boot .mbp-scroll-reveal,
  body.mbp-motion-reduced-boot .mbp-scroll-reveal {
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mbp-hero-noise,
  .mbp-enhanced-motion .mbp-aura,
  .mbp-aura {
    animation: none !important;
    opacity: 0.29 !important;
  }
}

.page-project-detail-mb .mbp-btn-primary {
  position: relative;
  overflow: hidden;
}

.page-project-detail-mb .mbp-btn-primary:not(.disabled)::after {
  content: "";
  position: absolute;
  inset: 0;
  translate: -35% 0;
  skew: -18deg;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 250, 0.28),
    transparent
  );
  opacity: 0;
  animation: none;
}

.mbp-enhanced-motion .page-project-detail-mb .mbp-btn-primary:hover::after {
  opacity: 1;
  animation: mbp-sheen 1.05s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes mbp-sheen {
  to {
    translate: 120% 0;
    opacity: 0;
  }
}

.mbp-glitch-hover:hover {
  text-shadow: 0 0 1px rgba(184, 149, 74, 0.22);
}

@media (prefers-reduced-motion: no-preference) {
  html.mbp-enhanced-motion .mbp-glitch-hover:hover {
    animation: mbp-micro-glitch 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@keyframes mbp-micro-glitch {
  0%,
  100% {
    clip-path: inset(0 0 0 0);
  }
  20% {
    clip-path: inset(10% -2px 73% -2px);
  }
  40% {
    clip-path: inset(65% -2px 8% -2px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.mbp-enhanced-motion .mbp-carousel-gestures .mbp-carousel-main-img {
    will-change: transform, opacity, filter;
    transition:
      opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.48s ease;
  }

  html.mbp-enhanced-motion .mbp-carousel--pulse-out .mbp-carousel-main-img {
    opacity: 0;
    transform: translate3d(calc(var(--mbp-carousel-dir, 1) * -36px), 0, 0) scale(1.05);
    filter: blur(12px);
  }

  html.mbp-enhanced-motion .mbp-carousel--pulse-in .mbp-carousel-main-img {
    animation: mbp-cv-enter 0.58s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
}

@keyframes mbp-cv-enter {
  from {
    opacity: 0;
    transform: translate3d(calc(var(--mbp-carousel-dir, 1) * 40px), 0, 0) scale(1.07);
    filter: blur(16px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

.mbp-carousel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.95rem;
  margin-top: 1.15rem;
}

.mbp-carousel-progress-track {
  flex: 1 1 120px;
  height: 5px;
  border-radius: 999px;
  background: rgba(40, 35, 30, 0.08);
  overflow: hidden;
}

.mbp-carousel-progress-fill {
  display: block;
  height: 100%;
  width: 25%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b8954a, #d4bc7a, #c9a227);
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.38);
}

.mbp-enhanced-motion .mbp-carousel-progress-fill {
  transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.mbp-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
}

.mbp-carousel-hint {
  font-size: 0.715rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: var(--color-muted) !important;
  white-space: nowrap;
}

.mbp-carousel-hint i {
  margin-right: 0.35rem;
  color: var(--color-gold-deep);
}

.mbp-dot {
  width: 0.65rem;
  height: 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(184, 149, 74, 0.35);
  background: rgba(250, 246, 240, 0.6);
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
  transition:
    opacity 0.25s ease,
    width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.25s ease,
    transform 0.25s ease;
}

.mbp-dot:hover {
  opacity: 0.92;
}

.mbp-dot.is-current {
  width: 1.92rem;
  opacity: 1;
  border-color: rgba(201, 162, 39, 0.55);
  background: linear-gradient(90deg, #c9a227, #b8954a);
  transform: translateY(-1px);
}

.mbp-enhanced-motion .mbp-carousel-thumb-slot:hover {
  transform: translateY(-4px);
}

.mbp-carousel-nav-mag {
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.25s ease;
}

@media (prefers-reduced-motion: no-preference) {
  html.mbp-enhanced-motion .mbp-carousel-nav-mag:hover {
    box-shadow:
      0 6px 30px rgba(201, 162, 39, 0.35),
      0 0 0 1px rgba(255, 250, 240, 0.12);
    scale: 1.08;
  }

  html.mbp-enhanced-motion .mbp-carousel-nav-mag:active {
    scale: 0.93;
  }
}

.mbp-detail-card-float {
  transform-style: preserve-3d;
}

@media (hover: hover) and (pointer: fine) {
  html.mbp-enhanced-motion .mbp-detail-card-float {
    transition:
      transform 0.62s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.62s cubic-bezier(0.16, 1, 0.3, 1);
  }

  html.mbp-enhanced-motion .mbp-detail-card-float:hover {
    transform: translateY(-10px) rotateX(4deg);
    box-shadow:
      0 40px 76px rgba(20, 17, 13, 0.12),
      0 0 0 1px rgba(201, 162, 39, 0.18);
  }
}

.row.mbp-scroll-reveal#pd-challenge-solution-row {
  perspective: 1100px;
}

.mbp-sidebar-glass {
  position: relative;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  html.mbp-enhanced-motion .mbp-sidebar-glass::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.32;
    background: linear-gradient(
      118deg,
      rgba(212, 188, 122, 0.4),
      rgba(184, 149, 74, 0.08),
      rgba(201, 162, 39, 0.24),
      rgba(212, 188, 122, 0.35)
    );
    background-size: 260% 260%;
    animation: mbp-ring-spin 12s linear infinite;
    z-index: 0;
  }

  html.mbp-enhanced-motion .mbp-sidebar-glass > * {
    position: relative;
    z-index: 1;
  }
}

@keyframes mbp-ring-spin {
  to {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.mbp-enhanced-motion .mbp-chip-entrance {
    animation-name: mbp-chip-pop;
    animation-duration: 0.65s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: backwards;
    animation-delay: var(--mbp-chip-delay, 0ms);
  }
}

@keyframes mbp-chip-pop {
  from {
    opacity: 0;
    transform: translate3d(-8px, 12px, 0) scale(0.94);
    filter: blur(4px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.mbp-enhanced-motion .mbp-feature-row-enhanced {
    transition:
      transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.52s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }

  html.mbp-enhanced-motion .mbp-feature-rise.mbp-visible .mbp-feature-row-enhanced:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 162, 39, 0.35);
    box-shadow: 0 22px 48px rgba(20, 17, 13, 0.12);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.mbp-enhanced-motion #pd-overview-section.mbp-visible #pd-overview-body .mbp-prose-rise {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    animation: mbp-pro-rise 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--mbp-rise-delay, 0.14s);
  }
}

@keyframes mbp-pro-rise {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

html.mbp-enhanced-motion body.mbp-motion-reduced-boot #pd-overview-body .mbp-prose-rise,
body.mbp-motion-reduced-boot #pd-overview-body .mbp-prose-rise {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  html.mbp-enhanced-motion .project-lightbox-img.project-lightbox-flash {
    animation: mbp-lb-enter 0.48s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
}

@keyframes mbp-lb-enter {
  from {
    opacity: 0;
    transform: scale(0.986);
    filter: blur(10px);
  }
}

.mbp-enhanced-motion .mbp-carousel.mbp-carousel--enhanced {
  box-shadow: 0 32px 80px rgba(20, 17, 13, 0.11);
}

@media (prefers-reduced-motion: reduce) {
  html.mbp-enhanced-motion .mbp-btn-primary:not(.disabled)::after {
    display: none;
  }

  html.mbp-enhanced-motion .mbp-hero-copy .mbp-hero-ent,
  html.mbp-enhanced-motion .mbp-scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  html.mbp-enhanced-motion .mbp-hero-copy--entered .mbp-hero-ent {
    transition-delay: 0ms !important;
  }
}

/* =============================================================================
   Home — devagency.ma layout parity × Sitek gold/beige palette
   ============================================================================= */

body.page-home-parity .header-parity,
body.page-sitek-parity .header-parity {
  background: rgba(253, 250, 244, 0.94) !important;
  border-bottom-color: rgba(184, 149, 74, 0.22) !important;
}

body.page-home-parity .navbar-parity .navbar-nav .nav-link,
body.page-sitek-parity .navbar-parity .navbar-nav .nav-link {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: clamp(1rem, 1.1vw, 1.15625rem);
  font-weight: 700;
  padding-inline: 0.82rem !important;
}

body.page-home-parity .navbar-parity .navbar-nav .nav-link.active,
body.page-sitek-parity .navbar-parity .navbar-nav .nav-link.active {
  font-weight: 800;
  letter-spacing: 0.08em;
}

body.page-home-parity .parity-menu-trigger.sideMenuButton,
body.page-sitek-parity .parity-menu-trigger.sideMenuButton {
  width: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  justify-content: center;
  box-shadow:
    0 10px 28px rgba(143, 111, 47, 0.35),
    0 1px 0 rgba(255, 252, 244, 0.25);
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s ease;
}

@media (hover: hover) and (pointer: fine) {
  body.page-home-parity .parity-menu-trigger.sideMenuButton:hover,
  body.page-sitek-parity .parity-menu-trigger.sideMenuButton:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 16px 40px rgba(143, 111, 47, 0.42);
  }
}

body.page-home-parity .parity-section-loose {
  padding-block: clamp(3rem, 8vw, 6.75rem);
}

@media (max-width: 991.98px) {
  body.page-home-parity .parity-section-loose {
    padding-block: clamp(2.35rem, 7vw, 4rem);
  }
}

body.page-home-parity .parity-mission-row {
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 2rem;
}

@media (min-width: 1400px) {
  body.page-home-parity .parity-mission-row {
    --bs-gutter-x: 3.35rem;
    --bs-gutter-y: 3.35rem;
  }
}

body.page-home-parity .mission-parity-intro {
  overflow-x: clip;
  background: linear-gradient(
    180deg,
    rgba(253, 250, 244, 0.65) 0%,
    var(--color-bg) 100%
  );
}

body.page-home-parity .mission-visual-parity--end .mission-parity-slab {
  left: auto;
  right: -11%;
}

@media (max-width: 575.98px) {
  body.page-home-parity .mission-visual-parity--end .mission-parity-slab {
    left: auto;
    right: -3%;
  }
}

body.page-home-parity .mission-visual-parity--end .mission-parity-badge {
  left: clamp(-8%, -2vw, -4%);
  right: auto;
}

@media (max-width: 991.98px) {
  body.page-home-parity .mission-visual-parity--end .mission-parity-badge {
    left: auto;
    right: -5%;
  }
}

body.page-home-parity .mission-visual-parity {
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding-inline: clamp(0px, 2vw, 12px);
  padding-block: clamp(18px, 4vw, 36px);
}

body.page-home-parity .mission-parity-slab {
  position: absolute;
  left: -11%;
  top: 10%;
  width: 71%;
  height: 91%;
  border-radius: clamp(22px, 4vw, 36px);
  background: linear-gradient(
    155deg,
    var(--color-gold-deep),
    rgba(42, 36, 28, 0.92)
  );
  opacity: 0.9;
  z-index: 0;
  box-shadow: 0 30px 60px rgba(20, 17, 13, 0.2);
}

@media (max-width: 575.98px) {
  body.page-home-parity .mission-parity-slab {
    left: -3%;
    width: 82%;
    top: 12%;
    height: 86%;
    opacity: 0.82;
  }
}

body.page-home-parity .mission-parity-frame {
  position: relative;
  z-index: 1;
  border-radius: clamp(22px, 4vw, 38px);
  padding: clamp(10px, 2vw, 14px);
  background: linear-gradient(
    155deg,
    var(--color-gold-light),
    var(--color-gold)
  );
  box-shadow:
    var(--shadow-soft),
    0 0 0 1px rgba(255, 252, 244, 0.22) inset;
}

body.page-home-parity .mission-parity-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(14px, 3vw, 26px);
  object-fit: cover;
  aspect-ratio: 5 / 3.35;
}

body.page-home-parity .mission-parity-badge {
  position: absolute;
  right: -5%;
  bottom: clamp(8%, 5vw, 18%);
  z-index: 2;
  width: clamp(118px, 28vw, 152px);
  height: clamp(118px, 28vw, 152px);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.85rem;
  background: radial-gradient(circle at 35% 30%, var(--color-gold-light), var(--color-gold));
  color: var(--color-black-soft);
  font-family: var(--font-display);
  box-shadow:
    0 18px 42px rgba(20, 17, 13, 0.22),
    0 0 0 6px rgba(253, 250, 244, 0.65);
}

body.page-home-parity .mission-parity-badge-num {
  font-size: clamp(1.65rem, 4vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
}

body.page-home-parity .mission-parity-badge-txt {
  margin-top: 0.35rem;
  font-size: 0.6675rem;
  font-weight: 700;
  line-height: 1.28;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  max-width: 7.25rem;
}

body.page-home-parity .mission-parity-h2 {
  font-size: clamp(2rem, 3.75vw, 2.82rem);
  font-weight: 800;
}

body.page-home-parity .mission-parity-lead {
  font-size: 1.1rem;
  color: var(--color-muted);
  max-width: 36ch;
}

body.page-home-parity .accordion-parity .parity-acc-item.accordion-item {
  border-radius: clamp(14px, 3vw, 18px);
  margin-bottom: 0.82rem;
  border: 1px solid rgba(184, 149, 74, 0.28);
  overflow: hidden;
  background: var(--color-surface);
}

body.page-home-parity .accordion-parity .accordion-button {
  border-radius: 0 !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  padding-block: 1rem;
  padding-inline: 1.15rem;
  background: rgba(253, 250, 244, 0.95);
  color: var(--color-black-soft);
}

body.page-home-parity .accordion-parity .accordion-button:not(.collapsed) {
  background: var(--color-gold-deep);
  color: #fdf8ef;
}

body.page-home-parity .accordion-parity .accordion-button:focus {
  box-shadow: none;
}

body.page-home-parity .accordion-parity .accordion-button::after {
  content: "+" !important;
  background-image: none !important;
  width: auto;
  height: auto;
  transform: none !important;
  margin-inline-start: auto;
  font-size: 1.3rem;
  font-weight: 400;
}

body.page-home-parity .accordion-parity .accordion-button:not(.collapsed)::after {
  content: "\2212" !important;
}

body.page-home-parity .accordion-parity .accordion-body {
  background: rgba(253, 250, 244, 0.98);
  border-top: 1px solid rgba(184, 149, 74, 0.15);
  color: var(--color-muted);
  padding: 1.05rem 1.15rem 1.25rem;
}

body.page-home-parity .parity-mega-headline {
  font-size: clamp(2.85rem, 7.35vw, 5.08rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

body.page-home-parity .parity-trust-caption {
  letter-spacing: 0.065em !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

body.page-home-parity .hero-parity-mega {
  background: linear-gradient(
      180deg,
      transparent 70%,
      rgba(237, 225, 208, 0.45) 100%
    ),
    var(--color-bg);
}

/* Home photo + stats — devagency.ma layout × Sitek gold */
body.page-home-parity .home-photo-stats-parity.cta-video-wrapper {
  padding-top: 0;
  padding-bottom: 0;
}

body.page-home-parity .home-photo-stats-parity {
  padding-top: 0;
  padding-bottom: 0;
  background: linear-gradient(
    158deg,
    var(--color-gold) 0%,
    var(--color-gold-deep) 48%,
    #3f3323 118%
  );
  overflow-x: clip;
}

body.page-home-parity .home-photo-stats-parity .container {
  overflow: visible;
}

body.page-home-parity .home-photo-stats-parity .video-wrap.home-parity-wave {
  z-index: 1;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 130%;
  max-width: none;
  height: 400px;
  margin-bottom: 0;
  display: flex;
  position: relative;
  transform: translateY(-62px);
  overflow: hidden;
  aspect-ratio: auto;
  box-shadow: none;
  background: #1a1714;
}

@media only screen and (min-width: 992px) {
  body.page-home-parity .home-photo-stats-parity .video-wrap.home-parity-wave {
    height: 480px;
    transform: translateY(-96px);
  }
}

@media only screen and (min-width: 1200px) {
  body.page-home-parity .home-photo-stats-parity .video-wrap.home-parity-wave {
    height: 620px;
    transform: translateY(-112px);
  }
}

body.page-home-parity .home-photo-stats-parity .video-wrap.home-parity-wave img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}

body.page-home-parity .home-photo-stats-parity .home-stats-parity-row {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(1.25rem, 2.75vw, 2.25rem);
}

body.page-home-parity .home-photo-stats-parity .cta-content.home-stat-inner {
  position: relative;
  z-index: 1;
  padding-right: 1rem;
}

@media only screen and (min-width: 992px) {
  body.page-home-parity .home-photo-stats-parity .cta-content.home-stat-inner {
    padding-right: 3rem;
  }
}

body.page-home-parity .home-photo-stats-parity .cta-content.home-stat-inner::after {
  content: "";
  background-color: rgba(26, 22, 17, 0.45);
  width: 1px;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
}

@media only screen and (min-width: 768px) {
  body.page-home-parity .home-photo-stats-parity .cta-content.home-stat-inner::after {
    display: block;
  }
}

body.page-home-parity
  .home-photo-stats-parity
  .home-stats-parity-row
  .col-12:nth-child(3)
  .cta-content.home-stat-inner::after {
  display: none !important;
}

body.page-home-parity .home-photo-stats-parity .home-stat-cell {
  position: relative;
  padding-block: clamp(0.95rem, 2.25vw, 1.65rem);
  padding-inline: clamp(0.65rem, 2vw, 1rem);
}

body.page-home-parity .home-photo-stats-parity .home-stat-cell + .home-stat-cell::before {
  display: none !important;
}

body.page-home-parity .home-photo-stats-parity .home-stat-inner h2.home-stat-num {
  font-size: clamp(2.4rem, 5vw, 3.35rem);
  color: #fff;
}

body.page-home-parity .home-photo-stats-parity .home-stat-inner h4 {
  font-size: 1.06rem;
  color: #fff;
}

body.page-home-parity .home-photo-stats-parity .home-stat-inner p {
  color: rgba(255, 255, 255, 0.92);
  max-width: 30ch;
  margin-inline: auto;
}

body.page-home-parity .parity-portfolio-nav.portfolio-button-prev,
body.page-home-parity .parity-portfolio-nav.portfolio-button-next {
  background: linear-gradient(
    155deg,
    var(--color-gold-light),
    var(--color-gold)
  ) !important;
  border: none !important;
  box-shadow: 0 12px 32px rgba(20, 17, 13, 0.18);
}

body.page-home-parity .parity-portfolio-nav.portfolio-button-prev svg path,
body.page-home-parity .parity-portfolio-nav.portfolio-button-next svg path {
  fill: var(--color-black-soft);
}

body.page-home-parity .faq-parity {
  background: linear-gradient(
    182deg,
    rgba(253, 250, 244, 0.55) 0%,
    var(--color-bg) 55%
  );
}

body.page-home-parity .parity-faq-title {
  font-size: clamp(2rem, 3.85vw, 2.92rem);
  font-weight: 800;
}

body.page-home-parity .faq-parity-visual {
  position: relative;
  min-height: clamp(268px, 42vw, 348px);
  border-radius: clamp(22px, 4vw, 34px);
  padding: clamp(14px, 3vw, 22px);
  background: linear-gradient(
    138deg,
    var(--color-surface),
    rgba(235, 225, 212, 0.7)
  );
  box-shadow: var(--shadow-soft);
}

body.page-home-parity .faq-parity-img {
  position: absolute;
  right: 4%;
  bottom: -34px;
  width: clamp(168px, 38%, 244px);
  border-radius: 18px;
  box-shadow:
    0 24px 52px rgba(20, 17, 13, 0.28),
    0 0 0 8px rgba(253, 250, 244, 0.55);
  z-index: 2;
}

body.page-home-parity .faq-parity-board {
  position: relative;
  z-index: 1;
  min-height: clamp(220px, 36vw, 276px);
  border-radius: 20px;
  padding: clamp(1.85rem, 5vw, 2.85rem);
  padding-right: clamp(36%, 12rem, 48%);
  background: linear-gradient(152deg, #2f281c 10%, var(--color-gold-deep) 132%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 240, 0.13),
    0 20px 56px rgba(20, 17, 13, 0.26);
}

body.page-home-parity .faq-parity-letter {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3.8rem, 11vw, 5.82rem);
  font-weight: 700;
  line-height: 0.93;
  color: rgba(230, 210, 160, 0.96);
}

body.page-home-parity .faq-parity-tag {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(253, 250, 244, 0.86);
}

body.page-home-parity .faq-parity-float-badge {
  position: absolute;
  left: clamp(14px, 4vw, 26px);
  bottom: clamp(14px, 4vw, 26px);
  z-index: 4;
  max-width: 11rem;
  padding: 0.82rem 1.05rem;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 20%, var(--color-gold-light), var(--color-gold));
  color: var(--color-black-soft);
  font-family: var(--font-display);
  box-shadow: 0 18px 44px rgba(20, 17, 13, 0.36);
}

body.page-home-parity .faq-parity-num {
  display: block;
  font-size: 1.88rem;
  font-weight: 800;
  line-height: 1;
}

body.page-home-parity .faq-parity-lbl {
  display: block;
  margin-top: 0.26rem;
  font-size: 0.7175rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.33;
}

body.page-home-parity .faq-accordion-parity .accordion-button {
  font-weight: 700;
}

body.page-home-parity .faq-accordion-parity .accordion-button::after {
  content: "+" !important;
  background-image: none !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  margin-inline-start: auto;
}

body.page-home-parity .faq-accordion-parity .accordion-button:not(.collapsed)::after {
  content: "\2212" !important;
}

body.page-home-parity .faq-accordion-parity .accordion-button:not(.collapsed) {
  background: var(--color-gold-deep);
  color: #fdf8ef;
}

body.page-home-parity .faq-accordion-parity.faq-accordion .accordion-item {
  border-radius: clamp(13px, 2.6vw, 17px);
  border-color: rgba(184, 149, 74, 0.24);
}

@media (prefers-reduced-motion: no-preference) {
  body.page-sitek-parity .parity-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
      opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  body.page-sitek-parity .parity-reveal--left {
    transform: translate3d(-34px, 26px, 0);
  }

  body.page-sitek-parity .parity-reveal--right {
    transform: translate3d(34px, 26px, 0);
  }

  body.page-sitek-parity .parity-reveal.is-inview {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* Inner-page hero titles — horizontal slide when .parity-reveal is used (IO in main.js) */
  body.page-sitek-parity .page-hero-banner--parity .breadcrumb-content .parity-reveal {
    transition:
      opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
      transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--parity-d, 0) * 0.14s);
  }

  body.page-sitek-parity .page-hero-banner--parity .breadcrumb-content .parity-reveal--left {
    transform: translate3d(clamp(-132px, -20vw, -56px), 10px, 0);
  }

  body.page-sitek-parity .page-hero-banner--parity .breadcrumb-content .parity-reveal--right {
    transform: translate3d(clamp(56px, 20vw, 132px), 10px, 0);
  }

  /* Must beat .parity-reveal--left / --right above; otherwise resting state stays offset (not centred) */
  body.page-sitek-parity .page-hero-banner--parity .breadcrumb-content .parity-reveal.is-inview {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* Home — slower, larger slides; stagger via --parity-d when several reveal together */
  body.page-home-parity .parity-reveal {
    opacity: 0;
    transform: translate3d(0, 92px, 0);
    transition:
      opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
      transform 1.38s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--parity-d, 0) * 0.14s);
    will-change: opacity, transform;
  }

  body.page-home-parity .parity-reveal--left {
    transform: translate3d(-84px, 64px, 0);
  }

  body.page-home-parity .parity-reveal--right {
    transform: translate3d(84px, 64px, 0);
  }

  body.page-home-parity .parity-reveal--down {
    transform: translate3d(0, 112px, 0);
  }

  /* Hero — headline & supporting text read as horizontal slides (minimal vertical drift) */
  body.page-home-parity .hero-parity-mega .parity-reveal {
    transition-duration: 1.15s, 1.42s;
  }

  body.page-home-parity .hero-parity-mega .parity-reveal--left {
    transform: translate3d(clamp(-168px, -22vw, -72px), 10px, 0);
  }

  body.page-home-parity .hero-parity-mega .parity-reveal--right {
    transform: translate3d(clamp(72px, 22vw, 168px), 10px, 0);
  }

  body.page-home-parity .hero-parity-mega .parity-reveal.is-inview {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  body.page-home-parity .parity-reveal.is-inview {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* Services — slide from below + sides (no opacity fade); scroll-triggered per block via IO */
  body.page-services .parity-reveal {
    opacity: 1;
    transform: translate3d(-56px, 72px, 0);
    transition: transform 0.95s cubic-bezier(0.16, 1, 0.32, 1);
    transition-delay: 0s;
    will-change: transform;
  }

  body.page-services .parity-reveal--right {
    transform: translate3d(56px, 72px, 0);
  }

  body.page-services .services-marquee-reveal.parity-reveal {
    transform: translate3d(0, 44px, 0);
  }

  body.page-services .parity-reveal.is-inview {
    transform: translate3d(0, 0, 0);
  }

  body.page-services .service-wrapper .row > [class*="col-"].parity-reveal:nth-child(1) {
    transition-delay: 0s;
  }
  body.page-services .service-wrapper .row > [class*="col-"].parity-reveal:nth-child(2) {
    transition-delay: 0.07s;
  }
  body.page-services .service-wrapper .row > [class*="col-"].parity-reveal:nth-child(3) {
    transition-delay: 0.14s;
  }
  body.page-services .service-wrapper .row > [class*="col-"].parity-reveal:nth-child(4) {
    transition-delay: 0.21s;
  }
  body.page-services .service-wrapper .row > [class*="col-"].parity-reveal:nth-child(5) {
    transition-delay: 0.28s;
  }
  body.page-services .service-wrapper .row > [class*="col-"].parity-reveal:nth-child(6) {
    transition-delay: 0.35s;
  }

  body.page-services .cta-wrapper--services .parity-reveal--right {
    transition-delay: 0.1s;
  }
}

/* Inner pages — card hover lift (Services uses .service-slide-card internal motion only) */
@media (hover: hover) and (pointer: fine) {
  body.page-sitek-parity:not(.page-services) .service-wrapper .service-slide-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 52px rgba(143, 111, 47, 0.14);
  }
}

body.page-sitek-parity .blog-archive .blog-card-post {
  box-shadow: 0 14px 36px rgba(20, 17, 13, 0.06);
}

@media (hover: hover) and (pointer: fine) {
  body.page-sitek-parity .blog-archive .blog-card-post:hover {
    box-shadow: 0 26px 56px rgba(143, 111, 47, 0.16);
  }
}

body.page-sitek-parity .testimonial-archive .testimonial-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
  body.page-sitek-parity .testimonial-archive .testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 52px rgba(143, 111, 47, 0.14);
  }
}

body.page-sitek-parity .contact-details-inner .contact-info-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
  body.page-sitek-parity .contact-details-inner .contact-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 52px rgba(143, 111, 47, 0.14);
  }
}

body.page-sitek-parity.page-project-detail-mb .header-area.header-area--project-detail {
  border-bottom: 1px solid rgba(184, 149, 74, 0.22) !important;
}

/* ------------------------------------------------------------------------- 
   Inner pages — full Sitek theme (no Bootstrap gray blocks)
   ------------------------------------------------------------------------- */

body.page-sitek-parity .sitek-form-panel {
  background: var(--color-surface) !important;
  border: 1px solid rgba(184, 149, 74, 0.26) !important;
  border-radius: var(--radius-lg);
  box-shadow:
    0 22px 60px rgba(20, 17, 13, 0.08),
    0 0 0 1px rgba(255, 252, 244, 0.55) inset;
}

body.page-sitek-parity .sitek-form-panel .section-heading h2 {
  color: var(--color-black);
}

body.page-sitek-parity .sitek-cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: rgba(245, 239, 230, 0.94);
  background: linear-gradient(158deg, #252019 0%, #1a1714 48%, #12100e 100%) !important;
  border-top: 1px solid rgba(201, 162, 39, 0.22);
  border-bottom: 1px solid rgba(10, 8, 6, 0.65);
}

body.page-sitek-parity .sitek-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 58% at 14% 28%, rgba(201, 162, 39, 0.2), transparent 56%),
    radial-gradient(ellipse 58% 52% at 88% 78%, rgba(184, 149, 74, 0.14), transparent 52%);
}

body.page-sitek-parity .sitek-cta-band .divider-sm {
  position: relative;
  z-index: 1;
}

body.page-sitek-parity .sitek-cta-band .container {
  position: relative;
  z-index: 1;
}

body.page-sitek-parity .sitek-cta-band h2 {
  color: #fdf8ef;
}

body.page-sitek-parity .sitek-cta-band .cta-lead {
  color: rgba(235, 225, 212, 0.85);
}

body.page-sitek-parity .sitek-services-stage {
  position: relative;
  background: var(--color-bg);
  overflow: clip;
}

body.page-sitek-parity .sitek-services-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 85% 50% at 50% -10%, rgba(201, 162, 39, 0.1), transparent 55%),
    radial-gradient(ellipse 55% 42% at 100% 95%, rgba(184, 149, 74, 0.07), transparent 50%),
    linear-gradient(180deg, var(--color-bg) 0%, rgba(250, 246, 240, 0.35) 50%, var(--color-bg) 100%);
}

body.page-sitek-parity .sitek-services-stage > .divider,
body.page-sitek-parity .sitek-services-stage > .container {
  position: relative;
  z-index: 1;
}

body.page-sitek-parity .sitek-contact-stage {
  position: relative;
  background: linear-gradient(180deg, var(--color-bg) 0%, rgba(235, 225, 212, 0.22) 35%, var(--color-bg) 100%);
}

body.page-sitek-parity .sitek-contact-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(201, 162, 39, 0.09), transparent 60%);
}

body.page-sitek-parity .sitek-contact-stage > .divider,
body.page-sitek-parity .sitek-contact-stage > .container,
body.page-sitek-parity .sitek-contact-stage > .contact-form-wrap {
  position: relative;
  z-index: 1;
}

/* Contact page — high-contrast cards, form depth, aside motion (body.page-contact) */
@keyframes sitek-contact-stage-aurora {
  0%,
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: 0.86;
    transform: translate3d(0, 1.5%, 0) scale(1.04);
  }
}

body.page-contact .sitek-contact-stage {
  background: linear-gradient(
    185deg,
    var(--color-bg) 0%,
    rgba(230, 204, 130, 0.16) 38%,
    var(--color-bg-alt) 100%
  );
}

body.page-contact .sitek-contact-stage::before {
  background:
    radial-gradient(ellipse 85% 48% at 50% -8%, rgba(201, 162, 39, 0.26), transparent 58%),
    radial-gradient(ellipse 50% 38% at 96% 72%, rgba(184, 149, 74, 0.16), transparent 54%);
}

@media (prefers-reduced-motion: no-preference) {
  body.page-contact .sitek-contact-stage::before {
    animation: sitek-contact-stage-aurora 16s ease-in-out infinite;
  }
}

body.page-contact .contact-details-inner .contact-info-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 2.15rem 1.5rem;
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--color-surface) 78%, white) 0%,
    var(--color-surface) 42%,
    color-mix(in srgb, var(--color-bg-alt) 85%, var(--color-gold) 14%) 100%
  );
  border: 1px solid rgba(184, 149, 74, 0.42);
  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.14),
    0 0 0 1px color-mix(in srgb, white 58%, var(--color-surface)) inset,
    0 0 48px -20px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

body.page-contact .contact-details-inner .contact-info-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(143, 111, 47, 0.2),
    var(--color-gold),
    var(--color-gold-light),
    var(--color-gold),
    rgba(143, 111, 47, 0.2)
  );
  pointer-events: none;
}

body.page-contact .contact-details-inner .contact-info-card .icon-wrapper {
  width: 4.35rem;
  height: 4.35rem;
  margin-inline: auto;
  margin-bottom: 1.15rem;
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-surface) 88%, white),
    color-mix(in srgb, var(--color-gold-light) 42%, var(--color-surface))
  );
  border: 2px solid rgba(184, 149, 74, 0.5);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 color-mix(in srgb, white 55%, var(--color-surface));
}

body.page-contact .contact-details-inner .contact-info-card .contact-card-icon {
  color: var(--color-gold-deep);
  filter: drop-shadow(0 2px 6px rgba(184, 149, 74, 0.35));
}

body.page-contact .contact-details-inner .contact-info-card .mb-1 {
  color: var(--color-black-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.page-contact .contact-details-inner .contact-info-card h4 {
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.35;
}

body.page-contact .contact-details-inner .contact-info-card h4 a {
  color: var(--color-black) !important;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.25s cubic-bezier(0.33, 1, 0.68, 1);
}

body.page-contact .contact-details-inner .contact-info-card h4 a:hover {
  color: var(--color-gold-deep) !important;
}

/* Contact — flat channel strip (no cards); cards reserved for .sitek-form-panel only */
body.page-contact .sitek-contact-channels {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem clamp(1.5rem, 4vw, 2.75rem);
  max-width: 54rem;
  margin-inline: auto;
}

body.page-contact .contact-channel {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0;
  color: inherit;
  text-decoration: none;
}

body.page-contact .contact-channel__icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 1.35rem;
  color: var(--color-gold-deep);
  background: color-mix(in srgb, var(--color-gold-light) 20%, transparent);
  border: 1px solid rgba(184, 149, 74, 0.35);
}

body.page-contact .contact-channel__body {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

body.page-contact .contact-channel__label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-black-soft);
}

body.page-contact .contact-channel__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.97rem, 2.35vw, 1.26rem);
  color: var(--color-black);
  line-height: 1.28;
}

body.page-contact .contact-channel:focus-visible .contact-channel__icon,
body.page-contact .contact-channel:hover .contact-channel__icon {
  border-color: rgba(184, 149, 74, 0.55);
  background: color-mix(in srgb, var(--color-gold-light) 32%, transparent);
}

body.page-contact .contact-channel:hover .contact-channel__value {
  color: var(--color-gold-deep);
}

body.page-contact .contact-channel:focus-visible {
  outline: 2px solid rgba(184, 149, 74, 0.55);
  outline-offset: 4px;
  border-radius: 10px;
}

body.page-contact .contact-channel__sep {
  align-self: stretch;
  width: 1px;
  min-height: 2.75rem;
  margin-block: auto;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(184, 149, 74, 0.32) 28%,
    rgba(184, 149, 74, 0.32) 72%,
    transparent
  );
}

@media (max-width: 575.98px) {
  body.page-contact .sitek-contact-channels {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
  }

  body.page-contact .contact-channel {
    flex-direction: column;
    gap: 0.65rem;
  }
}

body.page-contact .sitek-contact-aside.sitek-contact-aside--plain {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: clamp(0, 3vw, 0.65rem);
  padding-right: 0;
}

body.page-contact .sitek-contact-aside--plain h3.h5 {
  border-bottom-width: 1px;
  border-bottom-color: rgba(184, 149, 74, 0.22);
  padding-bottom: 0.55rem !important;
  margin-bottom: 0.75rem !important;
}

body.page-contact .sitek-contact-aside--plain .sitek-aside-list li {
  padding-inline: 0;
  margin-inline: 0;
}

@media (hover: hover) and (pointer: fine) {
  body.page-contact .sitek-contact-aside--plain .sitek-aside-list li:hover {
    transform: translateX(0);
    background: color-mix(in srgb, var(--color-bg-alt) 55%, transparent);
  }
}

body.page-contact .sitek-contact-aside--plain .sitek-aside-list__icon {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] body.page-contact .contact-channel__label {
  color: color-mix(in srgb, var(--color-muted) 92%, transparent);
}

html[data-theme="dark"] body.page-contact .contact-channel__value {
  color: rgba(252, 248, 240, 0.96);
}

@media (prefers-reduced-motion: no-preference) {
  body.page-contact .contact-details-inner .contact-info-card {
    transition:
      transform 0.35s cubic-bezier(0.33, 1, 0.68, 1),
      box-shadow 0.35s cubic-bezier(0.33, 1, 0.68, 1);
  }

  @media (hover: hover) and (pointer: fine) {
    body.page-contact .contact-details-inner .contact-info-card:hover {
      transform: translateY(-6px);
      box-shadow:
        0 36px 72px rgba(0, 0, 0, 0.18),
        0 0 0 1px color-mix(in srgb, white 62%, var(--color-surface)) inset,
        0 0 52px -18px color-mix(in srgb, var(--color-accent) 48%, transparent);
    }

    body.page-contact .contact-details-inner .contact-info-card:hover h4 a {
      transform: translateY(-1px);
    }
  }
}

body.page-contact .sitek-form-panel {
  position: relative;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface) 80%, white) 0%,
    var(--color-surface) 52%,
    color-mix(in srgb, var(--color-bg-alt) 82%, var(--color-gold) 10%) 100%
  ) !important;
  border: 1px solid rgba(184, 149, 74, 0.45) !important;
  box-shadow:
    0 32px 78px rgba(0, 0, 0, 0.15),
    0 0 0 1px color-mix(in srgb, white 58%, var(--color-surface)) inset,
    0 0 60px -24px color-mix(in srgb, var(--color-accent) 35%, transparent) !important;
}

body.page-contact .sitek-form-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(
    90deg,
    transparent 8%,
    rgba(184, 149, 74, 0.45) 32%,
    rgba(230, 204, 130, 0.85) 50%,
    rgba(184, 149, 74, 0.45) 68%,
    transparent 92%
  );
  pointer-events: none;
  z-index: 1;
}

body.page-contact .sitek-form-panel .section-heading {
  position: relative;
  z-index: 2;
}

body.page-contact .sitek-form-panel .section-heading .text-muted {
  color: color-mix(in srgb, var(--color-muted) 55%, var(--color-black-soft)) !important;
  font-weight: 500;
}

body.page-contact .contact-page-form .form-control,
body.page-contact .contact-page-form .form-select {
  border: 1px solid color-mix(in srgb, var(--color-black) 16%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface) 92%, white) 0%,
    color-mix(in srgb, var(--color-surface) 94%, var(--color-bg)) 100%
  );
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
  body.page-contact .contact-page-form .form-control:not(:placeholder-shown),
  body.page-contact .contact-page-form .form-select:not([value=""]) {
    border-color: rgba(184, 149, 74, 0.35);
  }
}

body.page-contact .contact-page-form .form-control:focus,
body.page-contact .contact-page-form .form-select:focus {
  border-color: rgba(184, 149, 74, 0.85);
  box-shadow:
    0 0 0 0.2rem rgba(184, 149, 74, 0.22),
    0 10px 28px -16px rgba(143, 111, 47, 0.2);
  background: color-mix(in srgb, var(--color-surface) 88%, white);
}

body.page-contact .sitek-contact-aside {
  background: linear-gradient(
    168deg,
    color-mix(in srgb, var(--color-surface) 78%, white) 0%,
    var(--color-surface) 46%,
    color-mix(in srgb, var(--color-bg-alt) 85%, var(--color-gold) 12%) 100%
  );
  border: 1px solid rgba(184, 149, 74, 0.4);
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 color-mix(in srgb, white 55%, var(--color-surface));
}

body.page-contact .sitek-contact-aside h3 {
  font-weight: 800;
  color: var(--color-black);
  letter-spacing: -0.02em;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid rgba(184, 149, 74, 0.35);
  margin-bottom: 1rem !important;
}

body.page-contact .sitek-aside-list li {
  border-bottom: none;
  padding: 1rem 0.65rem 1rem 0.5rem;
  margin: 0 -0.25rem;
  border-radius: var(--radius-md);
  transition:
    background 0.25s ease,
    transform 0.25s cubic-bezier(0.33, 1, 0.68, 1);
}

body.page-contact .sitek-aside-list li + li {
  border-top: 1px solid rgba(184, 149, 74, 0.16);
}

body.page-contact .sitek-aside-list__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(230, 204, 130, 0.35), rgba(184, 149, 74, 0.12));
  border: 1px solid rgba(184, 149, 74, 0.32);
  font-size: 1.45rem !important;
  box-shadow: 0 8px 22px rgba(143, 111, 47, 0.12);
}

body.page-contact .sitek-aside-list strong {
  color: var(--color-black);
}

body.page-contact .sitek-aside-list .text-muted {
  color: color-mix(in srgb, var(--color-muted) 72%, var(--color-black-soft)) !important;
}

@media (hover: hover) and (pointer: fine) {
  body.page-contact .sitek-aside-list li:hover {
    background: color-mix(in srgb, var(--color-surface) 72%, white);
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-contact .sitek-aside-list li:hover {
    transform: none;
  }
}

body.page-contact .contact-page-form .small.text-muted a {
  color: var(--color-gold-deep) !important;
  font-weight: 700;
}

body.page-contact .contact-page-form .small.text-muted a:hover {
  color: var(--color-black) !important;
}

body.page-sitek-parity .blog-archive--sitek {
  position: relative;
  background: linear-gradient(
    185deg,
    var(--color-bg) 0%,
    rgba(253, 250, 244, 0.92) 42%,
    var(--color-bg-alt) 100%
  );
  border-top: 1px solid rgba(184, 149, 74, 0.12);
}

body.page-sitek-parity .blog-archive--sitek::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: min(40vh, 320px);
  pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% -20%, rgba(201, 162, 39, 0.08), transparent 65%);
}

body.page-sitek-parity .blog-archive--sitek > .divider-sm,
body.page-sitek-parity .blog-archive--sitek > .container {
  position: relative;
  z-index: 1;
}

body.page-sitek-parity .testimonials-stage--sitek {
  position: relative;
  background: linear-gradient(
    180deg,
    var(--color-bg-alt) 0%,
    rgba(253, 250, 244, 0.75) 40%,
    var(--color-bg) 100%
  );
  border-top: 1px solid rgba(184, 149, 74, 0.1);
}

body.page-sitek-parity .testimonials-stage--sitek::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(201, 162, 39, 0.07), transparent 58%);
}

body.page-sitek-parity .testimonials-stage--sitek > .divider-sm,
body.page-sitek-parity .testimonials-stage--sitek > .container,
body.page-sitek-parity .testimonials-stage--sitek > .testimonials-swiper-container {
  position: relative;
  z-index: 1;
}

body.page-sitek-parity .about-us-split {
  border-top: 1px solid rgba(184, 149, 74, 0.12);
  border-bottom: 1px solid rgba(184, 149, 74, 0.1);
}

/* Stronger hero + never Bootstrap “secondary” gray on themed inner pages */
body.page-sitek-parity .breadcrumb-content .page-hero-title {
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.page-sitek-parity .bg-secondary {
  background-color: var(--color-bg-alt) !important;
  background-image: none !important;
  color: inherit;
}

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

.page-hero-banner .page-hero-subline {
  font-size: clamp(0.97rem, 1.95vw, 1.12rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 40rem;
  margin-inline: auto;
  margin-top: clamp(0.45rem, 1.4vw, 0.75rem) !important;
  line-height: 1.55;
  font-weight: 500;
}

/* ---------- Hero follow-up — infinite marquee bar ---------- */
@keyframes sitek-marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes sitek-marquee-sheen {
  0% {
    transform: translate3d(-35%, 0, 0) skewX(-14deg);
    opacity: 0;
  }
  15% {
    opacity: 0.75;
  }
  100% {
    transform: translate3d(240%, 0, 0) skewX(-14deg);
    opacity: 0;
  }
}

@keyframes sitek-marquee-sep-pulse {
  0%,
  100% {
    opacity: 0.38;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.12);
  }
}

.sitek-marquee-bar {
  position: relative;
  isolation: isolate;
  border-top: 1px solid rgba(212, 175, 55, 0.28);
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
  background-color: #0f0e0c;
  background-image:
    linear-gradient(rgba(212, 175, 55, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.045) 1px, transparent 1px),
    radial-gradient(ellipse 100% 85% at 50% 0%, rgba(212, 175, 55, 0.09), transparent 55%),
    linear-gradient(180deg, #161412 0%, #0f0e0c 45%, #0a0908 100%);
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
  background-position: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 12px 36px -22px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.sitek-marquee-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 140% at 14% 50%, rgba(223, 192, 106, 0.14), transparent 58%),
    radial-gradient(ellipse 48% 130% at 88% 50%, rgba(212, 175, 55, 0.1), transparent 56%);
  opacity: 0.65;
}

.sitek-marquee-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #0f0e0c 0%,
    transparent 7%,
    transparent 93%,
    #0f0e0c 100%
  );
}

.sitek-marquee-bar__viewport {
  position: relative;
  z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.sitek-marquee-bar__viewport::after {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  width: min(48vw, 380px);
  left: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(223, 192, 106, 0.25) 40%,
    rgba(255, 236, 190, 0.16) 52%,
    rgba(223, 192, 106, 0.12) 65%,
    transparent 100%
  );
  filter: blur(20px);
  opacity: 0;
  mix-blend-mode: soft-light;
}

.sitek-marquee-bar__track {
  display: flex;
  width: max-content;
  padding-block: clamp(0.58rem, 1.35vw, 0.82rem);
  will-change: transform;
}

.sitek-marquee-bar__list {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0 1.75rem 0 0;
}

.sitek-marquee-bar__item {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.5vw, 1.42rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #e6cf78;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

.sitek-marquee-bar__item::after {
  content: "•";
  display: inline-block;
  margin: 0 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72em;
  color: rgba(230, 207, 120, 0.5);
  opacity: 1;
  line-height: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .sitek-marquee-bar__track {
    animation: sitek-marquee-scroll 38s linear infinite;
  }

  .sitek-marquee-bar__viewport::after {
    animation: sitek-marquee-sheen 4.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  }

  .sitek-marquee-bar__item::after {
    animation: sitek-marquee-sep-pulse 2.6s ease-in-out infinite;
  }

  .sitek-marquee-bar__list .sitek-marquee-bar__item:nth-child(3n + 1)::after {
    animation-delay: 0s;
  }

  .sitek-marquee-bar__list .sitek-marquee-bar__item:nth-child(3n + 2)::after {
    animation-delay: 0.28s;
  }

  .sitek-marquee-bar__list .sitek-marquee-bar__item:nth-child(3n)::after {
    animation-delay: 0.56s;
  }

  @media (hover: hover) and (pointer: fine) {
    .sitek-marquee-bar__track:hover {
      animation-duration: 62s;
    }

    .sitek-marquee-bar:hover .sitek-marquee-bar__viewport::after {
      animation-duration: 3.2s;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .sitek-marquee-bar__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    max-width: 52rem;
    margin-inline: auto;
    justify-content: center;
    row-gap: 0.4rem;
    column-gap: 0;
    padding-inline: 1rem;
  }

  .sitek-marquee-bar__list--clone {
    display: none;
  }

  .sitek-marquee-bar__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .sitek-marquee-bar__viewport::after {
    display: none;
  }

  .sitek-marquee-bar::before {
    opacity: 1;
  }

  .sitek-marquee-bar__item {
    white-space: normal;
    text-align: center;
    text-wrap: balance;
    color: #e6cf78;
  }

  .sitek-marquee-bar__item::after {
    margin: 0 0.85rem;
    animation: none;
    color: rgba(230, 207, 120, 0.55);
  }
}

html[data-theme="dark"] .sitek-marquee-bar {
  border-top-color: rgba(230, 207, 120, 0.32);
  border-bottom-color: rgba(230, 207, 120, 0.2);
  background-color: #0a0908;
  background-image:
    linear-gradient(rgba(230, 207, 120, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230, 207, 120, 0.05) 1px, transparent 1px),
    radial-gradient(ellipse 100% 85% at 50% 0%, rgba(230, 207, 120, 0.1), transparent 55%),
    linear-gradient(180deg, #121110 0%, #0a0908 48%, #050504 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 12px 36px -22px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .sitek-marquee-bar::before {
  background: linear-gradient(90deg, #0a0908 0%, transparent 7%, transparent 93%, #0a0908 100%);
}

html[data-theme="dark"] .sitek-marquee-bar::after {
  background:
    radial-gradient(ellipse 52% 140% at 14% 50%, rgba(230, 207, 120, 0.12), transparent 58%),
    radial-gradient(ellipse 48% 130% at 88% 50%, rgba(230, 207, 120, 0.08), transparent 56%);
  opacity: 0.55;
}

html[data-theme="dark"] .sitek-marquee-bar__item {
  color: #efd885;
}

html[data-theme="dark"] .sitek-marquee-bar__item::after {
  color: rgba(239, 216, 133, 0.52);
  opacity: 1;
  text-shadow: none;
}

html[data-theme="dark"] .sitek-marquee-bar__viewport::after {
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(239, 216, 133, 0.22) 40%,
    rgba(255, 244, 200, 0.12) 52%,
    rgba(239, 216, 133, 0.1) 65%,
    transparent 100%
  );
  mix-blend-mode: soft-light;
  filter: blur(20px);
}

.sitek-eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
}

.sitek-eyebrow--on-photo {
  color: var(--color-gold-deep);
}

.sitek-section-head .sitek-eyebrow {
  margin-bottom: 0.5rem;
}

body.page-sitek-parity .sitek-section-head h2,
body.page-sitek-parity .sitek-section-head h3 {
  font-weight: 800;
}

.sitek-card-bullets {
  padding-left: 1.15rem;
  margin: 0;
  color: var(--color-muted);
}

.sitek-card-bullets li {
  margin-bottom: 0.4rem;
}

.sitek-card-bullets li:last-child {
  margin-bottom: 0;
}

body.page-sitek-parity .sitek-delivery-band {
  background: linear-gradient(180deg, rgba(253, 250, 244, 0.96) 0%, var(--color-bg) 100%);
  border-top: 1px solid rgba(184, 149, 74, 0.12);
  border-bottom: 1px solid rgba(184, 149, 74, 0.08);
}

.sitek-delivery-step {
  height: 100%;
  padding: 1.28rem 1.15rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(184, 149, 74, 0.2);
  background: var(--color-surface);
  box-shadow: 0 14px 42px rgba(20, 17, 13, 0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .sitek-delivery-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 52px rgba(143, 111, 47, 0.12);
  }
}

.sitek-delivery-step__num {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(184, 149, 74, 0.38);
  display: block;
  margin-bottom: 0.85rem;
}

.sitek-delivery-step__title {
  letter-spacing: 0.1em;
  font-weight: 800;
}

.sitek-blog-featured__row {
  border-radius: clamp(18px, 3vw, 26px);
  overflow: hidden;
  border: 1px solid rgba(184, 149, 74, 0.22);
  box-shadow: 0 28px 75px rgba(20, 17, 13, 0.1);
}

.sitek-blog-featured__media {
  height: min(300px, 48vw);
  min-height: 200px;
}

@media (min-width: 992px) {
  .sitek-blog-featured__media {
    height: 100%;
    min-height: 300px;
  }
}

.sitek-blog-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sitek-blog-featured__body {
  padding: clamp(1.75rem, 4vw, 2.85rem);
  background: var(--color-surface);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sitek-pill {
  display: inline-flex;
  padding: 0.42rem 1rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid rgba(184, 149, 74, 0.28);
  background: rgba(253, 250, 244, 0.65);
  color: var(--color-black-soft);
  cursor: default;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.sitek-pill.is-active {
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  color: var(--color-black);
  border-color: rgba(143, 111, 47, 0.25);
}

.sitek-text-link {
  color: var(--color-gold-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.sitek-text-link:hover {
  color: var(--color-black);
}

.sitek-text-link .bi {
  font-size: 0.85em;
  opacity: 0.85;
}

.sitek-contact-aside {
  position: sticky;
  top: 5.5rem;
  padding: clamp(1.35rem, 3vw, 1.9rem);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(184, 149, 74, 0.22);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.sitek-map-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(184, 149, 74, 0.2);
  aspect-ratio: 16 / 10;
}

.sitek-map-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 200px;
  border: 0;
  display: block;
}

.sitek-aside-list li {
  display: flex;
  gap: 0.85rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(184, 149, 74, 0.12);
}

.sitek-aside-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sitek-aside-list__icon {
  flex-shrink: 0;
  font-size: 1.55rem !important;
  color: var(--color-gold-deep);
}

.sitek-field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.38rem;
  color: var(--color-black-soft);
}

.sitek-faq-mini .accordion-item {
  border: 1px solid rgba(184, 149, 74, 0.18);
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  margin-bottom: 0.45rem;
  background: rgba(253, 250, 244, 0.55);
}

.sitek-faq-mini .accordion-button {
  font-size: 0.88rem;
  font-weight: 700;
  padding-block: 0.85rem;
  background: rgba(253, 250, 244, 0.9);
  box-shadow: none !important;
}

.sitek-faq-mini .accordion-button:not(.collapsed) {
  background: rgba(212, 188, 122, 0.15);
  color: var(--color-gold-deep);
}

@media (max-width: 991.98px) {
  .sitek-contact-aside {
    position: relative;
    top: auto;
  }
}


/* =============================================================================
   Dark mode — utilities & hardcoded light surfaces
   (palette variables: :root + html[data-theme="dark"] + prefers-color-scheme)
   ============================================================================= */

html[data-theme="dark"] .header-area {
  background: rgba(24, 21, 17, 0.94);
}

html[data-theme="dark"] .navbar-toggler {
  border-color: rgba(212, 180, 92, 0.45);
  color: var(--color-black);
}

html[data-theme="dark"] .theme-btn {
  background: var(--color-surface);
  border-color: rgba(212, 180, 92, 0.42);
  color: var(--color-black);
}

html[data-theme="dark"] .theme-btn:hover {
  background: var(--color-bg-alt);
}

html[data-theme="dark"] .header-area.header-parity,
html[data-theme="dark"] body.page-home-parity .header-parity,
html[data-theme="dark"] body.page-sitek-parity .header-parity {
  background: rgba(24, 21, 17, 0.96) !important;
  border-bottom-color: rgba(212, 180, 92, 0.24) !important;
}

html[data-theme="dark"] .header-area.header-area--project-detail,
html[data-theme="dark"] body.page-sitek-parity.page-project-detail-mb .header-area.header-area--project-detail {
  background: rgba(24, 21, 17, 0.96) !important;
}

html[data-theme="dark"] header.sticky-top.shadow-sm.bg-white,
html[data-theme="dark"] .bg-white {
  background-color: var(--color-surface) !important;
}

html[data-theme="dark"] .shadow-sm {
  box-shadow: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.42) !important;
}

html[data-theme="dark"] .hero-trust-avatar {
  border-color: rgba(45, 39, 33, 0.95);
}

html[data-theme="dark"] body.page-sitek-parity .sitek-form-panel {
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(242, 226, 168, 0.08) inset;
}

html[data-theme="dark"] body.page-sitek-parity .sitek-services-stage::before {
  background:
    radial-gradient(ellipse 85% 50% at 50% -10%, rgba(226, 186, 74, 0.12), transparent 55%),
    radial-gradient(ellipse 55% 42% at 100% 95%, rgba(184, 149, 74, 0.08), transparent 50%),
    linear-gradient(
      180deg,
      var(--color-bg) 0%,
      rgba(232, 216, 178, 0.04) 50%,
      var(--color-bg) 100%
    );
}

html[data-theme="dark"] body.page-sitek-parity .sitek-contact-stage {
  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    rgba(212, 188, 122, 0.06) 35%,
    var(--color-bg) 100%
  );
}

html[data-theme="dark"] body.page-sitek-parity .blog-archive--sitek {
  background: linear-gradient(
    185deg,
    var(--color-bg) 0%,
    var(--color-bg-alt) 42%,
    var(--color-bg) 100%
  );
}

html[data-theme="dark"] body.page-sitek-parity .testimonials-stage--sitek {
  background: linear-gradient(
    180deg,
    var(--color-bg-alt) 0%,
    rgba(36, 32, 26, 0.85) 40%,
    var(--color-bg) 100%
  );
}

html[data-theme="dark"] .sitek-faq-mini .accordion-item {
  background: rgba(46, 41, 34, 0.55);
}

html[data-theme="dark"] .sitek-faq-mini .accordion-button {
  background: rgba(36, 32, 26, 0.82);
  color: var(--color-black-soft);
}

html[data-theme="dark"] .sitek-faq-mini .accordion-button:not(.collapsed) {
  background: rgba(212, 188, 122, 0.12);
}

html[data-theme="dark"] body.page-home-parity .mission-parity-intro {
  background: linear-gradient(
    180deg,
    rgba(24, 21, 17, 0.75) 0%,
    var(--color-bg) 100%
  );
}

html[data-theme="dark"] .testimonial-slide-panel {
  border-color: rgba(212, 188, 122, 0.26);
  background:
    radial-gradient(
      ellipse 125% 90% at 50% -5%,
      rgba(212, 188, 122, 0.12),
      transparent 52%
    ),
    linear-gradient(
      154deg,
      rgba(36, 32, 27, 0.98) 0%,
      rgba(27, 23, 18, 0.88) 45%,
      rgba(22, 19, 15, 0.72) 100%
    );
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.25),
    0 28px 72px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -36px 64px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .testimonials-swiper-nav {
  background: rgba(36, 32, 27, 0.92);
  border-color: rgba(212, 188, 122, 0.45);
  color: var(--color-black-soft);
}

html[data-theme="dark"] .faq-accordion .accordion-button {
  background: var(--color-bg-alt);
  color: var(--color-black);
}

html[data-theme="dark"] .faq-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(90deg, rgba(212, 188, 122, 0.15), transparent);
}

html[data-theme="dark"] body.page-home-parity .hero-parity-mega {
  background: linear-gradient(180deg, transparent 65%, rgba(30, 26, 21, 0.38) 100%),
    var(--color-bg);
}

html[data-theme="dark"] body.page-home-parity .faq-parity {
  background: linear-gradient(
    182deg,
    rgba(36, 32, 27, 0.55) 0%,
    var(--color-bg) 55%
  );
}

html[data-theme="dark"] body.page-home-parity .faq-parity-visual {
  background: linear-gradient(
    138deg,
    var(--color-surface),
    rgba(58, 50, 42, 0.45)
  );
}

html[data-theme="dark"] body.page-home-parity .faq-parity-img {
  box-shadow:
    0 24px 52px rgba(0, 0, 0, 0.45),
    0 0 0 8px rgba(42, 36, 30, 0.55);
}

html[data-theme="dark"] body.page-home-parity .parity-menu-trigger.sideMenuButton {
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 245, 214, 0.12) inset;
}