/* ============================================================
   TMG AnchorPoint Mortgage - Sprint 1 site styles
   Visual direction: bold and confident (full-color blocks, large type)
   Brand: TMG Orange #D55C19, AnchorPoint Grey #444547, TMG Grey #63666A
   Font: Open Sans (approved web fallback for Slate Pro)
   ============================================================ */

:root{
  --orange:#D55C19;
  --orange-dark:#B44A12;
  --ht-grey:#444547;
  --tmg-grey:#63666A;
  --white:#FFFFFF;
  --ink:#2B2C2D;
  --paper:#FAF9F7;
  --yellow:#F4E5B1;
  --taupe:#DAD7CB;
  --green:#ABC380;
  --blue:#A0D0CB;
  --maxw:1180px;
  --radius:14px;
  --shadow:0 18px 40px rgba(40,40,40,.14);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Open Sans","Segoe UI",Arial,sans-serif;
  color:var(--ht-grey);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--orange);text-decoration:none;}
a:hover{text-decoration:underline;}

h1,h2,h3{font-weight:800;line-height:1.08;color:var(--ht-grey);margin:0 0 .4em;letter-spacing:-.01em;}
h1{font-size:clamp(2.4rem,5.2vw,4rem);}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);}
h3{font-size:clamp(1.2rem,2vw,1.5rem);}
p{margin:0 0 1.1em;}
.eyebrow{
  text-transform:uppercase;letter-spacing:.16em;font-weight:800;
  font-size:.8rem;color:var(--orange);margin:0 0 .8rem;display:block;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.lead{font-size:1.2rem;max-width:46ch;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-weight:800;font-size:1.02rem;
  padding:16px 30px;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:transform .08s ease, background .15s ease;
  text-decoration:none;line-height:1;
}
.btn:hover{text-decoration:none;transform:translateY(-2px);}
.btn-primary{background:var(--orange);color:#fff;}
.btn-primary:hover{background:var(--orange-dark);color:#fff;}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);}
.btn-ghost:hover{background:#fff;color:var(--ht-grey);}
.btn-dark{background:var(--ht-grey);color:#fff;}
.btn-dark:hover{background:#2f3032;color:#fff;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:8px;}

/* ---------- Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eee;}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;max-width:1320px;margin:0 auto;}
.brand img{width:190px;height:auto;aspect-ratio:3.55/1;}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.nav-links a{color:var(--ht-grey);font-weight:700;font-size:.98rem;}
.nav-links a:hover{color:var(--orange);text-decoration:none;}
.nav-cta{display:flex;align-items:center;gap:12px;}
.has-drop{position:relative;}
.has-drop{padding-bottom:4px;}
.dropdown{
  position:absolute;top:100%;left:0;background:#fff;border:1px solid #eee;border-radius:12px;
  box-shadow:var(--shadow);padding:10px;min-width:250px;display:none;z-index:60;
}
.has-drop:hover .dropdown,.has-drop:focus-within .dropdown,.has-drop.open .dropdown{display:block;}
.dropdown a{display:block;padding:10px 14px;border-radius:8px;}
.dropdown a:hover{background:var(--paper);}
.menu-toggle{display:none;background:none;border:0;font-size:1.7rem;cursor:pointer;color:var(--ht-grey);}

/* ---------- Sections / color blocks ---------- */
.section{padding:88px 0;}
.section-tight{padding:60px 0;}
.bg-white{background:#fff;}
.bg-paper{background:var(--paper);}
.bg-dark{background:var(--ht-grey);color:#f2f2f2;}
.bg-dark h1,.bg-dark h2,.bg-dark h3{color:#fff;}
.bg-orange{background:var(--orange);color:#fff;}
.bg-orange h1,.bg-orange h2,.bg-orange h3{color:#fff;}
.bg-orange .eyebrow{color:#ffe3cf;}
/* 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;}
.bg-yellow{background:var(--yellow);}
.bg-blue{background:var(--blue);}
.bg-green{background:var(--green);}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
  padding-top:96px;padding-bottom:96px;}  /* vertical only: .wrap supplies the 24px side gutter */
.hero h1{margin-bottom:.25em;}
.hero .lead{color:inherit;opacity:.96;}
.hero-art{
  min-height:320px;border-radius:var(--radius);background:
   linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,0)),
   repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0 18px,rgba(0,0,0,0) 18px 36px);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);
  font-weight:700;text-align:center;padding:24px;border:1px dashed rgba(255,255,255,.35);
}
.trust-line{margin-top:18px;font-weight:700;opacity:.95;}

/* ---------- Hero graphics ----------
   The site previously opened on two stock harbour photographs. The brand was
   renamed to get away from that association, and the verbal identity forbids
   harbour, mooring and sailing language, so the pictures were arguing against
   the words. These replace them.

   Each hero draws that page's own anchor-point sequence: fixed marks along a
   forward line, one of them live. Private lending gets a broken run, because
   the page's argument is that private capital is the crossing between two
   points rather than a point itself. Investors get two runs at once.

   SVG, so it is sharp at any size, about 2.5KB each, and owned outright.
   Generated by /root/build/ap/herogen.py. */
.heroimg-seq{background-color:#26282C;background-repeat:no-repeat;
  background-size:cover;background-position:center right;}
/* One column, and the headline gets the full container width. Capping the whole
   block at 820px forced long headlines into four lines and left a third of the
   canvas empty on desktop. Body copy is still held to a readable measure below. */
.heroimg-seq .hero-inner{grid-template-columns:1fr;max-width:var(--maxw);}
.heroimg-seq .lead{max-width:34em;}
.heroimg-seq .hero-sub{max-width:40em;}
.heroimg-seq .hero-art{display:none;}
.hero-brand{background-image:url('/assets/hero/hero-seq-brand.svg?v=9ea277c5');}
.hero-household{background-image:url('/assets/hero/hero-seq-household.svg?v=f9868221');}
.hero-owner{background-image:url('/assets/hero/hero-seq-owner.svg?v=9ea277c5');}
.hero-project{background-image:url('/assets/hero/hero-seq-project.svg?v=f9868221');}
.hero-investor{background-image:url('/assets/hero/hero-seq-investor.svg?v=212b0b94');}
.hero-crossing{background-image:url('/assets/hero/hero-seq-crossing.svg?v=0389a6b3');}
/* Phones: the copy runs the full width, so the art is pushed into the bottom
   right corner rather than sitting behind it. The SVG canvas is transparent and
   its scrim is the same #26282C, so the image edge never reads as a seam. */
@media (max-width:700px){ .heroimg-seq{background-position:right bottom;background-size:115% auto;} }

/* real photo in an orange/coloured hero's art slot */
.hero-photo{width:100%;height:100%;min-height:340px;object-fit:cover;border-radius:var(--radius);display:block;box-shadow:0 18px 40px rgba(40,40,40,.22);}

/* ---------- Trust strip ----------
   A thin band, not four content cards. White cards on a white section needed a
   shadow to read at all, and that chrome cost most of a phone screen for four
   short claims. Rule on top, no box, two columns on mobile. */
.trust-band{padding:44px 0;}
.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 30px;margin:0;padding:0;}
.trust-strip li{list-style:none;font-weight:700;font-size:.95rem;line-height:1.5;
  color:var(--ht-grey);margin:0;padding:13px 0 0;border-top:3px solid var(--orange);}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin-top:36px;}
.cards.cards-5{grid-template-columns:repeat(5,1fr);align-items:start;}
.cards.cards-5 .card{padding:24px;}
.cards.cards-6{grid-template-columns:repeat(3,1fr);align-items:start;}
.cards-5 .card p,.cards-6 .card p{flex:initial;}
@media (max-width:1000px){.cards.cards-5,.cards.cards-6{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.cards.cards-5,.cards.cards-6{grid-template-columns:1fr;}}
.card{background:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);display:flex;flex-direction:column;border-top:6px solid var(--orange);}
.card h3{margin-bottom:.4em;}
/* cards always have a white background, so keep their headings dark even inside coloured sections */
.bg-dark .card h3,.bg-orange .card h3,.bg-green .card h3,.bg-blue .card h3{color:var(--ht-grey);}
.card p{color:var(--tmg-grey);flex:1;}
.card .btn{align-self:flex-start;margin-top:10px;}
.card .tag{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--orange);margin-bottom:10px;}

/* color accents per card (bold treatment) */
.card.c1{border-top-color:var(--orange);}
.card.c2{border-top-color:var(--ht-grey);}
.card.c3{border-top-color:var(--blue);}
.card.c4{border-top-color:var(--green);}
.card.c5{border-top-color:var(--tmg-grey);}

/* ---------- "Not sure?" full-width routing banner ---------- */
.notsure{display:flex;align-items:center;justify-content:space-between;gap:28px;background:var(--ht-grey);color:#fff;border-radius:var(--radius);padding:30px 34px;margin-top:22px;flex-wrap:wrap;box-shadow:var(--shadow);}
.notsure>div{flex:1;min-width:280px;}
.notsure .tag{color:#ffd9c2;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;display:block;margin-bottom:8px;}
.notsure h3{color:#fff;margin:0 0 6px;}
.notsure p{color:#e3e1dc;margin:0;max-width:70ch;}
.notsure .btn{flex-shrink:0;}

/* ---------- Feature lists / steps ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.checklist{list-style:none;margin:0;padding:0;}
.checklist li{padding:12px 0 12px 38px;position:relative;border-bottom:1px solid rgba(0,0,0,.08);font-weight:600;}
.checklist li:before{content:"";position:absolute;left:0;top:18px;width:18px;height:18px;border-radius:50%;background:var(--orange);}
.bg-dark .checklist li{border-bottom-color:rgba(255,255,255,.14);}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;margin-top:30px;counter-reset:step;}
.step{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:24px;}
.bg-paper .step,.bg-white .step{background:#fff;border-color:#eee;box-shadow:0 8px 22px rgba(40,40,40,.06);}
.step .num{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;margin-bottom:12px;}
.step h3{font-size:1.1rem;}

/* ---------- Two-option (talk vs apply) ---------- */
.options{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px;}
.option{background:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);border-top:6px solid var(--ht-grey);}
.option.primary{border-top-color:var(--orange);}

/* ---------- Form section ---------- */
.formband{background:var(--paper);}
.form-shell{max-width:760px;margin:0 auto;background:#fff;border-radius:var(--radius);padding:36px;box-shadow:var(--shadow);}
.form-note{font-size:.9rem;color:var(--tmg-grey);margin-top:14px;}
.pipedriveWebForms{min-height:120px;}

/* ---------- CTA band ---------- */
.cta-band{text-align:center;}
.cta-band .btn{margin-top:10px;}

/* ---------- Testimonial placeholders ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:30px;}
.quote{background:#fff;border-left:5px solid var(--orange);border-radius:10px;padding:26px;box-shadow:0 8px 22px rgba(40,40,40,.06);}
.placeholder{outline:2px dashed #c9c4ba;background:repeating-linear-gradient(45deg,#f3f0ea 0 12px,#fbfaf7 12px 24px);color:#8a857b;border-radius:10px;padding:20px;font-weight:700;text-align:center;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ht-grey);color:#d9d9d9;padding:60px 0 30px;}
.site-footer a{color:#f0d6c4;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;}
.foot-brand .wordmark{font-weight:800;font-size:1.35rem;color:#fff;letter-spacing:-.01em;}
.site-footer h4{color:#fff;font-size:.95rem;text-transform:uppercase;letter-spacing:.12em;margin:0 0 14px;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:10px;}
.licence{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);font-size:.85rem;color:#b7b7b7;}
/* internal review flags are hidden from the public build (entity/licence now confirmed) */
.flag{display:none !important;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;padding-top:64px;padding-bottom:64px;}
  .hero-art{min-height:200px;}
  .split,.options{grid-template-columns:1fr;gap:28px;}
  .trust-band{padding:36px 0;}
  .trust-strip{grid-template-columns:1fr 1fr;gap:14px 24px;}
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:16px 24px;border-bottom:1px solid #eee;gap:14px;}
  .nav-links.open{display:flex;}
  .dropdown{position:static;display:none;box-shadow:none;border:0;padding:6px 0 6px 12px;min-width:0;}
.has-drop:hover .dropdown,.has-drop:focus-within .dropdown{display:none;}
.has-drop.open .dropdown{display:block;}
  .menu-toggle{display:block;}
  .section{padding:60px 0;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px;}
}
@media (max-width:560px){
  .trust-strip{gap:13px 18px;}
  .trust-strip li{font-size:.9rem;padding-top:11px;}
  .brand img{width:150px;}
  .foot-grid{grid-template-columns:1fr;gap:24px;}
  .notsure .btn{width:100%;text-align:center;white-space:normal;}
  .btn{max-width:100%;white-space:normal;}
}

/* Brand line: the tagline is three sentences, one per line. Blocks rather than
   inline-blocks, so the rhythm holds at any width instead of depending on the
   container being narrow enough to force the breaks. */
h1.brandline>span{display:block;}

/* Snapshot note: the AnchorPoint proposition, used on renewal and review pages only. */
.snapshot-note{background:#FBEEE4;border-left:4px solid #D55C19;border-radius:8px;
  padding:16px 18px;margin:22px 0;}
.snapshot-note p{margin:0;}

/* ---------- Tool rail ----------
   Eleven calculators sit in the nav and were linked from every page. The other
   sixteen were reachable only from the /tools/ grid, so a reader on the stress
   test page never found the affordability calculator. This puts the two or
   three tools that answer a page's question inside that page, once, under the
   opening section. Placed by /root/build/ap/crosslink.py. */
.tool-rail{background:var(--paper);border:1px solid var(--taupe);border-left:4px solid var(--orange);
  border-radius:12px;padding:22px 26px 18px;margin:34px auto;max-width:var(--maxw);}
.tool-rail h3{font-size:1.05rem;margin:0 0 12px;color:var(--ht-grey);}
.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 var(--taupe);}
.tool-rail ul a:hover{border-color:var(--orange);text-decoration:none;}
.tool-rail ul a b{display:block;font-weight:800;color:var(--orange);font-size:1rem;line-height:1.3;}
.tool-rail ul a span{display:block;font-size:.94rem;color:var(--tmg-grey);line-height:1.5;margin-top:2px;}
.tool-rail-foot a{color:var(--orange);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:var(--tmg-grey);}
@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;} }

/* ---------- AnchorPoint journey rails (homepage, /our-approach/, /name-change/) ---------- */
.ap-track{margin-top:38px;}
.ap-track .ap-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.ap-track .ap-h b{font-size:1.18rem;color:var(--ht-grey);}
.ap-track .ap-h span{font-size:.94rem;color:var(--tmg-grey);}
.ap-rail{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:relative;}
.ap-rail:before{content:"";position:absolute;left:12px;right:0;top:11px;height:3px;
  background:linear-gradient(90deg,var(--taupe) 0%,var(--orange) 70%,rgba(213,92,25,0) 100%);border-radius:3px;}
.ap-rail li{position:relative;padding:38px 16px 0 0;}
.ap-rail li:before{content:"";position:absolute;top:0;left:6px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:4px solid var(--orange);box-shadow:0 0 0 4px #fff;}
.ap-rail li b{display:block;font-size:.98rem;color:var(--ht-grey);line-height:1.3;}
.ap-rail li span{display:block;margin-top:5px;font-size:.85rem;color:var(--tmg-grey);line-height:1.5;}
.bg-paper .ap-rail li:before{box-shadow:0 0 0 4px var(--paper);}
@media (max-width:900px){
  .ap-rail{grid-auto-flow:row;grid-auto-columns:auto;}
  .ap-rail:before{left:11px;right:auto;top:12px;bottom:0;width:3px;height:auto;
    background:linear-gradient(180deg,var(--taupe) 0%,var(--orange) 70%,rgba(213,92,25,0) 100%);}
  .ap-rail li{padding:0 0 22px 40px;}
  .ap-rail li:before{top:2px;left:4px;}
  .ap-rail li:last-child{padding-bottom:0;}
}

/* ============================================================
   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.
   ============================================================ */
/* Checklist variant for full-sentence items: bold lead-in, normal body. */
.checklist.checklist-prose li{font-weight:400;line-height:1.6;}
.checklist.checklist-prose li b{font-weight:800;color:var(--ht-grey);}
/* Map-your-anchor-points call to action, sits directly under the rails. */
/* The investor sequence rarely runs once. Two ghosted runs sit behind the live
   rail so the diagram says what the label says. Desktop only: the mobile rail is
   vertical and the ghosts would read as clutter. */
.ap-track.ap-parallel .ap-rail:after{
  content:"";position:absolute;left:12px;right:0;top:4px;height:16px;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(213,92,25,.26) 0%,rgba(213,92,25,.30) 70%,rgba(213,92,25,0) 100%) left top/100% 2px no-repeat,
    linear-gradient(90deg,rgba(213,92,25,.16) 0%,rgba(213,92,25,.20) 70%,rgba(213,92,25,0) 100%) left bottom/100% 2px no-repeat;
}
@media (max-width:900px){ .ap-track.ap-parallel .ap-rail:after{display:none;} }
/* Compact sequence cards. The homepage names the four sequences and shows the
   dot device; /our-approach/ carries the full seven points for each one. */
/* Who works on your file: three functions, real names, one face strip. */
/* Hero: a differentiating line, then the smaller qualifying line. */
.hero-sub{margin:14px 0 0;max-width:60ch;font-size:.98rem;line-height:1.65;opacity:.82;}
.hero .btn-row{margin-top:26px;}

.team-split{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:34px;}
.team-col h3{font-size:1.12rem;margin:0 0 12px;padding-bottom:10px;border-bottom:3px solid var(--orange);display:inline-block;}
/* One <li> per person with a hanging indent, so a title that wraps sits under
   its own name instead of reading as a separate person. */
.team-col .who{margin:0 0 14px;padding:0;list-style:none;line-height:1.5;
  font-size:.98rem;color:var(--ht-grey);}
.team-col .who li{margin:0 0 9px;padding-left:15px;text-indent:-15px;}
.team-col .who li:last-child{margin-bottom:0;}
.team-col .who b{font-weight:800;}
.team-col .does{margin:0;font-size:.93rem;color:var(--tmg-grey);line-height:1.6;}
.team-strip{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:34px;padding-top:24px;
  border-top:1px solid var(--taupe);}
.team-strip .faces{display:flex;}
.team-strip .faces img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:center top;
  border:3px solid #fff;box-shadow:0 2px 8px rgba(40,40,40,.14);margin-left:-14px;}
.team-strip .faces img:first-child{margin-left:0;}
.team-strip p{margin:0;font-size:.98rem;color:var(--tmg-grey);}
@media (max-width:900px){ .team-split{grid-template-columns:1fr;gap:26px;} }
@media (max-width:560px){ .team-strip .faces img{width:42px;height:42px;margin-left:-12px;} }

.ap-minis{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px;}
.ap-mini{display:block;background:#fff;border:1px solid var(--taupe);border-radius:12px;
  padding:20px 22px 18px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;}
.ap-mini:hover{border-color:var(--orange);box-shadow:0 10px 26px rgba(40,40,40,.08);
  transform:translateY(-2px);text-decoration:none;}
.ap-mini .dots{display:flex;align-items:center;gap:14px;margin:2px 0 15px;height:12px;position:relative;}
.ap-mini .dots i{width:8px;height:8px;border-radius:50%;background:var(--taupe);position:relative;flex:0 0 auto;}
.ap-mini .dots i:not(:last-child):after{content:"";position:absolute;left:100%;top:50%;width:14px;
  height:2px;margin-top:-1px;background:var(--taupe);}
.ap-mini .dots i:first-child{width:12px;height:12px;background:var(--orange);box-shadow:0 0 0 3px rgba(213,92,25,.15);}
.ap-mini:hover .dots i{background:rgba(213,92,25,.45);}
.ap-mini:hover .dots i:not(:last-child):after{background:rgba(213,92,25,.35);}
.ap-mini:hover .dots i:first-child{background:var(--orange);}
/* the investor sequence runs more than once at a time */
.ap-mini-par .dots:after{content:"";position:absolute;left:3px;right:6px;top:-5px;height:19px;pointer-events:none;
  background:linear-gradient(90deg,rgba(213,92,25,.40),rgba(213,92,25,.10) 82%,rgba(213,92,25,0)) left top/100% 2px no-repeat,
             linear-gradient(90deg,rgba(213,92,25,.26),rgba(213,92,25,.06) 82%,rgba(213,92,25,0)) left bottom/100% 2px no-repeat;}
.ap-mini h3{font-size:1.06rem;margin:0 0 6px;line-height:1.2;}
.ap-mini .blurb{font-size:.88rem;color:var(--tmg-grey);margin:0 0 10px;line-height:1.5;}
.ap-mini .span{font-size:.93rem;color:var(--ht-grey);margin:0;line-height:1.55;}
@media (max-width:1000px){.ap-minis{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.ap-minis{grid-template-columns:1fr;gap:16px;}}

.ap-mapcta{margin-top:40px;padding-top:26px;border-top:1px solid var(--taupe);
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;}
.ap-mapcta p{margin:0;max-width:52ch;font-size:1.05rem;color:var(--ht-grey);}
.bg-dark .ap-mapcta p{color:#fff;}
@media (max-width:700px){ .ap-mapcta{display:block;} .ap-mapcta .btn{margin-top:16px;} }

/* Brand wordmark in display type: Anchor in charcoal, Point in TMG orange, as the logo. */
.ap-word b{font-weight:inherit;color:var(--orange);}
/* The brand spec assigns TMG Orange to the word Point, so it stays #D55C19 on every
   background. Measured against the night hero it reads 4.54:1, which clears AA for
   normal text and comfortably clears it at headline size, so no tint is warranted. */
.ap-rail li a{color:inherit;text-decoration:none;display:block;}
.ap-rail li a:hover b{color:#D55C19;text-decoration:underline;}
.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;}
}

.route-note{background:#fff;border:1px solid var(--taupe);border-left:4px solid var(--orange);
  border-radius:12px;padding:22px 26px;margin-top:26px;max-width:76ch;}
.route-note p{margin:0;line-height:1.65;color:var(--tmg-grey);}
.route-note p + p{margin-top:10px;}
.route-note b{color:var(--ht-grey);}

.ap-forward{margin:18px 0 0;padding-left:16px;border-left:3px solid var(--orange);
  font-size:1.02rem;line-height:1.6;color:var(--tmg-grey);max-width:70ch;}
.ap-forward a{font-weight:700;}

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