@charset "UTF-8";

/* ═══════════════════════════════════════════
   FONTS
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://hygrene.com/fonts/PP-Neue-Montreal-Book.woff2') format('woff2'),
       url('https://hygrene.com/fonts/PP-Neue-Montreal-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://hygrene.com/fonts/PP-Neue-Montreal-Regular.woff2') format('woff2'),
       url('https://hygrene.com/fonts/PP-Neue-Montreal-Regular.woff') format('woff');
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://hygrene.com/fonts/PP-Neue-Montreal-Medium.woff2') format('woff2'),
       url('https://hygrene.com/fonts/PP-Neue-Montreal-Medium.woff') format('woff');
  font-weight: 530;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://hygrene.com/fonts/PP-Neue-Montreal-Bold.woff2') format('woff2'),
       url('https://hygrene.com/fonts/PP-Neue-Montreal-Bold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════
   HYGRĒNE THEME CSS
   Blog, Content Pages, Popup, 404
═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   HYGRĒNE THEME CSS
   Blog, Content Pages, Popup, 404
═══════════════════════════════════════════ */

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

:root {
  --font-heading:      'PP Neue Montreal','Helvetica Neue',Arial,sans-serif;
  --font-heading-weight: 450;   /* Regular */
  --font-heading-hero: 'PP Neue Montreal','Helvetica Neue',Arial,sans-serif;
  --font-heading-hero-weight: 400; /* Book */
  --font-medium-weight: 530;   /* Medium */
  --font-body:         'Inter',system-ui,sans-serif;
  --color-text:        #1A1A1A;
  --color-text-secondary:         #6B6B6B;
  --color-line:        #E5E5E5;
  --color-bg:          #FFFFFF;
  --color-line-faint:  rgba(0,0,0,0.06);
}

html, body {
  width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
}

/* ── BLOG INDEX ── */
.hygr-blog-page { padding-top: 80px; }

.hygr-blog-header {
  max-width: 960px;
  margin: 0 auto;
  padding: 60px 40px 40px;
  border-bottom: 1px solid var(--color-line);
}
.hygr-blog-title {
  font-family: var(--font-heading);
  font-size: clamp(28px,4vw,44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.1;
}

.hygr-blog-grid {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 40px 120px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  border-bottom: 1px solid var(--color-line);
}
.hygr-blog-card {
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
}
.hygr-blog-card:nth-child(3n) { border-right: none; }

.hygr-blog-card__img {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--color-line);
}
.hygr-blog-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
  display: block;
}
.hygr-blog-card__img:hover img { transform: scale(1.04); }

.hygr-blog-card__body {
  padding: 28px 28px 36px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hygr-blog-card__date {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-secondary);
  display: block; margin-bottom: 10px;
  font-family: var(--font-body);
}
.hygr-blog-card__title {
  font-family: var(--font-heading);
  font-size: 18px; font-weight: 400;
  color: var(--color-text);
  margin-bottom: 12px;
  line-height: 1.3;
}
.hygr-blog-card__title a {
  text-decoration: none; color: inherit;
}
.hygr-blog-card__title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hygr-blog-card__excerpt {
  font-size: 14px; line-height: 1.65;
  color: var(--color-text-secondary);
  flex: 1;
  margin-bottom: 16px;
  font-family: var(--font-body);
}
.hygr-blog-card__read {
  font-size: 13px; color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-body);
  transition: opacity 150ms;
}
.hygr-blog-card__read:hover { opacity: 0.6; }
.hygr-blog-empty { padding: 60px 40px; color: var(--color-text-secondary); }

/* Pagination */
.nav-links {
  display: flex; gap: 8px;
  padding: 40px 0 0;
  grid-column: 1 / -1;
}
.nav-links a, .nav-links span {
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--color-line);
  font-size: 13px; color: var(--color-text-secondary);
  text-decoration: none;
  font-family: var(--font-body);
  transition: border-color 150ms, color 150ms;
}
.nav-links a:hover { border-color: var(--color-text); color: var(--color-text); }
.nav-links .current { border-color: var(--color-text); color: var(--color-text); }

