/* About us: editorial page. Dark sections carry soft blue ambient light with restrained orange;
   light sections give the story room. All copy is visible without JavaScript; reveals are motion-only. */
:root{--ab-glow:0,122,231;--ab-warm:252,129,2}

.ab-dark{position:relative;isolation:isolate;overflow:hidden;background:var(--midnight);color:var(--text-dark-2)}
.ab-dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.ab-dark h2,.ab-dark h3{color:var(--white)}
.ab-exp .ab-kicker,.ab-product .ab-kicker{color:#A94F06}
.ab-kicker{font:600 .9375rem var(--body);color:var(--orange);margin-bottom:16px;letter-spacing:.01em}

/* Section heads */
.ab-head{max-width:760px}
.ab-head h2{font-weight:800;font-size:clamp(2rem,4vw,3.25rem);line-height:1.08;letter-spacing:-.03em}
.ab-head > p:not(.ab-kicker){margin-top:20px;font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.55;max-width:36em}
.ab-dark .ab-head > p:not(.ab-kicker){color:var(--text-dark-2)}

/* 1. Hero */
.ab-hero{padding:clamp(80px,11vw,160px) 0 clamp(88px,11vw,150px);text-align:center}
.ab-hero::before{background:
  radial-gradient(55% 60% at 50% -10%,rgba(var(--ab-glow),.30),transparent 70%),
  radial-gradient(35% 45% at 88% 30%,rgba(var(--ab-glow),.14),transparent 70%),
  radial-gradient(30% 40% at 8% 95%,rgba(var(--ab-warm),.08),transparent 70%)}
.ab-hero h1{max-width:18em;margin:0 auto;color:var(--white);font-weight:800;font-size:clamp(2.5rem,4.6vw,4.25rem);line-height:1.04;letter-spacing:-.035em}
.ab-hero h1 span{display:block}
.ab-h-soft{color:#A9CDF3;background:linear-gradient(100deg,#FFFFFF 0%,#A9CDF3 55%,#7DB6EE 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ab-lede{max-width:34em;margin:28px auto 0;font-size:clamp(1.0625rem,1.5vw,1.3125rem);line-height:1.55;color:var(--text-dark-2)}
.ab-ctas{margin-top:36px;justify-content:center}
.ab-horizon{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--ab-glow),.65) 30%,rgba(var(--ab-warm),.7) 50%,rgba(var(--ab-glow),.65) 70%,transparent)}
.ab-horizon::after{content:"";position:absolute;left:20%;right:20%;bottom:0;height:60px;background:radial-gradient(50% 100% at 50% 100%,rgba(var(--ab-glow),.22),transparent 70%)}

/* 1b. Why we built SERVACT: heading left, story right; mist band between the dark hero and the white experience section */
.ab-origin{background:var(--mist);padding:clamp(64px,8vw,112px) 0;border-bottom:1px solid var(--line-light)}
.ab-origin .ab-kicker{color:#A94F06}
.ab-origin-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:start}
.ab-origin-text p{font-size:clamp(1.0625rem,1.35vw,1.1875rem);line-height:1.6;color:var(--ink-body);max-width:34em}
.ab-origin-text p + p{margin-top:16px}
.ab-origin-text .ab-origin-end{margin-top:28px;padding-top:24px;border-top:2px solid var(--orange);font:800 clamp(1.375rem,2.2vw,1.75rem)/1.25 var(--head);letter-spacing:-.02em;color:var(--ink)}
@media (max-width:860px){.ab-origin-grid{grid-template-columns:1fr;gap:28px}}

/* 2. Our experience: three columns divided by hairlines, not cards */
.ab-exp{background:var(--white);padding:clamp(80px,10vw,140px) 0}
.ab-exp .ab-head p:not(.ab-kicker){color:var(--ink-body)}
.ab-areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--line-light)}
.ab-areas{grid-template-rows:repeat(4,auto)}
.ab-areas > li{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start;position:relative;padding:36px clamp(20px,2.6vw,40px) 8px;border-left:1px solid var(--line-light)}
.ab-areas > li:first-child{padding-left:0;border-left:0}
.ab-areas > li:last-child{padding-right:0}
.ab-areas > li::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:2px;background:linear-gradient(90deg,var(--orange),rgba(var(--ab-warm),0))}
.ab-areas > li:not(:first-child)::before{left:clamp(20px,2.6vw,40px)}
.ab-num{display:block;font:700 .875rem var(--head);color:var(--slate);letter-spacing:.04em}
.ab-areas h3{margin-top:18px;font-weight:800;font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.15;letter-spacing:-.02em}
.ab-areas > li > p{margin-top:14px;font-size:1.0625rem;line-height:1.6}
.ab-scope{margin-top:24px;border-top:1px solid var(--line-light)}
.ab-scope li{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-light);font:600 .9375rem var(--body);color:var(--ink)}
.ab-scope li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--blue)}

/* 3. Knowledge behind SERVACT */
.ab-people{padding:clamp(80px,10vw,140px) 0}
.ab-people::before{background:
  radial-gradient(45% 55% at 15% 0%,rgba(var(--ab-glow),.20),transparent 70%),
  radial-gradient(40% 50% at 90% 100%,rgba(var(--ab-glow),.16),transparent 70%),
  radial-gradient(22% 30% at 50% 60%,rgba(var(--ab-warm),.05),transparent 70%)}
