.about-page {
  --about-slate: #20262d;
  --about-slate-soft: #303a44;
  --about-orange: #fd9c0c;
  --about-surface: #eef1f3;
  --about-line: #d9dfe3;
  color: var(--text-primary);
  background: #fff;
  font-family: var(--font-body);
}

.about-page h1,
.about-page h2,
.about-page h3,
.about-page dt,
.about-page strong { font-family: var(--font-heading); }
.about-page p { color: var(--text-secondary); font-size: 16px; line-height: 1.7; }
.about-page .section { padding: 88px 0; }
.about-page .eyebrow { margin-bottom: 14px; font-size: 12px; line-height: 1.4; }
.about-page .button { min-height: 48px; padding: 12px 19px; font-size: 15px; }
.about-page .button-secondary { color: #fff; background: transparent; border-color: rgba(255,255,255,.45); }
.about-page .button-secondary:hover { border-color: var(--about-orange); background: rgba(255,255,255,.08); }
.about-page .brand-logo img { display: block; width: auto; height: 46px; object-fit: contain; }
.about-page .nav-cta { min-height: 44px; font-size: 13px; }
.about-page .signal-bar { font-size: 12px; }
.about-page .primary-nav > ul > li > a,
.about-page .primary-nav > ul > li > button { font-size: 13px; }
.about-page .primary-nav button > i { font-size: 12px; }
.about-page .menu-kicker,
.about-page .menu-group-label,
.about-page .menu-product-label { font-size: 12px; }
.about-page .solutions-menu b,
.about-page .solutions-menu small,
.about-page .services-menu > a,
.about-page .industries-menu > a { font-size: 12px; line-height: 1.45; }
.about-page .section-heading { max-width: 780px; margin-bottom: 42px; }
.about-page .section-heading h2,
.about-page .compact-heading h2,
.about-page .purpose-layout h2,
.about-page .technology-layout h2,
.about-page .leadership-intro h2,
.about-page .about-cta-inner h2 { margin: 0; color: var(--about-slate); font-size: clamp(31px, 3.5vw, 46px); letter-spacing: -.035em; line-height: 1.12; }
.about-page .section-heading > p { max-width: 700px; margin: 17px 0 0; }
.about-page .section-heading.centered { margin-inline: auto; text-align: center; }
.about-page .section-heading-split { display: grid; max-width: none; grid-template-columns: 1.15fr .7fr; align-items: end; gap: 70px; }
.about-page .section-heading-split > p { margin-bottom: 4px; }

/* Hero */
.about-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(128deg,#20262d 0%,#2c343d 58%,#20262d 100%); }
.about-hero-pattern { position: absolute; inset: 0; opacity: .75; background-image: radial-gradient(circle at 84% 22%,rgba(253,156,12,.17),transparent 25%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: auto,44px 44px,44px 44px; }
.about-hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 62px; min-height: 640px; padding-block: 62px; }
.about-breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; color: #c3ccd3; font-size: 12px; }
.about-breadcrumb i { font-size: 12px; }
.about-breadcrumb a:hover { color: var(--about-orange); }
.about-hero h1 { max-width: 690px; margin: 0 0 18px; color: #fff; font-size: clamp(38px, 4.1vw, 54px); letter-spacing: -.04em; line-height: 1.08; }
.about-hero .hero-lead { max-width: 680px; margin: 0 0 22px; color: #d7dee3; font-size: 16px; line-height: 1.65; }
.hero-trust-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 28px; }
.hero-trust-grid article { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 15px; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }
.hero-trust-grid article > i { display: grid; width: 34px; height: 34px; place-items: center; color: var(--about-slate); background: var(--about-orange); border-radius: 8px; font-size: 15px; }
.hero-trust-grid h2 { margin: 1px 0 5px; color: #fff; font-size: 14px; letter-spacing: 0; line-height: 1.3; }
.hero-trust-grid p { margin: 0; color: #bdc7cf; font-size: 12px; line-height: 1.5; }
.about-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.about-hero-visual { position: relative; overflow: hidden; min-height: 490px; margin: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; box-shadow: 0 30px 70px rgba(0,0,0,.32); }
.about-hero-visual::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg,transparent 44%,rgba(20,25,29,.8)); }
.about-hero-visual img { width: 100%; height: 490px; object-fit: cover; }
.about-hero-visual figcaption { position: absolute; z-index: 1; right: 28px; bottom: 28px; left: 28px; display: grid; gap: 5px; padding-left: 16px; border-left: 4px solid var(--about-orange); }
.about-hero-visual figcaption span { color: var(--about-orange); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.about-hero-visual figcaption strong { color: #fff; font-size: 19px; line-height: 1.35; }

/* Compact profile */
.profile-strip { padding: 64px 0; background: #fff; border-bottom: 1px solid var(--about-line); }
.compact-heading { display: grid; grid-template-columns: .42fr 1.58fr; align-items: end; gap: 54px; margin-bottom: 30px; }
.compact-heading .eyebrow { margin: 0 0 6px; }
.compact-heading h2 { max-width: 800px; font-size: clamp(27px,3vw,38px); }
.profile-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; border-top: 1px solid var(--about-line); border-left: 1px solid var(--about-line); }
.profile-grid > div { min-height: 132px; padding: 21px; border-right: 1px solid var(--about-line); border-bottom: 1px solid var(--about-line); }
.profile-grid dt { margin-bottom: 8px; color: var(--about-orange); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.profile-grid dd { margin: 0; color: var(--about-slate); font-size: 15px; font-weight: 600; line-height: 1.55; }

/* Audience and purpose */
.audience-section { background: var(--page-background); }
.audience-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.audience-grid article { padding: 28px; background: #fff; border: 1px solid var(--about-line); border-top: 4px solid var(--about-orange); border-radius: 0 0 12px 12px; box-shadow: var(--shadow-sm); }
.audience-grid article > i { display: grid; width: 46px; height: 46px; margin-bottom: 24px; place-items: center; color: var(--about-slate); background: var(--brand-orange-soft); border-radius: 11px; font-size: 20px; }
.audience-grid h3 { margin: 0 0 9px; color: var(--about-slate); font-size: 20px; }
.audience-grid p { margin: 0; font-size: 15px; }
.purpose-section { background: #fff; }
.purpose-layout { display: grid; grid-template-columns: .86fr 1.14fr; align-items: stretch; gap: 70px; }
.purpose-intro { position: relative; display: flex; min-width: 0; min-height: 470px; height: 100%; padding: 34px; overflow: hidden; justify-content: space-between; flex-direction: column; color: #fff; background: var(--about-slate) url('../images/resource/enterprise-service-enterprise-software-development.png') 70% center/cover no-repeat; border-radius: 14px; box-shadow: var(--shadow-md); isolation: isolate; }
.purpose-intro::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(145deg,rgba(20,25,29,.96) 0%,rgba(20,25,29,.84) 52%,rgba(20,25,29,.68) 100%); }
.about-page .purpose-intro h2 { max-width: 590px; color: #fff; text-shadow: 0 3px 16px rgba(0,0,0,.48); }
.purpose-intro .eyebrow { color: var(--about-orange); }
.purpose-visual-caption { display: flex; align-items: center; gap: 12px; max-width: 470px; padding: 15px 17px; background: rgba(20,25,29,.8); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; backdrop-filter: blur(5px); }
.purpose-visual-caption > i { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; color: var(--about-slate); background: var(--about-orange); border-radius: 9px; font-size: 17px; }
.purpose-visual-caption span,
.purpose-visual-caption strong { display: block; }
.purpose-visual-caption span { color: #d7dee3; font-size: 13px; line-height: 1.5; }
.purpose-visual-caption strong { margin-bottom: 2px; color: #fff; font-size: 15px; }
.purpose-copy { display: flex; height: 100%; justify-content: center; flex-direction: column; }
.purpose-copy > p:first-child { color: var(--about-slate); font-size: 18px; font-weight: 600; }
.purpose-copy blockquote { display: grid; gap: 7px; padding: 22px 24px; margin: 28px 0; color: var(--about-slate); background: var(--brand-orange-soft); border-left: 4px solid var(--about-orange); font-size: 17px; line-height: 1.6; }
.purpose-copy blockquote strong { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.direction-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.direction-row p { margin: 0; padding-top: 18px; border-top: 1px solid var(--about-line); font-size: 15px; }
.direction-row strong { display: block; margin-bottom: 6px; color: var(--about-slate); }

/* Capabilities and experience */
.capability-section { color: #fff; background: var(--about-slate); }
.capability-section .section-heading h2 { color: #fff; }
.capability-section .section-heading > p { color: #c8d0d6; }
.capability-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.capability-grid > a { display: flex; min-height: 330px; padding: 27px; flex-direction: column; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; transition: transform .2s,border-color .2s,background .2s; }
.capability-grid > a:hover { background: rgba(255,255,255,.085); border-color: var(--about-orange); transform: translateY(-4px); }
.capability-grid > a > i { display: grid; width: 48px; height: 48px; margin-bottom: 25px; place-items: center; color: var(--about-slate); background: var(--about-orange); border-radius: 10px; font-size: 19px; }
.capability-grid h3 { margin: 0 0 12px; color: #fff; font-size: 19px; }
.capability-grid p { margin: 0 0 24px; color: #bcc7cf; font-size: 15px; }
.capability-grid span { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--about-orange); font-size: 14px; font-weight: 700; }
.capability-grid span i { font-size: 12px; }
.experience-section { background: #fff; }
.experience-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; }
.experience-card { position: relative; display: flex; min-height: 350px; padding: 25px; overflow: hidden; grid-column: span 2; justify-content: flex-end; flex-direction: column; color: #fff; background-position: center; background-size: cover; border-radius: 13px; isolation: isolate; box-shadow: var(--shadow-sm); }
.experience-card:nth-child(4),
.experience-card:nth-child(5) { grid-column: span 3; min-height: 315px; }
.experience-card::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(180deg,rgba(25,30,35,.06) 15%,rgba(25,30,35,.93) 78%); transition: background .2s; }
.experience-card:hover::before { background: linear-gradient(180deg,rgba(25,30,35,.08) 5%,rgba(25,30,35,.97) 73%); }
.experience-card span { color: var(--about-orange); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.experience-card h3 { margin: 8px 0 9px; color: #fff; font-size: 21px; }
.experience-card p { margin: 0 0 16px; color: #dbe1e5; font-size: 14px; line-height: 1.55; }
.experience-card strong { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; }
.experience-card strong i { color: var(--about-orange); font-size: 12px; }
.experience-ifuel { background-image: url('../images/resource/ifuel-terminal-operations.png'); }
.experience-travel { background-image: url('../images/resource/itravel-corporate-travel.png'); }
.experience-tracker { background-image: url('../images/resource/project-4.jpg'); }
.experience-service { background-image: url('../images/resource/project-5.jpg'); }
.experience-b2b { background-image: url('../images/resource/oms.jpg'); }

/* Process and technology */
.process-section { background: var(--page-background); }
.about-process { position: relative; display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; padding: 0; margin: 0; list-style: none; }
.about-process::before { position: absolute; top: 32px; right: 7%; left: 7%; height: 1px; content: ""; background: #b8c2c9; }
.about-process li { position: relative; z-index: 1; text-align: center; }
.about-process li > i { display: grid; width: 64px; height: 64px; margin: 0 auto 19px; place-items: center; color: var(--about-slate); background: #fff; border: 1px solid #bfc8ce; border-radius: 50%; box-shadow: 0 0 0 8px var(--page-background); font-size: 18px; }
.about-process h3 { margin: 0 0 7px; color: var(--about-slate); font-size: 17px; }
.about-process p { margin: 0; font-size: 14px; line-height: 1.55; }
.assurance-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 11px 24px; padding: 21px 24px; margin: 38px 0 0; background: #fff; border: 1px solid var(--about-line); border-radius: 10px; list-style: none; }
.assurance-list li { display: flex; align-items: center; gap: 9px; color: var(--about-slate); font-size: 14px; font-weight: 600; }
.assurance-list i { color: #26845b; }
.technology-foundation { padding: 72px 0; color: #fff; background: linear-gradient(130deg,#303a44,#20262d); }
.technology-layout { display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: 70px; }
.about-page .technology-foundation .technology-layout h2 { color: #fff; font-size: clamp(29px,3vw,40px); }
.technology-layout > div > p { margin: 18px 0 24px; color: #c5cdd3; }
.technology-links { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.technology-links a { color: var(--about-orange); font-size: 14px; font-weight: 700; }
.technology-links i { margin-left: 6px; font-size: 12px; }
.technology-grid { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; border-top: 1px solid rgba(255,255,255,.15); border-left: 1px solid rgba(255,255,255,.15); }
.technology-grid > div { min-height: 132px; padding: 19px; border-right: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); }
.technology-grid dt { margin-bottom: 7px; color: var(--about-orange); font-size: 13px; }
.technology-grid dd { margin: 0; color: #d4dbe0; font-size: 14px; line-height: 1.55; }

/* Leadership and proof */
.leadership-section { background: #fff; }
.leadership-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px; }
.leadership-intro > p { margin: 20px 0 26px; }
.leadership-intro aside { padding: 22px; background: var(--brand-orange-soft); border-left: 4px solid var(--about-orange); }
.leadership-intro aside strong { display: block; margin-bottom: 6px; color: var(--about-slate); font-size: 16px; }
.leadership-intro aside p { margin: 0; font-size: 14px; }
.leadership-responsibilities { display: grid; gap: 12px; align-content: center; }
.leadership-responsibilities article { display: grid; grid-template-columns: 48px 1fr; gap: 17px; padding: 21px; background: var(--page-background); border: 1px solid var(--about-line); border-radius: 11px; }
.leadership-responsibilities article > i { display: grid; width: 48px; height: 48px; place-items: center; color: var(--about-slate); background: var(--about-orange); border-radius: 10px; font-size: 18px; }
.leadership-responsibilities h3 { margin: 0 0 5px; color: var(--about-slate); font-size: 18px; }
.leadership-responsibilities p { margin: 0; font-size: 14px; }
.proof-section { background: var(--page-background); }
.proof-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch; gap: 24px; }
.proof-points { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.proof-points li { display: grid; grid-template-columns: 42px 1fr; gap: 15px; padding: 18px; background: #fff; border: 1px solid var(--about-line); border-radius: 9px; }
.proof-points li > i { display: grid; width: 42px; height: 42px; place-items: center; color: var(--about-slate); background: var(--brand-orange-soft); border-radius: 9px; font-size: 17px; }
.proof-points strong,
.proof-points span { display: block; }
.proof-points strong { margin-bottom: 4px; color: var(--about-slate); font-size: 15px; }
.proof-points span { color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.featured-proof { display: grid; overflow: hidden; grid-template-rows: 210px 1fr; background: var(--about-slate); border-radius: 13px; box-shadow: var(--shadow-md); }
.featured-proof > img { width: 100%; height: 210px; object-fit: cover; }
.featured-proof > div { padding: 27px; }
.featured-proof > div > span { color: var(--about-orange); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.featured-proof h3 { margin: 8px 0 11px; color: #fff; font-size: 24px; }
.featured-proof p { margin: 0 0 19px; color: #c9d1d7; font-size: 15px; }
.featured-proof a { color: var(--about-orange); font-size: 15px; font-weight: 700; }
.featured-proof a i { margin-left: 6px; font-size: 12px; }
.transparency-note { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; color: var(--text-secondary); font-size: 13px; }
.transparency-note i { color: #26845b; }

/* CTA and shared footer refinements */
.about-closing-cta { position: relative; overflow: hidden; padding: 76px 0; color: #fff; background: var(--about-slate); border-top: 1px solid rgba(255,255,255,.08); }
.about-closing-cta::after { position: absolute; right: -110px; bottom: -150px; width: 390px; height: 390px; content: ""; border: 70px solid rgba(253,156,12,.08); border-radius: 50%; }
.about-cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 70px; }
.about-page .about-closing-cta .about-cta-inner h2 { max-width: 800px; color: #fff; font-size: clamp(31px,3.4vw,45px); }
.about-cta-inner p { max-width: 760px; margin: 17px 0 0; color: #c8d0d6; }
.about-cta-actions { display: grid; gap: 11px; min-width: 275px; }
.about-page .site-footer,
.about-page .site-footer p,
.about-page .site-footer a,
.about-page .site-footer li,
.about-page .site-footer span { font-size: 13px; }
.about-page .site-footer h2 { font-size: 14px; }

@media (max-width: 1100px) {
  .about-page .nav-inner { gap: 18px; }
  .about-page .primary-nav > ul > li > a,
  .about-page .primary-nav > ul > li > button { padding-inline: 7px; font-size: 12px; }
  .about-page .nav-cta { display: none; }
  .about-hero-layout { grid-template-columns: 1fr 1fr; gap: 38px; }
  .hero-trust-grid { grid-template-columns: 1fr; }
  .hero-trust-grid article { grid-template-columns: 32px 1fr; padding: 11px 13px; }
  .hero-trust-grid article > i { width: 32px; height: 32px; }
  .about-hero-visual,
  .about-hero-visual img { min-height: 500px; height: 100%; }
  .capability-grid { grid-template-columns: repeat(2,1fr); }
  .capability-grid > a { min-height: 285px; }
  .about-process { grid-template-columns: repeat(3,1fr); gap: 32px 18px; }
  .about-process::before { display: none; }
}

@media (max-width: 900px) {
  .about-page .container { width: min(100% - 40px,1220px); }
  .about-page .section { padding: 70px 0; }
  .about-page .signal-bar { display: none; }
  .about-page .nav-toggle { display: block; }
  .about-page .primary-nav { margin-left: 0; }
  .about-page .primary-nav > ul > li > a,
  .about-page .primary-nav > ul > li > button { font-size: 14px; }
  .about-hero-layout { grid-template-columns: 1fr; min-height: 0; padding-block: 52px 62px; }
  .about-hero-copy { max-width: 760px; }
  .hero-trust-grid { grid-template-columns: repeat(3,1fr); }
  .about-hero-visual { min-height: 390px; }
  .about-hero-visual img { height: 390px; min-height: 0; }
  .compact-heading,
  .purpose-layout,
  .technology-layout,
  .leadership-layout,
  .proof-layout,
  .about-cta-inner { grid-template-columns: 1fr; gap: 35px; }
  .profile-grid { grid-template-columns: repeat(2,1fr); }
  .purpose-intro { min-height: 390px; height: auto; }
  .experience-card { grid-column: span 3; }
  .experience-card:nth-child(5) { grid-column: 2 / span 4; }
  .about-cta-actions { display: flex; flex-wrap: wrap; min-width: 0; }
}

@media (max-width: 700px) {
  .about-page .section { padding: 58px 0; }
  .about-page .section-heading-split { grid-template-columns: 1fr; gap: 12px; }
  .hero-trust-grid,
  .audience-grid,
  .capability-grid,
  .technology-grid { grid-template-columns: 1fr; }
  .capability-grid > a { min-height: 0; }
  .experience-grid { grid-template-columns: 1fr; }
  .experience-card,
  .experience-card:nth-child(4),
  .experience-card:nth-child(5) { min-height: 320px; grid-column: auto; }
  .about-process { grid-template-columns: repeat(2,1fr); }
  .technology-grid > div { min-height: 0; }
  .direction-row { grid-template-columns: 1fr; }
  .purpose-intro { min-height: 350px; }
}

@media (max-width: 480px) {
  .about-page .container { width: min(100% - 28px,1220px); }
  .about-page .brand-logo img { height: 40px; }
  .about-hero h1 { font-size: 33px; }
  .about-hero .hero-lead { font-size: 15px; }
  .about-hero-actions .button,
  .about-cta-actions .button { width: 100%; }
  .about-hero-visual,
  .about-hero-visual img { height: 310px; min-height: 310px; }
  .about-hero-visual figcaption { right: 19px; bottom: 19px; left: 19px; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-grid > div { min-height: 0; }
  .purpose-intro { min-height: 330px; padding: 25px 22px; }
  .purpose-visual-caption { padding: 13px; }
  .audience-grid article { padding: 23px; }
  .about-process { grid-template-columns: 1fr; gap: 23px; }
  .about-process li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; text-align: left; }
  .about-process li > i { width: 56px; height: 56px; margin: 0; grid-row: 1 / span 2; box-shadow: none; }
  .about-process h3 { align-self: end; }
  .assurance-list { justify-content: flex-start; }
  .leadership-responsibilities article,
  .proof-points li { grid-template-columns: 40px 1fr; }
  .leadership-responsibilities article > i,
  .proof-points li > i { width: 40px; height: 40px; }
  .featured-proof { grid-template-rows: 175px 1fr; }
  .featured-proof > img { height: 175px; }
  .about-closing-cta { padding: 60px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .about-page *,
  .about-page *::before,
  .about-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}