/* KAMEL-EHS service introduction. Craft review: Unslop by Damir Sokolovsky
   (@heydamir), https://heydamir.design/unslop — CC BY 4.0.
   The approved images, liquid glass and blue selection line are retained. */
@font-face{font-family:KamelHeader;src:url('/shared/fonts/pretendard/PretendardVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Kamel;src:url('/shared/fonts/pretendard/PretendardVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{
  --paper:#f3f4f6;--ink:#202b38;--muted:#5e6c7a;--secondary:#637181;--blue:#0099ff;--line:rgba(66,87,108,.14);
  --glass:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.16) 40%,rgba(255,255,255,.26)),rgba(255,255,255,.24);
  --glass-shadow:0 16px 32px -24px rgba(27,55,81,.4),0 2px 5px rgba(38,67,94,.045),inset 0 1px 1px rgba(255,255,255,.98),inset 1px 0 1px rgba(255,255,255,.56),inset 0 -1px 1px rgba(63,91,116,.1);
  font-family:Kamel,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;scroll-behavior:smooth;scrollbar-gutter:stable;
}
@supports not (scrollbar-gutter:stable){:root{overflow-y:scroll}}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:3px solid #176da3;outline-offset:4px}button:disabled{cursor:default}
.skip{position:fixed;top:-80px;left:20px;background:var(--ink);color:#fff;padding:12px 16px;z-index:10;border-radius:8px}.skip:focus{top:12px}
/* The wordmark-only header follows the geometry of the service headers. */
.topbar{position:fixed;top:10px;inset-inline:20px;z-index:5;height:66px;padding:0 20px;display:flex;align-items:center;border:1px solid rgba(255,255,255,.88);border-radius:18px;background:rgba(255,255,255,.14);box-shadow:0 22px 36px -25px rgba(0,0,0,.3),0 3px 8px rgba(0,0,0,.045),inset 0 2px 2px #fff,inset 2px 0 3px rgba(255,255,255,.75),inset 0 -2px 3px rgba(0,0,0,.08);backdrop-filter:blur(12px) saturate(100%);-webkit-backdrop-filter:blur(12px) saturate(100%)}
.brand{display:inline-block;font-family:KamelHeader,sans-serif;font-size:18px;font-weight:800;line-height:1;letter-spacing:-.02em;font-feature-settings:normal;white-space:nowrap}
.journey{height:500svh;position:relative}.stage{position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden;overflow:clip;isolation:isolate}
.scene-wash{position:absolute;inset:0;background:var(--paper);z-index:-1}
.intro{position:absolute;left:6.2vw;top:50%;transform:translateY(-50%);width:40%;max-width:600px;z-index:2;pointer-events:none}.intro>*{pointer-events:auto}
.topic{margin:0 0 16px;font-size:14px;line-height:20px;font-weight:500;color:var(--secondary);letter-spacing:0}
h1{font-size:clamp(40px,3.3vw,64px);line-height:1.16;letter-spacing:-.025em;font-weight:500;margin:0;word-break:keep-all}
.description{font-size:18px;line-height:28px;letter-spacing:0;margin:24px 0 0;color:var(--muted);word-break:keep-all}
/* Keep the existing full-size illustrations underneath the copy. */
.art.art--backdrop{position:absolute;inset:88px 0;z-index:0;pointer-events:none}
.art img{width:100%;height:100%;display:block;object-fit:contain;object-position:right center;mix-blend-mode:multiply;mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 92%,transparent 100%)}
.art--backdrop::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f3f4f6 0%,rgba(243,244,246,.98) 24%,rgba(243,244,246,.78) 36%,rgba(243,244,246,.12) 53%,transparent 66%)}
.service-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:48px;min-width:184px;padding:0 20px;margin-top:24px;border:0;border-radius:8px;background:#fff;color:var(--ink);box-shadow:0 4px 16px rgba(32,43,56,.1);font-family:inherit;font-size:14px;line-height:20px;font-weight:500;letter-spacing:0;cursor:pointer;white-space:nowrap;transition:background .16s ease,box-shadow .16s ease}
.service-cta svg{color:var(--blue);flex:none}.service-cta:hover{background:#fcfdff;box-shadow:0 6px 20px rgba(32,43,56,.13)}
.service-cta[aria-disabled=true]{cursor:default;color:#73808b;box-shadow:0 2px 8px rgba(32,43,56,.06)}.service-cta[aria-disabled=true] svg{display:none}
.journey-bottom{position:absolute;left:32px;right:32px;bottom:24px;display:flex;justify-content:center;z-index:2}
.chapters{display:flex;gap:24px;width:760px;max-width:100%;min-width:0;overflow-x:auto;scrollbar-width:none;padding:12px 24px;border:1px solid rgba(255,255,255,.82);border-radius:16px;background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:blur(22px) saturate(112%);-webkit-backdrop-filter:blur(22px) saturate(112%)}
.chapters::-webkit-scrollbar{display:none}.chapters button{border:0;padding:8px 0 0;background:none;flex:1 0 auto;min-height:44px;white-space:nowrap;text-align:left;color:var(--secondary);font-size:13px;line-height:20px;letter-spacing:0;font-weight:400}
.chapters button[aria-current]{color:var(--ink);font-weight:500}.chapters button:hover{color:var(--ink)}
.chapters i{display:block;margin-top:12px;height:2px;background:var(--line);position:relative;overflow:hidden}.chapters i:after{content:'';position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left}.chapters button[aria-current] i:after{transform:scaleX(1)}
/* Draw keyboard focus inside the scrollport rather than clipping its ring. */
.chapters button:focus-visible{outline-offset:-2px;border-radius:4px}
@media(min-width:1800px){.intro{left:9vw;width:34%}}
@media(max-width:1200px){.topbar{padding-inline:16px}}
@media(max-width:1100px){.intro{left:5vw;width:45%;max-width:520px}h1{font-size:44px}.description{font-size:16px;line-height:26px}.art.art--backdrop{inset:88px 0 112px}.art img{object-fit:cover;object-position:58% center}.art--backdrop::after{background:linear-gradient(90deg,rgba(243,244,246,.98) 0%,rgba(243,244,246,.93) 20%,rgba(243,244,246,.72) 35%,transparent 70%)}}
@media(max-width:760px){.topbar{inset-inline:10px;top:10px;border-radius:13px}.journey-bottom{left:12px;right:12px;bottom:16px}}
@media(max-width:700px){
 .stage{min-height:0}.intro{top:112px;left:24px;width:calc(100% - 48px);max-width:none;transform:none}.topic{font-size:13px;line-height:20px;margin-bottom:12px}
 h1{font-size:36px;line-height:1.17;letter-spacing:-.025em}.description{font-size:14px;line-height:24px;margin-top:20px;max-width:340px}.service-cta{margin-top:20px}
 .art.art--backdrop{inset:76px 0 108px}.art img{object-position:50% center}.art--backdrop::after{background:linear-gradient(180deg,#f3f4f6 0%,rgba(243,244,246,.97) 27%,rgba(243,244,246,.72) 43%,rgba(243,244,246,.1) 64%,transparent 80%)}
 .chapters{gap:20px;padding:12px 16px;border-radius:14px}.chapters button{font-size:12px}.journey{height:500svh}
}
@media(max-width:600px){.topbar{padding-inline:12px}.brand{font-size:16px}}
@media(max-width:380px){.intro{left:20px;width:calc(100% - 40px)}h1{font-size:32px}.description{font-size:14px;line-height:22px}.chapters{gap:16px}}
@media(max-height:700px) and (min-width:701px){.stage{min-height:560px}.intro{max-width:560px}h1{font-size:40px}.description{font-size:16px;line-height:24px}.topic{margin-bottom:12px}.description,.service-cta{margin-top:20px}.art.art--backdrop{bottom:96px}.journey-bottom{bottom:12px}.chapters{padding-block:8px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.journey{height:auto;min-height:100svh}.stage{position:relative}.service-cta{transition:none}}
@media(prefers-reduced-transparency:reduce){.topbar,.chapters{background:#f3f4f6;backdrop-filter:none;-webkit-backdrop-filter:none}}

@media(max-width:700px) and (max-height:700px){.intro{top:96px}.topic{margin-bottom:8px}h1{font-size:30px;line-height:1.14}.description{font-size:13px;line-height:20px;margin-top:16px}.service-cta{min-height:44px;margin-top:16px}.chapters{padding-block:8px}}
@media(min-width:701px) and (max-height:500px){.stage{min-height:0}.intro{top:96px;left:32px;transform:none;width:48%}.topic{font-size:12px;line-height:20px;margin-bottom:8px}h1{font-size:28px;line-height:32px}.description{font-size:12px;line-height:18px;margin-top:12px}.service-cta{min-height:44px;margin-top:12px}.art.art--backdrop{inset:88px 0 80px}.journey-bottom{bottom:12px}.chapters{padding-block:8px}}

/* Approved small camel: 32 poses in an 8 x 4 atlas, displayed at ~54 x 28px. */
.topbar{gap:24px}.brand{flex:none}
.camel-track{position:relative;align-self:stretch;flex:1 1 0;min-width:0;overflow:hidden;pointer-events:none}
.camel-runner{position:absolute;left:0;top:0;width:68px;height:100%}
.camel-sprite{position:absolute;left:0;top:50%;transform:translateY(-50%);width:68px;height:60px;background-image:url('/main-assets/home-journey/images/header-camel-run-32.png?v=20261108-32');background-size:800% 400%;background-position:0% 0%;background-repeat:no-repeat;image-rendering:pixelated}
@keyframes header-camel-travel{from{transform:translateX(0)}to{transform:translateX(var(--camel-distance,0px))}}
@keyframes header-camel-gait{0%{background-position:0.000000% 0.000000%}3.125%{background-position:14.285714% 0.000000%}6.25%{background-position:28.571429% 0.000000%}9.375%{background-position:42.857143% 0.000000%}12.5%{background-position:57.142857% 0.000000%}15.625%{background-position:71.428571% 0.000000%}18.75%{background-position:85.714286% 0.000000%}21.875%{background-position:100.000000% 0.000000%}25%{background-position:0.000000% 33.333333%}28.125%{background-position:14.285714% 33.333333%}31.25%{background-position:28.571429% 33.333333%}34.375%{background-position:42.857143% 33.333333%}37.5%{background-position:57.142857% 33.333333%}40.625%{background-position:71.428571% 33.333333%}43.75%{background-position:85.714286% 33.333333%}46.875%{background-position:100.000000% 33.333333%}50%{background-position:0.000000% 66.666667%}53.125%{background-position:14.285714% 66.666667%}56.25%{background-position:28.571429% 66.666667%}59.375%{background-position:42.857143% 66.666667%}62.5%{background-position:57.142857% 66.666667%}65.625%{background-position:71.428571% 66.666667%}68.75%{background-position:85.714286% 66.666667%}71.875%{background-position:100.000000% 66.666667%}75%{background-position:0.000000% 100.000000%}78.125%{background-position:14.285714% 100.000000%}81.25%{background-position:28.571429% 100.000000%}84.375%{background-position:42.857143% 100.000000%}87.5%{background-position:57.142857% 100.000000%}90.625%{background-position:71.428571% 100.000000%}93.75%{background-position:85.714286% 100.000000%}96.875%{background-position:100.000000% 100.000000%}100%{background-position:0% 0%}}
@media(prefers-reduced-motion:no-preference){
 .camel-track[data-ready=true] .camel-runner{animation:header-camel-travel var(--camel-duration,16s) linear infinite}
 .camel-sprite{animation:header-camel-gait 1s steps(1,end) infinite}
}
.camel-track[data-paused=true] .camel-runner,.camel-track[data-paused=true] .camel-sprite{animation-play-state:paused}
@media(max-width:600px){.topbar{gap:16px}}

/* Service scenes slide as complete panels; header and chapter navigation stay fixed. */
.scene-stack{position:absolute;inset:0;clip-path:inset(88px 0 100px)}
.scene-panel{position:absolute;inset:0;background:var(--paper);visibility:hidden;contain:layout paint}
.scene-panel[data-visible=true]{visibility:visible;will-change:transform}
.scene-panel[aria-hidden=true]{pointer-events:none}
@media(prefers-reduced-motion:reduce){.scene-panel[data-visible=true]{will-change:auto}}

@media(max-width:700px){.scene-stack{clip-path:inset(88px 0 92px)}}
@media(min-width:701px) and (max-height:700px){.scene-stack{clip-path:inset(88px 0 84px)}}