/* Ledger Audits, site-wide system layer (Nov 2026).
 * Loaded on every page after site.css. Carries the landing-page design rules
 * to the rest of the site: header, menu, eyebrows, blog article structure.
 * Colours come only from site.css tokens.
 */

/* ── Eyebrow: same mark as the landing page, everywhere ───────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.75;flex:none}

/* ── Header ───────────────────────────────────────────────────────────── */
.site-head{
  transition:transform .35s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  will-change:transform;
}
.site-head .bar{transition:padding .3s var(--ease)}
.site-head.is-scrolled{background:rgba(245,242,233,.96);box-shadow:0 10px 30px -22px rgba(16,26,20,.45);border-bottom-color:transparent}
.site-head.is-scrolled .bar{padding:9px 0}
.site-head.is-hidden{transform:translateY(-102%)}
.brand .seal{transition:transform .35s var(--ease)}
.brand:hover .seal{transform:rotate(-6deg)}

/* Nav links: underline grows from the left instead of a static border. */
.nav{gap:30px}
.nav > a:not(.cta), .nav .dd-trigger{
  position:relative;color:rgba(16,26,20,.76);border-bottom:0;padding:8px 0;
  background:linear-gradient(var(--gold-rule),var(--gold-rule)) left calc(100% - 2px)/0 1px no-repeat;
  transition:color var(--t-control) var(--ease),background-size .35s var(--ease);
}
.nav > a:not(.cta):hover, .nav .dd-trigger:hover,
.nav > a[aria-current], .nav .dd-trigger[aria-current],
.has-dd.open .dd-trigger{color:var(--green);background-size:100% 1px}
.nav .cta{gap:8px;transition:background-color var(--t-control) var(--ease),box-shadow var(--t-control) var(--ease)}
.nav .cta span{transition:transform var(--t-control) var(--ease)}
.nav .cta:hover span{transform:translateX(3px)}
.nav .cta:hover{box-shadow:0 8px 20px -10px rgba(30,77,56,.6)}

/* Services dropdown */
.nav-item{position:relative;display:flex;align-items:center}
.dd-trigger{display:inline-flex;align-items:center;gap:7px}
.dd-caret{
  width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease);
}
.has-dd.open .dd-caret{transform:translateY(1px) rotate(225deg)}
.nav-dd{
  position:absolute;top:calc(100% + 14px);left:50%;
  width:min(660px,92vw);transform:translate(-50%,8px);
  background:var(--cream-card);border:1px solid var(--hair-strong);border-radius:var(--r);
  box-shadow:0 30px 60px -30px rgba(16,26,20,.45);
  padding:22px 22px 16px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s linear .3s;
}
.nav-dd::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}  /* hover bridge */
.has-dd.open .nav-dd,
.has-dd:focus-within .nav-dd{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
  transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s;
}
.dd-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:6px 26px}
.dd-k{
  font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);
  padding:4px 10px 12px;border-bottom:1px solid var(--hair);margin-bottom:6px;
}
.dd-item{
  display:block;padding:11px 10px;border-radius:var(--r-sm);
  transition:background-color var(--t-control) var(--ease);
}
.dd-item b{display:block;font:500 15.5px/1.3 var(--sans);color:var(--ink)}
.dd-item span{display:block;margin-top:4px;font:400 14px/1.45 var(--sans);color:var(--t-mute)}
.dd-item:hover,.dd-item:focus-visible{background:var(--paper)}
.dd-item:hover b{color:var(--green)}
.dd-foot{
  display:flex;justify-content:space-between;gap:16px;margin-top:12px;padding:14px 10px 2px;
  border-top:1px solid var(--hair);font:500 15px/1.3 var(--sans);
}
.dd-foot a{color:var(--green)}
.dd-foot a:hover{color:var(--gold-ink)}

