/*!
 * NutriFer Agro — main stylesheet
 * Mobile-first. No framework, no external font requests by default.
 * Sections: 1 Tokens · 2 Reset/base · 3 Layout · 4 Buttons · 5 Header
 * 6 Hero · 7 Home sections · 8 Cards · 9 Products · 10 Blog · 11 Forms
 * 12 Footer · 13 Utilities/blocks · 14 Motion & print
 */

/* ============================================================ 1. TOKENS === */
:root {
  /* Brand — overridden by the Customizer via inline CSS */
  --nf-primary: #157A50;
  --nf-primary-dark: #0A3B2A;
  --nf-primary-mid: #0F5138;
  --nf-primary-light: #1E9A63;
  --nf-primary-050: #E3F4EB;
  --nf-accent: #E9A13B;
  --nf-accent-dark: #9E5F0A;
  /* Accent text on the dark green surfaces: #E9A13B only reaches 3.9:1 there,
     which fails WCAG AA for small text. This tint clears 4.5:1. */
  --nf-accent-on-dark: #F2BC63;

  /* Neutrals */
  --nf-ink: #0E1A15;
  --nf-body: #3B4B43;
  --nf-muted: #5F7268;
  --nf-line: #DFE7E2;
  --nf-line-soft: #EDF2EF;
  --nf-bg: #FFFFFF;
  --nf-bg-soft: #F5F8F6;
  --nf-sand: #F8F3EA;

  /* Channel colours */
  --nf-wa: #25D366;
  --nf-wa-dark: #0F7A45;

  /* Type */
  --nf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --nf-font-head: var(--nf-font);
  --nf-fs-body: 1.0625rem;
  --nf-lh-body: 1.72;

  /* Space & shape */
  --nf-container: 1200px;
  --nf-gutter: clamp(1.125rem, 4vw, 2rem);
  --nf-section-y: clamp(3.25rem, 7vw, 5.75rem);
  --nf-radius: 14px;
  --nf-radius-lg: 22px;
  --nf-radius-sm: 9px;

  /* Elevation — deliberately soft, green-tinted */
  --nf-shadow-sm: 0 1px 2px rgba(14, 26, 21, .05), 0 2px 8px rgba(14, 26, 21, .04);
  --nf-shadow: 0 2px 6px rgba(14, 26, 21, .05), 0 12px 28px -10px rgba(14, 26, 21, .12);
  --nf-shadow-lg: 0 4px 10px rgba(14, 26, 21, .06), 0 26px 55px -18px rgba(14, 26, 21, .22);

  --nf-header-h: 66px;
  --nf-ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 1024px) {
  :root { --nf-header-h: 82px; }
}

/* ======================================================= 2. RESET / BASE === */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nf-header-h) + 16px);
}

body {
  margin: 0;
  background: var(--nf-bg);
  color: var(--nf-body);
  font-family: var(--nf-font);
  font-size: var(--nf-fs-body);
  line-height: var(--nf-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

body.nf-nav-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  color: var(--nf-ink);
  font-family: var(--nf-font-head);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.018em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.32rem + 2.9vw, 3.35rem); }
h2 { font-size: clamp(1.6rem, 1.22rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.06rem + .62vw, 1.5rem); }
h4 { font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); }
h5, h6 { font-size: 1rem; }

