/* Concept 04 polish · supporting sketches, clearer actions and a drawn route. */

/* The sketch is a small companion to the service title, not its replacement. */
.svc{position:relative}
.svc::before{display:none}
.service-sketch{position:absolute;top:24px;right:27px;width:148px;height:107px;pointer-events:none}
.service-sketch svg{display:block;width:100%;height:100%;overflow:visible}
.svc .svc__tag{min-height:43px;margin:0 150px 43px 0;max-width:300px}
.svc__actions{gap:17px 23px;align-items:center;padding-top:8px}
.svc__actions .link-arrow:not(.link-arrow--muted){display:inline-flex;align-items:center;justify-content:center;align-self:auto;width:fit-content;max-width:100%;min-height:49px;padding:13px 17px;border:1px solid var(--violet);border-radius:12px;background:var(--violet);color:#fff;text-decoration:none;font-size:13px;font-weight:500;line-height:1.5;text-align:center;transition:background .2s ease,transform .2s ease}
.svc__actions .link-arrow:not(.link-arrow--muted):hover{background:#643cc4;border-color:#643cc4;opacity:1;transform:translateY(-2px)}
.svc__actions .link-arrow--muted{align-self:auto;color:#71677e;border:0;border-bottom:1px solid #cbbfd8;padding:3px 0;font-size:13px;font-weight:400;line-height:1.5}
.svc__actions .link-arrow--muted:hover{color:var(--ink);opacity:1;border-color:#9c85b6}

/* One document illustration, followed by three concise horizontal rows. */
.documents-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,95px);align-items:center}
.documents-visual{min-width:0;width:min(100%,420px);justify-self:center;align-self:center;pointer-events:none}
.documents-visual svg{display:block;width:100%;height:auto;overflow:visible}
#documents .documents-checklist{display:grid;grid-template-columns:minmax(0,1fr);gap:0;min-width:0;border-top:1px solid #e8e1ed}
#documents .documents-checklist .card,#documents .documents-checklist .card:last-child{display:grid;grid-template-columns:46px minmax(0,1fr);gap:0 22px;min-width:0;padding:29px 0;border:0;border-bottom:1px solid #e8e1ed;border-radius:0;background:transparent}
#documents .documents-checklist .card__num{grid-column:1;grid-row:1 / 3;display:grid;place-items:center;width:42px;height:42px;margin:0;background:#f7f2fd;border:1px solid #e3d5f3;border-radius:50%;color:#8860b5;font-size:13px;transform:none}
#documents .documents-checklist .card:nth-child(2) .card__num{background:#fff7ee;color:#a57b55;border-color:#edddc9}
#documents .documents-checklist .card:nth-child(3) .card__num{background:#f3f8fa;color:#638390;border-color:#d5e5e9}
#documents .documents-checklist .card h3{grid-column:2;font-size:clamp(23px,2vw,29px);font-weight:600;line-height:1.2;letter-spacing:-.035em;margin:0 0 12px}
#documents .documents-checklist .card p{grid-column:2;font-size:15px;line-height:1.75;margin:0;overflow-wrap:anywhere}

/* Order follows the connected route, while DOM and reading order stay 1–6. */
#scope .steps.journey{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:58px 27px;padding:0;border:0;background:transparent}
#scope .journey .route-line{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none}
#scope .journey .route-path{fill:none;stroke:#b99be0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#scope .journey .step{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;margin:0;padding:27px 28px 30px;border:1px solid #e9e1f0;border-radius:25px;background:#fff}
#scope .journey .step:nth-of-type(2n){background:#fffdfb;border-color:#eee5dc}
#scope .journey .step:nth-of-type(1){grid-column:1;grid-row:1}
#scope .journey .step:nth-of-type(2){grid-column:2;grid-row:1}
#scope .journey .step:nth-of-type(3){grid-column:3;grid-row:1}
#scope .journey .step:nth-of-type(4){grid-column:3;grid-row:2}
#scope .journey .step:nth-of-type(5){grid-column:2;grid-row:2}
#scope .journey .step:nth-of-type(6){grid-column:1;grid-row:2}
#scope .journey .step__num{display:grid;place-items:center;align-self:flex-start;position:relative;width:53px;height:51px;flex:none;margin:0 0 27px;padding:0;background:#fff;border:2px solid #c4a7e5;border-radius:47% 51% 45% 52%/51% 45% 54% 48%;color:#8b63b8;font-size:18px;font-weight:500;line-height:1;letter-spacing:-.035em}
#scope .journey .step:nth-of-type(2n) .step__num{border-color:#dbc1a4;color:#a9835c;background:#fffdfb}
#scope .journey .step h3{font-size:clamp(23px,2vw,28px);line-height:1.18;margin:0 0 16px}
#scope .journey .step p{font-size:15px;line-height:1.75;margin:0}

/* A small supportive sketch sits beside the consultation checklist. */
.consultation-sketch{float:right;width:170px;height:123px;max-width:42%;margin:22px 0 10px 22px;pointer-events:none}
.consultation-sketch svg{display:block;width:100%;height:100%;overflow:visible}
.consultation__intro:has(>.consultation-sketch) ul{display:block;min-height:127px}
.consultation__intro:has(>.consultation-sketch) li{margin-bottom:14px}
.consultation__intro:has(>.consultation-sketch) li:last-child{margin-bottom:0}
.consultation__intro:has(>.consultation-sketch)>a{clear:both}

/* Contacts now form one compact closing strip below the main form. */
#contacts:has(.contacts--compact){border-top:0}
#contacts:has(.contacts--compact) .sec__pad{padding-block:clamp(43px,4.5vw,68px)}
#contacts .contacts--compact{display:block}
#contacts .contacts--compact>div:first-child{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:10px clamp(35px,8vw,125px);align-items:start}
#contacts .contacts--compact>div:first-child>.eyebrow{grid-column:1;grid-row:1;font-size:11px;margin:0}
#contacts .contacts--compact h2{grid-column:1;grid-row:2;color:var(--ink);font-size:clamp(27px,2.4vw,35px);font-weight:600;line-height:1.15;letter-spacing:-.04em;margin:0;max-width:520px}
#contacts .contacts--compact .contacts__lead{grid-column:2;grid-row:1 / 3;align-self:center;font-size:15px;line-height:1.75;max-width:720px;margin:0}
#contacts .contacts--compact .contact-form-link{grid-column:1;grid-row:3;justify-self:start;align-self:center;width:fit-content;max-width:100%;min-height:42px;margin:17px 0 0;padding:10px 15px;border:1px solid #d8c8ec;border-radius:10px;background:#fff;color:#7d53b1;font-size:12px;gap:14px;box-shadow:none}
#contacts .contacts--compact .contact-form-link:after{font-size:18px}
#contacts .contacts--compact .contact-form-link:hover{background:#faf6fe;transform:none}
#contacts .contacts--compact .tags{grid-column:2;grid-row:3;align-self:center;margin:17px 0 0;gap:7px}
#contacts .contacts--compact .tag--lg{font-size:11px;line-height:1.5;padding:6px 10px;background:#faf8fc;color:#82748f}
#contacts .contacts--compact>.contact-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;min-width:0;margin-top:39px;padding:29px 0 0;border-top:1px solid #e9e2f0}
#contacts .contacts--compact>.contact-list .ci{display:flex;flex-direction:column;min-width:0;padding:0 23px;border:0;border-left:1px solid #e9e2f0;gap:10px}
#contacts .contacts--compact>.contact-list .ci:first-child{padding-left:0;border-left:0}
#contacts .contacts--compact>.contact-list .ci:last-child{padding-right:0}
#contacts .contacts--compact .ci__label{font-size:11px;line-height:1.4;color:#8b7f95;letter-spacing:.015em}
#contacts .contacts--compact .ci__value{font-size:clamp(20px,1.75vw,27px);line-height:1.35;letter-spacing:-.03em;font-weight:500;overflow-wrap:anywhere}
#contacts .contacts--compact .ci__note{font-size:12px;line-height:1.75;color:#82798b;overflow-wrap:anywhere}

@media(max-width:1100px){
 .service-sketch{top:21px;right:24px;width:131px;height:95px}.svc .svc__tag{margin-right:127px;min-height:38px;margin-bottom:38px}
 .svc__actions{align-items:flex-start;gap:16px}.svc__actions .link-arrow:not(.link-arrow--muted){font-size:12px;padding:12px 14px;min-height:46px}
 .documents-layout{gap:35px;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
 #documents .documents-checklist .card,#documents .documents-checklist .card:last-child{gap:0 19px;padding-block:26px}
 #documents .documents-checklist .card h3{font-size:25px}
 #scope .steps.journey{gap:52px 22px}#scope .journey .step{padding:25px 24px 28px}#scope .journey .step h3{font-size:25px}
 .consultation-sketch{width:145px;height:105px;margin-left:16px;max-width:40%}
 #contacts .contacts--compact>div:first-child{gap:10px 55px}
 #contacts .contacts--compact>.contact-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:27px 34px;padding-top:28px}
 #contacts .contacts--compact>.contact-list .ci,#contacts .contacts--compact>.contact-list .ci:first-child,#contacts .contacts--compact>.contact-list .ci:last-child{padding:0;border:0}
 #contacts .contacts--compact .ci__value{font-size:26px}
}
@media(max-width:850px){
 .service-sketch{top:24px;right:20px;width:116px;height:84px}.svc .svc__tag{margin-right:113px;min-height:48px;margin-bottom:32px;max-width:none}
 .svc__actions .link-arrow:not(.link-arrow--muted){width:100%;font-size:12px}
 .documents-layout{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:25px}
 #documents .documents-checklist .card,#documents .documents-checklist .card:last-child{grid-template-columns:38px minmax(0,1fr);gap:0 16px;padding-block:24px}
 #documents .documents-checklist .card__num{width:36px;height:36px;font-size:12px}
 #documents .documents-checklist .card h3{font-size:23px;margin-bottom:11px}#documents .documents-checklist .card p{font-size:14px}
 #scope .steps.journey{grid-template-columns:repeat(2,minmax(0,1fr));gap:47px 23px}
 #scope .journey .step:nth-of-type(1){grid-column:1;grid-row:1}
 #scope .journey .step:nth-of-type(2){grid-column:2;grid-row:1}
 #scope .journey .step:nth-of-type(3){grid-column:2;grid-row:2}
 #scope .journey .step:nth-of-type(4){grid-column:1;grid-row:2}
 #scope .journey .step:nth-of-type(5){grid-column:1;grid-row:3}
 #scope .journey .step:nth-of-type(6){grid-column:2;grid-row:3}
 #scope .journey .step h3{font-size:25px}#scope .journey .step p{font-size:15px}
 .consultation-sketch{float:none;width:145px;height:105px;max-width:100%;margin:23px 0 0}
 .consultation__intro:has(>.consultation-sketch) ul{display:grid;min-height:0;margin-top:16px}
 .consultation__intro:has(>.consultation-sketch) li{margin:0}
 #contacts .contacts--compact>div:first-child{gap:10px 34px}
 #contacts .contacts--compact h2{font-size:28px}#contacts .contacts--compact .contacts__lead{font-size:14px}
 #contacts .contacts--compact>.contact-list{margin-top:32px}
}
@media(max-width:620px){
 .service-sketch{top:24px;right:24px;width:137px;height:99px}.svc .svc__tag{margin-right:137px;min-height:42px;margin-bottom:47px;max-width:200px}
 .svc__actions{gap:19px}.svc__actions .link-arrow:not(.link-arrow--muted){width:fit-content;max-width:100%;min-height:49px;font-size:13px;padding:13px 16px}.svc__actions .link-arrow--muted{font-size:13px}
 .documents-layout{grid-template-columns:minmax(0,1fr);gap:13px}
 .documents-visual{width:min(100%,260px)}
 #documents .documents-checklist .card,#documents .documents-checklist .card:last-child{grid-template-columns:38px minmax(0,1fr);gap:0 17px;padding-block:25px}
 #documents .documents-checklist .card__num{width:36px;height:36px;margin-top:2px}
 #documents .documents-checklist .card h3{font-size:25px;line-height:1.18;margin-bottom:13px}
 #documents .documents-checklist .card p{font-size:15px;line-height:1.75}
 #scope .steps.journey{grid-template-columns:minmax(0,1fr);gap:30px;padding:0}
 #scope .journey .step:nth-of-type(n){grid-column:1;grid-row:auto;padding:26px 25px 29px}
 #scope .journey .step__num{width:49px;height:48px;font-size:17px;margin-bottom:24px}
 #scope .journey .step h3{font-size:26px}#scope .journey .step p{font-size:16px;line-height:1.7}
 .consultation-sketch{width:150px;height:109px;margin-top:22px}
 #contacts:has(.contacts--compact) .sec__pad{padding-block:44px 48px}
 #contacts .contacts--compact>div:first-child{display:block}
 #contacts .contacts--compact>div:first-child>.eyebrow{font-size:11px;margin-bottom:16px}
 #contacts .contacts--compact h2{font-size:29px;line-height:1.15;max-width:480px;margin:0}
 #contacts .contacts--compact .contacts__lead{font-size:15px;line-height:1.75;margin-top:19px}
 #contacts .contacts--compact .contact-form-link{font-size:12px;min-height:44px;padding:11px 15px;margin-top:21px}
 #contacts .contacts--compact .tags{margin-top:21px;gap:7px}
 #contacts .contacts--compact>.contact-list{grid-template-columns:minmax(0,1fr);gap:0;margin-top:29px;padding:0;border-top:0}
 #contacts .contacts--compact>.contact-list .ci,#contacts .contacts--compact>.contact-list .ci:first-child,#contacts .contacts--compact>.contact-list .ci:last-child{padding:23px 0;border:0;border-top:1px solid #e9e2f0;gap:9px}
 #contacts .contacts--compact>.contact-list .ci:last-child{padding-bottom:0}
 #contacts .contacts--compact .ci__value{font-size:27px}.ci__note{max-width:520px}
}
@media(max-width:360px){
 .service-sketch{right:21px;top:25px;width:116px;height:84px}.svc .svc__tag{margin-right:111px;min-height:40px;margin-bottom:43px}
 .svc__actions .link-arrow:not(.link-arrow--muted){width:100%;font-size:12px;padding-inline:12px}
 .documents-visual{width:225px}#documents .documents-checklist .card,#documents .documents-checklist .card:last-child{grid-template-columns:32px minmax(0,1fr);gap:0 13px}
 #documents .documents-checklist .card__num{width:31px;height:31px;font-size:11px}#documents .documents-checklist .card h3{font-size:23px}
 #scope .journey .step:nth-of-type(n){padding:25px 22px 27px}#scope .journey .step h3{font-size:24px}
 #contacts .contacts--compact h2{font-size:27px}#contacts .contacts--compact .ci__value{font-size:25px}
}
@media(prefers-reduced-motion:reduce){
 .svc__actions .link-arrow:not(.link-arrow--muted){transition:none}
 .svc__actions .link-arrow:not(.link-arrow--muted):hover{transform:none}
}
