:root {
  --service-paper:#f1f3f0;
  --service-ink:#092a50;
  --service-red:#d32637;
  --service-muted:#5d6f7e;
  --service-line:#bdc7cc;
}

.service-atlas { background:var(--service-paper); color:var(--service-ink); overflow:clip; }
.service-atlas :is(h1,h2,p,figure) { margin-top:0; }
.service-atlas button { color:inherit; font:inherit; }
.service-atlas__kicker,.service-atlas__eyebrow { display:block; color:var(--service-red); font-size:11px; font-weight:750; line-height:1.4; letter-spacing:.16em; text-transform:uppercase; }

.service-atlas__intro { width:100%; max-width:var(--site-frame); margin:auto; padding:clamp(82px,6.5vw,112px) 0 clamp(50px,4.3vw,74px); border-bottom:1px solid var(--service-line); }
.service-atlas__intro h2 { margin:12px 0 0; font:700 clamp(42px,4vw,68px)/1.12 var(--display); letter-spacing:-.065em; }

.service-atlas__intro,.service-atlas__layout { box-sizing:border-box; }
.service-atlas__layout { width:100%; max-width:var(--site-frame); margin:auto; display:grid; grid-template-columns:190px minmax(0,1fr); gap:clamp(52px,6vw,108px); }
.service-atlas__rail { --rail-progress:0%; height:max-content; position:sticky; top:112px; align-self:start; padding:78px 0 40px; }
.service-atlas__rail-label { display:block; margin-bottom:24px; color:#687984; font-size:10px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
.service-atlas__rail nav { position:relative; display:grid; }
.service-atlas__rail nav::before { content:""; position:absolute; left:14px; top:25px; bottom:25px; width:1px; background:#c7cfd3; }
.service-atlas__rail button { position:relative; min-height:58px; padding:0 0 0 42px; border:0; background:none; display:flex; align-items:center; gap:13px; text-align:left; cursor:pointer; }
.service-atlas__rail button::before { content:""; position:absolute; z-index:1; left:10px; width:9px; height:9px; border:2px solid var(--service-paper); border-radius:50%; background:#aeb9c0; box-shadow:0 0 0 1px #aeb9c0; transition:.28s ease; }
.service-atlas__rail button i { width:22px; color:#87959e; font-size:10px; font-style:normal; letter-spacing:.08em; transition:.28s ease; }
.service-atlas__rail button span { font-size:17px; font-weight:650; transition:.28s ease; }
.service-atlas__rail button:hover span,.service-atlas__rail button.is-active span { color:var(--service-red); transform:translateX(3px); }
.service-atlas__rail button.is-active::before { background:var(--service-red); box-shadow:0 0 0 1px var(--service-red),0 0 0 5px rgba(211,38,55,.09); }
.service-atlas__rail button.is-active i { color:var(--service-red); }
.service-atlas__rail-progress { position:absolute; left:14px; top:127px; width:1px; height:232px; overflow:hidden; pointer-events:none; }
.service-atlas__rail-progress span { display:block; width:100%; height:var(--rail-progress); background:var(--service-red); transition:height .45s cubic-bezier(.2,.65,.3,1); }

.service-atlas__chapters { min-width:0; }
.service-atlas__scene { padding:clamp(78px,6.7vw,116px) 0 clamp(104px,8vw,142px); border-bottom:1px solid var(--service-line); scroll-margin-top:104px; }
.service-atlas__scene:last-child { border-bottom:0; }
.service-atlas__scene-head { display:block; }
.service-atlas__scene-head h2 { margin:10px 0 0; font:700 clamp(40px,3.6vw,62px)/1.05 var(--display); letter-spacing:-.065em; }

.service-atlas__visual { height:clamp(390px,35vw,620px); margin:clamp(38px,4vw,62px) 0 0; position:relative; overflow:hidden; background:#f0f1ee; }
.service-atlas__visual::before { content:""; position:absolute; z-index:2; inset:0; border:1px solid rgba(9,42,80,.09); pointer-events:none; }
.service-atlas__visual-image { position:absolute; inset:0; background-image:var(--scene-image); background-repeat:no-repeat; background-size:cover; background-position:center; filter:saturate(.9) contrast(1.015); transform:scale(1.006); transition:transform 1.15s cubic-bezier(.2,.65,.3,1); }
.service-atlas__visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(5,31,58,.68)); pointer-events:none; }
.service-atlas__visual figcaption { position:absolute; z-index:3; left:clamp(24px,3vw,44px); right:clamp(24px,3vw,44px); bottom:clamp(20px,2.2vw,32px); padding-top:13px; border-top:1px solid rgba(255,255,255,.55); display:flex; align-items:center; justify-content:space-between; gap:24px; color:#fff; }
.service-atlas__visual figcaption span { color:#ff8490; font-size:10px; font-weight:750; letter-spacing:.15em; text-transform:uppercase; }
.service-atlas__visual figcaption strong { font-size:16px; font-weight:650; letter-spacing:.02em; }
.service-atlas__scene:hover .service-atlas__visual-image { transform:scale(1.027); }

.service-atlas__detail { margin-top:clamp(34px,3.5vw,54px); display:grid; grid-template-columns:minmax(250px,.48fr) minmax(0,1.52fr); gap:clamp(48px,6vw,102px); align-items:start; }
.service-atlas__summary > p { margin:0; color:#506674; font-size:17px; line-height:1.85; }
.service-atlas__tags { margin-top:24px; display:flex; flex-wrap:wrap; gap:7px; }
.service-atlas__tags span { width:38px; height:38px; border:1px solid #aab7bf; display:grid; place-items:center; color:#254963; font-size:14px; font-weight:750; }
.service-atlas__operations { min-width:0; }
.service-atlas__flow { position:relative; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); list-style:none; }
.service-atlas__flow::before { content:""; position:absolute; left:10%; right:10%; top:21px; height:1px; background:#8b9da9; }
.service-atlas__flow li { position:relative; z-index:1; padding:0 7px; text-align:center; }
.service-atlas__flow li span { width:45px; height:45px; margin:0 auto 16px; border:1px solid #8799a5; border-radius:50%; background:var(--service-paper); display:grid; place-items:center; color:var(--service-red); font-size:10px; font-weight:750; }
.service-atlas__flow li strong { display:block; font-size:15px; font-weight:650; line-height:1.45; }
.service-atlas__controls { margin-top:36px; border-top:1px solid #b8c3c9; display:grid; grid-template-columns:repeat(2,1fr); }
.service-atlas__controls span { min-height:62px; padding:0 17px; border-bottom:1px solid #b8c3c9; display:flex; align-items:center; color:#455f71; font-size:15px; }
.service-atlas__controls span:nth-child(odd) { border-right:1px solid #b8c3c9; }
.service-atlas__controls span::before { content:""; width:5px; height:5px; margin-right:10px; background:var(--service-red); }
.service-atlas__cta { padding:clamp(78px,6.7vw,112px) var(--site-edge); background:#fafbf8; display:flex; justify-content:space-between; align-items:end; gap:60px; }
.service-atlas__cta > div:first-child { width:100%; max-width:calc(var(--site-frame) - 280px); margin-left:max(0px,calc((100vw - var(--site-frame))/2)); }
.service-atlas__cta span { color:var(--service-red); font-size:10px; font-weight:750; letter-spacing:.17em; text-transform:uppercase; }
.service-atlas__cta h2 { margin:12px 0 0; font:700 clamp(33px,3vw,50px)/1.25 var(--display); letter-spacing:-.05em; }
.service-atlas__cta a { flex:0 0 auto; margin-right:max(0px,calc((100vw - var(--site-frame))/2)); padding:13px 0; border-bottom:1px solid #7b8c97; font-size:15px; font-weight:650; }
.service-atlas__cta a i { margin-left:34px; color:var(--service-red); font-style:normal; }

.is-service-motion-ready [data-service-reveal] { opacity:0; transform:translateY(20px); transition:opacity .9s cubic-bezier(.2,.65,.3,1),transform .9s cubic-bezier(.2,.65,.3,1); }
.is-service-motion-ready [data-service-reveal].is-service-visible { opacity:1; transform:none; }
.is-service-motion-ready [data-service-reveal] .service-atlas__visual { clip-path:inset(0 0 0 10%); transition:clip-path 1.15s cubic-bezier(.2,.65,.3,1) .12s; }
.is-service-motion-ready [data-service-reveal].is-service-visible .service-atlas__visual { clip-path:inset(0); }
.is-service-motion-ready [data-service-reveal].is-service-visible :is(.service-atlas__flow li,.service-atlas__controls span) { animation:service-atlas-step .55s cubic-bezier(.2,.65,.3,1) both; animation-delay:calc(var(--step) * 65ms + 260ms); }
@keyframes service-atlas-step { from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:none} }

@media (min-width:1721px) {
  .service-atlas__intro { padding-left:0; padding-right:0; }
}

@media (max-width:1720px) {
  .service-atlas__intro,.service-atlas__layout { width:auto; margin-left:var(--site-edge); margin-right:var(--site-edge); }
}

@media (max-width:1050px) {
  .service-atlas__layout { grid-template-columns:150px minmax(0,1fr); gap:48px; }
  .service-atlas__detail { grid-template-columns:1fr; gap:38px; }
  .service-atlas__summary { max-width:660px; }
  .service-atlas__visual { height:430px; }
}

@media (max-width:800px) {
  .service-atlas__layout { display:block; margin-left:0; margin-right:0; }
  .service-atlas__rail { position:sticky; z-index:22; top:68px; padding:0; background:rgba(241,243,240,.96); border-bottom:1px solid #c5cdd1; backdrop-filter:blur(10px); overflow-x:auto; scrollbar-width:none; }
  .service-atlas__rail::-webkit-scrollbar { display:none; }
  .service-atlas__rail-label,.service-atlas__rail-progress,.service-atlas__rail nav::before { display:none; }
  .service-atlas__rail nav { width:max-content; min-width:100%; grid-template-columns:repeat(5,minmax(132px,1fr)); display:grid; }
  .service-atlas__rail button { min-height:58px; padding:0 18px; justify-content:center; }
  .service-atlas__rail button::before { display:none; }
  .service-atlas__rail button::after { content:""; position:absolute; left:50%; right:50%; bottom:0; height:2px; background:var(--service-red); transition:.3s ease; }
  .service-atlas__rail button.is-active::after { left:14px; right:14px; }
  .service-atlas__chapters { padding:0 var(--site-edge); }
  .service-atlas__scene { scroll-margin-top:126px; }
  .service-atlas__visual { height:clamp(300px,57vw,410px); }
  .service-atlas__cta { align-items:flex-start; flex-direction:column; }
  .service-atlas__cta > div:first-child,.service-atlas__cta a { margin-left:0; margin-right:0; }
}

@media (max-width:560px) {
  .service-atlas__intro { padding-top:66px; padding-bottom:56px; }
  .service-atlas__intro h2 { font-size:38px; }
  .service-atlas__scene { padding:62px 0 82px; }
  .service-atlas__scene-head h2 { font-size:38px; }
  .service-atlas__visual { height:310px; margin-top:32px; }
  .service-atlas__visual figcaption { align-items:flex-start; flex-direction:column; gap:6px; }
  .service-atlas__flow { grid-template-columns:1fr; }
  .service-atlas__flow::before { left:20px; right:auto; top:20px; bottom:20px; width:1px; height:auto; }
  .service-atlas__flow li { min-height:62px; padding:0; display:grid; grid-template-columns:42px 1fr; gap:16px; align-items:center; text-align:left; }
  .service-atlas__flow li span { width:41px; height:41px; margin:0; }
  .service-atlas__controls { grid-template-columns:1fr; }
  .service-atlas__controls span:nth-child(odd) { border-right:0; }
  .service-atlas__cta h2 br { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .service-atlas * { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
  .service-atlas [data-service-reveal] { opacity:1!important; transform:none!important; }
  .service-atlas__visual { clip-path:none!important; }
}
