@font-face{font-family:Onest;src:url('/assets/fonts/onest/Onest-Variable.ttf') format('truetype');font-display:swap}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:#fff;color:#222522;font:18px/1.55 Onest,Arial,sans-serif}a{color:inherit;text-underline-offset:5px}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500;line-height:1.1;letter-spacing:-.035em}h2{font-size:48px}h3{font-size:25px}::selection{background:#ffb065;color:#202420}:focus-visible{outline:3px solid #a63e08;outline-offset:5px}.opening :focus-visible,footer :focus-visible{outline-color:#ffb065}.skip{position:absolute;left:24px;top:-100px;z-index:100;background:white;padding:12px}.skip:focus{top:20px}.opening{background:#202420;color:white;margin:16px;border-radius:24px;overflow:clip}.site-header,.hero,.container{width:min(100% - 96px,1280px);margin:auto}.site-header{display:flex;align-items:center;justify-content:space-between;min-height:100px;gap:32px}.brand{display:inline-flex;align-items:center;min-height:44px}.brand__logo{width:155px;height:50px;object-fit:contain}.main-nav{display:flex;align-items:center;gap:30px;font-size:15px}.main-nav a{text-decoration:none;padding:12px 0}.main-nav a:hover{text-decoration:underline}.main-nav .nav-cta{background:white;color:#202420;padding:12px 22px;border-radius:8px}.mobile-menu-toggle{display:none}.hero{padding:52px 0 48px}.intro{display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:60px;margin-bottom:56px}h1{font-size:clamp(54px,6.1vw,82px);line-height:1.04}.intro h1 span{color:#ffb065}.intro>p{font-size:21px;max-width:440px;color:#dbe0d9;padding-bottom:7px}.directions{display:grid;grid-template-columns:1.12fr 1fr 1fr;gap:28px}.direction{text-decoration:none;padding:28px 0 8px;display:flex;flex-direction:column;border-top:1px solid #687066;min-width:0}.direction h2{font-size:30px;letter-spacing:-.03em;margin-bottom:18px}.direction p{font-size:16px;line-height:1.5;color:#dbe0d9}.direction ul{padding-left:18px;font-size:14px;line-height:1.7;margin:20px 0 28px;color:#dbe0d9}.route-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:16px;margin-top:auto;min-height:44px}.direction:hover .route-label{text-decoration:underline;text-underline-offset:5px}.direction--buy{padding:28px;background:#ffb065;color:#202420;border-color:transparent;border-radius:12px}.direction--buy p,.direction--buy ul{color:#37392c}.section{padding:100px 0}.section-heading{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-bottom:54px}.section-heading p{color:#585d57;max-width:530px}.kicker{display:none}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}.step{border-top:1px solid #b9c1b6;padding-top:24px}.step__number{display:block;font-size:16px;font-weight:400;color:#585d57;margin-bottom:22px}.step h3{max-width:290px;margin-bottom:18px}.step p{font-size:16px;color:#585d57;max-width:340px}.section--soft{background:#f1f3ee}.faq-ledger .container{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px}.faq-ledger .section-heading{display:block;margin:0}.faq-ledger h2{margin-bottom:28px}.faq-ledger .section-heading p{font-size:16px}.faq details{border-bottom:1px solid #b9c1b6}.faq details:first-child{border-top:1px solid #b9c1b6}.faq summary{cursor:pointer;min-height:64px;padding:24px 32px 24px 0;font-size:20px;line-height:1.35}.faq details p{padding:0 0 28px;font-size:16px;color:#585d57}.site-footer{background:#202420;color:white;padding:72px 0}.footer-reference__grid{display:grid;grid-template-columns:1.7fr .7fr .7fr;gap:64px}.footer-reference__brand{margin-bottom:28px}.footer-reference__lead h2{font-size:40px;max-width:500px}.footer-reference__summary{font-size:16px;color:#dbe0d9;margin:24px 0;max-width:480px}.footer-reference__cta,.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:20px;border:0;background:#ffb065;color:#202420;padding:15px 24px;border-radius:8px;min-height:48px}.footer-reference__note{font-size:13px;color:#dbe0d9;margin-top:26px;max-width:480px}.footer-reference__column{padding-top:10px}.footer-reference__column h3{font-size:18px;margin-bottom:20px}.footer-reference__column>a{display:flex;min-height:44px;align-items:center;text-decoration:none;font-size:15px;color:#dbe0d9}.footer-reference__column>a:hover{text-decoration:underline}.footer-reference__cta-icon{display:flex}.modal[hidden],[hidden]{display:none!important}.modal{position:fixed;inset:0;z-index:100;background:#101510b8;display:flex;align-items:center;justify-content:center;padding:20px}.modal__dialog{background:white;color:#222522;border-radius:16px;width:680px;max-height:90dvh;overflow:auto;padding:32px}.modal__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.modal__header h2{font-size:32px}.modal__header p{font-size:15px;margin-top:12px}.modal__close{background:none;border:0;font-size:32px;min-width:44px;min-height:44px}.lead-form{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}.field{min-width:0}.field--full,.form-status,.delivery-options{grid-column:1/-1}.field label{display:block;font-size:14px;margin-bottom:8px}.field input,.field select,.field textarea{width:100%;min-height:48px;border:1px solid #7c8578;border-radius:6px;background:white;color:#222522;padding:12px;font-size:16px}.field textarea{min-height:100px;resize:vertical}::placeholder{color:#666d63}.form-note,.form-status{font-size:13px}.delivery-links{display:flex;flex-wrap:wrap;gap:12px}.delivery-links a,.delivery-links button{min-height:44px;padding:10px;border:1px solid #7c8578;background:white;border-radius:6px;font-size:14px}.delivery-options h3{font-size:22px;margin-bottom:12px}.delivery-options p{margin-bottom:16px}
@media(max-width:1000px){.site-header,.hero,.container{width:calc(100% - 56px)}.main-nav{gap:18px}.intro{gap:32px}.intro>p{font-size:18px}.directions{gap:20px}.direction h2{font-size:24px}.direction--buy{padding:24px}.faq-ledger .container{gap:48px}.footer-reference__grid{gap:32px}}
@media(max-width:760px){body{font-size:16px}.opening{margin:8px;border-radius:18px}.site-header,.hero,.container{width:calc(100% - 40px)}.site-header{min-height:80px;flex-wrap:wrap;gap:0}.brand__logo{width:136px;height:44px}.mobile-menu-toggle{display:block;background:transparent;color:white;border:1px solid #687066;border-radius:8px;width:48px;height:44px}.mobile-menu-toggle:before{content:'Меню';font-size:12px}.main-nav{display:none;width:100%;padding:12px 0 24px}.main-nav.is-open{display:grid;gap:0}.main-nav a{min-height:44px}.main-nav .nav-cta{margin-top:8px;text-align:center}.hero{padding:28px 0 24px}.intro{display:block;margin-bottom:32px}h1{font-size:clamp(30px,9.2vw,42px)}.intro>p{font-size:16px;margin-top:24px;max-width:100%}.directions{display:block}.direction{padding:24px 0 16px;margin-top:24px}.direction--buy{padding:24px;margin:0}.direction h2{font-size:28px;margin-bottom:14px}.direction ul{margin:16px 0}.section{padding:64px 0}h2{font-size:32px}.section-heading{display:block;margin-bottom:32px}.section-heading p{margin-top:22px}.steps{display:block}.step{display:grid;grid-template-columns:32px 1fr;gap:0 12px;padding:22px 0}.step__number{grid-row:1/3;margin:2px 0}.step h3{font-size:23px;max-width:100%;margin-bottom:12px}.step p{grid-column:2}.faq-ledger .container{display:block}.faq{margin-top:32px}.faq summary{font-size:18px}.site-footer{padding:48px 0}.footer-reference__grid{grid-template-columns:1fr 1fr;gap:36px 24px}.footer-reference__lead{grid-column:1/-1}.footer-reference__lead h2{font-size:32px}.modal{padding:12px}.modal__dialog{padding:22px;max-height:94dvh}.modal__header h2{font-size:26px}.lead-form{grid-template-columns:1fr}.field{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* The three services form one chooser. Color moves between them so no service is permanently preferred. */
.directions{gap:2px;background:#3b413b;border-radius:14px;overflow:hidden}
.direction{--tone:#fe5915;position:relative;padding:28px;border:0;background:color-mix(in srgb,var(--tone) 10%,#202420);min-height:410px;overflow:hidden;transition:background-color .7s cubic-bezier(.16,1,.3,1),color .35s ease}
.direction--setup{--tone:#ffa811}
.direction--support{--tone:#dfdedf}
.direction--buy{padding:28px;background:color-mix(in srgb,var(--tone) 10%,#202420);color:#fff;border-radius:0}
.direction p,.direction ul,.direction--buy p,.direction--buy ul{color:#dbe0d9;transition:color .35s ease}
.direction.is-active{background:var(--tone);color:#171b17}
.direction:focus-visible{outline:3px solid #fff;outline-offset:-7px}
.direction.is-active p,.direction.is-active ul{color:#171b17}
.service-shape{position:relative;display:block;width:112px;height:76px;margin:0 0 28px auto;color:var(--tone)}
.direction.is-active .service-shape{color:#171b17}
.service-shape i{position:absolute;display:block;border:2px solid currentColor}
.service-shape--buy i{width:62px;height:42px;border-radius:7px;background:transparent;right:0;top:0}
.service-shape--buy i:nth-child(2){right:12px;top:12px}
.service-shape--buy i:nth-child(3){right:24px;top:24px}
.service-shape--setup:before,.service-shape--setup:after{content:"";position:absolute;top:37px;height:2px;background:currentColor;width:34px}
.service-shape--setup:before{left:19px}.service-shape--setup:after{right:19px}
.service-shape--setup i{width:25px;height:25px;border-radius:50%;top:25px;background:#202420}
.service-shape--setup i:first-child{left:0}.service-shape--setup i:nth-child(2){left:44px}.service-shape--setup i:nth-child(3){right:0}
.direction.is-active .service-shape--setup i{background:var(--tone)}
.service-shape--support i{border-radius:50%;inset:5px 22px}
.service-shape--support i:nth-child(2){inset:17px 34px}.service-shape--support i:nth-child(3){inset:29px 46px;background:currentColor}
.direction.is-active .route-label svg{transform:translateX(4px)}
.route-label svg{transition:transform .45s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:no-preference){.direction.is-active .service-shape--buy i:first-child{transform:translate(5px,-5px)}.direction.is-active .service-shape--setup i:nth-child(2){transform:scale(1.18)}.direction.is-active .service-shape--support i:first-child{transform:scale(1.08)}.service-shape i{transition:transform .7s cubic-bezier(.16,1,.3,1)}}
@media(max-width:1000px){.direction,.direction--buy{padding:24px;min-height:390px}.service-shape{width:94px}}
@media(max-width:760px){.directions{display:block;background:transparent;overflow:visible}.direction,.direction--buy{min-height:0;margin:2px 0 0;padding:24px;border-radius:12px;background:color-mix(in srgb,var(--tone) 13%,#202420)}.direction:first-child{margin-top:0}.direction.is-active{background:var(--tone)}.service-shape{width:88px;height:62px;margin-bottom:20px}.service-shape--buy i{width:52px;height:35px}.service-shape--setup:before,.service-shape--setup:after{top:31px;width:26px}.service-shape--setup i{top:19px}.service-shape--support i{inset:0 17px}.service-shape--support i:nth-child(2){inset:10px 27px}.service-shape--support i:nth-child(3){inset:20px 37px}}

/* Approved shape choreography: reveal, transfer, respond. */
.service-shape--buy i{top:0;right:0;filter:blur(0);opacity:1;z-index:3;transform-origin:center;transition:transform .24s cubic-bezier(.16,1,.3,1),filter .24s ease,opacity .24s ease}
.service-shape--buy i:nth-child(2){top:3px;right:3px;filter:blur(.5px);opacity:.7;z-index:2}
.service-shape--buy i:nth-child(3){top:6px;right:6px;filter:blur(1.1px);opacity:.45;z-index:1}
.direction.is-active .service-shape--buy i:first-child{transform:none}
.direction.is-interacting .service-shape--buy i:nth-child(2){transform:translate(-12px,12px) rotate(-1.5deg);transition-duration:.38s;transition-delay:.04s}
.direction.is-interacting .service-shape--buy i:nth-child(3){transform:translate(-24px,24px) rotate(1.5deg);transition-duration:.42s;transition-delay:.1s}

.service-shape--setup{width:112px;height:76px;background:none}
.service-shape--setup:before,.service-shape--setup:after{top:37px;width:calc(50% - 41.5px);height:2px;opacity:.58;background:linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,linear-gradient(90deg,transparent,currentColor 32%,currentColor 68%,transparent) -10px 50%/10px 2px no-repeat}
.service-shape--setup:before{left:27px}.service-shape--setup:after{left:calc(50% + 14.5px);right:auto}
.service-shape--setup i{left:auto;right:auto;top:25px;background:transparent;opacity:.46;transition:background-color .2s ease,transform .2s ease,opacity .2s ease}
.service-shape--setup i:first-child{left:0;opacity:.9}.service-shape--setup i:nth-child(2){left:calc(50% - 12.5px);opacity:.58}.service-shape--setup i:nth-child(3){right:0;opacity:.46}
.direction.is-active .service-shape--setup i:nth-child(2){transform:none}
.direction.is-interacting .service-shape--setup:before{animation:data-pass .25s .12s cubic-bezier(.16,1,.3,1) both}
.direction.is-interacting .service-shape--setup:after{animation:data-pass .25s .43s cubic-bezier(.16,1,.3,1) both}
.direction.is-interacting .service-shape--setup i:first-child{animation:node-receive .22s 0s cubic-bezier(.16,1,.3,1) both}
.direction.is-interacting .service-shape--setup i:nth-child(2){animation:node-receive .22s .3s cubic-bezier(.16,1,.3,1) both}
.direction.is-interacting .service-shape--setup i:nth-child(3){animation:node-receive .22s .61s cubic-bezier(.16,1,.3,1) both}
@keyframes data-pass{0%{opacity:.58;background-position:0 50%,-10px 50%}14%{opacity:1}86%{opacity:1}100%{opacity:.58;background-position:0 50%,calc(100% + 10px) 50%}}
@keyframes node-receive{0%{background:transparent;transform:scale(1)}55%{background:currentColor;transform:scale(1.1);opacity:1}100%{background:currentColor;transform:scale(1);opacity:1}}

.service-shape--support{width:76px;height:76px;aspect-ratio:1;flex:none}
.service-shape--support i{inset:5px;border-radius:50%;aspect-ratio:1;transform-origin:center;transition:transform .22s cubic-bezier(.16,1,.3,1),opacity .22s ease}
.service-shape--support i:nth-child(2){inset:17px}.service-shape--support i:nth-child(3){inset:29px}
.service-shape--support i:first-child{opacity:.62}.service-shape--support i:nth-child(2){opacity:.78}.service-shape--support i:nth-child(3){opacity:1}
.direction.is-active .service-shape--support i:first-child{transform:none}
.direction.is-interacting .service-shape--support i:first-child{animation:support-wave 1.02s cubic-bezier(.16,1,.3,1) both}
.direction.is-interacting .service-shape--support i:nth-child(2){animation:support-ring 1.02s cubic-bezier(.16,1,.3,1) both}
.direction.is-interacting .service-shape--support i:nth-child(3){animation:support-core 1.02s cubic-bezier(.16,1,.3,1) both}
@keyframes support-wave{0%{transform:scale(1);opacity:.62}28%{transform:scale(1.25);opacity:0}34%{transform:scale(1);opacity:.5}70%{transform:scale(1.18);opacity:0}100%{transform:scale(1.04);opacity:.42}}
@keyframes support-ring{0%,100%{transform:scale(1);opacity:.78}24%{transform:scale(1.1);opacity:1}52%{transform:scale(1.02);opacity:.72}72%{transform:scale(1.07);opacity:.9}}
@keyframes support-core{0%,100%{transform:scale(1)}18%{transform:scale(1.12)}48%{transform:scale(1)}65%{transform:scale(1.08)}}

@media(max-width:760px){.service-shape--setup{width:112px;height:76px}.service-shape--setup:before,.service-shape--setup:after{top:37px}.service-shape--setup i{top:25px}.service-shape--support{width:72px;height:72px}.service-shape--support i:first-child{inset:3px}.service-shape--support i:nth-child(2){inset:15px}.service-shape--support i:nth-child(3){inset:31px}}
@media(prefers-reduced-motion:reduce){.service-shape i,.route-label svg{animation:none!important;transform:none!important;filter:none!important;transition:none!important}.service-shape--buy i:nth-child(2){transform:translate(-8px,8px)!important;opacity:.62}.service-shape--buy i:nth-child(3){transform:translate(-16px,16px)!important;opacity:.38}.service-shape--setup:before,.service-shape--setup:after{display:none}.direction.is-interacting .service-shape--setup i{background:currentColor;opacity:1}}

/* Product navigation: a directional signal for links and an ink-fill contact action. */
.main-nav a{position:relative;white-space:nowrap;text-decoration:none!important}
.main-nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:2px;background:#ffa811;transform:scaleX(0);transform-origin:left center;transition:transform .22s cubic-bezier(.16,1,.3,1);pointer-events:none}
.main-nav a:not(.nav-cta)::before{content:"";position:absolute;left:0;right:0;bottom:2px;height:10px;background:linear-gradient(90deg,transparent,rgba(255,168,17,.82),transparent) -20px 50%/20px 8px no-repeat;opacity:0;pointer-events:none}
.main-nav a:not(.nav-cta):hover::after,.main-nav a:not(.nav-cta):focus-visible::after,.main-nav a[aria-current="page"]::after{transform:scaleX(1)}
.main-nav a:not(.nav-cta):hover::before,.main-nav a:not(.nav-cta):focus-visible::before{animation:nav-light-pass .24s ease-out both}
@keyframes nav-light-pass{0%{opacity:0;background-position:-20px 50%}18%{opacity:.8}100%{opacity:0;background-position:calc(100% + 20px) 50%}}

.main-nav .nav-cta{border:1px solid transparent;background-color:#fff;background-image:linear-gradient(#111410,#111410);background-position:left center;background-repeat:no-repeat;background-size:0 100%;color:#202420;text-decoration:none!important;overflow:hidden;transition:background-size .26s cubic-bezier(.16,1,.3,1),color .16s ease,border-color .16s ease}
.main-nav .nav-cta:hover,.main-nav .nav-cta:focus-visible{background-size:100% 100%;border-color:#ffa811;color:#fff;text-decoration:none!important}
.main-nav .nav-cta:active{background-image:linear-gradient(#292e29,#292e29);color:#fff}
@media(max-width:760px){.main-nav a:not(.nav-cta){justify-self:start}.main-nav .nav-cta{justify-self:stretch}}
@media(prefers-reduced-motion:reduce){.main-nav a:not(.nav-cta)::before{display:none}.main-nav a:not(.nav-cta)::after,.main-nav .nav-cta{animation:none!important;transition:none!important}}

/* Service focus: the chosen direction comes forward while its peers recede. */
.directions{overflow:visible;isolation:isolate}
.direction:first-child{border-radius:14px 0 0 14px}
.direction:last-child{border-radius:0 14px 14px 0}
.direction{transform:translateY(0) scale(1);transform-origin:center;z-index:0;box-shadow:0 0 0 rgba(0,0,0,0),inset 0 0 0 1px rgba(255,255,255,0);transition:background-color .7s cubic-bezier(.16,1,.3,1),color .35s ease,transform .24s cubic-bezier(.16,1,.3,1),box-shadow .24s ease,filter .2s ease,opacity .2s ease}
.directions:has(.direction.is-interacting) .direction:not(.is-interacting){transform:scale(.985);filter:saturate(.62) brightness(.86);opacity:.82}
.direction.is-interacting{transform:translateY(-5px) scale(1.018);z-index:2;box-shadow:0 20px 44px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,255,255,.28)}
@media(max-width:760px){.direction:first-child,.direction:last-child{border-radius:12px}.directions:has(.direction.is-interacting) .direction:not(.is-interacting){transform:none;filter:none;opacity:1}.direction.is-interacting{transform:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}.direction:active{transform:scale(.995)}}
@media(prefers-reduced-motion:reduce){.direction,.directions:has(.direction.is-interacting) .direction:not(.is-interacting),.direction.is-interacting{transform:none!important;transition:none!important}}

/* Brand correction for the hero emphasis. */
.intro h1 span{color:#fe5915}

/* The lower content reads as one path: a short process followed by a compact FAQ ledger. */
#process,
#before-contact {
  --section-accent: #fe5915;
  --section-line: #b9c1b6;
}

#process .kicker,
#before-contact .kicker {
  display: block;
  margin: 0 0 16px;
  color: #a63e08;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#process .section-heading {
  grid-template-columns: .8fr 1.2fr;
  align-items: end;
  margin-bottom: 64px;
}

#process .section-heading > p {
  max-width: 560px;
  font-size: 19px;
}

#process .steps {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

#process .steps::before {
  content: "";
  position: absolute;
  top: 21px;
  right: calc(33.333% - 22px);
  left: 22px;
  height: 2px;
  background: var(--section-line);
  z-index: 0;
}

#process .steps::after {
  content: "";
  position: absolute;
  top: 21px;
  right: calc(33.333% - 22px);
  left: 22px;
  height: 2px;
  background: var(--section-accent);
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .36s cubic-bezier(.16, 1, .3, 1);
}

#process .steps[data-active-step="2"]::after {
  transform: scaleX(.5);
}

#process .steps[data-active-step="3"]::after {
  transform: scaleX(1);
}

#process .step {
  position: relative;
  z-index: 1;
  min-height: 220px;
  padding: 70px 42px 8px 0;
  border: 0;
  margin: 0;
}

#process .step + .step {
  padding-left: 0;
  border-left: 0;
}

#process .step__number {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  margin: 0;
  border: 2px solid var(--section-line);
  border-radius: 50%;
  background: #fff;
  color: #585d57;
  font-size: 13px;
  font-weight: 650;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease;
}

#process .step + .step .step__number {
  left: 0;
}

#process .step.is-reached .step__number {
  border-color: var(--section-accent);
  background: var(--section-accent);
  color: #171b17;
}

#process .step h3,
#process .step p {
  opacity: .9;
  transition: opacity .2s ease;
}

#process .step.is-reached h3,
#process .step.is-reached p {
  opacity: .95;
}

#process .step.is-current h3,
#process .step.is-current p {
  opacity: 1;
}

#process .step.is-current .step__number {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(254, 89, 21, .12);
}

#process .steps:not(.is-enhanced) .step:first-child h3,
#process .steps:not(.is-enhanced) .step:first-child p {
  opacity: 1;
}

#process .steps:not(.is-enhanced) .step:first-child .step__number {
  border-color: var(--section-accent);
  background: var(--section-accent);
  color: #171b17;
}

#process .step h3 {
  max-width: 300px;
  margin-bottom: 16px;
  font-size: 27px;
}

#process .step p {
  max-width: 330px;
}

#before-contact {
  position: relative;
  overflow: clip;
  border-top: 0;
  background: #eef0ea;
}

