/* ================================================================
   CHAMELEO GFX STUDIO -- GLOBAL CORE STYLESHEET
   ================================================================ */

/* 1. LOCAL FONTS */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat-italic-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  font-optical-sizing: auto;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
}

/* 2. DESIGN TOKENS, RESETS, LAYOUT & BUTTONS */
/* ============================================================
   CHAMELEO GFX STUDIO     Design System (tokens)
   Aesthetic: Premium SaaS + FinTech. Brand red used as the
   single action colour. "Adaptive spectrum" = the one flourish.
   ============================================================ */
:root {
  /* Brand + ink */
  --red: #E5162B;
  --red-deep: #B30E1F;
  --red-light: #e5162b;
  --red-glow: rgba(255, 77, 94, .45);
  --red-soft: rgba(255, 77, 94, .12);

  --ink: #0B0C10;
  --ink-2: #101218;
  --ink-3: #171A22;
  --ink-line: rgba(255, 255, 255, .09);
  --ink-line-2: rgba(255, 255, 255, .14);

  --paper: #F6F5F1;
  --paper-2: #EDEBE4;
  --paper-line: rgba(11, 12, 16, .10);

  /* Text */
  --on-dark: #EDEEF1;
  --on-dark-mut: #9A9EA8;
  --on-dark-dim: #9A9EA8;
  --on-light: #14151A;
  --on-light-mut: #54585F;

  /* Adaptive spectrum (chameleon shift)   flourish only */
  --spectrum: linear-gradient(90deg, #E5162B 0%, #F0A30A 32%, #19B36B 62%, #2E7DF6 100%);

  /* Type */
  --display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout   standard container system */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --content-narrow: 720px;
  --content-reading: 42rem;
  --content-hero: 960px;
  --nav-height: 116px;

  /* Legacy aliases (used by nav + wrap) */
  --maxw: var(--container-max);
  --gut: var(--container-pad);

  --sect: clamp(3.25rem, 7vw, 7.25rem);
  --r: 14px;
  --r-lg: 22px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Global Brand Aliases for compatibility */
  --brand-red: var(--red);
  --brand-red-deep: var(--red-deep);
  --brand-red-glow: var(--red-glow);
  --brand-on-dark: var(--on-dark);
  --brand-on-dark-mut: var(--on-dark-mut);
  --brand-darker: var(--ink-2);
  --brand-ink: var(--ink);
  --brand-ink-line: var(--ink-line);
  --brand-ink-line-2: var(--ink-line-2);
  --brand-display: var(--display);
  --brand-body: var(--body);
  --brand-mono: var(--mono);
  --nav-ease: cubic-bezier(.7, 0, .2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-padding-top: var(--nav-height);
  -webkit-text-size-adjust: 100%
}

body {
  font-family: var(--body);
  background: var(--ink);
  color: var(--on-dark);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--ink-2);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  border: 2px solid var(--ink-2);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--red);
}

/* Scroll Progress Bar */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--spectrum);
  background-size: 200% 100%;
  animation: shift 9s linear infinite;
  z-index: 1000;
  transition: width 0.1s ease-out;
}

/* Ambient Glow Tracker */
.glow-tracker {
  position: fixed;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 77, 94, 0.08) 0%, rgba(255, 77, 94, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: screen;
  transform: translate3d(-300px, -300px, 0);
  will-change: transform;
}

img {
  max-width: 100%;
  display: block
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none
}

::selection {
  background: var(--red);
  color: #fff
}


/* ---------- Typographic scale ---------- */
.display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.02em
}

.eyebrow {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red-light);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}

.eyebrow::before {

  width: 26px;
  height: 1px;
  background: var(--red-light);
  display: inline-block
}

.eyebrow.on-light {
  color: var(--red)
}

h2.sect-title {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.06;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
}

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.wrap--narrow {
  max-width: var(--content-narrow);
}

.wrap--reading {
  max-width: var(--content-reading);
}

.section {
  padding-block: var(--sect)
}

.section.dark {
  background: var(--ink);
  color: var(--on-dark)
}

.section.darker {
  background: var(--ink-2);
  color: var(--on-dark)
}

.section.light {
  background: var(--paper);
  color: var(--on-light);
  position: relative;
}

.section.light::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 10% 0%, rgba(255, 77, 94, .04), transparent 55%),
    radial-gradient(ellipse 50% 35% at 90% 100%, rgba(46, 125, 246, .04), transparent 55%);
  pointer-events: none;
}

.section.dark,
.section.darker {
  padding-top: 100px;
  position: relative;
}

.section.dark::before,
.section.darker::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% -20%, rgba(255, 77, 94, .06), transparent 60%);
  pointer-events: none;
}

.section .wrap {
  position: relative;
  z-index: 1;
}

.spectrum-rule {
  height: 2px;
  background: var(--spectrum);
  border: 0;
  opacity: .9
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -.01em;
  padding: .92em 1.5em;
  border-radius: 999px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  will-change: transform;
  white-space: nowrap;
}

.btn-primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 30px -8px var(--red-glow);
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity .3s;
}

.btn-primary:hover::after {
  opacity: 1;
  animation: shimmer 1.2s ease infinite;
}

.btn-primary:hover {
  background: var(--red-deep);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 40px -6px var(--red-glow);
}

.btn-primary svg {
  transition: transform .25s var(--ease)
}

.btn-primary:hover svg {
  transform: translateX(3px)
}

.btn-ghost {
  border: 1px solid var(--ink-line-2);
  color: var(--on-dark)
}

.btn-ghost:hover {
  border-color: #fff;
  transform: translateY(-2px)
}

.btn-ghost.on-light {
  border: 1px solid var(--paper-line);
  color: var(--on-light)
}

.btn-ghost.on-light:hover {
  border-color: var(--on-light)
}

.btn-lg {
  padding: 1.05em 1.9em;
  font-size: 1rem
}


/* 3. SCROLL REVEAL & FLOATING BASE */
/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(40px) rotateX(15deg) scale(0.95);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change: transform, opacity;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0) rotateX(0deg) scale(1);
}

/* Hero loads immediately on page open */
body.loaded .hero .reveal {
  animation: fade-up-3d 1s var(--ease-out) backwards;
}

@keyframes fade-up-3d {
  0% {
    opacity: 0;
    transform: translateY(50px) rotateX(20deg) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
  }
}

body.loaded .hero .reveal[data-d="1"] {
  animation-delay: .1s;
}

