/* =============================================================
   Yug Self Services — brand layer over the Atek template.

   Loaded AFTER assets/css/style.css. Everything here is an override:
   the template is left byte-for-byte as shipped so it can be re-imported,
   and every deviation the brand needs lives in this one file.

   Palette, and why each colour sits where it does:

     #0A2342  logo navy    15.77:1 on white. That is a *text* contrast, not
                           an accent one, and it sits 1.17:1 from the
                           template's own title colour. Used as --title-color
                           and for dark bands, never as the interactive hue.
     #1560BD  interactive  Derived from the navy, lifted to 6.10:1 — a near
                           exact luminance match for the template's original
                           #0B59DB (6.06:1), so the 517 var(--theme-color)
                           rules, their hovers, gradients and opacity steps
                           all keep the contrast they were designed with.
     #FF6A00  logo orange  The single accent. Replaces the template's purple,
                           yellow and teal, which were three competing hues.
                           2.87:1 on white, so it never carries text and
                           never takes white text — orange fills take navy.
   ============================================================= */

/* -------------------------------------------------------------
   Self-hosted typography. The template linked these from
   fonts.googleapis.com — three render-blocking third-party requests
   on every page load, for a site served from shared hosting in
   India. Variable weights, latin subset only: 74 KB for both.
   ------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-variable-latin.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --theme-color:      #1560BD;
  --primary-color:    #1560BD;

  /* The accent. Was #6653E8 (purple). */
  --theme-color2:     #FF6A00;

  /* Was #FFB539 (yellow) and #79F4E4 (teal) — both retired to the accent
     so the page carries two brand colours rather than five. */
  --yellow-color:     #FF6A00;
  --brand-color:      #FF6A00;

  /* Logo navy. Was #0B1422 and #001C49. */
  --title-color:      #0A2342;
  --light-blue-color: #0A2342;
}

/* -------------------------------------------------------------
   Orange never takes white text — 2.87:1, below the 4.5:1 floor.
   Navy on orange is 5.49:1 and passes. Applied to the accent
   button, its hover fill and the accent-background utilities.
   ------------------------------------------------------------- */

.bg-theme2,
.brand-bg,
.background-image.bg-theme2 {
  color: var(--title-color);
}

/* -------------------------------------------------------------
   Placing the accent.

   Atek gives --theme-color2 no role on the pages we use — the whole
   design is blue and navy, so recolouring the token alone left the
   orange half of the logo absent from the site. These four rules put
   it back deliberately: frequent, small, and never carrying text on
   a light ground.
   ------------------------------------------------------------- */

/* 1. Section eyebrows — the label above each section title, and the
      short rule the template draws beside it. */
.sub-title,
.sub-title.style1,
.sub-title.extra-sub {
  color: var(--theme-color2);
}

.sub-title:before,
.sub-title:after,
.sub-title.style1:before,
.sub-title.style1:after {
  background-color: var(--theme-color2);
  color: var(--theme-color2);
}

/* 2. Heading underline — a short accent bar under section titles that
      opt in with .sec-title--rule, so it never appears where the
      template already draws its own decoration. */
.sec-title--rule:after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 18px;
  border-radius: 2px;
  background-color: var(--theme-color2);
}

.text-center .sec-title--rule:after {
  margin-inline: auto;
}

/* 3. Secondary CTA — orange fill, navy text. White on orange is
      2.87:1 and fails; navy on orange is 5.49:1 and passes. */
.th-btn.style-accent {
  background-color: var(--theme-color2);
  color: var(--title-color);
  border-color: var(--theme-color2);
}

.th-btn.style-accent:hover {
  background-color: var(--title-color);
  color: var(--white-color);
  border-color: var(--title-color);
}

/* `.cta-area6 .th-btn:hover` (style.css) flips the sliding fill and text to
   white/navy — right for the vendor's own dark-background CTA design, which
   inverts to a white button on hover, wrong for `.style-accent` two rules up
   and for `.style4` (the phone button, sections/cta.php), which already go
   the other way — navy fill / white text, and blue fill / white text
   respectively. Same three-class specificity as that vendor rule, so which
   one wins is source-order luck; scoped to `.cta-area6` here too, one class
   heavier, so neither button in this band can flash white on hover
   regardless of that coin flip. The phone button has no data yet (see
   `contact_settings.phone`), so this is unverified against a real render
   until a number is entered — it mirrors the accent button's fix exactly. */
