/* ==========================================================================
   LAMI — Website
   Fonts: Poppins   |   Palette: green #007c62 / #009b7a, blue #00a0ff, ink #0f172a
   Desktop reference frame: 1600px (content 1400px centered => 100px side gutters)
   ========================================================================== */

:root {
  --green: #007c62;
  --green-accent: #009b7a;
  --blue: #00a0ff;
  --ink: #0f172a;
  --gray: #575d6a;
  --gray-2: #4d5c69;
  --card-bg: rgba(241, 249, 246, 0.5);
  --card-border: rgba(0, 155, 122, 0.24);
  --footer-bg: #081613;
  --footer-text: #9fbbb4;
  --footer-label: #5fd9bd;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ===================== PAGE TRANSITION =====================
   Fade the page in on load and out just before navigating, so moving between
   pages doesn't snap. Opacity-only, so it never shifts layout.
   `backwards` (not `both`) is deliberate: the animated value must stop applying
   once it finishes, otherwise it would out-rank the .is-leaving transition. */
@keyframes pageFadeIn { from { opacity: 0; } }

body {
  animation: pageFadeIn 300ms ease backwards;
}

body.is-leaving {
  opacity: 0;
  transition: opacity 280ms ease;
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  body.is-leaving { opacity: 1; transition: none; }
}

/* Anchor targets stop clear of the fixed header instead of under it */
section[id],
article[id] { scroll-margin-top: 140px; }

.container {
  width: 100%;
  max-width: 1448px; /* 1400 content + 2 × 24 gutter */
  margin-inline: auto;
  padding-inline: 24px;
}

.blue { color: var(--blue); }
.blue-strong { color: var(--blue); font-weight: 600; }

/* ===================== HEADER ===================== */
/* Fixed from the start: transparent over the page at scroll-top, then
   condenses into a blurred white bar once past --header-threshold (50px).
   Staying fixed at all times avoids any layout shift when the state flips. */
.header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* padding-top: 24px; */
  padding-bottom: 24px;
  /* Let the page beneath stay clickable through the wrap's empty gutters */
  pointer-events: none;
  transition: padding-top 350ms cubic-bezier(0.4, 0, 0.2, 1),
              padding-bottom 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.header-wrap.scrolled {
  padding-top:0px;
  padding-bottom: 12px;
}

/* Offsets the fixed header so content starts exactly where it did in flow */
body { padding-top: 126px; }

.fill-header {
  background: #fff;
  border-radius: 0px;
  padding: 24px;
  box-shadow: 0 8px 28px rgba(15, 38, 51, 10%);
  pointer-events: auto;
  transition: background-color 350ms ease,
              box-shadow 350ms ease,
              backdrop-filter 350ms ease,
              padding 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  
  
  
  
  
  
}

.header-wrap.scrolled .fill-header {
  background: #fff;
  box-shadow: 0 8px 28px rgba(15, 38, 51, 0.1);
  padding: 14px 24px;
}

.logo img {
  width: 130px;
  height: 52px;
  transform-origin: left center;
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.header-wrap.scrolled .logo img { transform: scale(0.9); }

.header-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  padding: 10px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Animated underline */
.nav-link::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease-in-out;
}

/* Hover */
.nav-link:hover {
  color: var(--green);
}

.nav-link:hover::after {
  transform: scaleX(1);
}

/* Active Menu */
.nav-link.active {
  color: var(--green);
}

.nav-link.active::after {
  transform: scaleX(1);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease-in-out;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--green);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 100px;
  padding: 7px 7px 7px 20px;
  white-space: nowrap;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.35s ease;
}

.btn-contact:hover {
  transform: translateY(0px);
}

.btn-contact-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #ffffff;
  border-radius: 100px;
  overflow: hidden;
}

.btn-contact-icon .arrow {
  position: absolute;
  width: 20px;
  height: 20px;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

/* Default Arrow */
.arrow-1 {
  transform: translateX(0);
  opacity: 1;
}

/* Hidden Arrow */
.arrow-2 {
  transform: translateX(24px);
  opacity: 0;
}

/* Hover Animation */
.btn-contact:hover .arrow-1 {
  transform: translateX(-24px);
  opacity: 0;
}

.btn-contact:hover .arrow-2 {
  transform: translateX(0);
  opacity: 1;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}

/* ===================== SHARED : EYEBROW + SECTION HEADS ===================== */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
}

.eyebrow-line {
  position: relative;
  width: 100px;
  height: 1px;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(0, 141, 108, 0.18);
}

.eyebrow-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green);

  transform: scaleX(0);
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}

/* Left Line */
.eyebrow-line:first-child::before{
  transform-origin: right;
}

/* Right Line */
.eyebrow-line:last-child::before{
  transform-origin: left;
}

/* Active when section enters viewport */
.eyebrow.animate .eyebrow-line::before{
  transform: scaleX(1);
}

.eyebrow-line--wide{
  width:140px;
}

.eyebrow-line--xl{
  width:200px;
}

.eyebrow-text{
  font-size:14px;
  font-weight:600;
  color:var(--green);
  text-transform:uppercase;
  letter-spacing:.56px;
  white-space:nowrap;

  opacity:0;
  transform:translateY(10px);
  transition:all .6s ease .25s;
}

.eyebrow.animate .eyebrow-text{
  opacity:1;
  transform:translateY(0);
}

.eyebrow--lg .eyebrow-text{
  font-size:20px;
  letter-spacing:.8px;
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.section-title {
  margin: 0;
  font-size: 40px;
  font-weight: 600;
  line-height: 47px;
  letter-spacing: -0.84px;
  color: var(--ink);
}
.section-sub {
  margin: 0;
  max-width: 980px;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--gray);
}
.section-sub--clients {
  max-width: none;
  color: var(--gray-2);
}

