/* =====================================================================
   site-polish.css  —  global cross-page fixes
   Loaded last on every page so it wins the cascade. Scoped to <main>
   so it never touches the header / footer / chat widget.
   ---------------------------------------------------------------------
   1. Headlines: balance lines everywhere; cap size in split-layout
      sections so they stop wrapping to 4-6 lines with orphaned words.
   2. Chip / tag rows: retire the heavy outlined-pill look.
   3. Keep section content clear of the fixed "Ask Direct" button.
   ===================================================================== */

/* ---- 1. HEADLINES --------------------------------------------------- */

/* Never orphan the last word of a heading. Cheap, safe, universal. */
main h1,
main h2,
main h3 {
  text-wrap: balance;
}

/* Split-layout section headings (image on one side, copy on the other)
   were using full-bleed hero sizes inside a half-width column. Cap them. */
main :is(
  .sv-chapter, .sv-promise, .sv-az, .sv-matters, .sv-responsibilities,
  .hiw-step, .hiw-customer, .hiw-manage,
  .ind-feature, .ind-signals, .ind-fit-signals, .ind-assessment, .ind-service,
  .why-pov, .why-difference, .why-local, .why-response, .why-chain, .why-partnership, .why-fit,
  .hp-real-life, .hp-managed-story,
  .lx-section, .lx-essential-faqs, .lx-belief-section, .lx-company-values,
  .lx-partner-model, .lx-process-showcase
) :is(h1, h2) {
  font-size: clamp(2rem, 3vw, 3.25rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
}

/* Split-layout heroes (FAQ, and anything using the shared cinematic hero
   with a text column beside media). Slightly larger than a body section,
   but not the full-bleed 6rem treatment. */
main :is(.lx-page-hero, .faq-hero, .sv-hero, .ind-hero, .why-hero, .hiw-hero, .ct-hero) :is(h1, h2) {
  font-size: clamp(2.4rem, 4vw, 4rem) !important;
  line-height: 1.06 !important;
}

/* Home body sections: the serif title in a narrow column */
main .hp-section .hp-title {
  font-size: clamp(2rem, 3vw, 3.25rem) !important;
  line-height: 1.1 !important;
}

/* ---- 2. CHIP / TAG ROWS ------------------------------------------- */

/* Container: keep the flow, drop the "toolbar" feel */
main :is(.ind-tags, .hp-motion-tags, .sv-tags, .ct-tags, .why-tags) {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin: 1.4rem 0;
  padding: 0;
  list-style: none;
}

/* Each tag: a quiet label with a gold tick, not an outlined pill */
main :is(.ind-tags, .hp-motion-tags, .sv-tags, .ct-tags, .why-tags) > * {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #3b3b30 !important;
  font: 700 .64rem/1.4 Inter, Arial, sans-serif !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: color .2s ease;
}
main :is(.ind-tags, .hp-motion-tags, .sv-tags, .ct-tags, .why-tags) > *::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d9b36d;
  transform: translateY(-1px);
  transition: background-color .2s ease, transform .2s ease;
}
/* hover: quiet lift of the label + a brighter, larger tick */
main :is(.ind-tags, .hp-motion-tags, .sv-tags, .ct-tags, .why-tags) > *:hover {
  color: #60941a !important;
}
main :is(.ind-tags, .hp-motion-tags, .sv-tags, .ct-tags, .why-tags) > *:hover::before {
  background: #2f6400;
  transform: translateY(-1px) scale(1.4);
}
@media (prefers-reduced-motion: reduce) {
  main :is(.ind-tags, .hp-motion-tags, .sv-tags, .ct-tags, .why-tags) > *,
  main :is(.ind-tags, .hp-motion-tags, .sv-tags, .ct-tags, .why-tags) > *::before {
    transition: none;
  }
  main :is(.ind-tags, .hp-motion-tags, .sv-tags, .ct-tags, .why-tags) > *:hover::before {
    transform: none;
  }
}
/* on genuinely dark section backgrounds, lift the text */
main :is(section[class*="graphite"], section[class*="ink"], section[class*="dark"], section[class*="night"]) :is(.ind-tags, .sv-tags, .hp-motion-tags, .why-tags, .ct-tags) > * {
  color: #d7dcd3 !important;
}
/* ...and on dark, hover brightens to lime rather than the dark green */
main :is(section[class*="graphite"], section[class*="ink"], section[class*="dark"], section[class*="night"]) :is(.ind-tags, .sv-tags, .hp-motion-tags, .why-tags, .ct-tags) > *:hover {
  color: #cbf24d !important;
}

