/* Livefluence style tokens, derived from the public livefluence.com stylesheet (Webflow export values, 2026-10-10).
   Fonts are self-hosted (fonts/), no external CDN. */
@font-face { font-family: "Rubik"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/rubik-400.ttf") format("truetype"); }
@font-face { font-family: "Rubik"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/rubik-500.ttf") format("truetype"); }

:root {
  --lf-primary: #1f6fff;        /* links, accents (most-used color on livefluence.com) */
  --lf-primary-dark: #1258c0;
  --lf-navy: #002d81;
  --lf-accent: #f89728;         /* button fill (orange-tim) */
  --lf-grape: #5a4bde;          /* footer column titles */
  --lf-ink: #353e44;            /* body + headings (dark slate grey) */
  --lf-muted: #7f8893;          /* secondary text, footer links */
  --lf-tint: #f2f3f4;           /* alternate section background */
  --lf-line: #e2e2e2;
  --lf-white: #ffffff;
  --lf-font: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --lf-container: 940px;        /* Webflow .w-container */
  --lf-section-pad: 100px;      /* .section / .tint vertical padding */
  --lf-radius-btn: 20px;
  --lf-radius-nav: 8px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--lf-font); font-size: 16px; line-height: 1.6; color: var(--lf-ink); background: var(--lf-white); }
img { max-width: 100%; height: auto; }
a { color: var(--lf-primary); }
h1, h2, h3 { font-weight: 400; margin: 0 0 16px; }
h1 { font-size: 50px; line-height: 1.1; }
h2 { font-size: 35px; line-height: 1.1; }
h3 { font-size: 19px; }
.container { max-width: var(--lf-container); margin: 0 auto; padding: 0 20px; }
.skip-link { position: absolute; left: -999px; top: 0; background: #fff; color: var(--lf-ink); padding: 8px 12px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }

/* Navbar: white, fixed, 33px soft shadow, 50px logo, 14px capitalized links with 1px tracking */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--lf-white); box-shadow: 0 0 33px rgba(0, 0, 0, .2); padding: 30px 0; }
.navbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.navbar .logo { height: 50px; width: auto; display: block; }
.nav-menu { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.nav-link { color: var(--lf-ink); text-decoration: none; letter-spacing: 1px; text-transform: capitalize; border: 1px solid transparent; border-radius: var(--lf-radius-nav); padding: 11px 15px; font-size: 14px; line-height: 12px; transition: background-color .2s, border .2s; }
.nav-link:hover, .nav-link[aria-current="page"] { border-color: var(--lf-line); background: var(--lf-tint); }
.has-fixed-nav { padding-top: 110px; }
.navbar-minimal { padding: 18px 0; }
.navbar-minimal .logo { height: 36px; }

/* Buttons: 20px radius pill, 14px, 1px tracking, capitalized */
.button { display: inline-block; background: var(--lf-accent); color: #fff; text-decoration: none; letter-spacing: 1px; text-transform: capitalize; border-radius: var(--lf-radius-btn); padding: 11px 25px; font-size: 14px; border: 1px solid var(--lf-accent); transition: background-color .2s, color .2s, border .2s; cursor: pointer; font-family: inherit; }
.button:hover { background: #e0841a; border-color: #e0841a; }
.button.outline { background: transparent; border-color: #fff; color: #fff; }
.button.outline:hover { background: rgba(255, 255, 255, .15); }
.button.dark-outline { background: transparent; border-color: var(--lf-primary); color: var(--lf-primary); }
.button.dark-outline:hover { background: var(--lf-primary); color: #fff; }

/* Hero: full-bleed navy image area, centered white text */
.hero { background: linear-gradient(135deg, var(--lf-navy), #0f1011); color: #fff; text-align: center; padding: 250px 20px 100px; }
.hero h1 { font-size: 50px; margin-bottom: 20px; }
.hero p { font-size: 18px; line-height: 24px; opacity: .9; max-width: 80%; margin: 0 auto 20px; }
.hero-compact { padding: 160px 20px 70px; }
.hero-compact h1 { font-size: 41px; }

/* Sections: 100px vertical padding, alternating white / tint */
.section { padding: var(--lf-section-pad) 0; background: var(--lf-white); }
.section.tint { background: var(--lf-tint); }
.section-title { font-size: 46px; line-height: 1.05; }
.section-description { color: var(--lf-muted); margin-bottom: 40px; }
.intro-title { color: var(--lf-muted); letter-spacing: 1px; text-transform: uppercase; font-size: 12px; margin-bottom: 5px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; margin-top: 30px; }
.feature { }
.feature h3 { text-transform: uppercase; font-size: 19px; margin-bottom: 7px; }
.feature p { margin: 0; }
.prose { max-width: 720px; }
.prose p { margin: 0 0 16px; }
.meta { color: var(--lf-muted); font-size: 14px; }
.card { background: #fff; border: 1px solid var(--lf-line); border-radius: 8px; padding: 24px; }
.post-list { display: grid; gap: 20px; }

/* Forms */
label { display: block; font-size: 14px; margin: 0 0 4px; }
input[type="text"], input[type="email"], textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--lf-line); border-radius: var(--lf-radius-nav); margin-bottom: 16px; color: var(--lf-ink); }
input:focus, textarea:focus, a:focus-visible, .button:focus-visible { outline: 2px solid var(--lf-primary); outline-offset: 2px; }

/* Footer: white, 4 columns, grape uppercase 18px titles, muted 13px links */
.site-footer { background: #fff; color: var(--lf-ink); padding: 40px 0; border-top: 1px solid var(--lf-line); }
.footer-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 30px; }
.footer-title { color: var(--lf-grape); text-transform: uppercase; font-size: 18px; margin-bottom: 21px; }
.footer-link { display: block; color: var(--lf-muted); text-decoration: none; font-size: 13px; margin-bottom: 7px; }
.footer-link:hover { color: var(--lf-primary); }
.footer-bottom { margin-top: 30px; font-size: 13px; color: var(--lf-ink); }
.site-footer-minimal { padding: 24px 0; text-align: center; font-size: 13px; }
.site-footer-minimal a { color: var(--lf-muted); margin: 0 8px; text-decoration: none; }

@media (max-width: 767px) {
  .section { padding: 45px 0; }
  .hero { padding: 150px 20px 60px; }
  .hero h1 { font-size: 41px; }
  .section-title, h2 { font-size: 29px; }
  .navbar { padding: 20px 0; }
  .navbar .logo { height: 30px; }
  .has-fixed-nav { padding-top: 80px; }
}