.about-hero{
  padding: 0 !important;                 /* nuke old padding */
  background:#000;
  color:#FFFFFF;

  /* variables the container will use */
  --pad-top:    clamp(137px, calc(233 / 1440 * 100vw), 233px);
  --pad-bottom: clamp(31px,  calc(121 / 1440 * 100vw), 121px);
  --gut-x:      min(calc(117 / 1440 * 100vw), 117px);  /* horizontal gutter */
}

/* If you had a mobile rule that added padding, kill it too */
@media (max-width:768px){
  .about-hero{ padding: 0 !important; }
}

/* The only padding lives here */
.about-hero-container{
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: var(--pad-top) var(--gut-x) 0;
  box-sizing: border-box;
}

/* Title SVG in normal flow; gap guaranteed by margin */
.about-hero-svg{
  display: block;
  width: min(calc(682 / 1440 * 100vw), 682px);
  height: auto;
  aspect-ratio: 682 / 160;      /* 17–49px */
}

/* Subtitle */
.about-hero-subtitle{
  margin: 0;
  line-height: 1.4;
  font-size: clamp(15px, calc(25 / 1440 * 100vw), 25px);
}

/* ===== People Behind the Pulse — full-bleed, never cropped ===== */
.about-people{
  margin: 0 !important;
  padding: 0 !important;
  background: #000 !important;     /* kill the brown/grey */
}

.about-people .people-image{
  margin: 0 auto;
  width: min(1440px, 100%);         /* cap at 1440, shrink fluidly */
  background: transparent;
}

.about-people .people-image img{
  /* Never clip: fill the wrapper's width and keep natural aspect ratio */
  display: block;
  width: 100%;
  height: auto !important;
  max-width: none;
  object-fit: contain;              /* harmless with height:auto, ensures no crop */
  background: transparent;
}

/* (Optional) if any legacy rules set a fixed height, force it off */
.about-people .people-image,
.about-people img {
  height: auto !important;
}

/* Responsive image switching */
.people-image-desktop {
  display: block !important;
}

.people-image-mobile {
  display: none !important;
}

/* Mobile: Show SVG, hide PNG */
@media (max-width: 768px) {
  .people-image-desktop {
    display: none !important;
  }
  
  .people-image-mobile {
    display: block !important;
  }
}


.about-story {
    padding-top: clamp(17px, calc(49 / 1440 * 100vw), 49px);
    padding-bottom: clamp(40px, calc(70 / 1440 * 100vw), 70px);
}

.container {
  padding-left: var(--gut-x);
  padding-right: var(--gut-x);
  width: min(1440px, 100%);
  margin-inline: auto;
  padding-inline: clamp(38.5px, calc(117 / 1440 * 100vw), 117px);
}

.container-services {
  padding-left: var(--gut-x);
  padding-right: var(--gut-x);
  padding-top: clamp(47px, calc(154 / 1440 * 100vw), 154px);
  width: min(1440px, 100%);
  margin-inline: auto;
  padding-inline: clamp(38.5px, calc(117 / 1440 * 100vw), 117px);
}

.about-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}

.about-text h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    margin-bottom: 2rem;
    color: #FFFFFF;
}

.about-text p {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: #ccc;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.about-process h2, .about-values h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    text-align: center;
    margin-bottom: clamp(40px, 6vw, 60px);
    color: #FFFFFF;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: clamp(30px, 4vw, 40px);
}

.process-step {
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.process-step:hover {
    transform: translateY(-5px);
}

.process-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #4a9eff;
    margin-bottom: 1rem;
}

.process-step h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #FFFFFF;
}

.process-step p {
    color: #ccc;
    line-height: 1.6;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(30px, 4vw, 40px);
}

.value-item {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.value-item:hover {
    transform: translateY(-5px);
}

.value-item h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #FFFFFF;
}

.value-item p {
    color: #ccc;
    line-height: 1.6;
}