.ab-pair{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:stretch;margin-top:clamp(44px,5vw,72px)}
.ab-panel{position:relative;padding:clamp(28px,3.2vw,44px);border-radius:20px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
.ab-panel::before{content:"";position:absolute;top:-1px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--ab-glow),.9),transparent)}
.ab-role{font:600 .875rem var(--body);color:var(--orange)}
.ab-panel h3{margin-top:8px;font-weight:800;font-size:clamp(1.625rem,2.6vw,2.25rem);line-height:1.1;letter-spacing:-.025em}
.ab-panel > p:not(.ab-role):not(.ab-focus){margin-top:16px;font-size:1.0625rem;line-height:1.6;color:var(--text-dark-2)}
.ab-panel > h3 + p{margin-top:20px!important;color:#DCE5EF!important}
.ab-focus{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.10);font:500 .9375rem var(--body);color:var(--white)}
.ab-focus span{display:block;margin-bottom:4px;font:600 .75rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-dark-3)}
.ab-link{position:relative}
.ab-link i{position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,rgba(var(--ab-glow),.7),rgba(var(--ab-warm),.8),rgba(var(--ab-glow),.7))}
.ab-link i::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(var(--ab-warm),.15),0 0 14px 2px rgba(var(--ab-glow),.45)}

/* 4. Product principles */
.ab-product{background:var(--mist);padding:clamp(80px,10vw,140px) 0}
.ab-product .ab-head p:not(.ab-kicker){color:var(--ink-body)}
.ab-principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(44px,5vw,72px)}
.ab-principles li{padding-top:22px;border-top:1px solid #C9D3DF;position:relative}
.ab-principles li::before{content:"";position:absolute;top:-1px;left:0;width:40px;height:2px;background:var(--blue)}
.ab-principles h3{font-weight:800;font-size:1.25rem;line-height:1.2;letter-spacing:-.015em}
.ab-principles p{margin-top:10px;font-size:1rem;line-height:1.6}
.ab-more{margin-top:44px}
.ab-more a{font:600 1rem var(--body);color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(5,50,96,.3);padding-bottom:2px}
.ab-more a:hover{border-bottom-color:var(--navy)}

/* 5. Closing */
.ab-final{padding:clamp(88px,11vw,150px) 0;text-align:center}
.ab-final::before{background:
  radial-gradient(50% 70% at 50% 110%,rgba(var(--ab-glow),.30),transparent 70%),
  radial-gradient(25% 35% at 50% 100%,rgba(var(--ab-warm),.10),transparent 70%)}
.ab-final h2{max-width:14em;margin:0 auto;font-weight:800;font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.08;letter-spacing:-.03em}
.ab-final h2 + p{max-width:34em;margin:22px auto 0;font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.55}
.ab-final .final-ctas{margin-top:36px}

/* Motion: gentle, paced reveals. Content is visible by default; the hidden pre-state needs story.js running (story-js). */
html.story-motion .ab-hero h1 span,html.story-motion .ab-lede,html.story-motion .ab-ctas{animation:ab-rise .9s cubic-bezier(.2,.7,.2,1) both}
html.story-motion .ab-hero h1 .ab-h-soft{animation-delay:.15s}
html.story-motion .ab-lede{animation-delay:.3s}
html.story-motion .ab-ctas{animation-delay:.42s}
@keyframes ab-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html.story-motion .ab-origin [data-reveal],html.story-motion .ab-exp [data-reveal],html.story-motion .ab-people [data-reveal],html.story-motion .ab-product [data-reveal]{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
html.story-motion.story-js .ab-origin [data-reveal]:not(.in),html.story-motion.story-js .ab-exp [data-reveal]:not(.in),html.story-motion.story-js .ab-people [data-reveal]:not(.in),html.story-motion.story-js .ab-product [data-reveal]:not(.in){opacity:0;transform:translateY(18px)}
html.story-motion .ab-areas > li:nth-child(2),html.story-motion .ab-principles li:nth-child(2){transition-delay:.12s}
html.story-motion .ab-areas > li:nth-child(3),html.story-motion .ab-principles li:nth-child(3){transition-delay:.24s}
html.story-motion .ab-principles li:nth-child(4){transition-delay:.36s}
html.story-motion .ab-pair .ab-panel:last-child{transition-delay:.15s}

/* Tablet */
@media (max-width:1024px){
  .ab-areas{grid-template-columns:1fr;border-top:0}
  .ab-areas{grid-template-rows:none}
  .ab-areas > li,.ab-areas > li:first-child,.ab-areas > li:last-child{display:block;grid-row:auto;padding:32px 0 8px;border-left:0;border-top:1px solid var(--line-light)}
  .ab-areas > li:not(:first-child)::before{left:0}
  .ab-areas > li > p,.ab-areas h3{max-width:36em}
  .ab-scope{display:flex;flex-wrap:wrap;gap:0 28px;border-top:0}
  .ab-scope li{border-bottom:0;padding:6px 0}
  .ab-principles{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
}
@media (max-width:860px){
  .ab-pair{grid-template-columns:1fr;grid-template-rows:auto 40px auto}
  .ab-link i{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,rgba(var(--ab-glow),.7),rgba(var(--ab-warm),.8),rgba(var(--ab-glow),.7))}
}
/* Mobile */
@media (max-width:640px){
  .ab-hero{text-align:left}
  .ab-hero h1{margin:0;font-size:clamp(2.125rem,9.4vw,2.75rem)}
  .ab-lede{margin-left:0}
  .ab-ctas{justify-content:flex-start}
  .ab-ctas .btn{flex:1 1 100%}
  .ab-principles{grid-template-columns:1fr;row-gap:28px}
  .ab-panel{border-radius:16px}
  .ab-final{text-align:left}
  .ab-final h2,.ab-final h2 + p{margin-left:0}
  .ab-final .final-ctas{align-items:stretch}
  .ab-final .final-ctas .btn{width:100%}
  .ab-final .email-row{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .ab-hero h1 span,.ab-lede,.ab-ctas{animation:none!important}
}