/* Mobile menu: animated two-line button, full-width panel. */
.menu-btn{display:none;align-items:center;gap:10px}
.mb-lines{position:relative;width:18px;height:10px;display:inline-block}
.mb-lines i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)}
.mb-lines i:first-child{top:0}
.mb-lines i:last-child{top:8px}
.menu-btn[aria-expanded="true"] .mb-lines i:first-child{top:4px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .mb-lines i:last-child{top:4px;transform:rotate(-45deg)}
.menu .inner > a, .menu-sub > summary{
  font:400 22px/1.2 var(--serif);padding:16px 0;border-bottom:1px solid var(--hair-soft);color:var(--ink);
}
.menu .inner > a.cta{
  margin-top:18px;border:0;text-align:center;background:var(--green);color:var(--cream);
  font:500 16px/1 var(--sans);padding:17px;border-radius:var(--r-sm);
}
.menu-sub > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.menu-sub > summary::-webkit-details-marker{display:none}
.menu-sub > summary::after{content:"+";font:300 26px/1 var(--sans);color:var(--gold-ink);transition:transform .3s var(--ease)}
.menu-sub[open] > summary::after{transform:rotate(45deg)}
.menu-sub-list{display:flex;flex-direction:column;padding:6px 0 10px 14px;border-bottom:1px solid var(--hair-soft)}
.menu-sub-list a{font:400 17px/1.3 var(--sans);padding:11px 0;color:var(--t-body)}
.menu-note{margin:18px 0 0;font:400 15px/1.5 var(--sans);color:var(--t-mute);text-align:center}
.menu-note a{color:var(--green)}

@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .site-head.menu-open{transform:none}
}

/* ── Blog articles: structured reading ────────────────────────────────── */
.art-layout{display:block}
.toc{display:none}
.toc-k{font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);padding-bottom:14px;border-bottom:1px solid var(--hair-strong)}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc;border-bottom:1px solid var(--hair-soft)}
.toc a{
  display:grid;grid-template-columns:30px 1fr;gap:6px;padding:11px 0;
  font:400 15px/1.4 var(--sans);color:var(--t-mute);
  transition:color var(--t-control) var(--ease);
}
.toc a::before{content:counter(toc,decimal-leading-zero);font:500 13px/1.6 var(--mono);color:var(--gold-rule)}
.toc a:hover,.toc a[aria-current="true"]{color:var(--green)}
.toc a[aria-current="true"]{font-weight:500}
.toc-inline{margin:34px 0 0;border:1px solid var(--hair-strong);border-radius:var(--r-sm);background:var(--cream-card)}
.toc-inline > summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;justify-content:space-between;font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.toc-inline > summary::-webkit-details-marker{display:none}
.toc-inline > summary::after{content:"+";font:300 20px/.7 var(--sans)}
.toc-inline[open] > summary::after{content:"\2212"}
.toc-inline ol{padding:0 18px 10px}
.toc-inline .toc-k{display:none}

@container (min-width:1080px){
  .art-layout{
    display:grid;grid-template-columns:240px minmax(0,760px);gap:72px;justify-content:center;
  }
  .art-layout .measure{margin:0}
  .toc{display:block;position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow:auto}
  .toc-inline{display:none}
}

.art .prose{font-size:18px;line-height:1.78;counter-reset:h2}
.art .prose > p:first-child{font-size:20px;line-height:1.7;color:var(--ink)}
.art .prose p, .art .prose li{
  text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;
  hyphenate-limit-chars:7 3 3;
}
.art .prose h2{
  counter-increment:h2;
  margin:2.4em 0 .7em;padding-top:1.1em;border-top:1px solid var(--hair-strong);
  font:400 clamp(25px,2.6cqi,32px)/1.22 var(--serif);letter-spacing:-.01em;scroll-margin-top:96px;
}
.art .prose h2::before{
  content:counter(h2,decimal-leading-zero);display:block;margin-bottom:12px;
  font:500 13px/1 var(--mono);letter-spacing:.14em;color:var(--gold-ink);
}
.art .prose h3{margin:1.9em 0 .55em;font:500 20px/1.35 var(--sans);color:var(--ink);scroll-margin-top:96px}
.art .prose ul{list-style:none;padding-left:0}
.art .prose ul > li{position:relative;padding-left:1.4em}
.art .prose ul > li::before{content:"";position:absolute;left:.15em;top:.78em;width:7px;height:7px;border-radius:1px;background:var(--gold-rule);transform:rotate(45deg)}
.art .prose ol{padding-left:1.5em}
.art .prose ol > li::marker{font:500 15px var(--mono);color:var(--gold-ink)}
.art .prose .checklist > li::before{content:"✓";background:none;transform:none;width:auto;height:auto;top:0;left:0;color:var(--green);font:500 15px/1.78 var(--mono)}
.art .prose th{font-size:13px}
.art .prose td{font-size:16px;line-height:1.55;text-align:left;hyphens:manual}
.art .prose blockquote,.art .prose .pullquote{text-align:left}
.art .dek{font-size:clamp(19px,1.8cqi,22px);line-height:1.55}

