/* Bransgroves procedures Wiki — CLONED from live bransgroves.com.au chrome
   Sources: _brand-extract/header-block.html, page-title-bar-block.html,
            services-main-block.html, bransgroves-chrome-header-css-essentials.css
   Scraped 2026-09-06 — NO green header strip; blue border-top only. */

/* Self-hosted fonts — latin subsets, variable weight (Montserrat 100–900,
   Open Sans 300–800). Fetched from Google Fonts 6 Sep 2026 so the wiki has no
   external requests. Paths are relative to this CSS file. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/open-sans-latin.woff2") format("woff2");
}

:root {
  --navy: #023a51;
  --primary-blue: #374da0;
  --deep-blue: #1d5092;      /* header border-top 5px — live .fusion-tb-header (CDP settled 6 Sep 2026) */
  --nav: #51626f;
  --body: #59667d;
  --band: #f4f8fc;           /* full-bleed title bar ONLY */
  --light-grey: #e8ebef;
  --copy: rgba(2, 58, 81, 0.6);
  --white: #ffffff;
  --ink: #023a51;
  --line: #e8ebef;
  --ok: #1d5092;      /* was green; site palette is blue/navy only */
  --ok-bg: #eef2f8;
  --skip: #6b5a1b;
  --skip-bg: #f8f1d8;
  --pend: #3d4f6f;
  --pend-bg: #eef2f8;
  --warn: #8a4b12;
  --warn-bg: #fff4e8;
  --max: 1310.4px;
  --header-border: 5px;
  --header-nav-h: 101px;     /* with 5px border → offset 106px (measured live blue-line to grey bar) */
  --header-offset: calc(var(--header-border) + var(--header-nav-h));
  --font-body: Montserrat, "MS Sans Serif", Geneva, sans-serif;
  --font-nav: OpenSans, "Open Sans", Helvetica, Arial, sans-serif;
  --font-wordmark: "Times New Roman", Times, serif;
  --nav_padding: 30px;
}

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

html {
  /* Reserve the vertical scrollbar's width even on pages too short to
     scroll, so the centred header/title bar does not shift ~8px sideways
     between a short landing page and a long content page. */
  scrollbar-gutter: stable; font-size: 16px; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--body);
  background: var(--white);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: var(--header-offset);
}

a {
  color: var(--navy);
  text-underline-offset: 2px;
}
a:hover { color: var(--primary-blue); }
.site-header a:hover { color: inherit; }

/* =========================================================
   HEADER — clone of .fusion-tb-header
   Fixed white, 100% width, z-index 999
   border-top: 5px solid #1d5092  ONLY — NO green strip
   Inner row max-width 1310.4px; logo ~20% / nav ~80%
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: #ffffff;
  border-top: var(--header-border) solid #1d5092;
}

.header-row {
  max-width: 1310.4px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  box-sizing: border-box;
}

/* Left column ~20% — wordmark (replaces live logo JPG max-width 200px, 881×89) */
.header-logo-col {
  width: 20%;
  flex: 0 0 20%;
  max-width: 20%;
  margin-top: 34px;
  margin-bottom: 20px;
  padding-right: 10px;
  box-sizing: border-box;
}

.wordmark {
  display: inline-block;
  max-width: 252px; /* measured from live bransgroves.com.au header */
  width: 100%;
  line-height: 0;
  text-decoration: none;
}
.wordmark:hover { text-decoration: none; opacity: 1; }
/* Size by HEIGHT and let width float, so any wordmark image matches the
   letter height of the live BRANSGROVES logo regardless of its own aspect
   ratio. Live logo: 881×89 rendered at 252px wide → 25.5px tall. Both
   images are cropped tight to the caps, so image height = cap height. */
.wordmark .logo-img,
.wordmark img {
  display: block;
  height: 25.5px;
  width: auto;
}

/* Right column ~80% — nav justify-content:flex-end */
.header-nav-col {
  width: 80%;
  flex: 0 0 80%;
  max-width: 80%;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 2.4%;
  padding-right: 2.4%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 64px; /* live CDP nav row ~64px */
}