#before-contact::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: #d2d7cf;
}

#before-contact .container {
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: clamp(64px, 8vw, 120px);
  align-items: start;
}

#before-contact .section-heading {
  position: sticky;
  top: 132px;
  display: block;
  align-self: start;
  margin: 0;
}

#before-contact .section-heading h2 {
  max-width: 470px;
}

#before-contact .section-heading > p {
  max-width: 440px;
  margin-top: 28px;
  font-size: 17px;
  line-height: 1.55;
}

#before-contact .faq-count {
  display: flex;
  max-width: 390px;
  align-items: flex-end;
  gap: 20px;
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid #c8cec5;
}

#before-contact .faq-count strong {
  color: var(--section-accent);
  font-size: 68px;
  font-weight: 520;
  line-height: .82;
  letter-spacing: -.07em;
}

#before-contact .faq-count span {
  color: #666c64;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#before-contact .faq {
  border-top: 0;
}

#before-contact .faq details {
  position: relative;
  margin: 0 -24px;
  padding: 0 24px;
  border-color: var(--section-line);
  transition: background-color .18s ease, box-shadow .18s ease;
}

#before-contact .faq details:first-child {
  border-top: 1px solid #aeb6ab;
}

#before-contact .faq details:hover {
  background: rgba(255, 255, 255, .45);
}