/* ===================== INTRO ===================== */
.intro {
  margin-top:60px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.intro-top {
  display: flex;
  align-items: stretch;
  gap: 64px;
}

.intro-col {
  flex: 1;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  /* Remove gap */
  gap: 0;
}

.intro-block {
  flex: 1; /* Important */

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;

  width: 100%;
  text-align: center;
}

.intro-heading {
  margin: 0;
  font-size: 44px;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: -0.95px;
  color: var(--ink);
}

.intro-para {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  padding-bottom: 14px;
  color: var(--gray);
}

.intro-para--wide {
  max-width: 998px;
  line-height: 1.4;
}

.intro-divider {
  position: relative;
  width: 1px;
  flex-shrink: 0;
  align-self: stretch;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Vertical Line */
.intro-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(0, 155, 122, 0.18);
}

/* Center Dot — shared by the intro, solution and contact dividers */
.intro-divider-dot,
.solution-divider-dot,
.contact-divider-dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;

  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer Glow */
.intro-divider-dot::before,
.solution-divider-dot::before,
.contact-divider-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;

  width: 14px;
  height: 14px;

  transform: translate(-50%, -50%);
  border-radius: 50%;

  background: rgba(0, 155, 122, 0.12);
  z-index: -1;
}

/* Optional Soft Glow */
.intro-divider-dot::after,
.solution-divider-dot::after,
.contact-divider-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;

  width: 6px;
  height:6px;

  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #007C62;

  box-shadow: 0 0 12px rgba(0, 155, 122, 0.18);
  z-index: -1;
}

.intro-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.btn-readmore {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: auto;
  padding: 8px 16px;

  border: 1px solid var(--green);
  border-radius: 59px;
  background: #fff;
  color: var(--green);

  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;

  transition: color .4s cubic-bezier(.22,1,.36,1),
              border-color .4s cubic-bezier(.22,1,.36,1),
              transform .4s cubic-bezier(.22,1,.36,1);
}

/* Background Fill */
.btn-readmore::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--green);

  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1);

  z-index:0;
}

/* Keep content above background */
.btn-readmore span,
.btn-readmore .arrow-icon{
  position:relative;
  z-index:1;
}

.arrow-icon{
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}

/* Hover */
.btn-readmore:hover{
  color:#fff;
  transform:translateY(0px);
}

.btn-readmore:hover::before{
  transform:scaleX(1);
}

.btn-readmore:hover .arrow-icon{
  transform:translateX(4px);
}


.btn-text-1 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: auto;
  
  
  color: var(--green);

  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  
}



/* Keep content above background */
.btn-text-1 span,
.btn-text-1 .arrow-icon{
  position:relative;
  z-index:1;
}

.arrow-icon{
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}

/* Hover */
.btn-text-1:hover{
  color:#000;
  transform:translateY(0px);
}

.btn-text-1:hover::before{
  transform:scaleX(1);
}

.btn-text-1:hover .arrow-icon{
  transform:translateX(4px);
}



/* ===================== PLATFORM IMAGE ===================== */
.platform {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.platform-image { width: 100%; }
.platform-image img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  max-width:992px;
    margin: 0 auto;
}
.platform-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
.step {
  font-size: 16px;
  font-weight: 500;
  color: var(--gray);
}
.step--active { color: var(--blue); }
.step-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cbd5e1;
}

/* ===================== CHALLENGES ===================== */
.challenges {
  margin-top:80px;
  display: flex;
  flex-direction: column;
  gap: 54px;
  padding-bottom: 80px;
}

.challenge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  /* padding-bottom:80px; */
}

.grid-2 {grid-template-columns: repeat(2, 1fr);}
.grid-1 {grid-template-columns: repeat(1, 1fr);}

/* ==========================================================================
   SHARED CARD HOVER  —  single source of truth for the informational-card
   interaction. Reference design: the Home page challenge cards.
   Lift + soft shadow + border tint + a 3px top border wiping in from the left.
   Only transform/opacity animate on the card, so it stays GPU-friendly and
   never reflows. Add a class here to opt a new card into the same feel.
   Used by: Home (.challenge-card)
            Platform (.pf-hero-card, .pf-card, .pf-icon-card, .pf-comm-card)
            About Us (.principle-card, .team-card)
   ========================================================================== */
.challenge-card,
.pf-hero-card,
.principle-card,
.team-card,
.pf-card,
.pf-icon-card,
.pf-comm-card {
  position: relative;
  overflow: hidden;

  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s cubic-bezier(.22,1,.36,1),
    border-color .45s cubic-bezier(.22,1,.36,1),
    background .45s ease;
}

/* Cursor tracks clickability, not card styling:
   informational cards keep the default arrow, while genuinely clickable cards
   keep the link cursor (see .pf-hero-card — a real in-page anchor). */
.challenge-card,
.principle-card,
.team-card,
.pf-card,
.pf-icon-card,
.pf-comm-card { cursor: default; }

/* Animated Top Border */
.challenge-card::before,
.pf-hero-card::before,
.principle-card::before,
.team-card::before,
.pf-card::before,
.pf-icon-card::before,
.pf-comm-card::before {
  content:"";
  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:3px;

  background:var(--green);

  transform:scaleX(0);
  transform-origin:left;

  transition:transform .45s cubic-bezier(.22,1,.36,1);
}

/* Hover */
.challenge-card:hover,
.pf-hero-card:hover,
.principle-card:hover,
.team-card:hover,
.pf-card:hover,
.pf-icon-card:hover,
.pf-comm-card:hover {
  transform:translateY(-8px);

  border-color:rgba(0,155,122,.35);

  box-shadow:
      0 24px 50px rgba(15,23,42,.08),
      0 10px 20px rgba(0,155,122,.08);
}

.challenge-card:hover::before,
.pf-hero-card:hover::before,
.principle-card:hover::before,
.team-card:hover::before,
.pf-card:hover::before,
.pf-icon-card:hover::before,
.pf-comm-card:hover::before {
  transform:scaleX(1);
}

