:root {
  --fn-ink: #173148;
  --fn-ink-strong: #0a2538;
  --fn-blue: #12689a;
  --fn-green: #3c9a55;
  --fn-green-soft: #eaf5ed;
  --fn-mist: #eef5f6;
  --fn-paper: #fbfcfa;
  --fn-line: #d9e4e4;
  --fn-white: #ffffff;
  --fn-shadow: 0 18px 50px rgba(10, 37, 56, 0.1);
  --fn-container: 1180px;
  --fn-section: clamp(4.5rem, 7vw, 7rem);
  --fn-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  background: var(--fn-paper) !important;
  color: var(--fn-ink) !important;
  font-family: var(--font-sans), Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0 !important;
  overflow-x: clip;
}

body::selection {
  background: rgba(60, 154, 85, 0.2) !important;
  color: var(--fn-ink-strong);
}

h1, h2, h3, h4, h5, h6 {
  color: inherit;
  font-family: var(--font-display), var(--font-sans), sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-wrap: balance;
}

h1 { font-size: clamp(2.8rem, 5.5vw, 5.6rem) !important; line-height: 0.98 !important; font-weight: 760 !important; }
h2 { font-size: clamp(2.1rem, 4vw, 4rem) !important; line-height: 1.05 !important; font-weight: 720 !important; }
h3 { line-height: 1.2 !important; font-weight: 700 !important; }
p { text-wrap: pretty; }

a, button, input, select, textarea { letter-spacing: 0 !important; }
a, button { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid rgba(18, 104, 154, 0.5) !important;
  outline-offset: 4px !important;
}

.section-shell {
  width: min(var(--fn-container), calc(100% - 48px)) !important;
}

.fn-skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 1000;
  background: var(--fn-white);
  color: var(--fn-ink-strong);
  padding: 0.75rem 1rem;
  border: 1px solid var(--fn-line);
  border-radius: 6px;
  box-shadow: var(--fn-shadow);
  transition: top 180ms ease;
}

.fn-skip-link:focus { top: 1rem; }

/* Shared navigation */
body > header {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 100 !important;
  color: var(--fn-ink-strong) !important;
  background: rgba(251, 252, 250, 0.92) !important;
  border-bottom: 1px solid rgba(217, 228, 228, 0.82) !important;
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: none !important;
}

body > header.fn-scrolled { box-shadow: 0 12px 38px rgba(10, 37, 56, 0.08) !important; }
body > header > .section-shell { height: 80px !important; }
body > header img { width: auto !important; height: 58px !important; filter: none !important; }
body > header nav { gap: clamp(1.25rem, 2.3vw, 2rem) !important; color: var(--fn-ink) !important; }
body > header nav a {
  position: relative;
  color: var(--fn-ink) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
}
body > header nav a::after {
  position: absolute;
  right: 0;
  bottom: -0.65rem;
  left: 0;
  height: 2px;
  background: var(--fn-green);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms var(--fn-ease);
}
body > header nav a:hover::after,
body > header nav a.fn-active::after { transform: scaleX(1); transform-origin: left; }
body > header nav a.fn-active { color: var(--fn-blue) !important; }

body > header a[href*="sample-request"] span span {
  min-height: 46px;
  padding: 0.75rem 1.25rem !important;
  border-radius: 6px !important;
  background: var(--fn-blue) !important;
  color: var(--fn-white) !important;
  box-shadow: 0 10px 24px rgba(18, 104, 154, 0.18) !important;
  clip-path: none !important;
  text-transform: none !important;
}

body > header button[aria-label="Open menu"],
body > header button[aria-label="Close menu"] {
  width: 46px !important;
  height: 46px !important;
  border: 1px solid var(--fn-line) !important;
  border-radius: 6px !important;
  background: var(--fn-white) !important;
  color: var(--fn-ink-strong) !important;
}

