/* ==========================================================================
   Lana Filippova Interiors — header, off-canvas navigation, hero
   Child theme. Nothing here edits the parent; it restyles markup the parent
   already renders, so a parent update cannot silently wipe it.

   Layout at EVERY width: logo left, then envelope, search and burger right.
   The horizontal menu is gone entirely and lives in a slide-in panel.
   ========================================================================== */

:root {
  --lfi-bar-h: 74px;
  --lfi-bar-h-sm: 62px;
  --lfi-top-h: 38px;              /* the social strip, pinned above the bar */
  --lfi-top-h-sm: 34px;
  --lfi-head-h: 112px;            /* top + bar; both media queries reset it */
  --lfi-accent: #65aeb4;          /* the theme's own accent */
  --lfi-ink: #ffffff;
  --lfi-bar-bg: #12171f;          /* matches .header-top.custom, so the social
                                     strip and the nav read as one dark header */
  --lfi-panel: #1c1c1c;
  --lfi-panel-line: rgba(255, 255, 255, .12);
}



/* ------------------------------------------------- the social strip ------ */
/* Pinned with the bar, not scrolled away from under it: the two read as one
   header, so only one of them staying put looks like a bug. Its height is
   declared rather than measured, because every offset below depends on it. */
.header-top.custom {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1041;                  /* above the bar, so its shadow cannot cover it */
  height: var(--lfi-top-h);
  background: var(--lfi-bar-bg);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.header-top.custom > .container,
.header-top.custom > .container > .row,
.header-top.custom .bar { height: 100%; }
.header-top.custom > .container > .row { margin: 0; }
.header-top.custom .bar { padding: 0; }
.header-top.custom .social-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  margin: 0;
  padding: 0;
  float: none !important;
  list-style: none;
}
.header-top.custom .social-links li { float: none !important; margin: 0; }
.header-top.custom .social-links li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: var(--lfi-top-h);
  border: 0 !important;
  border-radius: 0;
  font-size: 14px;
  line-height: 1;
  color: rgba(255, 255, 255, .68);
  background: none !important;
  transition: color .15s ease;
}
.header-top.custom .social-links li a:hover,
.header-top.custom .social-links li a:focus-visible { color: var(--lfi-accent); }
.header-top.custom .social-links li a:focus-visible { outline: 2px solid var(--lfi-accent); outline-offset: -2px; }

/* --------------------------------------------------------------- the bar */
.header-style-2.fixed,
.header-style-2 {
  position: fixed !important;
  top: var(--lfi-top-h) !important;   /* the theme's own sticky rule sets 0 */
  left: 0;
  right: 0;
  z-index: 1040;
  background: var(--lfi-bar-bg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
  min-height: var(--lfi-bar-h);
}

/* The parent lays the bar out as a Bootstrap row of col-md-3 + col-md-9,
   which stacks on mobile - that is the centred logo with the burger beneath
   it. Flex instead, so the two sit on one line at every width. */
.header-style-2 > .container > .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin: 0;
  min-height: var(--lfi-bar-h);
}
/* The logo column is col-md-3, which is width:25% on desktop and 100% on
   mobile - the 100% is what let the logo centre itself. */
.header-style-2 > .container > .row > [class*="col-"] {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  flex: 0 0 auto;
  text-align: left !important;
}
.header-style-2 > .container > .row > [class*="col-"]:last-child {
  flex: 1 1 auto;               /* the icon cluster takes the remaining space */
  min-width: 0;
  /* and it is a flex ROW: the parent's leftover .navbar is 50px tall, so as a
     block container it stacked above the icons and made the bar 95px deep. */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.header-style-2 .logo {
  display: block !important;        /* parent sets table-cell */
  margin: 0 !important;             /* parent sets 0 auto - that is the centring */
  height: auto !important;          /* parent fixes 80px */
  padding: 0;
  vertical-align: baseline !important;
  text-align: left;
}
.header-style-2 .logo img,
.header-style-2 #logo {
  max-height: 46px;
  width: auto;
  margin: 0 !important;
  display: block;
}
.header-style-2 .logo a { display: block; }