#before-contact .faq details[open] {
  border-radius: 0 0 10px 10px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(40, 46, 39, .07);
}

#before-contact .faq summary {
  position: relative;
  display: grid;
  min-height: 96px;
  grid-template-columns: 52px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 18px;
  padding: 26px 0;
  font-size: 20px;
  font-weight: 520;
  list-style: none;
  transition: color .18s ease;
}

#before-contact .faq summary::-webkit-details-marker {
  display: none;
}

#before-contact .faq summary::after {
  content: "+";
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #899187;
  border-radius: 50%;
  color: #222522;
  font-size: 24px;
  font-weight: 350;
  line-height: 1;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

#before-contact .faq-index {
  align-self: center;
  color: #8a9188;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .08em;
  transition: color .18s ease;
}

#before-contact .faq-question {
  max-width: 560px;
  letter-spacing: -.015em;
}

#before-contact .faq summary:hover,
#before-contact .faq summary:focus-visible,
#before-contact .faq details[open] summary {
  color: #171b17;
}

#before-contact .faq details[open] .faq-index {
  color: var(--section-accent);
}

#before-contact .faq details[open] summary::after {
  content: "−";
  border-color: var(--section-accent);
  background: var(--section-accent);
  color: #171b17;
}

#before-contact .faq details p {
  position: relative;
  display: block;
  max-width: 64ch;
  padding: 0 60px 32px 122px;
  color: #4f554e;
  font-size: 16px;
  line-height: 1.6;
}

