:root {
  --green: #173F1F;
}

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

body {
  font-family: "Montserrat";
  /* background: var(--green); */
  overflow-x: hidden;
}

/* ---------- scroll track ---------- */
.track {
  height: 320vh;
  position: relative;
  background: transparent;
    /* border:2px solid red; */

}

.stage {
  position: sticky;
  top: 64px;
  height: calc(150vh - 64px);
  overflow: hidden;
  background: linear-gradient(to bottom, var(--green) 0px, var(--green) 500px, #ffffff 500px, #ffffff 100%);
  /* border:2px solid red; */
}

/* ---------- heading ---------- */
.heading {
  position: absolute;
  top: 16vh;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  z-index: 10;
  will-change: transform, opacity;
}

.heading .pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 14px;
  margin-bottom: 22px;
  backdrop-filter: blur(4px);
}

.heading h1 {
  font-size: clamp(30px, 4.6vw, 64px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.heading p {
  font-size: clamp(15px, 1.5vw, 20px);
  margin-top: 16px;
  opacity: 0.95;
  font-weight: 400;
}

.heading .cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  background: #fff;
  color: #111;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 15px;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.heading .cta:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

/* ---------- cards ---------- */
.card {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  will-change: transform, opacity, width, height;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- after-hero section ---------- */
.after {
  background: var(--green);
  padding: 100px 10vw;
  color: #fff;
  font-size: 20px;
  line-height: 1.6;
}

.after h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}


:root {
  --green: #0e7a3d;
  --green-glow: rgba(14, 122, 61, .14);
  --dark: #101214;
  --gray: #5a5f66;
  --white: #ffffff;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: linear(0, .008 1.1%, .031 2.2%, .129 4.8%, .257 7.2%, .671 14.2%, .789 16.5%, .881 18.6%, .957 20.7%, 1.019 22.9%, 1.063 25.1%, 1.094 27.9%, 1.109 30.7%, 1.087 38.5%, 1.037 46.2%, 1.017 50.1%, .999 61.7%, .995 71%, 1);
}

.who-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 48px 84px;
}

/* ===== HEADER ===== */
.who-section .head-row {
  display: grid;
  grid-template-columns: 1fr 340px;
  align-items: end;
  gap: 48px;
  margin-bottom: 40px;
}

.who-section .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  margin-bottom: 10px;
  position: relative;
  background: linear-gradient(90deg, var(--dark) 40%, var(--green) 50%, var(--dark) 60%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: whoShimmer 4s linear infinite;
}

@keyframes whoShimmer {
  to { background-position: -250% 0; }
}

.who-section .eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: whoPulse 2.2s var(--ease) infinite;
}

@keyframes whoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14, 122, 61, .4); }
  50% { box-shadow: 0 0 0 7px rgba(14, 122, 61, 0); }
}

.who-section h1 {
  font-size: 28px;
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -.01em;
  max-width: 460px;
  perspective: 600px;
}

.who-section h1 .ch {
  display: inline-block;
  transform-origin: 50% 100%;
  transform: translateY(60%) rotateX(-85deg);
  opacity: 0;
  filter: blur(3px);
}

.who-section .in-view h1 .ch {
  animation: whoChIn .9s var(--ease) forwards;
  animation-delay: var(--cd);
}

@keyframes whoChIn {
  to { transform: translateY(0) rotateX(0); opacity: 1; filter: blur(0); }
}

.who-section .sub {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--gray);
  padding-bottom: 4px;
}

.who-section .sub .ln {
  display: block;
  overflow: hidden;
}

.who-section .sub .ln > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease);
  transition-delay: var(--d);
}

.who-section .in-view .sub .ln > span {
  transform: translateY(0);
}

/* ===== GRID ===== */
.who-section .grid {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  gap: 26px;
  align-items: start;
}

.who-section .col {
  display: flex;
  flex-direction: column;
}

.who-section .svc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.who-section .svc-list.top {
  margin-bottom: 24px;
}

.who-section .svc-list.bottom {
  margin-top: 24px;
}

/* ===== SERVICE ITEMS ===== */
.who-section .svc {
  --x: 50%;
  --y: 50%;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 13px;
  margin-left: -13px;
  border-radius: 11px;
  position: relative;
  cursor: default;
  will-change: transform;
  opacity: 0;
  clip-path: inset(0 100% 0 0 round 11px);
  transform: translateX(-14px);
}

.who-section .in-view .svc {
  animation: whoSvcIn 1s var(--ease) forwards;
  animation-delay: var(--d);
}

@keyframes whoSvcIn {
  60% { opacity: 1; }
  to { opacity: 1; clip-path: inset(0 0 0 0 round 11px); transform: translateX(0); }
}

/* Animated border trace on hover */
.who-section .svc .ring {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  padding: 1.5px;
  background: conic-gradient(from var(--a, 0deg), var(--green) 0deg, transparent 90deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}

@property --a {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.who-section .svc:hover .ring {
  opacity: 1;
  animation: whoTrace .9s var(--ease) forwards;
}

@keyframes whoTrace {
  to {
    --a: 360deg;
    background: conic-gradient(from 360deg, var(--green) 0deg 360deg, transparent 360deg);
  }
}

/* Cursor-follow glow */
.who-section .svc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: radial-gradient(130px circle at var(--x) var(--y), var(--green-glow), transparent 70%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.who-section .svc:hover::before {
  opacity: 1;
}

.who-section .svc:hover {
  box-shadow: 0 8px 26px -10px rgba(14, 122, 61, .3);
}

/* Icon: SVG stroke draw + spring pop */
.who-section .svc .ic {
  width: 18px;
  height: 18px;
  flex: none;
  position: relative;
  z-index: 1;
}

.who-section .svc .ic svg {
  width: 18px;
  height: 18px;
  overflow: visible;
}

.who-section .svc .ic .badge {
  fill: var(--green);
  transform-origin: center;
  transition: transform .6s var(--spring);
}

.who-section .svc .ic .check {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
}

.who-section .in-view .svc .ic .check {
  animation: whoDraw .5s ease-out forwards;
  animation-delay: calc(var(--d) + .45s);
}

@keyframes whoDraw {
  to { stroke-dashoffset: 0; }
}

.who-section .svc:hover .ic .badge {
  transform: scale(1.25) rotate(-10deg);
}

.who-section .svc:hover .ic .check {
  animation: whoRedraw .45s ease-out forwards;
}

@keyframes whoRedraw {
  0% { stroke-dashoffset: 14; }
  to { stroke-dashoffset: 0; }
}

/* Text: per-letter wave lift on hover */
.who-section .svc .txt {
  position: relative;
  z-index: 1;
  display: inline-block;
  white-space: nowrap;
}

.who-section .svc .txt .l {
  display: inline-block;
  transition: transform .45s var(--spring), color .3s ease;
  transition-delay: calc(var(--i) * 14ms);
}

.who-section .svc:hover .txt .l {
  transform: translateY(-3px);
  color: var(--green);
}

.who-section .svc .txt .l.sp {
  width: .28em;
}

/* ===== IMAGES ===== */
.who-section .frame {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform;
}

.who-section .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.18);
  transition: transform 1.6s var(--ease);
}

.who-section .in-view .frame img {
  transform: scale(1.05);
}

.who-section .frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--white);
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 1.1s var(--ease) var(--d, 0s);
}

.who-section .in-view .frame::before {
  transform: scaleY(0);
  transform-origin: bottom;
}

.who-section .frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 12px;
  box-shadow: inset 0 0 0 0 rgba(14, 122, 61, 0);
  transition: box-shadow .6s var(--ease);
  pointer-events: none;
}

.who-section .frame:hover::after {
  box-shadow: inset 0 0 0 2px rgba(14, 122, 61, .35);
}

.who-section .img-left {
  aspect-ratio: 1 / 1.02;
}

/* .who-section .img-center {
  aspect-ratio: .98 / 1.28;
} */

.who-section .img-right {
  aspect-ratio: 1 / 1.02;
}