/* Respect reduced-motion: keep the cue, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .challenge-card,
  .pf-hero-card,
  .principle-card,
  .team-card,
  .pf-card,
  .pf-icon-card,
  .pf-comm-card { transition: box-shadow .2s ease, border-color .2s ease; }

  .challenge-card:hover,
  .pf-hero-card:hover,
  .principle-card:hover,
  .team-card:hover,
  .pf-card:hover,
  .pf-icon-card:hover,
  .pf-comm-card:hover { transform: none; }

  .challenge-card::before,
  .pf-hero-card::before,
  .principle-card::before,
  .team-card::before,
  .pf-card::before,
  .pf-icon-card::before,
  .pf-comm-card::before { transition: none; }
}

.challenge-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 20px;

  display: flex;
  flex-direction: column;
  gap: 24px;
}

.challenge-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.challenge-card-title {
  flex: 1;
  min-width: 0;

  margin: 0;

  font-size: 18px;
  font-weight: 600;
  line-height: 23px;

  color: var(--green);

  transition:
      color .35s ease,
      transform .35s ease;
}

.challenge-card:hover .challenge-card-title{

  color:#006D56;

  transform:translateX(4px);
}

.challenge-card-icon{

  width:24px;
  height:24px;
  flex-shrink:0;

  transition:
      transform .45s cubic-bezier(.22,1,.36,1),
      filter .35s ease;
}


.challenge-card-body{

  margin:0;

  font-size:16px;
  font-weight:400;
  line-height:1.5;

  color:#000;

  transition:
      color .35s ease;
}

.challenge-card:hover .challenge-card-body{

  color:#3D4756;
}

/* ===================== CLIENTS ===================== */
.clients {
  margin-top: 120px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.industry-row {
  display: flex;
  gap: 24px;
}
.industry-card {
  position: relative;
  overflow: hidden;

  flex: 1 0 0;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;

  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 20px 10px;

  text-align: center;
  cursor: default;

  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s cubic-bezier(.22,1,.36,1),
    border-color .35s ease,
    background .35s ease;
}

/* Top Line Animation */
.industry-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:3px;

  background:var(--green);

  transform:scaleX(0);
  transform-origin:left;

  transition:transform .45s cubic-bezier(.22,1,.36,1);
}

.industry-card:hover{
  transform:translateY(-6px);

  border-color:rgba(0,155,122,.35);

  box-shadow:
      0 18px 40px rgba(15,23,42,.08),
      0 8px 18px rgba(0,155,122,.08);
}

.industry-card:hover::before{
  transform:scaleX(1);
}

.industry-icon{
  width:50px;
  height:50px;

  transition:
      transform .45s cubic-bezier(.22,1,.36,1),
      filter .35s ease;
}

.industry-card:hover .industry-icon{
  transform:
      translateY(-3px)
      scale(1.08)
      rotate(-6deg);
}

.industry-label{
  font-size:16px;
  font-weight:500;
  line-height:1.5;
  color:#000;

  transition:
      color .35s ease,
      transform .35s ease;
}

.industry-card:hover .industry-label{
  color:var(--green);
  transform:translateY(2px);
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.logo-cell {
  height: 150px;
  background: #ffffff;
  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;
  cursor: default;

  transition:
    transform .4s cubic-bezier(.22,1,.36,1),
    box-shadow .4s cubic-bezier(.22,1,.36,1),
    background-color .35s ease;
}

.logo-cell img{
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;

  transition:
    transform .4s cubic-bezier(.22,1,.36,1),
    filter .35s ease,
    opacity .35s ease;
}

.logo-cell:hover{
  transform: translateY(-6px);
  background: #FCFFFE;
  box-shadow:
      0 16px 40px rgba(15,23,42,.06),
      0 8px 18px rgba(0,155,122,.08);
}

.logo-cell:hover img{
  transform: scale(1.05);
}

/* ===================== TESTIMONIALS ===================== */
.testimonials {
  margin-top: 120px;
  padding-bottom: 120px;
}
.testimonials .section-head { margin-bottom: 48px; }

.testimonial-stage {
  position: relative;
  height: 600px;
  border-radius: 26px;
  overflow: hidden;
  background-image: url("../images/testimonial-bg.png");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 63px 54px;
  touch-action: pan-y; /* let vertical scrolling through, we own the X axis */
}

.testimonial-card {
  position: relative;
  background: #ffffff;
  border-radius: 30px;
  width: 852px;
  max-width: 100%;
  height: 100%;
  padding: 44px 56px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 36px 40px rgba(10, 33, 28, 0.22);
}

.testimonial-quote-icon { margin-bottom: 22px; }
.testimonial-quote-icon img { width: 58px; height: 58px; }

/* Swap zones. The card and its chrome never move — only the testimonial
   content inside cross-fades. Stacking with grid overlaps the items while
   letting each zone size itself to the tallest one, so no fixed heights are
   needed and the card stays put even once the copy differs per item. */
.testimonial-text-stack,
.testimonial-author-stack { display: grid; }

.testimonial-text-stack > *,
.testimonial-author-stack > * {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateX(14px);
  transition: opacity 400ms ease, transform 400ms ease, visibility 400ms ease;
}

.testimonial-text-stack > .is-active,
.testimonial-author-stack > .is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Outgoing item keeps travelling up as it fades, so the motion reads one-way */
.testimonial-text-stack > .is-leaving,
.testimonial-author-stack > .is-leaving {
  opacity: 0;
  visibility: visible;
  transform: translateX(-14px);
}

.testimonial-text {
  margin: 0;
  max-width: 547px;
  font-size: 21px;
  font-weight: 500;
  line-height: 31.5px;
  letter-spacing: -0.21px;
  color: var(--ink);
  min-height: 96px;
}

.testimonial-divider {
  height: 1px;
  width: 100%;
  background: #e5e7eb;
  margin: 20px 0;
}

.testimonial-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
}
.testimonial-avatar {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  overflow: hidden;
  background: #0a0a35;
  flex-shrink: 0;
}
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 21.6px;
  color: var(--ink);
}
.testimonial-role {
  margin: 1px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 25.6px;
  color: #0b8e70;
}
.testimonial-company {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  color: #64748b;
}