body.loaded .hero .reveal[data-d="2"] {
  animation-delay: .2s;
}

body.loaded .hero .reveal[data-d="3"] {
  animation-delay: .3s;
}

body.loaded .hero .reveal[data-d="4"] {
  animation-delay: .4s;
}

body.loaded .hero .reveal.in {
  opacity: 1;
  transform: translateY(0) rotateX(0deg) scale(1);
  color: #fff;
}

.reveal[data-d="1"] {
  transition-delay: .08s
}

.reveal[data-d="2"] {
  transition-delay: .16s
}

.reveal[data-d="3"] {
  transition-delay: .24s
}

.reveal[data-d="4"] {
  transition-delay: .32s
}

/* Skip link / a11y */
.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 200;
  background: #fff;
  color: #000;
  padding: 10px 16px;
  border-radius: 8px
}

.skip:focus {
  left: 8px
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px
}

/* Floating Call + WhatsApp (bottom-left) */
.float-actions {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.fab {
  display: flex;
  align-items: center;
  height: 54px;
  width: 54px;
  padding-left: 15px;
  border-radius: 999px;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .5);
  transition: width .35s var(--ease), transform .25s var(--ease), box-shadow .25s;
  animation: fab-enter .6s var(--ease-out) backwards;
}

.fab.wa {
  animation-delay: .15s;
}

@keyframes fab-enter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fab svg {
  width: 24px;
  height: 24px;
  flex: none
}

.fab .lbl {
  margin-left: 12px;
  padding-right: 6px;
  font-weight: 600;
  font-size: .92rem;
  opacity: 0;
  transition: opacity .22s ease
}

.fab:hover {
  width: auto;
  padding-right: 22px;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .55)
}

.fab:hover .lbl {
  opacity: 1
}

.fab.call {
  background: var(--red)
}

.fab.wa {
  background: #25D366
}

.fab.wa .lbl {
  color: #063
}


/* 4. AUTHENTIC TECH STACK COLORS */
/* Authentic Brand Colors for Tech Stack Icons */
.tag-figma svg {
  color: #F24E1E !important;
}

.tag-ps svg {
  color: #31A8FF !important;
}

.tag-ai svg {
  color: #FF9A00 !important;
}

.tag-canva svg {
  color: #00C4CC !important;
}

.tag-xd svg {
  color: #FF61F6 !important;
}

.tag-html svg {
  color: #E34F26 !important;
}

.tag-css svg {
  color: #1572B6 !important;
}

.tag-js svg {
  color: #F7DF1E !important;
}

.tag-react svg {
  color: #61DAFB !important;
}

.tag-next svg {
  color: #FFFFFF !important;
}

.tag-wp svg {
  color: #21759B !important;
}

.tag-webflow svg {
  color: #146EF5 !important;
}

.tag-python svg {
  color: #3776AB !important;
}

.tag-netlify svg {
  color: #00C7B7 !important;
}

/* 5. UNIFIED NAVBAR, FOOTER & FLOATING ACTIONS */
/* ================================================================    CHAMELEO GFX STUDIO ΓÇö UNIFIED HEADER, FOOTER & FLOATING ACTIONS    Consistent Across All Pages    ================================================================ */
:root {
  --nav-ease: cubic-bezier(.7, 0, .2, 1);
  --brand-red: #E5162B;
  --brand-red-deep: #B30E1F;
  --brand-red-glow: rgba(255, 77, 94, .45);
  --brand-on-dark: #EDEEF1;
  --brand-on-dark-mut: #9A9EA8;
  --brand-darker: #07080b;
  --brand-ink: #0B0C10;
  --brand-ink-line: rgba(255, 255, 255, .09);
  --brand-ink-line-2: rgba(255, 255, 255, .16);
  --brand-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brand-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brand-mono: "JetBrains Mono", monospace;
}

/* Hide legacy topbar / announcement banner */
.topbar,
.top-marquee-ribbon {
  display: none !important;
}

/* ---------- PRIMARY NAVIGATION ---------- */
.nav,
#nav,
header.nav,
header#nav {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  pointer-events: none;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform .6s var(--nav-ease), opacity .4s, top .4s var(--nav-ease);
}

.nav.hide,
#nav.hide {
  transform: none;
  opacity: 1;
}

.nav-in {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  width: 100%;
  max-width: 100% !important;
  margin: 0 auto;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  transition: max-width .7s var(--nav-ease), height .6s var(--nav-ease), border-radius .7s var(--nav-ease), background .5s, border-color .5s, backdrop-filter .5s, padding .6s, box-shadow .5s;
}

.nav.scrolled,
#nav.scrolled,
header.nav.scrolled,
header#nav.scrolled {
  top: 14px;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

.nav.scrolled .nav-in {
  max-width: min(1240px, 94%) !important;
  height: 64px !important;
  border-radius: 99px !important;
  background: rgba(14, 15, 20, .88) !important;
  backdrop-filter: blur(18px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  padding-inline: 1.2rem 0.65rem !important;
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .6) !important;
}

