/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --navy:       #13294B;
  --navy-2:     #1D3A63;
  --navy-tint:  #EEF2F8;
  --gold:       #F3992E;
  --gold-lt:    #FFAB48;
  --gold-d:     #D97F16;
  --charcoal:   #2A2A31;
  --grey:       #484848;

  --paper:      #FFFFFF;
  --mist:       #F5F5F7;
  --line:       #E4E4EA;
  --mist-2:     #ECECF1;   /* watermark on mist */
  --tint-2:     #E2E9F4;   /* watermark on navy tint */
  --err:        #FF9D9D;
  --err-text:   #FFD0D0;
  --err-line:   #E46A6A;

  --sans:   'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:   'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script: 'Caveat', cursive;

  --h1: clamp(2.3rem, 6.4vw, 4.6rem);
  --h2: clamp(1.8rem, 4vw, 3rem);
  --h3: clamp(1.05rem, 1.8vw, 1.28rem);

  --r-card: 24px;
  --r-sm:   14px;
  --pill:   999px;

  --shell: 1200px;
  --gut:   20px;
  --pad:   clamp(60px, 8vw, 110px);
}


/* ============================================================
   2. BASE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }

body{
  margin: 0;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--grey);
  background: var(--paper);
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block }
a        { color: inherit; text-decoration: none }
ul       { margin: 0; padding: 0; list-style: none }
p        { margin: 0 }

button, input, textarea, select { font: inherit; color: inherit }

h1, h2, h3, h4{
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--charcoal);
}

:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

.shell{
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sr{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   3. SHARED — sections, eyebrow, watermark, buttons
   ============================================================ */
.sec{
  position: relative;
  padding-block: var(--pad);
  overflow: hidden;
}
.sec--navy     { background: var(--navy);      color: #fff }
.sec--charcoal { background: var(--charcoal);  color: #fff }
.sec--mist     { background: var(--mist) }
.sec--tint     { background: var(--navy-tint) }

/* ghost watermark type behind headings */
.mark{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(3.6rem, 12vw, 9.5rem);
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;
  color: var(--mist);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.on-dark .mark { color: rgba(255,255,255,.06) }
.sec--mist .mark { color: var(--mist-2) }
.sec--tint .mark { color: var(--tint-2) }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-d);
}
.eyebrow::before{
  content: "";
  width: 24px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.on-dark .eyebrow { color: var(--gold) }

.h-sec { font-size: var(--h2) }
.h-sec .hi { color: var(--gold-d) }
.on-dark .h-sec,
.on-dark h3,
.on-dark h4 { color: #fff }
.on-dark .h-sec .hi { color: var(--gold) }

.lead{ max-width: 60ch; margin-top: 15px; color: var(--grey) }
.on-dark .lead { color: rgba(255,255,255,.76) }

.sec-head{ position: relative; z-index: 1 }
.sec-head--center{ text-align: center; max-width: 780px; margin-inline: auto }
.sec-head--center .lead { margin-inline: auto }
.sec-head--split{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

/* --- knob button: the signature pill with a rotating circle --- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 24px;
  border: 0;
  border-radius: var(--pill);
  background: var(--charcoal);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.btn:hover { transform: translateY(-2px) }

.btn .knob{
  width: 36px; height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  transition: transform .28s ease, background .2s ease;
}
.btn:hover .knob { transform: rotate(45deg) }
.btn .knob svg   { width: 14px; height: 14px }

.btn--gold  { background: var(--gold); color: var(--navy) }
.btn--gold .knob { background: var(--navy); color: var(--gold) }
.btn--gold:hover { background: var(--gold-lt) }

.btn--navy  { background: var(--navy); color: #fff }
.btn--navy:hover { background: var(--navy-2) }

.btn--light { background: #fff; color: var(--charcoal) }
.btn--light .knob { background: var(--gold); color: var(--navy) }

.btn--ghost{
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--charcoal);
  padding: 12px 26px;
}
.on-dark .btn--ghost { border-color: rgba(255,255,255,.36); color: #fff }
.on-dark .btn--ghost:hover { background: rgba(255,255,255,.10) }


/* ============================================================
   4. HEADER — floating pill bar
   ============================================================ */
.hdr{
  position: sticky;
  top: 0;
  z-index: 70;
  padding-top: 16px;
  transition: padding .3s ease;
}
.hdr.stuck { padding-top: 8px }

.hdr-bar{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 9px 9px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  transition: box-shadow .3s ease;
}
.hdr.stuck .hdr-bar { box-shadow: 0 12px 36px rgba(19,41,75,.12) }

.brand{ display: flex; flex-direction: column; align-items: flex-start; line-height: 1 }
.brand .arc  { width: 66px; margin-bottom: 1px }
.brand .word{
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: .01em;
  color: var(--charcoal);
}

.nav{ margin-inline: auto; display: flex; gap: 4px }
.nav a{
  padding: 9px 15px;
  border-radius: var(--pill);
  font-family: var(--sans);
  font-weight: 500;
  font-size: .94rem;
  color: var(--grey);
  transition: color .2s, background .2s;
}
.nav a:hover         { color: var(--navy) }
.nav a[aria-current] { color: var(--navy); background: var(--navy-tint); font-weight: 600 }

.burger{
  display: none;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--mist);
  cursor: pointer;
  place-items: center;
}
.burger span{
  display: block;
  width: 18px; height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  position: relative;
  transition: .25s;
}
.burger span::before,
.burger span::after{
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: .25s;
}
.burger span::before { top: -6px }
.burger span::after  { top:  6px }
.burger[aria-expanded="true"] span         { background: transparent }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg) }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg) }

