/* LYRA Custom Overrides
   Loaded AFTER lyra-8f3ba1.webflow.css — safe from Webflow import overwrites.
   This file contains design fixes that cannot be expressed in Webflow's editor. */

/* Fix #0: Section vertical breathing room
   The base .section class has NO vertical padding — only horizontal 10%.
   Homepage sections get padding from named classes (.mission-section, .roadmap-secton, etc.)
   Internal pages use plain .section and get zero spacing between blocks.
   This adds consistent vertical padding to all content sections. */
.lyra-webflow
  .section:not(:empty):not(.page-head-section):not(.footer-section):not(
    .pre-footer-section
  ):not(.hero-section):not(.hero-section-bg-video):not(
    .pre-footer-section-video
  ):not(.services-section):not(.secondary-serveces-section):not(
    .featured-yachts-section
  ):not(.shipyards-logos-section):not(.mission-section):not(
    .roadmap-secton
  ):not(.standarts-section):not(.reasons-section):not(.prices-section) {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Fix #1: Standalone paragraph width
   Paragraphs directly in .section (not inside grid cells) span 1152px,
   resulting in 150+ chars/line. Constrain to ~80 chars/line. */
.lyra-webflow .section > p:not(.lead-p):not(.footer-text):not(.centered-txt) {
  max-width: 720px;
}

/* Fix #4: Founder photo on our-history
   Full-height portrait at 1506px overwhelms the page. */
.lyra-webflow .denis-photo {
  max-height: 800px;
  object-fit: cover;
  object-position: top;
}

/* Fix #6: Reason/feature card images — consistent aspect ratio */
.lyra-webflow .reason-image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* Fix #8: Reason/feature card cells — left-align content.
   Webflow default has align-items: center which centers h4 headings. */
.lyra-webflow .cell.reason-cell {
  align-items: flex-start;
}

/* Service card links (homepage): cells as <a> tags, inherit all styling */
.lyra-webflow .service-card-link {
  color: inherit;
  text-decoration: none;
}

/* Fix #7: Spacing between stacked grids inside same section (internal pages).
   Multiple .w-layout-layout blocks in one section have no margin between them. */
.lyra-webflow
  .page-head-section
  ~ .section
  > .w-layout-layout.stack
  + .w-layout-layout.stack {
  margin-top: 2rem;
}

/* Fix #5: Pull-quote / statement H3s
   Standalone H3s used as pull-quotes — center and constrain width. */
.lyra-webflow .statement-h3 {
  text-align: center;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Glass-morphism blocks: grid on desktop, single column on mobile.
   Replaces inline styles that were overriding Webflow responsive stacking.
   Default: text left (1fr) + photo right (2fr).
   .glass-reversed: photo left (2fr) + text right (1fr). */
.lyra-webflow .stack.blur-bg-section-fw {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.lyra-webflow .stack.blur-bg-section-fw.glass-reversed {
  grid-template-columns: 2fr 1fr;
}

/* Mobile: stack ALL grids to single column.
   !important overrides inline grid-template-columns from Webflow export
   (27 instances across 9 pages) and .glass-reversed specificity. */
@media screen and (max-width: 767px) {
  .lyra-webflow .w-layout-layout.stack {
    grid-template-columns: 1fr !important;
  }

  /* Internal pages only: reduce section padding and heading margins.
     Scoped via page-head-section sibling — homepage is unaffected. */
  .lyra-webflow
    .page-head-section
    ~ .section:not(.pre-footer-section):not(.footer-section) {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .lyra-webflow .page-head-section ~ .section .centered-heading {
    margin-bottom: 2rem;
    margin-top: 1rem;
  }

  /* lead-p: pull closer to heading, push away from grid below */
  .lyra-webflow .lead-p {
    margin-top: 16px;
    margin-bottom: 40px;
  }
}

/* lead-p: reduce top margin (Webflow default 65px is too far from heading) */
.lyra-webflow .lead-p {
  margin-top: 24px;
}

/* Statement-only sections: remove heading bottom margin when it's the
   sole child. Prevents 128px gap below standalone pull-quotes.
   Scoped to internal pages — homepage has no .page-head-section. */
.lyra-webflow .page-head-section ~ .section > .centered-heading:only-child {
  margin-top: 0;
  margin-bottom: 0;
}

/* Tablet: 3+ column grids become 2 columns.
   2-column grids stay as-is at this width. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .lyra-webflow .stack.blur-bg-section-fw,
  .lyra-webflow .stack.blur-bg-section-fw.glass-reversed {
    grid-template-columns: 1fr;
  }
}

/* Pre-footer CTA: vertically center content
   CSS class has padding-top: 54px + padding-bottom: 548px which pushes content to top.
   Override with flexbox centering to match homepage visual alignment. */
.lyra-webflow .section.pre-footer-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  padding-top: 120px;
  padding-bottom: 120px;
}

/* Internal pages only: more vertical breathing room in pre-footer CTA */
.lyra-webflow .page-head-section ~ .section.pre-footer-section {
  padding-top: 180px !important;
  padding-bottom: 180px !important;
}

/* Footer nav links: prevent tight stacking when wrapping to two lines */
.lyra-webflow .footer-nav-block .footer-nav-link-block {
  margin-bottom: 8px;
}

.lyra-webflow .pre-footer-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* New classes from Webflow export 2026-04-01 (not yet in main CSS) */
.lyra-webflow .section.prices-section {
  padding-top: 20px;
  padding-bottom: 120px;
}

.lyra-webflow .centered-heading.prices-heading {
  margin-top: 20px;
  margin-bottom: 6rem;
}

.lyra-webflow .paragraph-4 {
  flex: 1;
}

.lyra-webflow .p-bottom-margin {
  margin-bottom: 2rem;
}

/* Prices grid: override old 3-col layout (was "reasons" grid) → 2x2 for pricing cards */
.lyra-webflow
  .prices-section
  #w-node-_51f41aaa-3915-598e-0826-af17e0b7b3db-0a3a1793 {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 479px) {
  .lyra-webflow
    .prices-section
    #w-node-_51f41aaa-3915-598e-0826-af17e0b7b3db-0a3a1793 {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
}

/* Homepage mobile: photo margin + stamp size reduction */
@media screen and (max-width: 767px) {
  .lyra-webflow #w-node-_087f6d89-490e-e68e-b028-0602cb1ff18f-0a3a1793 .image {
    margin-top: 24px;
  }

  .lyra-webflow .stamp-pic {
    width: 70%;
    max-width: 160px;
  }
}

/* ═══════════════════════════════════════════════
   Navigation Dropdown
   Webflow JS in this build has NO standalone dropdown module
   (no data-hover support). Desktop: CSS :hover shows panel.
   Mobile: Webflow nav JS adds w--nav-dropdown-list-open
   when hamburger opens — we force display:block for it.
   ═══════════════════════════════════════════════ */

/* Toggle: override Webflow's padding-right:40px (meant for icon) */
.lyra-webflow .nav_dropdown.w-dropdown .w-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 1rem;
  font-size: 1.2rem;
  border-bottom-style: none;
}