p, ul, ol, dl, figure, table, pre, blockquote { margin: 0 0 1.15em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a {
  color: var(--nf-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .18s var(--nf-ease);
}
a:hover { color: var(--nf-primary-dark); }

img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; }

strong, b { font-weight: 700; color: var(--nf-ink); }
small { font-size: .875em; }
hr { border: 0; border-top: 1px solid var(--nf-line); margin: 2.5rem 0; }

ul, ol { padding-left: 1.35em; }
li { margin-bottom: .45em; }
li:last-child { margin-bottom: 0; }

blockquote {
  margin: 1.75rem 0;
  padding: .25rem 0 .25rem 1.4rem;
  border-left: 4px solid var(--nf-primary-light);
  color: var(--nf-ink);
  font-size: 1.1em;
  font-style: normal;
}

code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
code { background: var(--nf-bg-soft); padding: .12em .38em; border-radius: 5px; }
pre { background: var(--nf-primary-dark); color: #E7F3EC; padding: 1.1rem 1.25rem; border-radius: var(--nf-radius-sm); overflow-x: auto; }
pre code { background: none; padding: 0; color: inherit; }

table { width: 100%; border-collapse: collapse; font-size: .96rem; }
th, td { padding: .72rem .85rem; text-align: left; border-bottom: 1px solid var(--nf-line); vertical-align: top; }
th { color: var(--nf-ink); font-weight: 700; background: var(--nf-bg-soft); }
caption { caption-side: bottom; padding-top: .65rem; color: var(--nf-muted); font-size: .875rem; text-align: left; }

/* Focus — always visible, never removed */
:focus-visible {
  outline: 3px solid var(--nf-accent-dark);
  outline-offset: 2px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.nf-skip-link {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-120%);
  z-index: 9999;
  padding: .85rem 1.35rem;
  background: var(--nf-primary-dark);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 var(--nf-radius-sm) 0;
  text-decoration: none;
}
.nf-skip-link:focus { transform: translateY(0); color: #fff; }

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px; width: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  position: absolute !important;
  white-space: nowrap;
}
.screen-reader-text:focus {
  clip-path: none;
  height: auto; width: auto;
  padding: .8rem 1.2rem;
  background: #fff;
  color: var(--nf-primary-dark);
  z-index: 100000;
}

/* ============================================================= 3. LAYOUT === */
.nf-container {
  width: 100%;
  max-width: var(--nf-container);
  margin-inline: auto;
  padding-inline: var(--nf-gutter);
}
.nf-container--narrow { max-width: 820px; }
.nf-container--wide { max-width: 1360px; }

.nf-section { padding-block: var(--nf-section-y); }
.nf-section--tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.nf-section--soft { background: var(--nf-bg-soft); }
.nf-section--sand { background: var(--nf-sand); }
.nf-section--dark { background: var(--nf-primary-dark); color: rgba(255, 255, 255, .82); }
.nf-section--dark h1, .nf-section--dark h2, .nf-section--dark h3, .nf-section--dark h4 { color: #fff; }
/* Buttons carry their own colours; only plain links invert on dark. */
.nf-section--dark a:not([class*="nf-btn"]) { color: #fff; }

.nf-section-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.nf-section-head--center { margin-inline: auto; text-align: center; }
.nf-section-head p { margin-bottom: 0; font-size: 1.075rem; color: var(--nf-muted); }
.nf-section--dark .nf-section-head p { color: rgba(255, 255, 255, .78); }

.nf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .85rem;
  color: var(--nf-primary);
  font-size: .775rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.nf-eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--nf-accent);
  border-radius: 2px;
}
.nf-section--dark .nf-eyebrow { color: var(--nf-accent-on-dark); }
.nf-section-head--center .nf-eyebrow { justify-content: center; }

.nf-lede { font-size: clamp(1.06rem, 1rem + .35vw, 1.2rem); color: var(--nf-muted); }

.nf-grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
@media (min-width: 640px) { .nf-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .nf-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .nf-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 600px) { .nf-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .nf-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.nf-split { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 900px) {
  .nf-split { grid-template-columns: 1fr 1fr; }
  .nf-split--media-first > .nf-split__media { order: -1; }
  .nf-split--wide-text { grid-template-columns: 1.15fr .85fr; }
}
.nf-split__media img, .nf-split__media svg { border-radius: var(--nf-radius-lg); width: 100%; }

/* ============================================================ 4. BUTTONS === */
.nf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .78rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--nf-primary);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--nf-ease), border-color .18s var(--nf-ease), color .18s var(--nf-ease), transform .18s var(--nf-ease), box-shadow .18s var(--nf-ease);
}
.nf-btn:hover { background: var(--nf-primary-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--nf-shadow); }
.nf-btn:active { transform: translateY(0); }
.nf-btn svg { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

.nf-btn--accent { background: var(--nf-accent); color: #2A1A00; }
.nf-btn--accent:hover { background: var(--nf-accent-dark); color: #fff; }

.nf-btn--outline { background: transparent; border-color: var(--nf-line); color: var(--nf-ink); }
.nf-btn--outline:hover { background: var(--nf-primary-050); border-color: var(--nf-primary-light); color: var(--nf-primary-dark); }

.nf-btn--light { background: #fff; color: var(--nf-primary-dark); }
.nf-btn--light:hover { background: var(--nf-primary-050); color: var(--nf-primary-dark); }

.nf-btn--ghost-light { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.nf-btn--ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

.nf-btn--wa { background: var(--nf-wa-dark); color: #fff; }
.nf-btn--wa:hover { background: #0B5F35; color: #fff; }

.nf-btn--sm { min-height: 40px; padding: .5rem 1.05rem; font-size: .9rem; }
.nf-btn--lg { min-height: 54px; padding: .95rem 1.9rem; font-size: 1.06rem; }
.nf-btn--block { width: 100%; }

.nf-btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.nf-btn-row--center { justify-content: center; }

.nf-textlink {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  text-decoration: none;
}
.nf-textlink::after {
  content: "\2192";
  transition: transform .18s var(--nf-ease);
}
.nf-textlink:hover::after { transform: translateX(4px); }

/* ============================================================= 5. HEADER === */
.nf-topbar {
  display: none;
  background: var(--nf-primary-dark);
  color: rgba(255, 255, 255, .8);
  font-size: .82rem;
}
@media (min-width: 1024px) { .nf-topbar { display: block; } }
.nf-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 40px; }
.nf-topbar__list { display: flex; align-items: center; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.nf-topbar__list li { margin: 0; }
.nf-topbar a { color: rgba(255, 255, 255, .85); text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.nf-topbar a:hover { color: #fff; text-decoration: underline; }
.nf-topbar svg { width: 15px; height: 15px; fill: var(--nf-accent-on-dark); flex: none; }
.nf-topbar__socials { display: flex; gap: .85rem; }
.nf-topbar__socials svg { fill: rgba(255, 255, 255, .7); width: 16px; height: 16px; }
.nf-topbar__socials a:hover svg { fill: #fff; }

.nf-header {
  position: sticky;
  top: 0;
  z-index: 600;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--nf-line);
  transition: box-shadow .2s var(--nf-ease);
}
.nf-header.is-stuck { box-shadow: 0 6px 22px -12px rgba(14, 26, 21, .3); }
.nf-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--nf-header-h);
}

.nf-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.nf-brand img, .nf-brand svg { height: 40px; width: auto; }
@media (min-width: 1024px) { .nf-brand img, .nf-brand svg { height: 50px; } }
.nf-brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.nf-brand__name { color: var(--nf-primary-dark); font-size: 1.24rem; font-weight: 800; letter-spacing: -.02em; }
.nf-brand__name em { font-style: normal; color: var(--nf-primary); }
.nf-brand__tag { color: var(--nf-muted); font-size: .58rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; margin-top: 3px; }
@media (min-width: 1024px) { .nf-brand__name { font-size: 1.42rem; } .nf-brand__tag { font-size: .625rem; } }

.nf-header__actions { display: flex; align-items: center; gap: .55rem; }

/* Desktop navigation */
.nf-nav { display: none; }
@media (min-width: 1024px) {
  .nf-nav { display: block; margin-left: auto; }
  .nf-nav ul { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; }
  .nf-nav li { position: relative; margin: 0; }
  .nf-nav a {
    display: block;
    padding: .6rem .8rem;
    border-radius: 8px;
    color: var(--nf-ink);
    font-size: .955rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .nf-nav a:hover, .nf-nav a:focus-visible { background: var(--nf-primary-050); color: var(--nf-primary-dark); }
  .nf-nav .current-menu-item > a,
  .nf-nav .current_page_item > a,
  .nf-nav .current-menu-ancestor > a,
  .nf-nav .current-page-ancestor > a { color: var(--nf-primary); }
  .nf-nav .current-menu-item > a::after,
  .nf-nav .current_page_item > a::after,
  .nf-nav .current-menu-ancestor > a::after {
    content: "";
    display: block;
    height: 2px;
    margin: 4px .55rem -2px;
    background: var(--nf-accent);
    border-radius: 2px;
  }

  /* Sub-menus */
  .nf-nav .menu-item-has-children > a::before {
    content: "";
    float: right;
    width: 6px; height: 6px;
    margin: .42em 0 0 .45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
  }
  .nf-nav ul ul {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    display: block;
    min-width: 250px;
    padding: .45rem;
    background: #fff;
    border: 1px solid var(--nf-line);
    border-radius: var(--nf-radius);
    box-shadow: var(--nf-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s var(--nf-ease), transform .18s var(--nf-ease), visibility .18s;
  }
  .nf-nav ul ul li { width: 100%; }
  .nf-nav ul ul a { padding: .58rem .7rem; font-size: .92rem; font-weight: 500; white-space: normal; }
  .nf-nav li:hover > ul,
  .nf-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
  .nf-nav ul ul ul { top: -.45rem; left: 100%; }
}

/* Mobile toggle + panel */
.nf-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--nf-line);
  border-radius: 11px;
  background: #fff;
  color: var(--nf-primary-dark);
  cursor: pointer;
}
@media (min-width: 1024px) { .nf-nav-toggle { display: none; } }
.nf-nav-toggle__bars { position: relative; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: background-color .2s; }
.nf-nav-toggle__bars::before, .nf-nav-toggle__bars::after {
  content: "";
  position: absolute; left: 0;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .22s var(--nf-ease), top .22s var(--nf-ease);
}
.nf-nav-toggle__bars::before { top: -6px; }
.nf-nav-toggle__bars::after { top: 6px; }
.nf-nav-toggle[aria-expanded="true"] .nf-nav-toggle__bars { background: transparent; }
.nf-nav-toggle[aria-expanded="true"] .nf-nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nf-nav-toggle[aria-expanded="true"] .nf-nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

.nf-mobile-nav {
  position: fixed;
  inset: var(--nf-header-h) 0 0;
  z-index: 590;
  display: flex;
  flex-direction: column;
  padding: 1.25rem var(--nf-gutter) 2.5rem;
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  /* Visibility flips instantly on open so links are focusable straight away,
     and is delayed on close so the slide-out animation stays visible. */
  transition: transform .28s var(--nf-ease), visibility 0s linear .28s;
}
.nf-mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .28s var(--nf-ease), visibility 0s linear 0s;
}
@media (min-width: 1024px) { .nf-mobile-nav { display: none; } }
.nf-mobile-nav ul { margin: 0; padding: 0; list-style: none; }
.nf-mobile-nav li { margin: 0; border-bottom: 1px solid var(--nf-line-soft); }
.nf-mobile-nav a {
  display: block;
  padding: .95rem .25rem;
  color: var(--nf-ink);
  font-size: 1.06rem;
  font-weight: 600;
  text-decoration: none;
}
.nf-mobile-nav .current-menu-item > a { color: var(--nf-primary); }
.nf-mobile-nav ul ul { padding-left: .9rem; margin-bottom: .35rem; border-left: 2px solid var(--nf-primary-050); }
.nf-mobile-nav ul ul li { border-bottom: 0; }
.nf-mobile-nav ul ul a { padding: .55rem .25rem; font-size: .975rem; font-weight: 500; color: var(--nf-muted); }
.nf-mobile-nav__cta { display: grid; gap: .6rem; margin-top: 1.6rem; }
.nf-mobile-nav__meta { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--nf-line); color: var(--nf-muted); font-size: .9rem; }
.nf-mobile-nav__meta strong { display: block; margin-bottom: .2rem; }

/* Compact WhatsApp button in the header on small screens */
.nf-header__wa { display: none; }
@media (min-width: 420px) { .nf-header__wa { display: inline-flex; } }
@media (max-width: 1023px) { .nf-header__wa .nf-header__wa-label { display: none; } .nf-header__wa { padding-inline: .9rem; } }

/* Floating WhatsApp bubble */
.nf-wa-float {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 550;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.1rem;
  border-radius: 999px;
  background: var(--nf-wa-dark);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 10px 28px -8px rgba(11, 95, 53, .6);
  transition: transform .2s var(--nf-ease), background-color .2s var(--nf-ease);
}
.nf-wa-float:hover { background: #0B5F35; color: #fff; transform: translateY(-2px); }
.nf-wa-float svg { width: 22px; height: 22px; fill: currentColor; }
@media (max-width: 560px) { .nf-wa-float span { display: none; } .nf-wa-float { padding: .85rem; } }

/* =============================================================== 6. HERO === */
.nf-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg, #FFFFFF 0%, var(--nf-primary-050) 58%, #EAF4EE 100%);
}

/* Optional photographic band behind the hero.
   --nf-hero-bg is set as an inline custom property by template-parts/home/hero.php
   from the Customizer. With no photo set, the class is absent, this rule never
   applies, and the plain gradient above shows exactly as before.

   Two background layers on one element: the translucent veil paints over the
   photograph, so no extra element and no z-index juggling is needed. The veil is
   the band's own gradient with alpha, which is why the section still reads as the
   same design rather than as a photo with a grey wash over it. */
.nf-hero--photo {
  background-image:
    linear-gradient(168deg, rgba(255, 255, 255, .95) 0%, rgba(227, 244, 235, .90) 58%, rgba(234, 244, 238, .86) 100%),
    var(--nf-hero-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* The photograph removes the headroom these two colours had against a flat tint,
   so inside a photo hero they step down to the darker tokens. Worst case measured
   against a black pixel under the thinnest part of the veil is 5.9:1 for both.
   Do not lighten these, or raise the veil's transparency, without re-measuring. */
.nf-hero--photo .nf-eyebrow { color: var(--nf-primary-mid); }
.nf-hero--photo .nf-hero__sub { color: var(--nf-body); }
.nf-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--nf-line);
}
.nf-hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.25rem);
  padding-block: clamp(2.5rem, 6vw, 4.75rem);
}
@media (min-width: 960px) {
  .nf-hero__inner { grid-template-columns: 1.02fr .98fr; align-items: center; }
}
.nf-hero h1 { margin-bottom: .55rem; }
.nf-hero__sub { max-width: 34rem; font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem); color: var(--nf-muted); }
.nf-hero .nf-btn-row { margin-top: 1.75rem; }
.nf-hero__media { position: relative; }

/* Hero slideshow. The frame is pinned to 4:3 and every photo is cropped to
   fill it, so swapping in a replacement of any shape cannot shift the layout
   and moving between slides never changes the page height. */
.nf-hero__frame { position: relative; }
.nf-hero__track {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--nf-radius-lg);
  background: var(--nf-primary-050);
  box-shadow: var(--nf-shadow-lg);
}
.nf-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .55s ease;
}
.nf-hero__slide.is-active { opacity: 1; }
.nf-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nf-hero__caption {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: .34rem .72rem;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(9, 26, 17, .18);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--nf-primary-dark);
}
.nf-hero__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;
  margin-top: 1rem;
}
.nf-hero__controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--nf-line);
  border-radius: 999px;
  color: var(--nf-primary-dark);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.nf-hero__controls button:hover { background: var(--nf-primary-050); border-color: var(--nf-primary); }
