/* About page additions: same tokens and components as the approved pages */
.crumbs{font-size:.875rem; color:var(--muted); display:flex; gap:8px; align-items:center; margin-bottom:28px}
.crumbs a{text-decoration:none; color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{color:var(--faint)}
.a-hero h1{font-size:clamp(2.5rem, 6vw, 4.5rem); letter-spacing:-0.045em; line-height:1; font-weight:600}
.a-hero h1 .l2{display:block; color:var(--violet-ink)}
.src-note{margin-top:20px; font-size:.8125rem; color:var(--faint)}

/* Brand mark visual */
.mark-wrap{position:relative; width:100%; max-width:520px; margin-inline:auto; aspect-ratio:1/1; animation:rise .9s .2s cubic-bezier(.2,.7,.2,1) both}
.mark-plate{position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle at 50% 45%, #FFFFFF 0%, #F4F2FB 70%); border:1px solid var(--line); box-shadow:0 40px 80px -40px rgba(30,20,90,.45), 0 0 0 10px color-mix(in srgb, var(--violet) 5%, transparent)}
.mark-plate::after{content:""; position:absolute; inset:-9%; border-radius:50%; border:1px dashed var(--line-strong); opacity:.7}
.mark-svg{position:absolute; inset:24%; width:52%; height:52%; overflow:visible}
.mark-svg path{fill:none; stroke-width:29; stroke-linecap:round; stroke-dasharray:var(--len); stroke-dashoffset:var(--len); transition:opacity .25s, stroke-width .25s}
.mark-wrap.drawn .mark-svg path{animation:draw .7s cubic-bezier(.5,.1,.2,1) forwards; animation-delay:calc(var(--i) * 110ms)}
.mark-wrap.still .mark-svg path{stroke-dashoffset:0}
@keyframes draw{to{stroke-dashoffset:0}}
.mark-wrap.focus .mark-svg path{opacity:.18}
.mark-wrap.focus .mark-svg path.hot{opacity:1; stroke-width:33}
.part{position:absolute; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:7px; padding:7px 12px 7px 9px; border-radius:999px; background:var(--raised); border:1px solid var(--line); box-shadow:var(--shadow); font:inherit; font-size:.8125rem; font-weight:600; color:var(--ink); white-space:nowrap; cursor:default; opacity:0; transition:opacity .4s, transform .25s, border-color .2s}
.part i{width:10px; height:10px; border-radius:50%; background:var(--c)}
.mark-wrap.labels .part{opacity:1}
.part:hover,.part:focus-visible{border-color:var(--c); transform:translate(-50%,-50%) scale(1.05); outline:none}
.mark-cap{text-align:center; font-size:.875rem; color:var(--muted); margin-top:14px}
@media (max-width:520px){ .part{font-size:.6875rem; padding:5px 9px 5px 7px; gap:5px} .part i{width:8px; height:8px} }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mark-plate{border-color:transparent} }

/* Statement */
.statement{font-size:clamp(1.75rem, 4vw, 3rem); line-height:1.1; letter-spacing:-0.035em; font-weight:600; max-width:22ch}
.statement em{font-style:normal; color:var(--violet-ink)}
.who-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:40px; margin-top:40px}
@media (min-width:960px){ .who-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:64px; align-items:start} }
.who-copy{display:grid; gap:18px}
.who-copy p{color:var(--muted); font-size:1.0625rem; max-width:40em}
.who-copy p b{color:var(--ink); font-weight:600}
.facts{margin:0; padding:26px; border-radius:var(--r-lg); background:var(--raised); border:1px solid var(--line); display:grid; gap:0}
.facts h3{font-size:.8125rem; font-family:var(--mono); font-weight:500; color:var(--teal-ink); letter-spacing:.02em; margin-bottom:10px}
.facts dl{margin:0}
.facts div{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:14px; padding:12px 0; border-top:1px solid var(--line)}
.facts dt{color:var(--muted); font-size:.875rem}
.facts dd{margin:0; font-size:.9375rem; font-weight:500}