/* ── SINGLE POST ── */
.hygr-single-post { padding-top: 80px; }

.hygr-post-header {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 40px 48px;
}
.hygr-post-meta {
  display: flex; gap: 16px; align-items: center;
  margin-bottom: 20px;
}
.hygr-post-date, .hygr-post-cat {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
}
.hygr-post-title {
  font-family: var(--font-heading);
  font-size: clamp(28px,4vw,48px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 20px;
  color: var(--color-text);
}
.hygr-post-excerpt {
  font-size: 18px; color: var(--color-text-secondary);
  line-height: 1.6;
  font-family: var(--font-body);
}
.hygr-post-thumb {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 40px 48px;
}
.hygr-post-thumb img {
  width: 100%;
  aspect-ratio: 16/8;
  object-fit: cover;
  display: block;
}
.hygr-post-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 40px 80px;
  font-family: var(--font-body);
}
.hygr-post-content p  { margin-bottom: 20px; font-size: 16px; line-height: 1.8; color: var(--color-text-secondary); }
.hygr-post-content h2 { font-family: var(--font-heading); font-size: 22px; font-weight: 500; color: var(--color-text); margin: 40px 0 12px; }
.hygr-post-content h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 500; color: var(--color-text); margin: 28px 0 8px; }
.hygr-post-content a  { color: var(--color-text); text-underline-offset: 3px; }
.hygr-post-content img { max-width: 100%; height: auto; }
.hygr-post-footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 40px 80px;
  border-top: 1px solid var(--color-line);
  padding-top: 28px;
}
.hygr-back-link {
  font-size: 13px; color: var(--color-text-secondary);
  text-decoration: none;
  font-family: var(--font-body);
  transition: color 150ms;
}
.hygr-back-link:hover { color: var(--color-text); }

/* ── CONTENT PAGE (Privacy, Terms) ── */
.hygr-content-page { padding-top: 80px; min-height: 70vh; }
.hygr-content-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 40px 120px;
}
.hygr-content-title {
  font-family: var(--font-heading);
  font-size: clamp(28px,4vw,44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 48px;
  line-height: 1.1;
}
.hygr-content-body {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.8;
  color: var(--color-text-secondary);
}
.hygr-content-body h2 { font-family: var(--font-heading); font-size: 20px; font-weight: 500; color: var(--color-text); margin: 40px 0 12px; }
.hygr-content-body h3 { font-family: var(--font-heading); font-size: 16px; font-weight: 500; color: var(--color-text); margin: 28px 0 8px; }
.hygr-content-body p  { margin-bottom: 16px; }
.hygr-content-body a  { color: var(--color-text); text-underline-offset: 3px; }
.hygr-content-body ul, .hygr-content-body ol { padding-left: 24px; margin-bottom: 16px; }
.hygr-content-body li { margin-bottom: 6px; }

/* ── 404 ── */
.hygr-404 {
  min-height: 70vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 40px;
}
.hygr-404-code {
  font-family: var(--font-heading);
  font-size: 120px; font-weight: 400;
  letter-spacing: -0.05em;
  color: var(--color-line);
  display: block; line-height: 1; margin-bottom: 24px;
}
.hygr-404-title {
  font-family: var(--font-heading);
  font-size: 32px; font-weight: 500;
  margin-bottom: 12px; color: var(--color-text);
}
.hygr-404-body {
  font-size: 15px; color: var(--color-text-secondary);
  margin-bottom: 32px;
  font-family: var(--font-body);
}
.hygr-404-cta {
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 24px;
  border: 1px solid var(--color-text);
  font-family: var(--font-body);
  font-size: 13px; color: var(--color-text);
  text-decoration: none;
  transition: background 150ms, color 150ms;
}
.hygr-404-cta:hover { background: var(--color-text); color: var(--color-bg); }

/* ── POPUP TRIGGER ── */
#hygr-popup-trigger {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 900;
  height: 44px;
  padding: 0 24px;
  background: #1A1A1A;
  color: #fff;
  border: none;
  font-family: var(--font-body, "Inter",system-ui,sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 16px rgba(0,0,0,0.15);
  transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  white-space: nowrap;
}
#hygr-popup-trigger:hover {
  background: #333;
  box-shadow: 0 4px 24px rgba(0,0,0,0.22);
  transform: translateY(-2px);
}