.nf-hero__controls svg { width: 17px; height: 17px; fill: currentColor; }
.nf-hero__dots {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin: 0 .3rem;
}
.nf-hero__dots button {
  width: 26px;
  height: 26px;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
/* The visible dot is drawn inside a larger transparent button so the touch
   target stays at least 24px square without a 24px-wide dot. */
.nf-hero__dots button::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: auto;
  background: #B4C4BA;
  border-radius: 999px;
  transition: background .18s ease, transform .18s ease;
}
.nf-hero__dots button:hover::before { background: var(--nf-primary-mid); }
.nf-hero__dots button[aria-current="true"]::before {
  background: var(--nf-primary);
  transform: scale(1.35);
}
@media (prefers-reduced-motion: reduce) {
  .nf-hero__slide { transition: none; }
  .nf-hero__dots button::before { transition: none; }
}
.nf-hero__points {
  display: grid;
  gap: .6rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) { .nf-hero__points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nf-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--nf-ink);
}
.nf-hero__points svg { width: 20px; height: 20px; flex: none; margin-top: .12em; fill: var(--nf-primary); }

.nf-hero__badge {
  position: absolute;
  left: clamp(-4px, -1vw, 0px);
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: 72%;
  padding: .7rem .95rem;
  background: #fff;
  border-radius: var(--nf-radius);
  box-shadow: var(--nf-shadow-lg);
  font-size: .88rem;
  line-height: 1.35;
}
.nf-hero__badge svg { width: 30px; height: 30px; flex: none; fill: var(--nf-primary); }
.nf-hero__badge strong { display: block; color: var(--nf-ink); }
.nf-hero__badge span { color: var(--nf-muted); }
@media (max-width: 640px) { .nf-hero__badge { display: none; } }