.testimonial-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}
.testimonial-arrow {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.testimonial-arrow img { width: 22px; height: 22px; }
.testimonial-arrow--next img { transform: rotate(180deg); }
.testimonial-dots {
  display: flex;
  align-items: center;
  gap: 9px;
}
.testimonial-dots .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cbd5e1;
}
.testimonial-dots .dot.active {
  width: 10.62px;
  height: 10.62px;
  background: var(--green-accent);
}

/* ===================== FOOTER ===================== */
.site-footer {
  background: var(--footer-bg);
  padding: 80px 0px 24px 0px;
}
.site-footer .container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer-top {
  display: flex;
  gap: 44px;
}
.footer-brand { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.footer-logo { width: 110px; height: auto; }
.footer-brand-text {
  margin: 0;
  max-width: 300px;
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  color: var(--footer-text);
}

.footer-col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; }
.footer-heading {
  margin: 0 0 21px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.32px;
  color: #ffffff;
  line-height: 17.92px;
}
.footer-link {
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  color: var(--footer-text);
  padding: 5px 0;
}
.footer-link:hover { color: #ffffff; }

.footer-rule { height: 1px; width: 100%; background: rgba(255, 255, 255, 0.2); }

.footer-offices {
  display: flex;
  gap: 32px;
  justify-content: center;
  padding-bottom: 33px;
  padding-top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-office { flex: 1 0 0; min-width: 0; display: flex; gap: 14px; align-items: flex-start; }
.footer-office-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: rgba(0, 155, 122, 0.16);
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer-office-icon img { width: 20px; height: 20px; }
.footer-office-info { display: flex; flex-direction: column; gap: 5px; }
.footer-office-label {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 25.6px;
  letter-spacing: 1.92px;
  text-transform: uppercase;
  color: var(--footer-label);
}
.footer-office-address {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  color: var(--footer-text);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-copy {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  color: var(--footer-text);
}
.footer-copy a { text-decoration: underline; }

.footer-social { display: flex; align-items: center; gap: 14px; height: 48px;}
.social-box {
  width: 42px;
  height: 42px;
  border: 1px solid #007c62;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.social-box img { width: 18px; height: 18px; }
.social-box--wa {
  background: var(--green-accent);
  border-color: var(--green-accent);
}

/* ==========================================================================
   SOLUTION PAGE (solution.html)
   Seven rows of copy + artwork, separated by a centred 900px divider.
   Reuses the shared tokens, container and 120px section rhythm.
   ========================================================================== */
.solution { margin-top:60px; }

/* Rows and dividers share the column gap: 64 + 1px rule + 64 = the 129px
   spacing between rows in the design. */
.solution-rows {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-bottom:20px;
}

.solution-row {
  display: flex;
  
  align-items: flex-start;
  justify-content: space-between;
  gap: 100px;
}

.solution-content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 550px;
      
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.solution-label {
  border-left: 3px solid var(--green);
  padding: 0 20px;
  display: flex;
  align-items: center;
}
.solution-label h2 {
  margin: 0;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.84px;
  color: var(--green);
}

.solution-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.solution-heading {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 47px;
  letter-spacing: -0.84px;
  color: var(--ink);
}

.solution-para {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--gray);
}
.solution-para strong { font-weight: 600; }

.solution-media {
  flex: 0 1 700px;
  
  width: 700px;
  aspect-ratio: 700 / 400;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  /* border: 1px solid #007c6217; */
}

.solution-media img {
  /* width: 100%;
  height: 100%; */
  object-fit: cover;
  margin: 0 auto;
  display: block;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease;
  will-change: transform;
}

.solution-media1 {
  aspect-ratio: 700 / 330;
  
}
/* Hover Effect */
.solution-media:hover img {
  transform: translateY(-6px) scale(1.03);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .solution-media img {
    transition: none;
  }

  .solution-media:hover img {
    transform: none;
  }
}

.solution-divider {
  position: relative;
  width: 900px;
  max-width: 100%;
  height: 1px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, rgba(0, 155, 122, 0) 0%, rgba(0, 155, 122, 0.35) 50%, rgba(0, 155, 122, 0) 100%);
}

/* ==========================================================================
   PLATFORM PAGE (platform.html)
   Hero + four module sections. Reuses --card-bg / --card-border tokens and the
   .solution-label / .solution-heading / .solution-para utilities.
   ========================================================================== */

/* ---- Hero ---- */
.pf-hero-medium {
  margin-top: 60px !important;
  
}

.pf-hero {
  margin-top: 120px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.pf-hero-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.pf-hero-title {
  margin: 0;
  font-size: 44px;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: -0.95px;
  color: var(--ink);
}
.pf-hero-sub {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--gray);
}

.pf-hero-cards {
  display: flex;
  gap: 48px;
}

/* Hover/lift comes from the shared card-hover block above.
   These four are <a> elements that jump to their section further down the page,
   so unlike the other cards they are clickable and keep the link cursor. */
.pf-hero-card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  cursor: pointer;
}

.pf-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--green);
  border-radius: 8px;
  flex-shrink: 0;
}

.pf-hero-icon img {
  width: 32px;
  height: 32px;
}

.pf-hero-card-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pf-hero-card-text h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--green);
}

.pf-hero-card-text p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #000;
}

.pf-hero-arrow {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #fff;
  border: 1px solid var(--green);
  border-radius: 999px;
  flex-shrink: 0;
  overflow: hidden;
  transition:
    width .35s cubic-bezier(.22,1,.36,1),
    background .35s ease,
    box-shadow .35s ease;
}