.cta-area6 .th-btn.style-accent:hover {
  color: var(--white-color);
}

.cta-area6 .th-btn.style-accent:hover:before {
  background-color: var(--title-color);
}

.cta-area6 .th-btn.style4:hover {
  color: var(--white-color);
}

.cta-area6 .th-btn.style4:hover:before {
  background-color: var(--theme-color);
}

/* 4. Icons and figures — the card icons and the counter numbers.
      Picks up the binary-dot motif in the logo. */
.icon-btn,
.box-number,
.counter-number,
.counter-card .box-number {
  color: var(--theme-color2);
}

/* 5. Interaction — links and cards resolve to the accent on hover,
      so engaging with the page is what reveals the second colour. */
a:hover,
.th-social a:hover,
.footer-links a:hover,
.blog-card .blog-title a:hover,
.service-card .box-title a:hover {
  color: var(--theme-color2);
}

/* -------------------------------------------------------------
   Logo sizing.

   Atek's own mark is 148x46 — a horizontal wordmark at 3.2:1 — and
   the theme constrains it nowhere, relying on the SVG's intrinsic
   size. The Yug logo is a stacked lockup at 1.53:1, so dropped in
   unconstrained it rendered at its natural 480x314 and pushed the
   header to 370px tall.

   The "YUG SELF SERVICES" line sits in the bottom fifth of the
   artwork, so whatever height is set here, that line renders at a
   fifth of it. At Atek's own 46px it would be 9px and unreadable.

   Two sizes, because the two layouts have different room:

   From 1200px the bar is 91px tall and the menu column is what sets
   that — 32.5px of link padding either side of a 26px line box. The
   logo is a passenger until it passes 91px, so there are 31px going
   spare. 80px takes most of them, leaving 5.5px of air above and
   below inside a 91px bar and 6px inside a 92px band. Close to the
   ceiling: 92px would fill the band edge to edge, and anything over
   91px would start setting the bar height itself.

   Below 1200px the desktop menu is gone and the logo itself sets the
   bar height: the row is max(logo 60px, toggle 56px), so anything
   over 60px makes the header taller — and the band is only 80px
   there. So the small layout keeps 60px. Raising it would mean
   trimming `.menu-area`'s 12px padding and the band height to pay
   for it, which is a lot of overriding for a mark that is already
   proportionally larger on a narrow screen.
   ------------------------------------------------------------- */

.header-logo img {
  max-height: 60px;
  width: auto;
}

@media (min-width: 1200px) {
  .header-logo img {
    max-height: 80px;
  }
}

/* Centres the mark in the band — the whole shape, tail included, not
   just its flat part.

   That is a much bigger offset than centring in the flat part, and
   the arithmetic is why. The band starts at the screen edge and runs
   to `band`; centring the logo in it means `band = 2 x logo centre`.
   The flat part must still hold the logo, so `band - 99 >= logo
   right`, which resolves to a left offset of at least 87px before
   the logo touches the curve. 108px is that floor plus 21px of
   margin, and it puts the band at 362px with the logo dead centre.

   It only fits from 1400px up, and the reason is structural: a band
   centred on the logo always extends at least 99px past the logo's
   right edge, since the flat part has to reach the logo. So the menu
   needs 99px-odd of clearance after the logo column. From 1400px
   `me-xxl-auto` gives it 140px (24px gutter + 116px padding). Below
   that the template drops the padding to 40px, leaving 64px — and
   putting the 116px back there widened the middle column enough to
   wrap the menu onto a second line and take the bar to 147px, which
   is the one thing this must not do.

   So 1200-1399 keeps the logo centred in the flat part of the band
   instead, and under 1200 does the same at the smaller logo size. */
.header-logo {
  padding-left: 12px;
}

