/* ═══════════════════════════════════════════════════════════
   HakimovCodes — integration layer on top of the Reevan template.
   The template ships a fully static design; these rules only
   size/colour the bits that now carry real, dynamic content
   (icons rendered as inline SVG, uploaded images, forms, the
   success modal, and the inner-page banners the template
   itself never shipped a page for).
   ═══════════════════════════════════════════════════════════ */

:root {
  --ree-accent: #ff5b2e;
  --ree-ink: #30303c;
  --ree-muted: #6d6d78;
  --ree-border: rgba(48, 48, 60, 0.1);
  --ree-header-h: 85px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: 10000;
}

.skip-link:focus {
  left: 20px;
  top: 20px;
  padding: 10px 16px;
  background: #fff;
  color: var(--ree-ink);
  border-radius: 8px;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 30%);
}

/* ── Brand mark (logo image or text fallback) ─────────────── */
.brand-mark-text {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--ree-ink);
  letter-spacing: -0.02em;
}

/* The footer has a dark navy background — the header does not. */
.footer-ree-lg .brand-mark-text {
  color: #fff;
}

/* ── Inner-page banner (About / Projects / Services / Contact) ── */
.page-head {
  padding: calc(var(--ree-header-h) + 70px) 0 60px;
  background: #fbf1ef;
  text-align: center;
}

.page-head .sub-heading {
  color: var(--ree-accent);
}

.page-head h1 {
  font-size: 46px;
  line-height: 1.15;
  margin-top: 10px;
}

.page-head p {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--ree-muted);
}

@media (max-width: 767px) {
  .page-head {
    padding: calc(var(--ree-header-h) + 40px) 0 40px;
  }

  .page-head h1 {
    font-size: 32px;
  }
}

/* ── Service icon (inline SVG dropped into the template's icon slot) ── */
.ree-card-img svg,
.detail-icon svg {
  width: 100%;
  height: 100%;
  color: var(--ree-accent);
}

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

.detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 15px 30px -10px rgb(0 0 0 / 14%);
  padding: 14px;
  margin-bottom: 20px;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  list-style: none;
  padding: 0;
}

.chip-list li {
  font-size: 13px;
  font-weight: 500;
  color: var(--ree-ink);
  background: #f7f7f7;
  border-radius: 100px;
  padding: 6px 14px;
}

/* ── Portfolio filter pills ───────────────────────────────── */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.filter {
  opacity: 0.55;
}

.filter.is-active {
  opacity: 1;
}

/* ── Portfolio grid (full listing, as opposed to the home carousel) ── */
.work-grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.work-tile {
  display: block;
  color: inherit;
}

.work-tile.is-hidden {
  display: none;
}

.work-tile .work-art {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.work-tile .work-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-tile .mock-frame {
  height: 100%;
}

.work-tile .work-details {
  padding-top: 18px;
}

/* ── Decorative "no image uploaded" artwork frame ─────────── */
.mock-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #fbf1ef;
  aspect-ratio: 4 / 3;
}

.mock-frame.is-dark {
  background: #1c1c24;
}

.mock-frame .mock-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 5px;
  padding: 10px 12px;
  z-index: 2;
}

.mock-frame .mock-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(48 48 60 / 20%);
  display: block;
}

.mock-frame svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Work-teaser carousel card (home page) ────────────────── */
.fwb-main-x .work-art {
  border-radius: 14px;
  overflow: hidden;
}

.fwb-main-x .work-art img {
  width: 100%;
  display: block;
}

/* ── Detail pages (service / portfolio single) ────────────── */
.detail-page {
  padding: calc(var(--ree-header-h) + 60px) 0 100px;
}

.detail-crumb {
  font-size: 14px;
  color: var(--ree-muted);
  margin-bottom: 24px;
}

.detail-crumb a {
  color: var(--ree-accent);
}

.detail-head h1 {
  font-size: 44px;
  margin: 14px 0 16px;
}

.detail-lede {
  font-size: 19px;
  line-height: 30px;
  color: var(--ree-muted);
  max-width: 720px;
}

.detail-media {
  margin: 40px 0;
  border-radius: 16px;
  overflow: hidden;
}