#before-contact .faq details p::before {
  content: "";
  position: absolute;
  left: 70px;
  top: 12px;
  width: 28px;
  height: 2px;
  background: var(--section-accent);
}

#before-contact .faq .faq-answer-action::before { display: none; }
#before-contact .faq .faq-answer-action .primary-button {
  max-width: 100%;
  background: var(--section-accent);
  color: #171b17;
}

.footer-reference__cta {
  padding: 10px 10px 10px 22px;
  border: 1px solid var(--concept-orange, #fe5915);
  background: var(--concept-orange, #fe5915);
  color: #171b17;
  font-weight: 650;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.footer-reference__cta-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #171b17;
  color: #fff;
}

.footer-reference__cta:hover,
.footer-reference__cta:focus-visible {
  border-color: #ffa811;
  background: #111410;
  color: #fff;
}

.footer-reference__cta:hover .footer-reference__cta-icon,
.footer-reference__cta:focus-visible .footer-reference__cta-icon {
  background: #fe5915;
  color: #171b17;
}

@media(max-width:760px) {
  #process .section-heading {
    margin-bottom: 38px;
  }

  #process .section-heading > p {
    font-size: 16px;
  }

  #process .steps {
    display: block;
    padding-top: 72px;
  }

  #process .steps::before {
    top: 21px;
    right: 22px;
    bottom: auto;
    left: 22px;
    width: auto;
    height: 2px;
    background: var(--section-line);
  }

  #process .steps::after {
    top: 21px;
    right: 22px;
    bottom: auto;
    left: 22px;
    height: 2px;
    background: var(--section-accent);
  }

  #process .steps[data-active-step="2"]::after {
    transform: scaleX(.5);
  }

  #process .steps[data-active-step="3"]::after {
    transform: scaleX(1);
  }

  #process .step,
  #process .step + .step {
    display: block;
    position: static;
    min-height: 0;
    padding: 0 0 38px;
    border: 0;
  }

  #process .step:last-child {
    padding-bottom: 0;
  }

  #process .step:last-child::after {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 0;
    left: 20px;
    z-index: 0;
    width: 4px;
    background: #fff;
    pointer-events: none;
  }

  #process .step__number,
  #process .step + .step .step__number {
    top: 0;
    left: 0;
  }

  #process .step:nth-child(2) .step__number {
    right: auto;
    left: calc(50% - 22px);
  }

  #process .step:nth-child(3) .step__number {
    right: 0;
    left: auto;
  }

  #process .step h3 {
    margin-bottom: 12px;
    font-size: 23px;
  }

  #before-contact .container {
    display: block;
  }

  #before-contact .section-heading {
    position: static;
    margin-bottom: 42px;
  }

  #before-contact .section-heading > p {
    margin-top: 22px;
    font-size: 16px;
  }

  #before-contact .faq-count {
    max-width: none;
    gap: 16px;
    margin-top: 32px;
    padding-top: 18px;
  }

  #before-contact .faq-count strong {
    font-size: 54px;
  }

  #before-contact .faq {
    margin-top: 0;
  }

  #before-contact .faq details {
    margin: 0 -12px;
    padding: 0 12px;
  }

  #before-contact .faq summary {
    min-height: 82px;
    grid-template-columns: 34px minmax(0, 1fr) 40px;
    gap: 12px;
    padding: 20px 0;
    font-size: 18px;
  }

  #before-contact .faq details p {
    padding: 0 0 26px 82px;
    font-size: 15px;
  }

  #before-contact .faq details p::before {
    left: 46px;
    width: 20px;
  }
}