/* ---- 3. CLEAR THE FIXED CHAT BUTTON ----------------------------- */
/* The "Ask Direct" bubble is ~210x76 px, fixed bottom-right. On wide
   screens, hold multi-column grids and checklists off that corner so
   their last cell never scrolls underneath it. */
@media (min-width: 1080px) {
  main :is(
    .sv-service-grid, .sv-az-system, .sv-matter-grid, .sv-process-grid,
    .ind-explorer-grid, .ind-mosaic-grid, .ind-proof-grid,
    .hp-trust-grid, .hp-timeline,
    .why-difference, .why-compare,
    .hiw-step ul, .sv-chapter ul, .ind-feature ul, .why-fit ul, .faq-list
  ) {
    padding-right: clamp(1.25rem, 6vw, 200px);
  }
}

/* =====================================================================
   Homepage — "Direct ATM Services at a glance" (.hp-std)
   "By the numbers" band: a rounded dark panel straddling the black/cream
   seam, a green light-bar along its top edge, a serif kicker, then one
   gold serif figure per stat over a short lime rule with a 2-line
   uppercase caption. Full-height hairline dividers between.
   The previous icon-ring version is preserved verbatim in
   hp-std-legacy-backup.css (not linked) — see that file to restore.
   ===================================================================== */
main .hp-std{
  padding:clamp(1.4rem,2.8vw,2.1rem) 0 clamp(1.6rem,3.2vw,2.5rem);
  /* split ground: black up top, Partner Locations cream below — the
     (opaque) panel straddles the seam */
  background:linear-gradient(180deg,#060706 0%,#060706 72%,#faf8ee 72%,#faf8ee 100%);
}
main .hp-std .hp-shell{width:min(calc(100% - 40px),1240px);margin-inline:auto}
main .hp-std-kicker{
  margin:0 0 clamp(1rem,2vw,1.5rem);
  text-align:center;color:#c7c4b6;
  font:400 clamp(1rem,1.5vw,1.25rem)/1.3 Georgia,"Times New Roman",serif;
  font-style:italic;letter-spacing:.005em;
}
main .hp-std-strip{
  position:relative;
  display:grid;grid-template-columns:repeat(5,1fr);
  margin:0;list-style:none;
  padding:clamp(1.5rem,2.6vw,2.15rem) clamp(.5rem,1.6vw,1.1rem);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  /* opaque dark base FIRST so the panel is solid regardless of what sits
     behind it, then the subtle glow + sheen on top */
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(127,181,66,.09), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 55%),
    #0b0c0a;
  /* green light pooling under the panel, grounded by a soft dark shadow */
  box-shadow:
    0 34px 62px -26px rgba(127,181,66,.4),
    0 14px 34px -20px rgba(0,0,0,.55);
}
/* a faint green highlight along the panel's top edge */
main .hp-std-strip::before{
  content:"";position:absolute;left:50%;top:-1px;transform:translateX(-50%);
  width:min(44%,500px);height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(150,200,80,.55) 28%,rgba(190,224,140,.9) 50%,rgba(150,200,80,.55) 72%,transparent);
  box-shadow:0 0 10px 1px rgba(140,200,70,.18);
}