.lyra-webflow .nav_dropdown .w-dropdown-toggle.white-nav-link {
  color: var(--base-color-brand--white);
}

/* Chevron */
.lyra-webflow .nav_dropdown-chevron {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.lyra-webflow .nav_dropdown:hover .nav_dropdown-chevron {
  transform: rotate(180deg);
}

/* Hover state for toggle — match nav_menu_link:hover */
.lyra-webflow .nav_dropdown:hover .w-dropdown-toggle.white-nav-link {
  background-color: #ffffff1f;
  border-radius: 6px;
}

/* Dropdown panel — frosted glass matching Webflow nav_menu design.
   Override display:none with opacity/visibility for smooth animation. */
.lyra-webflow .nav_dropdown .w-dropdown-list {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s;
  min-width: 220px;
  background-color: #fff3;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0;
  z-index: 950;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
}

/* Desktop: hover to show */
.lyra-webflow .nav_dropdown:hover > .w-dropdown-list {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Dropdown links */
.lyra-webflow .nav_dropdown .w-dropdown-link {
  padding: 0.6rem 1.4rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  white-space: nowrap;
  transition:
    color 0.2s,
    background-color 0.2s;
}

.lyra-webflow .nav_dropdown .w-dropdown-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Navy navbar variant (legal pages) — same frosted glass,
   but darker text since there's no dark hero behind */
.lyra-webflow .navbar:not(.white-navbar) .nav_dropdown .w-dropdown-toggle {
  color: var(--base-color-brand--sea);
}

.lyra-webflow
  .navbar:not(.white-navbar)
  .nav_dropdown:hover
  .w-dropdown-toggle {
  background-color: rgba(10, 25, 47, 0.05);
  border-radius: 6px;
}

.lyra-webflow .navbar:not(.white-navbar) .nav_dropdown .w-dropdown-link {
  color: var(--base-color-brand--sea);
}

.lyra-webflow .navbar:not(.white-navbar) .nav_dropdown .w-dropdown-link:hover {
  background-color: rgba(10, 25, 47, 0.05);
}

/* Mobile: Webflow nav JS adds w--nav-dropdown-list-open when
   hamburger opens. Show items inline, no glass-morphism. */
.lyra-webflow .nav_dropdown .w-dropdown-list.w--nav-dropdown-list-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: static;
  transform: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  padding: 0 0 0.5rem;
  min-width: auto;
  left: auto;
}

.lyra-webflow .nav_dropdown .w--nav-dropdown-list-open .w-dropdown-link {
  text-align: left;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  padding: 0.5rem 1rem 0.5rem 2.5rem;
}

.lyra-webflow .nav_dropdown .w--nav-dropdown-list-open .w-dropdown-link:hover {
  color: #fff;
  background-color: transparent;
}

/* Mobile: click-to-toggle collapse for dropdown sub-items.
   Collapsed by default; animated with max-height. */
.lyra-webflow .nav_dropdown .w-dropdown-list.w--nav-dropdown-list-open {
  max-height: 0;
  overflow: hidden;
  transition: max-height 100ms ease;
  padding: 0;
}

.lyra-webflow .nav_dropdown .w-dropdown-list.nav_dropdown--expanded {
  max-height: 200px;
  padding: 0 0 0.5rem;
}

/* Mobile nav overlay: frosted glass at ALL hamburger widths.
   Webflow only applies this at ≤767px — extend to ≤991px
   (where data-collapse="medium" shows the hamburger). */
@media screen and (max-width: 991px) {
  .lyra-webflow [data-nav-menu-open] {
    background-color: #fff3 !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 8px;
  }

  /* Subtle navy text-shadow on mobile nav links for readability
     over white/light backgrounds */
  .lyra-webflow [data-nav-menu-open] .nav_menu_link,
  .lyra-webflow [data-nav-menu-open] .w-dropdown-toggle,
  .lyra-webflow [data-nav-menu-open] .w-dropdown-link {
    text-shadow: 0 0 8px rgba(10, 25, 47, 0.2);
  }

  .lyra-webflow .nav_button.w--open {
    background-color: transparent;
  }
}

/* ═══════════════════════════════════════════════
   Hover states & transitions — synced from Webflow 2026-04-07
   (Webflow subscription expired, extracted from live published site)
   ═══════════════════════════════════════════════ */

/* Cursor on interactive elements */
.lyra-webflow a {
  cursor: pointer;
}

.lyra-webflow .button {
  cursor: pointer;
}

/* Button transitions */
.lyra-webflow .button.secondary-button {
  transition: border 0.1s;
}

.lyra-webflow .button-secondary.button-underlined {
  transition: border 0.1s;
}

/* Hover: solid buttons (hero) */
.lyra-webflow .button.is-brand.hero-button.secondary-hero-button:hover {
  border-bottom-color: #063250;
}

.lyra-webflow
  .button.is-brand.hero-button.secondary-hero-button.secondary-white--button:hover {
  border-bottom-color: #fff;
}

/* Hover: outline buttons */
.lyra-webflow .button.secondary-button:hover {
  border-color: #063250;
}

.lyra-webflow .button.secondary-button.white-secondary-button:hover {
  background-color: #ffffff1f;
  border-color: #fff;
}

/* Hover: underlined text buttons */
.lyra-webflow .button-secondary.button-underlined:hover {
  border-bottom-color: #063250e0;
}

/* Hover: nav links */
.lyra-webflow .nav_menu_link.white-nav-link:hover {
  background-color: #ffffff1f;
  border-radius: 6px;
}

/* Hover: footer links */
.lyra-webflow .footer-nav-link-block:hover {
  border-bottom-color: #063250e0;
}

/* Price tag text-transform (synced from Webflow) */
.lyra-webflow .yacht-price-tag {
  text-transform: uppercase;
}

/* Homepage grid proportions (synced from Webflow) — desktop only,
   must not override Webflow's mobile 1fr stacking rules */
@media screen and (min-width: 768px) {
  .lyra-webflow #w-node-_98802187-0e38-caeb-9bae-dec5692d715a-0a3a1793 {
    grid-template-columns: 1.5fr 2fr;
  }

  .lyra-webflow #w-node-_49a48c68-b018-6c37-0bf4-2d373d197e2a-0a3a1793 {
    grid-template-columns: 2fr 1.75fr;
  }
}