@media (min-width: 1400px) {
  .header-logo {
    padding-left: 108px;
  }
}

.mobile-logo img {
  max-height: 64px;
  width: auto;
}

/* The footer band has room; the mark can breathe there. */
.th-widget-about .about-logo img {
  max-height: 84px;
  width: auto;
}

/* -------------------------------------------------------------
   Content the CMS has not been filled in with yet.

   Atek assumes every slot has artwork. Where a band would otherwise
   render white-on-white or leave an empty frame, these give it the
   brand instead — so a half-configured site looks unfinished rather
   than broken, which is the same call partials/site/footer.php makes
   about empty menu locations.
   ------------------------------------------------------------- */

.th-hero-bg--fallback {
  background-image: linear-gradient(120deg, var(--title-color) 0%, #123a6b 55%, var(--theme-color) 100%);
}

.product-placeholder,
.case-placeholder,
.blog-placeholder,
.box-img--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background-color: var(--smoke-color);
  color: var(--theme-color);
  font-size: 40px;
}

.category-icon .icon,
.about-item_icon .icon {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.about-item_icon {
  display: inline-flex;
  color: var(--theme-color2);
}

/* The "why choose us" strip's icon square, like .category-icon and
   .about-item_icon above, has no template rule for the bare SVG inside
   it — an unstyled <svg class="icon"> renders at the browser's default
   replaced-element size (300x150), not the 64px box style.css draws
   around it. */
.feature-item_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-color2);
}

.feature-item_icon .icon {
  width: 32px;
  height: 32px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* =============================================================
   Page furniture Atek has no equivalent for.

   Built on the template's own tokens so these inherit the brand.
   Nothing here restyles an Atek class — these are all names the
   theme does not define.
   ============================================================= */

/* -------------------------------------------------------------
   The honeypot. Off-screen rather than `display: none`: some form
   fillers skip fields their CSS says are not displayed, and the
   whole point is that a bot fills it in. Also out of the tab
   order (tabindex="-1" on the input) so nobody reaches it.

   Without this rule it is an ordinary visible text field asking
   people to leave it empty, so it is not optional.
   ------------------------------------------------------------- */

.honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field-error {
  margin: 6px 0 0;
  color: var(--error-color);
  font-size: 14px;
}

.form-group.has-error .form-control {
  border-color: var(--error-color);
}

.form-messages.error {
  color: var(--error-color);
}

.form-messages.success {
  color: var(--success-color);
}

/* -------------------------------------------------------------
   Listing filters. Server-side links, not an Isotope filter —
   see site/portfolio/index.php.
   ------------------------------------------------------------- */

.filter-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border: 1px solid var(--th-border-color);
  border-radius: 999px;
  background-color: var(--white-color);
  color: var(--title-color);
  font-weight: 500;
  line-height: 1.4;
}

.filter-btn:hover {
  border-color: var(--theme-color);
  color: var(--theme-color);
}

.filter-btn.active {
  border-color: var(--theme-color);
  background-color: var(--theme-color);
  color: var(--white-color);
}

.filter-count {
  padding: 1px 8px;
  border-radius: 999px;
  background-color: rgb(0 0 0 / 8%);
  font-size: 13px;
}

.filter-btn.active .filter-count {
  background-color: rgb(255 255 255 / 22%);
}

/* -------------------------------------------------------------
   Numbered steps (a service's "how we work").
   ------------------------------------------------------------- */

.step-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step-item {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--th-border-color2);
}

.step-item:last-child {
  border-bottom: 0;
}

.step-number {
  flex: 0 0 auto;
  font-family: var(--title-font);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--theme-color2);
}

/* -------------------------------------------------------------
   Sidebar fact lists and actions.
   ------------------------------------------------------------- */

.facts-list {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.facts-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--th-border-color2);
}

.facts-list li:last-child {
  border-bottom: 0;
}

.facts-list span {
  color: var(--body-color);
}

.facts-list strong {
  color: var(--title-color);
  text-align: right;
}

.widget-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.widget_subtitle {
  margin-bottom: 14px;
  font-size: 18px;
}

