/* Generated by AI Landing Page Maker — theme tokens */
:root {
  --lp-bg: #122A23;
  --lp-surface: #1D3930;
  --lp-text: #E5DCC6;
  --lp-muted: #B8C8BB;
  --lp-primary: #A5C49A;
  --lp-primary-contrast: #122A23;
  --lp-border: #496354;
  --lp-accent-soft: rgba(165,196,154,0.16);
  --lp-shadow: 0 20px 56px rgba(5,18,12,0.28);
  --lp-font-heading: "Marcellus", serif;
  --lp-font-body: "Source Sans 3", sans-serif;
  --lp-heading-weight: 400;
  --lp-heading-tracking: -0.015em;
  --lp-section-y: clamp(48px, 7vw, 112px);
  --lp-gap: clamp(24px, 4vw, 64px);
  --lp-container: 1440px;
  --lp-radius: 4px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* A section's CSS is scoped with an attribute selector, and an attribute selector
   is happy to match a <script>. One that did printed the page's own motion code
   onto the page as text. Nothing here is ever meant to be seen. */
script,
template {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

/* So anchor-linked sections (Navbar tabs, Footer quick links) don't render
   under a sticky/transparent navbar when scrolled into view. */
[id] {
  scroll-margin-top: 5rem;
}

body {
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: var(--lp-font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a.lp-cta {
  display: inline-block;
  text-decoration: none;
}

a.lp-cta:focus-visible,
button.lp-cta:focus-visible,
button[type="submit"]:focus-visible,
input:focus-visible {
  outline: 2px solid var(--lp-primary);
  outline-offset: 3px;
}

.lp-asset-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: repeating-linear-gradient(
    45deg,
    var(--lp-surface),
    var(--lp-surface) 10px,
    var(--lp-border) 10px,
    var(--lp-border) 20px
  );
  color: var(--lp-muted);
  font-size: 0.8rem;
  border-radius: var(--lp-radius);
  border: 1px dashed var(--lp-border);
}

/* Tailwind utilities used by a handful of blocks. The export ships no Tailwind
   build, so the few classes that actually reach the markup are inlined here. */
.hover\:scale-\[1\.02\] {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hover\:scale-\[1\.02\]:hover {
  transform: scale(1.02);
}

/* ==========================================================================
   Interactive behaviour — see ./staticRuntimeScript.ts

   Everything below is scoped to html.lp-js, which that script's inline head
   snippet sets before the body parses. Without JavaScript nothing is hidden:
   reveals stay visible, the popup renders as an ordinary inline section, and
   nav links stay in the header.
   ========================================================================== */

html.lp-js [data-lp-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

html.lp-js [data-lp-reveal][data-lp-reveal-dir="down"] {
  transform: translateY(-30px);
}

html.lp-js [data-lp-reveal][data-lp-reveal-dir="left"] {
  transform: translateX(30px);
}

html.lp-js [data-lp-reveal][data-lp-reveal-dir="right"] {
  transform: translateX(-30px);
}

html.lp-js [data-lp-reveal][data-lp-reveal-dir="none"] {
  transform: none;
}

html.lp-js [data-lp-reveal].lp-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.lp-js [data-lp-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Enquiry popup: an inline section in the markup, promoted to a real modal
   once JS confirms it can be opened and closed again.

   Every declaration here is !important on purpose. The section carries the
   inline styles that make it read as an ordinary page section without JS
   (position: relative, its own background and section padding), and an inline
   style beats any selector — without !important the "modal" stayed in the flow
   at the bottom of the page and opening it appeared to do nothing. */
html.lp-js [data-lp-popup] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 60 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(1rem, 4vw, 2.5rem) !important;
  overflow: auto !important;
  background: rgba(8, 10, 16, 0.72) !important;
  animation: lp-popup-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

html.lp-js [data-lp-popup].lp-popup-open {
  display: flex !important;
}

html.lp-js [data-lp-popup] [data-lp-popup-panel] {
  max-height: min(92vh, 60rem) !important;
  /* Some skins set overflow: hidden inline, which would clip a tall form. */
  overflow-y: auto !important;
}

@keyframes lp-popup-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

html.lp-popup-locked {
  overflow: hidden;
}

/* Popup triggers and the close button only make sense with the modal script. */
html:not(.lp-js) [data-lp-popup-close],
html:not(.lp-js) [data-lp-popup-float] {
  display: none !important;
}