/* CONTRACTOR S.A. | Shared header + fullscreen white menu.
   Load AFTER styles.css. All menu design lives here. */
:root { --yellow: #edbc00; }
html { scroll-padding-top: 140px; }



/* SCROLL PROGRESS INDICATOR */

.top-line {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;

  background: #edbc00;

  z-index: 85;
  pointer-events: none;

  transform: scaleX(0);
  transform-origin: left center;

  transition: transform 0.12s linear;
}

@media (prefers-reduced-motion: reduce) {
  .top-line {
    transition: none;
  }
}



.site-header {position:fixed;inset:0 0 auto;z-index:80;width:100%;color:#f2f2f2;pointer-events:none;background:rgba(23,23,23,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);box-shadow:none;transition:background-color .48s ease,-webkit-backdrop-filter .48s ease,backdrop-filter .48s ease,box-shadow .48s ease}
/* More transparent than previous .88: the page remains visible behind the header. */
.site-header.scrolled {background:rgba(24,24,24,.52);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 7px 22px rgba(0,0,0,.10)}
.site-header a,.site-header button,.site-header .language-switch {pointer-events:auto}
.site-header svg {display:block}
.top-contacts {height:36px;display:flex;align-items:center;justify-content:center;gap:24px;font-size:12px;color:#dedede;letter-spacing:.01em}
.top-contacts a {display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.top-contacts a:hover {color:var(--yellow)}
.top-contacts svg {height:13px;width:13px;stroke:currentColor;stroke-width:1.7;fill:none}
.header-main {display:flex;align-items:flex-start;justify-content:space-between;padding:12px 24px 0}
.brand {display:inline-flex;align-items:center;gap:8px;line-height:1;white-space:nowrap}
.brand-symbol {position:relative;display:block;flex:0 0 63px;width:63px;height:64px;background:#fff}
.brand-symbol::after {content:"";position:absolute;bottom:0;right:0;width:34px;height:22px;background:#202020}
.brand-symbol::before {content:"";position:absolute;z-index:1;top:30px;right:0;width:26px;height:4px;background:#202020}
.brand-words {display:flex;flex-direction:column;gap:3px;padding-top:18px}
.brand-name {font-family:'Arial Narrow',Arial,sans-serif;font-size:21px;letter-spacing:-.65px;color:#f6f6f6;font-weight:300}
.brand-subtitle {font-size:7px;letter-spacing:.65px;color:#d5d5d5}
.header-actions {display:flex;align-items:flex-start;gap:12px}
.language-switch {position:relative;margin-top:4px}
.language-button {height:57px;display:flex;align-items:center;gap:9px;padding:0 15px;color:#fff;background:rgba(20,20,20,.61);border:0;font-size:12px;min-width:121px}
.language-button svg {width:14px;height:14px;fill:none;stroke:#eee;stroke-width:2;transition:transform .25s}
.language-button[aria-expanded=true] svg {transform:rotate(180deg)}
.flag-slot {width:21px;height:15px;flex:0 0 21px;display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;background:#343434;overflow:hidden}
.flag-slot img {width:100%;height:100%;object-fit:cover;display:block}
.flag-fallback {display:none;width:100%;height:100%;align-items:center;justify-content:center;font-size:9px;font-weight:bold;letter-spacing:0;color:white}
.flag-slot.missing img {display:none}
.flag-slot.missing .flag-fallback {display:flex}
.language-dropdown {position:absolute;z-index:90;top:61px;right:0;min-width:150px;background:#222;box-shadow:0 12px 28px #0007;padding:6px}
.language-dropdown[hidden] {display:none}
.language-option {display:flex;align-items:center;gap:10px;text-align:left;background:transparent;border:0;color:#eee;padding:11px 12px;width:100%;font-size:13px}
.language-option:hover,.language-option[aria-current=true] {background:#3c3c3c;color:var(--yellow)}
/* Screenshot style: three thin VERTICAL lines: gold, white, white. */
.menu-button {width:70px;height:72px;border:0;background:none;display:flex;align-items:center;justify-content:center;gap:14px;position:relative;padding:0;z-index:2}
.menu-button .menu-bar {display:block;width:2px;height:42px;flex:0 0 2px;background:#fff;transform-origin:center;transition:transform .4s cubic-bezier(.22,.7,.24,1),height .4s ease,opacity .25s}
.menu-button .menu-bar:first-child {background:var(--yellow)}
.menu-button .menu-bar:nth-child(2) {height:39px}
.menu-button .menu-bar:nth-child(3) {height:35px}
.menu-button:hover .menu-bar:nth-child(1),.menu-button:focus-visible .menu-bar:nth-child(1) {transform:translateY(-5px) scaleY(.86)}
.menu-button:hover .menu-bar:nth-child(2),.menu-button:focus-visible .menu-bar:nth-child(2) {transform:translateY(4px) scaleY(1.13)}
.menu-button:hover .menu-bar:nth-child(3),.menu-button:focus-visible .menu-bar:nth-child(3) {transform:translateY(-3px) scaleY(.94)}
.menu-button.open .menu-bar {transform:scaleY(.3);opacity:.25}
/* White fullscreen overlay (same visual language as reference screenshot). */
.site-menu {position:fixed;z-index:100;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:#fff;color:#202020;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .38s ease,transform .44s cubic-bezier(.22,.8,.25,1),visibility .38s}
.site-menu.open {opacity:1;visibility:visible;transform:translateY(0)}
.menu-close {position:absolute;top:23px;left:50%;transform:translateX(-50%);width:56px;height:56px;border:0;background:transparent;z-index:2;cursor:pointer}
.menu-close span {position:absolute;left:50%;top:50%;height:2px;width:45px;background:var(--yellow);transition:transform .35s ease,background .3s}
.menu-close span:first-child {transform:translate(-50%,-50%) rotate(45deg)}
.menu-close span:last-child {transform:translate(-50%,-50%) rotate(-45deg)}
.menu-close:hover span:first-child {transform:translate(-50%,-50%) rotate(135deg)}
.menu-close:hover span:last-child {transform:translate(-50%,-50%) rotate(45deg)}
.site-menu-panel {width:min(270px,calc(100% - 48px));margin:92px auto 68px;transform:translateY(16px);opacity:0;transition:transform .5s cubic-bezier(.22,.8,.25,1) .08s,opacity .4s ease .08s}
.site-menu.open .site-menu-panel {transform:translateY(0);opacity:1}
.menu-brand {height:69px;width:211px;margin:0 auto 30px;background:#1d1d1d;color:#fff;display:flex;align-items:center;gap:6px;padding:7px;white-space:nowrap;overflow:hidden}
.menu-brand-symbol {display:block;position:relative;background:#fff;width:55px;height:55px;flex:0 0 55px}
.menu-brand-symbol::before {content:"";position:absolute;right:0;top:25px;width:23px;height:4px;background:#1d1d1d}
.menu-brand-symbol::after {content:"";position:absolute;right:0;bottom:0;width:27px;height:21px;background:#1d1d1d}
.menu-brand-words {display:flex;flex-direction:column;gap:2px;align-self:center;min-width:0}
.menu-brand-words>span {font-family:'Arial Narrow',Arial,sans-serif;font-size:17px;font-weight:300;letter-spacing:.7px}
.menu-brand-words small {font-family:Arial,sans-serif;font-size:6.2px;letter-spacing:.65px;color:#aaa;white-space:nowrap}
.site-menu-nav {display:flex;flex-direction:column;gap:0}
.site-menu-nav a {display:flex;align-items:center;min-height:46px;padding:0 20px;color:#191919;background:transparent;font-size:14px;font-weight:400;letter-spacing:.235em;line-height:1.1;white-space:nowrap;transition:background-color .25s,color .25s,padding-left .28s}
.site-menu-nav a:hover,.site-menu-nav a:focus-visible {background:#f0f0f0;padding-left:26px}
.site-menu-nav a.active,.site-menu-nav a[aria-current=page] {background:#edbc00;color:#161616}
.site-menu-nav a.active:hover,.site-menu-nav a[aria-current=page]:hover {background:#dbae00}
.site-menu-contact {margin:19px 0 0;display:flex;flex-direction:column;gap:13px;padding-left:10px}
.site-menu-contact a {display:flex;align-items:center;gap:9px;color:#262626;font-size:13.5px;line-height:1.4;white-space:nowrap;transition:color .2s}
.site-menu-contact a:hover {color:#b68a00}
.site-menu-contact svg {width:16px;height:16px;flex:0 0 16px;color:#edbc00}
.site-menu-social {display:flex;justify-content:center;gap:37px;margin-top:27px}
.site-menu-social a {display:grid;place-items:center;width:30px;height:30px;color:#1e1e1e;transition:transform .25s,color .25s}
.site-menu-social a:hover {transform:translateY(-3px);color:#bf9300}
.site-menu-social svg {width:19px;height:19px}
@media(min-width:1500px) {.header-main {padding-inline:45px}}
@media(max-width:750px) {
  html {scroll-padding-top:94px}
  .top-contacts {height:28px;font-size:10px;gap:13px;overflow:hidden;padding:0 8px}
  .top-contacts a:first-child {display:none}
  .top-contacts svg {width:11px;height:11px}
  .header-main {padding:11px 14px 7px;align-items:flex-start}
  .brand {gap:6px}
  .brand-symbol {width:45px;height:47px;flex-basis:45px}
  .brand-symbol::after {width:25px;height:16px}
  .brand-symbol::before {width:20px;top:23px;height:3px}
  .brand-words {padding-top:13px}
  .brand-name {font-size:17px}
  .brand-subtitle {font-size:5px;letter-spacing:.35px}
  .header-actions {gap:8px}
  .language-switch {margin-top:0}
  .language-button {height:44px;min-width:89px;padding:0 8px;font-size:10px;gap:5px}
  .language-button svg {width:10px}
  .language-dropdown {top:48px}
  .flag-slot {width:18px;height:13px;flex-basis:18px}
  .menu-button {width:54px;height:49px;gap:11px}
  .menu-button .menu-bar {height:39px}
  .menu-button .menu-bar:nth-child(2) {height:36px}
  .menu-button .menu-bar:nth-child(3) {height:33px}
}
@media(max-width:480px) {
  .top-contacts {font-size:9px;gap:9px}
  .top-contacts a:last-child {display:none}
}
@media(max-height:710px) {
  .site-menu-panel {margin-top:81px;margin-bottom:25px}
  .menu-close {top:15px}
  .menu-brand {margin-bottom:18px}
  .site-menu-nav a {min-height:41px}
  .site-menu-contact {gap:10px;margin-top:13px}
  .site-menu-social {margin-top:15px}
}
@media(prefers-reduced-motion:reduce) {
  .site-header,.menu-button .menu-bar,.site-menu,.site-menu-panel,.menu-close span,.site-menu-nav a {transition:none!important}
}




/* CONTRACTOR - Correct original logo symbol */

.brand-symbol,
.menu-brand-symbol {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 48%,
    49% 48%,
    49% 53%,
    100% 53%,
    100% 100%,
    0 100%
  );
}

/* Remove the old incorrect logo cutouts */

.brand-symbol::before,
.brand-symbol::after,
.menu-brand-symbol::before,
.menu-brand-symbol::after {
  display: none;
}
