/* About Us page — 1:1 port of the Competiscan HTML design.
   Values taken verbatim from the source css/site.css + css/pages.css so the
   page matches the original at desktop, tablet and mobile. Scoped to .cs-about
   so it never touches the rest of the theme. Header and footer are the theme's
   own and are intentionally not restyled here. */

/* Self-hosted Inter — identical files to the source HTML, so text metrics match
   exactly and the font renders without any network dependency. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-705d6250.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-9f73b2f4.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-04fe624f.woff2") format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-c68aff86.woff2") format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-9c1cad86.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-cf3eb50f.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-f11d729b.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.cs-about * { box-sizing: border-box; }

/* Page background + base type (source .cs-x1). */
.cs-about.cs-x1 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: rgb(255,255,255);
  background-image:
    linear-gradient(rgba(0,75,129,0.05) 0.75px, transparent 0.75px),
    linear-gradient(90deg, rgba(0,75,129,0.05) 0.75px, transparent 0.75px),
    linear-gradient(90deg, rgb(255,255,255) 0%, rgb(226,242,248) 100%);
  background-size: 189px 192px, 189px 192px, 100% 100%;
  color: rgb(0,30,51);
  overflow-x: hidden;
}
/*.cs-about a { color: rgb(0,171,171); text-decoration: none; }
.cs-about a:hover { color: rgb(0,120,120); }*/

/* Buttons (source site.css). */
.cs-about .cs-btn-primary,
.cs-about .cs-btn-outline { transition: background 0.14s ease; }
.cs-about .cs-btn-primary:hover { background: rgb(0,30,51) !important; }
.cs-about .cs-btn-outline:hover { background: rgba(0,75,129,0.1) !important; }