.nav-logo {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.nav-logo img {
  height: 34px !important;
  width: auto !important;
  max-height: 34px !important;
  object-fit: contain !important;
  display: block !important;
  transition: height .3s var(--nav-ease) !important;
}

.nav.scrolled .nav-logo img {
  height: 28px !important;
  max-height: 28px !important;
  width: auto !important;
  object-fit: contain !important;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.7vw, 1.8rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .88rem;
  font-weight: 500;
}

/* Keep navigation hover text red on Blogs, Career and Contact pages only. */
.blogs-page .nav-links a.roll:hover,
.blogs-page .nav-links a.roll:focus-visible,
.blogs-page .nav-links a.roll:hover span,
.blogs-page .nav-links a.roll:focus-visible span,
.blogs-page .nav-links a.roll:hover::after,
.blogs-page .nav-links a.roll:focus-visible::after,
body#top .nav-links a.roll:hover,
body#top .nav-links a.roll:focus-visible,
body#top .nav-links a.roll:hover span,
body#top .nav-links a.roll:focus-visible span,
body#top .nav-links a.roll:hover::after,
body#top .nav-links a.roll:focus-visible::after,
.contact-page .nav-links a.roll:hover,
.contact-page .nav-links a.roll:focus-visible,
.contact-page .nav-links a.roll:hover span,
.contact-page .nav-links a.roll:focus-visible span,
.contact-page .nav-links a.roll:hover::after,
.contact-page .nav-links a.roll:focus-visible::after {
  color: #E5162B !important;
}

/* Roll animation for nav links */
.roll {
  display: inline-block;
  overflow: hidden !important;
  height: 1.35em !important;
  line-height: 1.35 !important;
  position: relative;
  isolation: isolate;
  font-family: var(--brand-body);
  font-size: .88rem;
  font-weight: 500;
  color: #C8CCD6;
  text-decoration: none;
  padding: 0 !important;
  margin: 0;
  vertical-align: middle;
  transition: color .25s var(--nav-ease);
}

.roll,
.roll:link,
.roll:visited,
.roll:active,
.roll:focus,
.roll:focus-visible {
  color: #C8CCD6;
  text-decoration: none;
}

.roll span {
  display: block;
  position: relative;
  z-index: 1;
  line-height: 1.35 !important;
  transition: transform .45s var(--nav-ease);
}

.roll::after {
  content: attr(data-t);
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  line-height: 1.35 !important;
  color: var(--brand-red, #E5162B);
  opacity: 0;
  transform: translateY(100%);
  transition: transform .45s var(--nav-ease), opacity .2s ease;
}

.roll:hover,
.roll:focus-visible,
.roll:hover span,
.roll:focus-visible span,
.roll:hover::after,
.roll:focus-visible::after {
  color: var(--brand-red, #E5162B) !important;
}

.roll:hover span,
.roll:focus-visible span,
.roll.active span {
  transform: translateY(-100%);
}

.roll:hover::after,
.roll:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

body.has-cursor .nav a,
body.has-cursor .nav button,
body.has-cursor .nav .roll,
body.has-cursor .nav .nav-cta,
body.has-cursor .nav .burger {
  cursor: default;
}

.nav-cta {
  flex: none;
  font-family: var(--brand-body);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.75rem 1.4rem;
  border-radius: 99px;
  background: var(--brand-red);
  color: #fff !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(229, 22, 43, 0.4);
  transition: all 0.3s var(--nav-ease);
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--brand-red-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(229, 22, 43, 0.6);
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  cursor: pointer;
  position: relative;
  z-index: 1105;
  pointer-events: auto;
  transition: all .3s var(--nav-ease);
  padding: 0;
}

.burger i {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .5s var(--nav-ease);
  pointer-events: none;
}

.burger i:nth-child(1) {
  top: 18px;
}

.burger i:nth-child(2) {
  top: 24px;
}

.burger.on {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .2);
}

.burger.on i:nth-child(1),
.burger.on i:first-child {
  transform: translateY(3px) rotate(45deg) !important;
}

.burger.on i:nth-child(2),
.burger.on i:last-child {
  transform: translateY(-3px) rotate(-45deg) !important;
}

/* Ensure wrappers never clip fixed navigation elements on service and inner pages */
#root,
.service-page-body #root,
.about-page #root {
  overflow: visible !important;
  overflow-x: visible !important;
}

/* Mobile & Tablet Drawer (Exact Circle Reveal as Homepage) */
.mnav {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 1050 !important;
  background: #0B0C10 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 1.25rem !important;
  padding: clamp(5.5rem, 12vh, 7rem) clamp(1.75rem, 6vw, 4.5rem) 2.5rem !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  clip-path: circle(0% at calc(100% - 2.5rem) 2.5rem);
  -webkit-clip-path: circle(0% at calc(100% - 2.5rem) 2.5rem);
  transition: clip-path 0.65s cubic-bezier(0.77, 0, 0.175, 1), -webkit-clip-path 0.65s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.35s ease, visibility 0.35s ease !important;
}

.mnav.open {
  clip-path: circle(160% at calc(100% - 2.5rem) 2.5rem) !important;
  -webkit-clip-path: circle(160% at calc(100% - 2.5rem) 2.5rem) !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.mnav::before {
  content: "";
  position: absolute;
  top: clamp(1rem, 3vw, 1.4rem);
  left: clamp(1rem, 4vw, 1.6rem);
  width: clamp(115px, 34vw, 170px);
  height: clamp(26px, 7vw, 34px);
  display: block;
  background: url('../images/image-f445d64e51004507.webp') center left / contain no-repeat;
  z-index: 3;
  opacity: 1;
}

.mnav::after {
  content: "";
  position: absolute;
  top: clamp(1rem, 3vw, 1.4rem);
  right: clamp(1rem, 4vw, 1.6rem);
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 2px, 2px 100%;
  z-index: 3;
}

body.menu-open .burger {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.menu-open .burger:not(.on) {
  opacity: 0.85 !important;
}

@media (max-width: 640px) {
  .mnav {
    padding: clamp(5.2rem, 11vh, 6.5rem) 1.5rem 2.5rem !important;
  }
}

.mnav nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(0.18rem, 1.3vh, 0.38rem) !important;
  width: 100% !important;
  max-width: 600px !important;
}

.mnav nav a {
  font-family: var(--brand-display, 'Bricolage Grotesque', sans-serif) !important;
  font-size: clamp(1.75rem, 5.5vw, 2.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  color: #fff !important;
  text-decoration: none !important;
  padding: 0.2rem 0 !important;
  display: block !important;
  text-align: left !important;
  transform: translateY(25px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease !important;
}

.mnav nav a:hover,
.mnav nav a:active {
  color: var(--brand-red, #E5162B) !important;
  transform: translateX(10px) !important;
}

.mnav .btn {
  margin-top: 0.8rem !important;
  align-self: flex-start !important;
  font-family: var(--brand-display, 'Bricolage Grotesque', sans-serif) !important;
  font-size: clamp(0.95rem, 2vw, 1.05rem) !important;
  padding: 0.85rem 1.85rem !important;
  border-radius: 99px !important;
  background: var(--brand-red, #E5162B) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 20px rgba(229, 22, 43, 0.45) !important;
  transform: translateY(25px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, box-shadow 0.3s ease !important;
}

.mnav .btn:hover {
  background: var(--brand-red-deep, #C01022) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px rgba(229, 22, 43, 0.6) !important;
}

/* Staggered entrance identical to Homepage GSAP effect */
.mnav.open nav a,
.mnav.open .btn {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.mnav.open nav a:nth-child(1) {
  transition-delay: 0.04s;
}

.mnav.open nav a:nth-child(2) {
  transition-delay: 0.08s;
}

.mnav.open nav a:nth-child(3) {
  transition-delay: 0.12s;
}

.mnav.open nav a:nth-child(4) {
  transition-delay: 0.16s;
}

.mnav.open nav a:nth-child(5) {
  transition-delay: 0.20s;
}

.mnav.open nav a:nth-child(6) {
  transition-delay: 0.24s;
}

.mnav.open nav a:nth-child(7) {
  transition-delay: 0.28s;
}

.mnav.open nav a:nth-child(8) {
  transition-delay: 0.32s;
}

.mnav.open nav a:nth-child(9) {
  transition-delay: 0.36s;
}

.mnav.open .btn {
  transition-delay: 0.40s;
}

/* Contact Page Top Spacing */
body.contact-page #main>#contact,
body.contact-page #main>section:first-of-type {
  padding-top: clamp(125px, 16vw, 160px) !important;
}

@media (max-width: 1100px) {

  .nav-links,
  .nav-cta {
    display: none !important;
  }

  .burger {
    display: flex !important;
  }

  .nav-in {
    padding-inline: clamp(1rem, 3vw, 1.4rem) !important;
  }

  .nav.scrolled .nav-in {
    padding-inline: 1.1rem 0.8rem !important;
  }

  .nav-logo {
    flex: 0 0 auto !important;
  }

  .nav-logo img {
    height: 30px !important;
    width: auto !important;
    max-width: clamp(140px, 42vw, 190px) !important;
    max-height: 30px !important;
    object-fit: contain !important;
  }

  .nav.scrolled .nav-logo img {
    height: 24px !important;
    max-height: 24px !important;
    width: auto !important;
    object-fit: contain !important;
  }
}

/* Footer CSS is isolated exclusively inside includes/footer.html */

/* ================================================================    FLOATING BUTTONS (CALL + WHATSAPP ON LEFT, BACK TO TOP ON RIGHT)    ================================================================ */
.float-actions-left {
  position: fixed;
  left: 1.35rem;
  bottom: 1.35rem;
  z-index: 180;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.float-btn {
  background-color: red;
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: transform 0.35s var(--nav-ease), box-shadow 0.35s var(--nav-ease);
}

.float-call {
  background: var(--brand-red);
  box-shadow: 0 10px 28px -4px rgba(229, 22, 43, 0.65);
}

.float-call::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brand-red);
  z-index: -1;
  animation: callping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes callping {
  0% {
    transform: scale(1);
    opacity: .55;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.float-call:hover {
  transform: scale(1.1) rotate(6deg);
  box-shadow: 0 14px 34px rgba(229, 22, 43, 0.85);
  color: #fff;
}

.float-wa {
  background: #25D366;
  box-shadow: 0 10px 28px -4px rgba(37, 211, 102, 0.65);
}

.float-wa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  z-index: -1;
  animation: waping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes waping {
  0% {
    transform: scale(1);
    opacity: .55;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.float-wa:hover {
  transform: scale(1.1) rotate(-6deg);
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.85);
  color: #fff;
}

.float-tip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: rgba(14, 16, 22, 0.95);
  color: #fff;
  padding: 5px 11px;
  border-radius: 8px;
  font-family: var(--brand-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.float-tip::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent rgba(14, 16, 22, 0.95) transparent transparent;
}

.float-btn:hover .float-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* Back to Top (Right) */
.to-top {
  position: fixed;
  right: 1.35rem;
  bottom: 1.35rem;
  z-index: 180;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(15, 17, 24, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.65);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.35s var(--nav-ease), transform 0.35s var(--nav-ease), background 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.3s;
}

.to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.to-top:hover {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(229, 22, 43, 0.55);
}

.to-top svg {
  transition: transform 0.3s var(--nav-ease);
}

.to-top:hover svg {
  transform: translateY(-2px);
}

.to-top-tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  background: rgba(14, 16, 22, 0.95);
  color: #fff;
  padding: 5px 11px;
  border-radius: 8px;
  font-family: var(--brand-display);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.to-top-tip::before {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(14, 16, 22, 0.95);
}

.to-top:hover .to-top-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* Legacy services dropdowns and mega-menu overlays must stay hidden on this site */
.nav-item.dropdown,
.nav-item.dropdown *,
.mega-menu-master,
.mega-menu-master *,
.mega-menu-overlay,
.site-menu-main .nav-item.dropdown,
.site-menu-main .nav-item.dropdown .mega-menu-master,
.nav-item.dropdown:hover .mega-menu-master,
.nav-item.dropdown.header-dropdown-open .mega-menu-master,
.nav-item.dropdown:hover .mega-menu-master.cgs-services-dropdown,
.nav-item.dropdown.header-dropdown-open .mega-menu-master.cgs-services-dropdown {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  max-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

/* Cookie Banner (Offset so it doesn't overlap floating buttons) */
.cookie {
  position: fixed;
  left: calc(1.35rem + 70px) !important;
  bottom: 1.35rem !important;
  z-index: 175;
  max-width: 380px;
  padding: 1.1rem 1.2rem;
  border-radius: 22px;
  background: rgba(14, 15, 20, .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: .82rem;
  color: var(--brand-on-dark, #EDEEF1);
  display: flex;
  flex-direction: column;
  gap: .8rem;
  transform: translateY(160%);
  transition: transform .4s var(--nav-ease), opacity .3s, visibility .3s;
  box-shadow: 0 18px 45px -10px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cookie.show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cookie a {
  color: var(--brand-red);
  text-decoration: underline;
}

.cookie div {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.cookie button {
  padding: .55rem .9rem;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: .78rem;
  transition: .3s;
  background: none;
  color: inherit;
  cursor: pointer;
}

.cookie button:hover {
  background: #fff;
  color: #000;
}

.cookie .acc {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}

@media (max-width: 1024px) {
  /* Mobile header/menu rules handled */
}

@media (max-width: 768px) {

  /* Clear breathing space between fixed menu and page content */
  .hero,
  .agency-hero-section,
  .about-page-hero,
  .service-hero-bg,
  .blogs-hero,
  .page-hero,
  .terms-section,
  .career-hero,
  .privacy-section,
  main>section:first-of-type,
  #main>section:first-of-type {
    padding-top: clamp(140px, 20vw, 175px) !important;
  }

  /* Footer responsive rules are handled inside includes/footer.html */
}

@media (max-width: 640px) {

  /* Footer responsive rules are handled inside includes/footer.html */
  .float-actions-left {
    left: 0.85rem !important;
    bottom: 0.85rem !important;
    gap: 0.5rem !important;
  }

  .float-btn {
    width: 46px !important;
    height: 46px !important;
  }

  .float-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  .float-tip,
  .to-top-tip {
    display: none !important;
  }

  .to-top {
    right: 0.85rem !important;
    bottom: 0.85rem !important;
    width: 46px !important;
    height: 46px !important;
  }

  .to-top svg {
    width: 20px !important;
    height: 20px !important;
  }

  .cookie {
    left: 0.85rem !important;
    right: 0.85rem !important;
    max-width: none !important;
    bottom: 8.5rem !important;
  }
}

/* ================================================================    SERVICE-PAGE HEADER PARITY    Keep Blogs, Career and Contact header identical to service pages.    Scoped to these three pages; page content remains untouched.    ================================================================ */
.blogs-page header.nav,
body#top header.nav,
.contact-page header.nav {
  position: fixed !important;
  top: 14px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2000 !important;
  display: flex !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.blogs-page header.nav .nav-in,
body#top header.nav .nav-in,
.contact-page header.nav .nav-in {
  width: 100% !important;
  max-width: 100% !important;
  height: 76px !important;
  margin: 0 auto !important;
  padding: 0 clamp(1rem, 4vw, 3rem) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.blogs-page header.nav.scrolled .nav-in,
body#top header.nav.scrolled .nav-in,
.contact-page header.nav.scrolled .nav-in {
  max-width: min(1240px, 94%) !important;
  height: 64px !important;
  padding: 0.0rem 1.2rem 0.0rem 1.2rem !important;
  border-radius: 99px !important;
  background: rgba(14, 15, 20, .88) !important;
  backdrop-filter: blur(18px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .6) !important;
}

.blogs-page header.nav .nav-logo,
body#top header.nav .nav-logo,
.contact-page header.nav .nav-logo {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.blogs-page header.nav .nav-logo img,
body#top header.nav .nav-logo img,
.contact-page header.nav .nav-logo img {
  display: block !important;
  width: auto !important;
  height: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
}

.blogs-page header.nav .nav-links,
body#top header.nav .nav-links,
.contact-page header.nav .nav-links {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(.9rem, 1.7vw, 1.8rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.blogs-page header.nav .nav-links a.roll,
body#top header.nav .nav-links a.roll,
.contact-page header.nav .nav-links a.roll {
  display: inline-block !important;
  height: 1.35em !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #C8CCD6 !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-family: var(--brand-body) !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  position: relative !important;
  transition: color .25s var(--nav-ease) !important;
}

.blogs-page header.nav .nav-links a.roll:hover,
.blogs-page header.nav .nav-links a.roll:hover span,
.blogs-page header.nav .nav-links a.roll:hover::after,
body#top header.nav .nav-links a.roll:hover,
body#top header.nav .nav-links a.roll:hover span,
body#top header.nav .nav-links a.roll:hover::after,
.contact-page header.nav .nav-links a.roll:hover,
.contact-page header.nav .nav-links a.roll:hover span,
.contact-page header.nav .nav-links a.roll:hover::after,
.blogs-page header.nav .nav-links a.roll:focus-visible,
.blogs-page header.nav .nav-links a.roll:focus-visible span,
.blogs-page header.nav .nav-links a.roll:focus-visible::after,
body#top header.nav .nav-links a.roll:focus-visible,
body#top header.nav .nav-links a.roll:focus-visible span,
body#top header.nav .nav-links a.roll:focus-visible::after,
.contact-page header.nav .nav-links a.roll:focus-visible,
.contact-page header.nav .nav-links a.roll:focus-visible span,
.contact-page header.nav .nav-links a.roll:focus-visible::after {
  color: #E5162B !important;
}

.blogs-page header.nav .nav-links a.roll span,
body#top header.nav .nav-links a.roll span,
.contact-page header.nav .nav-links a.roll span {
  display: block !important;
  line-height: 1.35 !important;
  transition: transform .45s var(--nav-ease) !important;
}

.blogs-page header.nav .nav-links a.roll::after,
body#top header.nav .nav-links a.roll::after,
.contact-page header.nav .nav-links a.roll::after {
  content: attr(data-t) !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  width: 100% !important;
  height: 100% !important;
  color: #E5162B !important;
  opacity: 0 !important;
  transform: translateY(100%) !important;
  transition: transform .45s var(--nav-ease), opacity .2s ease !important;
}

.blogs-page header.nav .nav-links a.roll:hover span,
body#top header.nav .nav-links a.roll:hover span,
.contact-page header.nav .nav-links a.roll:hover span,
.blogs-page header.nav .nav-links a.roll:focus-visible span,
body#top header.nav .nav-links a.roll:focus-visible span,
.contact-page header.nav .nav-links a.roll:focus-visible span {
  transform: translateY(-100%) !important;
}

.blogs-page header.nav .nav-links a.roll:hover::after,
body#top header.nav .nav-links a.roll:hover::after,
.contact-page header.nav .nav-links a.roll:hover::after,
.blogs-page header.nav .nav-links a.roll:focus-visible::after,
body#top header.nav .nav-links a.roll:focus-visible::after,
.contact-page header.nav .nav-links a.roll:focus-visible::after {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.blogs-page header.nav .nav-cta,
body#top header.nav .nav-cta,
.contact-page header.nav .nav-cta {
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: .75rem 1.4rem !important;
  border-radius: 99px !important;
  background: #E5162B !important;
  color: #fff !important;
  font-family: var(--brand-body) !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.blogs-page header.nav .burger,
body#top header.nav .burger,
.contact-page header.nav .burger {
  display: none !important;
}

@media (max-width: 1100px) {

  .blogs-page header.nav .nav-links,
  .blogs-page header.nav .nav-cta,
  body#top header.nav .nav-links,
  body#top header.nav .nav-cta,
  .contact-page header.nav .nav-links,
  .contact-page header.nav .nav-cta {
    display: none !important;
  }

  .blogs-page header.nav .burger,
  body#top header.nav .burger,
  .contact-page header.nav .burger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
  }

  .blogs-page header.nav .nav-in,
  body#top header.nav .nav-in,
  .contact-page header.nav .nav-in {
    padding-inline: clamp(1rem, 3vw, 1.4rem) !important;
  }

  .blogs-page header.nav.scrolled .nav-in,
  body#top header.nav.scrolled .nav-in,
  .contact-page header.nav.scrolled .nav-in {
    max-width: 94% !important;
    padding-inline: 1rem !important;
  }
}

@media (max-width: 640px) {

  .blogs-page header.nav .nav-logo img,
  body#top header.nav .nav-logo img,
  .contact-page header.nav .nav-logo img {
    height: 30px !important;
    max-height: 30px !important;
  }

  .blogs-page header.nav .nav-in,
  body#top header.nav .nav-in,
  .contact-page header.nav .nav-in {
    height: 64px !important;
  }
}

/* ================================================================    NAV HOVER COLOR FIX ΓÇö MATCH INDEX / SERVICE PAGE    Force the animated navigation label to brand red on inner pages.    ================================================================ */
.blogs-page header#nav .nav-links a.roll:hover,
.blogs-page header#nav .nav-links a.roll:focus-visible,
.blogs-page header#nav .nav-links a.roll:hover span,
.blogs-page header#nav .nav-links a.roll:focus-visible span,
.blogs-page header#nav .nav-links a.roll:hover::after,
.blogs-page header#nav .nav-links a.roll:focus-visible::after,
body#top header#nav .nav-links a.roll:hover,
body#top header#nav .nav-links a.roll:focus-visible,
body#top header#nav .nav-links a.roll:hover span,
body#top header#nav .nav-links a.roll:focus-visible span,
body#top header#nav .nav-links a.roll:hover::after,
body#top header#nav .nav-links a.roll:focus-visible::after,
.contact-page header#nav .nav-links a.roll:hover,
.contact-page header#nav .nav-links a.roll:focus-visible,
.contact-page header#nav .nav-links a.roll:hover span,
.contact-page header#nav .nav-links a.roll:focus-visible span,
.contact-page header#nav .nav-links a.roll:hover::after,
.contact-page header#nav .nav-links a.roll:focus-visible::after {
  color: #E5162B !important;
}

/* Career page legacy hover pill override: keep the same red roll effect as index.html. */
body#top header#nav .nav-links a.roll:hover,
body#top header#nav .nav-links a.roll:focus-visible,
body#top header#nav .nav-links a.roll:hover span,
body#top header#nav .nav-links a.roll:focus-visible span,
body#top header#nav .nav-links a.roll:hover::after,
body#top header#nav .nav-links a.roll:focus-visible::after {
  color: #E5162B !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body#top header#nav .nav-links a.roll::after {
  color: #E5162B !important;
  background: transparent !important;
  text-shadow: none !important;
}

/* GLOBAL HEADER HOVER ΓÇö identical red roll effect on EVERY page */
header#nav .nav-links a.roll:hover,
header#nav .nav-links a.roll:focus-visible,
header#nav .nav-links a.roll:hover span,
header#nav .nav-links a.roll:focus-visible span,
header#nav .nav-links a.roll:hover::after,
header#nav .nav-links a.roll:focus-visible::after {
  color: #E5162B !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

header#nav .nav-links a.roll::after {
  color: #E5162B !important;
  background: transparent !important;
}

header#nav .nav-links a.roll:hover span,
header#nav .nav-links a.roll:focus-visible span {
  transform: translateY(-100%) !important;
}

header#nav .nav-links a.roll:hover::after,
header#nav .nav-links a.roll:focus-visible::after {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* FINAL NAV HOVER BEHAVIOUR ΓÇö red in place, no vertical roll/movement */
header#nav .nav-links a.roll,
header#nav .nav-links a.roll span {
  transform: none !important;
  transition: color .25s ease !important;
}

header#nav .nav-links a.roll:hover,
header#nav .nav-links a.roll:focus-visible,
header#nav .nav-links a.roll:hover span,
header#nav .nav-links a.roll:focus-visible span {
  color: #E5162B !important;
  transform: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

header#nav .nav-links a.roll::after,
header#nav .nav-links a.roll:hover::after,
header#nav .nav-links a.roll:focus-visible::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  transform: none !important;
}

/* ================================================================
   GLOBAL UNIFIED MOBILE & TABLET HEADER & DRAWER (ALL PAGES)
   Ensures logo is always visible on the left and burger on the right,
   both when menu is closed AND when menu is open!
   ================================================================ */
@media (max-width: 1100px) {
  /* 1. Header Container */
  .nav,
  #nav,
  header.nav,
  header#nav {
    position: fixed !important;
    top: 10px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 2000 !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* 2. Floating Navbar Pill (Uniform on every page) */
  .nav .nav-in,
  #nav .nav-in,
  header.nav .nav-in,
  header#nav .nav-in {
    pointer-events: auto !important;
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    height: 60px !important;
    margin: 0 auto !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border-radius: 99px !important;
    background: rgba(14, 15, 20, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  }

  /* 3. Logo - ALWAYS visible, never hidden, never collapsed! */
  .nav-logo,
  header#nav .nav-logo,
  header.nav .nav-logo,
  #nav .nav-logo,
  body.menu-open .nav-logo,
  body.menu-open header#nav .nav-logo,
  body.menu-open #nav .nav-logo,
  body.service-page-body .nav-logo,
  body.service-page-body.menu-open .nav-logo {
    display: inline-flex !important;
    align-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    pointer-events: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2100 !important;
  }

  .nav-logo img,
  header#nav .nav-logo img,
  header.nav .nav-logo img,
  #nav .nav-logo img,
  body.menu-open .nav-logo img,
  body.menu-open header#nav .nav-logo img,
  body.menu-open #nav .nav-logo img,
  body.service-page-body .nav-logo img,
  body.service-page-body.menu-open .nav-logo img {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: 30px !important;
    max-height: 30px !important;
    width: auto !important;
    max-width: clamp(140px, 45vw, 190px) !important;
    object-fit: contain !important;
  }

  /* 4. Desktop links & CTA hidden on mobile/tablet */
  .nav-links,
  .nav-cta,
  header#nav .nav-links,
  header#nav .nav-cta {
    display: none !important;
  }

  /* 5. Burger / Close Button inside the pill (Right Side Corner) */
  .burger,
  header#nav .burger,
  #nav .burger,
  body.menu-open .burger,
  body.menu-open header#nav .burger,
  body.menu-open #nav .burger {
    display: flex !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    position: relative !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2101 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .burger:hover,
  header#nav .burger:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
  }

  /* Two crisp hamburger lines contained INSIDE the 40px circle button */
  .burger i,
  header#nav .burger i,
  #nav .burger i {
    position: absolute !important;
    left: 11px !important;
    right: auto !important;
    width: 18px !important;
    height: 2px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    pointer-events: none !important;
    transition: transform 0.32s cubic-bezier(.7, 0, .2, 1), top 0.32s cubic-bezier(.7, 0, .2, 1), opacity 0.2s ease !important;
    transform-origin: center center !important;
  }

  /* Closed State: 2 parallel white lines inside the circle */
  .burger i:nth-child(1),
  header#nav .burger i:nth-child(1),
  #nav .burger i:nth-child(1) {
    top: 14px !important;
    transform: none !important;
  }

  .burger i:nth-child(2),
  header#nav .burger i:nth-child(2),
  #nav .burger i:nth-child(2) {
    top: 24px !important;
    transform: none !important;
  }

  /* OPEN STATE: Clean, crisp "✕" Cross in the right side corner circle button */
  .burger.on,
  body.menu-open .burger,
  body.menu-open header#nav .burger,
  body.menu-open #nav .burger {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
  }

  .burger.on i:nth-child(1),
  .burger.on i:first-child,
  body.menu-open .burger i:nth-child(1),
  body.menu-open header#nav .burger i:nth-child(1),
  body.menu-open #nav .burger i:nth-child(1) {
    top: 19px !important;
    left: 11px !important;
    width: 18px !important;
    transform: rotate(45deg) !important;
  }

  .burger.on i:nth-child(2),
  .burger.on i:last-child,
  body.menu-open .burger i:nth-child(2),
  body.menu-open header#nav .burger i:nth-child(2),
  body.menu-open #nav .burger i:nth-child(2) {
    top: 19px !important;
    left: 11px !important;
    width: 18px !important;
    transform: rotate(-45deg) !important;
  }

  /* 6. Remove redundant / conflicting pseudo-elements */
  .mnav::before,
  #mnav::before,
  body.menu-open .mnav::before,
  body.menu-open #mnav::before,
  .mnav::after,
  #mnav::after,
  body.menu-open .mnav::after,
  body.menu-open #mnav::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  /* 7. Mobile Drawer Container */
  .mnav,
  #mnav {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 1950 !important;
    background: #0B0C10 !important;
    padding: 85px clamp(1.5rem, 5vw, 3rem) 2.5rem !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 640px) {
  .nav .nav-in,
  #nav .nav-in,
  header.nav .nav-in,
  header#nav .nav-in {
    width: calc(100% - 20px) !important;
    height: 56px !important;
    padding: 0 12px !important;
  }

  .nav-logo img,
  header#nav .nav-logo img {
    height: 27px !important;
    max-height: 27px !important;
    max-width: clamp(130px, 46vw, 175px) !important;
  }

  .burger,
  header#nav .burger {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .burger i,
  header#nav .burger i,
  #nav .burger i {
    left: 10px !important;
    width: 18px !important;
  }

  .burger i:nth-child(1),
  header#nav .burger i:nth-child(1),
  #nav .burger i:nth-child(1) {
    top: 13px !important;
  }

  .burger i:nth-child(2),
  header#nav .burger i:nth-child(2),
  #nav .burger i:nth-child(2) {
    top: 23px !important;
  }

  .burger.on i:nth-child(1),
  .burger.on i:first-child,
  body.menu-open .burger i:nth-child(1),
  body.menu-open header#nav .burger i:nth-child(1) {
    top: 18px !important;
    left: 10px !important;
  }

  .burger.on i:nth-child(2),
  .burger.on i:last-child,
  body.menu-open .burger i:nth-child(2),
  body.menu-open header#nav .burger i:nth-child(2) {
    top: 18px !important;
    left: 10px !important;
  }

  .mnav,
  #mnav {
    padding-top: 78px !important;
  }
}