/* ===== RESPONSIVE / A11Y ===== */
@media (max-width: 980px) {
  .who-section .head-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px;
  }
  .who-section .grid {
    grid-template-columns: 1fr 1fr;
  }
  .who-section .col.center {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (max-width: 640px) {
  .heading {
    top: 10vh;
  }
  .heading .cta {
    margin-top: 16px;
    padding: 10px 20px;
  }
  .who-section {
    padding: 48px 22px 64px;
  }
  .who-section .grid {
    grid-template-columns: 1fr;
  }
  .who-section h1 {
    font-size: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .who-section *,
  .who-section *::before,
  .who-section *::after {
    animation: none !important;
    transition: none !important;
  }
  .who-section h1 .ch,
  .who-section .svc {
    opacity: 1;
    transform: none;
    clip-path: none;
    filter: none;
  }
  .who-section .sub .ln > span {
    transform: none;
  }
  .who-section .svc .ic .check {
    stroke-dashoffset: 0;
  }
  .who-section .frame::before {
    display: none;
  }
  .who-section .frame img {
    transform: scale(1);
  }
}



/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root{
  --font: 'Manrope', system-ui, sans-serif;
  --c-bg: #ffffff;
  --c-heading: #111111;
  --c-label: #666666;
  --c-body: #555555;
  --radius: 1.125rem;            /* 18px */
  --gap: 0.75rem;                /* 12px */
  --pad-x: 2rem;                 /* 32px desktop */
  --section-max: 87.5rem;        /* 1400px */
  --cursor-size: 70px;
  --cursor-size-drag: 82px;
  --hover-scale: 1.05;
  --hover-time: 0.45s;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
/* Scoped reset — only touches this section and the cursor,
   safe to drop into any existing site */
.journey, .journey *, .cursor, .cursor *{
  box-sizing:border-box; margin:0; padding:0;
}

.journey{
  font-family: "Montserrat";
  color:var(--c-body);
  -webkit-font-smoothing:antialiased;
}
.cursor{ font-family: "Montserrat"; }

.journey img{ display:block; width:100%; object-fit:cover; }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.journey{
  max-width:var(--section-max);
  margin:0 auto;
  padding:4rem var(--pad-x);
  background:var(--c-bg);
}

/* ============================================================
   TOP TWO-COLUMN HEADER
   ============================================================ */
.journey__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  margin-bottom:2.5rem;
}

.journey__label{
  display:block;
  font-size:0.6875rem;          /* 11px */
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--c-label);
  margin-bottom:0.75rem;
}

.journey__heading{
  font-size:2.625rem;           /* 42px */
  font-weight:700;
  line-height:1.1;
  color:var(--c-heading);
}

.journey__text{
  font-size:1rem;
  font-weight:400;
  line-height:1.7;
  color:var(--c-body);
  max-width:26.25rem;           /* 420px */
}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{
  position:relative;
  overflow:hidden;
  cursor:none;                  /* custom cursor territory */
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
}

.gallery__track{
  display:flex;
  gap:var(--gap);
  width:max-content;
  will-change:transform;
}

/* each copy of the gallery content */
.gallery__set{
  display:flex;
  gap:var(--gap);
  flex-shrink:0;
}

.gallery__col{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  flex-shrink:0;
}

/* image wrapper controls fixed size + rounded corners */
.tile{
  border-radius:var(--radius);
  overflow:hidden;
  flex-shrink:0;
  transform:translateZ(0);      /* keep radius clipping during scale on Safari */
}
.tile img{
  height:100%;
  transition:transform var(--hover-time) ease;
  will-change:transform;
}
.tile:hover img{ transform:scale(var(--hover-scale)); }

/* ---- Column / tile sizing (desktop reference proportions) ---- */
/* Column 1: two small stacked */
.col-1{ width:19rem; }
.col-1 .tile{ height:11.75rem; }
/* Column 2: one large portrait */
.col-2{ width:22.5rem; }
.col-2 .tile{ height:24.25rem; }
/* Column 3: two small landscape */
.col-3{ width:17.5rem; }
.col-3 .tile{ height:11.75rem; }
/* Column 4: small landscape + small portrait */
.col-4{ width:13.5rem; }
.col-4 .tile--landscape{ height:9.5rem; }
.col-4 .tile--portrait{ height:14rem; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor{
  position:fixed;
  top:0; left:0;
  width:var(--cursor-size);
  height:var(--cursor-size);
  margin:calc(var(--cursor-size) / -2) 0 0 calc(var(--cursor-size) / -2);
  pointer-events:none;
  z-index:999;
  will-change:transform;
}

/* glass disc — scales in with a soft overshoot spring */
.cursor__disc{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  transform:scale(0);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1); /* springy pop */
  will-change:transform;
}
.cursor.is-visible .cursor__disc{ transform:scale(1); }
.cursor.is-dragging .cursor__disc{
  transform:scale(1.17);                    /* 70px → ~82px */
  background:rgba(17,17,17,.92);
  border-color:rgba(255,255,255,.12);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),
             background .3s ease, border-color .3s ease;
}

/* rotating dashed orbit ring — only spins while dragging */
.cursor__ring{
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1.5px dashed rgba(17,17,17,.35);
  opacity:0;
  transform:scale(.6);
  transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  animation:cursor-spin 6s linear infinite;
  animation-play-state:paused;
}
.cursor.is-dragging .cursor__ring{
  opacity:1;
  transform:scale(1.05);
  border-color:rgba(255,255,255,.4);
  animation-play-state:running;
}
@keyframes cursor-spin{ to{ transform:scale(1.05) rotate(360deg); } }

/* arrow stage — clips the sliding arrows */
.cursor__stage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:50%;
}

/* two SVG arrows live in the stage; only one is active */
.cursor__arrow{
  position:absolute;
  width:32px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease;
  will-change:transform;
}
.cursor__arrow svg{
  width:100%;
  height:100%;
  stroke:#111;
  stroke-width:2.6;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .3s ease;
}
.cursor.is-dragging .cursor__arrow svg{ stroke:#fff; }

/* double-chevron wave: the two chevrons pulse one after another,
   like a "keep going this way" signal */
.chev{ opacity:.9; }
.cursor[data-dir]:not(.is-dragging) .chev-1{ animation:chev-wave 1.4s ease-in-out infinite; }
.cursor[data-dir]:not(.is-dragging) .chev-2{ animation:chev-wave 1.4s ease-in-out .2s infinite; }
@keyframes chev-wave{
  0%,100%{ opacity:.25; }
  40%{ opacity:1; }
}
/* while dragging, both chevrons go solid — steady, confident */
.cursor.is-dragging .chev{ animation:none; opacity:1; }

/* tiny DRAG label — hidden at rest, fades up while dragging */
.cursor__label{
  position:absolute;
  bottom:11px;
  left:50%;
  transform:translate(-50%, 6px);
  font-size:8px;
  font-weight:800;
  letter-spacing:2.5px;
  color:rgba(255,255,255,.75);
  opacity:0;
  transition:opacity .3s ease .1s, transform .3s cubic-bezier(.22,1,.36,1) .1s;
  pointer-events:none;
}
.cursor.is-dragging .cursor__label{
  opacity:1;
  transform:translate(-50%, 0);
}
/* nudge arrows up slightly while dragging to make room for the label */
.cursor.is-dragging .cursor__arrow{ margin-bottom:8px; }

/* resting positions: parked offstage on their own side */
.cursor__arrow--left { transform:translateX(-150%); }
.cursor__arrow--right{ transform:translateX(150%); }

/* active arrow slides to center */
.cursor[data-dir="left"]  .cursor__arrow--left,
.cursor[data-dir="right"] .cursor__arrow--right{
  transform:translateX(0);
  opacity:1;
}
/* the outgoing arrow exits through the opposite edge for a fly-through feel */
.cursor[data-dir="right"] .cursor__arrow--left { transform:translateX(150%); opacity:0; }
.cursor[data-dir="left"]  .cursor__arrow--right{ transform:translateX(-150%); opacity:0; }

/* idle nudge — arrow breathes sideways to invite dragging */
.cursor[data-dir="left"]:not(.is-dragging)  .cursor__arrow--left { animation:nudge-l 1.8s ease-in-out .6s infinite; }
.cursor[data-dir="right"]:not(.is-dragging) .cursor__arrow--right{ animation:nudge-r 1.8s ease-in-out .6s infinite; }
@keyframes nudge-l{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-5px); } }
@keyframes nudge-r{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }

/* click ripple ping */
.cursor__ping{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(17,17,17,.5);
  opacity:0;
  transform:scale(1);
}
.cursor.is-pinging .cursor__ping{
  animation:ping .5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes ping{
  0%{ opacity:.8; transform:scale(.9); }
  100%{ opacity:0; transform:scale(1.7); }
}

@media (prefers-reduced-motion:reduce){
  .cursor__arrow, .cursor__ring{ animation:none !important; }
}

/* Hide custom cursor on touch devices */
@media (hover:none){
  .cursor{ display:none; }
  .gallery{ cursor:default; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1200px){
  .journey__heading{ font-size:2.25rem; }   /* 36px laptop */
}

@media (max-width:900px){
  :root{ --pad-x:1.5rem; }                  /* 24px tablet */
  .journey__heading{ font-size:1.875rem; }  /* 30px */
  .journey__header{ flex-direction:column; align-items:flex-start; }
  /* slightly reduced image heights, same arrangement */
  .col-1{ width:15rem; } .col-1 .tile{ height:9.5rem; }
  .col-2{ width:17.5rem; } .col-2 .tile{ height:19.75rem; }
  .col-3{ width:14rem; } .col-3 .tile{ height:9.5rem; }
  .col-4{ width:11rem; }
  .col-4 .tile--landscape{ height:7.75rem; }
  .col-4 .tile--portrait{ height:11.25rem; }
}

@media (max-width:600px){
  :root{ --pad-x:1.125rem; }                /* 18px mobile */
  .journey__heading{ font-size:1.5rem; }    /* 24px */
  /* keep same arrangement, scale proportionally */
  .col-1{ width:11.5rem; } .col-1 .tile{ height:7.25rem; }
  .col-2{ width:13.5rem; } .col-2 .tile{ height:15.25rem; }
  .col-3{ width:10.75rem; } .col-3 .tile{ height:7.25rem; }
  .col-4{ width:8.5rem; }
  .col-4 .tile--landscape{ height:6rem; }
  .col-4 .tile--portrait{ height:8.5rem; }
}

@media (prefers-reduced-motion:reduce){
  .tile img{ transition:none; }
}



/* mission vission */


:root {
  --bg-base: #FAFAFA;
  --bg-card: #FFFFFF;
  --border-color: rgba(0,0,0,0.08);
  --text-primary: #111111;
  --text-secondary: rgba(0,0,0,0.5);
  --text-tertiary: rgba(0,0,0,0.3);
  --accent: #16a34a;
  --accent-dark: #15803d;
  --accent-light: #22c55e;
  --accent-glow: rgba(22,163,74,0.25);
}

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

body {
  font-family: "Montserrat";
  background: var(--bg-base);
  color: var(--text-primary);
  overflow-x: hidden;
}

#particleCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Background Blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.08;
  animation: blobMorph 20s ease-in-out infinite alternate;
}
.blob-1 {
  width: 600px; height: 600px;
  background: #22c55e;
  top: -200px; left: -100px;
  animation-delay: 0s;
}
.blob-2 {
  width: 500px; height: 500px;
  background: #16a34a;
  bottom: -200px; right: -100px;
  animation-delay: -7s;
}
.blob-3 {
  width: 400px; height: 400px;
  background: #15803d;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -14s;
}
@keyframes blobMorph {
  0%   { border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; transform: translate(0, 0) scale(1); }
  25%  { border-radius: 60% 40% 30% 70% / 40% 60% 40% 60%; transform: translate(50px, -30px) scale(1.1); }
  50%  { border-radius: 30% 70% 50% 50% / 50% 40% 60% 50%; transform: translate(-30px, 50px) scale(0.95); }
  75%  { border-radius: 50% 50% 40% 60% / 70% 30% 50% 60%; transform: translate(40px, 20px) scale(1.05); }
  100% { border-radius: 60% 40% 60% 40% / 40% 60% 30% 70%; transform: translate(-20px, -40px) scale(1); }
}

/* Section Label */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid rgba(22,163,74,0.25);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(22,163,74,0.06);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-label.visible {
  opacity: 1;
  transform: translateY(0);
}
.section-label .dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* Text Reveals */
.char-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(60px) rotateX(-40deg);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.char-reveal.visible {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
}
.char-space { width: 0.3em; }

.word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(15px);
  filter: blur(4px);
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
}
.word-reveal.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Tilt Cards */
.tilt-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 48px 40px;
  transform-style: preserve-3d;
  perspective: 1000px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(80px) scale(0.95);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.03);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1),
              border-color 0.5s ease,
              box-shadow 0.5s ease;
}
.tilt-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.tilt-card:hover {
  border-color: rgba(22,163,74,0.3);
  box-shadow: 0 0 60px -15px rgba(22,163,74,0.12), 0 1px 3px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.06);
}

.card-glow {
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.tilt-card:hover .card-glow { opacity: 0.2; }

/* Orbital Icons */
.orbital-container {
  position: relative;
  width: 80px; height: 80px;
  margin-bottom: 32px;
}
.orbital-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.orbital-icon i { color: var(--accent); }
.orbital-ring {
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(22,163,74,0.2);
  border-radius: 50%;
  animation: orbitalSpin 8s linear infinite;
}
.orbital-ring::before {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  top: -4px; left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 12px var(--accent-glow);
}
.orbital-ring-2 {
  position: absolute;
  inset: -18px;
  border: 1px solid rgba(22,163,74,0.1);
  border-radius: 50%;
  animation: orbitalSpin 12s linear infinite reverse;
}
.orbital-ring-2::before {
  content: '';
  position: absolute;
  width: 5px; height: 5px;
  background: var(--accent-dark);
  border-radius: 50%;
  bottom: -2px; left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(21,128,61,0.4);
}
@keyframes orbitalSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Stats */
.stat-item {
  text-align: center;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.stat-item.visible {
  opacity: 1;
  transform: translateY(0);
}
.stat-number {
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #111111 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.stat-line {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin: 12px auto;
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.6s ease 0.3s;
}
.stat-item.visible .stat-line {
  opacity: 1;
  transform: scaleX(1);
}
.stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Divider */
.h-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color), var(--accent), var(--border-color), transparent);
  opacity: 0;
  transform: scaleX(0);
  transition: all 1s cubic-bezier(0.16,1,0.3,1);
}
.h-divider.visible {
  opacity: 1;
  transform: scaleX(1);
}

/* Value Chips */
.value-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-secondary);
  background: rgba(0,0,0,0.02);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
  cursor: default;
}
.value-chip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.value-chip:hover {
  border-color: rgba(22,163,74,0.35);
  color: var(--text-primary);
  background: rgba(22,163,74,0.06);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(22,163,74,0.1);
}
.value-chip .chip-dot {
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
}

/* Background Grid */
.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  z-index: 0;
}

/* Vertical Line */
.v-line {
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--accent), transparent);
  margin: 0 auto;
  opacity: 0;
  animation: fadeInScale 1s ease forwards;
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}

/* Responsive */
@media (max-width: 768px) {
  .stat-number { font-size: 2.2rem; }
  .tilt-card { padding: 32px 24px; }
}


/* mission vission end */





/* cta section first */


/* ── Variables ── */
:root {
  --brand: #0C3C01;
  --brand-light: #eaf6e2;
  --white: #ffffff;
  --mist: rgba(255, 255, 255, 0.75);
  --ink: #05100c;
  --gray-600: #5b6b60;
  --gray-400: #8a978e;
  --radius-lg: 1.5rem;
  --radius-full: 999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Section shell ── */
.why-ecog {
  position: relative;
  padding: 6.5rem 3rem;
  overflow: hidden;
  background: radial-gradient(90rem 60rem at 50% 0%, #0f2c07 0%, var(--ink) 55%);
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.why-ecog__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.why-ecog__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(70rem 50rem at 50% 40%, transparent 40%, var(--ink) 92%);
}

.why-ecog__inner {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 3.5rem;
  align-items: center;
}

/* ── Reveal animation ── */
.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  filter: blur(5px);
  transition: opacity 0.85s var(--ease-out),
    transform 0.85s var(--ease-out),
    filter 0.85s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ── Left column ── */
.why-ecog__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.why-ecog__heading {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 1.25rem;
  letter-spacing: -0.01em;
}

.why-ecog__desc {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--mist);
  max-width: 27rem;
  margin: 0 0 2.25rem;
}

.why-ecog__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 3.25rem;
  padding: 0 1.75rem;
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 1rem 2.5rem -1rem rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.3s var(--ease-out),
    transform 0.15s var(--ease-out),
    background 0.3s var(--ease-out);
}

.why-ecog__cta:hover {
  background: var(--brand-light);
  box-shadow: 0 1.25rem 3rem -1rem rgba(140, 214, 120, 0.4);
}

.why-ecog__cta:active {
  transform: scale(0.97);
}

.why-ecog__cta:focus-visible {
  outline: 2px solid rgba(140, 214, 120, 0.8);
  outline-offset: 4px;
}

/* ── Right column ── */
.why-ecog__right {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 1.5rem;
  align-items: start;
}

/* ── Compare cards ── */
.compare-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 2rem 4rem -1.5rem rgba(0, 0, 0, 0.55);
  transition: transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
}

.compare-card:hover {
  transform: translateY(-0.375rem);
  box-shadow: 0 2.5rem 4.5rem -1.5rem rgba(0, 0, 0, 0.65);
}

.compare-card--left {
  margin-top: 3.5rem;
}

.compare-card--right {
  background: var(--brand-light);
}

.compare-card__title {
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 1.125rem;
  letter-spacing: -0.005em;
}

/* ── List items ── */
.compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--gray-600);
  opacity: 0;
  transform: translateX(-0.75rem);
  transition: opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out),
    color 0.3s var(--ease-out);
}

.compare-card--right .compare-list li {
  color: #1f3a14;
  transform: translateX(0.75rem);
}

.compare-list li.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.compare-list li:hover {
  color: var(--ink);
}

.compare-card--right .compare-list li:hover {
  color: var(--brand);
}

