/* =========================================================================
   HN Designs — shared design system
   One source of truth for every page (public marketing + internal CRM).
   Brand color pulled from the actual logo mark (amber/terracotta), not the
   green/gold/red mix that had accumulated ad-hoc across the old pages.
   ========================================================================= */

:root {
  /* ---- Brand ---- */
  --hn-ink:        #211d1a;   /* primary text, near-black warm charcoal */
  --hn-ink-soft:    #55504a;   /* secondary text */
  --hn-ink-faint:   #8a837a;   /* tertiary / placeholder text */

  --hn-paper:       #fbf8f3;   /* page background, warm ivory */
  --hn-paper-alt:   #f3ede1;   /* section band background */
  --hn-paper-deep:  #eee6d6;   /* deeper card/section background */

  --hn-brand:       #c1791f;   /* primary amber/terracotta (from logo) */
  --hn-brand-dark:  #93591a;
  --hn-brand-light: #e7ab5c;
  --hn-brand-wash:  #fbeedb;   /* pale tint for badges/highlights */

  --hn-forest:      #3f4a3b;   /* deep sage — secondary accent */
  --hn-forest-dark: #2c3429;

  --hn-line:        rgba(33, 29, 26, 0.12);
  --hn-line-soft:   rgba(33, 29, 26, 0.07);

  --hn-white:       #ffffff;

  --hn-success:     #3f7d4e;
  --hn-danger:      #b3462c;
  --hn-info:        #3a6ea5;

  /* ---- Type ---- */
  --hn-font-display: 'Fraunces', 'Georgia', serif;
  --hn-font-body:    'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* ---- Shape / elevation ---- */
  --hn-radius-sm: 6px;
  --hn-radius:    12px;
  --hn-radius-lg: 20px;
  --hn-shadow-sm: 0 1px 3px rgba(33, 29, 26, 0.08);
  --hn-shadow:    0 8px 24px rgba(33, 29, 26, 0.10);
  --hn-shadow-lg: 0 24px 60px rgba(33, 29, 26, 0.16);

  --hn-topbar-h: 64px;
}

/* ---------------------------------------------------------------------- */
/* Reset / base                                                           */
/* ---------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.hn {
  margin: 0;
  background: var(--hn-paper);
  color: var(--hn-ink);
  font-family: var(--hn-font-body);
  font-size: 17.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.hn h1, .hn h2, .hn h3, .hn h4 {
  font-family: var(--hn-font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 0.5em;
  color: var(--hn-ink);
  letter-spacing: -0.015em;
}
.hn p { margin: 0 0 1em; color: var(--hn-ink-soft); }
.hn a:not(.hn-btn) { color: inherit; }
.hn img { max-width: 100%; display: block; }

.hn-eyebrow {
  display: inline-block;
  font-family: var(--hn-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hn-brand-dark);
  margin-bottom: 12px;
}

/* ---------------------------------------------------------------------- */
/* Editorial primitives — numbered kickers, hairline rules, running index  */
/* ---------------------------------------------------------------------- */
.hn-num {
  font-family: var(--hn-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--hn-ink-faint);
  font-variant-numeric: tabular-nums;
}
.hn-rule { border: none; border-top: 1px solid var(--hn-line); margin: 0; }
.hn-rule--wide { border-top-width: 1px; }

/* Draws itself in (left to right) the moment it scrolls into view — pair
   with .hn-reveal so the shared IntersectionObserver drives both. */