.detail-media .work-art,
.detail-media img {
  width: 100%;
  display: block;
}

.detail-body {
  max-width: 720px;
}

.detail-body p {
  font-size: 18px;
  line-height: 30px;
  color: #45454f;
  margin-bottom: 20px;
}

.detail-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

/* ── Process steps (merged onto the top of the contact page) ── */
.process-list {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  counter-reset: process;
}

.process-step {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 28px 0;
  border-top: 1px solid var(--ree-border);
}

.process-step:first-child {
  border-top: none;
}

.process-num {
  flex: 0 0 auto;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 34px;
  color: var(--ree-accent);
  min-width: 60px;
}

.process-body h3 {
  font-size: 22px;
  margin-bottom: 8px;
}

.process-body p {
  color: var(--ree-muted);
  font-size: 16px;
  line-height: 26px;
  margin: 0;
}

.process-time {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--ree-muted);
  white-space: nowrap;
}

@media (max-width: 575px) {
  .process-step {
    flex-wrap: wrap;
  }

  .process-time {
    margin-left: 0;
  }
}

/* ── Contact form ──────────────────────────────────────────── */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--ree-ink);
}

.field-row .field {
  margin-bottom: 20px;
}

.field-error {
  display: none;
  font-size: 13px;
  color: #ff8a6b;
  margin-top: 6px;
}

.field-error.is-visible {
  display: block;
}

.field.has-error input,
.field.has-error textarea,
.field.has-error select {
  border-color: #ff5b2e !important;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ree-muted);
  margin-bottom: 20px;
  cursor: pointer;
}

.checkbox input {
  margin-top: 3px;
}

.checkbox a {
  color: var(--ree-ink);
  text-decoration: underline;
}

/* The template's default .sub-heading colour (orange) is unreadable on the
   contact section's own orange backdrop — force it white there. */
.home-contact .sub-heading {
  color: #fff;
}

/* The template hardcodes exactly two 40%-width contact cards; ours is a
   CMS-driven list of arbitrary length, so let it wrap instead. */
.contact-infos {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.contact-infos .c-infot {
  width: auto;
  flex: 1 1 220px;
  margin-left: 0 !important;
}

.contact-infos .c-infot-static {
  display: inline-flex;
  align-items: center;
  background: #fff;
  padding: 20px;
  border-radius: 14px;
  width: 100%;
  color: var(--ree-ink);
}

.contact-info-icon {
  display: inline-flex;
  margin-right: 10px;
  color: var(--ree-accent);
}

.contact-info-icon svg {
  width: 18px;
  height: 18px;
}

.form-status {
  min-height: 20px;
  font-size: 14px;
  margin-top: 14px;
}

.form-status.is-error {
  color: #ff8a6b;
}

.cf-turnstile {
  margin-bottom: 20px;
}

.w-100 {
  width: 100%;
}

/* ── Success modal ─────────────────────────────────────────── */
.swal-alert {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.swal-alert.is-open {
  display: flex;
}

.swal-alert__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 22, 0.55);
  backdrop-filter: blur(4px);
}

.swal-alert__card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 18px;
  padding: 44px 36px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 35%);
}

.swal-alert__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #eafff0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swal-alert__check {
  width: 34px;
  height: 34px;
}

.swal-alert__circle {
  stroke: #2fbf6a;
  stroke-width: 2;
}

.swal-alert__tick {
  stroke: #2fbf6a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.swal-alert__title {
  font-size: 22px;
  margin-bottom: 10px;
}

.swal-alert__text {
  font-size: 16px;
  color: var(--ree-muted);
  margin-bottom: 6px;
}

.swal-alert__hint {
  font-size: 14px;
  color: #9a9aa4;
  margin-bottom: 24px;
}

.swal-alert__btn {
  border: none;
  cursor: pointer;
}

/* ── Marquee-style brand strip (home hero, text-only brands) ── */
.brand-strip-label {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ree-muted);
}

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

.brand-strip span {
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ree-ink);
  opacity: 0.55;
}

