Creative Single Page Site / CSS Grid, Mobile-first, Sass, Vanilla JS

@grace-snow thank you Grace, that would be great :)

OK I've got a few minutes spare so will give you a list of things as I see them. Some are just suggestions, some opinions you can take or leave, some more important. But don't let any of it discourage you as like I said before, this is already excellent! 🎉

• I would remove width 100vw from HTML and body. They are already 100% wide. By setting them to be 100vw you are causing overflow because viewport units don't accommodate for scrollbars. So your width becomes width of my viewport + width of my scroll bar
• company logo is usually wrapped in a link to homepage. Not essential but it's an established convention you might want to follow
• Because you've added <span class="sr-only">Menu</span> that text is being read out by my screenreader in all viewport sizes, even desktop. Instead, if you used an interactive element for your mobile nav toggle <div class="hamburger-menu mobile-only"> like an anchor tag or button, you could have an aria-label on it that gets read out by a screenreader only when the menu toggle is visible. You would also get the added benefit of keyboard interactivity for free with no extra effort 😁
• More of a suggestion - there's no need to duplicate your menu in the HTML. Instead, why not just change the styling of the one menu between mobile and desktop. That used to be a benefit for SEO as it marked sites down for duplicate content, but I honestly don't think that is the case any more. There is a teeny performance boost from less HTML but it's negligible. This is more of a principle not to repeat yourself if you can help it.
• What is it you would expect to happen on click of the schedule a call CTA? I'm not sure why you are using an anchor tag but changing its role to be button. Just use the appropriate element. If it triggers navigation, that's anchor tag, if it performs an action like submits a form or triggers some js, a button is probably right. Changing roles changes the controls for that element, so only ever do that for really good reasons.
• If you want hero__image to be announced by screenreaders, that's actually a good use case to apply a role. You definitely shouldn't be adding spans with sr-only text that says image: .... This is because these will be read out as isolated bits of text with the screenreader focus appearing nowhere near the image. It would be better to add role="img" alt="description of my image here" to the hero__image div. This would make the image appear on the site's image menu for assistive technologies (screenreaders have a selection of menus users open to browse a site, like Headings / Links / Landmarks / Images...)
• Same goes for pretty much every image on this challenge. If it's meaningful and you think it should be described, but it's a background image, change the role and add alt text. Otherwise, if it's less important and doesn't need describing, don't add any sr-only text just let it be a background image. At the moment, the image list on this challenge only lists the logo because of how this is done.
• LOVE the way you've added the counter to details__list list items. That's all, just wanted to say nice work there 👏
• Similar to the above with the carousel buttons - if you want to use buttons, use buttons in the HTML, no need to swap roles
• I've gone on a lot about screenreaders in this feedback, but the most common piece of assistive technology used worldwide are keyboards. At the moment, as a keyboard user I cannot navigate around the page properly because there is a lack of visible focus states. Look into two properties :focus and :focus-visible and see how they could improve keyboard navigation on your site by applying to interactive elements.

Lots of info for you there. I hope it's helpful for you. The most important thing of all with building inclusive solutions is writing quality HTML structure and you have nailed that here on the whole. The rest is just knowledge and experience that builds over time.

If you want to try out screenreaders, they are included on all andoid and apple devices, and there are free ones like NVDA on windows machines.

Keep going and I look forward to seeing what you do next!

@grace-snow Thank you very much. I am very grateful to you. I try to do my best and I will try to rebuild some parts :).