/* Base */
:root{
  --container: 1120px;
  --radius: 16px;
  --brand:#000;
  --text:#111;
  --muted:#666;
  --chip:#666;
  --chip-active:#000;
  --bg:#fff;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:#fff;
  color:var(--text);
  font-family:Montserrat, system-ui, -apple-system, Arial, sans-serif;
  /* allow the footer to stick to the bottom by using a flex column layout */
  min-height:100vh;
}

/* arrange the document as a column so the footer sits at the bottom when
   there isn’t much content. the <main> element will flex to fill the
   remaining space */
body{
  display:flex;
  flex-direction:column;
}

main{
  flex:1;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Layout */
/* Header */
.header{
  position:sticky;
  top:0;
  z-index:10;
  background:#fff;
  border-bottom:1px solid #eee;
}
/* align header content and reduce its overall scale to better match
   the reference design. smaller logo, buttons and navigation items */
.header__bar{
  max-width:var(--container);
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  gap:16px;
}
.header__logo{
  width:80px;
  height:auto;
  flex:0 0 auto;
}
/* Navigation: adjust spacing and sizing to more closely match the reference.
   Increase the left margin so the nav group is pushed further away from the
   logo. The navigation pills should be a comfortable medium size – not as
   large as the very first version but slightly larger than the most recent
   iteration. */
.nav{
  display:flex;
  gap:16px;
  align-items:center;
  flex:1;
  /* shift the navigation further to the right to match the reference.  The
     distance has been tuned several times; to satisfy the latest
     requirement of moving the menu closer to the logo again, reduce the
     left margin slightly.  This value can be tweaked if the visual
     alignment still isn’t quite right. */
  margin-left:40px;
}
.nav__spacer{flex:1}
.nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* medium pill size: a bit taller and with more horizontal padding than
     before. font size increased slightly to maintain visual balance. */
  height:34px;
  padding:0 18px;
  border-radius:999px;
  background:#e5e5e5;
  color:#000;
  font-weight:600;
  font-size:15px;
  transition:.2s ease;
}
.nav a:hover{filter:brightness(1.05)}
.nav a.active{
  background:#000;
  color:#fff;
}
.header__actions{
  display:flex;
  gap:16px;
  align-items:center;
}
/* The call/WhatsApp/mail icons should not be wrapped in an extra circle.  Only
   the SVG itself has a circular background.  Remove any additional
   styling from the anchor so that the icon appears by itself. */
.action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* remove any fixed dimensions, border radius or background. the
     anchor will size itself to the intrinsic dimensions of the SVG. */
  width:auto;
  height:auto;
  background:transparent;
  border-radius:0;
}
.action img{
  /* display the icon at its natural size; no colour inversion needed
     because the SVG already has the correct colours. */
  width:35px;
  height:36px;
  filter:none;
}

/* Burger */
.burger{display:none; width:44px;height:44px;border-radius:8px;border:1px solid #ddd; background:#fff}
.burger span{display:block;width:22px;height:2px;background:#111;margin:5px auto}

/* When used as the close button inside the mobile menu, transform the burger
   lines into an “X” by rotating the first and last spans and hiding the
   middle span.  The transform origin centres the lines properly. */
#close-menu.burger span:nth-child(1){
  transform: rotate(45deg) translate(5px, 5px);
}
#close-menu.burger span:nth-child(2){
  opacity:0;
}
#close-menu.burger span:nth-child(3){
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Hero */
/* limit hero width and add generous margin around it */
.hero{
  max-width:var(--container);
  /* add a bottom margin so the next section doesn’t overlap the banner */
  /* reduce the bottom margin so that the content below sits closer to the hero on
     pages like the contacts page.  The top margin remains generous. */
  /* increase bottom margin below the hero to create more space before
     the following section, as requested.  Top margin remains the
     same. */
  /* restore vertical spacing below the hero: match the horizontal gap
     between facility photos (28px) so the visual rhythm is consistent */
  /* add a bottom margin of 28px on most pages.  The contacts page
     overrides this to zero so the spacing is controlled by the
     contacts section’s padding. */
  margin:28px auto 28px;
  padding:0 24px;
}

/* On the contacts page the hero banner should sit a bit closer to the
   section that follows.  A class is added to the body in contacts.html
   (contacts-page) so we can target the hero only on that page. */
.hero__inner{
  border-radius:20px;
  overflow:hidden;
  position:relative;
}
/* fade transitions on hero images for smooth cross‑fades */
.hero__img{
  width:100%;
  height:420px;
  object-fit:cover;
  opacity:1;
  transition:opacity 1s ease-in-out;
}
h1{
  font-size:28px;
  text-align:center;
  margin:28px 0 12px;
}
.lead{
  font-size:18px;
  color:#333;
  text-align:center;
  max-width:900px;
  margin:0 auto 32px;
}