.pf-hero-arrow img {
  width: 12px;
  height: auto;
}

/* Continuous Animation */

.pf-hero-card:hover .pf-hero-arrow img {
  animation: arrowMove .8s ease-in-out infinite;
}

@keyframes arrowMove {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }

  100% {
    transform: translateX(0);
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .pf-hero-card,
  .pf-hero-arrow,
  .pf-hero-arrow img {
    transition: none;
  }

  .pf-hero-card:hover {
    transform: none;
  }

  .pf-hero-card:hover .pf-hero-arrow {
    width: 32px;
    box-shadow: none;
  }

  .pf-hero-card:hover .pf-hero-arrow img {
    transform: none;
  }
}

/* ---- Module sections ---- */
.pf-section {
  /* margin-top:80px; */
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.pf-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Product Identity: text column + image ---- */
.pf-split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}
.pf-split-text {
  /* Hold the Figma text-column width (792) so the space-between gap to the
     image reads as the designed 129px; shrinks on laptop before stacking. */
  flex: 0 1 792px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.pf-split-media {
  flex: 0 0 479px;
  width: 479px;
  height: 432px;
  border: 1px solid rgba(0, 155, 122, 0.1);
  border-radius: 12px;
  overflow: hidden;
}
.pf-split-media {
  overflow: hidden;
  border-radius: 20px; /* Apne design ke hisaab se */
}

.pf-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition:
    transform .6s cubic-bezier(.22,1,.36,1),
    filter .35s ease;
  will-change: transform;
}

.pf-split-media:hover img {
  transform: scale(1.04);
}

.pf-icon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.pf-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  text-align: center;
}
.pf-icon-lg { width: 50px; height: 50px; }
.pf-icon-card h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

/* ---- 3-up feature cards (Channel Incentives, Commerce) ---- */
.pf-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.pf-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}
.pf-card-icon { width: 36px; height: 36px; margin-bottom: 32px; }
.pf-card-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--green);
}
.pf-card-body {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray);
}

/* ---- Communication Hub cards with flow diagrams ---- */
.pf-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.pf-comm-card {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 24px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}
.pf-comm-head { display: flex; flex-direction: column; gap: 24px; }
.pf-comm-head h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--green);
}
.pf-comm-head p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
}
.pf-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: auto;
}
.pf-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-shrink: 0;
}
.pf-flow-img {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-flow-img img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100px; }
.pf-flow-step span {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  text-align: center;
}
.pf-flow-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.pf-flow-arrow svg { width: 24px; height: 12px; display: block; }

/* ==========================================================================
   ABOUT US PAGE (about-us.html)
   Why LAMI + Leadership sections reuse .solution-label / .solution-heading and
   the --card tokens. Testimonial runs on Swiper (see below).
   ========================================================================== */
.about-section {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
}
.about-head { display: flex; flex-direction: column; gap: 50px; }
.about-head-text { display: flex; flex-direction: column; gap: 16px; }
.about-sub {
  margin: 0;
  max-width: 1015px;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--gray-2);
}

/* ---- Why LAMI: three principle cards ---- */
.about-principles {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.principle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 25px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  text-align: center;
}
.principle-icon {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.principle-icon img { height: 78px; width: auto; display: block; }
.principle-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 24.64px;
  letter-spacing: -0.44px;
  color: var(--ink);
}
.principle-desc {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
}

/* ---- Leadership: team cards ---- */
.about-team {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 25px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}
.team-top { display: flex; align-items: center; justify-content: space-between; }
.team-avatar {
  width: 72px;
  height: 72px;
  border-radius: 36px;
  overflow: hidden;
  background: #f1f9f6;
  flex-shrink: 0;
}
.team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-linkedin { display: inline-flex; width: 32px; height: 32px; flex-shrink: 0; }
.team-linkedin img { width: 32px; height: 32px; display: block; }
.team-text { display: flex; flex-direction: column; gap: 10px; }
.team-name {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 23px;
  color: var(--green);
}
.team-desc {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
}

/* ==========================================================================
   TESTIMONIAL SWIPER (about-us.html)
   The white card and warehouse background stay fixed; only the content inside
   the card slides (fade + translate via Swiper's creative effect). Reuses the
   existing .testimonials / .testimonial-stage / .testimonial-card styling.
   ========================================================================== */
.testimonial-card--swiper {
  justify-content: flex-start;
  overflow: hidden;
}
.testimonial-card--swiper .testimonial-quote-icon { margin-bottom: 22px; flex-shrink: 0; }

.testimonial-swiper {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}
.testimonial-swiper .swiper-wrapper { height: 100%; align-items: stretch; }
.testimonial-swiper .swiper-slide { height: 100%; }
.testimonial-slide-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Push the divider + author to the bottom so the author row aligns with the
   fixed controls, while the quote text stays at the top. */
.testimonial-slide-inner .testimonial-divider { margin-top: auto; }

/* Controls stay fixed at the bottom-right while content slides underneath */
.testimonial-card--swiper .testimonial-controls {
  position: absolute;
  right: 56px;
  bottom: 40px;
  z-index: 3;
}
.testimonial-card--swiper .swiper-pagination {
  position: static;
  width: auto;
  display: flex;
  align-items: center;
  gap: 9px;
}
.testimonial-card--swiper .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 !important;
  background: #cbd5e1;
  opacity: 1;
  transition: width .3s, height .3s, background .3s;
}
.testimonial-card--swiper .swiper-pagination-bullet-active {
  width: 10.62px;
  height: 10.62px;
  background: var(--green-accent);
}

/* ==========================================================================
   MOBILE SLIDE-IN NAV — shared by every page.
   These two helpers are inert on desktop; the drawer itself is defined once
   inside the ≤900 media query below. Desktop nav is untouched.
   ========================================================================== */
.mobile-overlay { display: none; }
.mobile-close {
  display: none;
  border: none;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}