@media (max-width: 1020px){
  .burger { display: grid }
  .nav{
    position: absolute;
    top: calc(100% + 10px);
    left: var(--gut);
    right: var(--gut);
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 20px 44px rgba(19,41,75,.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: .22s ease;
  }
  .nav.open { opacity: 1; visibility: visible; transform: none }
  .nav a    { padding: 12px 16px }
  .hdr-bar > .btn { display: none }
}


/* ============================================================
   5. HERO
   ============================================================ */
.hero{
  position: relative;
  padding-top: clamp(34px, 4.5vw, 58px);
  padding-bottom: 0;
  text-align: center;
  overflow: hidden;
}
.hero h1{
  font-size: var(--h1);
  letter-spacing: -.038em;
  max-width: 17ch;
  margin-inline: auto;
}
.hero h1 .u{ color: var(--navy); position: relative; white-space: nowrap }
.hero h1 .u::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .02em;
  height: .055em;
  background: var(--gold);
  border-radius: 4px;
}

.hero-stage{
  position: relative;
  margin-top: clamp(30px, 4vw, 52px);
  padding-bottom: clamp(20px, 3vw, 36px);
}
/* navy slab behind the slider — the shape from the original */
/* soft mat behind the slider — deliberately LIGHT so it reads as a
   backdrop rather than merging with the navy card. Stops short of the
   controls so the dots and arrows always sit on white. */
.slider::before{
  content: "";
  position: absolute;
  top: -26px;
  left: -26px;
  right: -26px;
  bottom: 72px;
  background: var(--navy-tint);
  border-radius: 34px;
  z-index: -1;
}
@media (max-width: 620px){
  .slider::before{ top: -16px; left: -16px; right: -16px }
}