.nav li {
  display: flex;
  align-items: stretch;
}

/* CDP getComputedStyle recipe (authoritative) — nav chrome */
.menu-text {
  font-family: OpenSans, "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 0.99rem; /* ~15.84px */
  font-weight: 400;
  color: #51626f;
  letter-spacing: 0.008em;
  margin-left: 9px;
  margin-right: 9px;
}

nav a {
  display: flex;
  align-items: center;
  min-height: 64px; /* live CDP link height ~64px */
  height: 64px;
  color: inherit;
  text-decoration: none;
  border-bottom: none;
  border-bottom-width: 0;
  box-sizing: border-box;
  padding: 0; /* live: spacing via .menu-text margins only */
}

/* Hover + current: stay grey — matches live bransgroves.com.au Process page */
nav a:hover {
  color: inherit;
  border-bottom: none;
}
nav a:hover .menu-text {
  color: #51626f;
}

nav a[aria-current="page"],
nav .current-menu-item > a {
  color: inherit;
  border-bottom: none;
}
nav a[aria-current="page"] .menu-text,
nav .current-menu-item > a .menu-text {
  color: #51626f;
}



/* =========================================================
   FULL-BLEED grey page title bar (#f4f8fc)
   Clone of section.fusion-page-title-bar
   Title ONLY — no submenu links in this bar
   ========================================================= */