/* ===================== HERO ===================== */
.cs-x111 { position: relative; max-width: 1300px; margin: 0 auto; padding: clamp(28px,4.5vw,55px) clamp(20px,5vw,40px) clamp(48px,7vw,86px); }
.cs-x112 { position: relative; max-width: 880px; }
.cs-x113 { display:inline-block; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(0,171,171); margin-bottom: 20px; }
.cs-x114 { margin: 0 0 26px; font-size: clamp(38px,6vw,64px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.06; color: rgb(0,75,129); }
.cs-x115 { margin: 0; max-width: 620px; font-size: 20px; line-height: 1.55; color: rgb(30,55,67); }
.cs-x21 { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.cs-x22 { display:inline-flex; align-items:center; gap:10px; padding: 15px 26px; border-radius: 10px; background: rgb(0,75,129); font-size: 16px; font-weight: 500; color: rgb(255,255,255); }
.cs-x23 { font-size:14px; }
.cs-x24 { display:inline-flex; align-items:center; padding: 15px 26px; border-radius: 10px; border: 1px solid rgb(0,75,129); font-size: 16px; font-weight: 500; color: rgb(0,30,51); }

/* ===================== STORY + SERVICE ===================== */
.cs-x116 { max-width: 1300px; margin: 0 auto; padding: clamp(20px,4vw,40px) clamp(20px,5vw,40px) clamp(56px,8vw,96px); display: grid; grid-template-columns: repeat(auto-fit, minmax(340px,1fr)); gap: clamp(28px,4vw,56px); }
.cs-x117 { background: rgb(255,255,255); border: 1px solid rgb(214,226,234); border-radius: 20px; padding: clamp(28px,3vw,44px); box-shadow: 0 18px 50px rgba(0,75,129,0.08); }
.cs-x118 { margin: 0 0 18px; font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: rgb(0,75,129); }
.cs-x43 { margin: 0; font-size: 18px; line-height: 1.6; color: rgb(30,55,67); }
.cs-x119 { background: rgb(0,75,129); border-radius: 20px; padding: clamp(28px,3vw,44px); position: relative; overflow: hidden; }
.cs-x120 { position:absolute; right:-60px; bottom:-70px; width:300px; height:300px; opacity:0.05; display:block; pointer-events:none; }
.cs-x121 { margin: 0 0 18px; font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: rgb(0,171,171); position: relative; }
.cs-x122 { margin: 0; font-size: 18px; line-height: 1.6; color: rgb(204,234,255); position: relative; }

/* ===================== BANDS (testimonials + FAQ share .cs-x80) ===================== */
.cs-x80 { background: rgb(0,75,129); position: relative; overflow: hidden; }

/* Testimonials band */
.cs-x123 { position:absolute; inset:0; opacity:0.16; background-image: linear-gradient(rgba(255,255,255,0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.35) 1px, transparent 1px); background-size: 190px 190px; }
.cs-x124 { position: relative; max-width: 1300px; margin: 0 auto; padding: clamp(56px,8vw,96px) clamp(20px,5vw,40px); }
.cs-x125 { margin: 0 0 40px; font-size: clamp(30px,4vw,48px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: rgb(0,171,171); max-width: 640px; }
.cs-x126 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 28px; }
.cs-x127 { background: rgb(0,53,111); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 40px 36px; position: relative; }
.cs-x128 { font-size: 72px; line-height: 0.8; font-weight: 700; color: rgba(0,171,171,0.5); font-family: Georgia, serif; }
.cs-x129 { margin: 8px 0 26px; font-size: 20px; line-height: 1.5; color: rgb(255,255,255); }
.cs-x130 { font-size: 16px; font-weight: 600; color: rgb(0,171,171); }

/* ===================== LEADERSHIP TEAM ===================== */
.cs-x131 { max-width: 1300px; margin: 0 auto; padding: clamp(60px,9vw,110px) clamp(20px,5vw,40px); }
.cs-x132 { max-width: 640px; margin-bottom: 48px; }
.cs-x133 { margin: 0 0 16px; font-size: clamp(34px,5vw,54px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: rgb(0,75,129); }
.cs-x134 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); gap: 28px; }
.cs-x135 { background: rgb(255,255,255); border: 1px solid rgb(214,226,234); border-radius: 18px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,75,129,0.07); display: flex; flex-direction: column; }
.cs-x136 { aspect-ratio: 1 / 1; background: rgb(226,242,248); overflow: hidden; }
.cs-x137 { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.cs-x138 { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.cs-x139 { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: rgb(0,75,129); }
.cs-x140 { font-size: 15px; font-weight: 600; color: rgb(0,171,171); margin-bottom: 14px; }
.cs-x141 { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: rgb(98,98,98); }
.cs-x142 { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgb(0,75,129); }

/* ===================== CONNECT CTA ===================== */
.cs-x64 { max-width: 1300px; margin: 0 auto clamp(60px,8vw,96px); padding: 0 clamp(20px,5vw,40px); }
.cs-x143 { background: rgb(0,30,51); border-radius: 24px; padding: clamp(40px,6vw,72px) clamp(28px,5vw,64px); position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 40px; align-items: center; }
.cs-x144 { position:absolute; right:-70px; top:-90px; width:360px; height:360px; opacity:0.05; display:block; pointer-events:none; }
.cs-x145 { position: relative; }
.cs-x146 { margin: 0 0 14px; font-size: clamp(28px,4vw,44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: rgb(0,171,171); }
.cs-x147 { margin: 0; font-size: 18px; line-height: 1.6; color: rgb(204,234,255); max-width: 460px; }
.cs-x148 { position: relative; display: flex; flex-direction: column; gap: 12px; }
.cs-x149 { width: 100%; padding: 16px 18px; border: none; border-radius: 10px; background: rgb(0,75,129); color: rgb(255,255,255); font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer; }
.cs-x150 { font-size: 13px; color: rgba(204,234,255,0.7); }
.cs-x83 { color: rgb(255,255,255); }
.cs-x110 { color: rgb(0,171,171); }

/* ===================== FAQ ===================== */
.cs-2col { display: grid; }
.cs-x81 { position: relative; max-width: 1300px; margin: 0 auto; padding: clamp(56px,8vw,104px) clamp(20px,5vw,40px); display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.4fr); gap: clamp(32px,5vw,72px); }
.cs-x82 { margin: 0 0 20px; font-size: clamp(34px,4.5vw,54px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; color: rgb(0,171,171); }
.cs-x84 { margin: 0; font-size: 18px; line-height: 1.55; color: rgb(204,234,255); max-width: 380px; }
.cs-x85 { border-bottom: 1px solid rgba(255,255,255,0.35); }
.cs-x86 { width: 100%; display: flex; align-items: center; gap: 18px; padding: 22px 4px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; }
.cs-x87 { width: 6px; height: 6px; border-radius: 50%; background: rgb(232,119,82); flex-shrink: 0; }
.cs-x88 { flex: 1; font-size: clamp(18px,2vw,24px); color: rgb(0,171,171); line-height: 1.25; }
.cs-x89 { font-size: 30px; font-weight: 300; color: rgb(0,171,171); line-height: 1; flex-shrink: 0; }
.cs-x90 { margin: 0; padding: 0 34px 26px; font-size: 17px; line-height: 1.6; color: rgb(204,234,255); }

/* ===================== RESPONSIVE ===================== */
/* Fixed two-column FAQ stacks (source site.css @media max-width:980px). */
@media (max-width: 980px) {
  .cs-x81 { grid-template-columns: minmax(0, 1fr) !important; }
}