@media(prefers-reduced-motion:reduce) {
  #process .steps::after,
  #process .step,
  #process .step__number,
  #before-contact .faq summary,
  #before-contact .faq summary::after,
  #before-contact .faq details,
  .footer-reference__cta {
    transition: none !important;
  }
}

/* Switch the process to a vertical rail before the three columns become cramped. */
@media(max-width:900px) {
  #process .steps {
    display: block;
    padding-top: 0;
  }

  #process .steps::before,
  #process .steps::after {
    top: 22px;
    right: auto;
    bottom: 22px;
    left: 21px;
    width: 2px;
    height: auto;
  }

  #process .steps::after {
    transform: scaleY(0);
    transform-origin: center top;
  }

  #process .steps[data-active-step="2"]::after {
    transform: scaleY(.5);
  }

  #process .steps[data-active-step="3"]::after {
    transform: scaleY(1);
  }

  #process .step,
  #process .step + .step {
    position: relative;
    display: grid;
    min-height: 0;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0 20px;
    padding: 0 0 46px;
    border: 0;
  }

  #process .step:last-child {
    padding-bottom: 0;
  }

  #process .step__number,
  #process .step + .step .step__number,
  #process .step:nth-child(2) .step__number,
  #process .step:nth-child(3) .step__number {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    grid-column: 1;
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
  }

  #process .step h3 {
    grid-column: 2;
    max-width: 520px;
    margin: 3px 0 12px;
  }

  #process .step p {
    grid-column: 2;
    max-width: 580px;
  }
}