/* ---- hero slider (→ one Elementor Slides widget) ---- */
.slider{
  position: relative;
  z-index: 2;
  width: min(620px, 88vw);
  margin-inline: auto;
}
.slider-frame{
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--navy-2);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 20px 46px rgba(19,41,75,.22);
}
.slider-rail{ display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1) }
.slide{
  flex: 0 0 100%;
  padding: clamp(26px, 3.6vw, 42px);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  color: #fff;
}
.slide .tagline{
  font-family: var(--sans);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.slide .big{
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.8rem, 7vw, 4.2rem);
  line-height: .92;
  letter-spacing: -.045em;
  color: #fff;
}
.slide .big span { color: var(--gold) }
.slide h2 { color: #fff; font-size: 1.2rem; margin-top: 14px }
.slide p  { margin-top: 10px; font-size: .92rem; color: rgba(255,255,255,.75); max-width: 42ch }
.slide .who{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .83rem;
  color: rgba(255,255,255,.62);
}

.slider-foot{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}
.dots{ display: flex; gap: 7px }
.dots button{
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: .22s;
}
.dots button.on { background: var(--gold-d); width: 26px; border-radius: var(--pill) }

.slider-arrows{ display: flex; gap: 8px }
.arrow{
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--charcoal);
  cursor: pointer;
  transition: .22s;
}
.arrow:hover { background: var(--navy); border-color: var(--navy); color: #fff }
.arrow svg   { width: 16px; height: 16px }

/* ---- floating hero bits ---- */
.hero-clients{
  position: absolute;
  left: 0;
  bottom: 30%;
  z-index: 3;
  text-align: left;
}
.hero-clients .n{
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--charcoal);
}
.hero-clients .l { font-size: .82rem; margin-bottom: 10px }

.avatars{ display: flex; align-items: center }
.avatars span{
  width: 38px; height: 38px;
  margin-left: -11px;
  display: grid;
  place-items: center;
  border: 2.5px solid #fff;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .74rem;
}
.avatars span:first-child   { margin-left: 0 }
.avatars span:nth-child(2)  { background: var(--navy-2) }
.avatars span:nth-child(3)  { background: var(--charcoal) }
.avatars span:nth-child(4)  { background: var(--grey) }
.avatars .more { background: var(--gold); color: var(--navy) }

/* rotating award badge */
.badge{
  position: absolute;
  right: 0;
  top: -2%;
  z-index: 3;
  width: clamp(88px, 10vw, 124px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--charcoal);
}
.badge .ring { position: absolute; inset: 0; animation: spin 18s linear infinite }
.badge .ring text{
  fill: #fff;
  font-family: var(--sans);
  font-size: 9.2px;
  font-weight: 600;
  letter-spacing: 1.05px;
}
.badge .star { width: 34%; color: var(--gold) }

@keyframes spin { to { transform: rotate(360deg) } }