/* FINAL FIX: make the CHAMELEO wordmark clearly visible below the legal footer row. */
footer.foot>.foot-word,
.foot>.foot-word {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-height: clamp(4rem, 14vw, 13rem) !important;
  height: auto !important;
  margin: clamp(1.5rem, 3vw, 3rem) 0 0 !important;
  padding: 0 1rem 0.08em !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  white-space: nowrap !important;
  font-family: var(--brand-display, 'Bricolage Grotesque', sans-serif) !important;
  font-size: clamp(3rem, 12vw, 13rem) !important;
  font-weight: 800 !important;
  line-height: 0.9 !important;
  letter-spacing: 15% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

footer.foot>.foot-word span,
.foot>.foot-word span {
  display: inline-block !important;
  flex: 0 0 auto !important;
  color: #303137 !important;
  opacity: 1 !important;
  visibility: visible !important;
  font: inherit !important;
}

@media (max-width: 768px) {

  footer.foot>.foot-word,
  .foot>.foot-word {
    min-height: 3.5rem !important;
    font-size: clamp(2.5rem, 13vw, 5rem) !important;
    margin-top: 1.5rem !important;
    padding-inline: 0.5rem !important;
  }
}

/* HOMEPAGE ONLY: prevent the final CHAMELEO letter from being clipped. */
body.home-page footer.foot {
  overflow: visible !important;
}

body.home-page footer.foot>.foot-word {
  width: 100% !important;
  max-width: 100% !important;
  justify-content: center !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
  font-size: clamp(3rem, 10.8vw, 13rem) !important;
  letter-spacing: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

body.home-page footer.foot>.foot-word span {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

@media (max-width: 768px) {
  body.home-page footer.foot>.foot-word {
    font-size: clamp(2.5rem, 12vw, 5rem) !important;
  }
}

/* Career page header: keep nav labels stationary; hover changes color only. */
body#top header.nav .nav-links a.roll:hover span,
body#top header.nav .nav-links a.roll:focus-visible span,
body#top header.nav .nav-links a.roll.active span {
  transform: none !important;
}

body#top header.nav .nav-links a.roll:hover::after,
body#top header.nav .nav-links a.roll:focus-visible::after {
  display: none !important;
  opacity: 0 !important;
  transform: none !important;
}

body#top header.nav .nav-links a.roll:hover,
body#top header.nav .nav-links a.roll:hover span,
body#top header.nav .nav-links a.roll:focus-visible,
body#top header.nav .nav-links a.roll:focus-visible span {
  color: #E5162B !important;
}

