/* ==================================================================
   Geo Manpower — Theme Layer
   Design-system overrides sitting on top of the base Constra/Bootstrap
   stylesheet. Everything Geo-Manpower-specific lives here so the
   legacy template CSS never has to be hand-edited.
   ================================================================== */

:root {
  --gm-ink: #14171b;          /* headings / near-black */
  --gm-navy: #1b2129;          /* header / footer surface */
  --gm-navy-soft: #242c36;     /* secondary dark surface */
  --gm-body: #5b6470;          /* body copy */
  --gm-muted: #8a93a1;         /* muted text on dark */
  --gm-bronze: #c1904f;        /* primary accent (icons, underlines, non-text UI) */
  --gm-bronze-dark: #9f7238;   /* accent hover / deep */
  --gm-bronze-soft: #f4e9d8;   /* accent tint background */
  --gm-bronze-btn: #946a2c;    /* button fill — darkened from --gm-bronze so white text clears WCAG AA (4.5:1) */
  --gm-bronze-btn-dark: #7a5424;
  --gm-cream: #f8f6f2;         /* warm off-white section bg */
  --gm-border: #e7e2d8;
  --gm-white: #ffffff;
  --primary-accent: var(--gm-bronze);
  --gm-shadow-sm: 0 2px 10px rgba(20, 23, 27, 0.06);
  --gm-shadow-md: 0 14px 34px rgba(20, 23, 27, 0.10);
  --gm-shadow-lg: 0 24px 60px rgba(20, 23, 27, 0.16);
  --gm-radius: 10px;
}

/* -------------------- Base type & color refresh -------------------- */
body { color: var(--gm-body); }
h1, h2, h3, h4, h5, h6 { color: var(--gm-ink); letter-spacing: -0.2px; }

section.bg-cream { background: var(--gm-cream); }

.section-title {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--gm-bronze-dark);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-sub-title {
  font-size: 30px;
  text-transform: none;
  letter-spacing: -0.5px;
  margin-bottom: 0;
}
.section-sub-title:after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  background: var(--gm-bronze);
  margin: 18px auto 0;
  border-radius: 3px;
}
.text-left .section-sub-title:after,
.section-heading-left .section-sub-title:after { margin: 18px 0 0; }

/* -------------------------- Buttons -------------------------- */
.btn-primary, .btn-dark, .btn-outline-light {
  border-radius: 6px;
  letter-spacing: 0.8px;
  box-shadow: var(--gm-shadow-sm);
}
.btn-primary {
  background: linear-gradient(135deg, var(--gm-bronze-btn) 0%, var(--gm-bronze-btn-dark) 100%);
  border: 1px solid transparent;
}
.btn-primary:hover, .btn-primary:hover:active, .btn-primary:hover:focus {
  background: var(--gm-ink) !important;
  transform: translateY(-2px);
  box-shadow: var(--gm-shadow-md);
}
.btn-primary.border {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
}
.btn-primary.border:hover { background: var(--gm-white); color: var(--gm-ink) !important; border-color: var(--gm-white) !important; }
.btn-dark { background: var(--gm-ink); }
.btn-dark:hover { background: var(--gm-bronze) !important; transform: translateY(-2px); }

/* -------------------------- Header -------------------------- */
.header-one .bg-white { background: var(--gm-white) !important; }
.header-one .logo-area { padding: 18px 0; }

.brand-mark { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark__icon { flex: 0 0 auto; }
.brand-mark__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-mark__name {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.5px;
  color: var(--gm-ink);
  white-space: nowrap;
}
.brand-mark__name span { color: var(--gm-bronze-dark); }
.brand-mark__tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gm-muted);
  margin-top: 3px;
}
.footer .brand-mark__name { color: var(--gm-white); }
.footer .brand-mark__tag { color: rgba(255,255,255,0.45); }

ul.top-info-box li { border-right-color: rgba(0,0,0,0.08); }
/* The template lays these out with floats above the mobile breakpoint,
   which can wrap unpredictably (an item drops and stacks under its
   neighbour) once the row gets tight — e.g. Dutch labels running a bit
   longer than the English ones. A real flex row wraps as whole items
   instead, so it always stays legible. */