/* ── Hero layout — stop CSS Grid growing past the viewport ──
   .home-hero-a is display:grid with an implicit auto-sized track. An
   auto track sizes to the max-content contribution of its item, so the
   Bootstrap .container (width:100%) was sizing itself to fit the
   headline's unbroken word run instead of wrapping inside the real
   viewport width — causing ~70px of horizontal overflow / a clipped
   H1 and secondary CTA on mobile (375px) on both locales. Giving the
   track an explicit 1fr with a 0 minimum makes it fill the section's
   actual width instead of growing to fit the text. ── */
.home-hero-a {
  grid-template-columns: minmax(0, 1fr);
}

.home-hero-a > .container {
  min-width: 0;
}

/* The two hero buttons (.btn-sets, display:flex, no wrap) stayed on one
   row at every width and pushed ~22px past the 375px viewport once the
   grid-track fix above stopped the headline from doing it instead. */
@media (max-width: 575px) {
  .btn-sets {
    flex-wrap: wrap;
    row-gap: 14px;
  }
}

/* ── Hero stat counters ───────────────────────────────────── */
.hero-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
}

.hero-stats-row h3 {
  font-size: 32px;
  font-weight: 700;
  color: var(--ree-ink);
}

.hero-stats-row p {
  margin: 0;
  font-size: 14px;
  color: var(--ree-muted);
}

/* ── About stat tiles ─────────────────────────────────────── */
.about-stats-grid {
  row-gap: 20px;
}

.about-stats-grid .stats-box {
  min-height: auto;
}

/* ── Footer socials rendered as inline SVG (currentColor) ──── */
.social-linkz svg {
  width: 16px;
  height: 16px;
}

/* ── Services mega menu (header nav) ─────────────────────────
   The "Services" nav item opens a mega menu of every active
   service, each with its inline SVG icon, pulled straight from
   ServiceModule → Service. ── */
.services-mega-menu .menu-block-set {
  padding: 30px 0;
}

.services-mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 24px;
}

.service-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  color: inherit;
  transition: background-color 0.2s ease;
}

.service-mega-item:hover {
  background: rgba(255, 91, 46, 0.06);
}

.service-mega-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fbf1ef;
  color: var(--ree-accent);
  padding: 9px;
}

.service-mega-icon svg {
  width: 100%;
  height: 100%;
}

.service-mega-title {
  display: block;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ree-ink);
  margin-bottom: 4px;
}

.service-mega-desc {
  display: block;
  font-size: 13px;
  line-height: 20px;
  color: var(--ree-muted);
}

.services-mega-footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ree-border);
  text-align: center;
}

/* ── Technologies section (tabs of icon + name) ──────────────── */
.tech-tabs .nav-link {
  cursor: pointer;
}

.tech-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 24px;
  justify-content: center;
}

.tech-icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  color: inherit;
}

.tech-icon-tile .iwt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}

.tech-icon-tile .iwt-icon img {
  max-width: 100%;
  max-height: 100%;
}

.tech-icon-tile p {
  margin: 0;
  font-size: 14px;
  color: var(--ree-ink);
}

/* ── Industries section (icon + label grid) ──────────────────── */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.industry-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 14px;
  background: #fbf1ef;
}

.industry-tile .industry-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
}

.industry-tile .industry-icon img {
  width: 100%;
  height: 100%;
}

.industry-tile h4 {
  margin: 0;
  font-size: 16px;
}

/* ── Blog cards & detail page ─────────────────────────────────── */
.blog-card-img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
}

.blog-card-img.is-placeholder {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background: linear-gradient(135deg, #fbf1ef, #f3e6ff);
}

.blog-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.blog-tag-list li {
  font-size: 12px;
  font-weight: 500;
  color: var(--ree-accent);
  background: #fbf1ef;
  border-radius: 100px;
  padding: 5px 12px;
}

.blog-cover {
  border-radius: 16px;
  overflow: hidden;
  margin: 40px 0;
}

.blog-cover img {
  width: 100%;
  display: block;
}

/* ------------------------------------------------------------------
   Services mega menu — icon rows
   ------------------------------------------------------------------ */

.mega-col-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ree-accent, #ff5b2e);
  margin: 0 0 14px;
}