/* ── POPUP OVERLAY ── */
#hygr-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 10px 10px 0;
  pointer-events: none;
  transition: background 400ms ease;
}
#hygr-popup-overlay.is-open {
  background: rgba(0,0,0,0.25);
  pointer-events: all;
}

/* ── POPUP BOX — slides in from right ── */
#hygr-popup-box {
  background: #fff;
  width: 100%;
  max-width: 420px;
  max-height: 82vh;
  overflow-y: auto;
  border: 1px solid #E5E5E5;
  box-shadow: 0 8px 48px rgba(0,0,0,0.14);
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity 380ms cubic-bezier(0.16,1,0.3,1),
    transform 380ms cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
#hygr-popup-overlay.is-open #hygr-popup-box {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

/* ── POPUP HEADER ── */
#hygr-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #E5E5E5;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
#hygr-popup-label {
  font-family: var(--font-heading, "PP Neue Montreal","Helvetica Neue",Arial,sans-serif);
  font-size: 15px;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: -0.01em;
}
#hygr-popup-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #6B6B6B;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms ease;
  flex-shrink: 0;
}
#hygr-popup-close:hover { color: #1A1A1A; }

/* ── POPUP CONTENT ── */
#hygr-popup-content {
  padding: 28px 24px 32px;
}

/* ── WPFORMS INSIDE POPUP ── */
#hygr-popup-content .wpforms-container { margin: 0; }
#hygr-popup-content .wpforms-field { margin-bottom: 16px; }
#hygr-popup-content .wpforms-field-label {
  font-family: var(--font-body, "Inter",system-ui,sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B6B6B;
  margin-bottom: 6px;
}
#hygr-popup-content input[type=text],
#hygr-popup-content input[type=email],
#hygr-popup-content input[type=tel],
#hygr-popup-content input[type=number],
#hygr-popup-content textarea,
#hygr-popup-content select {
  width: 100%;
  border: 1px solid #E5E5E5;
  border-radius: 0;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font-body, "Inter",system-ui,sans-serif);
  color: #1A1A1A;
  background: #fff;
  box-shadow: none;
  outline: none;
  transition: border-color 200ms ease;
  -webkit-appearance: none;
}
#hygr-popup-content input:focus,
#hygr-popup-content textarea:focus,
#hygr-popup-content select:focus {
  border-color: #1A1A1A;
}
#hygr-popup-content textarea { resize: vertical; min-height: 80px; }
#hygr-popup-content .wpforms-submit-container { margin-top: 20px; }
#hygr-popup-content button[type=submit],
#hygr-popup-content input[type=submit] {
  width: 100%;
  height: 44px;
  background: #1A1A1A;
  color: #fff;
  border: none;
  border-radius: 0;
  font-family: var(--font-body, "Inter",system-ui,sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 200ms ease;
}
#hygr-popup-content button[type=submit]:hover,
#hygr-popup-content input[type=submit]:hover {
  background: #333;
}

/* WPForms multi-step progress */
#hygr-popup-content .wpforms-page-indicator-steps { font-size: 12px; color: #6B6B6B; margin-bottom: 16px; }
#hygr-popup-content .wpforms-page-indicator-page-title { font-size: 13px; font-weight: 500; color: #1A1A1A; }

