@font-face{
  font-family: 'Lato';
  src: url('/Lato-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Lato';
  src: url('/Lato-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Lato';
  src: url('/Lato-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
:root{
  --grey:#f1f2f3;
  --muted:#6b6b6b;
  --accent:#111;
  --max-width:1160px;
  --gap:16px;

  /* heights used for stacking sticky bars */
  --topbar-height:36px;   /* matches .top-bar */
  --header-height:68px;   /* approximate header height used for stacking the color list */
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%;overflow-x:clip;font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
body{
  margin:0;
  background:#f1f1f1;
  color:#111;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0;
}

.top-bar{
  --topbar-height:36px;
  width:100%;
  background:#e6e6e6; /* light grey strip */
  color:#222;
  font-weight:700;
  font-size:13px;
  border-bottom:1px solid rgba(0,0,0,0.04);
  position:sticky;
  top:0;
  z-index:70;
  height:var(--topbar-height);
  display:flex;
  align-items:center;
}
.top-bar-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:12px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-left:20px;
  padding-right:20px;
  gap:440px;
}

/* right side of top bar: live tv and channel icons */
.top-bar-right{display:flex;align-items:center;gap:18px}
.live-tv{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;color:#222}
.live-tv .camera-ico{
  display:inline-block;
  width:18px;
  height:18px;
  object-fit:contain;
  vertical-align:middle;
  filter:grayscale(1) brightness(0.45);
}
.live-text{letter-spacing:0.6px}
.channel-icons{display:flex;align-items:center;gap:6px}
.channel-icons img{
  height:40px;
  width:40px;
  display:block;
  object-fit:contain;
  border-radius:8px;
  padding:6px;
  background:transparent;
  transition: transform .12s ease;
}
.channel-icons img:hover,
.channel-icons img:focus{
  transform: scale(1.06);
}

/* slightly smaller icons on narrow screens while keeping them comfortably tappable */
@media (max-width:720px){
  /* hide channel icons on small screens to remove the logos next to the LIVE TV label */
  .channel-icons{ display: none !important; }

  /* collapse icons on small screens to conserve space but keep touch targets large (fallback) */
  .channel-icons img{height:28px;width:28px;padding:3px}
  .top-bar-inner{padding-left:10px;padding-right:10px}
}
.slogan{display:inline-block;padding-left:4px}

.site-header{
  /* full-bleed header bar; inner content is constrained */
  width:100%;
  background:#2f2f2f; /* darker grey header */
  position:sticky;
  top:var(--topbar-height,36px);
  z-index:60;
  border-bottom:1px solid rgba(0,0,0,0.25);
  box-shadow:0 4px 16px rgba(0,0,0,0.12);
}

/* inner constrained container for header content */
.header-inner{
  max-width:1160px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px; /* increased gap to add more space between logo and nav */
  padding:18px 0;
  color:#fff;
}

.logo-button{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.logo-button img{
  height:36px;
  width:auto;
  display:block;
}

.main-nav{display:flex;align-items:center;gap:20px} /* larger gap between nav items group and search/logo */
.nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:8px;
  align-items:center;
}
.nav-list a{
  display:inline-block;
  padding:8px 10px;
  color:var(--muted); /* unselected gray by default */
  text-decoration:none;
  border-radius:6px;
  font-weight:700;
  font-size:14px;
  position:relative;
  transition:color .15s ease, background .12s ease;
}
.nav-list a:hover, .nav-list a:focus{color:#fff;background:rgba(255,255,255,0.04)}
/* active/current section style: white text and white underline */
.nav-list a.active{
  color:#fff;
}
.nav-list a.active::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:6px;
  height:2px;
  background:#fff;
  border-radius:2px;
}

.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  padding:8px;
  border-radius:8px;
}
.nav-toggle .hamburger{
  width:22px;height:2px;background:#fff;display:block;position:relative;
}
.nav-toggle .hamburger::after,
.nav-toggle .hamburger::before{
  content:"";position:absolute;left:0;width:22px;height:2px;background:#fff;
}
.nav-toggle .hamburger::before{top:-7px}
.nav-toggle .hamburger::after{top:7px}

.content{
  width:100%;
  max-width:var(--max-width);
  margin:0;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding-top:0;
  padding-bottom:36px;
}

.panel{
  background:#ff999;
  padding:16px;
  border-radius:10px;
  box-shadow:none;
  border:0;
}

.lead{color:var(--muted);margin-top:8px}

.panel h1{margin:0 0 6px 0;font-size:20px}
.panel h2{margin:0 0 8px 0;font-size:16px}

.brands{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.brands img{height:48px;object-fit:contain;border-radius:6px;background:#fff;padding:6px;border:1px solid #efefef}

.contact-form{display:flex;flex-direction:column;gap:10px}
.contact-form label{display:flex;flex-direction:column;font-size:13px;color:var(--muted)}
.contact-form input, .contact-form textarea{
  margin-top:8px;padding:10px;border:1px solid #e0e0e0;border-radius:8px;font-family:inherit;font-size:14px
}
.form-actions{display:flex;gap:8px;margin-top:4px}
.btn{background:#111;color:#fff;border:0;padding:10px 14px;border-radius:8px;font-weight:700;cursor:pointer}
.btn-muted{background:#f4f4f4;color:#111}

.form-status{margin-top:8px;color:var(--muted);font-size:13px}

/* Footer with full-width background image and logo grid */
.site-footer{
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* slightly brighter semi-transparent overlay over the image to keep image visible */
  background-image: linear-gradient(rgba(0,0,0,0.90), rgba(0,0,0,0.60)), url('/footerbg.png');
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  padding:28px 16px;
  box-sizing:border-box;
  display:block;
  color: #f5f5f5;
}
.site-footer .footer-inner{
  max-width:1760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
  padding:10px 12px;
  /* removed inner solid/dark background so logos sit directly on the footer image */
  background: none;
  border-radius:10px;
}

/* Look Group logo at the top of the footer */
.footer-lookgroup{
  height:44px;
  width:auto;
  display:block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
}

/* Grid of full logos */
.footer-logos{
  display:grid;
  /* responsive auto-fit grid so the number of columns adapts to viewport size;
     use a smaller minimum so more items fit on narrow viewports and reflow naturally */
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap:10px; /* extra breathing room between logos */
  width:100%;
  align-items:center;
  justify-items:center;
  padding:8px 6px;
  /* ensure logos keep consistent spacing and alignment when the number of columns changes */
  grid-auto-rows: min-content;
}
.footer-logos img{
  /* allow logos to use their intrinsic size while remaining responsive */
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  background: transparent;
  padding: 6px; /* space around each logo */
  border-radius: 4px;
  border: 0;
  box-shadow: none;
  filter: brightness(1.02);
  transition: transform .14s ease;
}

/* Second footer: socials strip */
.footer-social{
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background:#111;
  padding:22px 16px;
  box-sizing:border-box;
  display:block;
  color:#f5f5f5;
  border-top:1px solid rgba(255,255,255,0.08);
}
.footer-social-inner{
  max-width:1760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  text-align:center;
}
.footer-social-title{
  margin:0;
  font-size:14px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#fff;
}
.footer-social .social-icons{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
}
.footer-social .social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(255,255,255,0.10);
  color:#fff;
  transition:background .14s ease, transform .14s ease;
}
.footer-social .social-icon:hover{
  transform:scale(1.06);
}
.footer-social .social-icon svg{
  width:24px;
  height:24px;
}

/* Copyright text under the footer */
.footer-copyright{
  max-width:1760px;
  margin:8px auto 36px;
  width:100%;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

/* Mobile adjustments: compress logos and spacing */
@media (max-width:720px){
  .site-footer{padding:18px 8px}
  .footer-inner{gap:12px;padding:8px}
  .footer-logos img{width:auto;height:auto;max-width:100%;padding:0}
  .footer-lookgroup{height:36px}
  .footer-logos{grid-template-columns:repeat(3,1fr)}
}

/* Channel gallery grid: square tiles using provided background photos
   Make the brand gallery full-bleed (ignore the page max-width) while keeping tiles responsive */
#brand-gallery{
  /* full-bleed across the viewport */
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding:0;
  border-radius:0;
  box-shadow:none;
  border-left:0;
  border-right:0;
  background:transparent;
}

/* keep the internal grid constrained visually but stretching full width of viewport */
.channel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:0; /* tiles touch each other for full-bleed look in this section */
  margin-top:0;
  width:100%;
}

/* tiles — brand gallery only: remove rounded corners, borders and shadows so the images fill completely */
.channel-tile{
  display:block;
  position:relative;
  aspect-ratio: 9 / 16;
  min-height:160px;
  border-radius:0;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  border:0;
  box-shadow:none;
  text-decoration:none;
  transition:transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.channel-tile:focus{outline: none; outline-offset:0}
.channel-tile:hover, .channel-tile:focus{
  transform:none; /* no movement or scaling on hover */
  box-shadow:none;
}

/* dimming overlay placed above the background image but under logo/button */
.channel-tile::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.46); /* slightly darker overlay for tiles */
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
  z-index: 1;
}
.channel-tile:hover::after,
.channel-tile:focus::after{
  opacity: 1;
}

/* ensure logo and button render above the overlay */
.brand-logo,
.view-more{
  z-index: 2;
}

/* brand logo that appears when hovered */
.brand-logo{
  position:absolute;
  left:50%;
  top:34%;
  transform:translateX(-50%) translateY(-6%);
  width:72%;
  max-width:520px;
  opacity:0;
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
  object-fit:contain;
  height:auto;
}
.channel-tile:hover .brand-logo,
.channel-tile:focus .brand-logo{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* view-more button styling */
.view-more{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:10px;
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,0.95);
  padding:8px 12px;
  border-radius:8px;
  font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-weight:400;
  font-size:12px;
  letter-spacing:0.6px;
  cursor:pointer;
  opacity:0;
  transition:opacity .18s ease, transform .12s ease;
  backdrop-filter: none;
}
.channel-tile:hover .view-more,
.channel-tile:focus .view-more{
  opacity:1;
}

/* channel name removed for the banner-only layout; keep markup-free by hiding if present */
.channel-name{ display:none !important; }

/* responsive tweaks */
@media (max-width:720px){
  .channel-grid{ grid-template-columns:repeat(3,1fr); gap:0; }
  /* keep portrait ratio on small screens but reduce minimum height */
  .channel-tile{ min-height:120px; border-radius:0; aspect-ratio: 9 / 16; }
  .channel-name{ font-size:12px; padding:8px 10px; }
}

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

/* Color list under header (tiny cropped band) — full-bleed, sits at the bottom of the sticky header so it sticks with it */
.color-list-wrap{
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display:block;
  padding:0;
  overflow:hidden;
  height:5px;
}
.color-list{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover; /* crop to fit */
  object-position:center;
  max-width:none;
}

/* Hide the thin color strip on small screens to keep the top compact and centered on mobile */
@media (max-width:720px){
  .color-list-wrap{ display: none !important; }
}

/* Search input styling */
.search-wrap{
  position:relative;
  margin-left:36px; /* add more space between nav links and the search box */
  display:flex;
  align-items:center;
  gap:8px;
}

/* place button inside the input by making the wrapper relative and using absolute positioning */
.site-search{
  width:220px;
  max-width:40vw;
  padding:8px 44px 8px 12px; /* extra right padding to make room for the inner button */
  border-radius: 50px;
  border:1px solid rgba(255,255,255,0.08);
  background:#fff;
  color:#000;
  outline:none;
  font-size:14px;
  font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  box-shadow: none;
  position:relative;
  z-index:1;
}
.site-search::placeholder{color:var(--muted)}

/* repositioned search button inside the search input */
.search-btn{
  --size:36px;
  width:var(--size);
  height:var(--size);
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff; /* white button */
  color:transparent; /* icon color handled via SVG stroke */
  border:1px solid rgba(0,0,0,0.06);
  cursor:pointer;
  padding:0;
  box-shadow:none;
  z-index:2;
}

/* make the svg icon gray */
.search-btn svg{width:16px;height:16px;display:block}
.search-btn svg, .search-btn svg *{ stroke:#8a8a8a; fill:none }

.search-results{
  position:absolute;
  top:56px;
  right:0;
  min-width:220px;
  max-width:48vw;
  background:#fff;
  color:#111;
  border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  border:1px solid #eee;
  display:none;
  z-index:80;
  overflow:hidden;
  max-height:260px;
  overflow:auto;
  font-size:14px;
}
.search-results.show{display:block}
.search-results .result{
  padding:10px;
  border-bottom:1px solid #f4f4f4;
  cursor:pointer;
}
.search-results .result:last-child{border-bottom:0}
.search-results .result:hover{background:#f7f7f7}

/* Portfolio dropdown */
.portfolio-dropdown{
  position:relative;
  display:inline-block;
}
.dropdown-toggle{
  background:#fff;
  border:1px solid #efefef;
  padding:8px 12px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.dropdown-menu{
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  background:#fff;
  border-radius:8px;
  box-shadow:0 12px 30px rgba(0,0,0,0.12);
  border:1px solid #eee;
  padding:10px;
  /* Keep menu present in layout but hidden using visibility/transform so animations run smoothly */
  display:grid;
  z-index:85;
  width:320px;
  max-width:80vw;

  /* initial hidden state */
  transform-origin: top center;
  transform: translateY(-6px) scaleY(.98);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* transition for smooth open/close */
  transition: transform .26s cubic-bezier(.2,.9,.2,1), opacity .22s ease, visibility .01s linear .26s;
}
/* when aria-hidden is false, show and animate */
.dropdown-menu[aria-hidden="false"]{
  transform: translateY(0) scaleY(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .26s cubic-bezier(.2,.9,.2,1), opacity .22s ease;
}

/* helpers for instant-closing edge-case */
.dropdown-menu.is-closing{
  transform: translateY(-6px) scaleY(.98);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* keep the grid layout */
.dropdown-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.dropdown-item{
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px;
  border-radius:8px;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid #fafafa;
}
.dropdown-item img{width:40px;height:40px;object-fit:contain;border-radius:6px}
.dropdown-item span{font-size:13px;font-weight:700;color:var(--muted)}

/* Header/nav variant: place a similar dropdown under the Portofoliu nav item and style to match header */
.nav-portfolio{
  position:relative;
}
.nav-portfolio .nav-dropdown-toggle{
  background:transparent;
  border:0;
  color:var(--muted);
  font-weight:700;
  padding:8px 10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:6px;
}
.nav-portfolio .nav-dropdown-toggle:hover{color:#fff;background:rgba(255,255,255,0.04)}
/* route the dropdown visually into header theme: darker background + subtle border */
.nav-portfolio .dropdown-menu{
  left:auto;
  right:0;
  top:calc(100% + 8px);
  background:#2f2f2f;
  border:1px solid rgba(255,255,255,0.04);
  color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,0.28);
  width:360px;
  padding:12px;
}
/* adjust items for dark background */
.nav-portfolio .dropdown-item{
  background:transparent;
  border:1px solid rgba(255,255,255,0.04);
}
.nav-portfolio .dropdown-item span{color:#fff}
.nav-portfolio .dropdown-item img{background:#fff;padding:6px;border-radius:6px}

/* Responsive - mobile first adjustments */
@media (max-width:720px){
  /* stack header content and center main elements */
  .header-inner{
    position:relative;
    justify-content:center;
    padding:12px 0;
  }

  /* keep top bar items pinned left/right on small screens:
     slogan stays left, live-tv group stays right */
  .top-bar-inner{
    justify-content:space-between;
  }

  /* place hamburger at left edge inside header */
  .nav-toggle{
    display:inline-flex;
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    z-index:110;
    background:transparent;
    border:0;
    width:48px;
    height:48px;
    align-items:center;
    justify-content:center;
    border-radius:10px;
  }

  /* Hamburger visual: white three bars with animated transform when open */
  .nav-toggle .hamburger{
    width:20px;
    height:2px;
    background:#fff;
    display:block;
    position:relative;
    transition: transform .28s cubic-bezier(.2,.9,.2,1), background .18s;
  }
  .nav-toggle .hamburger::before,
  .nav-toggle .hamburger::after{
    content:"";
    position:absolute;
    left:0;
    width:20px;
    height:2px;
    background:#fff;
    transition: transform .28s cubic-bezier(.2,.9,.2,1), top .28s, opacity .18s;
  }
  .nav-toggle .hamburger::before{ top:-6px }
  .nav-toggle .hamburger::after{ top:6px }

  /* open state: cross icon */
  .nav-toggle.open .hamburger{ transform: rotate(45deg); }
  .nav-toggle.open .hamburger::before{ top:0; transform: rotate(-90deg); opacity:1 }
  .nav-toggle.open .hamburger::after{ top:0; transform: rotate(-90deg); opacity:0 }

  /* full-screen mobile menu overlay (fills site, behind header) */
  .nav-list{
    display:flex;
    flex-direction:column;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:#2f2f2f; /* same as header */
    color:#fff;
    padding:84px 20px 28px; /* leave space for header */
    gap:6px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    transform: translateY(-8px) scale(.998);
    opacity:0;
    pointer-events:none;
    z-index:40; /* behind header (header z-index:60) so header stays above */
    transition: opacity .28s ease, transform .36s cubic-bezier(.2,.9,.2,1);
  }
  /* when open */
  .nav-list.show{
    opacity:1;
    transform: translateY(0) scale(1);
    pointer-events:auto;
  }

  /* mobile backdrop (subtle) placed behind header/subheader */
  .mobile-backdrop{
    content:"";
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:linear-gradient(rgba(0,0,0,0.08), rgba(0,0,0,0.12));
    z-index:39; /* behind nav-list, behind header */
    opacity:0;
    pointer-events:none;
    transition: opacity .26s ease;
  }
  .mobile-backdrop.show{ opacity:1; pointer-events:auto }

  /* nav links larger and stacked */
  .nav-list a{
    display:block;
    color:var(--muted);
    background:transparent;
    padding:14px 12px;
    border-radius:8px;
    margin:6px 0;
    font-size:16px;
    font-weight:700;
    text-decoration:none;
  }
  .nav-list.show a{ color:#fff }

  /* hide original compact portofoliu link (script will clone a mobile toggle) */
  .nav-list li{ list-style:none }

  /* style for mobile portfolio toggle and sublist */
  .mobile-portfolio .mobile-portfolio-toggle{
    display:block;
    width:100%;
    text-align:left;
    background:transparent;
    color:#fff;
    border:0;
    padding:14px 12px;
    font-weight:900;
    font-size:15px;
    cursor:pointer;
    border-radius:8px;
    margin:6px 0;
  }
  .mobile-portfolio-wrap{
    max-height:0;
    overflow:hidden;
    transition: max-height .28s cubic-bezier(.2,.9,.2,1), opacity .22s ease;
    opacity:0;
    padding-left:8px;
  }
  .mobile-portfolio-wrap.open{
    opacity:1;
    max-height:640px;
  }
  .mobile-portfolio-list{ padding:6px 0 12px 10px; margin:0; list-style:none; display:flex; flex-direction:column; gap:4px }
  .mobile-portfolio-list li a{
    color:#fff;
    padding:8px 6px;
    font-weight:700;
    text-decoration:none;
    font-size:14px;
  }

  /* center logo/button visually */
  .logo-button{
    margin:0 auto;
    z-index:111;
    position:relative;
  }
  .logo-button img{height:32px}

  /* position the top slogan on the left and keep the live-tv group pinned to the right on small screens */
  .top-bar-inner{
    justify-content:space-between;
    padding-left:14px;
    padding-right:14px;
  }

  /* hide search on narrow screens to conserve space */
  .search-wrap{display:none}
}

/* Full-bleed portfolio header that breaks the page max-width */
.portfolio-hero{
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background:transparent;
  padding:22px 20px;
  box-sizing:border-box;
  border-radius:0;
  border:0;
  max-width: none;
}
.portfolio-hero h2{
  margin:0;
  font-size:36px;
  line-height:1.1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.6px;
  color:var(--accent);
  display:inline-block;
  padding-left:0;
  max-width:1720px;
}

/* White logos box used on the portfolio page */
.logos-box{
  background:#fff;
  color:#111;
  border-radius:12px;
  padding:14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.04);
  max-width:1760px;
  margin-left:auto;
  margin-right:auto;
}
.logos-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap:10px;
  align-items:center;
  justify-items:center;
  padding:8px 6px;
}
.logo-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  /* larger, taller tiles for stronger presence */
  min-height:260px;
  background-color:#fafafa; /* explicit opaque tile background */
  border-radius:0;
  padding:22px;
  text-decoration:none;
  box-shadow: none;
  transition: transform .16s ease, box-shadow .22s ease;
  gap:12px;
  will-change: transform, box-shadow;
}
.logo-item:focus,
.logo-item:hover{
  transform: translateY(-6px);
  /* stronger, smoother drop shadow for hover state */
  box-shadow: 0 20px 40px rgba(0,0,0,0.18);
  z-index: 4;
}
.logo-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:160px; /* larger area for bigger logos */
  padding:8px;
  background-color:#fafafa; /* ensure inner area is opaque */
}
.logo-item img{
  max-height:140px; /* increase visible logo size */
  max-width:100%;
  object-fit:contain;
  display:block;
  filter: none;
  margin:0 auto;
  border-radius:0; /* ensure logos have no rounded corners */
  box-shadow:none;
  background: transparent;
}
.brand-title{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  text-align:center;
  width:100%;
  text-transform:uppercase;
  letter-spacing:0.6px;
}

/* adjust grid spacing to accommodate larger tiles */
.logos-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:22px;
  align-items:center;
  justify-items:stretch;
  padding:16px 12px;
}
@media (max-width:720px){
  /* make brand tiles even larger and more rectangular on mobile: single-column, strong visual presence */
  .logo-item{
    /* much taller rectangular cards for a billboard-like look */
    min-height:460px;
    padding:22px;
  }
  .logo-inner{
    /* allocate a very large visual area for the brand artwork */
    height:340px;
  }
  .logo-item img{
    /* allow substantially larger visible logos while keeping aspect */
    max-height:260px;
  }
  /* single column so each tile spans full width and reads like a tall rectangle */
  .logos-grid{
    grid-template-columns: repeat(1, 1fr);
    gap:18px;
  }
}
@media (max-width:720px){
  /* ensure consistent larger layout for the logos grid on small screens:
     use one full-width rectangular tile per row for stronger presence on mobile */
  .logos-grid{
    grid-template-columns: repeat(1, 1fr);
    gap:16px;
  }
  .logo-item{
    min-height:460px;
    padding:20px;
  }
  .logo-inner{
    height:340px;
  }
  .logo-item img{
    max-height:260px;
  }
}

/* Apply portfolio header typography to section headings inside panels
   and allow panels themselves to expand up to 2020px without changing header/site container widths.
   Technique: center panels using viewport-based centering so they can be wider than the page content wrapper. */
.content .panel h1,
.content .panel h2 {
  margin: 0 0 8px 0;
  font-size: 28px;
  line-height: 1.08;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent);
  padding-left: 0;
}

/* Panel layout override so individual sections can expand up to 2020px
   without changing the header or the site's global max width.
   Exclude the full-bleed background photo gallery (#brand-gallery) so it remains full-bleed. */
.panel:not(#brand-gallery) {
  /* center panels within the page while allowing them to expand up to 1760px */
  position: relative;
  width: 100%;
  max-width: 1760px;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  transform: none;
}

/* small inline brand label used when a hash is active */
.portfolio-hero .brand-label{
  margin-left:10px;
  font-weight:700;
  font-size:28px;
  color:var(--muted);
  opacity:0.95;
}

/* logo placed inside each brand page panel (keeps visual consistency) */
.brand-page .brand-header{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  margin-bottom:10px;
}
.brand-page .brand-header img{
  width:100%;
  max-width:520px;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}

/* --- Subpage title behaviour ---
   Hide the separate H2 on brand subpages and style the existing
   "Portofoliu" button to visually act as the article/title.
   This keeps page markup untouched while making the portfolio
   button appear exactly like the page title. */
.brand-page h2 { display: none !important; }

/* make the existing .btn used for "Portofoliu" look like the page title
   and apply the same visual style to the inline brand label used on subpages */
.brand-page .btn,
.brand-page .brand-inline-title {
  display: inline-block;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* when the "Portofoliu" button sits beside the small brand crumb image,
   make sure spacing and alignment match title layout */
.brand-page .brand-crumb {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

/* ensure the inline image inside the crumb keeps the same visual */
.brand-page .brand-crumb img {
  height:28px;
  vertical-align:middle;
  border-radius:4px;
  padding:2px;
  background:#fff;
  border:1px solid #efefef;
}

/* Mobile: hide the full LIVE TV label beside the slogan and center the slogan; remove compact indicator styles */
@media (max-width:720px){
  /* hide the original live-tv group entirely on mobile */
  .top-bar-right { display: none !important; }
  /* center the slogan horizontally in the top-bar */
  .top-bar-inner{
    justify-content:center;
    padding-left:10px;
    padding-right:10px;
  }
  .slogan{
    display:inline-block;
    text-align:center;
    margin:0 auto;
    padding-left:0;
  }
}

/* Make "Alte pagini" / other-pages logos smaller so they appear as compact page links */
.other-pages img {
  height: 32px !important;
  max-height: none;
  display: block;
  object-fit: contain;
  background: transparent;
  padding: 2px;
  border-radius: 4px;
}

/* Stylized custom scrollbar */
html{
  scrollbar-width: thin;
  scrollbar-color: #111 #e6e6e6;
}
::-webkit-scrollbar{
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track{
  background: linear-gradient(#e6e6e6, #d6d6d6);
  border-left: 1px solid rgba(0,0,0,0.05);
}
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #2b2b2b, #111);
  border: 2px solid #e6e6e6;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, #3a3a3a, #222);
}
::-webkit-scrollbar-corner{
  background: #e6e6e6;
}