/* =========================================================================
   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(200px, 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;
  /* label pinned to the top, value on a shared baseline across the row */
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 104px; min-width: 0;
}
@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: auto; padding-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-stat__value { font-family: var(--hn-font-display); font-size: 26px; font-weight: 600; color: var(--hn-ink); line-height: 1.1; }
.hn-stat__value + * { margin-top: 6px; }

/* 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; }
}

/* =========================================================================
   HN Designs — "Atelier" full makeover
   Appended after the classic design system. Every variable name is kept so
   all pages keep working; the whole look changes: type, colour, surfaces,
   navigation, cards, panels, stats, tables, forms, modals and chrome.
   Undo = restore hn-theme-classic.css as hn-theme.css.
   ========================================================================= */

:root {
  --hn-ink:         #171411;
  --hn-ink-soft:    #4d4740;
  --hn-ink-faint:   #8d867c;

  --hn-paper:       #f8f4ec;
  --hn-paper-alt:   #f1ebe0;
  --hn-paper-deep:  #e6dccb;
  --hn-surface:     #fffdf9;

  --hn-brand:       #c98f1c;   /* logo gold, deepened */
  --hn-brand-dark:  #9a6a0e;
  --hn-brand-light: #e9b955;
  --hn-brand-wash:  #f9efd9;
  --hn-gold-hairline: rgba(201, 143, 28, 0.55);
  --hn-gold-soft:   rgba(201, 143, 28, 0.14);
  --hn-noir:        #141210;

  --hn-forest:      #3b4336;
  --hn-forest-dark: #272d24;

  --hn-line:        rgba(23, 20, 17, 0.16);
  --hn-line-soft:   rgba(23, 20, 17, 0.08);
  --hn-white:       #ffffff;

  --hn-success:     #3d7a4a;
  --hn-danger:      #ad4529;
  --hn-info:        #3c6b96;

  --hn-font-display: 'Cormorant Garamond', 'Fraunces', 'Georgia', serif;
  --hn-font-body:    'Jost', 'Inter', -apple-system, 'Segoe UI', sans-serif;

  --hn-radius-sm: 0px;
  --hn-radius:    0px;
  --hn-radius-lg: 0px;
  --hn-shadow-sm: 0 1px 2px rgba(23, 20, 17, 0.05);
  --hn-shadow:    0 14px 36px rgba(23, 20, 17, 0.10);
  --hn-shadow-lg: 0 32px 80px rgba(23, 20, 17, 0.20);

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

/* ---------------------------------------------------------------------- */
/* Base type                                                               */
/* ---------------------------------------------------------------------- */
body.hn {
  font-family: var(--hn-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.72;
  letter-spacing: 0.004em;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(201, 143, 28, 0.08), transparent 60%),
    linear-gradient(180deg, #faf7f0 0%, var(--hn-paper) 100%);
}
.hn h1, .hn h2, .hn h3, .hn h4 { font-family: var(--hn-font-display); font-weight: 500; letter-spacing: 0.004em; line-height: 1.08; }
.hn h1 em, .hn h2 em, .hn-hero3__title em { font-style: italic; font-weight: 500; color: var(--hn-brand); }
.hn p { font-weight: 400; }
.hn-eyebrow { font-size: 10.5px; font-weight: 500; letter-spacing: 0.32em; color: var(--hn-brand-dark); margin-bottom: 14px; }
.hn-eyebrow::before { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--hn-brand); vertical-align: middle; margin-right: 12px; }
.hn-num { font-weight: 500; letter-spacing: 0.14em; color: var(--hn-brand-dark); }
.hn-caption { font-weight: 500; letter-spacing: 0.16em; }
.hn-arrow-link { font-weight: 500; letter-spacing: 0.18em; font-size: 11.5px; border-bottom: 1px solid var(--hn-gold-hairline); padding-bottom: 5px; }
.hn-arrow-link:hover { color: var(--hn-brand-dark); border-bottom-color: var(--hn-brand-dark); opacity: 1; }
.hn-rule { border-top-color: var(--hn-gold-hairline); }
.hn-flow-divider path { stroke: var(--hn-brand); opacity: 0.55; }
.hn-serif-lg { font-weight: 500; letter-spacing: 0; }

.hn-container { max-width: 1240px; padding: 0 40px; }
.hn-section { padding: 120px 0; }
.hn-section--tight { padding: 72px 0; }
.hn-section--alt { background: var(--hn-paper-alt); border-top: 1px solid var(--hn-gold-hairline); border-bottom: 1px solid var(--hn-gold-hairline); }
.hn .hn-section h2 { font-size: clamp(36px, 3.8vw, 52px); }
@media (max-width: 780px) { .hn-container { padding: 0 22px; } .hn-section { padding: 72px 0; } }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
.hn-btn { font-family: var(--hn-font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; padding: 15px 30px; border-radius: 0; }
.hn-btn--ed { padding: 18px 38px; letter-spacing: 0.22em; }
.hn-btn--primary { background: var(--hn-ink); color: #fff; border-color: var(--hn-ink); }
.hn-btn--primary:hover { background: var(--hn-brand); border-color: var(--hn-brand); color: #fff; }
.hn-btn--accent { background: var(--hn-brand); border-color: var(--hn-brand); }
.hn-btn--accent:hover { background: var(--hn-brand-dark); border-color: var(--hn-brand-dark); }
.hn-btn--outline { border-color: var(--hn-ink); background: transparent; }
.hn-btn--outline:hover { background: var(--hn-ink); color: #fff; }
.hn-btn--outline-light { border-color: rgba(255,255,255,.7); }
.hn-btn--outline-light:hover { background: var(--hn-brand); border-color: var(--hn-brand); color: #fff; }
.hn-btn--danger { border-color: var(--hn-danger); }
.hn-btn--sm { padding: 9px 16px; font-size: 10.5px; letter-spacing: 0.14em; }
.hn-btn--ghost { text-transform: none; letter-spacing: 0.02em; font-size: 14px; }
.hn-btn:active { transform: none; }

/* ---------------------------------------------------------------------- */
/* Public navigation                                                       */
/* ---------------------------------------------------------------------- */
.hn-nav { background: rgba(248, 244, 236, 0.92); border-bottom: 1px solid var(--hn-gold-hairline); }
.hn-nav--overlay { border-bottom-color: transparent; }
.hn-nav--overlay.is-scrolled { background: rgba(248, 244, 236, 0.95); border-bottom: 1px solid var(--hn-gold-hairline); }
.hn-nav__row { height: 96px; max-width: 1360px; }
.hn-nav__brand img { height: 34px; margin-right: 14px; }
.hn-nav__brand-text { font-family: var(--hn-font-display); font-size: 22px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.hn-nav__links { gap: 44px; }
.hn-nav__links a { font-weight: 500; font-size: 11px; letter-spacing: 0.26em; }
.hn-nav__links a.is-active::after { background: var(--hn-brand); bottom: -8px; }
.hn-nav__links a:not(.is-active)::before { background: var(--hn-brand); bottom: -8px; }
.hn-nav__cta .hn-btn--outline { border-color: var(--hn-ink); color: var(--hn-ink); letter-spacing: 0.18em; font-weight: 500; padding: 12px 22px; }
.hn-nav__cta .hn-btn--outline:hover { background: var(--hn-ink); border-color: var(--hn-ink); color: #fff; }
.hn-nav--overlay .hn-nav__cta .hn-btn--outline { border-color: rgba(255,255,255,.7); }
.hn-nav--overlay .hn-nav__cta .hn-btn--outline:hover { background: var(--hn-brand); border-color: var(--hn-brand); color: #fff; }
.hn-nav--overlay.is-scrolled .hn-nav__cta .hn-btn--outline { border-color: var(--hn-ink); color: var(--hn-ink); }
.hn-nav--overlay.is-scrolled .hn-nav__cta .hn-btn--outline:hover { background: var(--hn-ink); color: #fff; }
.hn-nav__toggle { border-radius: 0; border-color: var(--hn-ink); }
@media (max-width: 900px) { .hn-nav__row { height: 72px; } .hn-nav__links { top: 72px; border-bottom-color: var(--hn-gold-hairline); } }

/* Hero: deeper scrim, gold frame line, larger serif */
.hn-hero3 { background: var(--hn-noir); }
.hn-hero3__scrim { background: linear-gradient(180deg, rgba(20,18,16,.30) 0%, rgba(20,18,16,.05) 35%, rgba(20,18,16,.72) 100%); }
.hn-hero3__content { padding-bottom: 80px; }
.hn-hero3__content::before { content: ""; display: block; width: 72px; height: 1px; background: var(--hn-brand-light); margin: 0 auto 26px 0; }
.hn-hero3 .hn-hero3__title { font-size: clamp(48px, 6.6vw, 92px); line-height: 1.0; max-width: 13ch; font-weight: 500; }
.hn-hero3__eyebrow.hn-eyebrow { color: rgba(255,255,255,.78); }
.hn-hero3__eyebrow.hn-eyebrow::before { background: var(--hn-brand-light); }
.hn-hero3__caption { letter-spacing: 0.14em; text-transform: uppercase; font-size: 10.5px; }
.hn-hero3__caption strong { font-family: var(--hn-font-display); font-size: 20px; text-transform: none; letter-spacing: 0.01em; }
.hn-arrow-link--light { border-bottom-color: rgba(233,185,85,.7); }
.hn-arrow-link--light:hover { color: var(--hn-brand-light); }

/* ---------------------------------------------------------------------- */
/* Cards & surfaces                                                        */
/* ---------------------------------------------------------------------- */
.hn-card { background: var(--hn-surface); border: 1px solid var(--hn-line); border-radius: 0; box-shadow: none; transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .25s ease; }
.hn-card:hover { transform: translateY(-4px); box-shadow: var(--hn-shadow); border-color: var(--hn-gold-hairline); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.hn-footer { background: var(--hn-noir); border-top: 1px solid var(--hn-gold-hairline); color: rgba(246,239,226,.72); }
.hn-footer__top { padding: 120px 40px 72px; }
.hn-footer__brand img { height: 30px; }
.hn-footer__brand-text { font-family: var(--hn-font-display); font-size: 24px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.hn-footer p { color: rgba(246,239,226,.5); }
.hn-footer h4 { color: var(--hn-brand-light); font-weight: 500; letter-spacing: 0.3em; font-size: 10.5px; }
.hn-footer a { color: rgba(246,239,226,.62); }
.hn-footer a:hover { color: var(--hn-brand-light); }
.hn-footer__bottom { border-top-color: rgba(233,185,85,.18); letter-spacing: 0.14em; text-transform: uppercase; font-size: 10.5px; color: rgba(246,239,226,.4); }

/* ---------------------------------------------------------------------- */
/* Forms — underline inputs                                                */
/* ---------------------------------------------------------------------- */
.hn-field { margin-bottom: 22px; }
.hn-field label { font-weight: 500; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hn-ink-soft); margin-bottom: 8px; }
.hn-input, .hn-select, .hn-textarea {
  border-radius: 0; font-size: 15.5px; padding: 12px 2px;
  background: transparent; border: 0; border-bottom: 1px solid var(--hn-line);
  box-shadow: none;
}
.hn-select { padding-right: 24px; }
.hn-textarea { padding: 12px 10px; border: 1px solid var(--hn-line); background: rgba(255,255,255,.55); }
.hn-input:focus, .hn-select:focus, .hn-textarea:focus { outline: none; border-color: var(--hn-brand); box-shadow: 0 1px 0 0 var(--hn-brand); background: transparent; }
.hn-textarea:focus { box-shadow: 0 0 0 1px var(--hn-brand); background: #fff; }
.hn-input::placeholder, .hn-textarea::placeholder { color: var(--hn-ink-faint); font-weight: 300; }
.hn-checkbox { font-size: 14px; }
.hn-checkbox input { accent-color: var(--hn-brand); }

/* ---------------------------------------------------------------------- */
/* Badges                                                                  */
/* ---------------------------------------------------------------------- */
.hn-badge { font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px; border-radius: 0; padding: 5px 10px; border: 1px solid currentColor; background: transparent !important; }
.hn-badge--success { color: var(--hn-success); }
.hn-badge--danger  { color: var(--hn-danger); }
.hn-badge--info    { color: var(--hn-info); }
.hn-badge--neutral { color: var(--hn-ink-faint); }
.hn-badge--brand   { color: var(--hn-brand-dark); }

/* ====================================================================== */
/* CRM / portal chrome — clean editorial sheets instead of blurred glass   */
/* ====================================================================== */
.hn-app { padding-top: calc(var(--hn-topbar-h) + 8px); padding-bottom: 72px; }
.hn-app::before {
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(201,143,28,.10), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(59,67,54,.10), transparent 60%),
    linear-gradient(180deg, #faf7f0, #f1ebe0);
  filter: none; transform: none;
}
.hn-app { --hn-glass: var(--hn-surface); --hn-glass-soft: var(--hn-paper-alt); --hn-glass-line: var(--hn-line); --hn-glass-shadow: 0 1px 2px rgba(23,20,17,.04), 0 18px 48px rgba(23,20,17,.07); }

.hn-topbar { height: var(--hn-topbar-h); background: rgba(20, 18, 16, 0.94); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--hn-gold-hairline); padding: 0 32px; }
.hn-topbar__left img { height: 34px; }
.hn-topbar__title { font-family: var(--hn-font-display); font-size: 20px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #f6efe2; }
.hn-topbar__back { font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; font-size: 10.5px; color: rgba(246,239,226,.7); border-right-color: rgba(246,239,226,.18); padding-right: 18px; margin-right: 6px; }
.hn-topbar__user { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(246,239,226,.7); }
.hn-topbar__logout { border-radius: 0; letter-spacing: 0.16em; text-transform: uppercase; font-size: 10.5px; font-weight: 500; border: 1px solid var(--hn-gold-hairline); background: transparent; padding: 9px 16px; }
.hn-topbar__logout:hover { background: var(--hn-brand); border-color: var(--hn-brand); }

.hn-page { max-width: 1240px; padding: 36px 32px 0; }
.hn-page__head { margin-bottom: 34px; padding-bottom: 22px; border-bottom: 1px solid var(--hn-gold-hairline); align-items: flex-end; }
.hn-page__head h1, .hn-page__head h2 { font-size: 38px; font-weight: 500; line-height: 1.05; }
.hn-page__head .hn-eyebrow { margin-bottom: 10px; }

.hn-panel {
  background: var(--hn-surface); backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--hn-line); border-top: 3px solid var(--hn-brand); border-radius: 0;
  box-shadow: 0 1px 2px rgba(23,20,17,.04), 0 18px 48px rgba(23,20,17,.07);
  padding: 32px; margin-bottom: 28px;
}
.hn-panel__head { margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--hn-line-soft); }
.hn-panel__head h3 { font-family: var(--hn-font-display); font-size: 25px; font-weight: 600; letter-spacing: 0.01em; }
.hn-panel h3, .hn-panel h2 { font-family: var(--hn-font-display); }

.hn-stat-row { gap: 20px; margin-bottom: 30px; }
.hn-stat {
  background: var(--hn-surface); backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--hn-line); border-left: 3px solid var(--hn-brand); border-radius: 0;
  box-shadow: 0 1px 2px rgba(23,20,17,.04), 0 18px 48px rgba(23,20,17,.06);
  padding: 22px 24px;
}
.hn-stat { min-height: 124px; }
.hn-stat__label { font-weight: 500; letter-spacing: 0.22em; font-size: 10px; color: var(--hn-ink-faint); margin-bottom: auto; padding-bottom: 10px; }
.hn-stat__value { font-family: var(--hn-font-display); font-size: clamp(28px, 2.6vw, 40px); font-weight: 600; line-height: 1.05; }

.hn-table-wrap { border-radius: 0; border: 1px solid var(--hn-line); background: var(--hn-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hn-table { font-size: 14px; }
.hn-table th { font-weight: 500; letter-spacing: 0.18em; font-size: 10px; color: var(--hn-ink-soft); background: var(--hn-paper-alt); border-bottom: 2px solid var(--hn-ink); padding: 14px 18px; }
.hn-table td { padding: 15px 18px; border-bottom: 1px solid var(--hn-line-soft); }
.hn-table tbody tr:nth-child(even) td { background: rgba(241,235,224,.35); }
.hn-table tbody tr:hover td { background: var(--hn-brand-wash); }
.hn-table a { color: var(--hn-brand-dark); font-weight: 500; }
.hn-empty { letter-spacing: 0.04em; }

.hn-modal-overlay { background: rgba(20,18,16,.62); backdrop-filter: blur(6px); }
.hn-modal { border-radius: 0; border-top: 3px solid var(--hn-brand); box-shadow: var(--hn-shadow-lg); padding: 34px 34px 30px; }
.hn-modal h3 { font-family: var(--hn-font-display); font-size: 28px; font-weight: 600; }

.hn-auth-wrap { background: var(--hn-paper-alt); }
.hn-auth-card { border-radius: 0; border-top: 3px solid var(--hn-brand); padding: 44px 40px; }
.hn-auth-card h1 { font-size: 30px; }

.hn-appfooter { letter-spacing: 0.12em; text-transform: uppercase; font-size: 10.5px; padding: 28px 20px 36px; }
.hn-appfooter a { color: var(--hn-brand-dark); font-weight: 500; }

/* CRM glass surfaces → solid editorial sheets */
.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-surface); border: 1px solid var(--hn-line); box-shadow: 0 1px 2px rgba(23,20,17,.04), 0 18px 48px rgba(23,20,17,.07);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.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: transparent; border: 0; border-bottom: 1px solid var(--hn-line); border-radius: 0;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hn-app .hn-textarea, .hn-app textarea { border: 1px solid var(--hn-line); background-color: rgba(255,255,255,.6); }
.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: transparent; border-color: var(--hn-brand); box-shadow: 0 1px 0 0 var(--hn-brand);
}
.hn-app .hn-textarea:focus, .hn-app textarea:focus { box-shadow: 0 0 0 1px var(--hn-brand); background-color: #fff; }
.hn-app input:disabled, .hn-app select:disabled, .hn-app textarea:disabled, .hn-app input[readonly], .hn-app textarea[readonly] { background-color: transparent; color: var(--hn-ink-soft); }
.hn-app #gstRow, .hn-app #grand_total.hn-input { background: var(--hn-brand-wash) !important; border: 1px solid var(--hn-gold-hairline); padding: 12px; }

@media (max-width: 700px) {
  .hn-page { padding: 24px 16px 0; }
  .hn-page__head h1, .hn-page__head h2 { font-size: 30px; }
  .hn-panel { padding: 22px; }
  .hn-stat { padding: 18px; }
  .hn-stat__value { font-size: 32px; }
  .hn-topbar { padding: 0 16px; }
}

/* ---------------------------------------------------------------------- */
/* Editorial motion: slow hero drift, nav wordmark fade-in on load         */
/* ---------------------------------------------------------------------- */
@keyframes hn-hero-drift { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes hn-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hn-hero3__img { animation: hn-hero-drift 14s cubic-bezier(.16,1,.3,1) both; transform-origin: center; }
.hn-hero3__content { animation: hn-fade-up 1.1s .25s cubic-bezier(.16,1,.3,1) both; }
.hn-nav__brand { animation: hn-fade-up .9s .1s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .hn-hero3__img, .hn-hero3__content, .hn-nav__brand { animation: none !important; } }

/* ---------------------------------------------------------------------- */
/* Logo: the amber logotype itself, larger; wordmark text no longer needed */
/* ---------------------------------------------------------------------- */
.hn-nav__brand img { height: 58px; margin-right: 0; }
.hn-nav__brand-text { display: none; }
.hn-nav--overlay .hn-nav__brand img,
.hn-nav--overlay.is-scrolled .hn-nav__brand img { filter: none; }
.hn-nav--overlay .hn-nav__brand img { filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.hn-footer__brand img { height: 46px; filter: none; opacity: 1; }
.hn-topbar__left img { height: 46px; }
@media (max-width: 900px) { .hn-nav__brand img { height: 44px; } .hn-topbar__left img { height: 38px; } }

/* ---------------------------------------------------------------------- */
/* Numerals: lining figures everywhere so digits sit on one line           */
/* ---------------------------------------------------------------------- */
body, .hn h1, .hn h2, .hn h3, .hn h4, .hn-stat__value, .hn-page__head h1 {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
/* Page-level rules such as "font-variant-numeric: tabular-nums" reset the
   numeral style, so force lining figures on every element (Cormorant Garamond
   defaults to old-style digits, which made 2/4/3/5/7/9 sit above or below the
   other figures). Applies to every page since 2026-11-05, not only body.hn. */
body, body *, body *::before, body *::after {
  font-variant-numeric: lining-nums tabular-nums !important;
  font-feature-settings: "lnum" 1, "tnum" 1 !important;
}
/* Stat / KPI values: lining but proportional digits (tabular made ₹3,89,578.00
   too wide for its card) and never broken across two lines. */
.hn-stat__value, .vb-stat b, .stat b, .kpi b, .cost-kpi strong, .project-finance__metric dd, .procurement-stat-value {
  font-variant-numeric: lining-nums proportional-nums !important;
  font-feature-settings: "lnum" 1, "pnum" 1 !important;
  white-space: nowrap; overflow-wrap: normal; word-break: keep-all;
}

/* ---------------------------------------------------------------------- */
/* Portal layout: use the page width, two-column accordions, motion        */
/* ---------------------------------------------------------------------- */
.hn-app .hn-page { max-width: 1440px; padding-left: 40px; padding-right: 40px; }
/* project.html pins its page to 780px inline; let it breathe on wide screens. */
.hn-app .hn-page[style*="max-width"] { max-width: 1440px !important; }

/* Project summary page: full-width sections, accordion cards in two columns. */
.hn-app .hn-page:has(> details[data-client-module]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 26px;
  align-items: start;
}
.hn-app .hn-page:has(> details[data-client-module]) > *:not(details[data-client-module]) { grid-column: 1 / -1; }
@media (max-width: 980px) { .hn-app .hn-page:has(> details[data-client-module]) { grid-template-columns: 1fr; } }

/* Accordion cards */
.hn-app details.hn-panel { border-top-width: 1px; border-top-color: var(--hn-line); position: relative; }
.hn-app details.hn-panel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hn-brand); transform: scaleY(0); transform-origin: top; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.hn-app details.hn-panel:hover::before, .hn-app details.hn-panel[open]::before { transform: scaleY(1); }
.hn-app details.hn-panel summary {
  font-family: var(--hn-font-display) !important; font-size: 21px !important; font-weight: 600 !important; letter-spacing: 0.01em;
  padding: 20px 26px !important; transition: background .25s ease, padding-left .25s ease;
}
.hn-app details.hn-panel summary:hover { background: var(--hn-brand-wash); padding-left: 30px !important; }
.hn-app details.hn-panel[open] summary { background: var(--hn-paper-alt); border-bottom: 1px solid var(--hn-gold-hairline) !important; }
.hn-app details.hn-panel summary::after {
  content: "+" !important; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--hn-gold-hairline); color: var(--hn-brand-dark) !important; font-size: 18px !important; font-weight: 400 !important;
  transition: transform .35s cubic-bezier(.16,1,.3,1), background .25s ease, color .25s ease;
}
.hn-app details.hn-panel[open] summary::after { transform: rotate(45deg); background: var(--hn-brand); color: #fff !important; border-color: var(--hn-brand); }
.hn-app details.hn-panel .hn-panel__body { padding: 22px 26px 26px !important; }
.hn-app details.hn-panel[open] .hn-panel__body { animation: hn-fade-up .45s cubic-bezier(.16,1,.3,1) both; }

/* Entrance: panels and stats rise in with a soft stagger. */
.hn-app .hn-panel, .hn-app .hn-stat, .hn-app .hn-page__head, .hn-app .hn-table-wrap { animation: hn-fade-up .7s cubic-bezier(.16,1,.3,1) both; }
.hn-app .hn-page > *:nth-child(2) { animation-delay: .05s; }
.hn-app .hn-page > *:nth-child(3) { animation-delay: .10s; }
.hn-app .hn-page > *:nth-child(4) { animation-delay: .15s; }
.hn-app .hn-page > *:nth-child(5) { animation-delay: .20s; }
.hn-app .hn-page > *:nth-child(6) { animation-delay: .25s; }
.hn-app .hn-page > *:nth-child(7) { animation-delay: .30s; }
.hn-app .hn-page > *:nth-child(8) { animation-delay: .35s; }
.hn-app .hn-page > *:nth-child(n+9) { animation-delay: .40s; }
.hn-app .hn-stat-row .hn-stat:nth-child(2) { animation-delay: .08s; }
.hn-app .hn-stat-row .hn-stat:nth-child(3) { animation-delay: .16s; }
.hn-app .hn-stat-row .hn-stat:nth-child(4) { animation-delay: .24s; }

/* Hover: a quiet lift on sheets and stats, gold hairline on stats. */
.hn-app .hn-panel, .hn-app .hn-stat { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .25s ease; }
.hn-app .hn-panel:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(23,20,17,.04), 0 26px 60px rgba(23,20,17,.10); }
.hn-app .hn-stat:hover { transform: translateY(-2px); border-color: var(--hn-gold-hairline); }

/* Buttons: soft sheen sweep on hover. */
.hn-btn { position: relative; overflow: hidden; }
.hn-btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; }
.hn-btn:hover::after { left: 160%; }

/* Topbar project identity slides in. */
.hn-topbar__project-name, .hn-topbar__project-label { animation: hn-fade-up .6s .15s cubic-bezier(.16,1,.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  .hn-app .hn-panel, .hn-app .hn-stat, .hn-app .hn-page__head, .hn-app .hn-table-wrap, .hn-app details.hn-panel[open] .hn-panel__body,
  .hn-topbar__project-name, .hn-topbar__project-label { animation: none !important; }
  .hn-btn::after { display: none; }
}
@media (max-width: 700px) { .hn-app .hn-page { padding-left: 16px; padding-right: 16px; } }

/* Only the contractor accordions pair up; consultancy / progress stay full width,
   and a lone last contractor card (left column) spans both columns. */
.hn-app .hn-page:has(> details[data-client-module]) > details:not([data-client-module="contractors"]) { grid-column: 1 / -1; }
.hn-app .hn-page:has(> details[data-client-module]) > details[data-client-module="contractors"]:nth-of-type(even):not(:has(+ details[data-client-module="contractors"])) { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------- */
/* Floating WhatsApp / social buttons (public pages)                       */
/* ---------------------------------------------------------------------- */
.hn-social-fixed { position: fixed; right: 28px; bottom: 28px; z-index: 800; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hn-social-fixed a { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 10px; overflow: hidden; box-shadow: var(--hn-shadow); transition: transform .2s ease; }
.hn-social-fixed img { width: 42px; height: 42px; }
.hn-social-fixed .hn-wa { width: 50px; height: 50px; border-radius: 50%; background: #25D366; box-shadow: 0 10px 24px rgba(37, 211, 102, .35); animation: hn-wa-pulse 2.8s ease-out infinite; }
.hn-social-fixed .hn-wa svg { width: 27px; height: 27px; fill: #fff; }
.hn-social-fixed .hn-wa:hover { transform: translateY(-2px) scale(1.05); }
@keyframes hn-wa-pulse { 0% { box-shadow: 0 10px 24px rgba(37,211,102,.35), 0 0 0 0 rgba(37,211,102,.45); } 70% { box-shadow: 0 10px 24px rgba(37,211,102,.35), 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 10px 24px rgba(37,211,102,.35), 0 0 0 0 rgba(37,211,102,0); } }
@media (max-width: 700px) { .hn-social-fixed { right: 16px; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .hn-social-fixed .hn-wa { animation: none; } }

/* Header "Login" button / mobile menu link with a door-and-arrow icon (2026-11-05) */
.hn-login-ico { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hn-btn--login { gap: 9px; }
.hn-btn--login .hn-login-ico { margin-left: -2px; }
.hn-login-link { display: inline-flex; align-items: center; gap: 9px; }
.hn-login-link .hn-login-ico { width: 16px; height: 16px; }

/* >>> portal-v2 begin >>> */
/* =========================================================================
   HN Designs — portal skin v2 (November 2026), appended after the "Atelier"
   sheet in hn-portal-glass.css and hn-theme.css. Brings the admin / staff /
   contractor screens in line with the new public site: noir sidebar and
   table heads, flat ivory page, white sheets with a short gold tab, larger
   serif titles. Colours, borders and type only; no layout or markup changes.
   Source file: assets/css/hn-portal-v2.css (rebuild with scrollfilm_source/build_portal_css.py).
   ========================================================================= */
@media screen {
  body.hn.hn-portal {
    --hn-night: #12100d;
    --hn-paper: #f6f2ea;
    --hn-paper-alt: #efe9dd;
    --hn-glass: #fffefb;
    --hn-glass-soft: #f4efe5;
    --hn-line: rgba(23, 20, 17, .14);
    --hn-line-soft: rgba(23, 20, 17, .07);
    --hn-glass-shadow: 0 1px 0 rgba(23, 20, 17, .03), 0 24px 56px -22px rgba(23, 20, 17, .20);
    background: var(--hn-paper);
  }
  body.hn.hn-portal ::selection { background: rgba(201, 143, 28, .28); }
  body.hn.hn-portal .hn-app::before { background-image: linear-gradient(180deg, #faf7f1 0%, #f3eee4 100%); }

  /* ---- top bar ---- */
  body.hn.hn-portal :is(.hn-topbar, .ci-header, .hn-fee-topbar) {
    background: var(--hn-night);
    border-bottom: 1px solid rgba(230, 182, 86, .5);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .22);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  body.hn.hn-portal .hn-topbar__title { font-weight: 500; font-size: 18px; letter-spacing: .18em; }
  body.hn.hn-portal .hn-topbar__logout { border-color: rgba(230, 182, 86, .6); transition: background .25s, color .25s, border-color .25s; }
  body.hn.hn-portal .hn-topbar__logout:hover { background: var(--hn-brand-light); border-color: var(--hn-brand-light); color: var(--hn-night); }

  /* ---- side navigation: noir panel, ivory type, gold on hover ---- */
  body.hn.hn-portal .hn-admin-nav {
    background: var(--hn-night);
    border: 1px solid rgba(230, 182, 86, .38);
    box-shadow: 0 28px 60px -18px rgba(18, 16, 13, .45);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  body.hn.hn-portal .hn-admin-nav__title { color: var(--hn-brand-light); padding: 22px 22px 15px; letter-spacing: .36em; }
  body.hn.hn-portal .hn-admin-nav__title::before { background: var(--hn-brand-light); }
  body.hn.hn-portal .hn-admin-nav :is(a, button) { color: rgba(248, 244, 236, .78); border-top-color: rgba(248, 244, 236, .08); padding: 14px 18px 14px 22px; font-weight: 400; }
  body.hn.hn-portal .hn-admin-nav :is(a, button)::before { background: var(--hn-brand-light); }
  body.hn.hn-portal .hn-admin-nav :is(a, button)::after { background: linear-gradient(90deg, rgba(230, 182, 86, .2) 0%, rgba(230, 182, 86, .05) 60%, rgba(230, 182, 86, 0) 100%); }
  body.hn.hn-portal .hn-admin-nav__ico { color: rgba(248, 244, 236, .42); }
  body.hn.hn-portal .hn-admin-nav__arrow { color: var(--hn-brand-light); }
  body.hn.hn-portal .hn-admin-nav :is(a, button):is(:hover, :focus-visible) { color: #fff; padding-left: 30px; box-shadow: none; translate: none; }
  body.hn.hn-portal .hn-admin-nav :is(a, button):hover .hn-admin-nav__ico, body.hn.hn-portal .hn-admin-nav .is-active .hn-admin-nav__ico { color: var(--hn-brand-light); }
  body.hn.hn-portal .hn-admin-nav .is-active { color: var(--hn-brand-light); }
  body.hn.hn-portal .hn-admin-nav__logout { color: #f0a58f !important; }
  body.hn.hn-portal .hn-dash__side { scrollbar-color: rgba(230, 182, 86, .5) transparent; }

  /* ---- page head ---- */
  body.hn.hn-portal .hn-page__head {
    margin-bottom: 36px; padding-bottom: 26px;
    border-bottom: 1px solid var(--hn-line);
    background: linear-gradient(var(--hn-brand), var(--hn-brand)) left bottom / 76px 2px no-repeat;
  }
  body.hn.hn-portal .hn-page__head :is(h1, h2) { font-size: clamp(34px, 3.4vw, 50px); font-weight: 500; letter-spacing: -.01em; line-height: 1.02; }
  body.hn.hn-portal .hn-page__head .hn-eyebrow { letter-spacing: .32em; margin-bottom: 14px; }

  /* ---- sheets: white, hairline border, short gold tab instead of a full rule ---- */
  body.hn.hn-portal :is(.hn-panel, .module-card, .calc-section, .form-section) {
    background: linear-gradient(90deg, var(--hn-brand), var(--hn-brand-light)) 0 0 / 96px 2px no-repeat, var(--hn-glass) !important;
    border: 1px solid rgba(23, 20, 17, .10);
    box-shadow: var(--hn-glass-shadow);
  }
  body.hn.hn-portal .hn-app details.hn-panel { border-top-color: rgba(23, 20, 17, .10); }
  body.hn.hn-portal .hn-app .hn-panel:hover { box-shadow: 0 1px 0 rgba(23, 20, 17, .03), 0 34px 70px -24px rgba(23, 20, 17, .26); }
  body.hn.hn-portal .hn-panel__head { margin-bottom: 26px; padding-bottom: 16px; }
  body.hn.hn-portal .hn-panel__head h3 { font-size: 27px; font-weight: 500; }
  body.hn.hn-portal .hn-stat {
    background: linear-gradient(90deg, var(--hn-brand), var(--hn-brand-light)) 0 0 / 44px 2px no-repeat, var(--hn-glass) !important;
    border: 1px solid rgba(23, 20, 17, .10);
    box-shadow: var(--hn-glass-shadow);
  }
  body.hn.hn-portal .hn-stat__label { letter-spacing: .24em; }

  /* ---- tables: noir head, calm rows ---- */
  body.hn.hn-portal .hn-table-wrap { border-color: rgba(23, 20, 17, .12); background: var(--hn-glass); }
  body.hn.hn-portal :is(.hn-table, .cost-table, .procurement-table) thead th {
    background: #1a1714 !important; color: #f1e9da !important;   /* always as a pair: some pages set their own head background */
    box-shadow: none;
    border-bottom: 0;
    font-weight: 500; font-size: 10px; letter-spacing: .2em;
    padding-top: 16px; padding-bottom: 16px;
  }
  body.hn.hn-portal :is(.hn-table, .cost-table, .procurement-table) thead th :is(a, button) { color: var(--hn-brand-light); }
  body.hn.hn-portal .hn-table tbody tr:nth-child(even) td { background: rgba(244, 239, 229, .55); }
  body.hn.hn-portal :is(.hn-table, .cost-table, .procurement-table) tbody tr:hover td { background: var(--hn-brand-wash); }

  /* ---- buttons: same hover language as the public site ---- */
  body.hn.hn-portal :is(.hn-btn--primary, .hn-btn--accent):hover { background: var(--hn-brand-light); border-color: var(--hn-brand-light); color: var(--hn-night); }
  body.hn.hn-portal .hn-btn--outline:hover { background: var(--hn-night); border-color: var(--hn-night); color: #f8f4ec; }

  body.hn.hn-portal .hn-appfooter { letter-spacing: .2em; color: rgba(23, 20, 17, .5); }

  @media (max-width: 980px) {
    body.hn.hn-portal .hn-admin-nav :is(a, button):is(:hover, :focus-visible) { padding-left: 14px; }
    body.hn.hn-portal .hn-admin-nav :is(a, button) { padding: 12px 14px; }
  }
}
/* <<< portal-v2 end <<< */