/* ── POPUP MOBILE ── */
@media (max-width: 768px) {
  #hygr-popup-overlay { padding: 0 10px 10px 10px; align-items: flex-end; justify-content: center; }
  #hygr-popup-box { max-width: 100%; max-height: 85vh; transform: translateX(0) translateY(32px); }
  #hygr-popup-overlay.is-open #hygr-popup-box { transform: translateX(0) translateY(0); }
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .hygr-blog-grid { grid-template-columns: 1fr; padding: 0 24px 80px; }
  .hygr-blog-card { border-right: none; }
  .hygr-blog-header { padding: 48px 24px 32px; }
  .hygr-post-header { padding: 48px 24px 36px; }
  .hygr-post-thumb { padding: 0 24px 36px; }
  .hygr-post-content { padding: 0 24px 60px; }
  .hygr-post-footer { padding: 24px 24px 60px; }
  .hygr-content-inner { padding: 48px 24px 80px; }
  #hygr-popup-trigger { bottom: 20px; right: 20px; }
  #hygr-popup-overlay { padding: 0 20px 80px 20px; align-items: flex-end; justify-content: center; }
  #hygr-popup-box { max-width: 100%; }
}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
.hygr-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 0px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 500;
  /* visible by default on all pages */
  opacity: 1;
  pointer-events: all;
  transition: opacity 400ms ease;
}
/* Home page — hide header, show only on scroll via JS */
.home .hygr-header {
  opacity: 0;
  pointer-events: none;
}
.home .hygr-header.visible {
  opacity: 1;
  pointer-events: all;
}
.hygr-header__logo {
  font-family: var(--font-heading);
  font-size: 15px; font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.hygr-header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.hygr-header__nav a {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
  text-decoration: none;
  transition: color 150ms ease;
  white-space: nowrap;
}
.hygr-header__nav a:hover{color: var(--color-text-secondary);}
.hygr-header__nav a[aria-current="page"] { color: var(--color-text); }

.hygr-header__cta {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 16px;
  border: 1px solid #D1FA94;
  background: #D1FA94;
  font-family: var(--font-body);
  font-size: 13px; color: var(--color-text);
  cursor: pointer; white-space: nowrap;
  transition: background 150ms, color 150ms;
	border-radius: 100px;text-transform: uppercase;letter-spacing: 0.12em;padding: 10px 20px 10px 24px;
}
.hygr-header__cta:hover { background: var(--color-text); color: var(--color-bg); }

/* Mobile right side — hidden on desktop */
.hygr-header__mobile-right { display: none; align-items: center; gap: 12px; }

/* Mobile CTA — shown on mobile */
.hygr-header__mobile-cta {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 14px;
  border: 1px solid #D1FA94;
  background: #D1FA94;
  font-family: var(--font-body);
  font-size: 12px; color: var(--color-text);
  cursor: pointer; white-space: nowrap;
  transition: background 150ms, color 150ms;
	border-radius: 100px;text-transform: uppercase;letter-spacing: 0.12em;padding: 10px 20px 10px 24px;
}
.hygr-header__mobile-cta:hover { background: var(--color-text); color: var(--color-bg); }

/* Hamburger button */
.hygr-header__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: none; border: none;
  cursor: pointer; padding: 6px;
  flex-shrink: 0;
}
.hygr-header__burger span {
  display: block;
  width: 100%; height: 2px;
  background: var(--color-text);
  transition: transform 250ms ease, opacity 250ms ease;
  transform-origin: center;
}
/* Burger → X animation */
.hygr-header__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hygr-header__burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hygr-header__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── MOBILE NAV DRAWER ── */
.hygr-mobile-nav {
  position: fixed;
  top: 0px; left: 0; right: 0; bottom: 0;
  background: var(--color-bg);
  z-index: 490;
  transform: translateY(-100%);
  opacity: 0;
  overflow: hidden; /* no scrolling when open */
  transition: transform 350ms cubic-bezier(0.16,1,0.3,1), opacity 250ms ease;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* vertically center the nav */
}
.hygr-mobile-nav.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
/* Nav links — horizontally and vertically centered */
.hygr-mobile-nav nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.hygr-mobile-nav a {
  display: block;
  font-family: var(--font-heading);
  font-size: 28px; font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  text-align: center;
  padding: 10px 0;
  letter-spacing: -0.02em;
  transition: opacity 150ms;
}
.hygr-mobile-nav a:hover { opacity: 0.5; }
.hygr-mobile-nav a[aria-current="page"] { opacity: 1; }
/* Copyright — same as footer, fixed to screen bottom left */
.hygr-mobile-nav__copy {
  position: fixed;
  bottom: 24px;
  left: 24px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* Overlay behind drawer */
.hygr-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 480;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}
.hygr-mobile-overlay.is-open { opacity: 1; pointer-events: all; }