@media (min-width: 1200px) {
  ul.top-info-box {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    float: none;
  }
  /* Bootstrap's container is fixed at 1140px from 1200px all the way up —
     it never grows on wider screens — so the four items need to actually
     fit in that same ~825px column at every desktop width, not just a
     narrow band. Tightened once here, with real margin, rather than a
     range-limited patch. */
  ul.top-info-box li {
    float: none;
    padding-right: 0;
    margin-right: 6px;
    border-right: 0;
  }
  ul.top-info-box li:last-child { margin-right: 0; }
  .info-box { gap: 5px; }
  .info-box .info-box-icon { width: 24px; height: 24px; flex: 0 0 24px; }
  .info-box .info-box-icon .gm-icon { width: 12px; height: 12px; }
  .info-box-title { font-size: 9px; letter-spacing: 0.3px; }
  .info-box-subtitle { font-size: 11.5px; }
  .header-get-a-quote .btn-primary { padding: 9px 14px !important; font-size: 11.5px; }
}
.info-box { display: flex; align-items: center; gap: 10px; }
.info-box .info-box-icon {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  background: var(--gm-bronze-soft);
  color: var(--gm-bronze-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.info-box-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #9aa1ab; margin-bottom: 2px; }
.info-box-subtitle { font-size: 14px; font-weight: 700; color: var(--gm-ink); }

.site-navigation { position: sticky; top: 0; z-index: 1000; background: var(--gm-navy) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.18); }
.header-one, .header-one .site-navigation { background: var(--gm-navy); }
ul.navbar-nav > li > a { font-weight: 600; letter-spacing: 0.4px; font-size: 14px; }
ul.navbar-nav > li:hover > a, ul.navbar-nav > li.active > a { color: var(--gm-bronze) !important; }

/* ---------------------- Banner / hero carousel ---------------------- */
html { scroll-behavior: smooth; }
#ts-service-area, #project-area, #faq { scroll-margin-top: 90px; }

.banner-carousel-item:before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,15,0.05) 0%, rgba(10,12,15,0.02) 35%, rgba(10,12,15,0.22) 100%);
  pointer-events: none;
  z-index: 1;
}
.banner-carousel-item .slider-content {
  position: relative;
  z-index: 2;
}
.slide-title, .slide-sub-title, .slide-title-box, .slider-description {
  text-shadow: 0 2px 18px rgba(0,0,0,0.75), 0 1px 4px rgba(0,0,0,0.8), 0 0 2px rgba(0,0,0,0.9);
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  padding: 7px 18px;
  border-radius: 40px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 22px;
  backdrop-filter: blur(2px);
}
.hero-eyebrow i { color: var(--gm-bronze); }

/* -------------------------- Call to action strip -------------------------- */
.call-to-action-box .action-style-box {
  background: linear-gradient(120deg, var(--gm-navy) 0%, var(--gm-navy-soft) 100%);
  border-radius: var(--gm-radius);
  padding: 42px 46px;
}
.call-to-action-box .action-title { color: #fff; margin: 0; font-size: 21px; text-transform: none; }

/* -------------------------- Service cards -------------------------- */
.service-card {
  height: 100%;
  background: var(--gm-white);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius);
  padding: 34px 30px;
  transition: 280ms ease;
  box-shadow: var(--gm-shadow-sm);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--gm-shadow-lg);
  border-color: transparent;
}
.service-card__icon {
  width: 58px; height: 58px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gm-bronze-soft), #fff);
  color: var(--gm-bronze-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
}
.service-card h3 { font-size: 18px; margin-bottom: 10px; text-transform: none; letter-spacing: 0; }
.service-card p { margin: 0; font-size: 14.5px; }

/* -------------------------- Stat counters -------------------------- */
.stat-strip { background: var(--gm-navy); border-radius: var(--gm-radius); }
.stat-item { text-align: center; padding: 38px 10px; }
.stat-item .stat-num {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 40px;
  color: var(--gm-bronze);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-item .stat-label { color: rgba(255,255,255,0.75); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }

/* -------------------------- Project cards -------------------------- */
.project-card { position: relative; border-radius: var(--gm-radius); overflow: hidden; box-shadow: var(--gm-shadow-sm); margin-bottom: 30px; }
.project-card .project-card__img { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #101317; }
.project-card .project-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.project-card:hover .project-card__img img { transform: scale(1.08); }
.project-card .project-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,18,22,0.92) 0%, rgba(15,18,22,0.05) 55%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px;
  color: #fff;
}
.project-card .project-card__zoom {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(-6px);
  transition: 220ms ease;
}
.project-card:hover .project-card__zoom { opacity: 1; transform: translateY(0); }
.project-card__title { font-size: 17px; font-weight: 700; margin: 0; text-transform: none; letter-spacing: 0; color: #fff; }
.project-card__loc { font-size: 12.5px; color: var(--gm-bronze); letter-spacing: 0.6px; text-transform: uppercase; margin-top: 4px; }
.project-card__img.contain-logo img { object-fit: contain; padding: 34px; }

/* -------------------------- Trust strip -------------------------- */
.trust-strip { padding: 46px 0; border-top: 1px solid var(--gm-border); border-bottom: 1px solid var(--gm-border); }
.trust-strip__label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gm-muted); text-align: center; margin-bottom: 26px; }
.trust-strip__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 44px; }
.trust-strip__logos img { height: 34px; width: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.55; transition: 220ms ease; }
.trust-strip__logos img:hover { filter: grayscale(0%); opacity: 1; }