/* Inner-page hero */
.nf-pagehero {
  position: relative;
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
  background: linear-gradient(150deg, var(--nf-primary-dark), var(--nf-primary-mid) 72%, var(--nf-primary) 130%);
  color: rgba(255, 255, 255, .84);
}
.nf-pagehero h1 { color: #fff; margin-bottom: .5rem; }
.nf-pagehero__sub { max-width: 48rem; margin: 0; font-size: 1.075rem; color: rgba(255, 255, 255, .82); }
.nf-pagehero .nf-eyebrow { color: var(--nf-accent-on-dark); }
.nf-pagehero .nf-btn-row { margin-top: 1.5rem; }

/* ==================================================== 7. HOME SECTIONS ==== */
.nf-trustbar { border-bottom: 1px solid var(--nf-line); background: #fff; }
.nf-trustbar__grid {
  display: grid;
  gap: 1.25rem 1.5rem;
  grid-template-columns: repeat(2, 1fr);
  padding-block: clamp(1.5rem, 4vw, 2.25rem);
}
@media (min-width: 900px) { .nf-trustbar__grid { grid-template-columns: repeat(4, 1fr); } }
.nf-trustbar__item { display: flex; align-items: flex-start; gap: .7rem; }
.nf-trustbar__item svg { width: 26px; height: 26px; flex: none; fill: var(--nf-primary); }
.nf-trustbar__item strong { display: block; color: var(--nf-ink); font-size: .97rem; }
.nf-trustbar__item span { color: var(--nf-muted); font-size: .87rem; line-height: 1.5; display: block; }

.nf-feature {
  padding: clamp(1.4rem, 3vw, 1.85rem);
  background: #fff;
  border: 1px solid var(--nf-line);
  border-radius: var(--nf-radius);
  transition: border-color .2s var(--nf-ease), box-shadow .2s var(--nf-ease), transform .2s var(--nf-ease);
}
.nf-feature:hover { border-color: var(--nf-primary-light); box-shadow: var(--nf-shadow); transform: translateY(-2px); }
.nf-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  margin-bottom: 1rem;
  border-radius: 13px;
  background: var(--nf-primary-050);
}
.nf-feature__icon svg { width: 26px; height: 26px; fill: var(--nf-primary); }
.nf-feature h3 { margin-bottom: .45rem; font-size: 1.14rem; }
.nf-feature p { margin-bottom: 0; font-size: .955rem; color: var(--nf-muted); }

.nf-checklist { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.nf-checklist li { display: flex; align-items: flex-start; gap: .7rem; margin: 0; }
.nf-checklist svg { width: 22px; height: 22px; flex: none; margin-top: .16em; fill: var(--nf-primary); }
.nf-checklist strong { display: block; color: var(--nf-ink); }
.nf-checklist span { color: var(--nf-muted); font-size: .95rem; }
.nf-section--dark .nf-checklist svg { fill: var(--nf-accent); }
.nf-section--dark .nf-checklist strong { color: #fff; }
.nf-section--dark .nf-checklist span { color: rgba(255, 255, 255, .75); }

.nf-marketgrid { display: grid; gap: 1rem; }
@media (min-width: 700px) { .nf-marketgrid { grid-template-columns: repeat(3, 1fr); } }
.nf-market {
  padding: 1.3rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--nf-radius);
  background: rgba(255, 255, 255, .05);
}
.nf-market h3 { font-size: 1.06rem; margin-bottom: .4rem; }
.nf-market p { margin: 0; font-size: .93rem; color: rgba(255, 255, 255, .76); }
.nf-market__flagline { display: block; width: 34px; height: 3px; margin-bottom: .9rem; border-radius: 2px; background: var(--nf-accent-on-dark); }

/* CTA band */
.nf-ctaband {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, var(--nf-primary-dark), var(--nf-primary-mid));
  color: rgba(255, 255, 255, .85);
}
.nf-ctaband__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .5;
}
.nf-ctaband__inner { position: relative; padding-block: clamp(2.75rem, 6vw, 4.25rem); text-align: center; }
.nf-ctaband h2 { color: #fff; margin-bottom: .65rem; }
.nf-ctaband p { max-width: 44rem; margin-inline: auto; color: rgba(255, 255, 255, .82); }
.nf-ctaband .nf-btn-row { margin-top: 1.75rem; }

/* FAQ accordion */
.nf-faq { display: grid; gap: .75rem; }
.nf-faq__item {
  border: 1px solid var(--nf-line);
  border-radius: var(--nf-radius);
  background: #fff;
  overflow: hidden;
}
.nf-faq__item[open] { border-color: var(--nf-primary-light); box-shadow: var(--nf-shadow-sm); }
.nf-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.05rem 1.25rem;
  margin: 0;
  border: 0;
  background: none;
  color: var(--nf-ink);
  font-family: inherit;
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.nf-faq__q::-webkit-details-marker { display: none; }
.nf-faq__q::marker { content: ""; }
.nf-faq__icon {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  margin-top: .12em;
  border-radius: 50%;
  background: var(--nf-primary-050);
}
.nf-faq__icon::before, .nf-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 2px;
  background: var(--nf-primary);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .2s var(--nf-ease);
}
.nf-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.nf-faq__item[open] .nf-faq__icon::after { transform: translate(-50%, -50%) rotate(0); }
.nf-faq__a { padding: 0 1.25rem 1.2rem; color: var(--nf-muted); }
.nf-faq__a > :last-child { margin-bottom: 0; }
.nf-faq__a a { font-weight: 600; }