/* ==========================================================================
   CONTACT US PAGE (contact-us.html)
   Hero banner + "Get in touch" (contact details | enquiry form).
   Reuses .solution-label / .solution-heading / .about-sub / .about-head-text.
   ========================================================================== */
.contact-hero { margin-top: 64px; }
.contact-hero-banner {
  position: relative;
  display: flex;
  align-items: center;
  height: 300px;
  padding-inline: 100px;
  border-radius: 14px;
  overflow: hidden;
}
.contact-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Green wash fading out to the right so the heading stays legible */
.contact-hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(85.69deg, rgba(0, 155, 122, 0.9) 23.348%, rgba(0, 155, 122, 0) 81.756%);
}
.contact-hero-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 60px;
  font-weight: 600;
  line-height: normal;
  color: #ffffff;
}

.contact-section { margin-top:60px; }
.contact-grid {
  margin-top:48px;
  display: grid;
  grid-template-columns: 675fr 675fr;
  gap: 50px;
  align-items: start;
}

/* ---- Contact details ---- */
.contact-info { display: flex; flex-direction: column; gap: 24px; }
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-block: 18px;
}
.contact-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: #f1f9f6;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-icon img { width: 21px; height: 21px; }
.contact-item-text { display: flex; flex-direction: column; gap: 1.5px; }
.contact-item-text--address { gap: 6px; }
.contact-item-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 25.6px;
  color: var(--ink);
}
.contact-item-value {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--gray);
}
.contact-item-value a { color: inherit; transition: color .3s ease; }
.contact-item-value a:hover { color: var(--green); }

.contact-divider {
  position: relative;
  width: 100%;
  height: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, rgba(0, 155, 122, 0) 0%, rgba(0, 155, 122, 0.35) 50%, rgba(0, 155, 122, 0) 100%);
}