/* ── RESPONSIVE SWITCH ── */
@media (max-width: 768px) {
  .hygr-header { padding: 0 16px;margin:10px; }
  .hygr-header__nav { display: none; }
  .hygr-header__mobile-right { display: flex; }
  .hygr-mobile-nav { padding: 24px 20px 32px; }
}

/* ═══════════════════════════════════════════
   LAYOUT MODES
═══════════════════════════════════════════ */

/* Full width — footer at very bottom */
.hygr-layout-full {
  min-height: calc(100vh - 5px);
  display: flex;
  flex-direction: column;
}
.hygr-layout-full > * { flex: 1; }

/* Sidebar layout — two columns after hero */
.hygr-layout-sidebar {
  display: flex;
  min-height: calc(100vh - 56px);
}
/* Left sidebar space (nav injected by page JS) */
.hygr-layout-sidebar::before {
  content: '';
  width: 260px;
  flex-shrink: 0;
}

/* Right content column */
.hygr-layout-sidebar__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Hero must be full width — break out of sidebar column */
.hygr-layout-sidebar__content .hero {
  margin-left: calc(-260px - 0px);
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 0;
}
/* Footer inside right column */
.hygr-layout-sidebar__content .hygr-footer {
  margin-top: auto;
}

/* ── FOOTER ── */
.hygr-footer {
  border-top: 1px solid var(--color-line);
  margin-left: 0; /* default: full width */
}
/* Sidebar layout — footer aligns with content column */
.hygr-layout-sidebar .hygr-footer {
  margin-left: 0;
}
/* Mobile — always full width */
@media (max-width: 768px) {
  .hygr-layout-sidebar .hygr-footer { margin-left: 0; }
}
.hygr-footer__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 80px;
  border-bottom: 1px solid var(--color-line);
  flex-wrap: wrap;
}
.hygr-footer__nav a {
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 18px 20px;
  transition: color 150ms;
  font-family: var(--font-body);
  white-space: nowrap;
}
.hygr-footer__nav a:hover { color: var(--color-text); }
.hygr-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 80px;
  font-size: 12px;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
}

@media (max-width: 768px) {
  .hygr-layout-sidebar::before { display: none; }
  .hygr-layout-sidebar { flex-direction: column; }
  .hygr-footer__nav { padding: 0 24px; }
  .hygr-footer__bottom { padding: 16px 24px; flex-direction: column; gap: 4px; text-align: center; }
}


/* ═══════════════════════════════════════════
   FOCUS AREAS PAGE
═══════════════════════════════════════════ */

/* ── Focus area accordion cards ── */
.fa-cards {
  display: flex;
  gap: 12px;
  margin-top: 48px;
  min-height: 480px;
  align-items: stretch;
}
.fa-card {
  position: relative;
  flex: 1;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: flex 500ms cubic-bezier(0.16,1,0.3,1),
              opacity 400ms ease,
              box-shadow 300ms ease;
  background: #fff;
}
.fa-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
.fa-card.is-active {
  flex: 3;
  box-shadow: 0 8px 40px rgba(0,0,0,0.10);
}
.fa-cards.has-active .fa-card:not(.is-active) {
  opacity: 0.55;
  flex: 0.65;
}

/* Default state */
.fa-card__default {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 20px;
  opacity: 1;
  transition: opacity 300ms ease;
}
.fa-card.is-active .fa-card__default { opacity: 0; pointer-events: none; }
.fa-card__num {
  font-family: var(--font-heading);
  font-size: 52px;
  font-weight: 500;
  color: #E8E8E8;
  line-height: 1;
  letter-spacing: -0.02em;
}
.fa-card__bottom { display: flex; flex-direction: column; gap: 8px; }

/* Expanded state */
.fa-card__expanded {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease 100ms;
  overflow: hidden;
}
.fa-card.is-active .fa-card__expanded { opacity: 1; pointer-events: all; }
.fa-card__img { width: 100%; height: 200px; overflow: hidden; flex-shrink: 0; }
.fa-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fa-card__exp-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow: hidden;
}