.page-title-bar {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

/* Content pages keep the grey title bar (breadcrumb + h1) in view while the
   page scrolls under it, just below the fixed site header, so a reader deep in
   a long procedure can always see where they are. Menu pages (the bar holds a
   section menu) scroll normally: their bar is 290px tall. */
.page-title-bar:not(:has(.section-menu)) {
  position: sticky;
  top: var(--header-offset);
  z-index: 998;
}
.page-title-bar:not(:has(.section-menu)) .page-title-bar-bg {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.page-title-bar-bg {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 25px 0 20px;
  background-color: #f4f8fc;
  box-sizing: border-box;
  /* FIXED heights, never driven by content.
     Content pages (breadcrumb + h1, no menu): 136px — measured on the live
     bransgroves.com.au/services/mortgage-advances/ title band (25px top
     padding, breadcrumb, h1 at 64px, 39px below the h1).
     Menu pages: 290px — h1 at the same 64px, then 37px gap + 5 rows. */
  height: 136px;
  min-height: 136px;
  max-height: 136px;
  overflow: hidden;
}

.page-title-bar-bg:has(.section-menu) {
  --menu-bar: calc(290px + (max(var(--menu-rows, 5), 5) - 5) * 28.9px); /* 290px up to 5 rows, +28.9px per extra row */
  height: var(--menu-bar);
  min-height: var(--menu-bar);
  max-height: var(--menu-bar);
}

.page-title-bar-row {
  max-width: 1310.4px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

/* Breadcrumb row is a fixed 30px slot on EVERY page, so the h1 sits at the
   same y whether or not a page has a breadcrumb — no vertical jump between
   a landing page and a sub-page. */
.page-title-bar .breadcrumb {
  margin: 0;
  height: 39px;        /* live: crumb line 23.8px + gap → h1 at 64px from band top */
  line-height: 23.8px;
  box-sizing: border-box;
}
.page-title-bar-row > h1.page-title:first-child {
  margin-top: 39px; /* no breadcrumb on this page: reserve its slot */
}

.page-title-bar h1.page-title {
  margin: 0;
  font-family: "Open Sans", "MS Sans Serif", Geneva, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 29px;
  letter-spacing: -0.016em;
  line-height: 1.16;
  color: #59667d;
}


/* =========================================================
   Section menu INSIDE the grey title bar
   -------------------------------------------------------
   Flat <ul class="section-menu"> — no hand-built columns.
   * The bar height is FIXED (.page-title-bar-bg), never driven by item count.
   * The list is a CSS grid that fills column by column: exactly --menu-rows
     rows (default 5), so item 6 starts the second column, item 11 the third.
     A page overrides the row count on the <section class="page-title-bar">,
     e.g. style="--menu-rows: 3" (Practice: 7 items as 3/3/1),
     style="--menu-rows: 1" (Advances: 3 items on one row) or
     style="--menu-rows: 9" (Advances › Steps: 26 items as 9/9/8). The grey
     bar grows one row (28.9px) for every row above 5.
   * Three EQUAL columns (the wiki's fixed 485/525px positions left the
     third column ~250px, which truncated "Private Mortgage Lending" on the
     Services menu, 13 Sep 2026). Set --menu-rows so the items fit in three
     columns (rows × 3 ≥ items).
   * Items are listed in ALPHABETICAL order (A→Z, case-insensitive) in the
     HTML unless the page owner asks for a specific order; the stylesheet
     never reorders them.
   ========================================================= */
.page-title-bar .section-menu {
  --menu-row: 28.9px;                     /* 17px × 1.7, the live line pitch */
  list-style: none;
  margin: 37px 0 0; /* live: ~42px h1 bottom → link top, minus the link's half-leading */
  padding: 0;
  width: 100%;
  max-width: 1310.4px;
  height: calc(var(--menu-rows, 5) * var(--menu-row) + 1px); /* +1px rounding slack */
  display: grid;
  grid-auto-flow: column;                 /* fill top-to-bottom, then spill */
  grid-template-rows: repeat(var(--menu-rows, 5), var(--menu-row));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-columns: minmax(0, 1fr);
  column-gap: 25px;                       /* live 1/3 column gutter */
  align-content: start;
}

.page-title-bar .section-menu > li {
  margin: 0;
  padding: 0;
  list-style: none;
  height: var(--menu-row);
  line-height: var(--menu-row);
  min-width: 0;
}

/* Grouped menu (Variations): a column per group, its title on the first row,
   empty .menu-gap rows padding the shorter column so the next group starts a
   new column. Generated by convert-old-site.py (GROUPED_AREAS). */
.page-title-bar .section-menu .menu-group {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--body);
  white-space: nowrap;
}

/* A grouped menu that fills three columns: each column as wide as its longest
   label, the spare width shared out between them so the last column ends at
   the right edge (Matthew's Variations mock-up, 9 Sep 2026). */
.page-title-bar .section-menu:has(.menu-group):has(> li:nth-child(16)) {
  grid-template-columns: repeat(3, minmax(0, max-content));
  justify-content: space-between;
  column-gap: 40px;
}

/* Legacy nested markup (li.section-col > ul) still renders if a page has it. */
.page-title-bar .section-menu .section-col > ul { list-style: none; margin: 0; padding: 0; }

/* Link recipe from live bransgroves.com.au/services (CDP getComputedStyle,
   7 Sep 2026): Montserrat 17px/28.9px, weight 400, letter-spacing 1.02px,
   colour #1d5092, no hover change. */
.page-title-bar .section-menu a,
.page-title-bar .section-menu .pending {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: #59667d;   /* all items grey, live links and placeholders alike (live site uses #1d5092) */
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-title-bar .section-menu a:hover {
  text-decoration: none;
  color: #59667d;
}

.page-title-bar .section-menu .pending {
  color: var(--body);
  cursor: default;
}

/* Chevron: live site uses Font Awesome 5 solid "angle-right" (\f105) at 17px,
   rgba(46,80,132,.62), 5px gap. Same glyph, embedded as an SVG mask so no
   icon font is loaded; background-color paints it. */
.page-title-bar .section-menu a::before,
.page-title-bar .section-menu .pending::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1em;
  vertical-align: -0.125em;
  margin-right: 5px;
  background-color: rgba(89, 102, 125, 0.55);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'><path d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'/></svg>") no-repeat center / contain;
}

/* On the website a section's landing page carries the section menu and a
   content page a breadcrumb (as the wiki), but nothing hides <main> on a menu
   page: a landing page may carry a sentence or two of copy. */

/* Main content */
main {
  flex: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
  width: 100%;
}

.breadcrumb {
  font-family: var(--font-nav);
  font-size: 14px;
  color: #59667d;
  margin: 0 0 1rem;
}
.breadcrumb a { color: #51626f; text-decoration: none; }
.breadcrumb a:hover { color: #51626f; text-decoration: underline; } /* underline only — no colour change */

main h1.page-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 29px;
  letter-spacing: -0.016em;
  line-height: 1.16;
  color: #59667d;
}

.lede {
  color: var(--body);
  margin: 0 0 1.5rem;
  max-width: none;  /* text wraps at the full column (Matthew, 12 Sep 2026) */
}

h2 {
  margin: 1.75rem 0 0.65rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy);
  border-bottom: 1px solid var(--light-grey);
  padding-bottom: 0.35rem;
}

/* Standard client menu headings that have nothing written for this client yet.
   Greyed (matching the `pending` menu convention) so a reader can see the
   question was asked, rather than wondering whether it was forgotten. */
main h2.pending {
  color: #9aa4b4;
  border-bottom-color: #f0f3f7;
}

main .pending-note {
  color: #9aa4b4;
  font-style: italic;
  max-width: none;
}

h3 {
  margin: 1.25rem 0 0.45rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
}

h4 {
  margin: 1.1rem 0 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
}

p, li { max-width: none; }  /* text wraps at the full column, like tables (Matthew, 11 Sep 2026) */
ul, ol { padding-left: 1.25rem; }
li { margin: 0.3rem 0; }

/* Procedure steps: 1. → a. → i., as in the old Google Docs. Paragraphs and
   screenshots that belong to a step sit inside its <li> so the numbering
   carries on past them. */
main ol { list-style: decimal; }
main ol ol { list-style: lower-alpha; margin-top: 0.3rem; }
main ol ol ol { list-style: lower-roman; }
/* When the old document numbered a list differently from the default for its depth. */
main ol.decimal { list-style: decimal; }
main ol.upper-alpha { list-style: upper-alpha; }
main ol.lower-alpha { list-style: lower-alpha; }
main ol.lower-roman { list-style: lower-roman; }
main ol.upper-roman { list-style: upper-roman; }
main li > p { margin: 0.5rem 0; }
main li > ol, main li > ul { margin-bottom: 0.5rem; }

main figure {
  margin: 0.75rem 0 1rem;
  max-width: 900px;
}
main figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--light-grey);
  border-radius: 3px;
}
main figure.flowchart svg {  /* a slide drawn as SVG: same frame as a screenshot */
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--light-grey);
  border-radius: 3px;
  padding: 0.5rem;
  box-sizing: border-box;
}
main figure figcaption {
  font-size: 0.85rem;
  color: var(--body);
  margin-top: 0.35rem;
}