/* =============================================================== 8. CARDS === */
.nf-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--nf-line);
  border-radius: var(--nf-radius);
  overflow: hidden;
  transition: border-color .2s var(--nf-ease), box-shadow .2s var(--nf-ease), transform .2s var(--nf-ease);
}
.nf-card:hover { border-color: var(--nf-primary-light); box-shadow: var(--nf-shadow); transform: translateY(-3px); }
.nf-card__media { position: relative; background: var(--nf-bg-soft); }
.nf-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.nf-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.25rem 1.35rem; }
.nf-card__title { margin-bottom: .4rem; font-size: 1.1rem; }
.nf-card__title a { color: inherit; text-decoration: none; }
.nf-card__title a:hover { color: var(--nf-primary); }
.nf-card__excerpt { margin-bottom: 1rem; font-size: .945rem; color: var(--nf-muted); }
.nf-card__foot { margin-top: auto; padding-top: .2rem; }

.nf-chip {
  display: inline-block;
  padding: .28rem .7rem;
  border-radius: 999px;
  background: var(--nf-primary-050);
  color: var(--nf-primary-dark);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
a.nf-chip:hover { background: var(--nf-primary); color: #fff; }
.nf-chip--accent { background: #FBF0DC; color: var(--nf-accent-dark); }
.nf-card__media .nf-chip { position: absolute; top: .8rem; left: .8rem; background: rgba(255, 255, 255, .95); }

/* Category cards */
.nf-catcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 210px;
  padding: 1.35rem;
  border-radius: var(--nf-radius);
  background: linear-gradient(160deg, var(--nf-primary-mid), var(--nf-primary-dark));
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s var(--nf-ease), box-shadow .2s var(--nf-ease);
}
.nf-catcard:hover { transform: translateY(-3px); box-shadow: var(--nf-shadow-lg); color: rgba(255, 255, 255, .9); }
.nf-catcard h3 { color: #fff; margin-bottom: .3rem; font-size: 1.18rem; }
.nf-catcard p { margin: 0; font-size: .92rem; }
.nf-catcard__count { position: absolute; top: 1.1rem; right: 1.1rem; font-size: .78rem; font-weight: 700; color: var(--nf-accent-on-dark); letter-spacing: .06em; text-transform: uppercase; }
.nf-catcard__deco { position: absolute; top: -30px; right: -30px; width: 150px; height: 150px; opacity: .16; }

/* =========================================================== 9. PRODUCTS === */
.nf-prodcard__media img { aspect-ratio: 1 / 1; object-fit: cover; background: #fff; }
.nf-prodcard__spec {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  margin: 0 0 .9rem;
  padding: 0;
  list-style: none;
}
.nf-prodcard__spec li {
  margin: 0;
  padding: .2rem .55rem;
  border: 1px solid var(--nf-line);
  border-radius: 6px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--nf-muted);
}

.nf-product { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 940px) { .nf-product { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }

.nf-product__gallery { border: 1px solid var(--nf-line); border-radius: var(--nf-radius-lg); background: #fff; overflow: hidden; }
.nf-product__gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.nf-specs { width: 100%; margin: 0 0 1.5rem; border: 1px solid var(--nf-line); border-radius: var(--nf-radius); overflow: hidden; }
.nf-specs th, .nf-specs td { border-bottom: 1px solid var(--nf-line); }
.nf-specs tr:last-child th, .nf-specs tr:last-child td { border-bottom: 0; }
.nf-specs th { width: 42%; background: var(--nf-bg-soft); font-size: .93rem; }
.nf-specs td { font-size: .95rem; }

.nf-sticky { position: sticky; top: calc(var(--nf-header-h) + 18px); }
.nf-quotebox {
  padding: 1.35rem;
  border: 1px solid var(--nf-line);
  border-top: 4px solid var(--nf-primary);
  border-radius: var(--nf-radius);
  background: #fff;
  box-shadow: var(--nf-shadow-sm);
}
.nf-quotebox h2 { font-size: 1.18rem; margin-bottom: .4rem; }
.nf-quotebox p { font-size: .93rem; color: var(--nf-muted); }
.nf-quotebox .nf-btn { width: 100%; margin-bottom: .55rem; }
.nf-quotebox__meta { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--nf-line); font-size: .88rem; color: var(--nf-muted); }
.nf-quotebox__meta strong { display: block; color: var(--nf-ink); font-size: .92rem; margin-bottom: .15rem; }
.nf-quotebox__meta + .nf-quotebox__meta { margin-top: .9rem; padding-top: .9rem; }

.nf-related { border-top: 1px solid var(--nf-line); }

/* ============================================================== 10. BLOG === */
.nf-prose { font-size: 1.075rem; }
.nf-prose > * + * { margin-top: 1.2em; }
.nf-prose h2 { margin: 2.1em 0 .6em; font-size: clamp(1.42rem, 1.2rem + 1vw, 1.85rem); scroll-margin-top: calc(var(--nf-header-h) + 20px); }
.nf-prose h3 { margin: 1.7em 0 .5em; font-size: clamp(1.16rem, 1.06rem + .5vw, 1.36rem); scroll-margin-top: calc(var(--nf-header-h) + 20px); }
.nf-prose h4 { margin: 1.4em 0 .45em; }
.nf-prose ul, .nf-prose ol { padding-left: 1.3em; }
.nf-prose li { margin-bottom: .55em; }
.nf-prose img, .nf-prose figure { border-radius: var(--nf-radius); }
.nf-prose figcaption { margin-top: .55rem; color: var(--nf-muted); font-size: .875rem; text-align: center; }
.nf-prose table { margin: 1.6em 0; border: 1px solid var(--nf-line); border-radius: var(--nf-radius); overflow: hidden; }
.nf-prose > table { display: table; }
.nf-prose .nf-tablewrap { overflow-x: auto; margin: 1.6em 0; }
.nf-prose .nf-tablewrap table { margin: 0; min-width: 520px; }

.nf-callout {
  margin: 1.9em 0;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--nf-primary-050);
  border-left: 4px solid var(--nf-primary);
  border-radius: var(--nf-radius-sm);
  background: var(--nf-primary-050);
  font-size: 1rem;
}
.nf-callout > :last-child { margin-bottom: 0; }
.nf-callout strong:first-child { display: block; margin-bottom: .3rem; color: var(--nf-primary-dark); }
.nf-callout--sand { background: var(--nf-sand); border-color: #EFE2C9; border-left-color: var(--nf-accent); }

.nf-postmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  margin-bottom: 1.5rem;
  color: var(--nf-muted);
  font-size: .885rem;
}
.nf-postmeta a { color: inherit; }
.nf-postmeta__sep { opacity: .45; }

.nf-toc {
  margin: 0 0 2rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--nf-line);
  border-radius: var(--nf-radius);
  background: var(--nf-bg-soft);
  font-size: .96rem;
}
.nf-toc h2 { margin: 0 0 .6rem; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--nf-muted); }
.nf-toc ol { margin: 0; padding-left: 1.15em; }
.nf-toc li { margin-bottom: .35em; }
.nf-toc a { color: var(--nf-ink); text-decoration: none; }
.nf-toc a:hover { color: var(--nf-primary); text-decoration: underline; }

.nf-share { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--nf-line); }
.nf-share span { font-size: .88rem; font-weight: 700; color: var(--nf-ink); }
.nf-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--nf-line);
  border-radius: 50%;
  color: var(--nf-muted);
}
.nf-share a:hover { border-color: var(--nf-primary); background: var(--nf-primary-050); color: var(--nf-primary-dark); }
.nf-share svg { width: 18px; height: 18px; fill: currentColor; }