/* ── List icons ── */
.li-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.0625rem;
  transition: transform 0.35s var(--ease-out);
}

.compare-list li:hover .li-icon {
  transform: scale(1.15) rotate(-4deg);
}

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

.li-icon--muted {
  color: var(--gray-400);
}

.li-icon--brand {
  color: var(--brand);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .compare-list li,
  .compare-card,
  .li-icon {
    transition: none !important;
    animation: none !important;
  }

  .reveal,
  .compare-list li {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ── Tablet ── */
@media (max-width: 68.75rem) {
  .why-ecog__inner {
    grid-template-columns: 1fr;
  }

  .why-ecog__right {
    margin-top: 1rem;
  }

  .why-ecog__heading {
    font-size: 2.125rem;
  }
}

/* ── Mobile ── */
@media (max-width: 40rem) {
  .why-ecog {
    padding: 4.5rem 1.25rem;
  }

  .why-ecog__heading {
    font-size: 1.75rem;
  }

  .why-ecog__desc {
    font-size: 1rem;
  }

  .why-ecog__right {
    grid-template-columns: 1fr;
  }

  .compare-card--left {
    margin-top: 0;
  }
}



/* CTA sec */


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

body {
    font-family: "Montserrat";
    background: #f0f2f1;
    align-items: center;
    /* padding: 40px 16px; */
}

.cta-wrapper {
    width: 100%;
    max-width: 1240px;
    position: relative;
    margin: 100px auto 0;
    padding: 0 16px;
}

.cta-section {
    position: relative;
    background: #ffffff;
    border-radius: 28px;
    overflow: hidden;
    padding: 80px 64px;
    display: flex;
    align-items: center;
    gap: 60px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.04);
}

/* Green glow effects using #0C3C01 */
.cta-section::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(12, 60, 1, 0.08) 0%, rgba(12, 60, 1, 0.02) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.cta-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: 10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(12, 60, 1, 0.05) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.glow-orb {
    position: absolute;
    top: 20%;
    right: 25%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(12, 60, 1, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(40px);
}

.grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.015) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* Left content */
.cta-content {
    flex: 1;
    position: relative;
    z-index: 2;
    min-width: 0;
}

.cta-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(12, 60, 1, 0.07);
    border: 1px solid rgba(12, 60, 1, 0.12);
    border-radius: 100px;
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 600;
    color: #0C3C01;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.cta-label iconify-icon {
    font-size: 14px;
}

.cta-title {
    font-size: 48px;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.cta-title .highlight {
    color: #0C3C01;
}

.cta-subtitle {
    font-size: 22px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 20px;
    line-height: 1.4;
}

.cta-description {
    font-size: 15px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 480px;
}

.cta-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #0C3C01;
    color: #ffffff;
    font-family: "Montserrat";
    font-size: 14px;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 24px rgba(12, 60, 1, 0.25);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(12, 60, 1, 0.35);
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary iconify-icon {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.btn-primary:hover iconify-icon {
    transform: translateX(3px);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.03);
    color: #374151;
    font-family: "Montserrat";
    font-size: 14px;
    font-weight: 500;
    padding: 16px 32px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-secondary:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.18);
    color: #111827;
    transform: translateY(-2px);
}

.btn-secondary iconify-icon {
    font-size: 16px;
    opacity: 0.5;
}

.btn-secondary:hover iconify-icon {
    opacity: 1;
}

/* Right side - Phone mockup */
.cta-visual {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.phone-mockup {
    width: 280px;
    height: 560px;
    background: #1a1a2e;
    border-radius: 40px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 25px 60px rgba(0, 0, 0, 0.15),
        0 0 80px rgba(12, 60, 1, 0.06);
}

.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 28px;
    background: #77a875;
    border-radius: 0 0 20px 20px;
    z-index: 10;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #2d5822 0%, #285a14 30%, #4e6448 60%, #102709 100%);
    padding: 44px 20px 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.phone-screen::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 70% 20%, rgba(12, 60, 1, 0.25) 0%, transparent 40%);
    pointer-events: none;
}

.phone-time {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 32px;
    letter-spacing: 0.02em;
}

.phone-app-icon {
    width: 56px;
    height: 56px;
    background: #0C3C01;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 8px 24px rgba(12, 60, 1, 0.4);
}

.phone-app-icon iconify-icon {
    font-size: 28px;
    color: white;
}

.phone-app-name {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.phone-app-tagline {
    text-align: center;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 28px;
    line-height: 1.4;
}

.phone-metric-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    backdrop-filter: blur(10px);
}

.phone-metric-label {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.phone-metric-value {
    font-size: 22px;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: -0.02em;
}

.phone-metric-change {
    font-size: 10px;
    font-weight: 600;
    color: #86efac;
    margin-top: 2px;
}

.phone-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    margin-top: 12px;
    overflow: hidden;
}

.phone-progress-fill {
    height: 100%;
    width: 72%;
    background: #0C3C01;
    border-radius: 100px;
    box-shadow: 0 0 8px rgba(12, 60, 1, 0.5);
}

.phone-mini-cards {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.phone-mini-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
}

.phone-mini-card iconify-icon {
    font-size: 18px;
    color: #4ade80;
    margin-bottom: 4px;
}

.phone-mini-card-value {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
}

.phone-mini-card-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 2px;
}

/* Floating badges */
.float-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    z-index: 3;
    animation: float 6s ease-in-out infinite;
}

.float-badge-1 {
    top: 40px;
    right: -30px;
    animation-delay: 0s;
}

.float-badge-2 {
    bottom: 80px;
    left: -40px;
    animation-delay: -3s;
}

.float-badge-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(12, 60, 1, 0.08);
}

.float-badge-icon iconify-icon {
    font-size: 18px;
    color: #0C3C01;
}