/* Shared elements */
.fa-card__icon {
  width: 42px; height: 42px;
  background: #F5F5F5; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fa-card__icon svg { width: 20px; height: 20px; }
.fa-card__category {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-text-secondary);
  display: block;
}
.fa-card__title {
  font-family: var(--font-heading);
  font-size: 15px; font-weight: 500;
  color: var(--color-text);
  line-height: 1.3; margin: 0;
}
.fa-card.is-active .fa-card__title { font-size: 18px; }
.fa-card__desc {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

@media (max-width: 900px) {
  .fa-cards { flex-direction: column; min-height: auto; height: auto; }
  .fa-card { height: auto; min-height: auto; overflow: visible; flex: none; opacity: 1 !important; }
  .fa-cards.has-active .fa-card:not(.is-active) { opacity: 1; flex: none; }
  .fa-card__default, .fa-card__expanded { position: static; inset: auto; }
  .fa-card__expanded { display: none; opacity: 1; pointer-events: all; }
  .fa-card.is-active .fa-card__default { display: none; opacity: 1; }
  .fa-card.is-active .fa-card__expanded { display: flex; opacity: 1; pointer-events: all; }
}

/* ── Why Filtro Fácil layout ── */
.wff-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 40px;
  align-items: start;
}
.wff-image {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  border: 1px solid var(--color-line);
}
.wff-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wff-content { display: flex; flex-direction: column; gap: 0; }
.wff-content .doc-heading { margin-bottom: 24px; }
.wff-bullets { list-style: none; padding: 0; margin: 24px 0 0; }
.wff-bullets li {
  font-family: var(--font-body);
  font-size: 14px; color: var(--color-text);
  line-height: 1.5; padding: 8px 0;
}
.wff-bullets li::before { content: "•"; margin-right: 10px; color: var(--color-text-secondary); }
.wff-footer {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--color-line);
}
.wff-footer .doc-body { max-width: 600px; }

@media (max-width: 768px) {
  .wff-layout { grid-template-columns: 1fr; }
}

/* ── Intervention logic rows ── */
.il-rows { margin-top: 48px; border-top: 1px solid var(--color-line); }
.il-row {
  display: grid;
  grid-template-columns: 60px 200px 1fr;
  gap: 0 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--color-line);
  align-items: start;
}
.il-num {
  font-family: var(--font-body);
  font-size: 13px; color: var(--color-text-secondary); padding-top: 2px;
}
.il-title {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-text); line-height: 1.5; padding-top: 2px;
}
.il-body {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 400;
  line-height: 1.65; color: var(--color-text-secondary);
}
@media (max-width: 768px) {
  .il-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ── Exposure image ── */
.exposure-img { margin-top: 40px; width: 100%; overflow: hidden; }
.exposure-img img { width: 100%; height: auto; display: block; }

/* ── Focus bullets ── */
.focus-bullets {
  display: flex; flex-direction: column; gap: 8px;
  margin: 32px 0; padding: 24px;
  border: 1px solid var(--color-line);
}
.focus-bullets span {
  font-family: var(--font-body);
  font-size: 15px; color: var(--color-text); line-height: 1.5;
}

/* ── CTA rows ── */
.focus-cta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; }

/* ── Arrow link ── */
.doc-link-arrow {
  font-family: var(--font-body);
  font-size: 14px; color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 1px; display: inline-block;
  transition: opacity 150ms ease;
}
.doc-link-arrow:hover { opacity: 0.6; }

/* ═══════════════════════════════════════════
   CONTENT AFTER HERO — page layout, left nav,
   doc sections, filtro, bridge, dist, footer
═══════════════════════════════════════════ */

/* ── PAGE LAYOUT ── */
.documentation {
  background: var(--color-bg);
  min-height: 100vh;
}
.page-shell {
  display: grid;
  grid-template-columns: 0px 1fr;
  width: 100%;
  min-height: 100vh;
}
.page-shell__margin { display: none; }
.page-shell__nav    { display: none; }
.page-shell__rest   { display: none; }
.page-shell__content {
  grid-column: 2;
  padding: 120px 80px 160px 80px;
  min-width: 0;
  max-width: 800px;
}