.hero-cta{
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.hero-rating{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
  font-size: .86rem;
}
.hero-rating .stars { display: flex; gap: 2px }
.hero-rating svg    { width: 15px; height: 15px; color: var(--gold) }

@media (max-width: 900px){
  .hero-clients{ position: static; text-align: center; margin-top: 26px }
  .hero-clients .avatars { justify-content: center }
  .badge { top: -8px; right: 0; }
}


/* ============================================================
   6. GOLD MARQUEE
   ============================================================ */
.strip{ background: var(--gold); padding: 15px 0; overflow: hidden }
.strip-track{ display: flex; width: max-content; animation: slide-left 32s linear infinite }
.strip:hover .strip-track,
.strip-track.paused { animation-play-state: paused }

.strip-group{ display: flex; align-items: center; gap: 30px; padding-right: 30px }
.strip-group li{
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(.95rem, 1.8vw, 1.22rem);
  color: var(--navy);
  white-space: nowrap;
}
.strip-group li::after { content: "◆"; font-size: .5em; opacity: .45 }

@keyframes slide-left { to { transform: translateX(-50%) } }


/* ============================================================
   7. SERVICES — circular cards
   ============================================================ */
.svc-grid{
  position: relative;
  z-index: 1;
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  justify-items: center;
}
/* last row of two, centred like the original */
.svc-grid .svc:nth-child(4){ grid-column: 1 / 2; justify-self: end }
.svc-grid .svc:nth-child(5){ grid-column: 2 / 3 }

.svc{
  width: 100%;
  max-width: 330px;
  aspect-ratio: 1;
  padding: 11% 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.20);
  transition: background .3s ease, transform .3s ease;
}
.svc:hover,
.svc.is-lit { background: #fff; transform: translateY(-6px) }
.svc:hover h3, .svc.is-lit h3 { color: var(--navy) }
.svc:hover p,  .svc.is-lit p  { color: var(--grey) }
.svc:hover .svc-n, .svc.is-lit .svc-n { background: var(--gold); color: var(--navy) }
.svc:hover .more,  .svc.is-lit .more  { color: var(--gold-d) }

.svc-n{
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 15px;
  border-radius: 16px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.2rem;
  transition: .3s;
}
.svc h3 { font-size: var(--h3); color: #fff; margin-bottom: 7px }
.svc p  { font-size: .85rem; color: rgba(255,255,255,.72); max-width: 26ch }
.svc .more{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .84rem;
  color: var(--gold);
}
.svc .more::after { content: "→"; transition: transform .25s }
.svc:hover .more::after { transform: translateX(4px) }

@media (max-width: 900px){
  .svc-grid{ grid-template-columns: 1fr 1fr }
  .svc-grid .svc:nth-child(4),
  .svc-grid .svc:nth-child(5){ grid-column: auto; justify-self: center }
}
@media (max-width: 620px){
  .svc-grid{ grid-template-columns: 1fr; max-width: 340px; margin-inline: auto }
}


/* ============================================================
   8. PROBLEM
   ============================================================ */
.problem-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.problem h2 { font-size: var(--h2); max-width: 18ch }
.problem-body p + p { margin-top: 18px }
.problem-body strong { color: var(--charcoal) }
.problem-pull{
  margin-top: 26px;
  padding: 22px 26px;
  background: var(--navy-tint);
  border-left: 5px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy);
}
@media (max-width: 820px){ .problem-grid { grid-template-columns: 1fr } }


/* ============================================================
   9. ABOUT — big number block + vertical name
   ============================================================ */
.about{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.yrs{ display: flex; align-items: stretch; gap: 18px }
.yrs .vname{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1rem, 1.9vw, 1.45rem);
  letter-spacing: .08em;
  color: var(--charcoal);
}
.yrs-box{
  flex: 1;
  min-height: clamp(240px, 30vw, 340px);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--gold);
  border-radius: 8px;
}
.yrs-box .n{
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(6rem, 15vw, 11rem);
  line-height: .8;
  letter-spacing: -.055em;
  color: var(--navy);
}
.yrs-box .l{
  margin-top: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--navy);
}

.stats{ display: flex; gap: 44px; flex-wrap: wrap; margin: 26px 0 30px }
.stats .n{
  font-family: var(--sans);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: var(--navy);
}
.stats .l { font-size: .85rem }

.about-foot{ display: flex; align-items: center; gap: 26px; flex-wrap: wrap }
.sign{ font-family: var(--script); font-size: 1.9rem; color: var(--charcoal); line-height: 1 }

.logos{
  position: relative;
  z-index: 1;
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.logos .cap { font-size: .82rem; margin-right: 6px }
/* SWAP: replace these text pills with real client logo <img> files */
.logos .logo{
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-family: var(--sans);
  font-weight: 600;
  font-size: .85rem;
  color: var(--charcoal);
}

@media (max-width: 860px){ .about { grid-template-columns: 1fr } }


/* ============================================================
   10. GROWTH LOOP
   ============================================================ */
.loop{
  position: relative;
  z-index: 1;
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.loop::before{
  content: "";
  position: absolute;
  top: 33px;
  left: 9%;
  right: 9%;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--gold) 0 10px, transparent 10px 20px);
  z-index: 0;
}
.loop-step{ position: relative; z-index: 1; text-align: center }
.loop-step .ring{
  width: 68px; height: 68px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--gold);
  border-radius: 50%;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--gold-d);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.loop-step:hover .ring{
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-4px);
}
.loop-step h3 { font-size: var(--h3); margin-bottom: 8px }
.loop-step p  { font-size: .89rem }

.loop-result{
  position: relative;
  z-index: 1;
  margin-top: 44px;
  text-align: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--navy);
}
.loop-result .hi { color: var(--gold-d) }

@media (max-width: 860px){
  .loop { grid-template-columns: 1fr 1fr }
  .loop::before { display: none }
}
@media (max-width: 480px){ .loop { grid-template-columns: 1fr } }