.float-badge-text {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

.float-badge-sub {
    font-size: 10px;
    font-weight: 400;
    color: #9ca3af;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Responsive */
@media (max-width: 900px) {
    .cta-section {
        flex-direction: column;
        padding: 48px 32px;
        gap: 48px;
        text-align: center;
    }

    .cta-title {
        font-size: 34px;
    }

    .cta-subtitle {
        font-size: 18px;
    }

    .cta-description {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .cta-buttons {
        justify-content: center;
    }

    .phone-mockup {
        width: 240px;
        height: 480px;
    }

    .float-badge-1 {
        right: -10px;
        top: 20px;
    }

    .float-badge-2 {
        left: -10px;
        bottom: 60px;
    }
}

@media (max-width: 500px) {
    .cta-section {
        padding: 36px 20px;
        border-radius: 20px;
    }

    .cta-title {
        font-size: 28px;
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary,
    .btn-secondary {
        justify-content: center;
        width: 100%;
    }

    .phone-mockup {
        width: 200px;
        height: 400px;
    }

    .float-badge {
        display: none;
    }
}




  
/* =========================================
   FOOTER
========================================= */
.footer { font-family: "Montserrat"; }
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 0 100px; }

/* ---- Top dark green section ---- */
.footer-top { background: #12380a; color: #fff; padding: 56px 0 60px; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr auto auto auto auto;
  gap: 48px;
}
.f-col a, .f-col .f-head { white-space: nowrap; }
/* SERVICES column pushed right */
.footer-grid > .f-col:nth-child(2) { padding-left: 170px; }

.f-logo {
  font-size: 16px; font-weight: 700; letter-spacing: .5px;
  margin-bottom: 16px;
}
.f-desc {
  font-size: 15px; line-height: 1.55; color: #e9efe6;
  max-width: 380px; margin-bottom: 26px;
}
.f-news-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.f-news-desc { font-size: 15px; line-height: 1.5; color: #e9efe6; margin-bottom: 16px; }

.f-subscribe { display: flex; max-width: 300px; }
.f-subscribe input {
  flex: 1; min-width: 0;
  padding: 11px 14px;
  border: none; border-radius: 6px 0 0 6px;
  background: #f5f2ea; color: #333;
  font-size: 14px; font-family: "Montserrat"; outline: none;
}
.f-subscribe input::placeholder { color: #9aa79a; }
.f-subscribe button {
  padding: 11px 18px;
  border: none; border-radius: 6px;
  margin-left: -6px;
  background: #1f5c13; color: #fff;
  font-size: 14px; font-family: "Montserrat"; cursor: pointer;
  transition: background .2s ease;
}
.f-subscribe button:hover { background: #2a7a1a; }

.f-col { display: flex; flex-direction: column; }
.f-head {
  font-size: 16px; font-weight: 700; letter-spacing: .5px;
  margin-bottom: 20px; color: #fff;
}
.f-head-gap { margin-top: 28px; }
.f-head-normal { text-transform: none; }
.f-col a {
  color: #eef3ec; text-decoration: none;
  font-size: 15.5px; line-height: 1.4;
  margin-bottom: 16px;
  transition: color .2s ease, transform .2s ease;
}
.f-col a:hover { color: #a8d99a; }

/* ---- Cream middle strip ---- */
.footer-mid { background: #f5f2ea; padding: 22px 0; }
.footer-mid-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
}
.f-follow { display: flex; align-items: center; gap: 16px; }
.f-follow > span { font-size: 16px; color: #1a1a1a; margin-right: 8px; }
.f-social {
  width: 36px; height: 36px; border-radius: 50%;
  background: #12380a; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease, background .25s ease;
}
.f-social svg { width: 17px; height: 17px; }
.f-social:hover { transform: scale(1.15); background: #1f5c13; }

.f-contact { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.f-contact a {
  display: flex; align-items: center; gap: 8px;
  color: #12380a; text-decoration: none; font-size: 16px;
  transition: color .2s ease;
}
.f-contact a:hover { color: #2a7a1a; }
.f-ci { width: 17px; height: 17px; flex-shrink: 0; }

/* ---- Bottom dark strip ---- */
.footer-bottom { background: #12380a; padding: 34px 0 44px; }
.footer-bottom-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
}
.f-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.f-legal a {
  color: #eef3ec; text-decoration: none; font-size: 15px;
  transition: color .2s ease;
}
.f-legal a:hover { color: #a8d99a; }
.f-legal span { color: #eef3ec; font-size: 14px; }
.f-copy { color: #eef3ec; font-size: 15px; }

/* =========================================
   FOOTER RESPONSIVE
========================================= */
/* Laptop */
@media (max-width: 1280px) {
  .footer-inner { padding: 0 48px; }
  .footer-grid { gap: 36px; }
  .footer-grid > .f-col:nth-child(2) { padding-left: 60px; }
}

/* Tablet */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }
  .footer-grid > .f-col:nth-child(2) { padding-left: 0; }
  .f-col a, .f-col .f-head { white-space: normal; }
  .f-brand { grid-column: 1 / -1; }
  .f-desc { max-width: 520px; }
}

/* Mobile */
@media (max-width: 640px) {
  .footer-inner { padding: 0 20px; }
  .footer-top { padding: 44px 0 48px; }
  /* mobile grid system: brand full width, link columns 2-per-row */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .f-brand { grid-column: 1 / -1; }
  .f-col a { font-size: 14.5px; margin-bottom: 13px; }
  .f-head { font-size: 15px; margin-bottom: 14px; }
  .f-subscribe { max-width: 100%; }
  .footer-mid-row { flex-direction: column; align-items: flex-start; }
  .f-contact { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-bottom-row { flex-direction: column; align-items: flex-start; }
  .f-legal { row-gap: 6px; }
}

/* Small mobile */
@media (max-width: 380px) {
  .f-follow { flex-wrap: wrap; }
  .f-contact a { font-size: 14.5px; word-break: break-all; }
}

/* ============================================================
   ABOUT ECT — EXACT FIGMA MEDIA + FIGMA TYPOGRAPHY
   Desktop frame reference: 1440px
   Group: 1194 × 558.0337px, x = 123px
============================================================ */
.about-ect {
  --about-green: #0c3c01;
  --about-soft: #f1f2ed;
  --about-ink: #000000;
  width: 100%;
  padding: 72px 24px 88px;
  background: #ffffff;
  color: var(--about-ink);
  font-family: "Montserrat", sans-serif;
}

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

.about-ect__inner {
  width: min(1194px, 100%);
  min-height: 558.0337px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 602px 568px;
  column-gap: 24px;
  align-items: start;
}

/* Exact 602 × 558.0337 Figma media footprint. The SVG already contains
   the original cream shape, image mask, green accents and play artwork. */
.about-ect__media {
  position: relative;
  width: 602px;
  height: 558.0337px;
  margin: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
}

.about-ect__figma-media {
  display: block;
  width: 602px;
  height: 558.0337px;
  max-width: none;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

.about-ect__content {
  width: 568px;
  margin: 84px 0 0;
  align-self: start;
}

.about-ect__eyebrow {
  width: max-content;
  height: 24px;
  margin: 0 0 8px;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #000;
}

.about-ect__title {
  width: 499px;
  max-width: 100%;
  min-height: 78px;
  margin: 0 0 16px;
  font-family: "Montserrat", sans-serif;
  font-size: 31.25px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  color: #000;
}

.about-ect__text {
  width: 100%;
  min-height: 96px;
  margin: 0 0 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #000;
}

.about-ect__text + .about-ect__text {
  margin-top: 0;
  margin-bottom: 24px;
}

.about-ect__cta {
  width: 155px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--about-green);
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  transition: transform 280ms cubic-bezier(.22, 1, .36, 1), background 280ms ease;
}

.about-ect__cta:hover { transform: translateY(-2px); background: #102f08; }

.about-ect [data-about-ect-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 750ms cubic-bezier(.22, 1, .36, 1), transform 750ms cubic-bezier(.22, 1, .36, 1);
}
.about-ect [data-about-ect-reveal="content"] { transition-delay: 100ms; }
.about-ect [data-about-ect-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   READY TO PARTNER WITH ECT — FIGMA NODE 4100:6863
   Desktop frame: 1241 × 426px
============================================================ */
.ect-partner {
  width: 100%;
  padding: 72px 24px 96px;
  background: #ffffff;
  font-family: "Montserrat", sans-serif;
}

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

.ect-partner__inner {
  position: relative;
  width: min(1241px, 100%);
  height: 426px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  background: #f5f5f3;
  isolation: isolate;
}

.ect-partner__inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 620px;
  height: 280px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,109,73,.08), rgba(91,109,73,0) 70%);
  pointer-events: none;
}

.ect-partner__content {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 115px;
  width: 736px;
  transform: translateX(-50%);
  text-align: center;
}

.ect-partner__title {
  width: 736px;
  max-width: 100%;
  min-height: 61px;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 48.83px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #000;
  text-align: center;
}

.ect-partner__text {
  width: 654px;
  max-width: 100%;
  min-height: 72px;
  margin: 8px auto 0;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #000;
  text-align: center;
}

.ect-partner__cta {
  width: 156px;
  height: 40px;
  margin: 16px auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: #0c3c01;
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(12, 60, 1, .14);
  transition: transform 280ms cubic-bezier(.22, 1, .36, 1), box-shadow 280ms ease, background 280ms ease;
}

.ect-partner__cta:hover {
  transform: translateY(-2px);
  background: #102f08;
  box-shadow: 0 14px 28px rgba(12, 60, 1, .22);
}

.ect-partner__logo {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(17, 25, 18, 0.08), inset 0 0 0 1px rgba(12,60,1,.035);
  animation: ectPartnerFloat 7s ease-in-out infinite;
}

.ect-partner__logo img {
  width: 72%;
  height: 72%;
  display: block;
  object-fit: contain;
}

.ect-partner__logo img:not([src]) {
  display: none;
}

/* Positions converted from the 1443px Figma canvas to the 1241px CTA-local frame. */
.ect-partner__logo--1 { width: 92px; height: 92px; left: 45px;  top: 81px;  animation-delay: -1.1s; }
.ect-partner__logo--2 { width: 74px; height: 74px; left: 146px; top: 202px; animation-delay: -3.2s; }
.ect-partner__logo--3 { width: 69px; height: 69px; left: 225px; top: 33px;  animation-delay: -4.8s; }
.ect-partner__logo--4 { width: 56px; height: 56px; left: 71px;  top: 323px; animation-delay: -2.0s; background: #1d3951; }
.ect-partner__logo--5 { width: 93px; height: 93px; right: 159px; top: 55px; animation-delay: -5.1s; }
.ect-partner__logo--6 { width: 85px; height: 85px; right: 75px;  top: 220px; animation-delay: -2.8s; }
.ect-partner__logo--7 { width: 79px; height: 79px; right: 193px; top: 283px; animation-delay: -4.1s; }
.ect-partner__logo--8 { width: 53px; height: 53px; right: 367px; top: 312px; animation-delay: -1.7s; }
.ect-partner__logo--9 { width: 74px; height: 74px; left: 325px; top: 288px; animation-delay: -3.7s; }

@keyframes ectPartnerFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

.ect-partner [data-partner-reveal] {
  opacity: 0;
  transform: translate(-50%, 24px);
  transition: opacity 750ms cubic-bezier(.22, 1, .36, 1), transform 750ms cubic-bezier(.22, 1, .36, 1);
}

.ect-partner [data-partner-reveal].is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================
   RESPONSIVE — NEW ABOUT SECTIONS ONLY
============================================================ */
@media (max-width: 1240px) {
  .about-ect__inner {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  }

  .about-ect__media,
  .about-ect__content {
    width: 100%;
  }

  .about-ect__media {
    height: auto;
    aspect-ratio: 602 / 558;
  }
}

@media (max-width: 900px) {
  .about-ect {
    padding: 56px 24px 72px;
  }

  .about-ect__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-ect__media {
    max-width: 602px;
    margin: 0 auto;
  }

  .about-ect__content {
    max-width: 602px;
    margin: 0 auto;
  }

  .ect-partner__inner {
    height: auto;
    min-height: 426px;
    padding: 92px 32px;
  }

  .ect-partner__content {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 680px);
    margin: 0 auto;
    transform: none;
  }

  .ect-partner [data-partner-reveal] {
    transform: translateY(24px);
  }

  .ect-partner [data-partner-reveal].is-visible {
    transform: translateY(0);
  }

  .ect-partner__title {
    width: 100%;
    font-size: clamp(34px, 6vw, 48.83px);
  }

  .ect-partner__text {
    width: min(100%, 654px);
  }

  .ect-partner__logo {
    opacity: .6;
    transform: scale(.82);
  }
}

@media (max-width: 640px) {
  .about-ect {
    padding: 48px 18px 64px;
  }

  .about-ect__inner {
    gap: 28px;
  }

  .about-ect__media {
    border-radius: 22px;
  }

  .about-ect__play {
    width: 58px;
    height: 58px;
  }

  .about-ect__title {
    width: 100%;
    font-size: 27px;
  }

  .about-ect__text {
    font-size: 15px;
    line-height: 23px;
  }

  .ect-partner {
    padding: 48px 18px 68px;
  }

  .ect-partner__inner {
    min-height: 420px;
    padding: 88px 20px 70px;
  }

  .ect-partner__title {
    font-size: 31px;
    line-height: 1.18;
  }

  .ect-partner__text {
    margin-top: 14px;
    font-size: 15px;
    line-height: 23px;
  }

  .ect-partner__cta {
    margin-top: 20px;
  }

  .ect-partner__logo--3,
  .ect-partner__logo--6,
  .ect-partner__logo--8,
  .ect-partner__logo--9 {
    display: none;
  }

  .ect-partner__logo--1 { left: 14px; top: 24px; width: 62px; height: 62px; }
  .ect-partner__logo--2 { left: 22px; top: auto; bottom: 24px; width: 54px; height: 54px; }
  .ect-partner__logo--4 { left: 92px; top: 28px; width: 42px; height: 42px; }
  .ect-partner__logo--5 { right: 16px; top: 28px; width: 66px; height: 66px; }
  .ect-partner__logo--7 { right: 26px; top: auto; bottom: 24px; width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-ect [data-about-ect-reveal],
  .ect-partner [data-partner-reveal],
  .ect-partner__logo,
  .about-ect__video,
  .about-ect__play,
  .about-ect__cta,
  .ect-partner__cta {
    animation: none !important;
    transition: none !important;
  }

  .about-ect [data-about-ect-reveal],
  .ect-partner [data-partner-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ============================================================
   ABOUT ECT — PLAYABLE FIGMA MEDIA FINAL OVERRIDES
   Exact desktop footprint: 602 × 558.0337px
   Reconstructs Figma layers and swaps poster -> video on play.
============================================================ */
.about-ect__media {
  position: relative;
  width: 602px;
  height: 558.0337px;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
}

/* .about-ect__decor,
.about-ect__poster,
.about-ect__video-mask {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
} */

.about-ect__decor,
.about-ect__poster {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.about-ect__video-mask {
  position: absolute;
  display: block;
  pointer-events: auto;
  user-select: none;
}

.about-ect__video {
  cursor: default;
}

/* Desktop only: hide the cursor while the pointer is inside the media
   wrapper and the video is actively playing. Touch/coarse-pointer
   devices are excluded, so tap-to-play behavior there is unaffected. */
@media (hover: hover) and (pointer: fine) {
  .about-ect__media.is-hovering.is-playing,
  .about-ect__media.is-hovering.is-playing .about-ect__video {
    cursor: none;
  }
}

.about-ect__media.is-playing .about-ect__video {
  cursor: pointer;
}

/* Figma Mask Group local offsets derived from the exported vectors. */
.about-ect__decor--cream {
  z-index: 1;
  left: 29.752px;
  top: 5.8905px;
  width: 476px;
  height: 462px;
}

.about-ect__poster,
.about-ect__video-mask {
  left: 9.482px;
  top: 32.2174px;
  width: 593px;
  height: 526px;
}

.about-ect__poster {
  z-index: 2;
  object-fit: fill;
  opacity: 1;
  transition: opacity 260ms ease;
}

.about-ect__video-mask {
  z-index: 2;
  overflow: hidden;
  opacity: 0;
  transition: opacity 260ms ease;

  -webkit-mask-image: url("../assets/about-ect/vector-media.svg");
  mask-image: url("../assets/about-ect/vector-media.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.about-ect__media.is-video-active .about-ect__poster { opacity: 0; }
.about-ect__media.is-video-active .about-ect__video-mask { opacity: 1; }

.about-ect__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #000;
}

.about-ect__decor--green {
  z-index: 3;
  left: 50.589px;
  top: 26.8817px;
  width: 517px;
  height: 516px;
}

/* Exact Figma play hit-area. The SVG inside uses the original path. */
.about-ect__figma-play {
  position: absolute;
  z-index: 5;
  left: 259.29px;
  top: 270.56px;
  width: 67.64px;
  height: 67.30px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0C3C01;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transform-origin: center;
  transition: transform 220ms cubic-bezier(.22,1,.36,1), opacity 220ms ease;
}

.about-ect__figma-play svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.about-ect__figma-play:hover { transform: scale(1.06); }
.about-ect__figma-play:active { transform: scale(.94); }
.about-ect__figma-play:focus-visible {
  outline: 3px solid rgba(12, 60, 1, .25);
  outline-offset: 5px;
  border-radius: 50%;
}

/* While playing, keep the exact visual clean. Moving over the media reveals
   the play control as a pause affordance; clicking toggles play/pause. */
/* .about-ect__media.is-playing .about-ect__figma-play {
  opacity: 0;
}
.about-ect__media.is-playing:hover .about-ect__figma-play,
.about-ect__media.is-playing .about-ect__figma-play:focus-visible {
  opacity: .9;
} */

/* Play button visible when paused */
.about-ect__figma-play {
  opacity: 1;
  visibility: visible;

  transition:
    opacity 220ms ease,
    visibility 220ms ease,
    transform 220ms cubic-bezier(.22, 1, .36, 1);
}

/* Completely hide while video is playing */
.about-ect__media.is-playing .about-ect__figma-play {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Video itself becomes clickable while playing */
.about-ect__media.is-playing .about-ect__video {
  cursor: pointer;
}

/* Exact Figma CTA dimensions + prevent the two-line wrap. */
.about-ect__cta {
  box-sizing: border-box;
  width: 155px;
  min-width: 155px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: #0C3C01;
  color: #FFFFFF;
  font-family: "Outfit", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  box-shadow: none;
}

@media (max-width: 1240px) {
  .about-ect__decor--cream,
  .about-ect__poster,
  .about-ect__video-mask,
  .about-ect__decor--green,
  .about-ect__figma-play {
    transform-origin: top left;
  }
}


/* ============================================================
   ABOUT ECT — VIDEO BUG FIX (LOCAL FILE SAFE)
   Fixes Chrome file:// external SVG-mask failure.
============================================================ */
.about-ect__video-mask {
  /* Do not use external mask-image here. Local file:// pages may block it. */
  -webkit-mask-image: none !important;
  mask-image: none !important;

  /* Exact Figma organic contour, using the exported 593 × 526 vector path. */
  -webkit-clip-path: path("M363.662 472.277L364.794 470.476C378.704 448.347 399.555 431.452 424.088 422.433L492.288 397.361C537.045 380.907 571.2 343.99 584.129 298.09L584.957 295.152C597.481 250.69 587.727 202.916 558.776 166.922C539.063 142.414 511.81 125.099 481.249 117.666L424.201 103.789C392.125 95.9868 362.565 80.1434 338.309 57.7528C309.831 31.4655 274.145 14.2924 235.833 8.43932L216.736 5.52163C170.998 -1.46602 124.297 8.79772 85.7039 34.3188L79.8898 38.1636C40.0712 64.4952 13.1054 106.305 5.54066 153.439C-3.80201 211.651 17.5712 270.561 62.0668 309.241L97.9182 340.405C121.314 360.743 140.824 385.16 155.497 412.467L168.327 436.344L183.387 467.539C205.736 513.833 259.624 535.538 307.82 517.659C330.921 509.089 350.55 493.137 363.662 472.277Z");
  clip-path: path("M363.662 472.277L364.794 470.476C378.704 448.347 399.555 431.452 424.088 422.433L492.288 397.361C537.045 380.907 571.2 343.99 584.129 298.09L584.957 295.152C597.481 250.69 587.727 202.916 558.776 166.922C539.063 142.414 511.81 125.099 481.249 117.666L424.201 103.789C392.125 95.9868 362.565 80.1434 338.309 57.7528C309.831 31.4655 274.145 14.2924 235.833 8.43932L216.736 5.52163C170.998 -1.46602 124.297 8.79772 85.7039 34.3188L79.8898 38.1636C40.0712 64.4952 13.1054 106.305 5.54066 153.439C-3.80201 211.651 17.5712 270.561 62.0668 309.241L97.9182 340.405C121.314 360.743 140.824 385.16 155.497 412.467L168.327 436.344L183.387 467.539C205.736 513.833 259.624 535.538 307.82 517.659C330.921 509.089 350.55 493.137 363.662 472.277Z");

  background: transparent;
  visibility: hidden;
  opacity: 0;
}

.about-ect__media.is-video-active .about-ect__video-mask {
  visibility: visible;
  opacity: 1;
}

/* Poster remains visible until the browser confirms actual playback. */
.about-ect__media:not(.is-playing) .about-ect__poster {
  opacity: 1 !important;
}

.about-ect__media.is-playing .about-ect__poster {
  opacity: 0 !important;
}

.about-ect__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Loading/error feedback without disturbing the Figma artwork. */
.about-ect__figma-play.is-loading {
  opacity: .65;
  pointer-events: none;
}

.about-ect__media.has-video-error .about-ect__figma-play {
  opacity: 1 !important;
}



/* ============================================================
   DESKTOP / LARGE LAPTOP
============================================================ */
@media (min-width: 1280px) {

  /* Center frame shortened to visually finish with the right image */
  .who-section .img-center {
    width: 100% !important;
    /* height: 346px !important; */
    min-height: 346px !important;
    max-height: 346px !important;
    aspect-ratio: auto !important;
    overflow: hidden;
  }

  /* Override the global 1.18 / 1.05 zoom only for the lady image */
  .who-section .img-center img,
  .who-section .in-view .img-center img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 24% !important;
    transform: scale(1) !important;
  }
}

/* ============================================================
   LAPTOP
   Keep the 3-column layout but scale the center portrait cleanly
============================================================ */
@media (min-width: 981px) and (max-width: 1279px) {

  .who-section .img-center {
    width: 100% !important;
    height: clamp(300px, 29vw, 346px) !important;
    min-height: 0 !important;
    max-height: 346px !important;
    aspect-ratio: auto !important;
    overflow: hidden;
  }

  .who-section .img-center img,
  .who-section .in-view .img-center img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 24% !important;
    transform: scale(1) !important;
  }
}

/* ============================================================
   TABLET
   Existing 2-column responsive structure remains intact.
============================================================ */
@media (min-width: 641px) and (max-width: 980px) {

  .who-section .img-center {
    width: 100% !important;
    height: clamp(340px, 58vw, 500px) !important;
    min-height: 0 !important;
    max-height: 500px !important;
    aspect-ratio: auto !important;
    overflow: hidden;
  }

  .who-section .img-center img,
  .who-section .in-view .img-center img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 22% !important;
    transform: scale(1) !important;
  }
}

/* ============================================================
   MOBILE
============================================================ */
@media (max-width: 640px) {

  .who-section .img-center {
    width: 100% !important;
    height: clamp(300px, 95vw, 420px) !important;
    min-height: 0 !important;
    max-height: 420px !important;
    aspect-ratio: auto !important;
    overflow: hidden;
  }

  .who-section .img-center img,
  .who-section .in-view .img-center img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    transform: scale(1) !important;
  }
}

/* ============================================================
   WHO WE ARE — FINAL PERFECT CENTER IMAGE ALIGNMENT

   Goal:
   - Left column decides its natural total height
   - Right column decides its natural total height
   - Grid row uses the taller side
   - Center lady image DOES NOT create row height
   - Center lady image fills that exact row height
============================================================ */


/* ============================================================
   EYEBROW
   Keep only the real blinking HTML dot
============================================================ */

html body .who-section .eyebrow::before,
html body .who-section .eyebrow::after {
    content: none !important;
    display: none !important;
}

html body .who-section .eyebrow > .dot {
    display: inline-block !important;

    width: 8px !important;
    height: 8px !important;

    min-width: 8px !important;
    min-height: 8px !important;

    flex: 0 0 8px !important;

    border-radius: 50% !important;

    background: #0C3C01 !important;

    animation: whoSingleDotBlink 1.25s ease-in-out infinite !important;
}

@keyframes whoSingleDotBlink {

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

    50% {
        opacity: .25;
        transform: scale(.72);
    }
}


/* ============================================================
   DESKTOP
============================================================ */

@media (min-width: 981px) {

    /*
       IMPORTANT

       Do NOT give the grid a fixed height.

       Left and right columns calculate the natural row height.
    */
    html body .who-section .grid {
        display: grid !important;

        grid-template-columns:
            300px
            minmax(0, 1fr)
            300px !important;

        gap: 26px !important;

        align-items: stretch !important;

        height: auto !important;
        min-height: 0 !important;
    }


    /* --------------------------------------------------------
       LEFT + RIGHT

       Leave their content completely natural.
       These two columns determine the final bottom line.
    -------------------------------------------------------- */

    html body .who-section .grid > .col:not(.center) {
        height: auto !important;
        min-height: 0 !important;

        align-self: start !important;
    }


    /* --------------------------------------------------------
       CENTER COLUMN

       Key fix:
       The center column itself stretches to the grid-row height,
       but the image inside it becomes ABSOLUTE.

       Therefore the lady image no longer increases grid height.
    -------------------------------------------------------- */

    html body .who-section .grid > .col.center {
        position: relative !important;

        display: block !important;

        align-self: stretch !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: visible !important;
    }


    /* --------------------------------------------------------
       CENTER FRAME

       Fill exactly the height calculated from side columns.
    -------------------------------------------------------- */

    html body .who-section .img-center {
        position: absolute !important;

        inset: 0 !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;

        aspect-ratio: auto !important;

        overflow: hidden !important;

        border-radius: 24px !important;
    }


    /* --------------------------------------------------------
       CENTER IMAGE

       No global 1.18 / 1.05 zoom.
    -------------------------------------------------------- */

    html body .who-section .img-center img,
    html body .who-section .in-view .img-center img {
        position: absolute !important;

        inset: 0 !important;

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;

        /*
           Keeps face/upper body framed correctly.
           Change only this value if you later want crop adjustment.
        */
        object-position: center 28% !important;

        transform: none !important;

        scale: 1 !important;

        transition:
            object-position .3s ease !important;
    }


    /* Same rounded corners as Figma */
    html body .who-section .frame,
    html body .who-section .frame::before,
    html body .who-section .frame::after {
        border-radius: 24px !important;
    }
}


/* ============================================================
   TABLET
   Return center image to normal document flow
============================================================ */

@media (min-width: 641px) and (max-width: 980px) {

    html body .who-section .col.center {
        position: relative !important;

        height: auto !important;
    }

    html body .who-section .img-center {
        position: relative !important;

        inset: auto !important;

        width: 100% !important;
        height: auto !important;

        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 454 / 400 !important;

        margin: 0 !important;

        overflow: hidden !important;

        border-radius: 24px !important;
    }

    html body .who-section .img-center img,
    html body .who-section .in-view .img-center img {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center 28% !important;

        transform: none !important;

        scale: 1 !important;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 640px) {

    html body .who-section .col.center {
        position: relative !important;

        height: auto !important;
    }

    html body .who-section .img-center {
        position: relative !important;

        inset: auto !important;

        width: 100% !important;
        height: auto !important;

        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 4 / 3 !important;

        margin: 0 !important;

        overflow: hidden !important;

        border-radius: 20px !important;
    }

    html body .who-section .img-center img,
    html body .who-section .in-view .img-center img {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;

        object-position: center 25% !important;

        transform: none !important;

        scale: 1 !important;
    }
}

/* ============================================================
   ABOUT HERO — FIGMA EXACT TYPOGRAPHY / POSITION
   Figma reference:
   frame = 1440 × 486
============================================================ */


/* ------------------------------------------------------------
   HERO GREEN AREA

   Figma:
   x = 0
   y = -3
   width = 1440
   height = 486
   background = #0C3C01

   Keep the existing sticky/scroll engine.
------------------------------------------------------------ */

html body .track .stage {
    position: sticky;

    top: 64px;

    /* KEEP existing scroll animation working */
    height: calc(150vh - 64px);

    overflow: hidden;

    /*
       First 486px = exact Figma green.
       Everything after it remains white for the card animation.
    */
    background:
        linear-gradient(
            to bottom,
            #0C3C01 0,
            #0C3C01 486px,
            #FFFFFF 486px,
            #FFFFFF 100%
        ) !important;
}


/* ============================================================
   HEADING WRAPPER
============================================================ */

html body .track .stage .heading {
    position: absolute;

    z-index: 10;

    /*
       Do NOT use:
       top:16vh

       Figma uses fixed pixel geometry.
    */

    top: 105.14px !important;
    left: 50% !important;
    right: auto !important;

    width: 869px;
    max-width: calc(100% - 40px);

    margin: 0;
    padding: 0;

    transform: translateX(-50%);

    text-align: center;

    color: #D8E0D6;

    will-change: transform, opacity;
}


/* ============================================================
   SMALL TITLE — "Welcome to ECT"

   Figma:
   width = 170
   height = 30
   y = 105.14

   Montserrat
   600
   20px
   line-height 150% = 30px
============================================================ */

html body .heading .hero-kicker {
    width: 170px;
    height: 30px;

    margin: 0 auto;

    padding: 0;

    font-family: "Montserrat", sans-serif;

    font-style: normal;
    font-weight: 600;

    font-size: 20px;
    line-height: 30px;

    letter-spacing: 0;

    text-align: center;

    color: #D8E0D6;

    opacity: 1;
}


/* ============================================================
   MAIN TITLE

   Figma:
   width  = 869
   height = 98
   y      = 152

   Difference from kicker:
   152 - 105.14 = 46.86px

   Kicker height = 30px

   Visual gap:
   46.86 - 30
   = 16.86px
============================================================ */

html body .heading .hero-main-title {
    width: 869px;
    max-width: 100%;

    min-height: 98px;

    margin: 16.86px auto 0;

    padding: 0;

    font-family: "Montserrat", sans-serif;

    font-style: normal;
    font-weight: 700;

    font-size: 39.06px;

    /*
       Figma:
       39.06 × 125%
       ≈ 48.825px
    */
    line-height: 1.25;

    letter-spacing: 0;

    text-align: center;

    color: #D8E0D6;
}


/* ============================================================
   REMOVE OLD HERO ELEMENTS

   Safety only — if old HTML remains temporarily.
============================================================ */

html body .heading .pill,
html body .heading .cta {
    display: none !important;
}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1200px) {

    html body .track .stage .heading {
        width: min(869px, calc(100% - 64px));
    }

    html body .heading .hero-main-title {
        width: 100%;

        font-size: clamp(
            34px,
            3.15vw,
            39.06px
        );
    }
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 768px) {

    html body .track .stage .heading {
        top: 82px !important;

        width: calc(100% - 48px);
    }

    html body .heading .hero-kicker {
        width: auto;
        height: auto;

        font-size: 18px;
        line-height: 27px;
    }

    html body .heading .hero-main-title {
        min-height: 0;

        margin-top: 14px;

        font-size: clamp(
            29px,
            5.5vw,
            36px
        );

        line-height: 1.25;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 480px) {

    html body .track .stage .heading {
        top: 68px !important;

        width: calc(100% - 32px);
    }

    html body .heading .hero-kicker {
        font-size: 16px;
        line-height: 24px;
    }

    html body .heading .hero-main-title {
        margin-top: 12px;

        font-size: 27px;
        line-height: 1.22;
    }

    html body .heading .hero-main-title br {
        display: none;
    }
}


/* ============================================================
   CORE PILLARS SECTION
   Figma frame: 1240 x 1351, desktop baseline 1440px
   Pillar default: 146.15 x 606, gap between = row gap
   Expanded card: 693 x 606, bg #F1F1EF, radius 16px
============================================================ */

.pillars-section {
  width: 100%;
  background: #ffffff;
  padding: 96px 0;
  font-family: "Montserrat", sans-serif;
}

.pillars-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.pillars-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.pillars-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #111111;
  margin-bottom: 10px;
}

.pillars-title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #0d0d0d;
  margin: 0;
}

.pillars-header__text {
  max-width: 420px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(0,0,0,0.62);
  margin: 6px 0 0;
}

/* Logo */
.pillars-logo {
  display: flex;
  justify-content: center;
  margin: 8px 0 36px;
}

.pillars-logo__img {
  height: 64px;
  width: auto;
  display: block;
}

/* "Trusted by..." banner — sized to Figma proportion (~78% of row
   width, centered). The bottom "Behind every successful project..."
   banner is untouched — its own .pillars-banner--bottom rule below
   overrides width/padding/font-size separately. */
.pillars-banner {
  width: 78%;
  max-width: 970px;
  margin-left: auto;
  margin-right: auto;
  background: #F1F1EF;
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  margin-bottom: 24px;
}

.pillars-banner p {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 130%;
  color: #000000;
}

.pillars-banner--bottom {
  width: 100%;
  max-width: none;
  margin-top: 24px;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 40px 48px;
}

.pillars-banner--bottom p {
  font-size: 17px;
}

/* Sub heading strip */
.pillars-subhead {
  background: #F1F1EF;
  border-radius: 16px;
  padding: 56px 40px;
  text-align: center;
  margin-bottom: 8px;
}

.pillars-subhead p {
  margin: 0 auto !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 150% !important;
  color: #000000 !important;
  max-width: 923px !important;
}

/* Pillars row */
.pillars-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  height: 606px;
  margin-top: 8px;
}

.pillar {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  height: 606px;
  border-radius: 16px;
  cursor: pointer;
  outline: none;
  transition: flex-grow 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

/* The vertical collapsed bar */
.pillar__bar {
  position: absolute;
  inset: 0;
  background: #F1F1EF;
  border-radius: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 36px;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.pillar__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0d0d0d;
  white-space: nowrap;
  transition: opacity 0.25s ease;
}

/* The expanded detail card, hidden by default.
   Fade-OUT (losing .is-active) uses this fast, no-delay transition so a
   pillar's content disappears quickly once it's no longer active. */
.pillar__card {
  position: absolute;
  inset: 0;
  background: #F1F1EF;
  border-radius: 16px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.18s ease;
}

.pillar__card-inner {
  height: 100%;
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pillar__card-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #0d0d0d;
  margin: 0 0 18px;
  flex: 0 0 auto;
}

.pillar__card-media {
  width: 100%;
  flex: 1 1 auto;
  min-height: 220px;
  border-radius: 12px;
  background: #ffffff;
  margin-bottom: 20px;
  overflow: hidden;
}

.pillar__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pillar__kural-num {
  font-size: 15px;
  font-weight: 700;
  color: #0d0d0d;
  margin: 0 0 6px;
  flex: 0 0 auto;
}

.pillar__kural-text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: #0d0d0d;
  margin: 0 0 12px;
  flex: 0 0 auto;
}

.pillar__explain {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(0,0,0,0.72);
  margin: 0;
  flex: 0 0 auto;
}

.pillar__explain strong {
  color: #0d0d0d;
}

/* ---- Active / hover state driven via JS class on the row ---- */

/* Default: all 7 pillars share the row equally (flex: 1 1 0% each). */

/* When a pillar is active, it grows into the ~693px stone card while
   every sibling stays fully visible — just proportionally narrower,
   never hidden or faded. Ratio 8 : 1×6 puts the active pillar at
   roughly 57% of the row width, matching the Figma card size. */
.pillars-row[data-active] .pillar {
  flex-grow: 1;
}

.pillars-row[data-active] .pillar.is-active {
  flex-grow: 8;
}

.pillars-row[data-active] .pillar.is-active .pillar__bar {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Fade-IN is delayed so text only appears once the column has mostly
   finished growing to full width — this avoids the cramped/wrapped
   "flash" that happens if content renders while still narrow. */
.pillars-row[data-active] .pillar.is-active .pillar__card {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease 0.32s;
}

/* ============================================================
   CORE PILLARS - RESPONSIVE
============================================================ */

@media (max-width: 900px) {
  .pillars-row {
    flex-direction: column;
    height: auto;
    gap: 12px;
  }

  .pillar {
    flex: none !important;
    width: 100%;
    height: 72px;
    opacity: 1 !important;
  }

  .pillar__bar {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
  }

  .pillar__label {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .pillars-row[data-active] .pillar {
    opacity: 1;
  }

  .pillars-row[data-active] .pillar:not(.is-active) {
    height: 72px;
  }

  .pillar.is-active {
    height: auto;
    min-height: 480px;
  }

  .pillars-row[data-active] .pillar.is-active {
    flex-basis: auto;
  }

  .pillar.is-active .pillar__bar {
    display: none;
  }

  .pillar__card {
    position: relative;
    inset: auto;
    height: 0;
    opacity: 0;
    transform: none;
  }

  .pillar.is-active .pillar__card {
    height: auto;
    opacity: 1;
    pointer-events: auto;
    padding: 4px 0;
  }

  .pillar.is-active .pillar__card-inner {
    padding: 20px;
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .pillars-header {
    flex-direction: column;
  }

  .pillars-banner, .pillars-subhead {
    padding: 28px 20px;
  }

  .pillars-banner p { font-size: 15px; }
  .pillars-subhead p { font-size: 18px; }
}