body.page-about { --container:1500px; }

.about-page {
  --about-navy:#071f3d;
  --about-blue:#0b5eb7;
  --about-sky:#eaf4ff;
  --about-ink:#10233b;
  --about-muted:#5d6d80;
  --about-line:#dbe5ef;
  --about-soft:#f4f7fa;
  color:var(--about-ink);
  overflow:hidden;
}
.about-page *, .about-page *::before, .about-page *::after { box-sizing:border-box; }
.about-page h1, .about-page h2, .about-page h3, .about-page p { margin-top:0; }
.about-page h1, .about-page h2, .about-page h3 { color:var(--about-navy); }
.about-page a:focus-visible { outline:3px solid rgba(11,94,183,.32); outline-offset:4px; }
.about-page [id] { scroll-margin-top:92px; }

.about-breadcrumbs { padding:18px 0; background:#fff; }
.about-breadcrumbs ol { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0; padding:0; list-style:none; color:#758397; font-size:14px; }
.about-breadcrumbs li + li::before { content:'/'; margin-right:10px; color:#b4bfca; }
.about-breadcrumbs a { color:#3f5268; text-decoration:none; }
.about-breadcrumbs a:hover { color:var(--about-blue); }

.about-hero { padding:30px 0 52px; background:#fff; }
.about-hero__panel {
  position:relative; display:grid; grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr);
  min-height:590px; overflow:hidden; border-radius:32px;
  background:linear-gradient(135deg,#061c36 0%,#0b3970 100%);
  box-shadow:0 24px 70px rgba(8,35,68,.18);
}
.about-hero__panel::before {
  content:''; position:absolute; left:-120px; bottom:-190px; width:440px; height:440px;
  border:1px solid rgba(255,255,255,.14); border-radius:50%; box-shadow:0 0 0 54px rgba(255,255,255,.035);
}
.about-hero__content { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; padding:clamp(38px,5vw,74px); color:#fff; }
.about-kicker {
  display:inline-flex; align-items:center; gap:9px; width:fit-content; margin-bottom:24px; padding:8px 13px;
  border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(255,255,255,.08);
  color:#dcebfb; font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}
.about-kicker::before { content:''; width:8px; height:8px; border-radius:50%; background:#f33e45; box-shadow:0 0 0 5px rgba(243,62,69,.18); }
.about-hero h1 { max-width:680px; margin-bottom:22px; color:#fff; font-size:clamp(38px,4.7vw,68px); line-height:1.02; letter-spacing:-.045em; }
.about-hero__lead { max-width:620px; margin-bottom:30px; color:#dbe8f7; font-size:clamp(17px,1.5vw,21px); line-height:1.58; }
.about-hero__actions { display:flex; flex-wrap:wrap; gap:12px; }
.about-action {
  display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; padding:12px 20px;
  border:1px solid transparent; border-radius:12px; font-weight:800; text-decoration:none;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.about-action:hover { transform:translateY(-2px); }
.about-action--primary { background:#fff; color:#0a376b; }
.about-action--primary:hover { background:#eff7ff; }
.about-action--ghost { border-color:rgba(255,255,255,.32); color:#fff; background:rgba(255,255,255,.07); }
.about-action--ghost:hover { border-color:#fff; background:rgba(255,255,255,.13); }
.about-hero__visual { position:relative; min-width:0; }
.about-hero__visual img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.about-hero__visual::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#0a2f5b 0%,rgba(10,47,91,.05) 32%,transparent 100%); }
.about-hero__caption {
  position:absolute; z-index:2; left:26px; right:26px; bottom:24px; display:flex; align-items:center; gap:11px;
  width:fit-content; max-width:calc(100% - 52px); padding:12px 15px; border:1px solid rgba(255,255,255,.3);
  border-radius:12px; background:rgba(5,26,50,.82); color:#fff; font-size:13px; backdrop-filter:blur(12px);
}
.about-hero__caption svg { width:20px; height:20px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.about-signal { position:relative; z-index:4; margin-top:-1px; }
.about-signal__grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--about-line); border-top:0; border-radius:0 0 22px 22px; background:#fff; box-shadow:0 20px 44px rgba(20,48,79,.08); }
.about-signal__item { min-width:0; padding:25px 26px; }
.about-signal__item + .about-signal__item { border-left:1px solid var(--about-line); }
.about-signal__value { display:block; margin-bottom:5px; color:var(--about-navy); font-size:clamp(21px,2vw,29px); font-weight:900; letter-spacing:-.025em; }
.about-signal__label { color:var(--about-muted); font-size:14px; line-height:1.45; }

.about-nav { padding:28px 0 0; background:#fff; }
.about-nav__inner { display:flex; gap:9px; flex-wrap:wrap; }
.about-nav a { padding:9px 14px; border:1px solid var(--about-line); border-radius:999px; color:#314962; background:#fff; font-size:14px; font-weight:700; text-decoration:none; }
.about-nav a:hover { color:var(--about-blue); border-color:#9ec6ed; background:#f6fbff; }

.about-section { padding:92px 0; }
.about-section--soft { background:var(--about-soft); }
.about-section--white { background:#fff; }
.about-section__head { max-width:790px; margin-bottom:42px; }
.about-eyebrow { display:block; margin-bottom:11px; color:var(--about-blue); font-size:13px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.about-section h2 { margin-bottom:16px; font-size:clamp(31px,3.2vw,48px); line-height:1.08; letter-spacing:-.035em; }
.about-section__head p { margin-bottom:0; color:var(--about-muted); font-size:18px; line-height:1.68; }

.about-intro { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:70px; align-items:center; }
.about-intro__copy p { color:#41556a; font-size:17px; line-height:1.76; }
.about-intro__copy p:last-child { margin-bottom:0; }
.about-intro__copy strong { color:var(--about-navy); }
.about-intro__visual { position:relative; }
.about-intro__visual img { display:block; width:100%; height:clamp(360px,38vw,520px); object-fit:cover; object-position:center; border-radius:24px; box-shadow:0 20px 50px rgba(11,46,80,.15); }
.about-intro__badge { position:absolute; left:-30px; bottom:28px; max-width:250px; padding:20px 22px; border-radius:16px; background:#fff; box-shadow:0 16px 42px rgba(8,36,68,.2); }
.about-intro__badge b { display:block; margin-bottom:6px; color:var(--about-navy); font-size:18px; }
.about-intro__badge span { color:var(--about-muted); font-size:13px; line-height:1.5; }

.about-capabilities { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.about-capability { position:relative; min-height:275px; padding:28px 25px; overflow:hidden; border:1px solid var(--about-line); border-radius:20px; background:#fff; box-shadow:0 10px 30px rgba(20,48,79,.055); }
.about-capability::after { content:''; position:absolute; right:-40px; bottom:-54px; width:140px; height:140px; border-radius:50%; background:#eef6fe; }
.about-capability__icon { position:relative; z-index:2; display:grid; place-items:center; width:48px; height:48px; margin-bottom:38px; border-radius:13px; color:var(--about-blue); background:var(--about-sky); }
.about-capability__icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.about-capability h3 { position:relative; z-index:2; margin-bottom:11px; font-size:20px; line-height:1.25; }
.about-capability p { position:relative; z-index:2; margin-bottom:0; color:var(--about-muted); font-size:14px; line-height:1.62; }

.about-solutions { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.about-solution { position:relative; min-height:280px; overflow:hidden; border-radius:20px; background:#0a2b50; }
.about-solution img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.about-solution::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,21,40,.04) 8%,rgba(4,21,40,.9) 100%); }
.about-solution:hover img { transform:scale(1.035); }
.about-solution__content { position:absolute; z-index:2; left:24px; right:24px; bottom:23px; color:#fff; }
.about-solution h3 { margin-bottom:8px; color:#fff; font-size:21px; }
.about-solution p { margin:0; color:#d9e6f3; font-size:14px; line-height:1.55; }

.about-process { display:grid; grid-template-columns:repeat(5,1fr); gap:0; counter-reset:about-step; }
.about-step { position:relative; padding:0 24px 0 0; counter-increment:about-step; }
.about-step:not(:last-child)::after { content:''; position:absolute; top:22px; left:55px; right:12px; height:1px; background:#bdcee0; }
.about-step__number { position:relative; z-index:2; display:grid; place-items:center; width:45px; height:45px; margin-bottom:22px; border-radius:50%; color:#fff; background:var(--about-blue); box-shadow:0 0 0 8px #fff; font-weight:900; }
.about-step__number::before { content:counter(about-step); }
.about-step h3 { margin-bottom:8px; font-size:17px; line-height:1.3; }
.about-step p { margin:0; color:var(--about-muted); font-size:14px; line-height:1.58; }

.about-service { padding:74px 0; background:#081f3d; }
.about-service__panel { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:70px; align-items:center; }
.about-service .about-eyebrow { color:#6bb5fb; }
.about-service h2 { margin-bottom:18px; color:#fff; font-size:clamp(31px,3.2vw,47px); line-height:1.08; letter-spacing:-.035em; }
.about-service__copy > p { margin-bottom:26px; color:#c7d8ea; font-size:17px; line-height:1.7; }
.about-service__list { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.about-service__item { display:flex; gap:11px; align-items:flex-start; color:#eaf2fb; font-size:14px; line-height:1.5; }
.about-service__item::first-letter { color:#6bb5fb; font-weight:900; }
.about-service__photo { position:relative; }
.about-service__photo img { display:block; width:100%; height:clamp(360px,38vw,520px); object-fit:cover; border-radius:24px; }
.about-service__note { position:absolute; right:20px; bottom:20px; max-width:310px; padding:14px 16px; border:1px solid rgba(255,255,255,.28); border-radius:13px; color:#fff; background:rgba(5,26,50,.84); font-size:13px; line-height:1.5; backdrop-filter:blur(10px); }

.about-cases { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.about-case { overflow:hidden; border:1px solid var(--about-line); border-radius:20px; background:#fff; box-shadow:0 10px 30px rgba(20,48,79,.055); }
.about-case__image { display:block; width:100%; height:235px; object-fit:cover; }
.about-case__body { padding:23px; }
.about-case__meta { margin-bottom:10px; color:var(--about-blue); font-size:12px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.about-case h3 { margin-bottom:9px; font-size:20px; line-height:1.3; }
.about-case p { margin-bottom:18px; color:var(--about-muted); font-size:14px; line-height:1.58; }
.about-case a { color:var(--about-navy); font-size:14px; font-weight:900; text-decoration:none; }
.about-case a:hover { color:var(--about-blue); }

.about-proof { display:grid; grid-template-columns:minmax(260px,.68fr) minmax(0,1.32fr); gap:48px; align-items:center; }
.about-proof__document { padding:18px; border:1px solid var(--about-line); border-radius:20px; background:#fff; box-shadow:0 18px 50px rgba(20,48,79,.1); }
.about-proof__document img { display:block; width:100%; height:auto; border:1px solid #d8e0e8; }
.about-proof__copy h2 { margin-bottom:16px; font-size:clamp(30px,3vw,45px); line-height:1.1; }
.about-proof__copy p { color:var(--about-muted); font-size:17px; line-height:1.72; }
.about-proof__points { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:25px 0 28px; }
.about-proof__points div { padding:13px 14px; border-radius:12px; background:#fff; color:#354b62; font-size:14px; line-height:1.45; }
.about-proof__link { display:inline-flex; align-items:center; gap:8px; color:var(--about-blue); font-weight:900; text-decoration:none; }
.about-proof__link:hover { text-decoration:underline; }

.about-cta { padding:35px 0 90px; background:#fff; }
.about-cta__panel { position:relative; display:grid; grid-template-columns:1fr auto; gap:35px; align-items:center; overflow:hidden; padding:clamp(35px,5vw,64px); border-radius:26px; background:linear-gradient(135deg,#0d62b8 0%,#073465 100%); color:#fff; }
.about-cta__panel::after { content:''; position:absolute; right:-90px; top:-150px; width:370px; height:370px; border:1px solid rgba(255,255,255,.14); border-radius:50%; box-shadow:0 0 0 54px rgba(255,255,255,.04); }
.about-cta__copy { position:relative; z-index:2; max-width:750px; }
.about-cta h2 { margin-bottom:12px; color:#fff; font-size:clamp(29px,3vw,44px); line-height:1.12; letter-spacing:-.03em; }
.about-cta p { margin:0; color:#d7e8f8; font-size:17px; line-height:1.65; }
.about-cta__actions { position:relative; z-index:2; display:flex; flex-direction:column; gap:10px; min-width:230px; }

@media (max-width:1100px) {
  .about-hero__panel { grid-template-columns:1fr 1fr; }
  .about-capabilities { grid-template-columns:repeat(2,1fr); }
  .about-process { grid-template-columns:repeat(3,1fr); row-gap:36px; }
  .about-step:nth-child(3)::after { display:none; }
}
@media (max-width:820px) {
  .about-hero { padding-top:12px; }
  .about-hero__panel { display:flex; flex-direction:column; min-height:0; border-radius:22px; }
  .about-hero__content { padding:40px 28px 34px; }
  .about-hero__visual { min-height:370px; }
  .about-hero__visual::after { background:linear-gradient(180deg,#0a2f5b 0%,transparent 26%); }
  .about-signal__grid { grid-template-columns:repeat(2,1fr); }
  .about-signal__item:nth-child(3) { border-left:0; border-top:1px solid var(--about-line); }
  .about-signal__item:nth-child(4) { border-top:1px solid var(--about-line); }
  .about-section { padding:68px 0; }
  .about-intro, .about-service__panel, .about-proof { grid-template-columns:1fr; gap:38px; }
  .about-intro__badge { left:16px; }
  .about-solutions, .about-cases { grid-template-columns:1fr 1fr; }
  .about-case__image { height:220px; }
  .about-service__photo { order:-1; }
  .about-cta__panel { grid-template-columns:1fr; }
  .about-cta__actions { flex-direction:row; min-width:0; }
}
@media (max-width:600px) {
  .about-breadcrumbs { padding:13px 0; }
  .about-hero__content { padding:34px 22px 30px; }
  .about-hero h1 { font-size:39px; }
  .about-hero__lead { font-size:16px; }
  .about-hero__actions, .about-cta__actions { flex-direction:column; align-items:stretch; }
  .about-hero__visual { min-height:290px; }
  .about-hero__caption { left:14px; right:14px; bottom:14px; max-width:calc(100% - 28px); }
  .about-signal__item { padding:20px 17px; }
  .about-signal__value { font-size:21px; }
  .about-signal__label { font-size:12px; }
  .about-section { padding:56px 0; }
  .about-section__head { margin-bottom:30px; }
  .about-section h2, .about-service h2, .about-proof__copy h2 { font-size:32px; }
  .about-section__head p, .about-intro__copy p, .about-proof__copy p { font-size:16px; }
  .about-capabilities, .about-solutions, .about-cases, .about-proof__points { grid-template-columns:1fr; }
  .about-intro__visual img, .about-service__photo img { height:360px; }
  .about-case__image { height:auto; aspect-ratio:16/10; }
  .about-capability { min-height:0; }
  .about-capability__icon { margin-bottom:25px; }
  .about-process { grid-template-columns:1fr; gap:26px; }
  .about-step { display:grid; grid-template-columns:46px 1fr; column-gap:17px; padding:0; }
  .about-step__number { grid-row:1 / span 2; margin:0; }
  .about-step:not(:last-child)::after { top:50px; bottom:-22px; left:22px; right:auto; width:1px; height:auto; display:block; }
  .about-step h3 { margin:2px 0 5px; }
  .about-service { padding:56px 0; }
  .about-service__list { grid-template-columns:1fr; }
  .about-service__note { position:static; max-width:none; margin-top:12px; }
  .about-proof__document { max-width:330px; margin:0 auto; }
  .about-cta { padding:12px 0 68px; }
  .about-cta__panel { padding:34px 22px; }
}