.nf-postlayout { display: grid; gap: clamp(2rem, 5vw, 3.25rem); }
@media (min-width: 1040px) { .nf-postlayout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }

.nf-pagination { margin-top: 2.75rem; }
.nf-pagination .nav-links, .nf-pagination.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.nf-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; height: 44px;
  padding: 0 .8rem;
  border: 1px solid var(--nf-line);
  border-radius: 10px;
  color: var(--nf-ink);
  font-weight: 600;
  text-decoration: none;
}
.nf-pagination .page-numbers:hover { border-color: var(--nf-primary); background: var(--nf-primary-050); }
.nf-pagination .page-numbers.current { background: var(--nf-primary); border-color: var(--nf-primary); color: #fff; }
.nf-pagination .page-numbers.dots { border-color: transparent; }

.nf-postnav { display: grid; gap: 1rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--nf-line); }
@media (min-width: 700px) { .nf-postnav { grid-template-columns: 1fr 1fr; } }
.nf-postnav a {
  display: block;
  padding: 1rem 1.15rem;
  border: 1px solid var(--nf-line);
  border-radius: var(--nf-radius);
  text-decoration: none;
}
.nf-postnav a:hover { border-color: var(--nf-primary-light); background: var(--nf-bg-soft); }
.nf-postnav span { display: block; margin-bottom: .25rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nf-muted); }
.nf-postnav strong { color: var(--nf-ink); font-size: .99rem; line-height: 1.4; }
.nf-postnav .nf-postnav__next { text-align: right; }

/* Breadcrumbs */
.nf-breadcrumbs { padding-block: .85rem; font-size: .855rem; color: var(--nf-muted); }
.nf-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; margin: 0; padding: 0; list-style: none; }
.nf-breadcrumbs li { display: flex; align-items: center; gap: .45rem; margin: 0; }
.nf-breadcrumbs li:not(:last-child)::after { content: "/"; opacity: .45; }
.nf-breadcrumbs a { color: inherit; text-decoration: none; }
.nf-breadcrumbs a:hover { color: var(--nf-primary); text-decoration: underline; }
.nf-breadcrumbs [aria-current="page"] { color: var(--nf-ink); font-weight: 600; }
.nf-breadcrumbs--onDark { color: rgba(255, 255, 255, .72); }
.nf-breadcrumbs--onDark a { color: rgba(255, 255, 255, .82); }
.nf-breadcrumbs--onDark a:hover { color: #fff; }
.nf-breadcrumbs--onDark [aria-current="page"] { color: #fff; }

/* ============================================================== 11. FORMS === */
.nf-form { display: grid; gap: 1.05rem; }
@media (min-width: 640px) { .nf-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; } }
.nf-field { display: block; }
.nf-field > label, .nf-label {
  display: block;
  margin-bottom: .4rem;
  color: var(--nf-ink);
  font-size: .92rem;
  font-weight: 700;
}
.nf-field .nf-req { color: var(--nf-accent-dark); }
.nf-field small { display: block; margin-top: .35rem; color: var(--nf-muted); font-size: .82rem; }

input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="number"], input[type="search"], input[type="date"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 1px solid var(--nf-line);
  border-radius: 10px;
  background: #fff;
  color: var(--nf-ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color .16s var(--nf-ease), box-shadow .16s var(--nf-ease);
}
textarea { min-height: 140px; resize: vertical; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--nf-muted) 50%), linear-gradient(135deg, var(--nf-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--nf-primary);
  box-shadow: 0 0 0 3px rgba(21, 122, 80, .16);
  outline: none;
}
input::placeholder, textarea::placeholder { color: #93A49B; }

.nf-consent { display: flex; align-items: flex-start; gap: .65rem; font-size: .9rem; color: var(--nf-muted); }
.nf-consent input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin-top: .18em; flex: none; accent-color: var(--nf-primary); }

