/*
 * Our own overrides. Loaded after main.min.css so it always wins.
 * Nothing here touches the template's own files, which keeps a future
 * SCSS rebuild from silently dropping our changes.
 */

/* ------------------------------------------------------------------ *
 * Brand
 *
 * Values come from the approved brand sheet (brand/accepted/). An earlier
 * set of brand files in brand/ used different colours and a different mark;
 * that set is superseded — see brand/accepted/README.md before changing
 * anything here.
 * ------------------------------------------------------------------ */

@font-face {
   font-family: "Manrope";
   /* One variable file covers weights 200–800: a single request instead of
      nine, self-hosted so no third party sees our visitors. */
   src: url("../fonts/Manrope-Variable.woff2") format("woff2-variations");
   font-weight: 200 800;
   font-style: normal;
   font-display: swap;
}

:root {
   --ws-ink: #0a0a0a;
   --ws-pink: #e91e63;
   --ws-indigo: #3f51b5;
   --ws-grey: #aaaaaa;
   --ws-gradient: linear-gradient(110deg, var(--ws-pink), var(--ws-indigo));

   /* The template calls its font variable --inter and derives everything
      from it, so redefining it here swaps the typeface site-wide. */
   --inter: "Manrope", "Segoe UI", Arial, sans-serif;
   --theme-font: var(--inter);

   --primary-color: var(--ws-pink);
   --secondary-color: var(--ws-indigo);
   --theme-bg: var(--ws-ink);
}