.btn-note {
  margin-inline-start: 6px;
  opacity: .75;
  font-size: 13px;
}

/* -------------------------------------------------------------
   Odds and ends.
   ------------------------------------------------------------- */

.inline-cta {
  padding: 34px;
  border-radius: var(--radius, 10px);
  background-color: var(--smoke-color);
}

.faq-group + .faq-group {
  margin-top: 40px;
}

.page-img img,
.product-logo {
  max-width: 100%;
  height: auto;
}

.product-logo {
  max-height: 54px;
  width: auto;
}

.gallery-caption {
  margin-top: 10px;
  font-size: 15px;
}

/* Portfolio gallery card only — the client's name, not the /gallery page's
   plain photo captions, which share the same base class. */
.gallery-card .gallery-caption {
  font-weight: 600;
  color: var(--title-color);
}

/* Every portfolio tile the same size regardless of what it holds: a real
   photo whose aspect ratio would otherwise stretch the box taller than its
   neighbours, or the no-image placeholder, which has no intrinsic size of
   its own to match against. `.box-img` is reused elsewhere on the site with
   its own sizing, so this is scoped to the gallery card only. */
.gallery-card .box-img {
  aspect-ratio: 1 / 1;
}

.gallery-card .box-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-card .case-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--smoke-color);
  color: var(--theme-color);
  font-size: 40px;
}

.team-contact {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.team-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  background-color: var(--smoke-color);
  color: var(--theme-color);
  font-size: 44px;
}

/* Every team photo the same size, for the same reason as the portfolio
   gallery card above: a portrait-shaped photo would otherwise stretch
   `.team-img`'s circle into an oval taller than its neighbours. Scoped to
   our own card markup, not the bare `.team-img` the vendor CSS reuses
   across several other team layouts this site does not use.
   `max-width` is a fixed size, not the vendor's `calc(100% - space*2)`:
   with fewer team members than `slidesPerView` asks for, Swiper gives the
   one real slide the full row's width instead of a quarter of it (nothing
   to do with the `loop`/`autoplay` settings above — Swiper's normal
   behaviour when there simply aren't enough slides to fill the row), and a
   circle scaled off that width turns into one enormous, near-blank ring. */
.th-team.team-box .team-img {
  aspect-ratio: 1 / 1;
  max-width: 200px;
}

.th-team.team-box .team-img img {
  height: 100%;
  object-fit: cover;
}

.th-team.team-box .team-placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Same fix for the testimonial avatar: the vendor CSS gives it a
   `min-width` but no height and no `max-width`, so a wide-rendered slide
   (few testimonials — see `.team-img`'s note above) or simply a
   large uploaded photo can size the circle off its own unconstrained
   width instead of a sensible fixed diameter. */
.testi-card_avater {
  aspect-ratio: 1 / 1;
  max-width: 90px;
}

.testi-card_avater img {
  height: 100%;
}

/* "By the numbers" — one row, not the vendor's two-per-row zigzag (alternate
   cards pushed down by their own margin-top). `sections/statistics.php`
   no longer sets `col-md-6 col-xl-3`, so this is what sizes the wrap now:
   equal flex shares of the row, one line, no per-card stagger. Below
   tablet width there isn't room for five in a row, so it wraps there. */
.counter-wrap1 .row {
  flex-wrap: nowrap;
  justify-content: center;
  gap: 24px 0;
}

.counter-card-wrap {
  flex: 1 1 0;
  max-width: 190px;
  margin-top: 0 !important;
}

.counter-card {
  width: 170px;
  height: 170px;
  padding: 58px 18px;
  margin: 0 auto;
}

.counter-shape {
  inset: -15px;
}

.counter-card .box-number {
  font-size: 30px;
  line-height: 1.2;
}

.counter-card .counter-title {
  font-size: 14px;
}

@media (max-width: 767px) {
  .counter-wrap1 .row {
    flex-wrap: wrap;
    row-gap: 40px;
  }

  .counter-card-wrap {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .counter-card {
    width: 130px;
    height: 130px;
    padding: 42px 12px;
  }

  .counter-shape {
    inset: -11px;
  }

  .counter-card .box-number {
    font-size: 22px;
  }

  .counter-card .counter-title {
    font-size: 12px;
  }
}

.contact-info-card {
  height: 100%;
  padding: 34px 28px;
  border-radius: var(--radius, 10px);
  background-color: var(--smoke-color);
  text-align: center;
}

.contact-info_icon {
  margin-bottom: 16px;
}

.contact-info_icon img {
  width: 42px;
  height: 42px;
}

.contact-map iframe {
  display: block;
  width: 100%;
  min-height: 420px;
  border: 0;
}

.post-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--th-border-color2);
}