/* The nav column becomes the icon cluster. */
.header-style-2 .navbar {
  margin: 0;
  border: 0;
  background: none;
  height: auto !important;      /* the theme gives it a hard 50px */
  min-height: 0 !important;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.header-style-2 .navbar-header { float: none; display: flex; align-items: center; }

/* The horizontal menu never renders. JS moves it into the panel; this hides
   it even before JS runs, so there is no flash of a full menu bar. */
.header-style-2 .navbar-main-menu,
.header-style-2 #navbar-collapse-1 { display: none !important; }

/* ------------------------------------------------------ icons: ✉ 🔍 ☰ ---- */
.lfi-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* it is a BLOCK inside a non-flex column, so
                                  margin-left:auto resolves to 0 and does not
                                  right-align it. This does. */
  gap: 4px;
  margin-left: auto;
}
.lfi-icon {
  appearance: none;
  border: 0;
  background: none;
  color: #fff;
  width: 44px;                 /* 44px: a real touch target */
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 2px;
  transition: color .15s ease, background .15s ease;
}
.lfi-icon:hover,
.lfi-icon:focus-visible { color: var(--lfi-accent); background: rgba(255, 255, 255, .08); }
.lfi-icon:focus-visible { outline: 2px solid var(--lfi-accent); outline-offset: -2px; }

/* Burger, drawn rather than borrowed, so it can animate to a cross. */
.lfi-burger span {
  display: block;
  position: relative;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}
.lfi-burger span::before,
.lfi-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform .25s ease, top .25s ease;
}
.lfi-burger span::before { top: -7px; }
.lfi-burger span::after  { top: 7px; }
.lfi-burger[aria-expanded="true"] span { background: transparent; }
.lfi-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.lfi-burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* The parent's own toggle and symbol list are replaced by .lfi-icons */
.header-style-2 .navbar-toggle,
.header-style-2 .navbar-symbols { display: none !important; }

/* ------------------------------------------------------------- search ---- */
.lfi-search {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--lfi-bar-bg);
  border-top: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .6);
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease, padding .25s ease;
}
.lfi-search.is-open { max-height: 90px; padding: 14px 20px; }
.lfi-search form { display: flex; gap: 8px; max-width: 720px; margin: 0 auto; }
.lfi-search input[type="text"],
.lfi-search input[type="search"] {
  flex: 1 1 auto;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 2px;
  font-size: 16px;             /* 16px stops iOS zooming the page on focus */
  background: rgba(255, 255, 255, .06);
  color: #fff;
}
.lfi-search input::placeholder { color: rgba(255, 255, 255, .55); }
.lfi-search input:focus { outline: 2px solid var(--lfi-accent); outline-offset: -2px; }
.lfi-search .form-group { flex: 1 1 auto; margin: 0; }

/* ------------------------------------------------------- the nav panel --- */
.lfi-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 1050;
}
.lfi-backdrop.is-open { opacity: 1; visibility: visible; }

.lfi-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 86vw);
  background: var(--lfi-panel);
  color: #fff;
  z-index: 1060;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.lfi-panel.is-open { transform: translateX(0); }