.menu-li-icons {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-li-icons li {
  margin-bottom: 4px;
}

.menu-li-icons li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 10px;
  line-height: 1.35;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.menu-li-icons li a:hover {
  background: rgba(255, 91, 46, 0.08);
  transform: translateX(2px);
}

.menu-ico {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(18, 24, 47, 0.08);
}

.menu-ico img,
.menu-ico svg {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.menu-ico .ree-inline-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--ree-accent, #ff5b2e);
}

.menu-ico-label {
  flex: 1 1 auto;
  min-width: 0;
}

.dropdown-item-all {
  font-weight: 600;
  color: var(--ree-accent, #ff5b2e);
}

/* Industry / technology tiles fed from the CMS */

.industry-workfor img,
.industry-workfor .ree-inline-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.tech-logo-img {
  max-width: 100%;
  max-height: 46px;
  object-fit: contain;
}

/* ------------------------------------------------------------------
   FAQ — native <details> accordion
   ------------------------------------------------------------------ */

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-item {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(18, 24, 47, 0.06);
  overflow: hidden;
}

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  font-weight: 600;
  font-size: 16px;
  color: #12182f;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  position: relative;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ree-accent, #ff5b2e);
  transform: translateY(-50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.faq-icon::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq-item[open] .faq-icon::after {
  opacity: 0;
  transform: translateY(-50%) rotate(0deg);
}

.faq-answer {
  padding: 0 24px 22px;
  color: #56607a;
}

.faq-answer p {
  margin: 0;
}

/* ------------------------------------------------------------------
   Pricing cards
   ------------------------------------------------------------------ */

.price-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.price-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--ree-accent, #ff5b2e);
  border-radius: 100px;
  padding: 4px 10px;
}

.price-card .price {
  font-size: 16px;
  color: #56607a;
}

.price-card .price span {
  font-size: 34px;
  font-weight: 700;
  color: #12182f;
}

.price-card.price-featured {
  outline: 2px solid var(--ree-accent, #ff5b2e);
}

.price-time {
  font-size: 13px;
  color: #7a839b;
}

.process-duration {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ree-accent, #ff5b2e);
}

.detail-crumb {
  font-size: 13px;
  margin-bottom: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.blog-cover-placeholder {
  display: block;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #ffe8e0, #eef2ff);
}

.tech-icon-box {
  text-align: center;
  padding: 18px 8px;
}

.tech-icon-box p {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 500;
}

.appscreen-set {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.iwt-block {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}

.iwt-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.iwt-text h5 {
  margin: 0;
  font-size: 15px;
}

/* ------------------------------------------------------------------
   Testimonials
   ------------------------------------------------------------------ */

.testimonial-card blockquote {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #56607a;
}

.testimonial-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ree-accent, #ff5b2e);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.testimonial-card .star-rating-review .checked {
  color: #f5b544;
}

/* ------------------------------------------------------------------
   Dark masthead pages
   The template header is transparent until it sticks, so on pages whose
   banner is dark (.head-dez3) the brand mark and the header CTA have to
   invert with it — the template only ships the rule for nav links.
   ------------------------------------------------------------------ */

.ree-header.header-dark .brand-mark-text {
  color: #fcfcfd;
}

.ree-header.header-dark.sticky .brand-mark-text {
  color: var(--ree-ink);
}

.ree-header.header-dark .ree-nav-cta .ree-btn-grdt2 {
  background: transparent;
  color: #fcfcfd;
  border: 1px solid rgba(252, 252, 253, 0.6);
  box-shadow: none;
}

.ree-header.header-dark .ree-nav-cta .ree-btn-grdt2:hover {
  background: var(--ree-accent);
  border-color: var(--ree-accent);
  color: #fff;
}

.ree-header.header-dark.sticky .ree-nav-cta .ree-btn-grdt2 {
  background: var(--ree-accent);
  color: #fff;
  border: 1px solid var(--ree-accent);
}

/* ── Mobile menu toggle — widen the tap target ──────────────
   The template never gives a.toggle its own box size, so it was only
   ~30px wide (its drawn hamburger-icon width) against a 48px height —
   under the ~44px minimum recommended touch-target width. Padding
   widens the hit area without changing how the icon itself looks. ── */
.mobile-menu2 .navm- a.toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
}

/* The mobile trigger and its icon button sit on the same dark band. */
.ree-header.header-dark .mobile-menu2 .ree-btn2 {
  color: #fcfcfd;
}

.ree-header.header-dark:not(.sticky) .toggle span,
.ree-header.header-dark:not(.sticky) .toggle span::before,
.ree-header.header-dark:not(.sticky) .toggle span::after {
  background: #fcfcfd;
}

/* Banner copy on the dark masthead. */
.header-title.head-dez3 .detail-crumb,
.header-title.head-dez3 .detail-crumb span {
  color: rgba(252, 252, 253, 0.65);
}

.header-title.head-dez3 .detail-crumb a {
  color: var(--ree-accent);
}

.header-title.head-dez3 .sub-heading {
  color: var(--ree-accent);
}

.header-title.head-dez3 {
  padding-bottom: 90px;
}

/* ------------------------------------------------------------------
   Client logos / partners / review slider fallbacks
   ------------------------------------------------------------------ */

.brand-logo-text {
  display: inline-block;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #9aa1b4;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.clients-logos .brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
}

.clients-logos .brand-logo img {
  max-height: 46px;
  width: auto;
  object-fit: contain;
}

.clients-logos ul li p {
  font-size: 14px;
  color: var(--ree-muted);
  margin-top: 8px;
}

.hero-brands .brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
}

.hero-brands .brand-logo img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

.reviewers-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--ree-accent, #ff5b2e);
  color: #fff;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 22px;
}

.location-block- .loc-icon-nam img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

/* ------------------------------------------------------------------
   Language switcher
   ------------------------------------------------------------------ */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(48, 48, 60, 0.06);
}