/* Footer */
/* Footer */
.footer{
  background:#000;
  color:#8f8f8f;
  /* reduce the vertical space above the footer so it doesn’t take up
     excessive room on pages with little content */
  margin-top:32px;
}
.footer__bar{
  max-width:var(--container);
  margin:0 auto;
  /* shrink the footer’s padding and spacing to make the bar more
     compact */
  padding:20px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.footer__logo{
  /* slightly reduce the logo size to match the more compact footer */
  width:50px;
  height:auto;
}

/* apply a smaller font size to the footer’s company information so
   the overall footer height decreases */
.footer__bar div{
  /* make the company details text a bit smaller to minimise the height
     of the footer.  A line-height slightly above one ensures readable
     spacing even at the reduced font size. */
  font-size:12px;
  line-height:1.3;
}

/* Price */
.page{max-width:var(--container); margin:0 auto; padding:0 24px}
.page h2{font-size:32px; text-align:center; margin:24px 0 8px}
.page .subtitle{color:#666; text-align:center; margin:0 0 24px}
.table{width:100%; border-collapse:separate; border-spacing:0; margin-top:8px}
.table th, .table td{
  padding:16px 18px;
  font-size:18px;
  /* center content within each column for improved alignment */
  text-align:center;
}
.table th{
  font-size:18px;
}
/* no longer need right‑aligned price column because all cells are centered */
/* .table td.price{text-align:right} */
.table tr:nth-child(even){background:#f5f5f5}
.table tr:nth-child(odd){background:#fbfbfb}
.table thead tr{background:#fff}
.table thead th{border-bottom:2px solid #eee}
.table-wrapper{border-radius:16px; overflow:hidden;}

/* Notes displayed below the price table. Reduce font size and
   lighten the color slightly for footnotes. */
.price-notes{
  font-size:14px;
  color:#555;
  margin-top:16px;
  /* Restrict the footnote width and center the block so the text doesn’t
     span the entire container.  This makes the notes easier to read
     and visually centred under the table. */
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.price-notes p{
  margin:4px 0;
}
.price-notes .strong{
  font-weight:bold;
}

/* Contacts */
/* Layout for the contacts page.  A full‑width hero appears above
   the contact section (defined in the HTML).  The `.contacts` section
   contains a row with two facility photos on the left and the address
   details on the right.  On narrow screens the columns stack. */
/* Container for the contacts section.  It centres the entire block on
   the page and applies top/bottom padding.  The actual row of
   photos/address is handled by `.contacts-inner` below. */
.contacts{
  max-width:var(--container);
  margin:0 auto;
  /* only horizontal padding; vertical spacing is controlled by
     .contacts-inner’s margin-top. */
  padding:0 24px;
}
.contacts .photos-col{
  /* Reserve slightly more than half of the available width for the
     photos.  This balances the visual weight of the two photos
     against the narrower contact information column. */
  flex: 0 0 58%;
  display:flex;
  gap:28px;
}
.contacts .photos-col .card{
  flex:1;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 0 #eee;
}
.contacts .photos-col .card img{
  width:100%;
  /* уменьшите высоту фотографий с офисом: уменьшили примерно на 25% от
     предыдущего размера, чтобы они выглядели менее громоздко */
  height:240px;
  object-fit:cover;
}

/* Contacts section container: centre the block of photos and address within
   the overall page. By constraining the max-width and auto margins, the
   layout doesn’t stretch across the entire viewport on large screens. We
   also add horizontal padding and define the flex layout and spacing here.
   Without this rule the section would take up the full width and appear
   left-aligned. */
/* The `.contacts-inner` flex container holds the photo column and the
   info column.  It is centred horizontally on the page using auto
   margins and can shrink-wrap its contents if the columns are set to
   auto widths. */
.contacts-inner{
  display:flex;
  gap:28px;
  /* align the tops of the photo and info columns */
  align-items:flex-start;
  /* distribute the columns across the available width */
  justify-content:space-between;
  /* vertical spacing between the hero and this row */
  margin-top:28px;
  /* ensure the row spans the full width of the contacts container */
  width:100%;
}
.contacts .info-col{
  /* The contact information column occupies the remaining width. */
  flex: 0 0 42%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.contacts .info-col p{
  margin:0 0 8px;
  /* slightly reduce the font size so that the address and phone numbers fit
     comfortably on two lines without wrapping awkwardly */
  font-size:18px;
}

/* When embedding a standalone map on the dedicated map page we want the
   content area to span the full available width instead of being
   constrained by the standard container.  The `.map-page` class is
   applied to the `<main>` element in map.html. */
/* Map page container: match the width of the other sections (hero and
   price table) and center it horizontally. The map’s height should
   fill most of the viewport minus some space for the header and footer. */
/* Map page container matches the width of other sections and fills most of
   the viewport height. The iframe inherits the full width and height
   from its parent so that the map scales properly. */

/* ensure the embedded map fills its container regardless of any inline
   width/height attributes that the Yandex widget may inject */
/*
   Yandex map embeds do not honour 100% width/height attributes and
   instead render with a fixed intrinsic size (~300px wide).  To make
   the map fill the container, scale the tiny widget up using CSS
   transforms.  Setting width and height to a fraction of the
   available space and then scaling by the reciprocal factor results
   in the map appearing full width and height.  A factor of 4
   approximates the ratio between the 300px widget and the container
   width.  Adjust these values if Yandex changes the default widget
   size. */
/* an iframe placed inside `.map-page` will fill its container. we rely
   on the map provider’s widget parameters (in config.js) to render
   correctly. border-radius is applied for consistency with other
   sections. */
/*
 * Embedded map frame on the map page.
 * Yandex map widgets normally render with fixed intrinsic dimensions
 * (~560×400px) and ignore percentage widths/heights on the iframe.  To
 * ensure the map occupies the full available space of its parent
 * container we avoid any scaling tricks here and simply set the iframe
 * to stretch to 100% of the container.  The intrinsic size is
 * specified via width/height attributes in the HTML (map.html) which
 * makes the widget render at a reasonable resolution, while CSS
 * guarantees it fills its parent.  If Yandex updates their widget
 * behaviour these settings should still yield a fully responsive map.
 */


/* Static map image on the map page */
.map-page .map-img{
  /* ensure a static map image fills the container completely.  Setting
     display:block removes any inline gap.  The object-fit rule covers
     the container even if the aspect ratio doesn’t match. */
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:22px;
}

/* Container for the Yandex map created via the JavaScript API.  The map
   element fills its parent `.map-frame` completely and has the same
   rounded corners as other sections. */
#map{
  width:100%;
  height:100%;
  border-radius:22px;
}

/* hide the map on the contacts page only */
.contacts .map-frame{
  display:none;
}

/* Responsive */
@media (max-width:1200px){
  :root{ --container: 1024px }
  .hero__img{height:360px}
}
@media (max-width:900px){
  :root{ --container: 760px }
  .nav{display:none}
  .burger{display:block}
  .header__bar{justify-content:space-between}
  /* collapse the contacts layout into a single column on narrow screens */
  .contacts-inner{
    flex-direction:column;
  }
  .contacts .photos-col{
    flex-direction:column;
  }
  .hero__img{height:280px}
  .footer__bar{flex-direction:column; gap:8px}
}
/* Mobile menu */
.mobile-nav{
  position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; z-index:30;
}
.mobile-nav__panel{
  position:absolute; right:0; top:0; width:min(86vw,380px); height:100%; background:#fff;
  padding:24px; display:flex; flex-direction:column; gap:16px;
}
.mobile-nav__panel a{background:#666; color:#fff; border-radius:999px; padding:14px 20px; font-weight:700; text-align:center}
.mobile-nav__panel a.active{background:#000}
.mobile-nav.show{display:block}

/* On the contacts page remove the bottom margin from the hero so
   the spacing between the banner and the contact section is
   determined by the padding on the contact section. */
.contacts-page .hero{
  margin-bottom:0;
}


.map-page {
  max-width: var(--container); /* ширина как у остальных страниц */
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.map-page .map-frame {
  width: 100%;
  height: calc(100svh - 160px); /* почти на весь экран, минус шапка и футер */
  border-radius: 22px;
  overflow: hidden; /* карта не выходит за скругление */
}

.map-page .map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  display: block;
}
/* ================================================================ */


.map-page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}
.map-page .map-frame {
  display: block;
  width: 100%;
  height: clamp(520px, 72svh, 860px); /* вернули прежнюю модель высоты */
  border-radius: 22px;
  overflow: hidden; /* скругление работает для содержимого */
}
.map-page .map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}
/* ===================================================================== */


/* === EKAMET map layout — wide version (19.10.2025) ==================== */
.map-page {
  width: min(96vw, 1400px); /* почти вся ширина окна, но с ограничением */
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
}

.map-page .map-frame {
  width: 100%;
  height: clamp(520px, 72svh, 860px);
  border-radius: 22px;
  overflow: hidden;
}

.map-page .map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  display: block;
}
/* ====================================================================== */


/* === EKAMET footer responsive refinement (mobile & tablet) — 19.10.2025 === */
.footer{
  background:#000;
}
.footer__bar{
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  flex-wrap: wrap;
  text-align: center;
}
.footer__logo{
  width: 72px;
  height: auto;
  flex: 0 0 auto;
}

/* Tablet: tighten spacing but keep centered layout */

}

/* Mobile: stack vertically, center logo on top, prevent squishing */

  .footer__logo{
    width: 64px;
    margin-bottom: 6px;
  }
  .footer__bar > div{
    max-width: min(92vw, 560px);
    line-height: 1.35;
    font-size: 14px;
  }
}
/* ======================================================================== */


/* === EKAMET Footer — unified layout across viewports (19.10.2025) === */
.footer{ background:#000; }
.footer__bar{
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  flex-wrap: nowrap;        /* keep single line */
  text-align: center;       /* center text block */
}
.footer__logo{ width:72px; height:auto; flex:0 0 auto; }
.footer__bar div{ font-size:12px; line-height:1.3; }
/* prevent wrap on small screens; allow overflow-x */
@media (max-width: 640px){
  .footer__bar{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* ==================================================================== */


/* === EKAMET Mobile Menu Button — black circle, white lines =========== */
.mobile-toggle{
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:#000; color:#fff;
  border:0; cursor:pointer;
}
.mobile-toggle .line,
.mobile-toggle .line::before,
.mobile-toggle .line::after{
  content:''; display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  position:relative;
}
.mobile-toggle .line::before{ position:absolute; top:-6px; left:0; }
.mobile-toggle .line::after{ position:absolute; top:6px; left:0; }

/* when menu is open, transform to X */
.mobile-toggle.is-open .line{ background:transparent; }
.mobile-toggle.is-open .line::before{
  top:0; transform:rotate(45deg);
}
.mobile-toggle.is-open .line::after{
  top:0; transform:rotate(-45deg);
}
/* Keep static (no scale) on active; subtle focus ring for accessibility */
.mobile-toggle:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
/* ==================================================================== */

/* Mobile toggle visibility & nav behavior */
.mobile-toggle{ display:none; }
@media (max-width:1024px){
  .mobile-toggle{ display:inline-flex; }
  .nav{ display:none; }
  .mobile-nav.show{ display:block; }
}

/* Footer unified layout */
.footer{ background:#000; }
.footer__bar{
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.footer__logo{ width:72px; height:auto; flex:0 0 auto; }
.footer__bar div{ font-size:12px; line-height:1.3; }


/* === EKAMET Footer — force horizontal layout on all viewports (final) === */
.footer{ background:#000; }
.footer__bar{
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: row;   /* always horizontal */
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  flex-wrap: nowrap;     /* never wrap */
  overflow-x: auto;      /* allow horizontal scroll on very narrow screens */
  -webkit-overflow-scrolling: touch;
  text-align: left;
}
.footer__logo{
  width:72px; height:auto; flex:0 0 auto;
}
.footer__bar div{
  white-space: nowrap;    /* keep in one row with logo */
  font-size: 12px;
  line-height: 1.3;
}
/* ======================================================================= */



/* === end v39 === */

/* === end v40 === */



/* ekamet burger v42 (black circle, white lines) */
.mobile-toggle{
  display:none; width:34px; height:34px; border:none; border-radius:50%;
  background:#000; color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; z-index:1100;
}
.mobile-toggle .line,
.mobile-toggle .line::before,
.mobile-toggle .line::after{
  content:""; position:absolute; width:15px; height:2px;
  background:#fff; border-radius:2px; transition:.2s ease;
}
.mobile-toggle .line::before{ transform:translateY(-3px); }
.mobile-toggle .line::after { transform:translateY( 3px); }
.mobile-toggle.is-open .line{ background:transparent; }
.mobile-toggle.is-open .line::before{ transform:rotate(45deg); }
.mobile-toggle.is-open .line::after { transform:rotate(-45deg); }

@media (max-width:1024px){ .mobile-toggle{ display:inline-flex; } }
@media (min-width:1025px){ .mobile-toggle{ display:none; } }

.mobile-nav{
  position:fixed; inset:0; display:none; z-index:1090;
  background:rgba(0,0,0,.4); backdrop-filter:blur(2px);
}
.mobile-nav.show{ display:block; }
.mobile-nav__panel{
  position:absolute; left:16px; right:16px; top:16px;
  background:#111; color:#fff; border-radius:16px; padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.mobile-nav__panel .mobile-toggle{
  position:absolute; right:12px; top:12px; width:32px; height:32px;
}
.mobile-nav__panel a{
  display:block; padding:12px 16px; margin:8px 0; border-radius:9999px;
  text-decoration:none; background:#eee; color:#111;
}
.mobile-nav__panel a:hover{ background:#ddd; }
.mobile-nav__panel a.active{ background:#000; color:#fff; }


/* === EKAMET v43: burger + drawer fixes (final) === */

/* Кнопка бургер — 32px, маленький зазор */
header .mobile-toggle{ width:32px; height:32px; }
header .mobile-toggle .line,
header .mobile-toggle .line::before,
header .mobile-toggle .line::after{ width:14px; height:2px; }
header .mobile-toggle .line::before{ transform:translateY(-2.5px); }
header .mobile-toggle .line::after { transform:translateY( 2.5px); }

/* Позиционирование бургера на моб./планшетах */
header{ position:relative; }
.header__actions{ display:flex; align-items:center; gap:14px; }
@media (max-width:1024px){
  .header__actions{ margin-right:48px; }
  header .mobile-toggle{
    position:absolute; right:16px; top:50%; transform:translateY(-50%);
    margin:0;
  }
}

/* Меню: левый выезжающий дроуэр, крестик аккуратно сверху */
.mobile-nav{ background:rgba(0,0,0,.45); }
.mobile-nav__panel{
  position:fixed; top:0; bottom:0; left:0; right:auto;
  width:320px; max-width:86vw;
  background:#111; color:#fff; border-radius:0 16px 16px 0;
  padding:16px 16px 20px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transform:translateX(-100%); transition:transform .28s ease;
}
.mobile-nav.show .mobile-nav__panel{ transform:translateX(0); }
.mobile-nav__panel .mobile-toggle{
  position:absolute; right:12px; top:12px; width:28px; height:28px;
}

/* Пункты меню: активный — белый фон/чёрный текст */
.mobile-nav__panel a{
  display:block; padding:12px 16px; margin:10px 0; border-radius:9999px;
  background:#eaeaea; color:#111; text-decoration:none; font-weight:600;
}
.mobile-nav__panel a:hover{ background:#e0e0e0; }
.mobile-nav__panel a.active{
  background:#fff; color:#000; box-shadow:inset 0 0 0 2px #000;
}
@media (max-width:380px){ .mobile-nav__panel{ width:300px; } }


/* v44 fixes: unify mobile-toggle, contacts photos grid */
header .mobile-toggle{
  width:32px!important;height:32px!important;background:#000!important;border:none!important;border-radius:50%!important;
  display:inline-flex!important;align-items:center;justify-content:center;padding:0!important;box-shadow:none!important;
}
header .mobile-toggle span, header .mobile-toggle .line,
header .mobile-toggle .line::before, header .mobile-toggle .line::after{
  background:#fff!important;
}
/* provide lines if span version */
header .mobile-toggle span{
  position:absolute;width:14px;height:2px;border-radius:2px;transition:.2s ease;content:"";display:block;
}
header .mobile-toggle span:nth-child(1){transform:translateY(-2.5px);}
header .mobile-toggle span:nth-child(2){transform:translateY(0);}
header .mobile-toggle span:nth-child(3){transform:translateY(2.5px);}
header .mobile-toggle.is-open span:nth-child(2){opacity:0;}
header .mobile-toggle.is-open span:nth-child(1){transform:rotate(45deg);}
header .mobile-toggle.is-open span:nth-child(3){transform:rotate(-45deg);}

@media (max-width:1024px){
  .header__actions{margin-right:48px;}
  header .mobile-toggle{position:absolute;right:16px;top:50%;transform:translateY(-50%);}
}

/* Drawer left */
.mobile-nav{background:rgba(0,0,0,.45);}
.mobile-nav__panel{position:fixed;top:0;bottom:0;left:0;right:auto;width:320px;max-width:86vw;
  background:#111;color:#fff;border-radius:0 16px 16px 0;padding:16px 16px 20px;
  transform:translateX(-100%);transition:transform .28s ease;}
.mobile-nav.show .mobile-nav__panel{transform:translateX(0);}
.mobile-nav__panel .mobile-toggle{position:absolute;right:12px;top:12px;width:28px;height:28px;background:#000;border-radius:50%;}
.mobile-nav__panel a{display:block;padding:12px 16px;margin:10px 0;border-radius:9999px;background:#eaeaea;color:#111;font-weight:600;text-decoration:none;}
.mobile-nav__panel a.active{background:#fff;color:#000;box-shadow:inset 0 0 0 2px #000;}

@media (max-width:380px){.mobile-nav__panel{width:300px;}}

/* Contacts two photos side-by-side */
.contacts .contacts-inner .photos-col{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start;
}
.contacts .contacts-inner .photos-col .card{margin:0;}
.contacts .contacts-inner .photos-col img{width:100%;height:auto;display:block;border-radius:16px;}

/* === v45 fixes === */
/* Header actions centered on mobile, burger pinned right */
header{ position:relative; }
.header__actions{ display:flex; align-items:center; gap:14px; }
@media (max-width:1024px){
  .header__actions{ justify-content:center; margin-right:56px; }
  header .mobile-toggle{ position:absolute; right:16px; top:50%; transform:translateY(-50%); }
}

/* Burger button: same visual weight as action icons */
header .mobile-toggle{
  width:44px; height:44px; border-radius:50%; border:none; background:#000;
  display:inline-flex; align-items:center; justify-content:center; padding:0; box-shadow:none;
}
/* three bars with tight spacing */
header .mobile-toggle .line,
header .mobile-toggle .line::before,
header .mobile-toggle .line::after{
  content:""; position:absolute; width:16px; height:2px; background:#fff; border-radius:2px; transition:.2s ease;
}
header .mobile-toggle .line::before{ transform:translateY(-3px); }
header .mobile-toggle .line::after { transform:translateY( 3px); }
header .mobile-toggle.is-open .line{ background:transparent; }
header .mobile-toggle.is-open .line::before{ transform:rotate(45deg); }
header .mobile-toggle.is-open .line::after { transform:rotate(-45deg); }

/* Drawer: left, close button neatly inside, active item contrasted */
.mobile-nav{ background:rgba(0,0,0,.45); }
.mobile-nav__panel{
  position:fixed; top:0; bottom:0; left:0; width:320px; max-width:86vw;
  right:auto; background:#111; color:#fff; border-radius:0 16px 16px 0;
  padding:16px 16px 20px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  transform:translateX(-100%); transition:transform .28s ease;
}
.mobile-nav.show .mobile-nav__panel{ transform:translateX(0); }
.mobile-nav__panel .mobile-toggle{ position:absolute; right:12px; top:12px; width:28px; height:28px; background:#000; }
.mobile-nav__panel a{
  display:block; padding:12px 16px; margin:10px 0; border-radius:9999px;
  background:#eaeaea; color:#111; font-weight:600; text-decoration:none;
}
.mobile-nav__panel a:hover{ background:#e0e0e0; }
.mobile-nav__panel a.active{ background:#fff; color:#000; box-shadow:inset 0 0 0 2px #000; }

@media (max-width:380px){ .mobile-nav__panel{ width:300px; } }

/* Contacts photos side by side */
.contacts .contacts-inner .photos-col{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; align-content:start;
}
.contacts .contacts-inner .photos-col .card{ margin:0; }
.contacts .contacts-inner .photos-col img{ width:100%; height:auto; display:block; border-radius:16px; }


/* === v70 FINAL === */
.header__bar{display:flex;align-items:center;gap:16px;padding:16px 24px}
.header__actions{display:flex;align-items:center;gap:25px}

/* Contact buttons: black 45x45 circles, white 26px icons */
.header__actions a,.header__actions .action{
  width:45px;height:45px;margin:0;padding:0;border:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;background:#000;box-sizing:border-box
}
.header__actions a img,.header__actions .action img{width:26px;height:26px;filter:invert(1) brightness(180%);display:block}

/* Burger: transparent, three black lines -> X */
header .mobile-toggle{
  width:45px;height:45px;margin:0;padding:0;background:transparent;border:0;border-radius:0;
  display:none;align-items:center;justify-content:center;cursor:pointer;line-height:0
}
header .mobile-toggle .line,
header .mobile-toggle .line::before,
header .mobile-toggle .line::after{
  content:"";display:block;width:24px;height:2px;background:#111;border-radius:2px;position:relative;transition:all .25s ease
}
header .mobile-toggle .line::before{position:absolute;top:-6px;left:0}
header .mobile-toggle .line::after{position:absolute;top:6px;left:0}
header .mobile-toggle.is-open .line{background:transparent}
header .mobile-toggle.is-open .line::before{top:0;transform:rotate(45deg)}
header .mobile-toggle.is-open .line::after{top:0;transform:rotate(-45deg)}

@media (min-width:1025px){ header .mobile-toggle{display:none!important} header .nav{display:flex!important} }
@media (max-width:1024px){ header .nav{display:none!important} header .mobile-toggle{display:inline-flex!important} }

/* Top dropdown */
.mobile-nav{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;z-index:9999}
.mobile-nav.show{display:block}
.mobile-nav__panel{position:absolute;top:0;left:0;right:0;background:#fff;padding:20px 24px 24px;box-shadow:0 12px 30px rgba(0,0,0,.2);transform:translateY(-110%);transition:transform .28s ease}
.mobile-nav.show .mobile-nav__panel{transform:translateY(0)}
.mobile-nav__panel .mobile-toggle{position:absolute;top:16px;right:16px;width:36px;height:36px;border:1px solid #111;border-radius:10px;background:#fff;display:inline-flex;align-items:center;justify-content:center}
.mobile-nav__panel .mobile-toggle .line{background:transparent}
.mobile-nav__panel .mobile-toggle .line::before,.mobile-nav__panel .mobile-toggle .line::after{content:"";position:absolute;width:20px;height:2px;background:#111;border-radius:2px}
.mobile-nav__panel .mobile-toggle .line::before{transform:rotate(45deg)}
.mobile-nav__panel .mobile-toggle .line::after{transform:rotate(-45deg)}
.mobile-nav__panel .menu{display:flex;flex-direction:column;gap:14px;margin-top:40px}
.mobile-nav__panel a{display:block;padding:16px 24px;border-radius:9999px;background:#6b6b6b;color:#fff;font-weight:800;text-align:center;text-decoration:none}
.mobile-nav__panel a.active{background:#000;color:#fff}

/* === v72: use original icons @ 45x45, no extra background ————————— */
.header__bar{display:flex;align-items:center;gap:16px;padding:16px 24px}
.header__actions{display:flex;align-items:center;gap:25px}
.header__actions a,
.header__actions .action{
  width:45px;height:45px;margin:0;padding:0;border:0;border-radius:0;
  display:inline-flex;align-items:center;justify-content:center;line-height:0;box-sizing:content-box;background:transparent
}
.header__actions a img,
.header__actions .action img{
  width:45px;height:45px;display:block;filter:none !important;background:transparent !important;border:0 !important;border-radius:0 !important;
}
/* ensure no legacy margins sneak in */
.header__actions a + a,
.header__actions .action + .action{ margin-left:0 !important; }

/* Burger (transparent) override to be safe */
header .mobile-toggle{
  width:45px;height:45px;margin:0;padding:0;background:transparent;border:0;border-radius:0;
  display:none;align-items:center;justify-content:center;cursor:pointer;line-height:0
}
header .mobile-toggle .line,
header .mobile-toggle .line::before,
header .mobile-toggle .line::after{content:"";display:block;width:24px;height:2px;background:#111;border-radius:2px;position:relative;transition:all .25s ease}
header .mobile-toggle .line::before{position:absolute;top:-6px;left:0}
header .mobile-toggle .line::after{position:absolute;top:6px;left:0}
header .mobile-toggle.is-open .line{background:transparent}
header .mobile-toggle.is-open .line::before{top:0;transform:rotate(45deg)}
header .mobile-toggle.is-open .line::after{top:0;transform:rotate(-45deg)}
@media (min-width:1025px){ header .mobile-toggle{display:none!important} header .nav{display:flex!important} }
@media (max-width:1024px){ header .nav{display:none!important} header .mobile-toggle{display:inline-flex!important} }

/* === v73: header centering + smoother top-sheet animation === */
.header__bar{
  display:flex;
  align-items:center;            /* vertical centering */
  justify-content:space-between; /* logo — nav — actions distribute */
  gap:16px;
  min-height:72px;               /* consistent header height for centering */
}
.header__logo, .header__logo img{display:block}

/* Contacts block stays centered */
.header__actions{
  display:flex;
  align-items:center;            /* vertical centering inside actions */
  justify-content:center;
  gap:25px;
}
.header__actions a,
.header__actions .action{
  width:45px;height:45px;margin:0;padding:0;border:0;border-radius:0;
  display:inline-flex;align-items:center;justify-content:center;line-height:0;background:transparent
}
.header__actions img{width:45px;height:45px;display:block}

/* Burger (transparent, 3 lines -> X) remains */
header .mobile-toggle{
  width:45px;height:45px;margin:0;padding:0;background:transparent;border:0;border-radius:0;
  display:none;align-items:center;justify-content:center;cursor:pointer;line-height:0
}
header .mobile-toggle .line,
header .mobile-toggle .line::before,
header .mobile-toggle .line::after{
  content:"";display:block;width:24px;height:2px;background:#111;border-radius:2px;position:relative;transition:all .25s ease
}
header .mobile-toggle .line::before{position:absolute;top:-6px;left:0}
header .mobile-toggle .line::after{position:absolute;top:6px;left:0}
header .mobile-toggle.is-open .line{background:transparent}
header .mobile-toggle.is-open .line::before{top:0;transform:rotate(45deg)}
header .mobile-toggle.is-open .line::after{top:0;transform:rotate(-45deg)}
@media (min-width:1025px){ header .mobile-toggle{display:none!important} header .nav{display:flex!important} }
@media (max-width:1024px){ header .nav{display:none!important} header .mobile-toggle{display:inline-flex!important} }

/* Top dropdown: fade + slide */
.mobile-nav{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;
  transition:opacity .28s ease;
  z-index:9999;
}
.mobile-nav.show{opacity:1;pointer-events:auto}
.mobile-nav__panel{
  position:absolute;top:0;left:0;right:0;background:#fff;
  padding:20px 24px 24px;box-shadow:0 12px 30px rgba(0,0,0,.2);
  transform:translateY(-12%);opacity:.98;transition:transform .28s ease;
}
.mobile-nav.show .mobile-nav__panel{transform:translateY(0)}
.mobile-nav__panel .mobile-toggle{
  position:absolute;top:16px;right:16px;width:36px;height:36px;border:1px solid #111;border-radius:10px;background:#fff;
  display:inline-flex;align-items:center;justify-content:center
}
.mobile-nav__panel .mobile-toggle .line{background:transparent}
.mobile-nav__panel .mobile-toggle .line::before,
.mobile-nav__panel .mobile-toggle .line::after{content:"";position:absolute;width:20px;height:2px;background:#111;border-radius:2px}
.mobile-nav__panel .mobile-toggle .line::before{transform:rotate(45deg)}
.mobile-nav__panel .mobile-toggle .line::after{transform:rotate(-45deg)}
.mobile-nav__panel .menu{display:flex;flex-direction:column;gap:14px;margin-top:40px}
.mobile-nav__panel a{display:block;padding:16px 24px;border-radius:9999px;background:#6b6b6b;color:#fff;font-weight:800;text-align:center;text-decoration:none}
.mobile-nav__panel a.active{background:#000;color:#fff}

/* === v74: mobile center for contact icons === */
@media (max-width: 1024px){
  .header__bar{ position: relative; }
  .header__actions{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* perfect center of header bar */
    justify-content: center;
  }
}

/* === v75: burger without circle, only black lines, and reliable override === */
header .mobile-toggle{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
header .mobile-toggle .line,
header .mobile-toggle .line::before,
header .mobile-toggle .line::after{
  background:#111 !important;
}

/* === v76: burger +10%, thicker lines; top-sheet like reference === */
header .mobile-toggle{
  width:50px; height:50px; /* +10% */
}
header .mobile-toggle .line,
header .mobile-toggle .line::before,
header .mobile-toggle .line::after{
  width:28px; /* wider */
  height:3px; /* thicker */
}
header .mobile-toggle .line::before{ top:-5px; }
header .mobile-toggle .line::after{ top:5px; }

/* Top sheet full-width from under header */
.mobile-nav{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:9999;
}
.mobile-nav.show{ opacity:1; pointer-events:auto; }
.mobile-nav__panel{
  position:absolute; top:0; left:0; right:0;
  background:#fff; padding:14px 18px 22px;
  border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  box-shadow:0 14px 36px rgba(0,0,0,.22);
  transform:translateY(-110%); transition:transform .3s ease;
}
.mobile-nav.show .mobile-nav__panel{ transform:translateY(0); }

/* Head row in sheet */
.mobile-nav__head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:12px;
}
.mobile-nav__logo img{ height:32px; display:block; }
.mobile-nav__actions{ display:flex; align-items:center; gap:14px; }
.mobile-nav__actions img{ width:28px; height:28px; display:block; }

/* Close button (X) */
.mobile-nav__close{ width:40px; height:40px; border:1px solid #111; border-radius:12px; background:#fff;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.mobile-nav__close .line{ background:transparent; }
.mobile-nav__close .line::before, .mobile-nav__close .line::after{ content:""; position:absolute; width:22px; height:3px; background:#111; border-radius:2px; }
.mobile-nav__close .line::before{ transform:rotate(45deg); }
.mobile-nav__close .line::after{ transform:rotate(-45deg); }

/* Menu buttons */
.mobile-nav__menu{ display:flex; flex-direction:column; gap:16px; margin-top:8px; }
.mobile-nav__menu a{ display:block; padding:16px 24px; border-radius:9999px; background:#6b6b6b; color:#fff;
  font-weight:800; text-align:center; text-decoration:none; }
.mobile-nav__menu a.active{ background:#000; color:#fff; }

/* === v77: z-index + safety === */
header.header{position:sticky;top:0;background:#fff;z-index:1200}
.mobile-nav{z-index:3000}

/* === v78: make burger always clickable on mobile and not obscured === */
@media (max-width:1024px){
  .header__bar{ position:relative; }
  header .mobile-toggle{ position:relative; z-index:2500; } /* above actions */
  .header__actions{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    z-index:1000; pointer-events:none; } /* container ignores clicks */
  .header__actions a, .header__actions .action{ pointer-events:auto; } /* icons still clickable */
}

/* === v80: center burger vertically; ensure actions center; keep clicks === */
@media (max-width:1024px){
  .header__bar{display:flex;align-items:center;justify-content:space-between;min-height:72px;position:relative}
  header .mobile-toggle{align-self:center;position:relative;z-index:2500;margin-left:auto}
  .header__actions{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    display:flex;align-items:center;justify-content:center;gap:25px;
    z-index:1000; pointer-events:none;
  }
  .header__actions a,.header__actions .action{pointer-events:auto}
}

/* === v82: CSS-only mobile menu (no JS) === */
@media (max-width:1024px){
  /* hidden checkbox drives state */
  #nav-toggle{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px; }
  /* when checked, show sheet */
  #nav-toggle:checked ~ .mobile-nav{ opacity:1 !important; pointer-events:auto !important; }
  #nav-toggle:checked ~ .mobile-nav .mobile-nav__panel{ transform:translateY(0) !important; }
  /* animate burger to X when checked */
  #nav-toggle:checked + label.mobile-toggle .line{ background:transparent; }
  #nav-toggle:checked + label.mobile-toggle .line::before{ transform:rotate(45deg) translateY(0); top:0; }
  #nav-toggle:checked + label.mobile-toggle .line::after{ transform:rotate(-45deg) translateY(0); top:0; }
}

/* === v83 fixes === */
/* Always hide the checkbox (desktop & mobile) */
#nav-toggle{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px; }

@media (max-width:1024px){
  /* Ensure sheet covers and fades */
  .mobile-nav{ position:fixed !important; inset:0 !important; background:rgba(0,0,0,.6) !important; opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:4000 !important; }
  /* Top dropdown panel */
  .mobile-nav__panel{
    position:absolute !important; left:0 !important; right:0 !important; top:0 !important;
    background:#fff !important; padding:18px 18px 24px !important;
    border-bottom-left-radius:16px !important; border-bottom-right-radius:16px !important;
    transform:translateY(-110%) !important; transition:transform .3s ease !important;
    box-shadow:0 12px 40px rgba(0,0,0,.15) !important;
  }
  /* Show via checkbox */
  #nav-toggle:checked ~ .mobile-nav{ opacity:1 !important; pointer-events:auto !important; }
  #nav-toggle:checked ~ .mobile-nav .mobile-nav__panel{ transform:translateY(0) !important; }
  /* Burger -> X */
  #nav-toggle:checked + label.mobile-toggle .line{ background:transparent !important; }
  #nav-toggle:checked + label.mobile-toggle .line::before{ transform:rotate(45deg) translateY(0) !important; top:0 !important; }
  #nav-toggle:checked + label.mobile-toggle .line::after{ transform:rotate(-45deg) translateY(0) !important; top:0 !important; }
}

/* === v84: full-width top dropdown like enlarged header === */
@media (max-width:1024px){
  /* Panel overlays whole width, looks like enlarged header */
  .mobile-nav{ position:fixed !important; inset:0 !important; background:rgba(0,0,0,.6) !important; opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:4000 !important; }
  .mobile-nav__panel{
    position:absolute !important; left:0 !important; right:0 !important; top:0 !important;
    background:#fff !important; border-bottom-left-radius:20px !important; border-bottom-right-radius:20px !important;
    transform:translateY(-110%) !important; transition:transform .28s ease !important; box-shadow:0 24px 60px rgba(0,0,0,.18) !important;
    padding:14px 16px 22px !important;
  }
  #nav-toggle:checked ~ .mobile-nav{ opacity:1 !important; pointer-events:auto !important; }
  #nav-toggle:checked ~ .mobile-nav .mobile-nav__panel{ transform:translateY(0) !important; }

  /* Head row inside panel: logo left, actions center, cross right */
  .mobile-nav__head{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:16px !important; }
  .mobile-nav__logo{ height:44px !important; }
  .mobile-nav__actions{ display:flex !important; align-items:center !important; justify-content:center !important; gap:25px !important; }
  .mobile-nav__actions a{ width:45px !important; height:45px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; background:#000 !important; }
  .mobile-nav__actions img{ width:26px !important; height:26px !important; display:block !important; }
  .mobile-nav__close{ width:44px !important; height:44px !important; position:relative !important; border-radius:12px !important; background:#fff !important; border:1px solid #d9d9d9 !important; }
  .mobile-nav__close span, .mobile-nav__close span::before, .mobile-nav__close span::after{ content:""; position:absolute; left:50%; top:50%; width:22px; height:2px; background:#111; transform-origin:center; }
  .mobile-nav__close span{ background:transparent; }
  .mobile-nav__close span::before{ transform:translate(-50%,-50%) rotate(45deg); }
  .mobile-nav__close span::after{ transform:translate(-50%,-50%) rotate(-45deg); }

  /* Menu buttons */
  .mobile-nav__menu{ display:flex !important; flex-direction:column !important; gap:18px !important; padding:18px 0 6px !important; }
  .mobile-nav__menu a{ display:block !important; text-decoration:none !important; color:#fff !important; font-weight:800 !important; font-size:20px !important; letter-spacing:.2px !important;
     background:#6e6e6e !important; padding:16px 22px !important; border-radius:24px !important; text-align:center !important; }
  .mobile-nav__menu a.is-active{ background:#000 !important; }
}

/* === v85: hard override to full-width top panel and neutralize side-drawer rules === */
@media (max-width:1024px){
  .mobile-nav__panel{
    left:0 !important; right:0 !important; width:auto !important; max-width:none !important;
    height:auto !important;
    transform:translateY(-110%) !important; /* force vertical, cancel any X */
  }
  .mobile-nav{ justify-content:flex-start !important; align-items:flex-start !important; }
}


/* === v98: click-through + no-duplicate burger === */
header .mobile-toggle{ display:none; }
@media (max-width:1024px){
  header .mobile-toggle{ display:inline-flex; position:relative; z-index:6000; pointer-events:auto; }
  header .mobile-toggle:not(:first-of-type){ display:none !important; }
  header .nav{ display:none !important; }
  .header__actions{ position:relative; z-index:auto; }
}
@media (min-width:1025px){
  header .mobile-toggle{ display:none !important; }
  .mobile-nav{ display:none !important; opacity:0 !important; pointer-events:none !important; }
}
header.header{ position:sticky; top:0; z-index:4000; }
.mobile-nav{ z-index:4500; }

/* Updated Mobile Nav Structure */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  z-index: 4000;
}
.mobile-nav.show {
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav__panel {
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  background: #fff;
  padding: 14px 18px 22px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  transform: translateY(-110%);
  transition: transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.mobile-nav.show .mobile-nav__panel {
  transform: translateY(0);
}
.mobile-nav::before {
  content: '';
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.mobile-nav.show::before {
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav__menu a {
  display: block;
  padding: 12px 24px;
  margin: 8px 0;
  background: #777;
  color: white;
  text-align: center;
  border-radius: 24px;
  text-decoration: none;
  font-weight: bold;
}
.mobile-nav__menu a.is-active {
  background: #000;
}

/*
 * === EKAMET v100 mobile menu redesign ===
 *
 * These styles override the previous mobile navigation implementation.  The
 * navigation drawer now slides down from beneath the fixed header,
 * darkening only the content below the header.  The hamburger button
 * morphs into an X when the drawer is open, matching the provided
 * reference design.  Navigation links are displayed as pill‑shaped
 * buttons with the current page highlighted.
 */

/* Ensure the hamburger is visible on small viewports and the desktop
   navigation is hidden. */
@media (max-width:1024px) {
  header .nav {
    display: none !important;
  }
  header .mobile-toggle {
    display: inline-flex !important;
  }
}

/* Fullscreen overlay container.  We set pointer-events to none by
   default so that clicks pass through when the menu is closed. */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  z-index: 4000;
}
.mobile-nav.show {
  opacity: 1;
  pointer-events: auto;
}

/* Dim only the area below the header.  The overlay becomes active
   when the drawer is open, allowing clicks to close the menu. */
.mobile-nav::before {
  content: '';
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.mobile-nav.show::before {
  opacity: 1;
  pointer-events: auto;
}

/* The panel containing the navigation links slides down from beneath
   the header.  Its top is aligned to the header height (72px). */
.mobile-nav__panel {
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  background: #fff;
  padding: 14px 18px 22px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  transform: translateY(-110%);
  transition: transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.mobile-nav.show .mobile-nav__panel {
  transform: translateY(0);
}

/* The head row inside the drawer (logo and action icons). */
.mobile-nav__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Style the action icons inside the drawer. */
.mobile-nav__actions img {
  width: 24px;
  height: auto;
  margin-left: 8px;
}

/* Navigation links: pill shaped buttons with bold text. */
.mobile-nav__menu a {
  display: block;
  padding: 12px 24px;
  margin: 8px 0;
  border-radius: 24px;
  background: #777;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
}

/* Highlight the active page in the drawer. */
.mobile-nav__menu a.is-active {
  background: #000;
}

/* Hide the close button inside the drawer—we use the hamburger/X in
   the header instead. */
.mobile-nav__close {
  display: none !important;
}

/* Style the hamburger toggle to match the reference design.  It
   appears as a circular black button with white bars which rotate
   into an X when the drawer is open. */
header .mobile-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  cursor: pointer;
}
header .mobile-toggle .line,
header .mobile-toggle .line::before,
header .mobile-toggle .line::after {
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  position: relative;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
header .mobile-toggle .line::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
}
header .mobile-toggle .line::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
}

/* Morph the hamburger into an X when the menu is open. */
header .mobile-toggle.is-open .line {
  background: transparent;
}
header .mobile-toggle.is-open .line::before {
  top: 0;
  transform: rotate(45deg);
}
header .mobile-toggle.is-open .line::after {
  top: 0;
  transform: rotate(-45deg);
}

/*
 * Responsive adjustments: unify the size of the contact buttons and the burger
 * icon on narrow screens, and shrink the logo. These overrides apply on
 * screens up to 768px wide and ensure all circular buttons (phone, WhatsApp,
 * mail, and burger) are the same dimensions. The inner SVG/IMG icons are
 * scaled proportionally, and the hamburger lines are lengthened to match.
 */
@media (max-width: 768px) {
  /* Shrink logo to visually align with the circular icons */
  header .header__logo {
    width: 64px !important;
    height: auto !important;
  }
  /* Unify contact buttons and burger dimensions */
  header .header__actions a,
  header .header__actions .action,
  header .mobile-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  /* Inner icons fill their buttons */
  header .header__actions a img,
  header .header__actions .action img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 50% !important;
  }
  /* Burger lines: shorten and adjust spacing */
  header .mobile-toggle .line,
  header .mobile-toggle .line::before,
  header .mobile-toggle .line::after {
    width: 22px !important;
    height: 3px !important;
  }
  header .mobile-toggle .line::before {
    top: -6px !important;
  }
  header .mobile-toggle .line::after {
    top: 6px !important;
  }
}

/* Fine-tune for very small (phone) screens: reduce logo, buttons, and footer further */
@media (max-width: 480px) {
  /* Even smaller logo on tiny screens */
  header .header__logo {
    width: 56px !important;
    height: auto !important;
  }
  /* Smaller buttons and burger */
  header .header__actions a,
  header .header__actions .action,
  header .mobile-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
  /* Inner icons fill their reduced buttons */
  header .header__actions a img,
  header .header__actions .action img {
    width: 100% !important;
    height: 100% !important;
  }
  /* Burger lines shorter and with tighter spacing */
  header .mobile-toggle .line,
  header .mobile-toggle .line::before,
  header .mobile-toggle .line::after {
    width: 18px !important;
    height: 3px !important;
  }
  header .mobile-toggle .line::before { top: -5px !important; }
  header .mobile-toggle .line::after  { top:  5px !important; }
  /* Footer logo and text smaller */
  footer .footer__logo {
    width: 56px !important;
    height: auto !important;
  }
  footer .footer__bar div {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
  footer {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}
#price-top {
  text-align: center;
}