.lfi-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* logo left, close right */
  gap: 12px;
  padding: 12px 12px 12px 22px;
  min-height: var(--lfi-bar-h);
  border-bottom: 1px solid var(--lfi-panel-line);
  flex: 0 0 auto;
}
.lfi-panel-logo { display: block; padding: 0; line-height: 0; }
.lfi-panel-logo:hover { background: none; }
.lfi-panel-logo img { max-height: 38px; width: auto; display: block; }
.lfi-panel-head .lfi-icon { color: #fff; }
.lfi-panel-head .lfi-icon:hover { color: var(--lfi-accent); background: rgba(255, 255, 255, .08); }

.lfi-panel nav { padding: 8px 0 24px; }
/* The menu that was moved in here is still `.nav.navbar-nav`, and Bootstrap
   floats those items LEFT from 768px up - which laid the panel out as a
   horizontal menu wrapped into three rows on desktop. It is a vertical list at
   every width now. */
.lfi-panel ul,
.lfi-panel .navbar-nav {
  list-style: none;
  margin: 0 !important;
  padding: 0;
  float: none !important;
  display: block !important;
  width: 100% !important;
}
.lfi-panel li {
  border-bottom: 1px solid var(--lfi-panel-line);
  float: none !important;
  display: block !important;
  width: 100% !important;
}
/* The theme draws its own FontAwesome caret in an ::before on a dropdown
   parent; ours is the real toggle, so two chevrons were rendering. */
.lfi-panel .caret,
.lfi-panel .has-children > a::before,
.lfi-panel .has-children > a::after,
.lfi-panel .dropdown > a::before,
.lfi-panel .dropdown > a::after,
.lfi-panel .dropdown > a > i { display: none !important; content: none !important; }
.lfi-panel li:last-child { border-bottom: 0; }
.lfi-panel a {
  display: block;
  padding: 15px 22px;
  color: #fff;
  font-size: 15px;
  letter-spacing: .02em;
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.lfi-panel a:hover,
.lfi-panel a:focus-visible { color: var(--lfi-accent); background: rgba(255, 255, 255, .05); }
.lfi-panel .current-menu-item > a,
.lfi-panel .current_page_item > a { color: var(--lfi-accent); }

/* Sub-menus: an accordion, because a 37-page site will not fit on one screen.
   The theme's desktop dropdown styling is emphatic - it forces display:block and
   paints every child link in the accent colour - so the closed state and the
   skin both have to be stated with !important or the panel opens fully expanded
   in solid teal. */
.lfi-panel .dropdown-menu,
.lfi-panel .sub-menu {
  position: static !important;
  display: none !important;
  float: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: rgba(0, 0, 0, .28) !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.lfi-panel li.is-open > .dropdown-menu,
.lfi-panel li.is-open > .sub-menu { display: block !important; }
.lfi-panel .dropdown-menu a,
.lfi-panel .sub-menu a {
  padding-left: 40px;
  font-size: 14px;
  color: rgba(255, 255, 255, .82) !important;
  background: transparent !important;
}
.lfi-panel .dropdown-menu a:hover,
.lfi-panel .sub-menu a:hover,
.lfi-panel .dropdown-menu a:focus-visible,
.lfi-panel .sub-menu a:focus-visible {
  color: var(--lfi-accent) !important;
  background: rgba(255, 255, 255, .05) !important;
}

.lfi-sub-toggle {
  position: absolute;
  right: 0;
  top: 0;
  width: 54px;
  height: 50px;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  transition: transform .2s ease;
}
.lfi-panel li { position: relative; }
.lfi-panel li.is-open > .lfi-sub-toggle { transform: rotate(180deg); }
.lfi-sub-toggle:focus-visible { outline: 2px solid var(--lfi-accent); outline-offset: -2px; }
.lfi-panel .has-children > a { padding-right: 56px; }

.lfi-panel-foot {
  margin-top: auto;
  padding: 20px 22px 26px;
  border-top: 1px solid var(--lfi-panel-line);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .7);
}
.lfi-panel-foot a { display: inline; padding: 0; color: rgba(255, 255, 255, .7); }
.lfi-panel-foot a:hover { color: var(--lfi-accent); background: none; }
.lfi-panel-foot strong { color: #fff; font-weight: 600; display: block; margin-bottom: 6px; }

body.lfi-locked { overflow: hidden; }

/* ------------------------------------------------ "Drop us a line" panel -- */
/* The parent's only close control is the envelope/minus tab at the bottom
   right, which reads as a decoration rather than a control. */
/* Bootstrap makes every .col-* position:relative, so THAT is the button's
   containing block, not .preheader - which is why an offset measured from the
   panel put it beside the Name field. It is anchored to the column the heading
   is in, which is where it should read from anyway. */
/* The contact panel opens OVER the header, not under it.
   `.preheader` is position:absolute with z-index 1002 in the parent theme, and
   a positioned element with a z-index creates a STACKING CONTEXT - so raising
   the z-index of anything inside it does nothing at all against the bar's 1040;
   the whole subtree competes as 1002 and loses. The fix belongs on .preheader
   itself. Fixing the child instead also drops the panel's background, because
   the rgba(0,0,0,.8) is on .preheader, not on the part that slides. */
.preheader { z-index: 1080; }
/* The theme's own rgba(0,0,0,.8) is fine over white page content, but the panel
   now opens over the hero photograph, and white form outlines on a lit interior
   shot are hard to read. Darker, still translucent. */
.preheader { background-color: rgba(0, 0, 0, .93) !important; }
.preheader-content { position: relative; }
.preheader-content .row > [class*="col-"] { position: relative; }
.lfi-preheader-close {
  position: absolute;
  top: -4px;                   /* aligned with the heading it sits beside */
  right: 15px;                 /* the column's own gutter, so it lines up */
  z-index: 5;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .65;
  transition: opacity .15s ease, transform .15s ease;
}
.lfi-preheader-close:hover { opacity: 1; transform: scale(1.08); }
.lfi-preheader-close:focus-visible { outline: 2px solid var(--lfi-accent); outline-offset: 2px; opacity: 1; }
/* Sat beside the heading rather than floating, so it reads as belonging to it */
.preheader .preheader-content h2 { padding-right: 52px; }

/* No header offset any more: it covers the header instead of clearing it. */
/* no offset needed here: the column is inside the padded content, so it
   already starts below the fixed header. */

/* --------------------------------------------------------------- offset -- */
/* A fixed header needs the page pushed down, or it sits on top of the content. */
body { padding-top: var(--lfi-head-h); }
body.admin-bar .header-top.custom { top: 32px; }
body.admin-bar .header-style-2 { top: calc(32px + var(--lfi-top-h)); }

/* The hero fills the screen and the header sits on top of it, so the body's own
   top offset would push the whole page down by the height of the header twice. */
body.lfi-has-hero { padding-top: 0; }
body.lfi-has-hero .lfi-hero { margin-top: 0; }

/* ----------------------------------------------------------- the hero ---- */
/* THE SLIDER KEEPS ITS OWN LAYERS. They were hidden once, with a static overlay
   put in their place, and the client's reaction was that the animated company
   name and the changing photographs were the part that looked expensive. She
   was right, and nothing here hides them again.

   What IS ours is the size: a full screen at every width, rather than Slider
   Revolution's 600/600/500/400 design grid, which on a phone is a 325px band
   with a page starting underneath it.

   svh is the SMALL viewport height - the one measured with the phone's URL bar
   showing - so the bottom of the banner is not under the browser chrome on
   first paint. */
:root { --lfi-hero-h: 100vh; }
@supports (height: 100svh) { :root { --lfi-hero-h: 100svh; } }

.lfi-hero {
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  height: var(--lfi-hero-h) !important;
  min-height: var(--lfi-hero-h) !important;
  background: #0d0f12;                 /* behind the photo while it decodes */
}
/* a fixed bar plus a 100vw child is the classic horizontal-scrollbar bug */
html, body { overflow-x: hidden; }

/* Slider Revolution 6 is CUSTOM ELEMENTS - rs-module, rs-slide, rs-sbg-wrap -
   not the 5.x `.tp-*` classes. Styling the 5.x names looks right and does
   nothing at all, which is what letterboxed the slide into a band at the top of
   a full-height hero. RS rewrites inline heights from its own design grid on
   every resize, so these have to be !important to survive. */
.lfi-hero rs-fullwidth-wrap,
.lfi-hero rs-module-wrap,
.lfi-hero rs-module,
.lfi-hero rs-slides,
.lfi-hero rs-slide,
.lfi-hero rs-sbg-px,
.lfi-hero rs-sbg-wrap,
.lfi-hero rs-fw-forcer {
  height: var(--lfi-hero-h) !important;
  min-height: var(--lfi-hero-h) !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  top: 0 !important;
}
/* The photograph fills and crops rather than distorting. */
.lfi-hero rs-sbg,
.lfi-hero rs-sbg-wrap img,
.lfi-hero rs-sbg-px img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* CROSS-FADE BETWEEN SLIDES.
   The slide transition is configured in the database (scripts/set-slider-
   transition.php writes timeline.transition=fade, which emits data-in="o:0;"),
   but Slider Revolution never animates the background here: measured over a
   change, every rs-slide, rs-sbg-wrap and rs-sbg-px stays at opacity 1 while it
   swaps `display` and z-index across the 1200ms, so it reads as a hard cut.
   So the fade is ours. RS reveals the incoming slide on top (highest z-index of
   the displayed ones) and keeps the outgoing one displayed underneath for the
   whole transition, so fading ONLY the incoming one up is a true cross-fade.
   The class is applied by lfi-nav.js - putting the animation on every rs-slide
   instead makes the OUTGOING slide restart too (RS re-displays it), and the
   pair fade up together from the background, which is a dip to black. */
@keyframes lfi-slide-fade { from { opacity: 0; } to { opacity: 1; } }
.lfi-hero rs-slide.lfi-fade-in { animation: lfi-slide-fade 900ms ease both; }

/* The slider's own text layers, arrows and progress bar were hidden here. They
   are the company name that animates in and out, which is the thing the client
   asked for back, so nothing in this file hides them any more.

   THE LAYERS ARE RE-LAID, NOT HIDDEN - and at every width, because the hero is
   now a full screen at every width. Slider Revolution positions each layer in
   pixels on its 1240x600 design grid, so in a 900px-tall hero the whole
   composition sits in the top third, and at 390px wide the wordmark is a 1020px
   image starting at the left edge: it read "LANA FILIF" and stopped. (The live
   site cuts it in the same place, measured - this was never ours to inherit.)

   So the slide becomes a centred flex container: the company name on its own
   line, then the caption, then the buttons, in the middle of the screen. Two
   things must stay absolutely positioned inside it - the photograph, and the
   shape layer that tints it, because a 50% black panel in the flow would push
   the writing off the bottom.

   Order is set explicitly: in the markup the buttons come BEFORE the wordmark,
   so source order alone puts the company name under its own call to action. */
.lfi-hero rs-slide {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 16px;
  padding: 0 20px;
  box-sizing: border-box;
}
.lfi-hero rs-sbg-wrap,
.lfi-hero rs-sbg-px,
.lfi-hero rs-layer-wrap:has(.tp-shape) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.lfi-hero rs-layer.tp-shape {
  width: 100% !important;
  height: 100% !important;
}
/* The company name first, and on a line of its own, whatever order the slider
   wrote it in. The buttons keep their own width and so sit side by side under
   it, which is the desktop composition they were drawn for. */
.lfi-hero rs-layer-wrap:has(img),
.lfi-hero rs-layer-wrap:not(:has(.rev-btn)) { flex: 0 0 100%; }
.lfi-hero rs-layer-wrap:has(img) { order: -1; }

.lfi-hero rs-layer-wrap:not(:has(.tp-shape)) {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: 100% !important;
  text-align: center !important;
  /* transform is how RS PLACES a layer as well as how it animates one, and a
     placement offset measured in grid pixels means nothing in a flex row: it
     carried a button 160px off the side of a phone. The fade survives, because
     the fade is opacity. */
  transform: none !important;
}
/* There is a THIRD element in the chain - wrap > rs-mask-wrap > layer - and it
   is absolutely positioned at left 0, which is why centring the wrapper alone
   changed nothing at all. */
.lfi-hero rs-layer-wrap:not(:has(.tp-shape)) rs-mask-wrap {
  position: static !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
}
/* The wordmark is 1020px in the grid and RS scales it UP on a wide screen, to
   1215px at 1200 - wider than the window, so it was clipped at both ends. The
   cap has to go on the LAYER, which is the element carrying RS's inline width;
   capping only the image inside it caps nothing, because the image is 100% of a
   box that is already too wide. Heights go to auto with it, or the picture
   keeps the height of the size it was refused. */
.lfi-hero rs-layer:has(img) {
  max-width: 100% !important;
  height: auto !important;
}
.lfi-hero rs-layer img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

@media (max-width: 767px) {
  /* One button per line on a phone: the pair fits across 390px by about nine
     pixels, which is not a margin worth having. */
  .lfi-hero rs-layer-wrap { flex: 0 0 100% !important; }
}

@media (max-width: 1099px) {
  .lfi-hero rs-layer:not(.tp-shape) {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    display: inline-block !important;
    max-width: 92vw !important;
    white-space: normal !important;
  }
  /* Headings and sub-headings: sized to the screen rather than to the grid. */
  .lfi-hero rs-layer:not(.tp-shape):not(.rev-btn) {
    font-size: clamp(20px, 6.4vw, 40px) !important;
    line-height: 1.16 !important;
    letter-spacing: .04em !important;
    /* RS sets text-align:left inline, which a caption that now wraps onto two
       lines shows up: the block is centred, the second line is not. */
    text-align: center !important;
  }
  /* The wordmark is an image, so it is fitted rather than re-typed - and the
     WIDTH GOES ON THE LAYER, not the image. Capping the image inside left it
     304px wide in a 359px layer, aligned to that layer's left edge: the whole
     name sat 27px left of centre, which is a shift you can see and cannot
     explain by looking at the wrapper, because the wrapper was centred. */
  .lfi-hero rs-layer:has(img) {
    width: 78vw !important;
  }
  /* Buttons are re-sized, not scaled. `zoom` shrank them correctly and then
     rendered them a whole button-width to the right of where their own
     centred wrapper sat, measured at 390px; type and padding have no such
     quirk, and `transform` is spoken for by the animation. */
  .lfi-hero rs-layer.rev-btn {
    font-size: 13px !important;
    letter-spacing: .12em !important;
    padding: 11px 20px !important;
  }
}

@media (max-width: 767px) {
  :root {
    --lfi-bar-h: var(--lfi-bar-h-sm);
    --lfi-top-h: var(--lfi-top-h-sm);
    --lfi-head-h: calc(var(--lfi-bar-h-sm) + var(--lfi-top-h-sm));
  }
  .header-style-2 > .container > .row { min-height: var(--lfi-bar-h-sm); }
  .header-style-2 .logo img, .header-style-2 #logo { max-height: 38px; }
  .header-style-2 > .container { padding-left: 16px; padding-right: 16px; }
  .header-top.custom > .container { padding-left: 10px; padding-right: 10px; }
  .header-top.custom .social-links { justify-content: center; }
  .header-top.custom .social-links li a { width: 38px; }

}

@media (min-width: 768px) {
  :root { --lfi-head-h: calc(74px + 38px); }
}

@media (prefers-reduced-motion: reduce) {
  .lfi-panel, .lfi-backdrop, .lfi-search, .lfi-burger span,
  .lfi-burger span::before, .lfi-burger span::after { transition: none !important; }
  .lfi-hero rs-slide.lfi-fade-in { animation: none !important; }
}

/* The theme's own contact tab. It was the "- icon bottom right" the owner
   called unclear, and raising .preheader above the navbar brought it up over
   the social strip where it clips the last icon. The envelope in the bar opens
   the form and the X in the panel closes it, so this is now clutter with two
   better replacements. Delete this rule to bring it back. */
.preheader .trigger { display: none !important; }