/* ============================================================
   11. WHY CIMAC
   ============================================================ */
.why-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 46px;
  margin-top: 42px;
}
.why-item{
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(19,41,75,.12);
}
.why-item .n{
  flex: none;
  width: 36px;
  padding-top: 2px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--gold-d);
  line-height: 1.2;
}
.why-item h3 { font-size: var(--h3); margin-bottom: 5px }
.why-item p  { font-size: .9rem }

@media (max-width: 780px){ .why-grid { grid-template-columns: 1fr } }


/* ============================================================
   12. WHITE-LABEL BAND
   ============================================================ */
.wl{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.wl h2 { color: #fff; font-size: var(--h2); max-width: 16ch }
.wl p  { color: rgba(255,255,255,.76); max-width: 48ch; margin-top: 14px }


/* ============================================================
   13. CASE STUDY
   ============================================================ */
.case{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
  margin-top: 46px;
}
.case-media{
  padding: clamp(30px, 4vw, 54px);
  background: var(--navy);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.case-media .metric{
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(3.6rem, 9vw, 5.6rem);
  line-height: .88;
  letter-spacing: -.045em;
  color: var(--gold);
}
.case-media .metric-l{
  margin-top: 14px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.04rem;
  color: #fff;
}
.case-media .sub { margin-top: 8px; font-size: .88rem; color: rgba(255,255,255,.7) }

.case-body{
  padding: clamp(26px, 3.5vw, 42px);
  background: var(--gold);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px }
.tags span{
  padding: 5px 13px;
  border-radius: var(--pill);
  background: var(--navy);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .72rem;
}
.case-body h3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); color: var(--navy); margin-bottom: 10px }
.case-body p  { font-size: .92rem; color: rgba(19,41,75,.82); margin-bottom: 22px }
.case-body .btn { align-self: flex-start; background: var(--navy) }
.case-body .btn .knob { background: var(--gold); color: var(--navy) }

@media (max-width: 860px){ .case { grid-template-columns: 1fr } }


/* ============================================================
   14. PRICING
   ============================================================ */
.price-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .85fr 1fr 1fr;
  gap: 22px;
  align-items: center;
  margin-top: 50px;
}
.price-note{ padding: 30px 26px; background: var(--mist); border-radius: var(--r-card) }
.price-note h3 { font-size: 1.3rem; margin-bottom: 10px }
.price-note p  { font-size: .88rem; margin-bottom: 22px }

.plan{ padding: 30px 26px; border-radius: var(--r-card) }
.plan--dark  { background: var(--navy); color: #fff; transform: translateY(18px) }
.plan--light { background: var(--mist) }

.plan-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.plan .kind { font-family: var(--sans); font-weight: 600; font-size: .95rem; opacity: .85 }
.plan--dark .kind { color: #fff }
.plan .amt{
  margin-top: 6px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.plan--dark .amt  { color: #fff }
.plan--light .amt { color: var(--navy) }
.plan .amt small  { font-size: .85rem; font-weight: 500; opacity: .7 }

.plan .go{
  width: 38px; height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  cursor: pointer;
  transition: transform .25s ease;
}
.plan .go:hover { transform: rotate(45deg) }
.plan .go svg   { width: 14px; height: 14px }

.plan ul li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  font-size: .87rem;
}
.plan ul svg { width: 15px; height: 15px; flex: none; margin-top: 5px }
.plan--dark ul li  { color: rgba(255,255,255,.84) }
.plan--light ul li { color: var(--grey) }

@media (max-width: 940px){
  .price-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto }
  .plan--dark { transform: none }
}


/* ============================================================
   15. CONTACT
   ============================================================ */
.contact-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 64px);
}
.c-list{ margin-top: 30px; display: grid; gap: 18px }
.c-list li { display: flex; align-items: center; gap: 14px }
.c-list .ico{
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: var(--gold);
}
.c-list .ico svg { width: 18px; height: 18px }
.c-list a,
.c-list span { font-size: .92rem; color: rgba(255,255,255,.9) }
.c-list a:hover { color: var(--gold) }