.hn-line-draw {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
.hn-line-draw.is-visible { transform: scaleX(1); }

/* Editorial "Learn more →"-style link, used across the redesigned pages. */
.hn-arrow-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hn-ink); text-decoration: none; padding-bottom: 3px;
  border-bottom: 1px solid var(--hn-ink);
  transition: gap 0.25s ease, opacity 0.2s ease;
}
.hn-arrow-link:hover { gap: 16px; opacity: 0.7; }
.hn-arrow-link--light { color: #fff; border-color: rgba(255,255,255,.55); }

/* A thin, continuously flowing line — a quiet architectural-linework accent
   used as a section divider. Motion never stops but stays subtle/slow. */
.hn-flow-divider { display: block; width: 100%; height: 36px; overflow: visible; }
.hn-flow-divider path {
  fill: none;
  stroke: var(--hn-brand);
  stroke-width: 1.3;
  opacity: 0.4;
  stroke-dasharray: 7 11;
  animation: hn-flow 7s linear infinite;
}
@keyframes hn-flow { to { stroke-dashoffset: -180; } }
.hn-serif-lg {
  font-family: var(--hn-font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.hn-caption {
  font-family: var(--hn-font-body);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hn-ink-faint);
}

.hn-container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.hn-section { padding: 88px 0; }
.hn-section--tight { padding: 56px 0; }
.hn-section--alt { background: var(--hn-paper-alt); }

@media (max-width: 780px) {
  .hn-container { padding: 0 20px; }
  .hn-section { padding: 56px 0; }
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* ---------------------------------------------------------------------- */
.hn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--hn-font-body);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  padding: 13px 26px;
  border-radius: var(--hn-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
/* Editorial marketing-page treatment: sharp corners, tracked small-caps label */
.hn-btn--ed {
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 32px;
}
.hn-btn:active { transform: translateY(1px); }

.hn-btn--primary {
  background: var(--hn-ink);
  color: var(--hn-white);
}
.hn-btn--primary:hover { background: var(--hn-brand-dark); }

.hn-btn--accent {
  background: var(--hn-brand);
  color: var(--hn-white);
}
.hn-btn--accent:hover { background: var(--hn-brand-dark); }

.hn-btn--outline {
  background: transparent;
  color: var(--hn-ink);
  border-color: var(--hn-ink);
}
.hn-btn--outline:hover { background: var(--hn-ink); color: var(--hn-white); }

.hn-btn--outline-light {
  background: transparent;
  color: var(--hn-white);
  border-color: rgba(255,255,255,0.55);
}
.hn-btn--outline-light:hover { background: var(--hn-white); color: var(--hn-ink); }

.hn-btn--ghost {
  background: transparent;
  color: var(--hn-ink-soft);
  padding: 10px 14px;
}
.hn-btn--ghost:hover { color: var(--hn-ink); }

.hn-btn--danger { background: var(--hn-danger); color: var(--hn-white); }
.hn-btn--danger:hover { background: #8e3620; }
.hn-btn--sm { padding: 8px 14px; font-size: 13px; }

.hn-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------------------------------------------------------------------- */
/* Cards                                                                  */
/* ---------------------------------------------------------------------- */
.hn-card {
  background: var(--hn-white);
  border: 1px solid var(--hn-line);
  border-radius: var(--hn-radius);
  box-shadow: var(--hn-shadow-sm);
}

/* ---------------------------------------------------------------------- */
/* Public marketing nav                                                   */
/* ---------------------------------------------------------------------- */
.hn-nav {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(251, 248, 243, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hn-line-soft);
  transition: background 0.35s ease, border-color 0.35s ease;
}
/* Floats transparently over a full-bleed hero image; swaps to the normal
   solid nav once JS adds .is-scrolled past the hero. */
.hn-nav--overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.hn-nav--overlay::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,12,9,.42), transparent);
  opacity: 1;
  transition: opacity 0.35s ease;
}
.hn-nav--overlay .hn-nav__brand-text,
.hn-nav--overlay .hn-nav__links a { color: rgba(255,255,255,.92); }
.hn-nav--overlay .hn-nav__links a.is-active::after { background: var(--hn-brand-light); }
.hn-nav--overlay .hn-nav__brand img { filter: brightness(0) invert(1); }
.hn-nav--overlay .hn-nav__cta .hn-btn--outline { border-color: rgba(255,255,255,.55); color: #fff; }
.hn-nav--overlay .hn-nav__cta .hn-btn--outline:hover { background: #fff; color: var(--hn-ink); }
.hn-nav--overlay.is-scrolled {
  background: rgba(251, 248, 243, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hn-line-soft);
}
.hn-nav--overlay.is-scrolled::before { opacity: 0; }
.hn-nav--overlay.is-scrolled .hn-nav__brand-text,
.hn-nav--overlay.is-scrolled .hn-nav__links a { color: var(--hn-ink-soft); }
.hn-nav--overlay.is-scrolled .hn-nav__links a.is-active { color: var(--hn-ink); }
.hn-nav--overlay.is-scrolled .hn-nav__brand img { filter: none; }
.hn-nav--overlay.is-scrolled .hn-nav__cta .hn-btn--outline { border-color: var(--hn-line); color: var(--hn-ink-soft); }
.hn-nav--overlay.is-scrolled .hn-nav__cta .hn-btn--outline:hover { background: transparent; border-color: var(--hn-ink); color: var(--hn-ink); }
.hn-nav__row {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.hn-nav__brand { display: flex; align-items: center; gap: 0; text-decoration: none; flex: 0 0 auto; }
.hn-nav__brand img { height: 30px; width: auto; margin-right: 12px; }
.hn-nav__brand-text { font-family: var(--hn-font-display); font-weight: 500; font-size: 16.5px; letter-spacing: 0.01em; color: var(--hn-ink); white-space: nowrap; }
.hn-nav__brand-text small { display: none; }

.hn-nav__links { display: flex; align-items: center; gap: 38px; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; justify-content: center; }
.hn-nav__links a {
  text-decoration: none;
  color: var(--hn-ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.hn-nav__links a:hover { color: var(--hn-ink); }
.hn-nav__links a.is-active { color: var(--hn-ink); }
.hn-nav__links a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--hn-brand);
}
/* Non-active links get a quiet underline that slides in on hover. */
.hn-nav__links a:not(.is-active)::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--hn-ink-soft);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(.16,1,.3,1);
}
.hn-nav__links a:not(.is-active):hover::before { transform: scaleX(1); transform-origin: left; }
.hn-nav__cta { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.hn-nav__cta .hn-btn--outline {
  border-color: var(--hn-line);
  color: var(--hn-ink-soft);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 0;
}
.hn-nav__cta .hn-btn--outline:hover { border-color: var(--hn-ink); background: transparent; color: var(--hn-ink); }

.hn-nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--hn-line);
  border-radius: 8px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.hn-nav__toggle span, .hn-nav__toggle span::before, .hn-nav__toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--hn-ink);
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hn-nav__toggle span::before { position: absolute; top: -6px; }
.hn-nav__toggle span::after { position: absolute; top: 6px; }

@media (max-width: 900px) {
  .hn-nav__row { height: 68px; padding: 0 20px; }
  .hn-nav__links {
    position: fixed;
    top: 68px; left: 0; right: 0;
    background: var(--hn-paper);
    border-bottom: 1px solid var(--hn-line);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 20px 20px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .hn-nav__links.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .hn-nav__links a { width: 100%; padding: 10px 0; }
  .hn-nav__toggle { display: inline-flex; }
  .hn-nav__brand-text { font-size: 15px; }
  .hn-nav__cta .hn-btn span.hn-btn__label--long { display: none; }

  /* The Client/Staff Login button's full text ("Client / Staff Login") is
     wider than the space left after the logo + menu toggle on a phone
     screen, and every public page sets it as plain button text rather than
     the (unused) long/short label spans above — so it was overflowing off
     the right edge of the viewport, making part of it unreachable. Collapse
     the real text visually (font-size: 0 keeps it in the accessible name
     for screen readers) and show a short "Login" replacement instead,
     without needing to touch markup on any of the individual pages. */
  .hn-nav__cta .hn-btn--outline { font-size: 0; padding: 8px 12px; }
  .hn-nav__cta .hn-btn--outline::before {
    content: "Login";
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  }
}

/* ---------------------------------------------------------------------- */
/* Public footer                                                          */
/* ---------------------------------------------------------------------- */
.hn-footer { background: var(--hn-ink); color: rgba(255,255,255,0.72); }
.hn-footer__top {
  max-width: 1320px; margin: 0 auto; padding: 110px 40px 64px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px;
}
.hn-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.hn-footer__brand img { height: 26px; filter: brightness(0) invert(1); opacity: 0.9; }
.hn-footer__brand-text { font-family: var(--hn-font-display); color: var(--hn-white); font-size: 15.5px; font-weight: 500; letter-spacing: 0.01em; }
.hn-footer p { color: rgba(255,255,255,0.5); font-size: 14px; max-width: 320px; }
.hn-footer h4 { color: rgba(255,255,255,0.85); font-family: var(--hn-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 20px; }
.hn-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hn-footer a { color: rgba(255,255,255,0.58); text-decoration: none; font-size: 14px; transition: color 0.2s ease; }
.hn-footer a:hover { color: var(--hn-brand-light); }
.hn-footer__social { display: flex; gap: 22px; margin-top: 24px; }
.hn-footer__social a {
  width: auto; height: auto; border-radius: 0; border: none;
  display: flex; align-items: center; justify-content: center;
}
.hn-footer__social a:hover { transform: translateY(-2px); }
.hn-footer__social img { height: 22px; width: 22px; border-radius: 6px; transition: transform 0.2s ease; }
.hn-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 26px 40px;
  max-width: 1320px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 11.5px; letter-spacing: 0.04em; color: rgba(255,255,255,0.38);
}
@media (max-width: 860px) {
  .hn-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .hn-footer__top { grid-template-columns: 1fr; padding: 72px 20px 40px; }
  .hn-footer__bottom { padding: 20px; flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------- */
/* Forms (public + CRM share the same input language)                    */
/* ---------------------------------------------------------------------- */
.hn-field { margin-bottom: 18px; }
.hn-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--hn-ink);
  margin-bottom: 7px;
}
.hn-field .hn-hint { font-size: 12.5px; color: var(--hn-ink-faint); margin-top: 5px; }
.hn-input, .hn-select, .hn-textarea {
  width: 100%;
  font-family: var(--hn-font-body);
  font-size: 14.5px;
  color: var(--hn-ink);
  background: var(--hn-white);
  border: 1px solid var(--hn-line);
  border-radius: var(--hn-radius-sm);
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hn-textarea { resize: vertical; min-height: 110px; }
.hn-input:focus, .hn-select:focus, .hn-textarea:focus {
  outline: none;
  border-color: var(--hn-brand);
  box-shadow: 0 0 0 3px var(--hn-brand-wash);
}
.hn-input::placeholder, .hn-textarea::placeholder { color: var(--hn-ink-faint); }
.hn-checkbox { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--hn-ink-soft); }
.hn-checkbox input { width: 17px; height: 17px; accent-color: var(--hn-brand); }

/* ---------------------------------------------------------------------- */
/* Badges                                                                 */
/* ---------------------------------------------------------------------- */
.hn-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  padding: 4px 11px; border-radius: 100px;
}
.hn-badge--success { background: #e7f2e9; color: var(--hn-success); }
.hn-badge--danger  { background: #f7e6e1; color: var(--hn-danger); }
.hn-badge--info    { background: #e6eef6; color: var(--hn-info); }
.hn-badge--neutral { background: var(--hn-paper-deep); color: var(--hn-ink-soft); }
.hn-badge--brand   { background: var(--hn-brand-wash); color: var(--hn-brand-dark); }

/* =========================================================================
   Internal CRM / admin app chrome
   Shares tokens above; denser layout tuned for daily staff use rather than
   marketing flourish.
   ========================================================================= */
.hn-app {
  --hn-glass: rgba(255, 255, 255, 0.50);
  --hn-glass-soft: rgba(251, 248, 243, 0.50);
  --hn-glass-line: rgba(255, 255, 255, 0.68);
  --hn-glass-shadow: 0 18px 44px rgba(33, 29, 26, 0.13),
                     inset 0 1px 0 rgba(255, 255, 255, 0.52);
  position: relative;
  padding-top: var(--hn-topbar-h);
  padding-bottom: 52px;
  min-height: 100vh;
}

/* Ambient studio photography behind the whole CRM — fixed so it doesn't
   scroll with the page, heavily blurred and tinted with the paper colour
   so it reads as quiet texture rather than competing with the data on
   screen. .hn-panel (and the topbar) sit on top of it as frosted glass. */
.hn-app::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(251,248,243,.55), rgba(243,237,225,.68)),
    url('../../images/residential.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  filter: blur(2px) saturate(1);
  transform: scale(1.05); /* hides the blur's soft edge at the viewport border */
}
@media (prefers-reduced-motion: reduce), (max-width: 640px) {
  .hn-app::before { background-attachment: scroll; }
}

.hn-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--hn-topbar-h);
  background: rgba(33, 29, 26, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  color: var(--hn-white);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hn-topbar { background: var(--hn-ink); }
}
.hn-topbar__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hn-topbar__left img { height: 30px; }
.hn-topbar__title { font-family: var(--hn-font-display); font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-topbar__back {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 13.5px;
  display: flex; align-items: center; gap: 6px;
  border-right: 1px solid rgba(255,255,255,0.16);
  padding-right: 14px;
  margin-right: 4px;
  white-space: nowrap;
}
.hn-topbar__back:hover { color: var(--hn-white); }
.hn-topbar__right { display: flex; align-items: center; gap: 14px; }
.hn-topbar__user { font-size: 13px; color: rgba(255,255,255,0.7); white-space: nowrap; }
.hn-topbar__logout {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.1);
  color: var(--hn-white);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 8px 14px; border-radius: var(--hn-radius-sm);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease;
}
.hn-topbar__logout:hover { background: var(--hn-danger); border-color: var(--hn-danger); }

@media (max-width: 640px) {
  .hn-topbar { padding: 0 14px; }
  .hn-topbar__title { display: none; }
  .hn-topbar__user { display: none; }
}

.hn-appfooter {
  text-align: center;
  padding: 18px 20px 28px;
  font-size: 12.5px;
  color: var(--hn-ink-faint);
}
.hn-appfooter a { color: var(--hn-brand-dark); text-decoration: none; font-weight: 600; }

.hn-page { max-width: 1180px; margin: 0 auto; padding: 32px 24px 0; }
.hn-page__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.hn-page__head h1, .hn-page__head h2 { font-size: 24px; margin: 0; }
.hn-page__head .hn-eyebrow { margin-bottom: 4px; }

.hn-panel {
  background: var(--hn-glass, rgba(255, 255, 255, 0.50));
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid var(--hn-glass-line, rgba(255, 255, 255, 0.68));
  border-radius: var(--hn-radius);
  box-shadow: var(--hn-glass-shadow, var(--hn-shadow-sm));
  padding: 28px;
  margin-bottom: 24px;
}
/* Browsers without backdrop-filter support would otherwise show a very
   washed-out, low-contrast panel over the background photo — fall back to
   a fully solid one so forms and tables stay legible everywhere. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hn-panel { background: var(--hn-white); border-color: var(--hn-line); }
}
.hn-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.hn-panel__head h3 { font-size: 17px; margin: 0; font-family: var(--hn-font-body); font-weight: 700; }

.hn-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
.hn-form-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .hn-form-grid, .hn-form-grid--3 { grid-template-columns: 1fr; } }
.hn-field--span2 { grid-column: span 2; }
@media (max-width: 700px) { .hn-field--span2 { grid-column: span 1; } }

.hn-table-wrap {
  overflow-x: auto;
  border-radius: var(--hn-radius);
  border: 1px solid var(--hn-glass-line, var(--hn-line));
  background: var(--hn-glass, rgba(255, 255, 255, 0.50));
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.hn-table { width: 100%; border-collapse: collapse; background: transparent; font-size: 14px; }
.hn-table th {
  text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--hn-ink-soft); background: var(--hn-glass-soft, rgba(251, 248, 243, 0.50));
  padding: 13px 16px; border-bottom: 1px solid var(--hn-line); white-space: nowrap;
}
.hn-table td { padding: 13px 16px; border-bottom: 1px solid var(--hn-line-soft); color: var(--hn-ink); vertical-align: middle; }
.hn-table tbody tr:last-child td { border-bottom: none; }
.hn-table tbody tr:hover { background: rgba(251, 238, 219, 0.46); }
.hn-table a { color: var(--hn-brand-dark); font-weight: 600; text-decoration: none; }
.hn-table a:hover { text-decoration: underline; }
.hn-table--center th, .hn-table--center td { text-align: center; }

.hn-empty { text-align: center; padding: 48px 20px; color: var(--hn-ink-faint); }

.hn-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.hn-stat {
  background: var(--hn-glass, rgba(255, 255, 255, 0.50));
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid var(--hn-glass-line, rgba(255, 255, 255, 0.68));
  border-radius: var(--hn-radius);
  box-shadow: var(--hn-glass-shadow, var(--hn-shadow-sm));
  padding: 20px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hn-stat { background: var(--hn-white); border-color: var(--hn-line); }
}
.hn-stat__label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hn-ink-faint); margin-bottom: 8px; }
.hn-stat__value { font-family: var(--hn-font-display); font-size: 26px; font-weight: 600; color: var(--hn-ink); }

/* Login card (used by any staff-facing auth form) */
.hn-auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--hn-paper-alt); }
.hn-auth-card { width: 100%; max-width: 400px; background: var(--hn-white); border: 1px solid var(--hn-line); border-radius: var(--hn-radius-lg); box-shadow: var(--hn-shadow-lg); padding: 40px 36px; }
.hn-auth-card img { height: 44px; margin: 0 auto 20px; }
.hn-auth-card h1 { font-size: 21px; text-align: center; margin-bottom: 6px; }
.hn-auth-card p.hn-auth-sub { text-align: center; font-size: 13.5px; color: var(--hn-ink-faint); margin-bottom: 26px; }