/* ── LEFT NAV ── */
.left-nav-guide {
  position: fixed;
  left: 260px; top: 0; bottom: 0;
  width: 1px;
  background: var(--color-line);
  pointer-events: none;
  z-index: 99;
  opacity: 0;
}
.left-nav {
  position: fixed;
  left: 0; bottom: 0;
  width: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  z-index: 100;
  opacity: 0;
  padding: 0 32px 48px;
  background: none;
  overflow: hidden;
}
.left-nav.visible { pointer-events: all; }
.left-nav__brand {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--color-text);
  margin-bottom: 12px;
  text-decoration: none;
  display: block;
}
.left-nav__items { display: flex; flex-direction: column; gap: 10px; }
.left-nav__item {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 180ms ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.left-nav__num { display: inline-flex; align-items: center; flex-shrink: 0; }
.left-nav__item.is-active { color: var(--color-text); }
.left-nav__item.is-active::before { content: "•"; display: inline-block; margin-right: 6px; }
.left-nav__item:hover { color: var(--color-text); }
.left-nav__item:hover .left-nav__num::after {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: rgba(0,0,0,0.4);
  margin-left: 6px;
}

/* ── DOC SECTIONS ── */
.doc-section { padding-top: 0; scroll-margin-top: 64px; }
.section-divider {
  height: 1px;
  background: var(--color-line);
  margin: 120px -80px;
}
.doc-num {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-secondary);
  display: block; margin-bottom: 16px;
}
.doc-heading {
  font-family: var(--font-heading);
  font-size: 32px; font-weight: 500;
  line-height: 1.18; letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: 40px;
}
.doc-body {
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.65;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
  max-width: 640px;
}
.doc-rows { margin-top: 40px; border-top: 1px solid var(--color-line); }
.doc-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 40px; padding: 24px 0;
  border-bottom: 1px solid var(--color-line);
}
.doc-row-label {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-secondary); padding-top: 2px;
}
.doc-row-text {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.65;
  color: var(--color-text);
}
.doc-cards { display: flex; flex-direction: column; margin-top: 40px; }
.doc-card {
  padding: 28px 24px;
  border: 1px solid var(--color-line);
  margin-bottom: 12px;
}
.doc-card:last-child { margin-bottom: 0; }
.doc-card-title {
  font-family: var(--font-heading);
  font-size: 15px; font-weight: 500;
  color: var(--color-text); margin-bottom: 10px; line-height: 1.3;
}
.doc-card-body {
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.65; color: var(--color-text-secondary);
}
.doc-cta {
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 20px;
  border: 1px solid var(--color-text);
  background: transparent; color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px; font-weight: 400;
  text-decoration: none; margin-top: 40px;
  transition: background 150ms ease, color 150ms ease;
}
.doc-cta:hover { background: var(--color-text); color: var(--color-bg); }
.doc-divider { height: 1px; background: var(--color-line); margin: 80px 0; }

/* ── SCROLL REVEAL ── */
.doc-section,
.bridge-section,
.section-divider,
.doc-card,
.filtro-images,
.filtro-content,
.dist-left,
.dist-right {
  opacity: 0;
  will-change: opacity, transform;
  transition: none;
}

/* ── FILTRO FÁCIL LAYOUT ── */
.filtro-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
}
.filtro-images { display: flex; flex-direction: column; gap: 8px; }
.filtro-img--main {
  width: 100%; aspect-ratio: 4/3;
  overflow: hidden; border: 1px solid var(--color-line);
}
.filtro-img--main img, .filtro-img--sub img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.filtro-img-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filtro-img--sub {
  width: 100%; aspect-ratio: 1/1;
  overflow: hidden; border: 1px solid var(--color-line);
}
.filtro-content { padding-top: 8px; align-self: end; }
.filtro-content .doc-heading { margin-bottom: 24px; }

/* ── BRIDGE SECTION ── */
.bridge-section { padding: 80px 0; text-align: center; }
.bridge-text {
  font-family: var(--font-heading);
  font-size: clamp(22px,2.5vw,32px);
  font-weight: 500; line-height: 1.35;
  color: var(--color-text); letter-spacing: -0.01em;
  max-width: 600px; margin: 0 auto;
}