/* Copy beside its picture, as on the live service pages (Avada 1/2 + 1/2
   columns, image right with 12px corners): a page whose <main> holds a
   top-level <figure> becomes two columns, every other block in the left one
   and the figure in the right, top-aligned. Below 900px it stacks in source
   order, the figure after the first paragraph. */
main:has(> figure) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 6%;
  row-gap: 0;
  align-items: start;
}
main:has(> figure) > * {
  grid-column: 1;
  min-width: 0;
}
main:has(> figure) > figure {
  grid-column: 2;
  grid-row: 1 / span 40;
  margin: 0.35rem 0 1rem;
  max-width: none;
}
main:has(> figure) > figure img {
  border: 0;
  border-radius: 12px;
}

/* People pages: the portrait (297×700 at most) sits at its own width on the
   right instead of filling half the page. */
main:has(> figure.portrait) { grid-template-columns: minmax(0, 1fr) auto; }
main:has(> figure.portrait) > figure.portrait { max-width: 297px; }
main > figure.portrait p { margin: 0.5rem 0 0; }

/* /people/: the team as a grid of portraits, each linking to its page. */
ul.people {
  list-style: none;
  margin: 0.5rem 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.5rem 1.25rem;
}
ul.people li { margin: 0; }
ul.people a { display: block; text-decoration: none; color: inherit; }
ul.people figure { margin: 0; max-width: none; }
ul.people figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 7;
  /* Whole photo, never cropped: the portraits are narrower than 3:7 (some
     137×420), so "cover" scaled them up and cut the shoes off. Bottom-anchored
     so every pair of feet sits on the same baseline. */
  object-fit: contain;
  object-position: bottom center;
  border: 0;
  border-radius: 12px;
}
ul.people figcaption { margin-top: 0.5rem; font-size: 0.95rem; line-height: 1.35; }
ul.people a:hover figcaption strong { text-decoration: underline; }