/* ---- Enquiry form ---- */
.contact-form-col { display: flex; flex-direction: column; gap: 24px; }
.contact-form-card {
  background: #ffffff;
  border: 1px solid #e5edea;
  border-radius: 26px;
  padding: 33px;
  box-shadow: 0 2px 3px rgba(10, 33, 28, 0.05), 0 18px 20px rgba(10, 33, 28, 0.08);
}
.contact-form-fields { display: flex; flex-direction: column; gap: 32px; }
.contact-form-row { display: flex; gap: 32px; }
.contact-field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.contact-field--message { padding-bottom: 29.59px; }
.contact-label {
  font-size: 16px;
  font-weight: 500;
  line-height: 25.6px;
  color: var(--ink);
}
.contact-input,
.contact-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  background: #f6faf9;
  border: 1px solid #d8e4e0;
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.contact-input::placeholder,
.contact-textarea::placeholder { color: #757575; }
.contact-input:focus,
.contact-textarea:focus {
  outline: none;
  border-color: var(--green-accent);
  box-shadow: 0 0 0 3px rgba(0, 155, 122, 0.12);
}
.contact-textarea {
  min-height: 96px;
  padding-bottom: 57px;
  resize: vertical;
}
.contact-submit-row { display: flex; justify-content: center; }
.btn-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  border: none;
  border-radius: 100px;
  background: var(--green-accent);
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 10px 12px rgba(0, 155, 122, 0.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-send img { width: 17px; height: 17px; transition: transform .3s ease; }
.btn-send:hover { box-shadow: 0 12px 18px rgba(0, 155, 122, 0.34); }
.btn-send:hover img { transform: translateX(3px); }

/* Sent confirmation (replaces the button after a valid submit) */
.contact-form-note {
  display: none;
  font-size: 16px;
  font-weight: 500;
  color: var(--green);
  text-align: center;
}
.contact-form.is-sent .contact-form-note { display: block; }
.contact-form.is-sent .contact-submit-row { display: none; }

/* Send failure — the submit row stays put so the visitor can retry */
.contact-form-error {
  display: none;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 500;
  color: #c0392b;
  text-align: center;
}
.contact-form.is-error .contact-form-error { display: block; }

.btn-send:disabled { opacity: .65; cursor: default; box-shadow: none; }

/* Honeypot — kept out of view and off the tab order, but not display:none,
   which many bots know to skip. */
.contact-botcheck {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===============================Custom ================================== */

.fw600{font-weight: 600;}

.coming-soon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(135deg, #ff9800, #ff5722);
    border-radius: 50px;
    box-shadow: 0 0 15px rgba(255, 87, 34, 0.4);
    animation: pulseGlow 2s infinite ease-in-out;
    margin-left: 32px;
}

@keyframes pulseGlow{
    0%{
        transform: scale(1);
        box-shadow: 0 0 8px rgba(255,87,34,.35);
    }
    50%{
        transform: scale(1.08);
        box-shadow: 0 0 20px rgba(255,87,34,.7);
    }
    100%{
        transform: scale(1);
        box-shadow: 0 0 8px rgba(255,87,34,.35);
    }
}
.mb-0{margin-bottom: 0px;}
.mb-n{margin-bottom: -64px;}

.link-grid{display: flex; justify-content: left; gap: 32px;}
.link-grid svg{margin-left: 8px; margin-top: 4px;}
/* .link-grid .link-text{color: var(--green); text-decoration:underline; display: flex; justify-content: start; align-items: center;}
.link-grid .link-text:hover{color: var(--green); text-decoration: underline;} */

.link-grid .link-text {
    color: var(--green);
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    
}

.link-grid .link-text:hover {
    color: var(--green);
    text-decoration: underline;
}

.link-grid .link-text svg {
    display: inline-block;
}

/* Hover par continuously animation */
.link-grid .link-text:hover svg {
    animation: arrowNudge 0.7s cubic-bezier(.25,.46,.45,.94) infinite;
}

@keyframes arrowNudge {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(8px);
    }
}

.pb-l{padding-bottom:80px;}
.mt-0{margin-top: 0px;}
.alert-text{color: crimson;}

.m-n1{margin-bottom: -30px;}
.m-n2{margin-bottom: -68px;}
.m-n3{margin-bottom: -76px;}
.m-n4{margin-bottom: -50px;}
.m-n5{margin-bottom: -30px;}
.m-n6{margin-bottom: -32px;}
.m-n7{margin-bottom: -34px;}
.m-n8{margin-bottom: -134px;}





/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Laptop */
@media (max-width: 1280px) {
  .m-n1{margin-bottom:0px;}
.m-n2{margin-bottom:0px;}
.m-n3{margin-bottom:0px;}
.m-n4{margin-bottom:0px;}
.m-n5{margin-bottom:0px;}
.m-n6{margin-bottom:0px;}
.m-n7{margin-bottom:0px;}
.m-n8{margin-bottom:0px;}
  .section-title { font-size: 36px; line-height: 44px; }
  .intro-heading { font-size: 40px; line-height: 50px; }
  .solution-rows { margin-bottom:0px;}
  .solution-media {aspect-ratio: 700 / 500;}
  .solution-row {gap: 48px;}
  .pf-hero-medium {margin-top: 48px !important;}
  .intro {margin-top: 48px;} .solution {margin-top: 48px;}
  .about-section {margin-top: 48px;}.contact-section {margin-top: 48px;}
  .solution-content {gap: 24px;  max-width: 500px; width: 100%;}.pf-section{gap: 24px;}
  .about-head {gap: 24px;}
  .solution-rows {gap: 48px;}

  /* Artwork shrinks first; aspect-ratio keeps the 550:400 crop intact */
  .solution-label h2 { font-size: 36px; }
  .solution-heading { font-size: 28px; line-height: 42px; }

  .pf-hero-title { font-size: 40px; line-height: 50px; }
  /* Let the text column fill and the image flex down together on laptop */
  .pf-split-text { flex: 1 1 auto; }
  .pf-split-media { flex: 0 1 440px; width: 440px; height: auto; aspect-ratio: 479 / 432; }

  .contact-hero-title { font-size: 48px; }
  .contact-hero-banner { padding-inline: 64px; }
  .mb-n {margin-bottom: -32px;}
  .pf-hero {gap: 48px;}
}

/* Small laptop / large tablet */
@media (max-width: 1024px) {
  
  .challenge-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .industry-row { flex-wrap: wrap; }
  .industry-card { flex: 1 1 calc(33.333% - 16px); }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-card { width: 100%; }
  .testimonial-stage { padding: 40px; }

  /* Platform: 4-up hero cards + 3-up feature cards collapse to 2 columns */
  .pf-hero-cards { flex-wrap: wrap; gap: 32px; }
  .pf-hero-card { flex: 1 1 calc(50% - 16px); }
  .pf-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .pf-icon-grid { gap: 32px; }

  /* About: 3-up principle + team grids collapse to 2 columns */
  .about-principles, .about-team { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* Tablet */
@media (max-width: 900px) {
  .m-n8 {margin-bottom: -80px;}
  .nav-toggle { display: flex; }

  /* ---- Mobile nav drawer — one component, every page ----
     The panel is always in the DOM, parked off-screen right, and slides in on
     body.nav-open. Only `transform`/`opacity` animate (GPU-friendly, no
     reflow). Markup needed per page: .mobile-close inside .header-right and a
     .mobile-overlay sibling of .header-wrap. Driven by js/script.js. */
  .mobile-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 400ms ease, visibility 400ms ease;
    z-index: 90;
  }
  body.nav-open .mobile-overlay { opacity: 1; visibility: visible; }
  .fill-header{background-color: transparent;}

  .header-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    width: min(320px, 82vw);
    height: 100dvh;
    padding: 76px 28px 28px;
    background: #ffffff;
    border-radius: 0;
    
    transform: translateX(100%);
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    overflow-y: auto;
  }
  body.nav-open .header-right { transform: translateX(0); box-shadow: -12px 0 40px rgba(15, 38, 51, 0.14);}

  .header-right .main-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .header-right .btn-contact { align-self: flex-start; margin-top: 12px; }

  .mobile-close {
    display: block;
    position: absolute;
    top: 18px;
    right: 22px;
  }

  /* Lock the page behind the drawer */
  body.nav-open { overflow: hidden; }

  /* Reduced motion: still opens/closes, just without the slide */
  @media (prefers-reduced-motion: reduce) {
    .header-right,
    .mobile-overlay { transition: none; }
  }

  .intro-top { flex-direction: column; gap: 48px; }
  .intro-divider {
    width: 100%;
    height: 1px;
    align-self: auto;
    background: linear-gradient(to right, rgba(0,155,122,0) 0%, rgba(0,155,122,0.35) 50%, rgba(0,155,122,0) 100%);
  }
  .intro-heading { font-size: 34px; line-height: 42px;}
  .section-title { font-size: 30px; line-height: 38px;}
  .section-sub { font-size: 16px; line-height: 26px;}
  .testimonial-text { max-width: none; }

.m-n1{margin-bottom: -0px;}
.m-n2{margin-bottom: -0px;}
.m-n3{margin-bottom: -0px;}
.m-n4{margin-bottom: -0px;}
.m-n5{margin-bottom: -0px;}
.m-n6{margin-bottom: -0px;}
.m-n7{margin-bottom: -0px;}
.m-n8{margin-bottom: -88px;}

  /* Stack the copy above the artwork rather than squeezing both */
  .solution-row {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  .solution-content {
    max-width: none;
    padding-top: 0;
    gap: 24px;
  }
  .solution-media {
    flex: none;
    width: 100%;
  }
  .solution-rows { gap: 48px; }
  .solution-label h2 { font-size: 32px; }
  .solution-heading { font-size: 26px; line-height: 38px; }

  /* Platform tablet: stack the split, single-column comm cards */
  .pf-hero-title { font-size: 34px; line-height: 42px; }
  .pf-split { flex-direction: column; align-items: stretch; gap: 40px; }
  .pf-split-media { flex: none; width: 100%; max-width: 560px; }
  .pf-grid-2 { grid-template-columns: 1fr; }

  /* Contact tablet: stack details above the form */
  .contact-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 24px;}
  .contact-hero-banner { height: 240px; padding-inline: 40px; }
  .contact-hero-title { font-size: 40px; }
}

/* Large phone */
@media (max-width: 768px) {
  .mb-n {margin-bottom: -18px;}
  .header-wrap { padding-top: 0px; padding-bottom: 0px; }
  .header-wrap.scrolled { padding-top: 0px; padding-bottom: 8px; }
  .site-header { padding:0px; }
  .header-wrap.scrolled .site-header { padding:0px; }
  body { padding-top: 100px; }

  .solution { margin-top: 48px; }
  .pf-hero-medium {margin-top: 48px !important;}
.pf-section{gap: 24px;}
.pb-l {padding-bottom: 48px;}
  /* Platform mobile: single-column stacks, tighter flow */
  .pf-hero, .pf-section { margin-top: 48px; }
  .pf-hero-title { font-size: 28px; line-height: 36px; }
  .pf-hero-cards { flex-direction: column; }
  .pf-hero-card { flex: 1 1 100%; }
  .pf-grid-3 { grid-template-columns: 1fr; gap: 20px; }
  .pf-icon-grid { grid-template-columns: 1fr; gap: 20px; }
  .pf-flow { gap: 12px; }
  .pf-flow-img { height: 72px; }
  .pf-flow-img img { max-height: 72px; }
  .pf-flow-step span { font-size: 12px; }
  .pf-flow-arrow svg { width: 18px; }
  .pf-comm-head h4 { font-size: 18px; }
  .intro { margin-top: 48px; gap: 48px; }
  .platform, .challenges, .clients, .testimonials { margin-top: 48px; }
  .testimonials { padding-bottom: 72px; }
  .platform-image img { border-radius: 16px; }
  .platform-steps { flex-wrap: wrap; gap: 10px; }

  .challenge-grid { grid-template-columns: 1fr; gap: 20px; }
  .challenge-card { gap: 28px; }
  .industry-card { flex: 1 1 calc(50% - 12px); }
  .logo-grid { gap: 16px; }
  .challenges{gap: 32px;}
  .challenge-grid{padding-bottom:48px;}
  .mt-0 {margin-top: 0px;}

  .footer-top { flex-wrap: wrap; gap: 32px; }
  .footer-copy{text-align: center;}
  .footer-bottom{gap: 0px;}
  .footer-social {
    gap: 14px;
    
}
  .footer-brand { flex: 1 1 100%; }
  .footer-col { flex: 1 1 calc(50% - 16px); }
  .footer-offices { flex-direction: column; gap: 24px; }
  .site-footer { padding: 24px 0; }


  /* Contact mobile: stacked fields, tighter hero and card */
  .contact-hero { margin-top: 40px; }
  .contact-section { margin-top: 48px; }
  .contact-hero-banner { height: 180px; padding-inline: 24px; border-radius: 12px; }
  .contact-hero-title { font-size: 30px; }
  .contact-form-row { flex-direction: column; gap: 20px; }
  .contact-form-fields { gap: 20px; }
  .contact-form-card { padding: 20px; border-radius: 18px; }
  .contact-field--message { padding-bottom: 32px; }
  .contact-textarea { padding-bottom: 32px; }

  /* About mobile: single-column grids; testimonial controls tuck in-flow */
  .about-section { margin-top: 48px; }
  .about-principles, .about-team { grid-template-columns: 1fr; gap: 20px; }
  .about-head { gap: 24px; }
  .testimonial-card--swiper { padding: 32px 28px 72px; }
  .testimonial-card--swiper .testimonial-controls { right: 28px; bottom: 24px; }

  .testimonial-stage { height: auto; min-height: 500px; padding: 24px; }
  .testimonial-card { padding: 32px 28px; height: auto; }
  .testimonial-text { font-size: 18px; line-height: 28px; }
}

/* Small phone */
@media (max-width: 480px) {
  .mb-n {margin-bottom: -18px;}
  .intro-heading { font-size: 28px; line-height: 36px; }
  .section-title { font-size: 24px; line-height: 32px; }
  .eyebrow { gap: 16px; }
  .eyebrow-line, .eyebrow-line--wide, .eyebrow-line--xl { width: 40px; }
  .eyebrow--lg .eyebrow-text { font-size: 16px; }

  .industry-card { flex: 1 1 100%; }
  .logo-grid { grid-template-columns: 1fr; }
  .footer-col { flex: 1 1 100%; }
  .footer-bottom { flex-direction: column; align-items: center; }

  .testimonial-foot { flex-direction: column; align-items: flex-start; }
  .testimonial-quote-icon img { width: 44px; height: 44px; }

  /* Platform: comm-hub flow — 3 steps share the row and labels wrap to fit */
  .pf-flow { gap: 6px; }
  .pf-flow-step { flex: 1 1 0; min-width: 0; }
  .pf-flow-img { height: 46px; }
  .pf-flow-img img { max-height: 46px; }
  .pf-flow-step span { font-size: 11px; }
  .pf-flow-arrow svg { width: 14px; }

  .solution-label h2 { font-size: 26px; }
  .solution-label { padding: 0 14px; }
  .solution-heading { font-size: 22px; line-height: 32px; }
  .solution-para { font-size: 16px; line-height: 26px; }
  .solution-rows { gap: 40px; }
}

/* Respect users who ask for reduced motion: keep the states, drop the motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .header-wrap,
  .site-header,
  .logo img { transition: none; }
  /* Testimonials still change on request, just without the fade/slide */
  .testimonial-text-stack > *,
  .testimonial-author-stack > * { transition: none; }
}