/* TMG AnchorPoint global site header - reused on the resource pages.
   Markup + values copied from the live /styles.css, but every rule is scoped
   under .site-header so it renders identically to the homepage header and
   cannot collide with each resource page's own self-contained styles.
   The ticker, once licensed, drops into .site-ticker directly below this header. */
.site-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #eee;font-family:"Open Sans","Segoe UI",Arial,sans-serif;}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;max-width:1320px;margin:0 auto;}
.site-header .brand{display:block;}
.site-header .brand img{width:190px;height:auto;aspect-ratio:3.55/1;max-width:62vw;display:block;}
.site-header .nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.site-header .nav-links>li{margin:0;}
.site-header .nav-links a{color:#444547;font-weight:700;font-size:.98rem;text-decoration:none;}
.site-header .nav-links a:hover{color:#D55C19;text-decoration:none;}
.site-header .has-drop{position:relative;padding-bottom:4px;}
.site-header .dropdown{position:absolute;top:100%;left:0;background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:0 18px 40px rgba(40,40,40,.14);padding:10px;min-width:230px;display:none;z-index:1001;}
.site-header .has-drop:hover .dropdown,.site-header .has-drop:focus-within .dropdown,.site-header .has-drop.open .dropdown{display:block;}
.site-header .dropdown a{display:block;padding:10px 14px;border-radius:8px;font-weight:700;}
.site-header .dropdown a:hover{background:#FAF9F7;color:#D55C19;}
.site-header .nav-cta{display:flex;align-items:center;gap:12px;}
.site-header .nav-cta .cta{display:inline-block;font-weight:800;font-size:1rem;line-height:1;padding:14px 26px;border-radius:999px;background:#D55C19;color:#fff;text-decoration:none;border:2px solid transparent;white-space:nowrap;transition:background .15s ease,transform .08s ease;}
.site-header .nav-cta .cta:hover{background:#B44A12;color:#fff;transform:translateY(-2px);text-decoration:none;}
.site-header .menu-toggle{display:none;background:none;border:0;font-size:1.7rem;line-height:1;cursor:pointer;color:#444547;}
@media (max-width:900px){
  .site-header .nav{position:relative;flex-wrap:wrap;}
  .site-header .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:16px 24px;border-bottom:1px solid #eee;gap:14px;z-index:1001;}
  .site-header .nav-links.open{display:flex;}
  .site-header .dropdown{position:static;display:none;box-shadow:none;border:0;padding:6px 0 6px 12px;min-width:0;}
.site-header .has-drop:hover .dropdown,.site-header .has-drop:focus-within .dropdown{display:none;}
.site-header .has-drop.open .dropdown{display:block;}
  .site-header .menu-toggle{display:block;}
  .site-header .nav-cta{display:none;}
}
@media (max-width:560px){ .site-header .brand img{width:150px;} }

/* ============================================================
   Anchor point marker. Shows where a page sits in the sequence.
   Duplicated verbatim in /styles.css and /assets/site-header.css
   because the two page families load different stylesheets.
   Literal hex, no custom properties: the two families name their
   variables differently.
   ============================================================ */
.ap-mark{margin:34px 0 30px;padding:22px 24px 20px;background:#FAF9F7;border:1px solid #E7E4DC;
  border-left:5px solid #D55C19;border-radius:12px;}
.ap-mark .ap-eyebrow{margin:0 0 12px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:#63666A;line-height:1.4;}
.ap-mark .ap-dots{list-style:none;margin:0 0 14px;padding:0;display:flex;align-items:center;gap:26px;}
.ap-mark .ap-dots li{position:relative;width:9px;height:9px;border-radius:50%;background:#DAD7CB;flex:0 0 auto;}
.ap-mark .ap-dots li:not(:last-child):after{content:"";position:absolute;left:100%;top:50%;width:26px;
  height:2px;margin-top:-1px;background:#DAD7CB;}
.ap-mark .ap-dots li.on{width:15px;height:15px;background:#D55C19;box-shadow:0 0 0 4px rgba(213,92,25,.16);}
.ap-mark .ap-dots li.lit{background:#D55C19;}
.ap-mark .ap-dots li.bridge:after{background:transparent;border-top:2px dashed #D55C19;height:0;}
.ap-mark .ap-name{margin:0 0 7px;font-size:1.34rem;font-weight:800;line-height:1.15;color:#444547;
  letter-spacing:-.01em;}
.ap-mark .ap-say{margin:0 0 14px;font-size:1rem;line-height:1.6;color:#444547;}
.ap-mark .ap-around{margin:0;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.88rem;color:#63666A;
  line-height:1.5;}
.ap-mark .ap-around b{font-weight:700;color:#63666A;}
.ap-mark .ap-around a{color:#D55C19;font-weight:700;}
.ap-mark .ap-around a{text-decoration:none;border-bottom:1px solid rgba(213,92,25,.38);}
.ap-mark .ap-around a:hover{border-bottom-color:#D55C19;}
@media (max-width:560px){
  .ap-mark{padding:20px 18px 18px;}
  .ap-mark .ap-dots{gap:19px;}
  .ap-mark .ap-dots li:not(:last-child):after{width:19px;}
  .ap-mark .ap-around{gap:6px 18px;}
}

/* Anchor targets clear the sticky header. */
[id]{scroll-margin-top:88px;}


/* ---------- Tool rail ----------
   Duplicated from styles.css on purpose. The resource pages load this file and
   not styles.css, and this file declares no custom properties, so the brand
   values are literal here. 46 of the 52 pages carrying a tool rail are served
   by this stylesheet; without this block they would render an unstyled list.
   Values must track /root/build/anchorpoint-site/styles.css. */
.tool-rail{background:#FAF9F7;border:1px solid #DAD7CB;border-left:4px solid #D55C19;
  border-radius:12px;padding:22px 26px 18px;margin:34px auto;max-width:1180px;}
.tool-rail h3{font-size:1.05rem;margin:0 0 12px;color:#444547;font-weight:800;}
.tool-rail ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.tool-rail li{margin:0;}
.tool-rail ul a{display:block;height:100%;text-decoration:none;color:inherit;padding:9px 12px;border-radius:9px;
  background:#fff;border:1px solid #DAD7CB;}
.tool-rail ul a:hover{border-color:#D55C19;text-decoration:none;}
.tool-rail ul a b{display:block;font-weight:800;color:#D55C19;font-size:1rem;line-height:1.3;}
.tool-rail ul a span{display:block;font-size:.94rem;color:#63666A;line-height:1.5;margin-top:2px;}
.tool-rail-foot a{color:#D55C19;font-weight:700;text-decoration:underline;background:none;border:0;padding:0;display:inline;}
.tool-rail-foot{margin:14px 0 0;font-size:.9rem;color:#63666A;}
@media (min-width:760px){ .tool-rail ul{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));} }
@media (max-width:560px){ .tool-rail{padding:18px 18px 14px;margin:26px auto;border-radius:10px;} }


/* Eyebrow on dark surfaces. TMG Orange at this size measures 3.78:1 on the hero
   and 2.46:1 on Charcoal, against the 4.5:1 that normal text requires. No orange
   in the palette reaches 4.5:1 on any brand surface, so this is not a question of
   picking a better orange. The eyebrow is a wayfinding label, not the mark, so it
   goes white on dark and orange stays where the guide puts it: the word Point,
   the buttons, and the live anchor point. Blake approved 2026-08-17. */
.bg-dark .eyebrow,.heroimg-seq .eyebrow{color:#FFFFFF;opacity:.92;}