.post-nav_link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 48%;
  color: var(--title-color);
}

.post-nav_link.next {
  margin-inline-start: auto;
  text-align: right;
}

.post-nav_label {
  display: block;
  color: var(--theme-color2);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.post-nav_title {
  display: block;
  font-weight: 600;
}

.empty-state {
  padding: 60px 20px;
}

.empty-state_icon {
  display: block;
  margin-bottom: 18px;
  color: var(--theme-color);
  font-size: 52px;
}

@media (max-width: 575px) {
  .post-nav_link {
    max-width: 100%;
  }
}

/* -------------------------------------------------------------
   Footer "Get In Touch" column. Bootstrap's `.row` stretches every
   footer column to the tallest one (`.footer-widget` in the
   Services menu column, ~277px of content) — so this column only
   needs to fit two phone numbers, two emails and a two-line address
   within that same budget; nothing here can grow the footer itself,
   it can only overflow its own column past what the other three
   already set. Trimmed the vertical rhythm to fit two visible lines
   per row (partials/site/footer.php) instead of one, scoped to this
   column alone via `.footer-contact-widget` so the Company/Services
   menu columns, which share `.widget_title`, and the contact page's
   own info boxes, which share `.info-box_text` but not this class,
   keep the vendor's own spacing.
   ------------------------------------------------------------- */

.footer-contact-widget .widget_title {
  margin-bottom: 18px;
}

.footer-contact-widget .info-box_text:not(:last-child) {
  margin-bottom: 10px;
}

/* =============================================================
   Chrome the template does not provide.

   Atek has no announcement strip, no marketing modal, no skip link
   and no screen-reader utility class — those are ours, and their
   styles went out with the Phase 9 stylesheet. Rebuilt here on the
   template's own tokens so they inherit the brand rather than
   sitting beside it.
   ============================================================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible only once focused, so keyboard users get past the nav. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 10px 18px;
  border-radius: 0 0 6px 6px;
  background-color: var(--theme-color);
  color: var(--white-color);
  transition: top .2s ease;
}

.skip-link:focus {
  top: 0;
  color: var(--white-color);
}

/* -------------------------------------------------------------
   Announcement strip
   ------------------------------------------------------------- */

.announcement {
  background-color: var(--title-color);
  color: var(--white-color);
  font-size: 14px;
}

.announcement__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: var(--main-container);
  margin: 0 auto;
  padding: 10px var(--container-gutters);
}

.announcement__text {
  margin: 0;
}

.announcement__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--theme-color2);
  font-weight: 600;
  white-space: nowrap;
}

.announcement__link:hover {
  color: var(--white-color);
}

.announcement__close {
  margin-inline-start: auto;
  padding: 4px;
  border: 0;
  background: none;
  color: inherit;
  line-height: 0;
  opacity: .7;
}

.announcement__close:hover {
  opacity: 1;
}

/* -------------------------------------------------------------
   Marketing modal. The panel keeps `hidden` working: the browser's
   own [hidden] rule is a user-agent rule, weak enough for any
   author `display` to beat it — the bug fixed in 3a095d3 — so the
   guard is repeated here where the author rules live.
   ------------------------------------------------------------- */

.popup[hidden] {
  display: none;
}

.popup {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.popup__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgb(10 35 66 / 65%);
}

.popup__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--radius, 10px);
  background-color: var(--white-color);
  box-shadow: 0 24px 60px rgb(10 35 66 / 30%);
}