/* ═══════════════════════════════════════════════
   Scroll reveal animations — LYR-178
   Shared across homepage and all internal pages.
   Requires class="lyra-js" on <html> element.
   ═══════════════════════════════════════════════ */
.lyra-js .lyra-reveal {
  opacity: 0;
  filter: blur(15px);
  transition:
    opacity 900ms cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 900ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.lyra-js .lyra-reveal[data-lyra-hero] {
  transition:
    opacity 1000ms ease-in-out,
    filter 1000ms ease-in-out;
}
.lyra-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
}
.lyra-reveal:focus,
.lyra-reveal:focus-within {
  opacity: 1;
  filter: none;
}
.lyra-delay-1 {
  transition-delay: 80ms;
}
.lyra-delay-2 {
  transition-delay: 160ms;
}
.lyra-delay-3 {
  transition-delay: 240ms;
}
.lyra-delay-4 {
  transition-delay: 320ms;
}
.lyra-delay-5 {
  transition-delay: 400ms;
}
.lyra-js .lyra-reveal-footer {
  opacity: 0;
  filter: blur(15px);
  transition:
    opacity 900ms cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 900ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.lyra-reveal-footer.is-visible {
  opacity: 1;
  filter: blur(0);
}
/* Row-by-row reveal for grids */
.lyra-js .lyra-reveal-rows > * {
  opacity: 0;
  filter: blur(15px);
  transition:
    opacity 900ms cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 900ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.lyra-reveal-rows > .is-visible {
  opacity: 1;
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .lyra-js .lyra-reveal-footer {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
  .lyra-js .lyra-reveal {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
  .lyra-js .lyra-reveal-rows > * {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
}