/* -------------------------- FAQ -------------------------- */
.faq-list .faq-item {
  background: var(--gm-white);
  border: 1px solid var(--gm-border);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-list .faq-q {
  width: 100%; text-align: left;
  padding: 19px 24px;
  background: transparent; border: 0;
  font-weight: 700; font-size: 15px; color: var(--gm-ink);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
.faq-list .faq-q i { color: var(--gm-bronze); transition: transform 200ms ease; font-size: 13px; flex: 0 0 auto; }
.faq-list .faq-q[aria-expanded="true"] i { transform: rotate(180deg); }
.faq-list .faq-a { padding: 0 24px 22px; color: var(--gm-body); line-height: 1.75; }

/* -------------------------- Contact cards -------------------------- */
.contact-card {
  background: var(--gm-white);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius);
  padding: 34px 26px;
  text-align: center;
  height: 100%;
  box-shadow: var(--gm-shadow-sm);
  transition: 220ms ease;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--gm-shadow-md); }
.contact-card__icon {
  width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gm-bronze), var(--gm-bronze-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px;
}
.contact-card h4 { font-size: 15px; margin-bottom: 6px; }
.contact-card p { margin: 0; color: var(--gm-body); }
.contact-card a { color: var(--gm-body); }
.contact-card a:hover { color: var(--gm-bronze-dark); }

.gm-form .form-control { border-radius: 6px; border: 1px solid var(--gm-border); padding: 12px 14px; height: auto; }
.gm-form .form-control:focus { border-color: var(--gm-bronze); box-shadow: 0 0 0 3px rgba(193,144,79,0.18); }
.gm-form label { font-weight: 700; font-size: 13px; color: var(--gm-ink); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; }

.google-map iframe { border-radius: var(--gm-radius); box-shadow: var(--gm-shadow-sm); filter: grayscale(15%); }

/* -------------------------- Page slider (About) -------------------------- */
.page-slider.small-bg .box-slider-content {
  left: 0;
  padding: 0 56px;
  box-sizing: border-box;
}
.box-slider-text {
  background: rgba(15,18,22,0.78);
  border-radius: 8px;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
}
.box-slide-title { color: var(--gm-bronze); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; font-size: 15px; }
.box-slide-description { color: #f2f0ec; font-size: 15px; line-height: 1.6; margin: 6px 0 0; }

/* -------------------------- About page -------------------------- */
.about-lede { font-size: 17px; color: var(--gm-body); }
blockquote.gm-quote {
  border-left: 3px solid var(--gm-bronze);
  padding: 4px 0 4px 22px;
  margin: 26px 0;
  font-style: italic;
  color: var(--gm-ink);
}
.gm-list-check { list-style: none; padding: 0; margin: 0; }
.gm-list-check li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gm-border); }
.gm-list-check li:last-child { border-bottom: 0; }
.gm-list-check i { color: var(--gm-bronze-dark); margin-top: 3px; }
.gm-list-check strong { color: var(--gm-ink); display: block; margin-bottom: 2px; }