.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ree-muted, #6d6d78);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-switch__item:hover {
  color: var(--ree-accent, #ff5b2e);
}

.lang-switch__item.is-active {
  background: #fff;
  color: var(--ree-accent, #ff5b2e);
  box-shadow: 0 2px 8px rgba(18, 24, 47, 0.1);
}

/* On the dark masthead the control inverts with the rest of the header. */
.ree-header.header-dark:not(.sticky) .lang-switch {
  background: rgba(252, 252, 253, 0.12);
}

.ree-header.header-dark:not(.sticky) .lang-switch__item {
  color: rgba(252, 252, 253, 0.75);
}

.ree-header.header-dark:not(.sticky) .lang-switch__item.is-active {
  background: rgba(252, 252, 253, 0.92);
  color: var(--ree-accent, #ff5b2e);
}

.bottom-nav-lang {
  justify-content: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ree-border);
}

/* In the mobile drawer the pill sat at 12px/low-contrast gray for the
   inactive language, easy to miss below the nav list — size it up to
   match the rest of the drawer's touch targets. */
.bottom-nav-lang .lang-switch {
  padding: 4px;
}

.bottom-nav-lang .lang-switch__item {
  min-width: 44px;
  height: 36px;
  font-size: 14px;
  color: var(--ree-ink);
}

.bottom-nav-lang .lang-switch__item.is-active {
  color: var(--ree-accent);
}

/* The header CTA area now holds the language control as well as the button. */
.ree-nav-cta > ul {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ree-nav-cta > ul > li {
  display: flex;
  align-items: center;
}

/* ── Cookie notice ─────────────────────────────────────────── */
.cookie-bar {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 10040;
  background: #fff;
  border: 1px solid var(--ree-border);
  border-radius: 16px;
  box-shadow: 0 20px 45px -18px rgb(0 0 0 / 30%);
  padding: 18px 22px;
}

.cookie-bar[hidden] {
  display: none;
}

.cookie-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
}

.cookie-bar__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ree-muted);
  margin: 0;
}

.cookie-bar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-bar__btn {
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.cookie-bar__btn:hover {
  opacity: 0.85;
}

.cookie-bar__btn--solid {
  border: 1px solid var(--ree-accent);
  background: var(--ree-accent);
  color: #fff;
}

.cookie-bar__btn--ghost {
  border: 1px solid var(--ree-border);
  background: transparent;
  color: var(--ree-ink);
}

@media (max-width: 767px) {
  .cookie-bar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 16px 18px;
  }

  .cookie-bar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .cookie-bar__actions {
    justify-content: stretch;
  }

  .cookie-bar__btn {
    flex: 1;
  }
}