.popup__close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background-color: var(--smoke-color);
  color: var(--title-color);
  line-height: 0;
}

.popup__close:hover {
  background-color: var(--theme-color2);
  color: var(--title-color);
}

.popup__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius, 10px) var(--radius, 10px) 0 0;
}

.popup__body {
  padding: 28px;
}

.popup__title {
  margin-bottom: 12px;
  font-size: 24px;
}

/* Sprite icons still used by our own chrome; Font Awesome sizes itself. */
.announcement .icon,
.popup .icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* -------------------------------------------------------------
   The template ships a demo colour-switcher (.theme-yellow,
   .theme-yellow2, .theme-2) that re-declares --theme-color on a
   body class. None of it is wired up on our side; this is here so
   a stray class in ported markup cannot repaint the brand.
   ------------------------------------------------------------- */

.theme-2,
.theme-yellow,
.theme-yellow2 {
  --theme-color:  #1560BD;
  --theme-color2: #FF6A00;
}

/* -------------------------------------------------------------
   Header — the logo band, and social icons in the top bar.

   1. The band.

   `.header-layout1 .logo-bg` is the blue shape behind the logo. The
   template sizes it as a percentage of the viewport (19% at desktop,
   with a ladder down to 70% on a phone) because Atek's own mark is a
   148x46 horizontal wordmark that fills it. Ours is a stacked lockup
   rendered 92px wide, so at 1600px the band ran to 301px while the
   logo ended at 104px — and `.main-menu`'s 116px padding put the first
   menu link at 244px, i.e. on top of the blue. Measured, not guessed.

   `logo_bg_mask.png` keeps its flat top edge until 73.5% of its width
   and curves away over the last 26.5% (read off the file, since
   `.bg-mask` scales it with `mask-size: 100% 100%`). So a band of
   176px stays flat to ~129px, which clears the 104px logo with room
   to spare and still ends well before the menu.

   Sized in px rather than %, because what it has to fit is a logo of
   a known size, not a fraction of the screen. One value, where the
   template had a ladder of eight: above 1400px `me-xxl-auto` pulls
   the menu column against the logo and the first link lands at
   244px, below it the row falls back to `justify-content: between`
   and the menu centres, further right still. One width clears both.

   Whenever the container is narrower than the screen it centres and
   takes the logo right with it, while the band stays pinned to the
   viewport edge — so the band has to grow by that same inset, hence
   the calc. `--yug-container` mirrors what `.th-container` actually
   resolves to, which is not one number: 1800px from 1300px up,
   Bootstrap's own 1140px between 1200 and 1299, and full width below
   that, where the template sets `max-width: 100%`. The 1200-1299
   band is the one that bites — the inset reaches 72px there.

   The mask is the other half. The template stretches it to
   `100% 100%`, which makes the curve 26.5% of *whatever the band
   is* — so at 2560px the tail grew to 145px and swallowed the logo.
   Pinned to the right at its natural 374px, with a plain fill
   covering everything to its left, the tail is always 99px and the
   flat part absorbs the growth. The two mask layers union because
   `mask-composite` starts at `add`.

   That also takes `data-mask-src` off the element: the shape is
   decoration, and it no longer waits for main.js to draw it.
   ------------------------------------------------------------- */

.header-layout1 {
  /* 24px air + 92px logo + 24px air, plus the fixed 99px tail. The two
     air figures are what centre the mark; keep them equal. */
  --yug-logo-band: 239px;
}

/* The band is measured off the logo, so from 1200px it is twice the
   logo's centre line: 12px container padding + 108px offset + 61px
   (half of a 122px logo, 80px tall at the artwork's 1.529:1) = 181px,
   doubled. The 99px tail then leaves 21px between the logo and the
   start of the curve.

   Exact while the container fills the screen, which is every width up
   to about 1824px. Past that the container centres, and the band —
   anchored to the screen edge — grows by the inset while the logo
   moves right by the whole of it, so the logo drifts right of the
   midpoint. Nothing to be done about that without letting the band
   span half the screen; it already reads as a wide bleed there.

   This lives here rather than beside the `max-height` that causes it,
   because the unconditional 228px below would otherwise win on order. */