/* ── DISTRIBUTION LAYOUT ── */
.dist-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px; margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--color-line);
}
.dist-item { padding: 12px 0; }
.dist-item-title {
  font-family: var(--font-heading);
  font-size: 14px; font-weight: 500;
  color: var(--color-text); margin-bottom: 8px;
}
.dist-item-body {
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.65;
  color: var(--color-text-secondary);
}
.dist-right { display: flex; align-items: flex-end; padding: 12px 0; }
.dist-quote {
  font-family: var(--font-heading);
  font-size: 28px; font-weight: 500;
  line-height: 1.35; color: var(--color-text); letter-spacing: -0.01em;
}

/* ── SITE FOOTER ── */
.site-footer {
  border-top: 1px solid var(--color-line);
  font-family: var(--font-body);
  background: var(--color-bg);
  margin-left: 260px;
}
.footer-cta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 64px 80px;
  border-bottom: 1px solid var(--color-line);
}
.footer-cta__left { display: flex; flex-direction: column; gap: 12px; }
.footer-brand {
  font-family: var(--font-heading);
  font-size: 28px; font-weight: 500;
  color: var(--color-text); letter-spacing: -0.01em;
}
.footer-tagline {
  font-size: 15px; color: var(--color-text-secondary);
  line-height: 1.5; max-width: 400px;
}
.footer-cta__btn {
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 24px;
  border: 1px solid var(--color-text);
  background: transparent; color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px; font-weight: 400;
  text-decoration: none; white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}
.footer-cta__btn:hover { background: var(--color-text); color: var(--color-bg); }
.footer-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: 0 80px;
  border-bottom: 1px solid var(--color-line);
  flex-wrap: wrap;
}
.footer-nav a {
  font-size: 13px; color: var(--color-text-secondary);
  text-decoration: none; padding: 20px;
  transition: color 150ms ease; white-space: nowrap;
}
.footer-nav a:hover { color: var(--color-text); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 80px;
  font-size: 12px; color: var(--color-text-secondary);
}
.footer-bottom a { color: var(--color-text-secondary); text-decoration: none; }
.footer-bottom a:hover { color: var(--color-text); }

/* ── Remove old conflicting rules ── */
.doc-sidebar, .doc-content, .doc-section-inner,
.sidebar-brand, .sidebar-nav, .sidebar-item,
.sidebar-guide, .focus-grid, .focus-item,
.spec-item, .tech-item, .tech-grid, .filtro-specs { display: none !important; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .page-shell { grid-template-columns: 1fr; }
  .page-shell__content { grid-column: 1; padding: 60px 24px 100px; }
  .left-nav, .left-nav-guide { display: none; }
  .filtro-layout { grid-template-columns: 1fr; }
  .dist-layout { grid-template-columns: 1fr; gap: 32px; }
  .site-footer { margin-left: 0; }
  .footer-cta { padding: 48px 24px; flex-direction: column; align-items: flex-start; gap: 32px; }
  .footer-nav { padding: 0 24px; flex-wrap: wrap; justify-content: center; }
  .footer-bottom { padding: 20px 24px; flex-direction: column; gap: 8px; text-align: center; }
}
@media (max-width: 768px) {
  .page-shell__content { padding: 80px 24px 100px; max-width: 100%; }
  .filtro-layout, .dist-layout, .doc-cards, .filtro-img-row { grid-template-columns: 1fr; }
  .dist-layout { gap: 32px; }
  .filtro-img-row { gap: 8px; }
  .doc-card { padding: 20px 16px; }
  .section-divider { margin-left: -24px; margin-right: -24px; }
  .bridge-text { font-size: 20px; }
  .footer-nav { padding: 0 16px; justify-content: center; }
  .footer-nav a { padding: 14px 12px; font-size: 12px; }
  .footer-bottom { padding: 16px 24px; flex-direction: column; gap: 6px; text-align: center; }
}
@media (max-width: 600px) {
  .doc-row { grid-template-columns: 1fr; gap: 8px; }
}