/* -------------------------- Footer -------------------------- */
.footer { background: var(--gm-navy) !important; }
.footer .widget-title { color: #fff; font-size: 15px; letter-spacing: 1px; }
.footer .working-hours, .footer p { color: rgba(255,255,255,0.65); }
.footer .list-arrow a { color: rgba(255,255,255,0.75); }
.footer .list-arrow a:hover { color: var(--gm-bronze); }
.footer-contact-line { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: rgba(255,255,255,0.75); font-size: 14px; }
.footer-contact-line i { color: var(--gm-bronze); width: 16px; }
.copyright { background: rgba(0,0,0,0.22); }
.copyright-info span, .footer-menu a { color: rgba(255,255,255,0.55); }
.footer-menu a:hover { color: var(--gm-bronze); }

/* -------------------------- Misc -------------------------- */
@media (max-width: 767px) {
  .logo-area .brand-mark__name { font-size: 17px; }
  .logo-area .brand-mark__icon svg { width: 36px; height: 36px; }
  .section-sub-title { font-size: 24px; }
  .header-one .logo-area { padding: 14px 0; }
  ul.top-info-box li { margin-top: 6px; }
  .info-box { justify-content: center; }
  .info-box .info-box-icon { width: 28px; height: 28px; flex: 0 0 28px; font-size: 12px; }
  .info-box-title { font-size: 10px; margin-bottom: 0; }
  .info-box-subtitle { font-size: 12.5px; }
  .hero-eyebrow { font-size: 10.5px; letter-spacing: 1px; padding: 6px 14px; align-items: flex-start; text-align: left; }
  .hero-eyebrow i, .hero-eyebrow svg { margin-top: 2px; }
}

@media (max-width: 400px) {
  .info-box-title { display: none; }
  .info-box-subtitle { font-size: 12px; }
}

/* Compact header: the full Call/Email/Safety/Quote row only has reliable
   room at wide desktop widths (Bootstrap's container jumps from 960px to
   1140px right at the 1200px breakpoint, so anything narrower is tight and
   wraps unpredictably). Below 1200px, drop to Call + Quote side by side —
   Email and Safety Certification stay reachable via the footer. This keeps
   the header's layout fixed instead of reflowing at in-between widths. */
@media (max-width: 1199px) {
  ul.top-info-box { display: flex !important; flex-wrap: nowrap; align-items: stretch; gap: 10px; float: none; }
  ul.top-info-box li:nth-child(2),
  ul.top-info-box li.last { display: none; }
  ul.top-info-box li:first-child { flex: 0 0 auto; margin-top: 0; float: none; }
  ul.top-info-box li.header-get-a-quote { flex: 1 1 auto; margin-top: 0; float: none; }
  ul.top-info-box li.header-get-a-quote .btn-primary { width: 100%; }
  ul.top-info-box li:first-child .info-box { justify-content: flex-start; height: 100%; }
}

/* -------------------------- Custom icon system -------------------------- */
/* Hand-drawn line icons, replacing FontAwesome glyphs, so every icon on the
   site reads as one intentional design system rather than a generic set. */
.gm-icon { width: 20px; height: 20px; display: block; flex: 0 0 auto; }
.info-box-icon .gm-icon { width: 17px; height: 17px; }
.hero-eyebrow .gm-icon { width: 14px; height: 14px; color: var(--gm-bronze); }
.service-card__icon .gm-icon { width: 27px; height: 27px; }
.contact-card__icon .gm-icon { width: 24px; height: 24px; color: #fff; }
.footer-contact-line .gm-icon { width: 16px; height: 16px; }
.gm-list-check .gm-icon { width: 19px; height: 19px; margin-top: 2px; }
.gm-reg-icon .gm-icon { width: 17px; height: 17px; }
.project-card__zoom .gm-icon { width: 16px; height: 16px; }
.column-title .gm-icon { width: 19px; height: 19px; color: var(--gm-bronze-dark); vertical-align: -3px; margin-right: 4px; }
@media (max-width: 767px) {
  .info-box-icon .gm-icon { width: 14px; height: 14px; }
}

/* -------------------------- Stat strip (3-up) -------------------------- */
.stat-strip.stat-strip--3 .stat-item { text-align: center; padding: 38px 10px; }
@media (max-width: 480px) {
  .stat-strip.stat-strip--3 .stat-item { padding: 26px 6px; }
  .stat-strip.stat-strip--3 .stat-num { font-size: 28px; }
  .stat-strip.stat-strip--3 .stat-label { font-size: 10.5px; letter-spacing: 0.5px; }
}

/* -------------------------- Reveal-on-scroll -------------------------- */
/* Gentle fade + rise, never a hard cut — appropriate for a general-audience
   B2B site rather than the sharper Blueprint-style motion. Respects reduced
   motion and force-reveals anything a fast scroll carries past the observer. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-group .reveal:nth-child(2) { transition-delay: 90ms; }
.reveal-group .reveal:nth-child(3) { transition-delay: 180ms; }
.reveal-group .reveal:nth-child(4) { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* -------------------------- Language switch -------------------------- */
.gm-utility-bar {
  background: var(--gm-cream);
  border-bottom: 1px solid var(--gm-border);
  padding: 7px 0;
}
.gm-utility-bar .container { display: flex; justify-content: flex-end; }

.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(20, 23, 27, 0.06);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
}
.lang-switch .lang-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  background: linear-gradient(135deg, var(--gm-bronze-btn) 0%, var(--gm-bronze-btn-dark) 100%);
  border-radius: 16px;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
  box-shadow: 0 2px 6px rgba(20, 23, 27, 0.18);
}
.lang-switch[data-active="en"] .lang-thumb { transform: translateX(100%); }
.lang-switch a.lang-opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 16px;
  color: var(--gm-body);
  text-decoration: none;
  transition: color 220ms ease;
}
.lang-switch a.lang-opt:hover { color: var(--gm-ink); text-decoration: none; }
.lang-switch a.lang-opt.is-active { color: #fff; }
.lang-switch a.lang-opt.is-active:hover { color: #fff; }

/* -------------------------- Footer registration line -------------------------- */
.gm-reg-line {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.45);
  font-size: 12px; letter-spacing: 0.3px;
}
.gm-reg-line .gm-icon { color: rgba(255,255,255,0.4); }