/* About page — matches approved PDN homepage and services page */
.about-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #101b3c; padding: 88px 0 0; }
.about-hero::before { content:""; position:absolute; inset:0; z-index:-2; background: radial-gradient(circle at 78% 42%, rgba(89,139,225,.23), transparent 34%), linear-gradient(115deg,#101b3c 0%,#172a55 58%,#203c75 100%); }
.about-hero-glow { position:absolute; width:420px; height:420px; right:12%; top:4%; border:1px solid rgba(190,211,249,.12); border-radius:50%; box-shadow:0 0 0 55px rgba(190,211,249,.025),0 0 0 110px rgba(190,211,249,.018); pointer-events:none; }
.about-hero-grid { min-height:500px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:65px; padding-bottom:70px; }
.about-hero-copy { max-width:620px; }
.about-hero h1 { margin:22px 0 22px; font:800 clamp(46px,5.6vw,70px)/1.06 var(--font-display); letter-spacing:-.065em; }
.about-hero h1 span { color:#9db9ed; }
.about-hero-copy > p { max-width:560px; margin:0 0 30px; color:#c3cee3; font-size:15px; line-height:1.9; }

.about-hero-visual { position:relative; width:min(100%,510px); height:430px; justify-self:end; display:grid; place-items:center; }
.about-orbit { position:absolute; border:1px solid rgba(181,207,255,.22); border-radius:50%; }
.orbit-one { width:340px; height:340px; box-shadow:0 0 0 36px rgba(181,207,255,.035),0 0 0 72px rgba(181,207,255,.025); }
.orbit-two { width:245px; height:245px; border-color:rgba(181,207,255,.3); }
.about-visual-core { position:relative; z-index:2; width:132px; height:132px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border-radius:27px; background:linear-gradient(145deg,#3767ca,#6897ed); box-shadow:0 25px 65px rgba(0,0,0,.24); transform:rotate(-7deg); }
.core-mark { width:34px; height:34px; border:3px solid rgba(255,255,255,.9); border-radius:10px; position:relative; }
.core-mark::after { content:""; position:absolute; width:10px; height:10px; right:-8px; bottom:-8px; border-radius:3px; background:#bcd2ff; }
.core-caption { color:#fff; font:700 9px/1.3 var(--font-display); letter-spacing:.2em; text-align:center; transform:rotate(7deg); }
.about-float-tag { position:absolute; z-index:3; padding:11px 17px; color:#dce8ff; border:1px solid rgba(205,222,255,.24); border-radius:30px; background:rgba(255,255,255,.07); backdrop-filter:blur(8px); font:700 9px var(--font-display); letter-spacing:.14em; }
.about-float-tag b { margin-left:6px; color:#9db9ed; }
.tag-strategy { top:53px; left:20px; }
.tag-creativity { top:110px; right:0; }
.tag-technology { bottom:85px; left:0; }
.tag-growth { bottom:42px; right:35px; }
.about-visual-caption { position:absolute; bottom:0; left:50%; width:100%; transform:translateX(-50%); color:#aebfdf; font:600 12px/1.7 var(--font-display); text-align:center; letter-spacing:.02em; }
.about-hero-index,.about-hero-image,.about-hero-note { display:none; }
.about-hero-bottom { border-top:1px solid rgba(255,255,255,.13); }
.about-hero-bottom .container { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#b7c6e2; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.about-hero-bottom b { margin-left:6px; color:#fff; }
.about-story { padding-top:105px; padding-bottom:105px; }
.about-story-grid { display:grid; grid-template-columns:.65fr 1.35fr; gap:75px; }
.about-section-aside { display:flex; align-items:center; min-height:0; }
.about-aside-number { display:none; color:#4f83df; font:800 11px var(--font-display); letter-spacing:.15em; }
.about-aside-number i { color:#9aa7bd; font-style:normal; font-weight:600; }
.about-section-aside > p { max-width:230px; margin:auto 0 0; color:#71809b; font:600 16px/1.65 var(--font-display); }
.about-story-copy h2 { margin:0 0 24px; color:var(--navy); font:800 clamp(36px,4.4vw,54px)/1.12 var(--font-display); letter-spacing:-.055em; }
.about-story-copy h2 span { color:#8d9ab3; }
.about-story-copy > p { max-width:760px; color:#64718a; font-size:13px; line-height:1.95; }
.about-story-copy .about-lead { color:#35445f; font:600 17px/1.8 var(--font-display); }
.about-story-copy .text-link { margin-top:12px; }
.mission-vision { padding:0 0 105px; }
.mission-vision-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.purpose-card { position:relative; overflow:hidden; min-height:330px; padding:42px 42px 38px; border:1px solid #e2e9f5; background:#f7f9fd; }
.purpose-vision { background:#edf3ff; }
.purpose-number { position:absolute; right:35px; top:20px; color:rgba(79,131,223,.12); font:800 100px/.9 var(--font-display); letter-spacing:-.1em; }
.purpose-card .eyebrow { position:relative; z-index:1; }
.purpose-card h2 { position:relative; max-width:430px; margin:30px 0 15px; color:var(--navy); font:800 clamp(28px,3vw,39px)/1.13 var(--font-display); letter-spacing:-.05em; }
.purpose-card h2 span { color:#7d91b7; }
.purpose-card p { position:relative; max-width:450px; margin:0; color:#65728b; font-size:12px; line-height:1.9; }
.purpose-line { position:absolute; left:42px; right:42px; bottom:0; height:3px; background:linear-gradient(90deg,#4f83df,rgba(79,131,223,0)); }
.about-platforms { background:#f8faff; }
.about-heading-row { display:flex; justify-content:space-between; align-items:flex-end; gap:55px; margin-bottom:42px; }
.about-heading-row h2 { margin:18px 0 0; color:var(--navy); font:800 clamp(38px,4.5vw,56px)/1.1 var(--font-display); letter-spacing:-.055em; }
.about-heading-row h2 span { color:#8996b0; }
.about-heading-row > p { max-width:400px; margin:0 0 5px; color:#64718a; font-size:13px; line-height:1.9; }
.platform-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.platform-card { display:flex; flex-direction:column; min-height:300px; padding:30px 32px; border:1px solid #e2e9f5; background:#fff; transition:transform .25s,box-shadow .25s,border-color .25s; }
.platform-card:hover { transform:translateY(-5px); border-color:#c5d7f5; box-shadow:0 18px 45px rgba(29,58,111,.08); }
.platform-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:27px; }
.platform-monogram { display:grid; place-items:center; width:58px; height:58px; color:#fff; background:linear-gradient(145deg,#315fc4,#6e9bea); border-radius:13px; font:800 13px var(--font-display); letter-spacing:-.04em; }
.platform-monogram-light { color:#315fc4; background:#eaf1ff; font-size:26px; }
.platform-arrow { color:#4f83df; font-size:22px; }
.platform-category { color:#7b8ba8; font:700 9px var(--font-display); letter-spacing:.15em; text-transform:uppercase; }
.platform-card h3 { margin:9px 0 10px; color:var(--navy); font:800 24px var(--font-display); letter-spacing:-.04em; }
.platform-card p { max-width:490px; margin:0 0 22px; color:#68758d; font-size:12px; line-height:1.9; }
.platform-link { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:15px; border-top:1px solid #e9edf5; color:#315fc4; font-size:11px; font-weight:700; }
.platform-link b { font-size:16px; }
.about-expertise { padding:100px 0; color:#fff; background:linear-gradient(115deg,#101b3c,#1a3266); }
.expertise-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; }
.expertise-copy h2 { margin:22px 0 18px; font:800 clamp(39px,4.5vw,56px)/1.1 var(--font-display); letter-spacing:-.055em; }
.expertise-copy h2 span { color:#9db9ed; }
.expertise-copy > p { max-width:420px; margin:0 0 28px; color:#c1cce1; font-size:13px; line-height:1.9; }
.expertise-list { border-top:1px solid rgba(255,255,255,.17); }
.expertise-list > div { display:grid; grid-template-columns:42px 1fr 20px; align-items:center; gap:14px; min-height:62px; border-bottom:1px solid rgba(255,255,255,.17); }
.expertise-list span { color:#8fa9d9; font:700 10px var(--font-display); }
.expertise-list strong { color:#f5f7fc; font:600 14px var(--font-display); }
.expertise-list b { color:#8fb3f2; font-size:16px; font-weight:500; }
.about-approach { padding-top:100px; padding-bottom:100px; }
.approach-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; }
.approach-title h2 { margin:20px 0 0; color:var(--navy); font:800 clamp(36px,4.2vw,52px)/1.12 var(--font-display); letter-spacing:-.055em; }
.approach-title h2 span { color:#8996b0; }
.approach-content p { color:#66738b; font-size:13px; line-height:1.95; }
.approach-content .approach-lead { margin-top:0; color:#35445f; font:600 17px/1.8 var(--font-display); }
.approach-values { display:flex; align-items:center; gap:13px; margin-top:27px; padding-top:20px; border-top:1px solid var(--line); color:#315fc4; font:700 10px var(--font-display); letter-spacing:.08em; text-transform:uppercase; }
.approach-values i { color:#a7b3c8; font-style:normal; }
.about-contact { padding:75px 0; background:linear-gradient(120deg,#edf4ff,#e4edff 60%,#f5f8ff); border-top:1px solid #dce7fa; border-bottom:1px solid #dce7fa; }
.about-contact-inner { display:flex; align-items:center; justify-content:space-between; gap:35px; }
.about-contact h2 { margin:17px 0 12px; color:var(--navy); font:800 clamp(36px,4.2vw,54px)/1.1 var(--font-display); letter-spacing:-.055em; }
.about-contact h2 span { color:#4f83df; }
.about-contact p { margin:0; color:#5f6f8c; font-size:13px; line-height:1.8; }
.about-contact .eyebrow { color:#4d6389; }
@media(max-width:900px) {
  .about-hero-grid { gap:38px; }
  .about-story-grid { gap:45px; }
  .expertise-grid,.approach-grid { gap:50px; }
}
@media(max-width:760px) {
  .about-hero { padding-top:70px; }
  .about-hero-grid { min-height:0; grid-template-columns:1fr; gap:45px; padding-bottom:50px; }
  .about-hero h1 { font-size:clamp(43px,10vw,58px); }
  .about-hero-copy > p { font-size:13px; }
  .about-hero-visual { max-width:500px; width:calc(100% - 16px); margin-left:16px; }
  .about-hero-visual { height:370px; max-width:440px; justify-self:center; }
  .about-hero-note { left:-16px; bottom:22px; max-width:260px; padding:12px 14px; }
  .about-hero-bottom .container { min-height:50px; flex-wrap:wrap; justify-content:flex-start; gap:10px 22px; font-size:8px; }
  .about-story { padding-top:75px; padding-bottom:75px; }
  .about-story-grid { grid-template-columns:1fr; gap:28px; }
  .about-section-aside { min-height:0; }
  .about-aside-number { margin-top:22px; }
  .about-section-aside > p { margin-top:16px; }
  .about-story-copy h2 { font-size:36px; }
  .mission-vision { padding-bottom:75px; }
  .mission-vision-grid,.platform-grid { grid-template-columns:1fr; }
  .purpose-card { min-height:290px; padding:32px 27px; }
  .purpose-line { left:27px; right:27px; }
  .about-heading-row { align-items:flex-start; flex-direction:column; gap:18px; }
  .about-heading-row h2 { font-size:40px; }
  .about-platforms { padding-top:75px; padding-bottom:75px; }
  .platform-card { min-height:270px; padding:25px; }
  .about-expertise { padding:75px 0; }
  .expertise-grid,.approach-grid { grid-template-columns:1fr; gap:38px; }
  .expertise-list strong { font-size:12px; }
  .about-approach { padding-top:75px; padding-bottom:75px; }
  .approach-title h2 { font-size:38px; }
  .approach-values { flex-wrap:wrap; gap:9px; font-size:9px; }
  .about-contact-inner { align-items:flex-start; flex-direction:column; }
}

/* Purpose-built story visual replaces the previous text-only left rail. */
.story-visual-card { position:relative; width:100%; max-width:390px; min-height:330px; padding:25px 27px 22px; overflow:hidden; border:1px solid #dce7fa; border-radius:5px; background:linear-gradient(145deg,#f3f7ff 0%,#fff 75%); }
.story-visual-card::before { content:""; position:absolute; width:240px; height:240px; right:-105px; top:-105px; border:1px solid #d8e5fb; border-radius:50%; box-shadow:0 0 0 24px rgba(79,131,223,.035),0 0 0 48px rgba(79,131,223,.025); }
.story-card-label { position:relative; z-index:1; color:#7185aa; font:700 9px var(--font-display); letter-spacing:.18em; }
.story-card-graphic { position:relative; width:210px; height:170px; margin:10px auto 5px; }
.story-center { position:absolute; z-index:2; left:50%; top:50%; width:76px; height:76px; display:grid; place-items:center; transform:translate(-50%,-50%); border-radius:20px; color:#fff; background:linear-gradient(145deg,#3767ca,#6897ed); box-shadow:0 15px 35px rgba(55,103,202,.22); font:800 17px var(--font-display); letter-spacing:-.05em; }
.story-node { position:absolute; z-index:3; width:12px; height:12px; border:3px solid #fff; border-radius:50%; background:#5687df; box-shadow:0 0 0 5px #e3edff; }
.node-a { top:18px; left:39px; }.node-b { top:27px; right:30px; }.node-c { bottom:20px; left:25px; }.node-d { bottom:17px; right:43px; }
.story-connector { position:absolute; left:50%; top:50%; height:1px; width:85px; background:#bfd2f5; transform-origin:left center; }
.connector-a { transform:rotate(220deg); }.connector-b { transform:rotate(320deg); }.connector-c { transform:rotate(45deg); }
.story-visual-card > p { position:relative; z-index:1; max-width:290px; margin:4px auto 19px; color:#5f6f8c; font:600 14px/1.65 var(--font-display); text-align:center; }
.story-card-footer { display:flex; align-items:center; justify-content:center; gap:8px; padding-top:14px; border-top:1px solid #e1eafa; color:#8091b0; font:700 8px var(--font-display); letter-spacing:.12em; }
.story-card-footer i { color:#4f83df; font-style:normal; }
@media(max-width:760px) {
  .about-hero-visual { width:100%; height:340px; margin:0 auto; }
  .orbit-one { width:260px; height:260px; }
  .orbit-two { width:190px; height:190px; }
  .about-visual-core { width:112px; height:112px; }
  .tag-strategy { left:0; top:30px; }.tag-creativity { right:0; top:75px; }
  .tag-technology { left:0; bottom:72px; }.tag-growth { right:0; bottom:35px; }
  .story-visual-card { max-width:none; min-height:300px; }
}

/* Lighter About hero and mobile layout refinement */
.about-hero { color:#17294f; background:#eaf2ff; }
.about-hero::before { background:radial-gradient(circle at 78% 42%,rgba(112,157,226,.23),transparent 35%),linear-gradient(115deg,#edf4ff 0%,#e2edff 58%,#d8e7ff 100%); }
.about-hero h1 { color:#17294f; }
.about-hero h1 span { color:#4778c2; }
.about-hero-copy > p { color:#52627e; }
.about-hero-glow { border-color:rgba(54,95,160,.15); box-shadow:0 0 0 55px rgba(54,95,160,.035),0 0 0 110px rgba(54,95,160,.025); }
.about-hero-bottom { border-color:rgba(48,82,135,.18); }
.about-hero-bottom .container { color:#526b91; }
.about-hero-bottom b { color:#203e70; }
@media(max-width:760px) {
 .about-hero { padding-top:48px; }
 .about-hero-grid { gap:27px; padding-bottom:30px; }
 .about-hero h1 { font-size:clamp(38px,9.5vw,54px); line-height:1.08; }
 .about-hero-copy > p { font-size:14px; line-height:1.75; }
 .about-hero-visual { width:100%; height:300px; margin:0 auto; }
 .about-hero-note { left:0; bottom:12px; max-width:calc(100% - 18px); }
 .about-hero-bottom .container { padding-top:12px; padding-bottom:12px; gap:8px 15px; }
 .about-story-copy h2,.about-heading-row h2,.approach-title h2,.about-contact h2 { font-size:clamp(30px,7.5vw,40px); }
}

/* Mobile composition: prioritise the story and remove oversized decorative visuals */
@media (max-width: 760px) {
  .about-hero { padding-top: 42px; }
  .about-hero-grid { grid-template-columns: minmax(0,1fr); gap: 0; padding-bottom: 26px; }
  .about-hero-visual { display: none !important; }
  .about-hero-bottom .container { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 14px; }
  .about-story { padding-top: 52px; padding-bottom: 52px; }
  .about-story-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .about-section-aside { display: none; }
  .story-visual-card { display: none; }
  .mission-vision { padding-bottom: 52px; }
  .mission-vision-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .purpose-card { min-height: 0; padding: 24px 17px 26px; }
  .purpose-number { right: 12px; top: 10px; font-size: 58px; }
  .purpose-card h2 { margin: 20px 0 10px; font-size: clamp(20px,5vw,27px); }
  .purpose-card p { font-size: 10px; line-height: 1.65; }
  .purpose-line { left: 17px; right: 17px; }
  .about-heading-row { gap: 12px; margin-bottom: 25px; }
  .about-heading-row > p { font-size: 12px; }
  .platform-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .platform-card { min-height: 0; padding: 17px 14px; }
  .platform-card-top { margin-bottom: 16px; }
  .platform-monogram { width: 42px; height: 42px; font-size: 11px; }
  .platform-card h3 { font-size: 18px; }
  .platform-card p { font-size: 10px; line-height: 1.65; }
  .platform-link { font-size: 9px; }
  .about-expertise { padding: 54px 0; }
  .expertise-grid { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .expertise-copy > p { max-width: none; }
  .expertise-list > div { grid-template-columns: 30px minmax(0,1fr) 16px; gap: 9px; min-height: 52px; }
  .approach-grid { grid-template-columns: minmax(0,1fr); gap: 15px; }
  .about-approach { padding-top: 54px; padding-bottom: 54px; }
  .about-contact-inner { gap: 16px; }
}
@media (max-width: 390px) {
  .mission-vision-grid, .platform-grid { grid-template-columns: minmax(0,1fr); }
  .purpose-card { padding: 24px 20px 26px; }
  .platform-card { padding: 20px; }
}