/* =============================================================================
   HOUSE TYPE TOKENS — set 19 Aug 2026 by Sir: the faces on index, results,
   service and trade-profile become the default for the whole site. All four
   pages declare these identically (4/4 agreement), so this is a copied house
   value, not a new decision. brand-identity 1.2 names the pair.

   Defined here because 44 pages link this sheet. A page's own :root still wins
   if it defines them, and the three pages that do declare the same values.
============================================================================= */
:root {
  --serif-display: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif;
  --serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

/* ============================================================
   HYYRYN — ACCOUNT CONTROL
   The single signed-out affordance in the masthead: one icon,
   one menu. Shared by every page so the component cannot drift.
   Markup lives in each page (NOT injected at runtime — a runtime
   rewrite is what made the header disagree with its own markup
   before, and that class of bug is not worth repeating).
   ============================================================ */

.nm-acct { position: relative; flex: none; }

/* A hairline ring, not a bare glyph. A thin outline icon floating on cream
   with nothing around it reads as decoration and gets missed; the ring says
   "this is a control" without raising the volume. */
.nm-right {
  display: grid; place-items: center; width: 36px; height: 36px;
  background: #fff; border: 1px solid var(--line, #E6E0D0);
  padding: 0; cursor: pointer;
  border-radius: 50%;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nm-right svg {
  width: 18px; height: 18px; fill: none; stroke: var(--navy, #0A1628);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.nm-right:hover {
  border-color: var(--line-2, #D8CFB8);
  box-shadow: 0 2px 8px -4px rgba(10,22,40,.3);
}
.nm-right[aria-expanded="true"] {
  background: var(--navy, #0A1628); border-color: var(--navy, #0A1628);
}
.nm-right[aria-expanded="true"] svg { stroke: var(--cream, #FAF8F3); }
.nm-right:focus-visible { outline: 1px solid var(--navy, #0A1628); outline-offset: 3px; }

.nm-menu {
  position: absolute; top: calc(100% + 14px); right: 0; width: 288px; z-index: 130;
  background: rgba(250,248,243,.985);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid var(--line, #E6E0D0);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(10,22,40,.05), 0 24px 48px -20px rgba(10,22,40,.28);
  transform-origin: top right;
  opacity: 0; transform: translateY(-6px) scale(.985); pointer-events: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.7,.3,1);
  text-align: left;
}
.nm-menu.open { opacity: 1; transform: none; pointer-events: auto; }

.nm-menu-top { padding: 20px 20px 18px; border-bottom: 1px solid var(--line, #E6E0D0); }
.nm-menu-eyebrow {
  display: block; font-family: var(--sans, 'Inter', sans-serif); font-size: 10px;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green, #0F5A4F);
  margin-bottom: 14px;}

.nm-menu-cta, .nm-menu-alt {
  display: block; text-align: center; text-decoration: none;
  font-family: var(--sans, 'Inter', sans-serif); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 12px 16px; border-radius: 999px; transition: all .2s ease;
}
.nm-menu-cta {
  background: var(--navy, #0A1628); color: var(--cream, #FAF8F3);
  border: 1px solid var(--navy, #0A1628);
}
.nm-menu-cta:hover { background: #0E1E34; }
.nm-menu-alt {
  margin-top: 8px; background: transparent; color: var(--navy, #0A1628);
  border: 1px solid var(--line-2, #D8CFB8);
}
.nm-menu-alt:hover { border-color: var(--navy, #0A1628); }

.nm-menu-group { padding: 8px; }
.nm-menu-group + .nm-menu-group { border-top: 1px solid var(--line, #E6E0D0); }
.nm-menu-group a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 10px; text-decoration: none;
  font-family: var(--sans, 'Inter', sans-serif); font-size: 13.5px;
  color: var(--ink, #1B2638); opacity: .82;
  transition: background .15s ease, opacity .15s ease;
}
.nm-menu-group a:hover { background: rgba(10,22,40,.045); opacity: 1; }
/* Missing from this file until 17 Aug. index.html had it inline, so the icons
   looked right there and rendered as unsized black blobs on every other page the
   moment the signed-in menu started using them. Third time this inline/shared
   split has cost something. */
.nm-menu-group a svg {
  width: 16px; height: 16px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.nm-menu-quiet a { font-size: 12.5px; opacity: .62; }

@media (prefers-reduced-motion: reduce) { .nm-menu { transition: none; } }
@media (max-width: 640px) { .nm-menu { width: calc(100vw - 44px); right: -6px; } }

/* ============================================================
   SIGNED-IN STATE
   Added 17 Aug 2026. The signed-out menu carries only Log in,
   Create an account and the three links that work either way,
   which is right for a visitor and wrong the moment someone has
   an account: Sir signed in and the header still said "Log in".
   The signed-in contents are BUILT BY hyyryn-account.js rather
   than sitting in 46 pages of markup, because the last two
   duplications in this component each cost a fix that landed in
   one place and missed another.
   ============================================================ */
.nm-menu-me { display: flex; align-items: center; gap: 11px; }
.nm-menu-av {
  width: 38px; height: 38px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--navy, #0A1628); color: var(--cream, #FAF8F3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif, Georgia, serif); font-size: 16px; line-height: 1;
}
.nm-menu-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nm-menu-name {
  display: block;
  font-family: var(--sans, 'Inter', sans-serif); font-size: 13.5px;
  color: var(--ink, #1B2638); line-height: 1.3;
}
.nm-menu-role {
  display: block;
  font-family: var(--sans, 'Inter', sans-serif); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #636976);
  margin-top: 2px;
}
/* Sign out is an action, not a destination, so it reads quieter than the
   navigation above it and sits alone at the foot. */
.nm-menu-out {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 9px 12px; border-radius: 10px; cursor: pointer;
  font-family: var(--sans, 'Inter', sans-serif); font-size: 12.5px;
  color: var(--muted, #636976);
}
.nm-menu-out:hover { background: rgba(10,22,40,.045); color: var(--ink, #1B2638); }

/* The button itself becomes the person once there is a session: a face, or the
   initial, in place of the generic outline. It is the fastest possible answer to
   "am I signed in", which is the question Sir had to open the menu to answer. */
.nm-right.is-signed-in { background: var(--navy, #0A1628); border-color: var(--navy, #0A1628); overflow: hidden; }
.nm-right .nm-av-btn {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--cream, #FAF8F3);
  font-family: var(--serif-display, var(--serif, Georgia, serif));
  font-size: 15px; line-height: 1;
}
.nm-right .nm-av-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* =============================================================================
   COMPACT SEARCH — moved here 19 Aug 2026 from trade-profile.html, where it sat
   inline on ONE page while 44 pages link this sheet. That asymmetry is why
   raise-dispute would have shipped an unstyled search on 17 Aug.

   CAUTION, learned the hard way on the first attempt: the last rule below is a
   MEDIA QUERY. Extracting these rules with a regex flattened it into a bare
   `.nm-mini{display:none}`, which then applied at every width and, being last,
   won. The search rendered 0x0 on the pilot. Keep the wrapper.

   .topbar-inner needs position:relative because .nm-mini centres itself
   absolutely; asserted here rather than assumed per page.
============================================================================= */
.topbar-inner { position: relative; }

/* ---------------------------------------------------- compact search
     THE .nm-mini FROM results.html, lifted whole. On that page it is hidden
     until the hero scrolls past and then takes the nav's place in the centre
     of the masthead. THIS page has no hero, so it is simply present from the
     start, which is exactly the state results.html settles into.

     It REPLACES the centred nav rather than sitting beside it, because both
     want the middle of the bar. Nothing is lost: How it works, For
     tradespeople and Help and support all already live in the account menu on
     the right. And a profile is a page you reach FROM a search, so offering
     the search again is the more useful of the two. */
  .nm-mini {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    width: min(430px, 34vw);
    display: flex; align-items: center; height: 40px; padding: 0 5px 0 15px;
    background: #fff; border: 1px solid var(--line); border-radius: 999px;
    box-shadow: 0 1px 2px rgba(10,22,40,.04), 0 10px 26px -18px rgba(10,22,40,.45);
  }
.nm-mini-icon {
    width: 15px; height: 15px; flex: none; fill: none; stroke: var(--muted);
    stroke-width: 1.7; stroke-linecap: round; margin-right: 10px;
  }
.nm-mini input {
    min-width: 0; border: 0; background: none; outline: none; padding: 0;
    font-family: var(--sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); font-size: 13px; color: var(--ink);
  }
.nm-mini input::placeholder { color: var(--muted); opacity: .75; }
.nm-mini #miniQ { flex: 1 1 auto; }
.nm-mini #miniLoc { flex: 0 0 84px; }
.nm-mini-div { width: 1px; height: 18px; background: var(--line); margin: 0 12px; flex: none; }
.nm-mini-go {
    flex: none; width: 32px; height: 32px; margin-left: 8px; display: grid; place-items: center;
    cursor: pointer; background: var(--navy); border: 0; border-radius: 50%;
    transition: background .2s ease;
  }
.nm-mini-go svg {
    width: 15px; height: 15px; fill: none; stroke: var(--cream);
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  }
.nm-mini-go:hover { background: #0E1E34; }
/* Below the tablet break there is no room for a 430px pill between a
     wordmark and an account button, so it stands down. */
  @media (max-width: 900px) { .nm-mini { display: none; } }




/* =============================================================================
   THE BRANDLOCK — added 19 Aug 2026.

   The wordmark was drifting page by page. Three settled pages (service,
   results, trade-profile) all agree on ONE treatment: 11px spaced sans caps
   beside a 16px mark, which is Norm's one-size-across-the-row rule from
   brand-identity 1.1 and the reason the header reads calm. Meanwhile
   saved-homeowner was setting it in 'Instrument Serif' at 24px — a hardcoded
   family that is not even a brand face — so a transplanted masthead inherited
   the wrong wordmark.

   SCOPED TO .topbar deliberately. index.html uses .nm-head for its masthead and
   reserves bare .brand for a large serif lockup elsewhere on the page; scoping
   here leaves that alone. Verified: index.html contains zero .topbar.
============================================================================= */
.topbar .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.topbar .brand .mark { width: 16px; height: 16px; flex: none; }
.topbar .brand .word {
  font-family: var(--sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1;
  }


/* =============================================================================
   THE BAR — added 19 Aug 2026, house values from service/results/trade-profile,
   which all three agree. Selector is element+class (0,1,1) so it outranks a
   page's own bare `.topbar` (0,1,0) regardless of source order; 32 pages carry
   their own drifted copy and this is what normalises them without editing each.

   74px is brand-identity 1.1 and it is the number that makes the row read as
   one size. The drifted pages sit at 65px with 14px vertical padding, which is
   why their mastheads feel tighter and the wordmark sits low.
============================================================================= */
header.topbar {
  position: sticky; top: 0; z-index: 100;
  height: 74px;
  background: rgba(250, 248, 243, 0.94);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid var(--line, #E6E0D0);
  }
header.topbar .topbar-inner {
  position: relative;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(22px, 3.2vw, 51px);
  display: flex; align-items: center; justify-content: space-between;
  }
@media (max-width: 768px) {
  header.topbar { height: 64px; }
  header.topbar .topbar-inner { padding: 0 24px; }
  }