/* Honeypot — hidden from humans, visible to naive bots */
.nf-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.nf-notice {
  padding: .95rem 1.15rem;
  border-radius: var(--nf-radius-sm);
  border: 1px solid;
  font-size: .95rem;
}
.nf-notice--ok { background: var(--nf-primary-050); border-color: #B7E3CB; color: #0B4A31; }
.nf-notice--err { background: #FDF0EC; border-color: #F3CBBD; color: #8A2C10; }
.nf-notice > :last-child { margin-bottom: 0; }

.nf-searchform { display: flex; gap: .5rem; }
.nf-searchform input[type="search"] { flex: 1; }

/* Contact info cards */
.nf-infocard {
  display: flex;
  gap: .9rem;
  padding: 1.25rem;
  border: 1px solid var(--nf-line);
  border-radius: var(--nf-radius);
  background: #fff;
  height: 100%;
}
.nf-infocard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 12px;
  background: var(--nf-primary-050);
}
.nf-infocard__icon svg { width: 22px; height: 22px; fill: var(--nf-primary); }
.nf-infocard h3 { margin-bottom: .3rem; font-size: 1.03rem; }
.nf-infocard p, .nf-infocard address { margin: 0; font-style: normal; font-size: .95rem; color: var(--nf-muted); }
.nf-infocard a { font-weight: 600; }

.nf-map {
  position: relative;
  border-radius: var(--nf-radius-lg);
  overflow: hidden;
  border: 1px solid var(--nf-line);
  background: var(--nf-bg-soft);
}
.nf-map iframe { display: block; width: 100%; height: 420px; border: 0; }
.nf-map__placeholder { display: grid; place-items: center; gap: .5rem; padding: clamp(2.5rem, 8vw, 5rem) 1.5rem; text-align: center; color: var(--nf-muted); }
.nf-map__placeholder svg { width: 46px; height: 46px; fill: var(--nf-primary); opacity: .5; }

/* ============================================================= 12. FOOTER === */
.nf-footer { background: var(--nf-primary-dark); color: rgba(255, 255, 255, .72); font-size: .95rem; }
.nf-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.nf-footer a:hover { color: #fff; text-decoration: underline; }
.nf-footer strong, .nf-footer b { color: #fff; }
.nf-section--dark strong, .nf-section--dark b { color: #fff; }
.nf-pagehero strong, .nf-pagehero b { color: #fff; }
.nf-ctaband strong, .nf-ctaband b { color: #fff; }
.nf-catcard strong, .nf-catcard b { color: #fff; }
.nf-footer h2, .nf-footer h3 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.05rem; }
.nf-footer ul { margin: 0; padding: 0; list-style: none; }
.nf-footer li { margin-bottom: .55rem; }

.nf-footer__top { display: grid; gap: 2.25rem; padding-block: clamp(2.5rem, 6vw, 3.75rem); }
@media (min-width: 720px) { .nf-footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .nf-footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2.5rem; } }
.nf-footer__brand img, .nf-footer__brand svg { height: 54px; width: auto; margin-bottom: 1.1rem; }
.nf-footer__about { max-width: 34ch; margin-bottom: 1.25rem; }
.nf-footer__socials { display: flex; gap: .6rem; }
.nf-footer__socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
}
.nf-footer__socials a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .45); }
.nf-footer__socials svg { width: 18px; height: 18px; fill: rgba(255, 255, 255, .8); }

.nf-footer__contact li { display: flex; gap: .6rem; align-items: flex-start; }
.nf-footer__contact svg { width: 18px; height: 18px; flex: none; margin-top: .2em; fill: var(--nf-accent-on-dark); }
.nf-footer__contact address { font-style: normal; margin: 0; }

.nf-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding-block: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .875rem;
}
.nf-footer__legal { display: flex; flex-wrap: wrap; gap: .45rem 1.15rem; }
.nf-footer__bottom p { margin: 0; }

/* Widgets */
.nf-widget { margin-bottom: 2rem; }
.nf-widget:last-child { margin-bottom: 0; }
.nf-widget__title { margin-bottom: .9rem; font-size: 1.02rem; }
.nf-sidebar .nf-widget ul { margin: 0; padding: 0; list-style: none; }
.nf-sidebar .nf-widget li { margin-bottom: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--nf-line-soft); }
.nf-sidebar .nf-widget li:last-child { border-bottom: 0; }
.nf-sidebar .nf-widget a:not([class*="nf-btn"]) { color: var(--nf-ink); text-decoration: none; font-weight: 500; }
.nf-sidebar .nf-widget a:not([class*="nf-btn"]):hover { color: var(--nf-primary); }
.nf-panel {
  padding: 1.35rem;
  border: 1px solid var(--nf-line);
  border-radius: var(--nf-radius);
  background: var(--nf-bg-soft);
}
.nf-panel h2, .nf-panel h3 { font-size: 1.06rem; margin-bottom: .55rem; }
.nf-panel p { font-size: .94rem; color: var(--nf-muted); }

/* ===================================================== 13. UTIL / BLOCKS === */
.nf-stack > * + * { margin-top: 1rem; }
.nf-mt-0 { margin-top: 0 !important; }
.nf-mb-0 { margin-bottom: 0 !important; }
.nf-center { text-align: center; }
.nf-muted { color: var(--nf-muted); }
.nf-nowrap { white-space: nowrap; }
.nf-hide { display: none !important; }
@media (max-width: 639px) { .nf-hide-sm { display: none !important; } }

.nf-emptystate { padding: clamp(2.5rem, 7vw, 4.5rem) 1.5rem; text-align: center; border: 1px dashed var(--nf-line); border-radius: var(--nf-radius-lg); background: var(--nf-bg-soft); }
.nf-emptystate h2 { margin-bottom: .5rem; }