/* 6. GLOBAL FOOTER SOCIALS & DRAWER UTILITIES */
.foot-soc-btn svg {
  width: 17px !important;
  height: 17px !important;
  display: block;
}

.sect-head {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.copyright {
  font-size: 0.85rem;
  color: var(--on-dark-dim, #9A9EA8);
}

.drawer,
.drawer-footer {
  position: relative;
}

/* Hardware acceleration to prevent animation flickering across browsers */
.reveal,
.btn,
.nav,
.foot,
#scrollProgress,
#glowTracker,
.float-btn {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Footer styles (.cg-footer, .cg-cols, etc.) are isolated inside includes/footer.html */


/* ============================================================
   GLOBAL RESPONSIVE SECTION PADDING ACROSS ALL PAGES
   Tablet (769px to 1024px): 40px top and bottom padding
   Mobile (<= 768px): 30px top and bottom padding
   ============================================================ */

/* Tablet Breakpoint (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --sect: 40px !important;
    --sec-pad: 40px !important;
    --sec-pad-top: 40px !important;
    --sec-pad-bot: 40px !important;
  }

  main>section:not(.hero):not(.agency-hero-section):not(.about-page-hero):not(.service-hero-bg):not(.blogs-hero):not(.page-hero):not(.terms-section):not(.career-hero):not(.privacy-section),
  section:not(.hero):not(.agency-hero-section):not(.about-page-hero):not(.service-hero-bg):not(.blogs-hero):not(.page-hero):not(.terms-section):not(.career-hero):not(.privacy-section),
  .section:not(.hero):not(.agency-hero-section):not(.about-page-hero):not(.service-hero-bg):not(.blogs-hero):not(.page-hero):not(.terms-section):not(.career-hero):not(.privacy-section),
  .section.dark:not(.hero):not(.agency-hero-section):not(.about-page-hero):not(.service-hero-bg):not(.blogs-hero):not(.page-hero):not(.terms-section):not(.career-hero):not(.privacy-section),
  .section.darker:not(.hero):not(.agency-hero-section):not(.about-page-hero):not(.service-hero-bg):not(.blogs-hero):not(.page-hero):not(.terms-section):not(.career-hero):not(.privacy-section),
  .section.light:not(.hero):not(.agency-hero-section):not(.about-page-hero):not(.service-hero-bg):not(.blogs-hero):not(.page-hero):not(.terms-section):not(.career-hero):not(.privacy-section),
  .sheet:not(.hero):not(.agency-hero-section):not(.about-page-hero):not(.service-hero-bg):not(.blogs-hero):not(.page-hero):not(.terms-section):not(.career-hero):not(.privacy-section) {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    margin-top: 0 !important;
  }

  #hero,
  .hero,
  section.hero,
  .section.hero,
  .section.hero.dark,
  .agency-hero-section,
  .about-page-hero,
  .service-hero-bg,
  .blogs-hero,
  .page-hero,
  .terms-section,
  .career-hero,
  .privacy-section,
  main>section:first-of-type,
  #main>section:first-of-type {
    padding-top: clamp(150px, 17vw, 185px) !important;
    padding-bottom: 40px !important;
  }

  /* Reduce top padding specifically for blog pages on tablet */
  body.blogs-page #main,
  body.blogs-page main,
  .blogs-page #main {
    padding-top: 85px !important;
  }

  body.blogs-page #main>section:first-of-type,
  body.blogs-page main>section:first-of-type,
  body.blogs-page .blog-hero,
  body.blogs-page #blogs,
  .blogs-page #blogs {
    padding-top: 25px !important;
    padding-bottom: 40px !important;
  }

  body.blog-single-page .blog-hero-header,
  body.blog-single-page .blog-single-header,
  .blog-live-page .blog-hero-banner {
    padding-top: 100px !important;
  }
}