.fn-mobile-nav {
  position: fixed;
  inset: 80px 0 auto;
  display: grid;
  gap: 0;
  max-height: calc(100svh - 80px);
  padding: 0.75rem 24px 1.5rem;
  overflow-y: auto;
  background: rgba(251, 252, 250, 0.98);
  border-bottom: 1px solid var(--fn-line);
  box-shadow: 0 20px 45px rgba(10, 37, 56, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 220ms ease, transform 300ms var(--fn-ease), visibility 220ms;
}
.fn-mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--fn-line);
  color: var(--fn-ink-strong);
  font-weight: 700;
}
.fn-mobile-nav a:last-child {
  justify-content: center;
  margin-top: 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--fn-blue);
  color: var(--fn-white);
}
.fn-menu-open .fn-mobile-nav { opacity: 1; visibility: visible; transform: none; }
.fn-menu-open { overflow: hidden; }

/* Shared page rhythm */
main { padding-top: 80px; }
main > section, main > div > section { scroll-margin-top: 80px; }
.fn-inner main > section:first-child { padding-top: clamp(3.5rem, 7vw, 6.5rem) !important; }
.fn-inner main > section:not(:first-child) { padding-top: var(--fn-section) !important; padding-bottom: var(--fn-section) !important; }

.eyebrow,
[class*="uppercase"][class*="tracking"] {
  letter-spacing: 0.08em !important;
}
.eyebrow {
  color: var(--fn-green) !important;
  font-size: 0.74rem !important;
  font-weight: 750 !important;
}

/* Homepage hero */
.fn-home main { padding-top: 0; }
.fn-home main > section:first-child {
  height: min(760px, 86svh) !important;
  min-height: 640px;
  padding-top: 80px !important;
  background: var(--fn-ink-strong) !important;
}
.fn-home [data-hero-bg] video { filter: saturate(0.86) contrast(1.04); }
.fn-home [data-hero-bg] + div {
  background: linear-gradient(90deg, rgba(5, 24, 37, 0.94) 0%, rgba(5, 24, 37, 0.69) 48%, rgba(5, 24, 37, 0.08) 78%) !important;
}
.fn-home [data-hero-bg] + div + div { background: linear-gradient(0deg, rgba(5, 24, 37, 0.5), transparent 45%) !important; }
.fn-home [data-hero-bg] + div + div + div { display: none !important; }
.fn-home [data-hero-reveal] { opacity: 1 !important; transform: none !important; visibility: visible !important; filter: none !important; }
.fn-home main > section:first-child h1 { max-width: 760px !important; color: var(--fn-white) !important; }
.fn-home main > section:first-child h1 span { display: block !important; color: inherit !important; }
.fn-home main > section:first-child h1 span + span { color: #72c980 !important; }
.fn-home main > section:first-child p { max-width: 560px; color: rgba(255,255,255,0.86) !important; font-weight: 500 !important; }
.fn-home main > section:first-child .section-shell { align-items: center !important; padding-top: 6rem !important; padding-bottom: 3rem !important; }
.fn-home main > section:first-child [class*="grid-cols-2"] { gap: 1.25rem !important; }
.fn-home main > section:first-child [class*="grid-cols-2"] svg { width: 30px; height: 30px; }
.fn-home main > section:first-child [class*="grid-cols-2"] span { font-size: 0.78rem !important; line-height: 1.2 !important; text-transform: none !important; }

/* Buttons */
main a > span.group > span,
main a.inline-block > span.group > span,
main button:not([aria-label]) {
  min-height: 48px;
  padding: 0.8rem 1.35rem !important;
  border-radius: 6px !important;
  clip-path: none !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  text-transform: none !important;
  transition: transform 240ms var(--fn-ease), box-shadow 240ms ease, background 240ms ease !important;
}
main a > span.group:hover,
main a.inline-block > span.group:hover { transform: none !important; }
main a > span.group > span:hover,
main button:not([aria-label]):hover { transform: translateY(-2px); }

/* Content, media and cards */
main img { object-position: center; }
main [class*="shadow-2xl"], main [class*="shadow-xl"] { box-shadow: var(--fn-shadow) !important; }
main [class*="rounded-2xl"], main [class*="rounded-[12px]"], main [class*="rounded-[16px]"] { border-radius: 8px !important; }

.fn-home main > div > section { padding-top: var(--fn-section) !important; padding-bottom: var(--fn-section) !important; }
.fn-home main > div > section:first-child { padding-top: clamp(3rem, 5vw, 5rem) !important; }
.fn-home main > div > section h2 { max-width: 900px; margin-inline: auto; }

[data-benefit-card] {
  min-height: 0 !important;
  padding: 1.5rem !important;
  border: 0 !important;
  border-top: 2px solid var(--fn-green) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}
[data-benefit-card] > div:first-child { display: none !important; }
[data-benefit-card] img { width: 68px !important; height: 68px !important; }

main article,
main a[class*="group"][class*="overflow-hidden"] {
  border-radius: 8px !important;
}
main a[class*="group"][class*="overflow-hidden"] img { transition: transform 700ms var(--fn-ease), filter 300ms ease !important; }
main a[class*="group"][class*="overflow-hidden"]:hover img { transform: scale(1.035); }

/* Forms */
form {
  border: 1px solid var(--fn-line) !important;
  border-radius: 8px !important;
  background: var(--fn-white) !important;
  box-shadow: 0 24px 70px rgba(10, 37, 56, 0.08) !important;
}
label { color: var(--fn-ink-strong) !important; font-size: 0.88rem; }
input, select, textarea {
  border: 1px solid #cbdada !important;
  border-radius: 6px !important;
  background: var(--fn-white) !important;
  color: var(--fn-ink-strong) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--fn-blue) !important;
  box-shadow: 0 0 0 4px rgba(18, 104, 154, 0.1) !important;
}