/* Clear keyboard focus and primary actions on the first screen. */
:focus-visible { outline: 2px solid #a6a8ff; outline-offset: 4px; }
.ws-hero-intro { flex: 1; max-width: 560px; }
.ws-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 28px; }
.ws-hero-actions .ws-submit { width: auto; min-width: 230px; }
.ws-hero-brief { font-size: 15px; color: #ededf5; text-decoration: underline; text-underline-offset: 5px; }
.ws-hero-brief:hover { color: #ff77a6; }
.ws-home-page .banner .container { padding-inline: clamp(24px, 5vw, 80px); }
.ws-home-page .banner .banner__content-inner .single p { color: #b7b9c9; }
.ws-home-page .banner-social-text a { color: #b7b9c9; }
.ws-home-page .banner .text-stroke { -webkit-text-stroke-width: 1.2px; }
.mobile-menu .close-mobile-menu { background: transparent; border: 0; color: inherit; }
#about { scroll-margin-top: 110px; }

/* Manrope sits tighter than Inter at display sizes; without this the big
   headings look loose next to the brand sheet. */
.banner h1,
h1, h2 {
   letter-spacing: -0.035em;
}

/* The logo ships at 2x so it stays sharp on retina, and the template has no
   size rule of its own — without this it renders at its full natural width. */
.navbar__logo img,
.logo img {
   width: 280px;
   max-width: 100%;
   height: auto;
}

/* ------------------------------------------------------------------ *
 * Services and portfolio
 *
 * The template styles its own carousels and sliders, but has nothing for a
 * plain grid of cards, which is what a two-service list and a handful of
 * cases actually want.
 * ------------------------------------------------------------------ */

.ws-lede {
   max-width: 46em;
   color: var(--ws-grey);
   font-size: 1.05rem;
}

/* Centred only where the whole block is centred. On a detail page the lede
   sits above left-aligned body copy, and centring it made the text start on
   a ragged edge. */
.ws-lede.text-center,
.section__header .ws-lede {
   margin-inline: auto;
}

.section__header .ws-lede {
   margin-top: 1rem;
}

.ws-cards {
   margin-top: 2.5rem;
}

.ws-card {
   height: 100%;
   padding: 1.75rem;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.02);
   transition: var(--transition);
}

.ws-card:hover {
   border-color: var(--ws-pink);
   transform: translateY(-4px);
}

.ws-card__thumb {
   display: block;
   margin: -0.5rem 0 1.25rem;
   overflow: hidden;
   border-radius: 10px;
}

.ws-card__thumb img {
   width: 100%;
   height: auto;
   aspect-ratio: 16 / 10;
   object-fit: cover;
}

.ws-card h2 {
   margin-bottom: 0.75rem;
}

.ws-card__meta {
   margin-bottom: 0.5rem;
   color: var(--ws-grey);
   font-size: 0.875rem;
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

.ws-card__more {
   display: inline-flex;
   gap: 0.5rem;
   align-items: center;
   margin-top: 0.5rem;
   color: var(--ws-pink);
}

.ws-card__more i {
   transition: var(--transition);
}

.ws-card__more:hover i {
   transform: translateX(4px);
}

/* Case facts: client, year, live URL. A definition list keeps the pairing
   meaningful for screen readers and for anything reading the page later. */
.ws-facts {
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem 2.5rem;
   margin: 2rem 0;
   padding: 1.25rem 0;
   border-block: 1px solid rgba(255, 255, 255, 0.1);
}

.ws-facts dt {
   margin-bottom: 0.25rem;
   color: var(--ws-grey);
   font-size: 0.8125rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.ws-facts dd {
   margin: 0;
   font-weight: 600;
}

.ws-facts a {
   color: var(--ws-pink);
}

.ws-service-cta {
   margin-top: 2.5rem;
}

/* ------------------------------------------------------------------ *
 * Article body
 *
 * The template styles its own demo markup but never a plain run of prose,
 * so lists arrived with no markers and quotes looked like paragraphs.
 * ------------------------------------------------------------------ */

.blog-single__body h2,
.blog-single__body h3 {
   margin-block: 2.5rem 1rem;
}

.blog-single__body p {
   margin-bottom: 1.25rem;
}

.blog-single__body ul,
.blog-single__body ol {
   margin: 0 0 1.5rem 1.25rem;
   padding-left: 1rem;
}

.blog-single__body ul { list-style: disc; }
.blog-single__body ol { list-style: decimal; }

.blog-single__body li {
   margin-bottom: 0.5rem;
   padding-left: 0.25rem;
}

.blog-single__body li::marker {
   color: var(--ws-magenta);
}

.blog-single__body blockquote {
   margin: 2rem 0;
   padding: 0.25rem 0 0.25rem 1.5rem;
   border-left: 3px solid var(--ws-purple);
}

.blog-single__body blockquote p {
   margin-bottom: 0;
   font-size: 1.125em;
}

.blog-single__body a {
   color: var(--ws-magenta);
   text-decoration: underline;
   text-underline-offset: 2px;
}

.blog-single__body img {
   max-width: 100%;
   height: auto;
   margin: 1.5rem 0;
}

.blog-single__body code {
   padding: 0.15em 0.4em;
   border-radius: 3px;
   background: rgba(255, 255, 255, 0.08);
   font-size: 0.9em;
}

.blog-single__body hr {
   margin: 2.5rem 0;
   border: 0;
   border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* ------------------------------------------------------------------ *
 * Contacts
 * ------------------------------------------------------------------ */

/* Click-to-reveal contacts. Before the click this is a control, not a value,
   and it has to look like one or nobody will press it. */
.ws-reveal {
   cursor: pointer;
   text-decoration: underline dotted;
   text-underline-offset: 3px;
   text-decoration-color: var(--ws-pink);
}

.ws-reveal:hover {
   color: var(--ws-pink);
}

.ws-reveal--shown {
   text-decoration: none;
}

/* Language switcher. Five codes in a row overflowed the navbar and wrapped
   the whole options block onto the page, so this is a dropdown: one code in
   the bar, the native names inside. */
.ws-lang {
   position: relative;
   margin-right: 0.75rem;
}

.ws-lang__toggle {
   display: flex;
   gap: 0.35rem;
   align-items: center;
   padding: 0.4rem 0.6rem;
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 8px;
   background: transparent;
   color: var(--white);
   font-family: var(--theme-font);
   font-size: 0.8125rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   line-height: 1;
   cursor: pointer;
   transition: var(--transition);
}

.ws-lang__toggle i {
   font-size: 0.75em;
   transition: var(--transition);
}

.ws-lang__toggle:hover {
   border-color: var(--ws-pink);
}

.ws-lang--open .ws-lang__toggle i {
   transform: rotate(180deg);
}

.ws-lang__list {
   position: absolute;
   z-index: 20;
   top: calc(100% + 0.5rem);
   right: 0;
   min-width: 11rem;
   margin: 0;
   padding: 0.35rem;
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 10px;
   background: #14141c;
   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
   list-style: none;
}

.ws-lang__link {
   display: flex;
   gap: 0.6rem;
   align-items: baseline;
   padding: 0.5rem 0.6rem;
   border-radius: 6px;
   color: var(--white);
   font-size: 0.9375rem;
   white-space: nowrap;
   transition: var(--transition);
}

.ws-lang__link:hover {
   background: rgba(255, 255, 255, 0.08);
}

.ws-lang__code {
   min-width: 1.9em;
   color: var(--ws-grey);
   font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 0.06em;
}

/* A language that only has the section listing, not this page. Dimmer, so
   the difference is visible before the click rather than after it. */
.ws-lang__link--approx {
   opacity: 0.5;
}

.ws-lang__link--approx:hover {
   opacity: 1;
}

/* Contacts page. The values are click-to-reveal, so they need to look like
   something you press, at a size that suits a page rather than a footer. */
.ws-contacts {
   margin: 2.5rem auto;
   text-align: center;
}

.ws-contacts__row {
   margin-bottom: 1rem;
   font-size: 1.375rem;
}

.ws-contacts__row i {
   margin-right: 0.5rem;
   color: var(--ws-pink);
}

.ws-contacts__social {
   margin-top: 3rem;
   text-align: center;
}

.ws-contacts__social h2 {
   margin-bottom: 1.25rem;
   color: var(--ws-grey);
   font-size: 0.875rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

/* The template's .social is built for the footer and collapses when centred
   on its own, so the contacts page gets its own row. */
.ws-contacts__links {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
   justify-content: center;
}

.ws-contacts__links a {
   display: inline-flex;
   gap: 0.5rem;
   align-items: center;
   padding: 0.6rem 1.1rem;
   border: 1px solid rgba(255, 255, 255, 0.16);
   border-radius: 999px;
   color: var(--white);
   font-size: 0.9375rem;
   transition: var(--transition);
}

.ws-contacts__links a:hover {
   border-color: var(--ws-pink);
   color: var(--ws-pink);
}

/* Price is a field, not a sentence — it should read like one. */
.ws-price {
   margin-top: 1rem;
   color: var(--ws-pink);
   font-size: 1.25rem;
   font-weight: 700;
}

.ws-price--card {
   margin: 0.5rem 0 0;
   font-size: 1.0625rem;
}

/* "We also do": a mention, not an offer. Deliberately quieter than the
   service cards — thin pages for each of these would cost more in search
   than they earn. */
.ws-also {
   margin-top: 4rem;
   padding: 2rem;
   border: 1px dashed rgba(255, 255, 255, 0.16);
   border-radius: 14px;
   text-align: center;
}

.ws-also h2 {
   margin-bottom: 1.25rem;
   color: var(--ws-grey);
   font-size: 0.875rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

.ws-also ul {
   display: flex;
   flex-wrap: wrap;
   gap: 0.6rem;
   justify-content: center;
   margin: 0 0 1.5rem;
   padding: 0;
   list-style: none;
}

.ws-also li {
   padding: 0.5rem 1rem;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.05);
   font-size: 0.9375rem;
}

.ws-also p {
   max-width: 34em;
   margin: 0 auto 1.5rem;
   color: var(--ws-grey);
}

/* ------------------------------------------------------------------ *
 * Icon glyphs the template lost
 *
 * main.min.css carries `content: "?"` in twelve places where a Font Awesome
 * glyph belongs — the escape sequences were mangled somewhere before the file
 * reached us, the same way a literal backtick-n ended up in the SCSS. That is
 * why question marks appear in the menu, the breadcrumb and the accordions.
 *
 * Fixed here rather than in the template file, so a rebuild cannot undo it.
 * ------------------------------------------------------------------ */

.breadcrumb .breadcrumb-item::before {
   font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome";
   content: "\f105";           /* angle-right */
}

/* The first crumb has nothing to separate it from. */
.breadcrumb .breadcrumb-item:first-child::before {
   content: none;
}

.breadcrumb .breadcrumb-item:first-child {
   padding-left: 0;
}

.primary-navbar .navbar__dropdown-label::after,
.mobile-menu .navbar__item-active::after,
.offcanvas-nav .offcanvas-menu .navbar__item-active::after {
   font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome";
   content: "\f107";           /* angle-down */
}

.progress-wrap span::after,
.progress-wrap span::before {
   font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome";
   content: "\f106";           /* angle-up */
}

.banner-two .banner-two__content .arrow::after,
.banner-three .banner-three__content .arrow::after,
.banner-four .arrow::after {
   font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome";
   content: "\f061";           /* arrow-right */
}

.service-f .service-f-single-active .toggle-service-f::before,
.ux-process .service-f-single-active .toggle-service-f::before,
.accordion .accordion-item .accordion-button:not(.collapsed)::after {
   font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome";
   content: "\f068";           /* minus */
}

/* ------------------------------------------------------------------ *
 * Inner-page banner
 * ------------------------------------------------------------------ */

/* Keep the template's .cmn-banner spacing: it accounts for the fixed header. */
.ws-hero {
   position: relative;
   overflow: hidden;
}

.ws-hero .title {
   max-width: 18em;
   margin-bottom: 1rem;
   /* Article titles run to 95 characters in German; without a ceiling they
      fill three lines at display size and swamp the page. */
   font-size: clamp(2rem, 4.4vw, 4.25rem);
   line-height: 1.05;
}

.ws-hero__meta {
   margin-bottom: 1rem;
   color: var(--ws-grey);
   font-size: 0.9375rem;
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

.ws-hero .star {
   position: absolute;
   top: 34%;
   left: 2.5%;
   width: 44px;
   opacity: 0.7;
   pointer-events: none;
}

@media (max-width: 991px) {
   .ws-hero {
      text-align: center;
   }

   .ws-hero .star {
      display: none;
   }
}

/* The section that follows the banner does not need the template's full
   top padding as well — together they left a screen-high empty gap. */
.ws-hero + section.section,
.ws-hero + main section.section {
   padding-top: 4rem;
}

/* The last crumb repeats the page title, which on a long article stretched
   the pill across the screen. It is a location marker, not a heading. */
.breadcrumb .breadcrumb-item.active {
   display: inline-block;
   max-width: 28ch;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   vertical-align: bottom;
}

/* Price sits between the lede and the copy; it needs air on both sides. */
.ws-price {
   margin-block: 1.25rem 2rem;
}

/* ------------------------------------------------------------------ *
 * Home page blocks
 * ------------------------------------------------------------------ */

/* Facts instead of the template's skill bars: an unverifiable percentage
   says less than a number that is true. */
.ws-facts-grid {
   display: grid;
   gap: 1.25rem;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   margin: 0;
   padding: 0;
   list-style: none;
}

.ws-facts-grid li {
   padding: 1.75rem 1.5rem;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.02);
}

.ws-facts-grid strong {
   display: block;
   margin-bottom: 0.35rem;
   background: var(--ws-gradient);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   font-size: clamp(2.25rem, 4vw, 3.25rem);
   font-weight: 800;
   line-height: 1;
}

.ws-facts-grid span {
   color: var(--ws-grey);
   font-size: 0.9375rem;
}

.ws-home-cta {
   text-align: center;
}

.ws-home-cta .ws-lede {
   margin-block: 1.25rem 2rem;
}

/* Article images come in every proportion. One frame for all of them keeps
   the titles level, and the date sits at the bottom of the card. */
.ws-home-page .blog .gaper > [class*="col-"] {
   display: flex;
}

.ws-home-page .blog .blog__single {
   display: flex;
   flex-direction: column;
   width: 100%;
}

.ws-home-page .blog .blog__single-thumb a img {
   min-height: 0;
   aspect-ratio: 16 / 9;
   object-fit: cover;
}

.ws-home-page .blog .blog__single-content {
   display: flex;
   flex: 1;
   flex-direction: column;
}

.ws-home-page .blog .blog__single-meta {
   margin-top: auto;
   padding-top: 30px;
}

.ws-home-page .blog .gaper + .row {
   margin-top: 3.5rem;
}

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */

.footer-two__nav h2 {
   margin-bottom: 1.25rem;
   color: var(--ws-grey);
   font-size: 0.875rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

.footer-two__nav ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

.footer-two__nav li + li {
   margin-top: 0.65rem;
}

.footer-two__nav a {
   color: var(--white);
   transition: var(--transition);
}

.footer-two__nav li a:hover {
   color: var(--ws-pink);
}

.footer-two__nav .social {
   margin-bottom: 1.5rem;
}

.footer__copyright a {
   color: var(--ws-grey);
}

.footer__copyright a:hover {
   color: var(--ws-pink);
}

/* ------------------------------------------------------------------ *
 * Typography corrections for non-English text
 *
 * The template capitalises every word in headings — normal English title
 * case, and wrong in every other language we publish. In Ukrainian, Polish,
 * German and Russian only the first word and proper nouns take a capital,
 * so "Робимо Інтернет-магазини, Які Приносять Замовлення" reads as a mistake.
 *
 * Left as-is for English, where the template's intent is correct.
 * ------------------------------------------------------------------ */

:lang(uk) .section__header .title,
:lang(uk) .section__content .title,
:lang(uk) .banner__content h1,
:lang(pl) .section__header .title,
:lang(pl) .section__content .title,
:lang(pl) .banner__content h1,
:lang(de) .section__header .title,
:lang(de) .section__content .title,
:lang(de) .banner__content h1,
:lang(ru) .section__header .title,
:lang(ru) .section__content .title,
:lang(ru) .banner__content h1,
:lang(uk) .offer__cta-single h2 a,
:lang(pl) .offer__cta-single h2 a,
:lang(de) .offer__cta-single h2 a,
:lang(ru) .offer__cta-single h2 a,
:lang(uk) .blog__single-content h3 a,
:lang(pl) .blog__single-content h3 a,
:lang(de) .blog__single-content h3 a,
:lang(ru) .blog__single-content h3 a,
:lang(uk) .footer-two__nav a,
:lang(pl) .footer-two__nav a,
:lang(de) .footer-two__nav a,
:lang(ru) .footer-two__nav a,
:lang(uk) .banner .banner__content-inner .single p,
:lang(pl) .banner .banner__content-inner .single p,
:lang(de) .banner .banner__content-inner .single p,
:lang(ru) .banner .banner__content-inner .single p,
:lang(uk) .ws-card h2 a, :lang(uk) .ws-card h3 a,
:lang(pl) .ws-card h2 a, :lang(pl) .ws-card h3 a,
:lang(de) .ws-card h2 a, :lang(de) .ws-card h3 a,
:lang(ru) .ws-card h2 a, :lang(ru) .ws-card h3 a {
   text-transform: none;
}

/* ------------------------------------------------------------------ *
 * Small screens
 *
 * The logo is 300px wide by design, which on a 390px phone leaves nothing
 * for the language switcher and the menu button and pushes the bar onto
 * three rows.
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
   .navbar__logo img,
   .logo img {
      width: 180px;
   }

   .ws-facts-grid {
      grid-template-columns: 1fr;
   }

   .ws-hero .title {
      font-size: clamp(1.75rem, 8vw, 2.5rem);
   }

   .ws-contacts__row {
      font-size: 1.125rem;
   }

   .blog-single__body h2 {
      font-size: 1.6rem;
   }

   .blog-single__body h3 {
      font-size: 1.3rem;
   }
}

@media (max-width: 575px) {
   .ws-home-page .banner { padding: 128px 0 60px; }
   .ws-home-page .banner .container { padding-inline: 18px; }
   .ws-home-page .banner h1 { font-size: clamp(34px, 10.5vw, 46px); line-height: 1.13; letter-spacing: -.035em; }
   .ws-home-page .banner .text-stroke { display: block; -webkit-text-stroke: 1.2px #f074a5; animation: none; }
   .ws-home-page .banner .interval { margin-left: 0; display: block; }
   .ws-home-page .banner .interval i { display: none; }
   .ws-home-page .banner .banner__content-inner .cta { flex-direction: row; gap: 20px 32px; margin-top: 34px; }
   .ws-home-page .banner .video-frame { display: none; }
   .ws-home-page .banner .star { top: 94px; right: 26px; left: auto; width: 32px; }
   .ws-hero-actions { gap: 20px; }
   .navbar__logo img,
   .logo img {
      width: 150px;
   }

   .ws-card {
      padding: 1.25rem;
   }

   .ws-also {
      padding: 1.5rem 1rem;
   }
}