.form{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.field { position: relative }
.field.wide { grid-column: 1 / -1 }
.form input,
.form textarea,
.form select{
  width: 100%;
  padding: 15px 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--r-sm);
  color: #fff;
  font-size: .93rem;
  transition: border-color .2s, background .2s;
}
.form select{
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3.5 6 4.5 4.5L12.5 6' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.form select option { background: var(--navy); color: #fff }
.form textarea { min-height: 130px; resize: vertical }
.form input::placeholder,
.form textarea::placeholder { color: rgba(255,255,255,.55) }
.form input:focus,
.form textarea:focus,
.form select:focus{
  background: rgba(255,255,255,.16);
  border-color: var(--gold);
  outline: none;
}
.form .bad { border-color: var(--err); background: rgba(255,80,80,.14) }
.err{
  display: block;
  margin-top: 5px;
  min-height: 1em;
  font-size: .76rem;
  color: var(--err-text);
}
.form-foot{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.sent { font-size: .88rem; font-weight: 500; color: var(--gold) }
.sent.no { color: var(--err-text) }

@media (max-width: 860px){ .contact-grid { grid-template-columns: 1fr } }
@media (max-width: 520px){ .form { grid-template-columns: 1fr } }


/* ============================================================
   16. TESTIMONIALS
   ============================================================ */
.quotes{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 46px;
}
.quotes .arrow { width: 52px; height: 52px; flex: none }
.quotes .arrow.next { background: var(--navy); border-color: var(--navy); color: #fff }
.quotes .arrow.next:hover { background: var(--gold); border-color: var(--gold); color: var(--navy) }

.quotes-frame{ flex: 1; overflow: hidden; border-radius: var(--r-card) }
.quotes-rail { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1) }

.quote{
  flex: 0 0 100%;
  padding: clamp(24px, 3.4vw, 42px);
  background: var(--mist);
  border-radius: var(--r-card);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(22px, 3.4vw, 44px);
  align-items: center;
}
.q-photo{ position: relative; width: clamp(130px, 17vw, 180px); flex: none }
.q-photo .frame{
  aspect-ratio: 1 / 1.15;
  border-radius: 18px;
  background: var(--navy-tint);
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--navy);
}
.q-photo .bubble{
  position: absolute;
  top: -10px; left: -10px;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  padding-top: 12px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 0;
}
.stars-row{ display: flex; align-items: center; gap: 4px; margin-bottom: 14px }
.stars-row svg { width: 16px; height: 16px; color: var(--gold) }
.stars-row b   { margin-left: 5px; font-family: var(--sans); font-size: .85rem; color: var(--charcoal) }

.quote blockquote{
  margin: 0;
  font-size: clamp(.94rem, 1.5vw, 1.05rem);
  color: var(--charcoal);
  max-width: 60ch;
}
.quote .who{
  margin-top: 18px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
}
.quote .src { font-size: .82rem }

.quotes-dots{ display: flex; justify-content: center; gap: 8px; margin-top: 24px }

@media (max-width: 780px){
  .quote { grid-template-columns: 1fr; text-align: center; justify-items: center }
  .quotes .arrow { display: none }
}


/* ============================================================
   17. BLOG
   ============================================================ */
.posts{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 46px;
}
.post { display: flex; flex-direction: column }
.post-media{
  position: relative;
  height: 168px;
  border-radius: var(--r-card);
  background: var(--navy-tint);
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* SWAP: replace the placeholder numeral with the post's featured image */
.post-media .ph{
  font-family: var(--sans);
  font-weight: 800;
  font-size: 2.4rem;
  color: rgba(19,41,75,.28);
}
.post-media .go{
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  transition: transform .25s ease;
}
.post-media .go svg { width: 15px; height: 15px }
.post:hover .post-media .go { transform: rotate(45deg) }

.post .chip{
  display: inline-block;
  align-self: flex-start;
  margin: 18px 0 12px;
  padding: 5px 13px;
  border-radius: var(--pill);
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-weight: 600;
  font-size: .72rem;
}
.post h3 { font-size: 1.06rem; line-height: 1.35; margin-bottom: 13px }
.post:hover h3 { color: var(--navy) }
.post .meta{ display: flex; align-items: center; gap: 13px; font-size: .79rem }
.post .meta i{
  width: 6px; height: 6px;
  display: block;
  border-radius: 50%;
  background: var(--gold);
}

@media (max-width: 900px){ .posts { grid-template-columns: 1fr 1fr } }
@media (max-width: 620px){ .posts { grid-template-columns: 1fr } }


/* ============================================================
   18. FAQ
   ============================================================ */
.faq{
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 46px auto 0;
  display: grid;
  gap: 14px;
}
.qa{ background: #fff; border-radius: 16px; overflow: hidden; transition: background .3s ease }
.qa.open { background: var(--gold) }

.qa-q{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(.95rem, 1.6vw, 1.06rem);
  color: var(--navy);
}
.qa-q .sign{ position: relative; width: 22px; height: 22px; flex: none }
.qa-q .sign::before,
.qa-q .sign::after{
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: transform .3s ease;
}
.qa-q .sign::after { transform: translateY(-50%) rotate(90deg) }
.qa.open .qa-q .sign::after { transform: translateY(-50%) rotate(0) }

.qa-a{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease }
.qa.open .qa-a { grid-template-rows: 1fr }
.qa-a > div { overflow: hidden }
.qa-a p{
  padding: 0 24px 22px;
  font-size: .92rem;
  color: rgba(19,41,75,.78);
  max-width: 72ch;
}


/* ============================================================
   19. FOOTER
   ============================================================ */
.foot{ background: var(--charcoal); color: rgba(255,255,255,.68) }

.foot-cta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding-block: clamp(44px, 6vw, 70px);
}
.foot-cta h2{
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  max-width: 18ch;
}
.foot-cta h2 .hi { color: var(--gold) }

.foot-grid{
  display: grid;
  grid-template-columns: 1.5fr .8fr 1fr 1.15fr;
  gap: 34px;
  padding-block: 44px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.foot h4 { color: #fff; font-size: .98rem; margin-bottom: 16px }
.foot p,
.foot a,
.foot li { font-size: .87rem }
.foot a:hover { color: var(--gold) }
.foot li { padding: 5px 0 }
.foot .brand .word { color: #fff }
.brand-note { margin-top: 14px; max-width: 34ch }

.socials{ display: flex; gap: 9px; margin-top: 20px }
.socials a{
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  color: #fff;
  transition: .2s;
}
.socials a:hover { background: var(--gold); color: var(--navy); transform: translateY(-3px) }
.socials svg { width: 15px; height: 15px }

.news{
  display: flex;
  gap: 8px;
  padding: 6px 6px 6px 18px;
  background: rgba(255,255,255,.10);
  border-radius: var(--pill);
}
.news input{ flex: 1; min-width: 0; background: none; border: 0; font-size: .87rem; color: #fff }
.news input::placeholder { color: rgba(255,255,255,.55) }
.news input:focus { outline: none }
.news button{
  width: 38px; height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  cursor: pointer;
  transition: .2s;
}
.news button:hover { background: #fff }
.news button svg { width: 15px; height: 15px }
.news.bad { outline: 2px solid var(--err-line) }
.news-msg { margin-top: 8px; min-height: 1em; font-size: .78rem; color: var(--gold) }

.foot-bar{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-block: 20px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .82rem;
}

@media (max-width: 940px){ .foot-grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 560px){ .foot-grid { grid-template-columns: 1fr } }


/* ============================================================
   20. MOTION
   ============================================================ */
.rv{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.rv.in { opacity: 1; transform: none }

@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto }
  *,
  *::before,
  *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv          { opacity: 1; transform: none }
  .strip-track { animation: none }
  .badge .ring { animation: none }
}


/* ============================================================
   21. ELEMENTOR BRIDGE
   Only needed when the page is built in Elementor. Neutralises
   Elementor's container and widget wrappers so the markup inside
   the HTML widgets renders exactly as it does in the static file.
   Harmless if Elementor is not present.
   ============================================================ */
/* Scoped to .cimac-block — the class on the section containers in the
   imported template. NOT to .cimac-page, which is on every <body>: that
   would strip padding and max-width from every normally-built Elementor
   container on the whole site. */
.e-con.cimac-block,
.e-con.cimac-block > .e-con-inner{
  max-width: none;
  padding: 0;
  margin: 0;
  --container-max-width: 100%;
}

.cimac-block .elementor-widget { width: 100%; margin: 0 }
.cimac-block .elementor-widget-html > .elementor-widget-container { margin: 0; padding: 0 }
.cimac-block { --widgets-spacing: 0px 0px }



/* Specificity note: the bridge above uses `.e-con.cimac-block > .e-con-inner`
   (3 classes). These rules must match or beat that, hence `.e-con.` here.
   Fluent Forms ships `.fluentform .ff-el-form-control` (2 classes) and loads
   AFTER this file, so every form rule below is prefixed with `.fluentform`
   to reach 3 classes and win regardless of load order. */

.e-con.cimac-contact-sec{
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
}
.e-con.cimac-contact-sec > .e-con-inner{
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  max-width: var(--shell);
  margin-inline: auto;
  padding-block: var(--pad);
  padding-inline: var(--gut);
}
.cimac-contact-sec .cimac-contact-info { position: relative; z-index: 1 }

@media (max-width: 860px){
  .e-con.cimac-contact-sec > .e-con-inner{ grid-template-columns: 1fr }
}


/* ---------- Fluent Forms, restyled to match the design ---------- */
.cimac-contact-sec .fluentform { position: relative; z-index: 1 }

.cimac-contact-sec .fluentform .ff-el-form-control{
  width: 100%;
  padding: 15px 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--r-sm);
  color: #fff;
  font-family: var(--body);
  font-size: .93rem;
  box-shadow: none;
  transition: border-color .2s, background .2s;
}
.cimac-contact-sec .fluentform .ff-el-form-control::placeholder{
  color: rgba(255,255,255,.55);
  opacity: 1;
}
.cimac-contact-sec .fluentform .ff-el-form-control:focus{
  background: rgba(255,255,255,.16);
  border-color: var(--gold);
  box-shadow: none;
  outline: none;
}

/* select needs its own arrow, since the native one is invisible on navy */
.cimac-contact-sec .fluentform select.ff-el-form-control{
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3.5 6 4.5 4.5L12.5 6' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.cimac-contact-sec .fluentform select.ff-el-form-control option{
  background: var(--navy);
  color: #fff;
}

.cimac-contact-sec .fluentform .ff-el-input--label label,
.cimac-contact-sec .fluentform .ff-el-form-check-label{
  font-family: var(--sans);
  font-weight: 600;
  font-size: .82rem;
  color: rgba(255,255,255,.82);
}
.cimac-contact-sec .fluentform .ff-el-input--content .ff-el-form-check-label{
  font-weight: 400;
  font-family: var(--body);
}

.cimac-contact-sec .fluentform input[type="checkbox"],
.cimac-contact-sec .fluentform input[type="radio"]{ accent-color: var(--gold) }

.cimac-contact-sec .fluentform .ff-btn-submit{
  padding: 14px 32px;
  border: 0;
  border-radius: var(--pill);
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.cimac-contact-sec .fluentform .ff-btn-submit:hover{
  background: var(--gold-lt);
  transform: translateY(-2px);
}

.cimac-contact-sec .fluentform .error,
.cimac-contact-sec .fluentform .text-danger,
.cimac-contact-sec .fluentform .ff-el-is-error .error-text{ color: var(--err-text) }

.cimac-contact-sec .fluentform .ff-message-success{
  padding: 16px 20px;
  background: rgba(243,153,46,.14);
  border: 1px solid var(--gold);
  border-radius: var(--r-sm);
  color: #fff;
}