/* 1200-1399: the larger logo, still centred in the flat part.
   24px + 122px + 24px + the 99px tail. */
@media (min-width: 1200px) {
  .header-layout1 {
    --yug-logo-band: 269px;
  }
}

/* From 1400px: twice the logo's centre line, so the mark sits in the
   middle of the whole shape. 12px + 108px + 61px = 181px, doubled. */
@media (min-width: 1400px) {
  .header-layout1 {
    --yug-logo-band: 362px;
  }
}

.header-layout1 {
  --yug-container: 1800px;
}

@media (max-width: 1299px) {
  .header-layout1 {
    --yug-container: 1140px;
  }
}

/* Full width here, so the inset term falls to zero on its own. */
@media (max-width: 1199px) {
  .header-layout1 {
    --yug-container: 100%;
  }
}

.header-layout1 .logo-bg {
  width: calc(max(0px, (100% - var(--yug-container)) / 2) + var(--yug-logo-band));

  -webkit-mask-image: linear-gradient(#000, #000), url("../img/logo_bg_mask.png");
          mask-image: linear-gradient(#000, #000), url("../img/logo_bg_mask.png");
  -webkit-mask-size: calc(100% - 374px) 100%, 374px 100%;
          mask-size: calc(100% - 374px) 100%, 374px 100%;
  -webkit-mask-position: left center, right center;
          mask-position: left center, right center;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
}

/* 2. Social icons in the top bar.

   `.th-social a` is `color: var(--white-color)` — correct in the
   footer, which is a dark band, and invisible in the header, which is
   white. The icons were only readable on hover, when the template's
   own rule paints a theme-coloured disc behind them. Scoped to the
   header so the footer keeps the styling it was designed with. */

.header-top .th-social a {
  color: var(--title-color);
  border-color: var(--th-border-color);
}

.header-top .th-social a:hover {
  color: var(--white-color);
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}

/* -------------------------------------------------------------
   Header — white logo panel on a blue menu bar.

   The band was the only blue in a white header, and it was the one
   place the logo could not go: navy on #1560BD is 2.58:1 and the
   logo's orange is 2.13:1. Inverting it puts the logo back on white
   at 15.77:1 and moves the brand colour to the bar, where white
   links read at 6.10:1.

   Chosen over darkening the band and using logo-white.png because
   the CMS stores one logo (`logo_media_id`) and the mobile drawer is
   a white panel — a white-on-dark header would mean a second setting
   or a hardcoded file, and the client's uploaded logo would never
   reach the header.
   ------------------------------------------------------------- */

.header-layout1 .menu-area,
.header-layout1 .sticky-wrapper.sticky {
  background-color: var(--theme-color);
}

/* The template parks the band at `z-index: -1`, which was fine while
   the bar was transparent and hid it the moment the bar took a
   background. Lift the band to 0 and raise the row above it. */
.header-layout1 .logo-bg {
  z-index: 0;
  background-color: var(--white-color);
}

.header-layout1 .menu-area > .th-container {
  position: relative;
  z-index: 1;
}

/* Menu links, including the carets, which inherit their colour.
   Neither hover the template ships works here — its own is the theme
   blue (1.0:1 on the bar) and the brand layer sends links to orange
   (2.13:1). The underline carries the hover instead, so the label
   never leaves 6.10:1. */
.header-layout1 .main-menu > ul > li > a,
.header-layout1 .main-menu > ul > li > a:hover,
.header-layout1 .main-menu > ul > li > a.active {
  color: var(--white-color);
}

.header-layout1 .main-menu > ul > li > a::before {
  background: var(--white-color);
}

.header-layout1 .main-menu ul li.menu-item-has-children > a:hover::after,
.header-layout1 .menu-item.menu-item-type-custom > a::after,
.header-layout1 .menu-item.menu-item-type-custom > a:hover::after {
  color: var(--white-color);
}

/* Sub-menus stay a white panel with dark links — they are off the bar,
   so they keep the contrast the template designed. Named here only to
   record that the rules above are deliberately direct-child selectors. */

/* The mobile toggle is `background-color: var(--theme-color)` with a white
   glyph — a blue button, now on a blue bar, so only the glyph survived.
   White button, navy glyph: 15.77:1, and it still reads as a control.
   Scoped to `.menu-area` so the drawer's own close button, which lives in
   `.th-menu-wrapper` on a white panel, keeps the template's styling. */
.header-layout1 .menu-area .th-menu-toggle {
  background-color: var(--white-color);
  color: var(--title-color);
}

.header-layout1 .menu-area .th-menu-toggle:hover {
  background-color: var(--title-color);
  color: var(--white-color);
}

/* -------------------------------------------------------------
   "Why choose us" strip — the headings.

   `.feature-item` is used by this band alone (sections/why_choose_us.php),
   so this is scoped to it and touches nothing else.

   The template runs these at 24px/600, dropping to 20px under 1300px.
   Against a 16px body line that is a heading doing a label's job: the
   items are short noun phrases — "Experienced team", "On-time
   delivery" — sitting in a 316px column beside a 64px icon, so the
   size was buying width, not emphasis, and a longer entry from the
   CMS would wrap where the shorter ones do not.

   18px/700 is smaller than the template and heavier: it reads as one
   emphatic line and separates from the 16px/400 body text by weight
   rather than by scale. One value at every width, so the band does
   not restyle itself at 1300.

   The size alone was not the problem though. The band is full-bleed
   with `gx-0`, so a column is a quarter of the viewport — but the
   template's own markup is `col-xl-4`, three across, and its
   horizontal padding ladder (140px, then 100px, then 80px, then 40px)
   was measured against that. At `col-xl-3` the same padding leaves
   the text box 152px wide at both 1280px *and* 1600px, and
   "Experienced team" needs 159px, so it broke onto a second line
   across most of the desktop range.

   So the ladder is replaced with one scaled for quarter columns: 20px
   a side up to 1600, 48px above it. That gives the text 172px at
   1200, 192px at 1280, 272px at 1599, 296px at 1920 — clear of 159px
   everywhere, with the widest screens still getting their air back.
   Below 1200 the row falls to `col-lg-6` and the question does not
   arise, so nothing here touches it.
   ------------------------------------------------------------- */

.feature-item .box-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

@media (min-width: 1200px) {
  .feature-item {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 1600px) {
  .feature-item {
    padding-left: 48px;
    padding-right: 48px;
  }
}

/* -------------------------------------------------------------
   About band — the collage.

   `.img-box1 .img1` carries no `global-img`, so the photograph renders at
   its own width and `.img2` / `.img3` keep their overlap. The template can
   assume that, because its `about_1_1.jpg` is a 325x630 asset it shipped.
   Ours comes from the media library, where the client can upload anything,
   so the width is capped rather than trusted — without this a 4000px
   photograph would push the collage across the copy beside it.

   325px is the template's own asset width, so a correctly sized upload is
   unaffected and an oversized one is merely contained.
   ------------------------------------------------------------- */

.img-box1 .img1 img {
  max-width: 325px;
  width: 100%;
  height: auto;
}

/* Alternating homepage band tint — see `site/home.php`'s note on which
   bands are eligible. A plain light fill behind the section's own padding,
   not just its content, so the tint reads as one continuous band rather
   than a box floating inside whitespace. */
.band-tint {
  background-color: var(--smoke-color);
}

/* Back-to-top button.
   1. The vendor CSS was written for a plain `<div>`; Phase 9 changed the
      element to a real `<button>` so it is keyboard-reachable, but never
      reset the browser's native button chrome. Left alone, a `<button>`
      renders its own default border and background — a second, misaligned
      ring sitting outside the theme's own blue one from `:after`.
   2. `.scroll-top:after` never sets a font-weight, so it defaults to 400
      (regular) — and the arrow-up glyph it requests (content: "\f062")
      only exists in the bundled Font Awesome files at weight 900 (solid).
      At 400 the glyph silently fails to render. */
.scroll-top {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
}

.scroll-top:after {
  font-weight: 900;
}