/* Mobile Breakpoint (<= 768px) */
@media (max-width: 768px) {
  :root {
    --sect: 30px !important;
    --sec-pad: 30px !important;
    --sec-pad-top: 30px !important;
    --sec-pad-bot: 30px !important;
  }

  main>section:not(.hero):not(.agency-hero-section):not(.about-page-hero):not(.service-hero-bg):not(.blogs-hero):not(.page-hero):not(.terms-section):not(.career-hero):not(.privacy-section),
  section:not(.hero):not(.agency-hero-section):not(.about-page-hero):not(.service-hero-bg):not(.blogs-hero):not(.page-hero):not(.terms-section):not(.career-hero):not(.privacy-section),
  .section:not(.hero):not(.agency-hero-section):not(.about-page-hero):not(.service-hero-bg):not(.blogs-hero):not(.page-hero):not(.terms-section):not(.career-hero):not(.privacy-section),
  .section.dark:not(.hero):not(.agency-hero-section):not(.about-page-hero):not(.service-hero-bg):not(.blogs-hero):not(.page-hero):not(.terms-section):not(.career-hero):not(.privacy-section),
  .section.darker:not(.hero):not(.agency-hero-section):not(.about-page-hero):not(.service-hero-bg):not(.blogs-hero):not(.page-hero):not(.terms-section):not(.career-hero):not(.privacy-section),
  .section.light:not(.hero):not(.agency-hero-section):not(.about-page-hero):not(.service-hero-bg):not(.blogs-hero):not(.page-hero):not(.terms-section):not(.career-hero):not(.privacy-section),
  .sheet:not(.hero):not(.agency-hero-section):not(.about-page-hero):not(.service-hero-bg):not(.blogs-hero):not(.page-hero):not(.terms-section):not(.career-hero):not(.privacy-section) {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    margin-top: 0 !important;
  }

  #hero,
  .hero,
  section.hero,
  .section.hero,
  .section.hero.dark,
  .agency-hero-section,
  .about-page-hero,
  .service-hero-bg,
  .blogs-hero,
  .page-hero,
  .terms-section,
  .career-hero,
  .privacy-section,
  main>section:first-of-type,
  #main>section:first-of-type {
    padding-top: clamp(145px, 22vw, 175px) !important;
    padding-bottom: 30px !important;
  }

  /* Reduce top padding specifically for blog pages on mobile */
  body.blogs-page #main,
  body.blogs-page main,
  .blogs-page #main {
    padding-top: 75px !important;
  }

  body.blogs-page #main>section:first-of-type,
  body.blogs-page main>section:first-of-type,
  body.blogs-page .blog-hero,
  body.blogs-page #blogs,
  .blogs-page #blogs {
    padding-top: 20px !important;
    padding-bottom: 30px !important;
  }

  body.blog-single-page .blog-hero-header,
  body.blog-single-page .blog-single-header,
  .blog-live-page .blog-hero-banner {
    padding-top: 90px !important;
  }

  /* Prevent text clipping / overflow across devices */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
    word-break: normal;
  }

  .wrap,
  .container {
    box-sizing: border-box;
    max-width: 100%;
  }
}