/* Keep desktop navigation on one line, then switch directly to the menu button. */
@media(min-width:901px) and (max-width:1000px) {
  .site-header { gap: 20px; }
  .brand__logo { width: 140px; height: 46px; }
  .main-nav { gap: 14px; font-size: 14px; }
  .main-nav .nav-cta { padding-right: 16px; padding-left: 16px; }
}

@media(max-width:900px) {
  body.menu-open { overflow: hidden; }
  .opening { margin: 8px; border-radius: 18px; }
  .site-header { position: relative; z-index: 80; width: calc(100% - 40px); min-height: 80px; flex-wrap: wrap; gap: 0; }
  .brand__logo { width: 136px; height: 44px; }
  .mobile-menu-toggle {
    position: relative;
    z-index: 82;
    display: block;
    width: 48px;
    height: 44px;
    border: 1px solid #687066;
    border-radius: 8px;
    background: transparent;
    color: #fff;
  }
  .mobile-menu-toggle::before,
  .mobile-menu-toggle::after,
  .mobile-menu-toggle span {
    content: "";
    position: absolute;
    left: 13px;
    width: 20px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: top .18s ease, transform .18s ease, opacity .18s ease;
  }
  .mobile-menu-toggle::before { top: 14px; }
  .mobile-menu-toggle span { top: 21px; }
  .mobile-menu-toggle::after { top: 28px; }
  .mobile-menu-toggle[aria-expanded="true"]::before { top: 21px; transform: rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] span { opacity: 0; }
  .mobile-menu-toggle[aria-expanded="true"]::after { top: 21px; transform: rotate(-45deg); }
  .main-nav { display: none; width: 100%; padding: 12px 0 24px; }
  .main-nav.is-open { display: grid; gap: 0; }
  .main-nav a { min-height: 44px; }
  .main-nav a:not(.nav-cta) { justify-self: start; }
  .main-nav .nav-cta { justify-self: stretch; margin-top: 8px; text-align: center; }
}