/* 2) Kill all per-section horizontal padding; keep vertical */
.about-hero,
.about-people,
.about-story,
.about-services{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.service-content h2 {    
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Outfit', Roboto, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, calc(40 / 1440 * 100vw), 40px);
  line-height: 1.2;
  letter-spacing: 0;
  margin-bottom: clamp(9px, calc(21 / 1440 * 100vw), 21px);
}

.service-title h2 {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Outfit', Roboto, sans-serif;
    font-weight: 700;
    font-size: clamp(30px, calc(40 / 1440 * 100vw), 40px);
    line-height: 1.2;
    letter-spacing: 0;
    margin-bottom: clamp(9px, calc(21 / 1440 * 100vw), 21px);
}
.service-content p {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Outfit', Roboto, sans-serif;
  font-weight: 400;
  font-size: clamp(12px, calc(15 / 1440 * 100vw), 15px);
  line-height: 1.4;
  letter-spacing: 0;
}

.service-desc p {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Outfit', Roboto, sans-serif;
  font-weight: 400;
  font-size: clamp(12px, calc(15 / 1440 * 100vw), 15px);
  line-height: 1.4;
  letter-spacing: 0;
}

/* 3) About hero vertical rhythm only */
.about-hero{
  background:#000;
  padding-top: clamp(45px, calc(121 / 1440 * 100vw), 121px);
  padding-bottom: clamp(160px, calc(144 / 1440 * 100vw), 144px);
}

/* 4) People section: vertical only (no side padding) */
.about-people{
  background:#000; /* keep black here so the image reads on brand */
  padding-top: clamp(45px, calc(121 / 1440 * 100vw), 121px);
  padding-bottom: clamp(160px, calc(144 / 1440 * 100vw), 144px);
}
.about-people .people-image img{
  display:block; width:100%; height:auto; object-fit:contain;
}

/* 5) Story (already using container); remove paragraph side padding */
.about-story .story-content{ 
  max-width: 1440px; 
  margin: 0; 
  font-size: clamp(15px, calc(25 / 1440 * 100vw), 25px);
}
.about-story .story-content p{ padding-inline: 0 !important; margin-bottom: clamp(20px, calc(30 / 1440 * 100vw), 30px); }

/* 6) What we bring to the table: only bottom space; no side padding */
.about-services{
  background:#000;
  padding-top: 0;
  padding-bottom: clamp(64px, calc(125 / 1440 * 100vw), 125px);
  margin: 0; /* no stray outer gaps */
}

/* Title aligns to container's left edge */
.about-services .services-title{
  width: clamp(319px, calc(831 / 1440 * 100vw), 831px);
  height:auto; display:block; max-width:100%;
  margin: 0 0 clamp(70px, calc(108 / 1440 * 100vw), 108px);
}

/* Grid: 1 col on mobile, 3 cols on desktop */
.about-services .services-grid{
  display:grid;
  grid-template-columns: 1fr;
  row-gap: clamp(58px, calc(107 / 1440 * 100vw), 107px);
}
.about-services .service-item{ text-align:left; max-width: 540px; }

/* 1) Full-width wrapper that centers its content */
.about-services .service-item .service-icon {
  width: 100%;
  display: grid;
  place-items: start;            /* left-align on mobile */
  margin-bottom: 33px;
}

.service-title {
  margin-bottom: clamp(9px, calc(21 / 1440 * 100vw), 21px);
}

/* 2) The image: sized by clamp(), never stretched, truly centered */
.about-services .service-item .service-icon img {
  display: block;                /* no baseline gap */
  width: clamp(70px, calc(170 / 1440 * 100vw), 170px);
  height: clamp(70px, calc(170 / 1440 * 100vw), 170px);
  max-width: none;               /* beat any lingering width:100% */
  object-fit: contain;
  object-position: center;
}

/* GRID: 1 column by default */
.about-services .services-grid {
  display: grid;
  grid-template-columns: 1fr;           /* <768px: single column */
  gap: clamp(20px, 5vw, 32px);
}

/* CARD TEXT SPACING */
.about-services .service-item h3 { 
  margin: 0 0 clamp(12px, 2.2vw, 16px);
}
.about-services .service-item p { 
  margin: 0;
}

/* IMAGE: scale but don't crop; never shift text */
.about-services .service-item,
.about-services .service-item img { /* fallback if no .service-icon wrapper */
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

/* ≥768px: 3 columns, tuned gaps */
@media (min-width: 768px) {
  .about-services .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 85.5px;
  }
  /* Center icons on desktop */
  .about-services .service-item .service-icon {
    place-items: center;
  }
}

/* Mobile: icon left, title right in 2 columns; description full width below */
@media (max-width: 768px) {
  .about-services .service-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-rows: auto;
    column-gap: 31px;
    align-items: start;
  }
  .about-services .service-item .service-icon {
    margin: 0;
    place-items: start;
    grid-column: 1;
    grid-row: 1;
  }
  .about-services .service-item .service-icon { margin-bottom: 0; }
  .about-services .service-item .service-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .about-services .service-item .service-desc {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .about-services .service-item .service-title h2 { margin: 0; }
  .about-services .service-item .service-desc p { margin: 9px 0 0 0; }
}

/* ============ Our Clients (align with heading, no peeking) ============ */
/* ============ Our Clients (aligns to 117px container gutters, no peek) ============ */
.about-clients{
  --gap-desktop: 67.18px;
  --gap-mobile:  31.59px;
  --visible: 5; /* desktop; mobile overrides below */
  --gap: clamp(var(--gap-mobile), calc(67.18 / 1440 * 100vw), var(--gap-desktop));
  background:#FFFFFF;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 30px;
}

/* Title already sits in .container so it inherits the site gutters */
.clients-title{
  font: 700 clamp(20px, calc(40 / 1440 * 100vw), 40px) 'Outfit', sans-serif;
  color:#000;
  margin:0;
  padding-top: clamp(26px, calc(77 / 1440 * 100vw), 77px);
  padding-bottom: clamp(6px, calc(32.52 / 1440 * 100vw), 32.52px);
  line-height: 0.9;
  letter-spacing: 0.05em;
}

/* Grid Layout */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(31px, calc(67 / 1440 * 100vw), 67px);
  width: 100%;
}

.client-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.client-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 198 / 152;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter .25s ease;
  user-select: none;
}
.client-item img:hover { filter: grayscale(0%); }

/* Mobile: 3 columns */
@media (max-width: 768px) {
  .clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* About Page Responsive */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: clamp(30px, calc(40 / 1440 * 100vw), 40px);
    }
    
    .clients-grid {
        gap: clamp(25px, calc(50 / 1024 * 100vw), 50px);
    }
    
    .client-logo {
        width: clamp(100px, calc(150 / 1024 * 100vw), 150px);
    }
}

@media (max-width: 768px) {
    .about-content-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .process-grid, .values-grid {
        grid-template-columns: 1fr;
    }
    
    .about-hero {
        padding: 100px 0 60px;
    }
    
    .about-process, .about-values {
        padding: 60px 0;
    }
    
    .clients-grid {
        gap: 31.59px;
    }
    
    .client-logo {
        width: clamp(80px, calc(120 / 768 * 100vw), 120px);
    }
}