.step-nav {
  margin-top: 2rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--light-grey);
  color: var(--body);
  font-size: 0.92rem;
}

.note, .callout {
  background: var(--warn-bg);
  border-left: 4px solid var(--warn);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}

.callout.flag {
  background: var(--skip-bg);
  border-left-color: var(--skip);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }

/* =========================================================
   Section / home menus — CLONE of services-main-block.html
   Three equal columns (~33.33%), gutter ~5.76%
   Plain <a> stacked with <br> — NO chevrons
   Legacy 3-col layout (prefer .section-menu in title bar)
   Link color #023a51
   ========================================================= */
.services-menu {
  background: transparent;
  margin: 1rem 0 1.75rem;
  padding: 0;
  width: 100%;
}

.services-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: 1310.4px;
  width: 100%;
  margin: 0;
  /* approximate live spacing-left/right 5.76% on each 1/3 col */
  gap: 0;
}

.services-col {
  width: 33.333333333333%;
  flex: 0 0 33.333333333333%;
  max-width: 33.333333333333%;
  box-sizing: border-box;
  padding-left: 2.88%;
  padding-right: 2.88%;
  margin-bottom: 20px;
}

.services-col p {
  margin: 0;
  max-width: none;
  font-family: var(--font-nav);
  font-size: 16px;
  line-height: 1.7;
  --awb-text-transform: none;
}

.services-col a {
  color: #023a51;
  text-decoration: none;
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: 16px;
}

.services-col a:hover {
  color: #023a51;
  text-decoration: underline;
}

.services-col .pending {
  color: var(--body);
  cursor: default;
  font-family: var(--font-nav);
  font-size: 16px;
}

/* Legacy aliases kept so nothing breaks if a page still references them */
.link-band {
  background: transparent;
  padding: 0;
  margin: 1rem 0 1.75rem;
}
.link-cols {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.link-cols > ul {
  list-style: none;
  margin: 0;
  padding: 0 2.88%;
  width: 33.333%;
  box-sizing: border-box;
}
.link-cols li {
  margin: 0.35rem 0;
  max-width: none;
}
.link-cols a,
.link-cols .pending {
  color: #023a51;
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
}
.link-cols a:hover {
  text-decoration: underline;
  color: #023a51;
}
.link-cols .pending { color: var(--body); cursor: default; }
.chev { display: none; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 0;
}

.card {
  background: var(--band);
  border: 1px solid var(--light-grey);
  padding: 1.1rem 1.15rem;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.15s, box-shadow 0.15s;
}

a.card:hover {
  border-color: var(--primary-blue);
  box-shadow: 0 2px 10px rgba(2, 58, 81, 0.08);
  text-decoration: none;
}

.card h2 {
  margin: 0 0 0.4rem;
  border: 0;
  padding: 0;
  font-size: 1.1rem;
}

.card p {
  margin: 0;
  color: var(--body);
  font-size: 0.92rem;
}

.stub {
  background: var(--band);
  border: 1px dashed var(--light-grey);
  padding: 1.25rem 1.35rem;
  color: var(--body);
  max-width: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--light-grey);
  font-size: 0.92rem;
  margin: 0.75rem 0 1.25rem;
}

th, td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--light-grey);
  vertical-align: top;
}

th {
  background: var(--band);
  color: var(--navy);
  font-weight: 600;
  font-family: var(--font-nav);
}

tr:last-child td { border-bottom: 0; }

.table-wrap { overflow-x: auto; margin: 0.75rem 0 1.25rem; }
.table-wrap table { margin: 0; }