/* Principles */
.principles{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:48px; counter-reset:p}
@media (min-width:900px){ .principles{grid-template-columns:repeat(3, minmax(0,1fr))} }
.pr{position:relative; padding:28px; border-radius:var(--r-lg); background:var(--raised); border:1px solid var(--line); display:grid; gap:10px; align-content:start; overflow:hidden}
.pr .num{font-family:var(--mono); font-size:.8125rem; color:var(--teal-ink)}
.pr h3{font-size:1.25rem; letter-spacing:-0.025em}
.pr p{color:var(--muted); font-size:.9688rem}
.pr::after{content:""; position:absolute; right:-30px; bottom:-30px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--violet) 10%, transparent), transparent 70%)}

/* Isolated vs connected */
.ic-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:20px}
.switch{display:flex; gap:2px; padding:4px; background:var(--surface); border:1px solid var(--line); border-radius:12px}
.switch button{font:inherit; font-size:.875rem; font-weight:600; color:var(--muted); background:transparent; border:0; padding:8px 14px; border-radius:9px; cursor:pointer; white-space:nowrap; transition:background-color .2s, color .2s}
.switch button[aria-selected="true"]{background:var(--raised); color:var(--ink); box-shadow:0 1px 2px rgba(22,18,43,.1)}
.ic-stage{margin-top:36px; padding:24px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); position:relative}
.ic-cards{display:grid; grid-template-columns:minmax(0,1fr); gap:14px}
@media (min-width:640px){ .ic-cards{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (min-width:1000px){ .ic-cards{grid-template-columns:repeat(4, minmax(0,1fr))} }
.icc{position:relative; padding:18px; border-radius:16px; background:var(--raised); border:1px solid var(--line); display:grid; gap:10px; transition:border-color .4s, box-shadow .4s, transform .4s}
.icc .app{display:flex; align-items:center; justify-content:space-between; gap:8px}
.icc .app .brand-plate{height:32px; padding:0 8px}
.icc .app .brand-plate img{height:22px}
.icc .app small{font-family:var(--mono); font-size:.6875rem; color:var(--faint)}
.icc .rec{display:grid; gap:4px}
.icc .rec b{font-size:1rem; letter-spacing:-0.01em; transition:color .3s}
.icc .rec span{font-size:.8438rem; color:var(--muted)}
.icc .st{justify-self:start; display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:600; padding:4px 10px; border-radius:999px; transition:background-color .3s, color .3s}
.icc .st .icon{width:13px; height:13px}
.ic-stage[data-mode="iso"] .icc{transform:rotate(var(--tilt, 0deg))}
.ic-stage[data-mode="iso"] .icc .st{background:#FBE7DA; color:#8A3B12}
.ic-stage[data-mode="con"] .icc{border-color:color-mix(in srgb, var(--teal) 45%, var(--line)); box-shadow:var(--shadow)}
.ic-stage[data-mode="con"] .icc .st{background:var(--teal-soft); color:var(--teal-ink)}
.spine{margin-top:18px; display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 18px; border-radius:14px; font-weight:600; font-size:.9375rem; transition:opacity .45s, transform .45s, background-color .45s; background:var(--btn-bg, #40328E); color:var(--btn-fg, #FFFFFF)}
.spine .icon{width:18px; height:18px}
.ic-stage[data-mode="iso"] .spine{background:transparent; color:var(--muted); border:1px dashed var(--line-strong)}
.spine{border:1px solid transparent}
.ic-stage[data-mode="con"] .spine{opacity:1; transform:none}
@media (min-width:1000px){
  .icc::after{content:""; position:absolute; left:50%; bottom:-19px; width:2px; height:18px; background:linear-gradient(var(--teal), var(--violet)); transform:scaleY(0); transform-origin:top; transition:transform .45s .15s}
  .ic-stage[data-mode="con"] .icc::after{transform:none}
}
.ic-note{margin-top:14px; font-size:.8125rem; color:var(--faint)}

/* Services links */
.svc{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-top:48px}
@media (min-width:700px){ .svc{grid-template-columns:repeat(2, minmax(0,1fr))} }
.svc a{display:grid; grid-template-columns:44px minmax(0,1fr) 20px; gap:16px; align-items:center; padding:22px; border-radius:var(--r-lg); background:var(--raised); border:1px solid var(--line); text-decoration:none; color:inherit; transition:border-color .25s, box-shadow .25s, transform .25s}
.svc a:hover{border-color:var(--line-strong); box-shadow:var(--shadow); transform:translateY(-2px)}
.svc .badge-ic{width:44px; height:44px}
.svc b{display:block; font-size:1.0625rem; letter-spacing:-0.015em}
.svc span.d{display:block; color:var(--muted); font-size:.9375rem; margin-top:2px}
.svc .go{width:18px; height:18px; color:var(--faint)}

/* Expertise */
.ex2{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:48px}
@media (min-width:1000px){ .ex2{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} }
.zoho-card,.wati-card{padding:30px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--raised); display:grid; gap:16px; align-content:start}
.zoho-card h3,.wati-card h3{font-size:1.5rem; letter-spacing:-0.03em}
.zoho-card > p,.wati-card > p{color:var(--muted); font-size:.9688rem}
.app-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
@media (min-width:520px){ .app-grid{grid-template-columns:repeat(4, minmax(0,1fr))} }
.app-grid span{display:flex; align-items:center; justify-content:center; height:54px; padding:8px; background:#FFFFFF; border:1px solid var(--line); border-radius:12px}
.app-grid img{max-height:26px; max-width:100%; width:auto}
.wati-card{background:var(--surface)}
.wati-card .brand-plate{justify-self:start}
.wati-card ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.wati-card li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; font-size:.9688rem}
.wati-card li .icon{width:18px; height:18px; color:var(--teal-ink); margin-top:2px}

/* Approach steps */
.steps4{list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:16px; position:relative}
@media (min-width:960px){ .steps4{grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px} .steps4::before{content:""; position:absolute; left:24px; right:24px; top:24px; height:2px; background:linear-gradient(90deg, var(--violet), var(--teal)); opacity:.35} }
.steps4 li{position:relative; display:grid; gap:12px; align-content:start}
.steps4 .n{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-family:var(--mono); font-size:.875rem; background:var(--btn-bg, #40328E); color:var(--btn-fg, #FFFFFF); position:relative; z-index:1}
.steps4 h3{font-size:1.1875rem; letter-spacing:-0.02em}
.steps4 p{color:var(--muted); font-size:.9688rem}

/* Clients */
.logo-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:40px}
@media (min-width:600px){ .logo-grid{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (min-width:960px){ .logo-grid{grid-template-columns:repeat(6, minmax(0,1fr))} }
.logo-grid .plate{width:auto}
.quotes2{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:16px}
@media (min-width:900px){ .quotes2{grid-template-columns:repeat(2, minmax(0,1fr))} }
.quotes2 .quote blockquote{font-size:clamp(1.0625rem, 1.8vw, 1.25rem)}

/* Base */
.base{display:grid; grid-template-columns:minmax(0,1fr); gap:24px; margin-top:40px}
@media (min-width:960px){ .base{grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:48px; align-items:center} }
.base-copy{display:grid; gap:16px}
.base-copy p{color:var(--muted); font-size:1.0625rem; max-width:38em}
.office{padding:28px; border-radius:var(--r-lg); background:var(--console-bg); color:var(--console-ink); border:1px solid var(--console-line); display:grid; gap:18px; position:relative; overflow:hidden}
.office::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background:radial-gradient(60% 50% at 90% 0%, rgba(66,214,207,.16), transparent 70%)}
.office .lbl{font-family:var(--mono); font-size:.75rem; color:var(--console-teal)}
.office address{font-style:normal; font-size:1.125rem; line-height:1.45; font-weight:500}
.office .row{display:flex; flex-wrap:wrap; gap:10px; position:relative; z-index:1}
.office a.chip{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px; background:var(--console-raised); border:1px solid var(--console-line); color:var(--console-ink); text-decoration:none; font-size:.875rem; font-weight:600}
.office a.chip:hover{border-color:var(--console-violet)}
.office a.chip .icon{width:16px; height:16px; color:var(--console-teal)}
.cta-panel.slim{grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){ .cta-panel.slim{grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end} }
/* Mission, vision and values */
.mvv{border-top:1px solid var(--line)}
.mv{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:48px}
@media (min-width:900px){ .mv{grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px} }
.mv-card{position:relative; overflow:hidden; display:grid; gap:22px; align-content:start; padding:32px; border-radius:var(--r-lg); background:var(--raised); border:1px solid var(--line); box-shadow:var(--shadow); transition:transform .3s, box-shadow .3s, border-color .3s}
@media (min-width:700px){ .mv-card{padding:40px} }
.mv-card::before{content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--accent)}
.mv-card::after{content:""; position:absolute; right:-80px; top:-80px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); pointer-events:none}
.mv-card.mission{--accent:var(--violet)}
.mv-card.vision{--accent:var(--teal)}
.mv-card:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 40%, var(--line))}
.mv-top{display:flex; align-items:center; gap:14px}
.mv-ic{width:48px; height:48px; flex:none; border-radius:14px; display:grid; place-items:center; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line))}
.mv-card.vision .mv-ic{color:var(--teal-ink)}
.mv-card.mission .mv-ic{color:var(--violet-ink)}
.mv-ic .icon{width:24px; height:24px}
.mv-top h3{font-size:1.0625rem; font-weight:600; letter-spacing:-0.01em}
.mv-card blockquote{margin:0; position:relative; z-index:1; font-size:clamp(1.25rem, 2.2vw, 1.625rem); line-height:1.38; letter-spacing:-0.022em; font-weight:500; color:var(--ink)}
.values-head{margin-top:64px}
.values-head h3{font-size:clamp(1.5rem, 3vw, 2rem); letter-spacing:-0.03em}
.values{list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:14px}
@media (min-width:640px){ .values{grid-template-columns:repeat(2, minmax(0,1fr))} .val.feature{grid-column:span 2} }
@media (min-width:1080px){ .values{grid-template-columns:repeat(4, minmax(0,1fr))} .val.feature{grid-column:span 2} }
.val{position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); grid-template-areas:"ic num" "ic title" "ic text"; column-gap:16px; row-gap:4px; align-content:start; padding:24px; border-radius:var(--r-lg); background:var(--raised); border:1px solid var(--line); transition:transform .3s, box-shadow .3s, border-color .3s}
@media (min-width:1080px){ .val:not(.feature){grid-template-columns:minmax(0,1fr); grid-template-areas:"ic" "num" "title" "text"; row-gap:8px} .val:not(.feature) .v-ic{margin-bottom:8px} }
.val:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-strong)}
.val .v-num{grid-area:num; font-family:var(--mono); font-size:.75rem; color:var(--teal-ink)}
.val .v-ic{grid-area:ic; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--violet-soft); color:var(--violet-ink); transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.val .v-ic.t{background:var(--teal-soft); color:var(--teal-ink)}
.val .v-ic .icon{width:24px; height:24px}
.val:hover .v-ic{transform:rotate(-6deg) scale(1.08)}
.val h4{grid-area:title; margin:0; font-size:1.125rem; letter-spacing:-0.02em; line-height:1.3}
.val p{margin:0}
.val.feature{align-content:center}
.val p{grid-area:text; color:var(--muted); font-size:.9688rem}
.val.feature{background:linear-gradient(135deg, color-mix(in srgb, var(--violet) 7%, var(--raised)), color-mix(in srgb, var(--teal) 7%, var(--raised))); border-color:color-mix(in srgb, var(--violet) 22%, var(--line))}
.val.feature h4{font-size:clamp(1.25rem, 2.2vw, 1.5rem)}
.val.feature p{font-size:1.0625rem}
.mvv.js-rv .rv{opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--d, 0) * 70ms)}
.mvv.js-rv .rv.in{opacity:1; transform:none}
.mvv.js-rv .rv.in:hover{transform:translateY(-3px); transition-delay:0s}
@media (prefers-reduced-motion: reduce){ .mvv.js-rv .rv{opacity:1; transform:none; transition:none} .val:hover .v-ic{transform:none} .mv-card:hover,.val:hover{transform:none} }
@media (prefers-reduced-motion: reduce){ .mark-wrap{animation:none} .mark-svg path{stroke-dashoffset:0 !important; animation:none !important} .icc,.spine,.icc::after{transition:none} }