/* 404 */
.nf-404 { text-align: center; padding-block: clamp(3rem, 9vw, 6rem); }
.nf-404__code {
  display: block;
  font-size: clamp(4.5rem, 16vw, 9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  background: linear-gradient(135deg, var(--nf-primary), var(--nf-primary-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nf-404__links { margin-top: 2.5rem; text-align: left; }

/* WordPress core alignment + caption classes */
.alignleft { float: left; margin: .35rem 1.6rem 1.1rem 0; }
.alignright { float: right; margin: .35rem 0 1.1rem 1.6rem; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { width: 100%; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
@media (min-width: 1100px) { .nf-prose .alignwide { width: calc(100% + 160px); margin-left: -80px; max-width: none; } }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-block-image figcaption { margin-top: .5rem; color: var(--nf-muted); font-size: .875rem; text-align: center; }
.sticky .nf-card__title::before { content: "★ "; color: var(--nf-accent); }
.wp-block-button__link { border-radius: 999px; }
.wp-block-separator { border-top: 1px solid var(--nf-line); }
.wp-block-quote { border-left: 4px solid var(--nf-primary-light); padding-left: 1.4rem; }
.gallery { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.gallery-item { margin: 0; }

/* Comments */
.nf-comments { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--nf-line); }
.nf-comments ol { list-style: none; padding: 0; }
.nf-comments .children { padding-left: 1.5rem; }
.nf-comments .comment-body { padding: 1.15rem 0; border-bottom: 1px solid var(--nf-line-soft); }
.nf-comments .comment-author img { border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: .5rem; }
.nf-comments .comment-meta { font-size: .85rem; color: var(--nf-muted); margin-bottom: .5rem; }

/* ===================================================== 14. MOTION & PRINT === */
.nf-reveal { opacity: 0; transform: translateY(14px); }
.nf-reveal.is-visible { opacity: 1; transform: none; transition: opacity .5s var(--nf-ease), transform .5s var(--nf-ease); }

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

@media print {
  .nf-header, .nf-topbar, .nf-footer, .nf-wa-float, .nf-mobile-nav, .nf-share, .nf-ctaband, .nf-quotebox, .nf-breadcrumbs { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  .nf-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
}

/* Footer legal row — rendered by wp_nav_menu, so styled by structure */
.nf-footer__legal ul { display: flex; flex-wrap: wrap; gap: .45rem 1.15rem; margin: 0; padding: 0; list-style: none; }
.nf-footer__legal li { margin: 0; }

/* Utility spacing used by templates instead of inline styles */
.nf-more { margin-top: clamp(1.5rem, 4vw, 2.25rem); }
.nf-catrow { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.nf-rounded, .nf-article__img { border-radius: var(--nf-radius-lg); }

.nf-article__figure { margin: 0 0 2rem; }
.nf-article__figure img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--nf-radius-lg); }

.nf-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 2rem; font-size: .9rem; }
.nf-tags span { font-weight: 700; color: var(--nf-ink); }
.nf-tags a {
  display: inline-block;
  padding: .22rem .7rem;
  border: 1px solid var(--nf-line);
  border-radius: 999px;
  color: var(--nf-muted);
  text-decoration: none;
}
.nf-tags a:hover { border-color: var(--nf-primary); background: var(--nf-primary-050); color: var(--nf-primary-dark); }

.nf-postcta { margin-top: 2.5rem; border-left: 4px solid var(--nf-primary); }
.nf-postcta h2 { font-size: 1.18rem; }
.nf-postcta .nf-btn-row { margin-top: 1.1rem; }

.nf-infocard-title { margin-bottom: .3rem; font-size: 1.03rem; }
.nf-searchpanel { margin-bottom: 1.75rem; }
.nf-sidebar { min-width: 0; }

/* Grid and flex children default to min-width:auto, so a wide child (a data
   table with a min-width, a long code block) can force its whole column wider
   than the viewport. Resetting to 0 lets the inner scroll containers do their
   job instead. */
.nf-grid > *,
.nf-split > *,
.nf-postlayout > *,
.nf-product > *,
.nf-trustbar__grid > *,
.nf-marketgrid > * { min-width: 0; }

.nf-prose .nf-tablewrap { max-width: 100%; }

/* ================================== HEADLINE PRODUCTS (two large boxes) === */
.nf-featured { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 620px) { .nf-featured { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .nf-featured { grid-template-columns: repeat(3, 1fr); } }
.nf-featured > * { min-width: 0; }

.nf-featured__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--nf-line);
  border-radius: var(--nf-radius-lg);
  overflow: hidden;
  transition: border-color .2s var(--nf-ease), box-shadow .2s var(--nf-ease), transform .2s var(--nf-ease);
}
.nf-featured__card:hover { border-color: var(--nf-primary-light); box-shadow: var(--nf-shadow-lg); transform: translateY(-3px); }

.nf-featured__media { display: block; background: var(--nf-bg-soft); border-bottom: 1px solid var(--nf-line); }
.nf-featured__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.nf-featured__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.2rem, 3vw, 1.9rem); }
.nf-featured__body .nf-chip { align-self: flex-start; margin-bottom: .75rem; }
.nf-featured__title { margin-bottom: .5rem; font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem); }
.nf-featured__title a { color: inherit; text-decoration: none; }
.nf-featured__title a:hover { color: var(--nf-primary); }
.nf-featured__text { margin-bottom: 1.1rem; color: var(--nf-muted); }

.nf-featured__specs { display: grid; gap: .1rem; margin: 0 0 1.35rem; }
.nf-featured__specs > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--nf-line-soft);
  font-size: .92rem;
}
.nf-featured__specs dt { color: var(--nf-muted); }
.nf-featured__specs dd { margin: 0; font-weight: 700; color: var(--nf-ink); text-align: right; }

.nf-featured__actions { margin-top: auto; }

/* ============================================ LOCATION / MAP BLOCK ======== */
.nf-locate { display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }
@media (min-width: 900px) { .nf-locate { grid-template-columns: 1.35fr 1fr; } }
.nf-locate > * { min-width: 0; }

.nf-locate__map iframe { display: block; width: 100%; height: clamp(280px, 42vw, 420px); border: 0; }

.nf-locate__details { display: grid; gap: 1rem; }
.nf-locate__item { display: flex; gap: .9rem; align-items: flex-start; }
.nf-locate__item h3 { margin-bottom: .2rem; font-size: 1rem; }
.nf-locate__item p, .nf-locate__item address { margin: 0; font-style: normal; color: var(--nf-muted); }
.nf-locate__item a { font-weight: 600; }
.nf-locate__cta { margin-top: .35rem; }