.status {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.status.done { background: var(--ok-bg); color: var(--ok); }
.status.skipped { background: var(--skip-bg); color: var(--skip); }
.status.pending { background: var(--pend-bg); color: var(--pend); }

.meta {
  font-size: 0.85rem;
  color: var(--body);
  margin: 0 0 1rem;
}

.site-footer {
  background: var(--white);
  border-top: 1px solid var(--light-grey);
  padding: 2rem 1.5rem 2.25rem;
  font-family: var(--font-nav);
  font-size: 0.8rem;
  color: var(--body);
  text-align: left;
}

.site-footer .wrap {
  max-width: var(--max);
  margin: 0 auto;
}

.footer-title {
  margin: 0 0 0.65rem;
  color: var(--body);
  font-weight: 500;
}

.footer-address {
  margin: 0 0 0.85rem;
  line-height: 1.45;
}

.footer-contact {
  margin: 0 0 0.85rem;
  line-height: 1.45;
}
.footer-contact a { color: inherit; }

.footer-links {
  margin: 0 0 0.35rem;
  line-height: 1.45;
}
.footer-links a { color: inherit; }

.footer-liability {
  margin: 0 0 0.85rem;
  max-width: none;
}

.footer-sep {
  border: 0;
  border-top: 1px solid var(--light-grey);
  margin: 0 0 0.85rem;
  max-width: 100%;
}

.footer-copy {
  margin: 0;
  color: var(--copy);
  max-width: none;
}

.toc {
  background: var(--band);
  border: 1px solid var(--light-grey);
  padding: 0.85rem 1.1rem;
  margin: 0 0 1.25rem;
  max-width: 42rem;
}

.toc ul { margin: 0.35rem 0 0; }

.quick-links {
  margin-top: 0.5rem;
}

@media (max-width: 900px) {
  .header-row { padding-left: 1.5rem; padding-right: 1.5rem; } /* the logo no longer touches the edge */
  main:has(> figure) { display: block; }
  main:has(> figure) > figure { margin: 0.75rem 0 1rem; }
  .header-logo-col,
  .header-nav-col {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .header-logo-col { margin-top: 16px; margin-bottom: 8px; }
  .header-nav-col {
    margin-top: 0;
    margin-bottom: 12px;
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
  }
  .services-col {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .link-cols > ul {
    width: 50%;
  }
}

@media (max-width: 640px) {
  :root {
    --header-nav-h: 88px;
  }
  .header-row {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .wordmark {
    font-size: 1.45rem;
    max-width: 180px;
  }
  .wordmark .logo-img,
  .wordmark img { height: 18px; } /* 180px-wide live logo → 18px tall */
  nav a {
    padding: 0;
    min-height: 44px;
    height: auto;
  }
  .menu-text {
    font-size: 0.9rem;
  }
  .page-title-bar-bg { padding: 16px 0 16px; }
  /* Phones: the bars grow to fit. The menu is one column here, so a fixed
     height would clip it; a long h1 may wrap to two lines. */
  .page-title-bar-bg,
  .page-title-bar-bg:has(.section-menu) { height: auto; min-height: 0; max-height: none; }
  .page-title-bar .breadcrumb { height: auto; min-height: 39px; margin-bottom: 8px; } /* may wrap to two lines */
  .page-title-bar .section-menu {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
  .page-title-bar .section-menu .menu-gap { display: none; }
  .page-title-bar-row { padding-left: 1rem; padding-right: 1rem; }
  .page-title-bar h1.page-title { font-size: 1.45rem; }
  .services-col {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .link-cols > ul { width: 100%; padding: 0; }
  th, td { padding: 0.45rem 0.5rem; font-size: 0.85rem; }
  main { padding: 1.25rem 1rem 2.5rem; }
}

@media print {
  body { background: #fff; color: #000; padding-top: 0; }
  .site-header {
    position: static;
    border-top: 5px solid #000;
  }
  .page-title-bar-bg { background: #eee; }
  nav a { color: #000; }
  nav a[aria-current="page"] { color: #000 !important; }
  .menu-text { color: #000; }
  .site-footer { border-top: 1px solid #000; }
  a { color: #000; text-decoration: underline; }
  .card, table, .stub, .toc { box-shadow: none; break-inside: avoid; }
  main { padding-bottom: 1rem; }
}

/* =========================================================
   SEARCH — header box with live results dropdown (assets/wiki.js)
   Index is search-index.json at the site root, built on deploy.
   ========================================================= */
.site-search {
  position: relative;
  margin-left: 18px;
  flex: 0 0 auto;
  /* Twice the original 190px, growing to the RIGHT so the left edge stays put.
     The extra 190px hangs out past the content column into the page margin,
     clamped to the room actually available so it never overflows the viewport. */
  --search-extra: clamp(0px, (100vw - 1310.4px) / 2 - 16px, 190px);
  margin-right: calc(-1 * var(--search-extra));
}
.site-search input {
  font-family: var(--font-nav);
  font-size: 0.9rem;
  color: var(--nav);
  width: calc(190px + var(--search-extra));
  padding: 7px 10px;
  border: 1px solid var(--light-grey);
  border-radius: 3px;
  background: #fff;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.site-search input::placeholder { color: #9aa5ae; }
.site-search input:focus { border-color: var(--deep-blue); }

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 440px;
  max-width: calc(100vw - 2rem);
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(2, 58, 81, 0.12);
  z-index: 1000;
  text-align: left;
}
.search-hit {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--body);
}
.search-hit:last-child { border-bottom: 0; }
.search-hit:hover,
.search-hit.active { background: var(--band); color: var(--body); }
.search-hit .hit-title {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
}
.search-hit .hit-crumb {
  display: block;
  font-family: var(--font-nav);
  font-size: 0.75rem;
  color: var(--nav);
  margin-top: 1px;
}
.search-hit .hit-snip {
  display: block;
  font-size: 0.85rem;
  line-height: 1.4;
  margin-top: 4px;
}
.search-hit mark { background: #fff2a8; color: inherit; padding: 0 1px; }
.search-empty {
  padding: 12px 14px;
  font-family: var(--font-nav);
  font-size: 0.85rem;
  color: var(--nav);
}

@media (max-width: 900px) {
  /* Narrow screens: the eight links keep one another's company on their own
     row(s), and the search box drops to a row of its own beneath them. */
  .header-nav-col { flex-wrap: wrap; }
  .nav { flex: 0 0 100%; justify-content: flex-start; }
  .site-search { flex: 0 0 auto; margin: 2px 0 0; }
  .site-search input { width: 220px; }
}
@media print {
  .site-search { display: none; }
}

/* =========================================================
   Skills pages (/skills/): a boxed sample of what a Claude skill
   returned when run on real data. The label sits above; the
   "Asked:" line quotes the question; the rest is the skill's answer.
   ========================================================= */
.sample {
  background: var(--band);
  border: 1px solid var(--light-grey);
  border-left: 4px solid var(--primary-blue);
  padding: 1rem 1.25rem;
  margin: 1rem 0 1.5rem;
}
.sample .sample-label {
  font-family: var(--font-nav);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nav);
  margin: 0 0 0.5rem;
}
.sample .sample-ask { margin: 0 0 1rem; }
.sample h3 { margin-top: 1.1rem; font-size: 1rem; }
.sample h3:first-of-type { margin-top: 0.75rem; }
.sample p, .sample li { font-size: 0.95rem; }
.sample table { background: var(--white); }
.sample > :last-child { margin-bottom: 0; }
code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(2, 58, 81, 0.06);
  padding: 0.05em 0.3em;
  border-radius: 3px;
}

/* =========================================================
   CLIENT HUB MARKERS (12 Sep 2026).
   .std   — red asterisk after a menu item whose page says the lender does not
            deviate from standard procedure, so the reader need not open it.
   .alert — a red menu item: the Confidentiality page has something in it.
   sup.fn — footnote to the client's Sources page (/clients/<client>/sources/).
   ========================================================= */
.page-title-bar .section-menu li { position: relative; }
.page-title-bar .section-menu .std {
  color: #c1121f;
  font-weight: 700;
  margin-left: 0.25em;
  cursor: help;
}
.page-title-bar .section-menu a.alert,
.page-title-bar .section-menu a.alert:hover {
  color: #c1121f;
  font-weight: 600;
}
.page-title-bar .section-menu a.alert::before { background-color: #c1121f; }
main sup.fn {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.1em;
}
main sup.fn a { text-decoration: none; color: #1d5092; }
main sup.fn a:hover { text-decoration: underline; }
main p.standard { font-style: italic; }
main ol.sources > li { margin-bottom: 0.9em; }
main ol.sources > li:target { background: #fff6d6; outline: 6px solid #fff6d6; }

/* =========================================================
   Home page hero — clone of the live home's #hero section
   (bransgroves.com.au, 14 Sep 2026), measured in a browser: the stock photo
   full width under the header with a white 55% gradient blended over it as
   overlay, and the heading in a translucent blue column
   (rgba(30,146,255,0.6)) on the left half of a 1310.4px row. Live geometry:
   - the section is 100vh tall on desktop (Avada "hundred-percent-height"),
     padded 20% of the width above and 10% below, 30px at the sides, with the
     row vertically centred; at 1200px and below it is just padding plus content;
   - the row is the section's content width plus 4% (Avada's -2% margins),
     capped at 1310.4px and centred;
   - the column is 50% wide, padded 20px at the bottom with a 40px bottom
     margin, and its wrapper has 3.84% side margins;
   - the h1 is 60px with line-height 1.16 and letter-spacing -0.036em (so
     -2.16px), and the text sits in a 49px span. The span asks for "TheSans
     Plain", which the site never serves, so visitors see the browser's bold
     serif fallback; the wordmark stack reproduces that. The tight tracking is
     what fits "Mortgage Lawyers for 25 years." on one line;
   - the photo is the live parallax frame at scroll 0: a cover box 30vh taller
     than the section, aligned to its bottom, so the visible part is the lower
     three quarters of the picture and the column sits over the house.
   Replaces the grey title bar: the home page has no .page-title-bar.
   ========================================================= */
.hero {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 20% 30px 10%;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #e8ebef;
}
@media (min-width: 1201px) {   /* live: full-height above 1200px only */
  .hero { min-height: 100vh; }
}
.hero-bg {            /* the photo as an <img>, so it is a page asset like every other picture */
  position: absolute;
  top: -30vh;
  left: 0;
  width: 100%;
  height: calc(100% + 30vh);
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}
.hero::before {       /* the live white 55% gradient, blended as overlay */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(242, 242, 242, 0.55) 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: min(104%, 1310.4px);
  margin: 0 max(-2%, calc((100% - 1310.4px) / 2));
}
.hero-box {
  box-sizing: border-box;
  width: 50%;
  background: rgba(30, 146, 255, 0.6);
  padding: 0 0 20px;
  margin: 0 0 40px;
}
.hero-title {
  margin: 0 3.84%;
  padding: 0;
  font-family: var(--font-wordmark);
  font-weight: 700;
  font-size: 60px;
  line-height: 1.16;
  letter-spacing: -0.036em;
  color: #ffffff;
}
.hero-title span { font-size: 49px; }
.hero + main { padding-top: 2.5rem; }
.hero + main.hero-only { padding: 0; }  /* live home: no copy below the hero */

@media (max-width: 1330px) {  /* live medium: 3.5vw text, 10px column padding, a 20px column margin */
  .hero-box { padding: 0 10px 20px; margin-bottom: 20px; }
  .hero-title {
    margin: 0 0 0 3.84%;
    font-size: min(60px, calc(39.3px + 1.725vw)); /* Avada's responsive h1: 53px at 800px, 46px at 400px */
    line-height: 0.75em;
    text-indent: -10px;
  }
  .hero-title span { padding: 0 10px; font-size: 3.5vw; }
}
@media (max-width: 640px) {   /* live small: full-width column, 6.5vw text */
  .hero-box { width: 100%; margin-bottom: 40px; }
  .hero-title { margin: 0 1.92%; }
  .hero-title span { font-size: 6.5vw; }
}