/* Modal */
.hn-modal-overlay {
  position: fixed; inset: 0; background: rgba(33,29,26,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000; padding: 20px;
}
.hn-modal {
  width: 100%; max-width: 420px;
  background: var(--hn-white); border-radius: var(--hn-radius-lg);
  box-shadow: var(--hn-shadow-lg); padding: 30px 30px 26px;
}
.hn-modal h3 { font-size: 18px; text-align: center; margin-bottom: 20px; }

/* ---------------------------------------------------------------------- */
/* CRM glass surfaces — exactly 50% translucent, scoped away from public  */
/* marketing pages. Solid alerts and action buttons stay untouched.       */
/* ---------------------------------------------------------------------- */
.hn-app .hn-card,
.hn-app .calc-section,
.hn-app .form-section,
.hn-app .grand-total-box,
.hn-app .expense-card,
body:has(.hn-app) .hn-modal,
body:has(.hn-app) .hn-popup {
  background: var(--hn-glass, rgba(255, 255, 255, 0.50));
  border: 1px solid var(--hn-glass-line, rgba(255, 255, 255, 0.68));
  box-shadow: var(--hn-glass-shadow, var(--hn-shadow-sm));
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

.hn-app .hn-input,
.hn-app .hn-select,
.hn-app .hn-textarea,
.hn-app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.hn-app select,
.hn-app textarea {
  background-color: rgba(255, 255, 255, 0.50);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
}

.hn-app .hn-input:focus,
.hn-app .hn-select:focus,
.hn-app .hn-textarea:focus,
.hn-app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.hn-app select:focus,
.hn-app textarea:focus {
  background-color: rgba(255, 255, 255, 0.68);
  border-color: var(--hn-brand);
  box-shadow: 0 0 0 3px rgba(231, 171, 92, 0.24),
              inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.hn-app input:disabled,
.hn-app select:disabled,
.hn-app textarea:disabled,
.hn-app input[readonly],
.hn-app textarea[readonly] {
  color: var(--hn-ink);
  background-color: rgba(255, 255, 255, 0.40);
  opacity: 0.92;
}

.hn-app #gstRow,
.hn-app #grand_total.hn-input {
  background: rgba(251, 238, 219, 0.50) !important;
  border: 1px solid rgba(231, 171, 92, 0.58);
}

@media (max-width: 700px) {
  .hn-panel { padding: 20px; }
  .hn-stat { padding: 17px; }
  .hn-table th, .hn-table td { padding: 11px 12px; }
}

/* Scroll reveal (public site) */
.hn-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.hn-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Respect users who've asked for less motion — kill every added animation. */
@media (prefers-reduced-motion: reduce) {
  .hn-reveal, .hn-line-draw {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hn-nav__links a::before { transition: none !important; }
  .hn-flow-divider path { animation: none !important; }
}