/* Restore the approved full-screen mobile navigation. */
.mobile-nav-title,.mobile-nav-channels,.mobile-nav-icon,.mobile-menu-glyph,.main-nav small{display:none}
@media(max-width:900px) {
  .opening .brand{position:relative;z-index:82}
  .opening .mobile-menu-toggle::before,.opening .mobile-menu-toggle::after,.opening .mobile-menu-toggle>span:not(.mobile-menu-glyph){display:none!important}
  .opening .mobile-menu-toggle .mobile-menu-glyph{position:absolute;inset:0;display:grid!important;width:auto;height:auto;place-items:center;background:none;border-radius:0;opacity:1;transform:none;transition:opacity .18s ease,transform .22s cubic-bezier(.16,1,.3,1)}
  .opening .mobile-menu-toggle .mobile-menu-glyph svg{display:block;width:24px;height:24px;fill:currentColor}
  .opening .mobile-menu-toggle .mobile-menu-glyph--close{opacity:0;transform:scale(.72) rotate(-12deg);pointer-events:none}
  .opening .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-glyph--open{opacity:0;transform:scale(.72) rotate(12deg);pointer-events:none}
  .opening .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-glyph--close{opacity:1;transform:scale(1) rotate(0)}
  .opening .main-nav{position:fixed;inset:0;z-index:78;display:none!important;width:auto;padding:94px 28px 40px;background:rgba(23,28,24,.94);backdrop-filter:blur(18px);overflow:auto;counter-reset:mobile-nav}
  .opening .main-nav.is-open{display:flex!important;flex-direction:column;align-items:stretch;gap:0}
  .opening .mobile-nav-title{display:block;margin:10px 0 18px;color:#fff;font-size:34px;font-weight:560;line-height:1.1;letter-spacing:-.04em}
  .opening .main-nav>a:not(.nav-cta),.opening .main-nav .nav-cta{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;align-content:center;column-gap:18px;min-height:88px;margin:0;padding:12px 0;border:0;border-bottom:1px solid #596159;border-radius:0;background:none;color:#fff;font-size:23px;text-align:left}
  .opening .main-nav a::before,.opening .main-nav a::after{display:none!important}
  .opening .main-nav .mobile-nav-icon{display:grid;width:44px;height:44px;place-items:center;border:1px solid #626a62;border-radius:9px;color:#c9d0c8}
  .opening .main-nav .mobile-nav-icon svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .opening .main-nav .mobile-nav-copy{display:block;min-width:0;white-space:nowrap}
  .opening .main-nav small{display:block;margin-top:5px;color:#b9c1b6;font-size:13px;font-weight:400;white-space:normal}
  .opening .main-nav a[aria-current="page"]{color:#ffb065}
  .opening .main-nav a[aria-current="page"] .mobile-nav-icon{border-color:#ffa811;background:#ffa811;color:#1c211d}
  .opening .main-nav .nav-cta{min-height:68px;margin-top:20px;grid-template-columns:1fr;justify-items:center;padding:11px 64px;border:1px solid #747c73;border-radius:9px;background:#fff;color:#202420;text-align:center}
  .opening .main-nav .nav-cta .mobile-nav-icon{position:absolute;left:12px;top:50%;border-color:#d6dbd4;color:#252a25;transform:translateY(-50%)}
  .opening .main-nav .nav-cta .mobile-nav-copy{text-align:center}
  .opening .main-nav .nav-cta small{color:#626960}
  .opening .mobile-nav-channels{display:block;margin:18px 0 0;text-align:center;color:#c4cbc2;font-size:14px}
}
@media(max-width:359px){.opening .main-nav{padding-right:20px;padding-left:20px}.opening .mobile-nav-title{font-size:30px}}
@media(prefers-reduced-motion:reduce){.opening .mobile-menu-toggle .mobile-menu-glyph{transition:none!important}}

/* Centered messenger shortcuts in the full-screen mobile menu. */
@media(max-width:900px){
  .opening .main-nav .mobile-nav-channels{display:flex!important;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0;text-align:center}
  .opening .main-nav .mobile-nav-channels a{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 0;color:#c4cbc2;font-size:13px;line-height:1;text-decoration:none;white-space:nowrap}
  .opening .main-nav .mobile-nav-channels a::before,.opening .main-nav .mobile-nav-channels a::after{display:none!important;content:none!important}
  .opening .main-nav .mobile-nav-channels svg,.opening .main-nav .mobile-channel-max-icon{display:block;flex:0 0 auto;width:20px;height:20px;color:#e3e8e1}
  .opening .main-nav .mobile-nav-channels svg{fill:currentColor;stroke:none}
  .opening .main-nav .mobile-channel-max-icon{background:currentColor;mask:center/contain no-repeat url('/assets/icons/max-brand-symbol.svg');-webkit-mask:center/contain no-repeat url('/assets/icons/max-brand-symbol.svg')}
  .opening .main-nav .mobile-nav-channels a:hover,.opening .main-nav .mobile-nav-channels a:focus-visible{color:#ffa811}
}

/* Semantic shell split: header stays outside main while the approved dark opening remains continuous. */
.opening--header{margin-bottom:0;border-radius:24px 24px 0 0;overflow:visible}
.opening--hero{margin-top:0;border-radius:0 0 24px 24px}
.steps{list-style:none;margin-left:0;margin-right:0;padding:0}
.step__number{display:block;font-size:16px;font-weight:400;color:#585d57;margin-bottom:22px}
.footer-reference__contact{font-style:normal}
@media(max-width:760px){.opening--header{margin-bottom:0;border-radius:18px 18px 0 0}.opening--hero{margin-top:0;border-radius:0 0 18px 18px}.step__number{grid-row:1/3;margin:2px 0}}

/* Keep the opening on the same white page surface across all routes. */
body,
body.service-design {
  background-color: #fff;
  background-image: none;
  background-repeat: no-repeat;
}

@media(max-width:900px) {
  .opening .main-nav {
    inset: 8px;
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: max(86px, calc(env(safe-area-inset-top) + 78px)) 28px max(24px, env(safe-area-inset-bottom));
    border-radius: 18px;
    overscroll-behavior: contain;
  }

  .opening .main-nav .mobile-nav-copy {
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
  }
}

@media(max-width:359px) {
  .opening .main-nav {
    padding-right: 20px;
    padding-left: 20px;
  }

  .opening .main-nav > a:not(.nav-cta),
  .opening .main-nav .nav-cta {
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 14px;
    font-size: 21px;
  }
}

@media(max-width:900px) and (max-height:720px) {
  .opening .mobile-nav-title {
    margin-bottom: 10px;
    font-size: 30px;
  }

  .opening .main-nav > a:not(.nav-cta) {
    min-height: 76px;
  }

  .opening .main-nav .nav-cta {
    min-height: 62px;
    margin-top: 12px;
  }

  .opening .main-nav .mobile-nav-channels {
    margin-top: 10px;
  }
}