/* Justified text needs width. Narrow columns get ragged-right instead of rivers. */
@container (max-width:640px){
  .art .prose p, .art .prose li{text-align:left;hyphens:manual}
  .art .prose{font-size:17.5px}
  .art .prose > p:first-child{font-size:19px}
}

/* ── Small screens: global fixes ──────────────────────────────────────── */
@media (max-width:700px){
  .btn{min-height:46px}
  .nav-dd{display:none}
  .crumbs{font-size:13px;row-gap:6px}
  .art .prose table{font-size:15px}
  .lp-faq-a{padding-left:0}
}
@media (prefers-reduced-motion:reduce){
  .site-head,.site-head .bar,.nav-dd,.dd-caret,.mb-lines i{transition:none}
  .site-head.is-hidden{transform:none}
}

/* ── Sticky fix ───────────────────────────────────────────────────────────
 * site.css gives .shell overflow-x:hidden, which turns it into a scroll
 * container. Sticky elements then stick to .shell (which never scrolls)
 * instead of the viewport, so the header and the article contents rail
 * scrolled away with the page. overflow-x:clip still hides sideways overflow
 * but creates no scroll container. Browsers without clip ignore this line
 * and keep the old behaviour. */
.shell{overflow-x:clip}

/* ── Mobile fixes from the Nov 2026 device pass ───────────────────────── */
@media (max-width:700px){
  /* Hero facts: three items in a two-column grid left an empty fourth cell
     painted in the grid's hairline colour. Let the odd last item span. */
  section[data-screen-label^="Home"] [style*="minmax(min(100%,150px)"] > :last-child:nth-child(odd){grid-column:1/-1}

  /* Tap targets: standalone links and controls get a 44px hit area.
     Inline links inside running text are left alone, as WCAG allows. */
  .menu-btn{min-height:44px;padding:10px 14px}
  .lp-link,.link-u,.dd-foot a,.rel-block a{display:inline-flex;align-items:center;min-height:44px}
  .lp-offer-name a{display:inline-block;padding:6px 0}
  .site-foot .col a{display:block;padding:9px 0}
  .site-foot .legal a{display:inline-block;padding:11px 2px}
  .toc a{padding:13px 0}

  /* Calendly needs roughly 320px to lay out its calendar. Give it the card's
     full width on phones. */
  .sched-embed{padding:4px 0 0;background:transparent}
  .sched-embed .cal-frame{width:100% !important;margin:0 !important}
}

/* Contact form fallback, shown when the form service fails or hangs. */
.form-fallback{margin-top:16px;padding:16px 18px;border:1px solid var(--gold-rule);border-radius:var(--r-sm);background:rgba(200,155,84,.10)}
.form-fallback p{margin:0 0 12px;font:400 16px/1.55 var(--sans);color:var(--ink)}
.form-fallback b{font-weight:600}
/* The contact section colours its links green, which also hit this button and
   left green text on a green fill. Restore the button's own colours. */
/* Green buttons inside the light form cards (email fallback and the "Request
   received" card) inherited green text and were unreadable. */
.form-fallback .btn.btn-green,#form-sent .btn.btn-green{color:var(--cream) !important;background:var(--green)}
.form-fallback .btn.btn-green:hover,#form-sent .btn.btn-green:hover{background:var(--forest-700)}

/* Footer: public profiles (LinkedIn, Clutch). Text labels in the site's own
   type rather than vendor logos. 44px tall for touch. */
.site-foot .foot-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.site-foot .foot-social a{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  font:500 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--light-ink);
  border:1px solid rgba(237,239,233,.28);border-radius:var(--r-sm);
  transition:color var(--t-control) var(--ease),border-color var(--t-control) var(--ease);
}
.site-foot .foot-social a:hover{color:var(--gold);border-color:var(--gold)}
.site-foot .foot-social a span{font-size:15px;line-height:1}