main .hp-std-strip li{
  position:relative;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.1rem;
  padding:.2rem clamp(.6rem,1.5vw,1.2rem);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
main .hp-std-strip li + li::before{
  content:"";position:absolute;left:0;top:6%;bottom:6%;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.14) 22%,rgba(255,255,255,.14) 78%,transparent);
}
main .hp-std-fig{
  color:#d9b36d;
  font:400 clamp(2rem,3.4vw,2.9rem)/1 Georgia,"Times New Roman",serif;
  letter-spacing:-.02em;
  transition:color .3s ease,text-shadow .3s ease;
}
main .hp-std-fig::after{
  content:"";display:block;width:22px;height:2px;
  margin:.55rem auto .6rem;border-radius:2px;
  background:#8fbd4f;
  transition:width .3s cubic-bezier(.2,.7,.3,1),background-color .3s ease,box-shadow .3s ease;
}
main .hp-std-label{
  color:#ddd9cd;
  font:600 clamp(.62rem,.78vw,.72rem)/1.5 Inter,Manrope,Arial,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;
  transition:color .3s ease;
}
main .hp-std-label b{display:block;font-weight:inherit;letter-spacing:inherit;color:#f3f1e9;transition:color .3s ease}

/* hover / focus-within: the figure warms, its rule stretches and lights up */
main .hp-std-strip li:hover,
main .hp-std-strip li:focus-within{transform:translateY(-4px)}
main .hp-std-strip li:hover .hp-std-fig,
main .hp-std-strip li:focus-within .hp-std-fig{color:#f0d9ab;text-shadow:0 0 22px rgba(217,179,109,.35)}
main .hp-std-strip li:hover .hp-std-fig::after,
main .hp-std-strip li:focus-within .hp-std-fig::after{width:42px;background:#c3f24d;box-shadow:0 0 12px rgba(163,214,94,.55)}
main .hp-std-strip li:hover .hp-std-label,
main .hp-std-strip li:hover .hp-std-label b,
main .hp-std-strip li:focus-within .hp-std-label,
main .hp-std-strip li:focus-within .hp-std-label b{color:#fff}

/* one-time staggered rise as the band arrives */
@media(prefers-reduced-motion:no-preference){
  main .hp-std-strip li{animation:hp-std-rise .6s cubic-bezier(.2,.7,.3,1) backwards}
  main .hp-std-strip li:nth-child(2){animation-delay:.07s}
  main .hp-std-strip li:nth-child(3){animation-delay:.14s}
  main .hp-std-strip li:nth-child(4){animation-delay:.21s}
  main .hp-std-strip li:nth-child(5){animation-delay:.28s}
}
@keyframes hp-std-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ---- Tablet: five short figures still fit — just tighten. ---- */
@media(max-width:1000px){
  main .hp-std{padding:clamp(1.6rem,4vw,2.6rem) 0;background:#060706}
  main .hp-std .hp-shell{width:min(calc(100% - 32px),660px)}
  main .hp-std-strip{
    padding:clamp(1.25rem,3.6vw,1.7rem) clamp(.35rem,1.8vw,.9rem);
    border-radius:20px;
  }
  main .hp-std-strip li{padding-inline:clamp(.3rem,1.3vw,.85rem)}
  main .hp-std-fig{font-size:clamp(1.65rem,4.7vw,2.15rem)}
  main .hp-std-fig::after{margin:.4rem auto .45rem}
  main .hp-std-label{font-size:clamp(.53rem,1.5vw,.63rem);letter-spacing:.06em}
}
/* ---- Phone: 2-up grid, 5th spans the full width. ---- */
@media(max-width:600px){
  main .hp-std .hp-shell{width:calc(100% - 26px)}
  main .hp-std-strip{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(1.5rem,5vw,2rem) 0;
    padding:clamp(1.5rem,5vw,2rem) clamp(1rem,4vw,1.5rem);
  }
  main .hp-std-strip li{padding:0 .6rem}
  main .hp-std-strip li + li::before{display:none}
  main .hp-std-strip li:nth-child(odd)::before{
    content:"";position:absolute;right:-.1rem;left:auto;top:14%;bottom:14%;width:1px;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.13) 20%,rgba(255,255,255,.13) 80%,transparent);
  }
  main .hp-std-strip li:nth-child(5){grid-column:1/-1}
  main .hp-std-strip li:nth-child(5)::before{display:none}
  main .hp-std-fig{font-size:clamp(1.9rem,9vw,2.5rem)}
  main .hp-std-label{font-size:.66rem;letter-spacing:.07em}
}
@media(prefers-reduced-motion:no-preference){
  main .hp-std-strip::before{animation:hp-std-pulse 3.6s ease-in-out infinite alternate}
}
@keyframes hp-std-pulse{from{opacity:.62}to{opacity:1}}

/* =====================================================================
   Homepage — "Partner Locations" 4-card grid (.hp-plo / .hp-plc)
   Centered dashed kicker, 4 portrait cards with a straddling icon badge,
   serif title, caps subtitle, gold rule and a circular arrow button;
   a two-part assurance line underneath. Fresh class names so none of the
   old carousel CSS applies.
   ===================================================================== */
main .hp-plo{border-top:0 !important}
main .hp-plo .hp-shell{width:min(calc(100% - 48px),1360px);margin-inline:auto}
main .hp-plo-intro{text-align:center;max-width:60rem;margin:0 auto}
main .hp-plo-kicker{
  display:flex;align-items:center;justify-content:center;gap:1rem;margin:0;
  color:#b98b3d;font-size:.72rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
}
main .hp-plo-kicker::before,
main .hp-plo-kicker::after{content:"";width:clamp(30px,5vw,58px);height:1px;background:currentColor;opacity:.65}
main .hp-plo-title{
  margin:1.35rem 0 0 !important;
  font:400 clamp(2.7rem,5.4vw,4.9rem)/1.04 Georgia,"Times New Roman",serif !important;
  letter-spacing:-.02em !important;color:#171712 !important;text-align:center;text-wrap:balance;
}
main .hp-plo-title em{font-style:italic;color:#356b23}
@media(min-width:1180px){main .hp-plo-title{white-space:nowrap}}
main .hp-plo-lede{
  margin:1.35rem auto 0;max-width:46rem;
  color:#6f6f66;font-size:clamp(.95rem,1.1vw,1.06rem);line-height:1.7;
}
main .hp-plo-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(.95rem,1.7vw,1.5rem);
  margin:clamp(2.75rem,5vw,4.25rem) 0 0;padding:0;list-style:none;
}
main .hp-plc{
  border-radius:18px;background:#fbf9f1;
  box-shadow:0 32px 62px -36px rgba(40,34,18,.34);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease;
}
main .hp-plc-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
main .hp-plc-img{display:block;overflow:hidden;border-radius:18px 18px 0 0}
main .hp-plc-img img{
  display:block;width:100%;aspect-ratio:10/13;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
main .hp-plc-ico{
  position:relative;z-index:2;
  width:64px;height:64px;margin:-32px auto 0;
  display:grid;place-items:center;border-radius:50%;
  background:#fbf9f1;border:1px solid rgba(20,20,15,.09);
  color:#356b23;box-shadow:0 12px 26px -16px rgba(38,32,18,.4);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s ease,box-shadow .35s ease;
}
main .hp-plc-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
main .hp-plc-body{
  flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:1rem clamp(.9rem,1.3vw,1.3rem) clamp(1.9rem,3vw,2.5rem);
}
main .hp-plc-title{
  margin:.5rem 0 .7rem;
  font:400 clamp(1.12rem,1.4vw,1.45rem)/1.22 Georgia,"Times New Roman",serif;
  color:#1a1a14;text-wrap:balance;
}
main .hp-plc-sub{
  color:#8b8b80;font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.6;
}
main .hp-plc-rule{width:40px;height:2px;background:#c79a45;margin:1.1rem 0 1.6rem}
main .hp-plc-go{
  width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(53,107,35,.35);color:#356b23;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),background-color .3s ease,border-color .3s ease,color .3s ease;
}
main .hp-plc-go svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
/* --- interactive hover --------------------------------------------- */
main .hp-plc:hover{
  transform:translateY(-8px);
  box-shadow:0 40px 70px -34px rgba(40,34,18,.5);
}
main .hp-plc:hover .hp-plc-img img{transform:scale(1.055)}
main .hp-plc:hover .hp-plc-ico{
  transform:translateY(-3px) scale(1.06);
  border-color:rgba(53,107,35,.55);
  box-shadow:0 14px 28px -14px rgba(38,32,18,.45),0 0 0 6px rgba(53,107,35,.08);
}
main .hp-plc:hover .hp-plc-go{
  background:#356b23;border-color:#356b23;color:#fff;transform:scale(1.08);
}
main .hp-plc:hover .hp-plc-go svg{transform:translate(2px,-2px)}
main .hp-plc-link:focus-visible{outline:3px solid #c79a45;outline-offset:4px;border-radius:16px}
/* --- assurance line ----------------------------------------------- */
main .hp-plo-assurance{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.9rem clamp(1.5rem,3.5vw,3rem);
  margin:clamp(2.25rem,4vw,3.25rem) auto 0;
  color:#6f6f66;font-size:.93rem;
}
main .hp-plo-assurance-a{display:inline-flex;align-items:center;gap:.65rem}
main .hp-plo-assurance-a svg{width:20px;height:20px;flex:none;fill:none;stroke:#356b23;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
main .hp-plo-assurance-b{
  position:relative;padding-left:clamp(1.5rem,3.5vw,3rem);
  color:#356b23;font-style:italic;font-family:Georgia,"Times New Roman",serif;font-size:1.08rem;
}
main .hp-plo-assurance-b::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:1.4em;background:rgba(20,20,15,.2);
}
@media(max-width:960px){
  main .hp-plo-grid{grid-template-columns:repeat(2,1fr);gap:1.4rem}
}
@media(max-width:560px){
  main .hp-plo-grid{grid-template-columns:1fr;max-width:22rem;margin-inline:auto}
  main .hp-plo-assurance{flex-direction:column;gap:.75rem}
  main .hp-plo-assurance-b{padding-left:0}
  main .hp-plo-assurance-b::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  main .hp-plc,main .hp-plc *{transition:none !important}
  main .hp-plc:hover,main .hp-plc:hover .hp-plc-img img{transform:none}
}

/* ---------------------------------------------------------------------
   Living motion, reused elsewhere.
   The rotating "sweep" ring is a signature for the dark strip only; on the
   light service-card badges it would read as noise, so those get a gentler
   idle "breathing" glow + a hover pop instead. Other pages' icon rows
   already animate on hover and are left as-is.
   --------------------------------------------------------------------- */
main .hp-svc-ico{
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,border-color .3s ease;
}
main .hp-svc-card:hover .hp-svc-ico{
  transform:translateY(-3px) scale(1.06);
  border-color:rgba(53,107,35,.55);
  box-shadow:0 14px 30px -14px rgba(38,32,18,.4), 0 0 0 6px rgba(53,107,35,.1);
}
@media(prefers-reduced-motion:no-preference){
  main .hp-svc-ico{animation:hp-ico-breathe 4.6s ease-in-out infinite}
  main .hp-svc-grid .hp-svc-card:nth-child(2) .hp-svc-ico{animation-delay:.9s}
  main .hp-svc-grid .hp-svc-card:nth-child(3) .hp-svc-ico{animation-delay:1.8s}
  main .hp-svc-grid .hp-svc-card:nth-child(4) .hp-svc-ico{animation-delay:2.7s}
}
@keyframes hp-ico-breathe{
  0%,100%{box-shadow:0 8px 20px -12px rgba(38,32,18,.3), 0 0 0 0 rgba(53,107,35,0)}
  50%{box-shadow:0 8px 20px -12px rgba(38,32,18,.3), 0 0 0 7px rgba(53,107,35,.09)}
}

/* =====================================================================
   Homepage — "What we handle" service showcase (.hp-svc)
   Reference-style elevated cards: image with a circular line-icon badge
   straddling the lower edge, then title / 2-line copy / "Learn more".
   ===================================================================== */
main .hp-svc{
  padding-block:clamp(4.5rem,8vw,7rem);
  background:#faf9f5;
}
main .hp-svc .hp-shell{width:min(calc(100% - 48px),1200px);margin-inline:auto}
main .hp-svc-head{max-width:44rem;margin:0 auto clamp(2.75rem,4.5vw,3.75rem);text-align:center}
main .hp-svc-kicker{
  display:inline-flex;align-items:center;gap:.7rem;margin:0 0 1rem;
  color:#a36f18;font:800 .66rem/1 Inter,Arial,sans-serif;letter-spacing:.19em;text-transform:uppercase;
}
main .hp-svc-kicker::before,main .hp-svc-kicker::after{content:"";width:26px;height:1px;background:#d9b36d}
main .hp-svc-head h2{
  margin:0;color:#141310;
  font:400 clamp(1.9rem,2.6vw,2.85rem)/1.15 Georgia,"Times New Roman",serif;letter-spacing:-.02em;text-wrap:balance;
}
main .hp-svc-head h2 em{color:#2f6400;font-style:italic}
main .hp-svc-sub{
  max-width:34rem;margin:1rem auto 0;
  color:#6f6f64;font:400 1rem/1.65 Inter,Arial,sans-serif;
}
main .hp-svc-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.1rem,1.8vw,1.7rem);
}
main .hp-svc-card{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid rgba(20,20,15,.09);
  border-radius:15px;
  box-shadow:0 20px 44px -26px rgba(38,32,18,.28);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;
}
main .hp-svc-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -26px rgba(38,32,18,.34)}
main .hp-svc-img{border-radius:14px 14px 0 0;overflow:hidden}
main .hp-svc-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
main .hp-svc-ico{
  position:relative;z-index:1;
  width:60px;height:60px;margin:-30px auto 0;
  display:grid;place-items:center;
  background:#fff;border:1px solid rgba(20,20,15,.1);border-radius:50%;
  color:#356b23;box-shadow:0 8px 20px -12px rgba(38,32,18,.3);
}
main .hp-svc-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
main .hp-svc-body{
  display:flex;flex-direction:column;
  padding:1.15rem clamp(1.2rem,1.8vw,1.55rem) 1.5rem;
  text-align:left;
}
main .hp-svc-body h3{
  margin:0 0 .55rem;color:#20201b;
  font:800 .74rem/1.35 Inter,Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;
}
main .hp-svc-body p{
  margin:0 0 1rem;color:#8c8c81;
  font:400 .8rem/1.6 Inter,Arial,sans-serif;
}
main .hp-svc-more{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:.45rem;
  color:#a36f18;font:800 .66rem/1 Inter,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
}
main .hp-svc-more span{transition:transform .25s ease}
main .hp-svc-more:hover span,main .hp-svc-more:focus-visible span{transform:translateX(4px)}
main .hp-svc-more:hover,main .hp-svc-more:focus-visible{text-decoration:underline;text-underline-offset:5px}
@media(max-width:900px){
  main .hp-svc-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem 1.25rem}
}
@media(max-width:560px){
  main .hp-svc-grid{grid-template-columns:1fr;max-width:22rem;margin-inline:auto}
  main .hp-svc-kicker::after{display:none}
}

/* =====================================================================
   Homepage — "Where you'll find us" environments row (.hp-proj)
   Reference-style: near edge-to-edge portrait image cards, gradient
   scrim, caption bottom-left, circular arrow bottom-right, CTA below.
   ===================================================================== */
main .hp-proj{padding-block:clamp(4.5rem,8vw,7rem);background:#fff}
main .hp-proj .hp-shell{width:min(calc(100% - 48px),1200px);margin-inline:auto}
main .hp-proj-head{max-width:44rem;margin:0 auto clamp(2.5rem,4vw,3.5rem);text-align:center}
main .hp-proj-kicker{
  display:inline-flex;align-items:center;gap:.7rem;margin:0 0 1rem;
  color:#a36f18;font:800 .66rem/1 Inter,Arial,sans-serif;letter-spacing:.19em;text-transform:uppercase;
}
main .hp-proj-kicker::before,main .hp-proj-kicker::after{content:"";width:26px;height:1px;background:#d9b36d}
main .hp-proj-head h2{
  margin:0;color:#141310;
  font:400 clamp(1.9rem,2.6vw,2.85rem)/1.15 Georgia,"Times New Roman",serif;letter-spacing:-.02em;text-wrap:balance;
}
main .hp-proj-head h2 em{color:#2f6400;font-style:italic}
main .hp-proj-row{
  width:min(calc(100% - 32px),1600px);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;
}
main .hp-proj-card{
  position:relative;border-radius:13px;overflow:hidden;aspect-ratio:4/5;
  background:#e7e2d6;
}
main .hp-proj-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .65s cubic-bezier(.2,.7,.2,1);
}
main .hp-proj-card:hover img{transform:scale(1.05)}
main .hp-proj-shade{
  position:absolute;inset:0;
  background:linear-gradient(transparent 42%,rgba(9,12,9,.78));
}
main .hp-proj-cap{
  position:absolute;left:1.25rem;right:3.75rem;bottom:1.15rem;color:#fff;z-index:1;
}
main .hp-proj-cap h3{
  margin:0 0 .25rem;
  font:400 clamp(1.15rem,1.4vw,1.4rem)/1.15 Georgia,"Times New Roman",serif;letter-spacing:-.01em;
}
main .hp-proj-cap p{margin:0;color:rgba(255,255,255,.82);font:400 .74rem/1.4 Inter,Arial,sans-serif}
main .hp-proj-arrow{
  position:absolute;right:1rem;bottom:1rem;z-index:1;
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.55);border-radius:50%;color:#fff;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
main .hp-proj-arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
main .hp-proj-card:hover .hp-proj-arrow{background:#fff;color:#0a0c0a;border-color:#fff}
main .hp-proj-cta{margin-top:clamp(2rem,3.5vw,3rem);text-align:center}
main .hp-proj-cta a{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.8rem;border:1px solid rgba(20,20,15,.28);border-radius:999px;
  color:#20201b;font:800 .68rem/1 Inter,Arial,sans-serif;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
main .hp-proj-cta a span{transition:transform .25s ease}
main .hp-proj-cta a:hover,main .hp-proj-cta a:focus-visible{background:#2f6400;border-color:#2f6400;color:#fff}
main .hp-proj-cta a:hover span{transform:translateX(4px)}
@media(max-width:900px){
  main .hp-proj-row{grid-template-columns:repeat(2,1fr);gap:.9rem}
}
@media(max-width:520px){
  main .hp-proj-row{grid-template-columns:1fr;max-width:22rem}
}

/* =====================================================================
   Homepage — "Why choose Direct" 3-up split (.hp-choose)
   copy + checklist + button  |  feature image  |  icon-stat column
   ===================================================================== */
main .hp-choose{padding-block:clamp(4.5rem,8vw,7rem);background:#faf9f5}
main .hp-choose .hp-choose-layout{
  width:min(calc(100% - 48px),1240px);margin-inline:auto;
  display:grid;grid-template-columns:1.02fr 1.06fr .72fr;
  gap:clamp(2rem,4vw,4rem);align-items:center;
}
main .hp-choose-copy .hp-kicker{
  display:flex;align-items:center;gap:.7rem;margin:0 0 1rem;
  color:#a36f18;font:800 .66rem/1 Inter,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;
}
main .hp-choose-copy .hp-kicker::before{content:"";width:26px;height:1px;background:#d9b36d}
main .hp-choose-copy .hp-title{margin:0;color:#141310}
main .hp-choose-copy .hp-title em{color:#2f6400;font-style:italic}
main .hp-choose-copy .hp-copy{
  margin:1.1rem 0 0;color:#5f5f54;font:400 .95rem/1.7 Inter,Arial,sans-serif;max-width:32rem;
}
main .hp-choose-list{list-style:none;margin:1.6rem 0 1.9rem;padding:0;display:flex;flex-direction:column;gap:.7rem}
main .hp-choose-list li{
  display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;
  color:#3a3a30;font:400 .86rem/1.5 Inter,Arial,sans-serif;
}
main .hp-choose-list li span{display:grid;place-items:center;margin-top:1px}
main .hp-choose-list li svg{width:19px;height:19px;fill:none;stroke:#2f6400;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
main .hp-choose-media{margin:0}
main .hp-choose-media img{
  width:100%;height:auto;display:block;
  border-radius:15px;aspect-ratio:4/5;object-fit:cover;
  box-shadow:0 32px 64px -32px rgba(34,28,16,.4);
}
main .hp-choose-stats{
  margin:0;display:flex;flex-direction:column;
  border-left:1px solid rgba(47,100,0,.22);
}
main .hp-choose-stats > div{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;
  padding:1.15rem 0 1.15rem 1.4rem;
  border-bottom:1px solid rgba(47,100,0,.14);
}
main .hp-choose-stats > div:last-child{border-bottom:0}
main .hp-choose-stat-ico{display:grid;place-items:center;width:38px;height:38px;color:#a36f18}
main .hp-choose-stat-ico svg{width:33px;height:33px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
main .hp-choose-stats dt{
  color:#141310;font:400 clamp(1.35rem,1.7vw,1.7rem)/1 Georgia,"Times New Roman",serif;letter-spacing:-.01em;
}
main .hp-choose-stats dd{
  margin:.35rem 0 0;color:#8c8c81;font:800 .58rem/1.35 Inter,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;
}

/* --- interactive hover motion ----------------------------------- */
main .hp-choose-list li{
  transition:transform .28s cubic-bezier(.2,.7,.3,1),color .28s ease;
}
main .hp-choose-list li span{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
main .hp-choose-list li svg{transition:stroke .28s ease}
main .hp-choose-list li:hover{transform:translateX(5px);color:#141310}
main .hp-choose-list li:hover span{transform:scale(1.16)}
main .hp-choose-list li:hover svg{stroke:#3f8a18}

main .hp-choose-media{
  overflow:hidden;border-radius:15px;
  box-shadow:0 32px 64px -32px rgba(34,28,16,.4);
  transition:box-shadow .4s ease;
}
main .hp-choose-media img{
  box-shadow:none;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
main .hp-choose-media:hover{box-shadow:0 44px 84px -30px rgba(34,28,16,.52)}
main .hp-choose-media:hover img{transform:scale(1.05)}

main .hp-choose-stats > div{
  transition:transform .28s cubic-bezier(.2,.7,.3,1),background-color .28s ease;
}
main .hp-choose-stats > div:hover{transform:translateX(3px);background:rgba(47,100,0,.05)}
main .hp-choose-stat-ico{transition:transform .3s cubic-bezier(.2,.7,.3,1),color .3s ease}
main .hp-choose-stats > div:hover .hp-choose-stat-ico{transform:scale(1.12);color:#7a5514}

@media(prefers-reduced-motion:reduce){
  main :is(.hp-choose-list li,.hp-choose-list li span,.hp-choose-media img,
           .hp-choose-stats > div,.hp-choose-stat-ico){
    transition:none !important;transform:none !important;
  }
}
@media(max-width:1080px){
  main .hp-choose .hp-choose-layout{grid-template-columns:1fr 1fr;gap:2.5rem}
  main .hp-choose-stats{
    grid-column:1/-1;flex-direction:row;flex-wrap:wrap;
    border-left:0;border-top:1px solid rgba(47,100,0,.2);padding-top:.5rem;
  }
  main .hp-choose-stats > div{
    flex:1 1 42%;padding:1.15rem 1rem 1.15rem 0;border-bottom:0;
  }
}
@media(max-width:680px){
  main .hp-choose .hp-choose-layout{grid-template-columns:1fr}
  main .hp-choose-media{order:-1}
  main .hp-choose-stats > div{flex-basis:100%;border-bottom:1px solid rgba(47,100,0,.14)}
  main .hp-choose-stats > div:last-child{border-bottom:0}
}

/* Homepage scroll-reveal was leaving sections blank on fast scroll
   (IntersectionObserver misses elements when you jump past them).
   Content is always visible; the fade is a load-time nicety only. */
main .hp-reveal,
main .hp-reveal.is-visible{opacity:1 !important;transform:none !important}

/* =====================================================================
   Homepage — "A better kind of ATM partnership" (.hp-managed-intro)
   The global headline cap + a very airy layout left this block under-
   scaled and floaty. Give the headline room, tighten the two halves.
   ===================================================================== */
main .hp-managed-story .hp-managed-intro .hp-title{
  font-size:clamp(2.7rem,4.4vw,4rem) !important;
  line-height:1.04 !important;
  letter-spacing:-.03em !important;
}
main .hp-managed-story .hp-managed-intro{
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:center;
}
main .hp-managed-story{padding:clamp(4.5rem,8vw,7.5rem) 0}
main .hp-managed-story .hp-btn{font-size:.8rem !important;letter-spacing:.05em}

/* =====================================================================
   Homepage — DMV service-area map (.hp-map right column)
   Replaces the old CSS "region corridor" construction with the real
   relief map (VA / MD / DC, pins + connectors baked in).
   ===================================================================== */
main .hp-map-figure{
  margin:0;position:relative;
  border-radius:18px;overflow:hidden;
  background:#f4f4f2;
  box-shadow:0 34px 70px -34px rgba(40,44,40,.35);
}
main .hp-map-figure img{display:block;width:100%;height:auto}
main .hp-map-figure figcaption{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.9rem 1.2rem;
  background:#0a0c0a;color:#e9e6dc;
  font:600 .68rem/1.4 Inter,Manrope,Arial,sans-serif;
  letter-spacing:.11em;text-transform:uppercase;text-align:center;
}
main .hp-map-figure figcaption span{
  width:7px;height:7px;flex:none;border-radius:50%;
  background:#8fbd4f;box-shadow:0 0 0 4px rgba(143,189,79,.2);
}
@media(max-width:900px){
  main .hp-map-figure{max-width:560px;margin-inline:auto}
}

/* =====================================================================
   FAQ page (older lx-* design — interior-atm.css is not loaded here).
   The light-gold eyebrow / number text (--color-accent #bd8a3a) drops
   to ~2.8:1 on the page's light sections. Darken it; keep hero kickers
   (on the dark image) untouched.
   ===================================================================== */
main.lx-page :is(.lx-section, .lx-essential-faqs, .lx-assistant-section) .lx-kicker{
  color:#8f6114;
}
/* ...but .lx-section-cta is a dark panel — keep the lighter gold there */
main.lx-page .lx-section-cta .lx-kicker{
  color:#bd8a3a;
}
main.lx-page .lx-essential-faqs article > span:first-child{
  color:#8f6114;
}
main.lx-page .lx-page-hero .lx-page-index{
  color:rgba(255,255,255,.34);
}

/* ============================================================
   Tablet: tighten the mobile-menu overlay (bundle .lx-menu-panel).
   On phones it is a single column; from ~768px the bundle switches
   to a 2-column grid that leaves the nav in the left half and the
   contact block cramped against the right edge / chat launcher.
   Force a single centred ~440px column in the tablet range.
   ============================================================ */
@media (min-width:601px) and (max-width:1023px){
  .lx-menu-panel{
    grid-template-columns:minmax(0,440px)!important;
    grid-template-rows:auto!important;
    grid-auto-rows:auto!important;
    justify-content:center!important;
    align-content:start!important;
    gap:clamp(1.75rem,4vh,2.75rem)!important;
    padding-block:clamp(2.5rem,8vh,5rem) clamp(2rem,5vh,3.5rem)!important;
    overflow-y:auto!important;
  }
  .lx-menu-panel > nav,
  .lx-menu-panel > div{width:100%!important;max-width:440px!important;justify-self:center!important}
}