/* Footer */
footer { background: #071f30 !important; color: rgba(255,255,255,0.75) !important; }
footer h3 { color: var(--fn-white) !important; font-size: 0.92rem !important; }
footer a { color: rgba(255,255,255,0.7) !important; transition: color 180ms ease; }
footer a:hover { color: #83d48e !important; }
footer img { max-height: 72px; width: auto; }

/* Reliable, subtle scroll reveals */
[data-reveal], [data-benefit-card] { opacity: 1 !important; transform: none !important; visibility: visible !important; }
.fn-reveal { opacity: 0; transform: translateY(20px); transition: opacity 650ms var(--fn-ease), transform 650ms var(--fn-ease); }
.fn-reveal.fn-visible { opacity: 1; transform: none; }

@media (max-width: 1023px) {
  .section-shell { width: min(var(--fn-container), calc(100% - 32px)) !important; }
  body > header > .section-shell { height: 72px !important; }
  body > header img { height: 52px !important; }
  main { padding-top: 72px; }
  .fn-mobile-nav { inset-block-start: 72px; max-height: calc(100svh - 72px); }
  .fn-home main > section:first-child { min-height: 600px; height: min(720px, 88svh) !important; padding-top: 72px !important; }
  .fn-home main > section:first-child .section-shell { padding-top: 4.5rem !important; }
}

@media (max-width: 767px) {
  body { font-size: 15px; }
  h1 { font-size: clamp(2.35rem, 12vw, 3.45rem) !important; }
  h2 { font-size: clamp(1.85rem, 9vw, 2.65rem) !important; }
  .section-shell { width: calc(100% - 32px) !important; }
  .fn-home main > section:first-child { min-height: 640px; height: 88svh !important; }
  .fn-home main > section:first-child .section-shell { align-items: flex-end !important; padding-top: 7rem !important; padding-bottom: 3.25rem !important; }
  .fn-home [data-hero-bg] + div { background: linear-gradient(0deg, rgba(5,24,37,0.96) 0%, rgba(5,24,37,0.72) 56%, rgba(5,24,37,0.18) 100%) !important; }
  .fn-home main > section:first-child [class*="grid-cols-2"] { gap: 0.9rem !important; }
  .fn-home main > section:first-child [class*="grid-cols-2"] > div { margin-left: 0 !important; }
  .fn-home main > section:first-child [class*="grid-cols-2"] svg { width: 24px; height: 24px; }
  .fn-home main > section:first-child [class*="grid-cols-2"] span { font-size: 0.72rem !important; }
  .fn-home main > div > section { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  [data-benefit-card] { width: calc(50% - 8px) !important; padding: 1rem 0.75rem !important; }
  form { padding: 1rem !important; }
  main [class*="grid-cols-2"] { column-gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .fn-reveal { opacity: 1 !important; transform: none !important; }
}