/* Ascension Property Management -- the cordpm template (cordpm-template-build/cord-head.html)
   reskinned in style guide B, "Hill Country". Every rule here has a Cord counterpart: the same
   structure, proportions and behaviours (the masthead over the hero, the hero slideshow, the wave
   dividers, the collage, the banner the cards overlap, the service cards, the dark band, the
   four-column footer), in forest / brass / crimson / cream with Montserrat headings and Lato text.
   Cord's hover states and responsive tiers were savants; here they are plain rules.

   Served as a template asset (/assets/templates/AscensionPM/css/site.css). Every client page loads
   payattn.css, Bootstrap 5.3, Font Awesome and Tabler before this file and privacy.css after it. */

@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-regular.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-medium.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-semibold.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-bold.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-display: swap; src: url("../fonts/lato-regular.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-display: swap; src: url("../fonts/lato-bold.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/lato-italic.woff2") format("woff2"); }

:root {
  /* Cord's tokens, recoloured: navy -> forest, orange -> crimson (buttons) and brass (rules, eyebrows),
     mist -> cream, haze -> moss, frost -> the lightest moss. */
  --apm-forest: #3F5749;
  --apm-forest-deep: #2A3B31;
  --apm-brass: #B89B4A;
  --apm-crimson: #A81414;
  --apm-crimson-deep: #7E0F0F;
  --apm-ink: #1F2A22;
  --apm-body: #4A554E;
  --apm-cream: #F4F1E8;
  --apm-moss: #E3E8E2;
  --apm-frost: #F6F8F6;
  --apm-shell: 1200px;
  --apm-display: "Montserrat", "Segoe UI", Arial, sans-serif;
  --apm-text: "Lato", "Segoe UI", Arial, sans-serif;
  --apm-masthead-height: 142px; /* top bar (17 + 21 + 17) + nav row 86: only the hero copy and the page banners pad by it */
}

body.apm-home, body.apm-inner {
  margin: 0;
  font-family: var(--apm-text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--apm-body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
.apm-shell { max-width: var(--apm-shell); margin: 0 auto; padding: 0 24px; }
.apm-narrow { max-width: 900px; }
[class^="apm-"] img, [class*=" apm-"] img { max-width: 100%; }

/* ---- masthead ---------------------------------------------------------------------------------- */
/* Laid over the top of the hero photo and the page banners, out of the flow, so the photo starts at the very
   first pixel whatever the masthead measures (a negative margin by a guessed height left a white strip above
   it -- user, 2026-10-26: "get rid of that white border"). */
.apm-masthead { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
.apm-topbar { padding: 17px 0; }
.apm-topbar-inner { display: flex; align-items: center; gap: 26px; }
.apm-topbar-item { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; text-decoration: none; }
.apm-topbar-item:hover { color: var(--apm-brass); text-decoration: none; }
/* Cord's glyphs before the address and phone, from the Tabler webfont the page already links */
.apm-topbar-item::before { font-family: "tabler-icons"; font-size: 15px; line-height: 1; color: var(--apm-brass); }
.apm-topbar-item:nth-child(1)::before { content: "\eae8"; }
.apm-topbar-item:nth-child(2)::before { content: "\eb09"; }
.apm-topbar-mail::before { content: "\eae5"; }
.apm-topbar-mail { margin-left: auto; }
.apm-topbar-login::before { content: "\eba7"; }
.apm-topbar-logout::before { content: "\eba8"; }
/* Transparent over the hero photo, which runs to the very top of the page (user, 2026-10-26: "no white padding
   on the top"); Cord's floating white row is the one Cord element not kept. */
.apm-navbar-inner { background: #fff; display: flex; flex-wrap: wrap; align-items: center; min-height: 86px; padding: 0 20px 0 24px; box-shadow: 0 10px 30px rgba(31, 42, 34, .12); } /* Cord's white row over the photo, back for legibility (user, 2026-10-26: "add a header background like cord has") */
.apm-brand { display: flex; align-items: center; padding: 0 30px 0 0; text-decoration: none; flex-shrink: 0; }
.apm-brand .apm-brand-logo { height: 54px; width: auto; display: block; }

/* the header menu: the bar of links, the hamburger, the off-canvas panel (the menu builder's own markup) */
.apm-nav { display: flex; align-items: center; flex: 1; min-width: 0; }
.apm-nav ul[data-pal-menu-depth="0"] { display: none; list-style: none; margin: 0; padding: 0; align-items: center; flex: 1; justify-content: flex-end; } /* the links sit against the button at the right (user, 2026-10-26) */
.apm-nav ul[data-pal-menu-depth="0"] > li { position: relative; display: flex; align-items: center; }
.apm-nav ul[data-pal-menu-depth="0"] > li > a.nav-link,
.apm-nav ul[data-pal-menu-depth="0"] > li > span {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  line-height: 26px;
  font-family: var(--apm-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--apm-forest);
  text-decoration: none;
  white-space: nowrap;
  transition: color .4s, background .4s;
}
.apm-nav ul[data-pal-menu-depth="0"] > li > a.nav-link:hover,
.apm-nav ul[data-pal-menu-depth="0"] > li[data-pal-menu-open] > a.nav-link { color: var(--apm-crimson); text-decoration: none; }
.apm-nav .dropdown-menu { border: 1px solid #cfd6d0; border-top: 3px solid var(--apm-brass); border-radius: 0; padding: 10px 0; min-width: 290px; box-shadow: 0 18px 40px rgba(31, 42, 34, .18); background: #fff; } /* a light edge so the panel reads as a panel over the photo (user, 2026-10-26) */
.apm-nav .dropdown-menu .dropdown-item,
.apm-nav .dropdown-menu [data-pal-menu-row] > .dropdown-item { padding: 10px 22px; font-family: var(--apm-text); font-size: 15px; color: var(--apm-ink); }
.apm-nav .dropdown-menu .dropdown-item:hover, .apm-nav .dropdown-menu .dropdown-item:focus-visible { background: var(--apm-moss); color: var(--apm-forest); }
.apm-nav .dropdown-menu .dropdown-item.active { background: var(--apm-forest); color: #fff; }
.apm-nav button[data-pal-menu-toggle] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 41px;
  margin-left: auto;
  padding: 0;
  background: var(--apm-crimson);
  color: #fff;
  border: 0;
  cursor: pointer;
}
.apm-nav button[data-pal-menu-toggle]::before {
  content: "";
  width: 22px;
  height: 15px;
  background: linear-gradient(#fff 0 2px, transparent 2px 6.5px, #fff 6.5px 8.5px, transparent 8.5px 13px, #fff 13px 15px);
}
.apm-nav .offcanvas { background: #fff; color: var(--apm-ink); width: min(360px, 90vw); }
.apm-nav .offcanvas-header { border-bottom: 1px solid var(--apm-moss); }
.apm-nav .offcanvas-title { font-family: var(--apm-display); font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--apm-forest); }
.apm-nav .offcanvas ul { list-style: none; margin: 0; padding: 0; }
.apm-nav .offcanvas ul[data-pal-menu-depth="0"] { display: block; }
.apm-nav .offcanvas ul[data-pal-menu-depth="0"] > li { display: block; border-bottom: 1px solid var(--apm-moss); }
.apm-nav .offcanvas ul[data-pal-menu-depth="0"] > li > a.nav-link,
.apm-nav .offcanvas ul[data-pal-menu-depth="0"] > li > span { display: flex; width: 100%; padding: 14px 2px; font-size: 13px; color: var(--apm-ink); text-shadow: none; }
.apm-nav .offcanvas ul[data-pal-menu-depth="0"] > li > a.nav-link:hover { color: var(--apm-crimson); }
.apm-nav .offcanvas .dropdown-menu { box-shadow: none; background: transparent; padding: 0 0 10px 12px; min-width: 0; }
.apm-nav .offcanvas .dropdown-item { padding: 9px 10px; }
@media (min-width: 992px) {
  .apm-nav ul[data-pal-menu-depth="0"] { display: flex; }
  .apm-nav button[data-pal-menu-toggle] { display: none; }
}
@media (max-width: 767.98px) {
  .apm-topbar { display: none; }
  :root { --apm-masthead-height: 86px; }
}

/* ---- buttons ----------------------------------------------------------------------------------- */
/* Cord's square buttons, recoloured crimson and rounded into style guide B's pills. */
.apm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--apm-crimson);
  color: #fff;
  font-family: var(--apm-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 18px 34px;
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  white-space: nowrap;
  transition: transform .3s, background .3s, color .3s;
}
.apm-button:hover, .apm-button:focus-visible { transform: scale(1.04); background: var(--apm-forest); color: #fff; text-decoration: none; }
.apm-button-mail { align-self: center; margin-left: 28px; margin-right: 0; padding: 14px 26px; } /* a breath between the last link and the button */
.apm-button-small { padding: 12px 22px; font-size: 11px; }
.apm-button-center { align-self: center; margin-top: 30px; }

/* ---- shared type --------------------------------------------------------------------------------- */
.apm-eyebrow { margin: 0 0 14px; font-family: var(--apm-display); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--apm-brass); }
.apm-eyebrow-light { color: var(--apm-brass); }
.apm-display { margin: 0; font-family: var(--apm-display); font-size: 56px; line-height: 1.12; font-weight: 600; color: #fff; }
.apm-heading { margin: 0; font-family: var(--apm-display); font-size: 36px; line-height: 1.22; font-weight: 700; color: var(--apm-forest); }
.apm-heading-light { color: #fff; }
.apm-heading-center { text-align: center; }
.apm-heading-small { margin: 36px 0 12px; font-family: var(--apm-display); font-size: 24px; font-weight: 700; color: var(--apm-forest); }
.apm-lead { margin: 0 0 28px; max-width: 720px; font-size: 17px; line-height: 1.75; color: var(--apm-body); }
.apm-lead-light { color: #fff; font-weight: 400; text-align: center; margin-left: auto; margin-right: auto; }
.apm-lead-center { text-align: center; margin-left: auto; margin-right: auto; }
.apm-rule { width: 44px; height: 3px; margin: 24px 0; background: var(--apm-brass); border: 0; opacity: 1; }
.apm-rule-center { margin-left: auto; margin-right: auto; }
.apm-rule-small { width: 30px; height: 2px; margin: 12px 0 18px; }

/* ---- hero ---------------------------------------------------------------------------------------- */
/* Cord's 702px hero: three slides cross-fading under the copy, a tinted overlay, the wave into the
   white section below. The slow zoom on the showing slide is Cord's Ken Burns savant as a keyframe. */
.apm-hero { position: relative; min-height: 860px; display: flex; align-items: center; overflow: hidden; background: var(--apm-forest); }
.apm-hero-media { position: absolute; inset: 0; z-index: 0; }
.apm-hero-track { height: 100%; }
.apm-hero-slide { height: 100%; }
.apm-hero-image { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: center; }
.apm-hero-slide.active .apm-hero-image { animation: apm-ken-burns 20s linear both; }
@keyframes apm-ken-burns { from { transform: scale(1); } to { transform: scale(1.12); } }
.apm-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(31, 42, 34, .68); } /* darker than Cord's: the copy has to read over busy photos (user, 2026-10-26) */
.apm-hero-inner { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: var(--apm-masthead-height); }
.apm-hero-inner .apm-display { max-width: 820px; }
.apm-hero::after, .apm-page-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 58px; z-index: 2; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 58' preserveAspectRatio='none'%3E%3Cpath d='M0,34 C220,4 420,4 620,22 C820,40 1010,44 1200,20 L1200,58 L0,58 Z' fill='%23ffffff'/%3E%3C/svg%3E"); }
/* the hero's wave carries a brass line along its edge (user, 2026-10-26: "a border along the bottom of the hero") */
.apm-hero::after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 58' preserveAspectRatio='none'%3E%3Cpath d='M0,34 C220,4 420,4 620,22 C820,40 1010,44 1200,20 L1200,58 L0,58 Z' fill='%23ffffff'/%3E%3Cpath d='M0,34 C220,4 420,4 620,22 C820,40 1010,44 1200,20' fill='none' stroke='%23B89B4A' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }

/* ---- why (the split section) ------------------------------------------------------------------- */
.apm-section { padding: 110px 0; background: #fff; }
.apm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.apm-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.apm-collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.apm-collage > :nth-child(2), .apm-collage > :nth-child(4) { margin-top: 28px; }
.apm-collage-tile { display: flex; align-items: center; justify-content: center; background: var(--apm-forest); min-height: 200px; }
.apm-collage-tile .apm-collage-mark { width: 44%; height: auto; }
.apm-feature-grid { display: grid; grid-template-columns: 1fr; gap: 34px; margin-top: 8px; } /* one column (user, 2026-10-26: "stack the 3 things up") */
.apm-feature img { width: 54px; height: 54px; object-fit: contain; margin-bottom: 14px; }
.apm-feature-title { margin: 0 0 8px; font-family: var(--apm-display); font-size: 19px; font-weight: 600; color: var(--apm-ink); }
.apm-feature-text { margin: 0; font-size: 14px; line-height: 1.75; color: var(--apm-body); }

/* ---- banner + the three cards ------------------------------------------------------------------- */
.apm-banner { padding: 70px 0 0; }
.apm-banner-inner { position: relative; overflow: hidden; padding: 150px 40px 250px; display: flex; flex-direction: column; align-items: center; text-align: center; background-image: url("../img/photos/backyard-pool-1000.webp"); background-size: cover; background-position: center; }
.apm-banner-inner::before { content: ""; position: absolute; inset: 0; background: rgba(42, 59, 49, .76); }
.apm-banner-inner > * { position: relative; z-index: 1; }
.apm-mark { width: 46px; margin-bottom: 26px; }
.apm-banner .apm-heading { margin-bottom: 22px; }
.apm-goal-section { padding: 0 0 110px; background: #fff; }
.apm-goal-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -110px; }
.apm-goal-card { padding: 44px 34px; text-align: center; background: #fff; border: 1px solid var(--apm-moss); }
.apm-goal-card img { width: 64px; margin-bottom: 16px; }
.apm-goal-title { margin: 0 0 10px; font-family: var(--apm-display); font-size: 20px; font-weight: 600; color: var(--apm-ink); }
.apm-goal-text { margin: 0; font-size: 14px; line-height: 1.75; color: var(--apm-body); }
.apm-goal-card:nth-child(2) { background: var(--apm-crimson); border-color: var(--apm-crimson); margin: -30px -8px -18px; padding: 68px 40px 62px; box-shadow: 0 26px 54px rgba(31, 42, 34, .28); } /* the middle card larger and raised, to break the row (user, 2026-10-26) */
.apm-goal-card:nth-child(2) .apm-goal-title, .apm-goal-card:nth-child(2) .apm-goal-text { color: #fff; }

/* ---- services ------------------------------------------------------------------------------------- */
.apm-mist-section { padding: 100px 0; background: var(--apm-cream); text-align: center; }
.apm-service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 56px; text-align: left; }
.apm-service-card { display: flex; flex-direction: column; background: var(--apm-forest); }
.apm-service-image { display: block; width: 100%; height: 190px; object-fit: contain; padding: 22px; background: var(--apm-moss); }
.apm-service-body { position: relative; padding: 30px 26px 32px; display: flex; flex-direction: column; align-items: flex-start; }
.apm-service-title { margin: 6px 0 10px; font-family: var(--apm-display); font-size: 20px; font-weight: 600; color: #fff; }
.apm-service-list { margin: 0 0 22px; padding: 0 0 0 18px; }
.apm-service-list li { margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: #D7DED8; }
.apm-service-list li::marker { color: var(--apm-brass); }

/* ---- difference band ------------------------------------------------------------------------------ */
.apm-dark { position: relative; padding: 140px 0 110px; background-image: url("../img/photos/cottage-pool-691.webp"); background-size: cover; background-position: center; }
.apm-dark::before { content: ""; position: absolute; inset: 0; background: rgba(20, 28, 23, .8); }
.apm-dark::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 58px; z-index: 2; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 58' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,26 C1010,50 820,46 620,28 C420,10 220,10 0,40 Z' fill='%23f4f1e8'/%3E%3C/svg%3E"); }
.apm-dark-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.apm-dark .apm-display { font-size: 52px; }

/* ---- footer ---------------------------------------------------------------------------------------- */
.apm-footer { padding: 70px 0 0; background: var(--apm-moss); }
.apm-footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
.apm-footer-logo { width: 230px; height: auto; display: block; margin-bottom: 18px; }
.apm-footer-text { margin: 0 0 16px; font-size: 14px; line-height: 1.75; color: var(--apm-body); }
.apm-footer-title { margin: 0; font-family: var(--apm-display); font-size: 22px; font-weight: 600; color: var(--apm-ink); }
.apm-link-list ul { list-style: none; margin: 0 0 18px; padding: 0; }
.apm-link-list li { display: flex; align-items: flex-start; margin-top: 4px; }
.apm-link-list li::before { content: "\203A"; flex: none; margin-right: 6px; font-size: 17px; line-height: 1.6; color: var(--apm-brass); }
.apm-link, .apm-link-list a { display: inline-flex; align-items: baseline; gap: 5px; font-size: 16px; line-height: 1.6; color: var(--apm-body); text-decoration: none; transition: color .3s; }
.apm-link:hover, .apm-link-list a:hover { color: var(--apm-crimson); text-decoration: none; }
.apm-footer-col > .apm-link { display: flex; }
.apm-privacy-choices { font-size: 14px; }
.apm-privacy-choices a, .apm-privacy-choices button { color: var(--apm-body); text-decoration: none; }
.apm-privacy-choices a:hover, .apm-privacy-choices button:hover { color: var(--apm-crimson); }
.apm-legal { margin-top: 52px; padding: 22px 0; border-top: 1px solid #cfd6d0; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 26px; }
/* the Legal menu and Your Privacy Choices sit in the legal row beside the copyright (user, 2026-10-26) */
.apm-legal-menu ul { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.apm-legal-menu li { margin: 0; }
.apm-legal-menu li::before, .apm-legal-menu a::before { display: none; content: none; }
.apm-legal-menu a, .apm-privacy-choices { font-size: 13px; line-height: 1.5; color: var(--apm-body); text-decoration: none; }
.apm-legal-menu a:hover, .apm-privacy-choices:hover { color: var(--apm-crimson); }
.apm-legal .apm-legal-attribution { flex-basis: 100%; margin-top: 2px; }
.apm-legal-text { margin: 0; font-size: 13px; color: var(--apm-body); }
.apm-legal-attribution { margin-top: 6px; font-size: 12px; opacity: .85; }
.apm-legal-attribution a { color: var(--apm-body); }

/* ---- the inner pages (Cord's investors page shape) ------------------------------------------------ */
.apm-page-banner { position: relative; padding: calc(var(--apm-masthead-height) + 86px) 0 120px; background: var(--apm-forest); background-image: linear-gradient(rgba(31, 42, 34, .66), rgba(31, 42, 34, .66)), url("../img/photos/house-1400.webp"); background-size: cover; background-position: center; }
.apm-page-banner-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.apm-page-banner .apm-lead-light { margin-bottom: 0; }
.apm-section-page { padding: 80px 0; }
.apm-section-center { text-align: center; }
/* Inside a shell, so the shell's width holds; Cord's max-width:100% was for a prose block inside a split. */
.apm-prose { text-align: left; }
.apm-prose p { margin: 0 0 16px; max-width: 72ch; font-size: 16px; line-height: 1.75; }
.apm-prose a { color: var(--apm-crimson); }
.apm-prose .apm-button { color: #fff; }
.apm-steps { counter-reset: step; list-style: none; margin: 0 0 24px; padding: 0; max-width: 72ch; }
.apm-steps > li { position: relative; padding: 0 0 18px 56px; counter-increment: step; font-size: 16px; line-height: 1.7; }
.apm-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--apm-forest); color: #fff; font-family: var(--apm-display); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.apm-steps ul { margin: 10px 0 0; padding-left: 18px; }
.apm-steps ul li { margin-bottom: 6px; }
/* the not-found page (NotFoundLayout): Foundation's line under the banner, in the prose measure */
.apm-notfound-body { padding: 72px 24px 120px; }

/* Cord's accordion, dressed through Bootstrap's own variables (see cord-head.html for why not a background on the toggle). */
.apm-accordion { --bs-accordion-border-color: transparent; --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0; --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(63, 87, 73, .25); --bs-accordion-btn-bg: var(--apm-frost); --bs-accordion-btn-color: var(--apm-ink); --bs-accordion-active-bg: var(--apm-forest); --bs-accordion-active-color: #fff; --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231f2a22'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); text-align: left; margin-top: 40px; }
.apm-acc-item { margin: 0 0 10px; border: 0; }
.apm-acc-item:last-child { margin-bottom: 0; }
.apm-acc-item:target { outline: 3px solid var(--apm-brass); }
.apm-acc-head { margin: 0; }
.apm-acc-toggle { padding: 14px 30px; font-family: var(--apm-display); font-size: 16px; font-weight: 700; text-decoration: none; transition: background-color .4s ease, color .4s ease; }
.apm-acc-toggle:hover, .apm-acc-toggle:focus { text-decoration: none; }
.apm-acc-toggle:not(.collapsed) { box-shadow: none; }
.apm-acc-toggle::after { width: 15px; height: 15px; background-size: 15px; }
.apm-acc-body { padding: 20px 30px 26px; }
.apm-acc-body p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: var(--apm-body); }
.apm-acc-body p:last-child { margin-bottom: 0; }
.apm-acc-body .apm-button { margin-top: 4px; }

/* the form slot the deferred forms land in */
.apm-form-slot-inner { display: flex; flex-direction: column; align-items: center; }
.apm-form-note { width: 100%; padding: 22px 24px; border: 2px dashed #cfd6d0; color: var(--apm-body); font-style: italic; margin: 0 0 40px; }

/* the custom forms (Request a Proposal, Potential Vendors): the product's Custom Forms, placed in the page's
   prose under its text by their shortcode ({{customform id=…}}) and rendered by Foundation's embedded fill-in
   page -- no title or container of its own; one section shows whole with a Submit under it, a form of several
   sections pages with Previous / Next / Submit. Styled to the page, nothing of its markup restated. The column
   is the prose's own measure (72ch at the paragraphs' 16px), so the form starts at the text's left edge. */
.apm-form-embed { max-width: 72ch; margin-top: 40px; font-size: 16px; }
.apm-form-embed p:empty { display: none; } /* a section with no description */
.apm-form-embed h4 { font-family: var(--apm-display); font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--apm-brass); margin: 0 0 22px; padding-bottom: 10px; border-bottom: 2px solid var(--apm-brass); }
.apm-form-embed .card { border: 0; border-radius: 0; box-shadow: none; margin: 0; background: transparent; overflow: visible; } /* the fill-in page wraps each question in a card: one plain column here; customForms.css gives .card overflow: auto, which clipped a raised label and the focus ring */
.apm-form-embed .card-body { padding: 0; }
.apm-form-embed .form-group { margin: 0; }
.apm-form-embed .fs-field { margin: 0 0 20px; }
.apm-form-embed [data-element="Dropdown"] .card-body { padding-bottom: 20px; } /* a dropdown question has no .fs-field: the same gap under it */
/* Every question's label, whatever its type prints it as (a span over a text box, a div over a text area, a span
   beside a dropdown); an option's own text carries data-fs-icon and keeps the body face. */
.apm-form-embed .fs-field label, .apm-form-embed .form-group > label, .apm-form-embed [data-element] [name="label"]:not([data-fs-icon]) { font-family: var(--apm-display); font-size: 13px; font-weight: 600; color: var(--apm-ink); }
.apm-form-embed [data-element] [name="label"]:not([data-fs-icon]) { display: block; margin: 0 0 6px; }
/* FormState floats a text box's label onto its top border (form-state.css .fs-float); this site puts labels above. */
.apm-form-embed .fs-float > label, .apm-form-embed .fs-float.fs-raised > label { position: static; display: block; margin: 0 0 6px; padding: 0; font-size: 13px; background: transparent; }
.apm-form-embed input[type="text"], .apm-form-embed input[type="email"], .apm-form-embed input[type="tel"], .apm-form-embed textarea, .apm-form-embed select { width: 100%; font: 16px/1.5 var(--apm-text); color: var(--apm-ink); background-color: #fff; border: 1px solid #cfd6d0; border-radius: 0; padding: 11px 14px; } /* background-color, not background: a select's chevron is form-select's background image */
.apm-form-embed textarea { min-height: 120px; resize: vertical; }
.apm-form-embed input[type="text"]:focus, .apm-form-embed input[type="email"]:focus, .apm-form-embed input[type="tel"]:focus, .apm-form-embed textarea:focus, .apm-form-embed select:focus { outline: none; border-color: var(--apm-forest); box-shadow: 0 0 0 3px rgba(63, 87, 73, .15); }
.apm-form-embed .fs-field-icon, .apm-form-embed .fs-status-icon { display: none; } /* FormState's icons: its status line starts at the form's edge, under Submit */
.apm-form-embed .btn { font-family: var(--apm-display); font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; border-radius: 999px; border: 0; padding: 14px 28px; transition: transform .3s, background .3s; }
.apm-form-embed .btn-primary { background: var(--apm-crimson); color: #fff; }
.apm-form-embed .btn-primary:hover, .apm-form-embed .btn-primary:focus-visible { background: var(--apm-forest); transform: scale(1.04); }
.apm-form-embed .btn-sm { padding: 10px 20px; font-size: 12px; margin-right: 10px; }
/* A one-section form's Submit sits straight under its questions. */
.apm-form-embed form > [type="submit"] { margin-top: 8px; }
/* A form of several sections: Previous, Next and Submit on one line -- each sits in a block of its own under the form. */
.apm-form-embed form > div:has(> div > [type="submit"]) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.apm-form-embed form > div:has(> div > [type="submit"]) .btn { margin: 0; }
.apm-form-embed .pal-captcha-status { font-size: 14px; color: var(--apm-body); margin: 0 0 12px; }

/* A question's label sits above its box at every width, as on a phone: the form keeps the prose measure (72ch), too
   narrow for a label column, and a label squeezed beside its box (the template's DFlexArrangement) left every box at
   its own left edge and wrapped the label with its "*" alone on a line (QA 2026-10-29, R3-2). */
.apm-form-embed .fs-field { flex-direction: column; align-items: stretch; }

/* ---- narrow viewports ---------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .apm-split, .apm-feature-grid, .apm-goal-grid, .apm-service-grid, .apm-footer-grid { grid-template-columns: 1fr; }
  .apm-goal-grid { margin-top: -60px; }
  .apm-goal-card:nth-child(2) { margin: 0; padding: 44px 34px; }
  .apm-display { font-size: 38px; }
  .apm-dark .apm-display { font-size: 36px; }
  .apm-heading { font-size: 28px; }
  .apm-topbar-inner { flex-wrap: wrap; gap: 12px; }
  .apm-section { padding: 70px 0; }
  .apm-banner-inner { padding: 100px 24px 190px; }
}
@media (max-width: 767.98px) {
  .apm-button-mail { display: none; }
  .apm-brand { padding: 16px 0; }
  .apm-brand .apm-brand-logo { height: 46px; }
  .apm-nav { flex: 0 0 auto; margin-left: auto; padding-right: 20px; }
  .apm-hero { min-height: 620px; }
}

/* ---- motion: cordpm.com's fade-up entrances ------------------------------------------------------------ */
/* js/site.js marks each candidate .apm-reveal (under html.apm-js, so nothing is hidden without the script) and
   .apm-in once it has entered the viewport; the rise is a one-second transition, time-based like Elementor's
   fadeInUp on cordpm.com (user, 2026-10-26: "moved into place as you scrolled"). A scroll-linked animation
   (animation-timeline: view()) was tried first and went unnoticed: it plays out over a few hundred pixels at
   the very bottom edge of the screen. */
html.apm-js .apm-reveal { opacity: 0; transform: translate3d(0, 44px, 0); transition: opacity 1s ease-out, transform 1s ease-out; will-change: opacity, transform; }
html.apm-js .apm-reveal.apm-in { opacity: 1; transform: none; }
/* hover states: Cord's nav, button, footer and link hovers (the nav and button ones are above), plus the
   cards lifting under the pointer */
.apm-footer-col a, .apm-topbar-item, .apm-link, .apm-link-list a, .apm-dropdown-item { transition: color .3s; }
.apm-footer-col a:hover { color: var(--apm-brass); }
.apm-goal-card, .apm-service-card, .apm-feature { transition: transform .35s ease, box-shadow .35s ease; }
.apm-goal-card:hover, .apm-service-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(31, 42, 34, .18); }
.apm-service-image { transition: transform .6s ease; }
.apm-service-card:hover .apm-service-image { transform: scale(1.04); }
.apm-collage img { transition: transform .6s ease; }
.apm-collage img:hover { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .apm-hero-slide.active .apm-hero-image { animation: none; }
  html.apm-js .apm-reveal { opacity: 1; transform: none; transition: none; }
  .apm-goal-card, .apm-service-card, .apm-feature, .apm-service-image, .apm-collage img, .apm-button { transition: none; }
}

/* ---- signed-in (App) pages ------------------------------------------------------------------------ */
/* The App layout (the signed-in default): the product's own pages -- contacts, lists, forms, maps, templates,
   teams -- rendered by Foundation into the content region, under the same masthead carrying the App menu.
   No photo to lay the masthead over, so it sits in the flow on the site's dark green, and the content gets
   the room an inner page's banner otherwise gives it. */
body.apm-app .apm-masthead { position: static; background: var(--apm-ink); }

/* One system over whatever markup an office page brings -- Foundation's Bootstrap pages, the generated Contacts
   pages, the dashboard (user, 2026-10-28: "sharper visually ... up to modern visual standards ... right now it looks
   sloppy and uncrisp"): a quiet page with white cards on it, one heading scale, tables as cards with small-caps
   headers, one button language (forest acts, crimson removes), fields with room and a focus ring. Scoped to the App's
   main column, so the public site is untouched. */
body.apm-app {
  --apm-app-bg: #F4F6F4;
  --apm-line: #DFE5E0;
  --apm-line-soft: #ECF0ED;
  --apm-muted: #66756C;
  --apm-forest-dark: #2F4338;
  --apm-tint: #EEF3EF;
  --apm-radius: 12px;
  --apm-shadow: 0 1px 2px rgba(31, 42, 34, .05), 0 6px 18px rgba(31, 42, 34, .05);
  --apm-focus: 0 0 0 3px rgba(63, 87, 73, .2);
  background: var(--apm-app-bg);
}
body.apm-app .apm-app-main { min-height: 60vh; padding-top: 40px; padding-bottom: 88px; font-family: var(--apm-text); font-size: 15px; line-height: 1.55; color: var(--apm-ink); }
/* Foundation's pages wrap themselves in a .container: inside the shell it only narrows and pads again. */
body.apm-app .apm-app-main .container { max-width: none; padding-left: 0; padding-right: 0; }

/* headings: one scale */
body.apm-app .apm-app-main h1, body.apm-app .apm-app-main h1.display-5 { margin: 0 0 20px; font-family: var(--apm-display); font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--apm-ink); }
body.apm-app .apm-app-main h2 { font-family: var(--apm-display); font-size: 20px; font-weight: 700; color: var(--apm-ink); }
body.apm-app .apm-app-main h3, body.apm-app .apm-app-main h4, body.apm-app .apm-app-main h5 { font-family: var(--apm-display); font-weight: 600; color: var(--apm-ink); }

/* links in the text: forest, underlined only on the way in */
body.apm-app .apm-app-main a:not(.btn):not(.list-group-item):not(.dropdown-item):not(.apm-dash-card):not(.apm-button):not(.page-link) { color: var(--apm-forest); font-weight: 600; text-decoration: none; }
body.apm-app .apm-app-main a:not(.btn):not(.list-group-item):not(.dropdown-item):not(.apm-dash-card):not(.apm-button):not(.page-link):hover { color: var(--apm-forest-dark); text-decoration: underline; text-underline-offset: 3px; }

/* tables: a card each, small-caps headers, rows that answer the pointer */
body.apm-app .apm-app-main table.table { --bs-table-bg: #fff; --bs-table-striped-bg: transparent; --bs-table-hover-bg: #F7F9F7; width: 100%; margin-bottom: 24px; background: #fff; border: 1px solid var(--apm-line); border-radius: var(--apm-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; box-shadow: var(--apm-shadow); }
body.apm-app .apm-app-main table.table th { padding: 12px 18px; background: #FAFBFA; border-bottom: 1px solid var(--apm-line); font-family: var(--apm-display); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--apm-muted); white-space: nowrap; }
body.apm-app .apm-app-main table.table td { padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--apm-line-soft); vertical-align: middle; font-size: 14.5px; color: var(--apm-ink); box-shadow: none; }
body.apm-app .apm-app-main table.table tr:last-child > td { border-bottom: 0; }
body.apm-app .apm-app-main table.table tr:hover > td { background: #F8FAF8; }
/* a row's actions: quiet until wanted -- outlined, small, side by side */
body.apm-app .apm-app-main table.table td .btn { --bs-btn-padding-x: 10px; --bs-btn-padding-y: 4px; --bs-btn-font-size: 12px; margin: 2px 4px 2px 0; }
body.apm-app .apm-app-main table.table td .btn-primary, body.apm-app .apm-app-main table.table td .btn-secondary, body.apm-app .apm-app-main table.table td .btn-outline-secondary, body.apm-app .apm-app-main table.table td .btn-light { --bs-btn-bg: #fff; --bs-btn-color: var(--apm-forest); --bs-btn-border-color: var(--apm-line); --bs-btn-hover-bg: var(--apm-forest); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--apm-forest); --bs-btn-active-bg: var(--apm-forest-dark); --bs-btn-active-color: #fff; }
body.apm-app .apm-app-main table.table td .btn-danger, body.apm-app .apm-app-main table.table td .btn-outline-danger { --bs-btn-bg: #fff; --bs-btn-color: var(--apm-crimson); --bs-btn-border-color: var(--apm-line); --bs-btn-hover-bg: var(--apm-crimson); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--apm-crimson); }

/* buttons: one language */
body.apm-app .apm-app-main .btn { --bs-btn-font-family: var(--apm-display); --bs-btn-font-weight: 600; --bs-btn-font-size: 13px; --bs-btn-padding-x: 16px; --bs-btn-padding-y: 8px; --bs-btn-border-radius: 8px; --bs-btn-focus-box-shadow: var(--apm-focus); letter-spacing: .01em; }
body.apm-app .apm-app-main .btn-sm { --bs-btn-font-size: 12px; --bs-btn-padding-x: 12px; --bs-btn-padding-y: 6px; --bs-btn-border-radius: 7px; }
body.apm-app .apm-app-main .btn-primary { --bs-btn-bg: var(--apm-forest); --bs-btn-border-color: var(--apm-forest); --bs-btn-hover-bg: var(--apm-forest-dark); --bs-btn-hover-border-color: var(--apm-forest-dark); --bs-btn-active-bg: var(--apm-forest-dark); --bs-btn-active-border-color: var(--apm-forest-dark); --bs-btn-disabled-bg: var(--apm-forest); --bs-btn-disabled-border-color: var(--apm-forest); }
body.apm-app .apm-app-main .btn-secondary, body.apm-app .apm-app-main .btn-outline-secondary, body.apm-app .apm-app-main .btn-light, body.apm-app .apm-app-main .btn-outline-primary { --bs-btn-bg: #fff; --bs-btn-color: var(--apm-ink); --bs-btn-border-color: var(--apm-line); --bs-btn-hover-bg: var(--apm-tint); --bs-btn-hover-color: var(--apm-forest-dark); --bs-btn-hover-border-color: #C9D3CB; --bs-btn-active-bg: var(--apm-tint); --bs-btn-active-color: var(--apm-forest-dark); }
body.apm-app .apm-app-main .btn-danger { --bs-btn-bg: var(--apm-crimson); --bs-btn-border-color: var(--apm-crimson); --bs-btn-hover-bg: #8C1010; --bs-btn-hover-border-color: #8C1010; }
body.apm-app .apm-app-main .btn-outline-danger { --bs-btn-color: var(--apm-crimson); --bs-btn-border-color: #E5C4C4; --bs-btn-hover-bg: var(--apm-crimson); --bs-btn-hover-border-color: var(--apm-crimson); }
body.apm-app .apm-app-main .btn-group > .btn { margin: 0; }
/* A link-styled button (the forms list's Disable / Enable) reads like the links beside it: forest, no frame, no fill. */
body.apm-app .apm-app-main .btn-link { --bs-btn-color: var(--apm-forest); --bs-btn-hover-color: var(--apm-forest-dark); --bs-btn-active-color: var(--apm-forest-dark); --bs-btn-font-family: inherit; --bs-btn-font-size: inherit; --bs-btn-font-weight: 600; --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; letter-spacing: normal; text-decoration: none; }

/* forms: labels above, fields with room, a focus ring in the house colour */
body.apm-app .apm-app-main label:not(.form-check-label):not(.btn) { margin-bottom: 6px; font-family: var(--apm-display); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--apm-ink); }
body.apm-app .apm-app-main .form-control, body.apm-app .apm-app-main .form-select { min-height: 44px; padding: 10px 14px; font-size: 15px; color: var(--apm-ink); background-color: #fff; border: 1px solid #CDD6CF; border-radius: 8px; transition: border-color .15s, box-shadow .15s; }
body.apm-app .apm-app-main textarea.form-control { min-height: 120px; }
body.apm-app .apm-app-main .form-control:focus, body.apm-app .apm-app-main .form-select:focus { border-color: var(--apm-forest); box-shadow: var(--apm-focus); }
body.apm-app .apm-app-main .form-control[readonly] { background: #F7F9F7; border-color: var(--apm-line); color: var(--apm-ink); }
body.apm-app .apm-app-main .form-check { margin-bottom: 10px; }
body.apm-app .apm-app-main .form-check-input { width: 1.15em; height: 1.15em; margin-top: .2em; border-color: #B5C1B8; }
body.apm-app .apm-app-main .form-check-input:checked { background-color: var(--apm-forest); border-color: var(--apm-forest); }
body.apm-app .apm-app-main .form-check-input:focus { border-color: var(--apm-forest); box-shadow: var(--apm-focus); }
body.apm-app .apm-app-main .form-switch .form-check-input { width: 2em; border-radius: 2em; }
body.apm-app .apm-app-main .form-check-label { font-size: 15px; color: var(--apm-ink); }
body.apm-app .apm-app-main .form-text, body.apm-app .apm-app-main small.text-muted { font-size: 13px; color: var(--apm-muted) !important; }

/* breadcrumbs, menus, badges, the travelers' suitcases */
body.apm-app .apm-app-main .breadcrumb { --bs-breadcrumb-divider: '\203A'; --bs-breadcrumb-divider-color: #A3AFA7; --bs-breadcrumb-item-active-color: var(--apm-ink); margin-bottom: 10px; font-size: 13px; }
body.apm-app .apm-app-main .breadcrumb-item a { font-weight: 500 !important; color: var(--apm-muted) !important; }
body.apm-app .apm-app-main .breadcrumb-item.active { font-weight: 600; }
body.apm-app .apm-app-main .dropdown-menu { padding: 6px; font-size: 14px; border: 1px solid var(--apm-line); border-radius: 10px; box-shadow: 0 12px 32px rgba(31, 42, 34, .12); }
body.apm-app .apm-app-main .dropdown-item { padding: 8px 12px; border-radius: 6px; color: var(--apm-ink); }
body.apm-app .apm-app-main .dropdown-item:hover, body.apm-app .apm-app-main .dropdown-item:focus { background: var(--apm-tint); color: var(--apm-forest-dark); }
body.apm-app .apm-app-main .badge.text-bg-secondary { background: var(--apm-tint) !important; color: var(--apm-forest-dark) !important; font-family: var(--apm-display); font-weight: 600; letter-spacing: .02em; }
body.apm-app .apm-app-main details[data-traveler-suitcase] > summary { cursor: pointer; font-weight: 600; color: var(--apm-forest); }
body.apm-app .apm-app-main .card { border: 1px solid var(--apm-line) !important; border-radius: var(--apm-radius) !important; box-shadow: var(--apm-shadow) !important; }
/* a plain list of records (the custom forms): a card, each row's name beside its actions on one line */
body.apm-app .apm-app-main .btn-success { --bs-btn-bg: var(--apm-forest); --bs-btn-border-color: var(--apm-forest); --bs-btn-hover-bg: var(--apm-forest-dark); --bs-btn-hover-border-color: var(--apm-forest-dark); --bs-btn-active-bg: var(--apm-forest-dark); --bs-btn-active-border-color: var(--apm-forest-dark); }
body.apm-app .apm-app-main ul.list-group:not(.list-group-flush) { margin-top: 16px; background: #fff; border: 1px solid var(--apm-line); border-radius: var(--apm-radius); overflow: hidden; box-shadow: var(--apm-shadow); }
body.apm-app .apm-app-main ul.list-group:not(.list-group-flush) > .list-group-item { padding: 14px 18px; border: 0; border-bottom: 1px solid var(--apm-line-soft); }
body.apm-app .apm-app-main ul.list-group:not(.list-group-flush) > .list-group-item:last-child { border-bottom: 0; }
body.apm-app .apm-app-main ul.list-group:not(.list-group-flush) > .list-group-item > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
body.apm-app .apm-app-main ul.list-group:not(.list-group-flush) > .list-group-item > div > div:first-child { font-weight: 600; color: var(--apm-ink); }
body.apm-app .apm-app-main ul.list-group:not(.list-group-flush) > .list-group-item > div > div:last-child > div > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: 13.5px; }
body.apm-app .apm-app-main .autoComplete_wrapper > input { min-height: 44px; padding: 10px 14px; font-size: 15px; border-color: #CDD6CF !important; border-radius: 8px !important; }

/* on a phone: a table no stacked layout covers scrolls inside its own card */
@media (max-width: 767.98px) {
  body.apm-app .apm-app-main { padding-top: 28px; }
  body.apm-app .apm-app-main h1, body.apm-app .apm-app-main h1.display-5 { font-size: 24px; }
  body.apm-app .apm-app-main table.table:not(:has(.responsive-cell-header)) { display: block; max-width: 100%; overflow-x: auto; }
  /* the Stop the Traveler switch keeps its own size: PALjs's responsive table sets every descendant of a row to
     100% (payattn-responsive-tr.css), which drops the switch's label under its input */
  body.apm-app .apm-app-main .payattn-responsive-table td .form-switch,
  body.apm-app .apm-app-main .payattn-responsive-table td .form-switch .form-check-input,
  body.apm-app .apm-app-main .payattn-responsive-table td .form-switch .form-label { width: auto !important; }
  body.apm-app .apm-app-main .payattn-responsive-table td .form-switch { display: inline-flex; align-items: center; gap: 10px; padding-left: 0; min-height: 0; }
  body.apm-app .apm-app-main .payattn-responsive-table td .form-switch .form-check-input { float: none; margin: 0; }
  body.apm-app .apm-app-main .payattn-responsive-table td .form-switch .form-label { margin: 0; }
}
/* The App layout's menu is a hamburger at every width (user, 2026-10-28): the bar never shows, the toggle always
   does, and the panel's list stays as it is. The panel ends in the builder's rule and Log out. */
body.apm-app .apm-nav ul[data-pal-menu-depth="0"] { display: none; }
body.apm-app .apm-nav .offcanvas ul[data-pal-menu-depth="0"] { display: block; }
body.apm-app .apm-nav button[data-pal-menu-toggle] { display: inline-flex; }
.apm-nav .offcanvas hr[data-pal-menu-panel-rule] { margin: 22px 0; border: 0; border-top: 1px solid var(--apm-moss); opacity: 1; }
/* one line, not two, above the panel's actions: the list's last item drops its border when the builder's rule follows */
.apm-nav .offcanvas ul[data-pal-menu-depth="0"]:has(+ hr[data-pal-menu-panel-rule]) > li:last-child { border-bottom: 0; }

/* ---- plain public pages (Foundation's Privacy Choices) --------------------------------------------------- */
/* A public page whose content Foundation renders, with no photo banner: the masthead sits in the flow on the
   site's dark green, as on the App pages. */
body.apm-plain .apm-masthead { position: static; background: var(--apm-ink); }
.apm-plain-main { min-height: 50vh; padding-top: 48px; padding-bottom: 96px; }
/* Its storage table (name, kind, purpose, what it is for) scrolls inside itself on a phone, not the page. */
@media (max-width: 767.98px) {
  .apm-plain-main table { display: block; max-width: 100%; overflow-x: auto; }
}

/* ---- the IAM pages (teams, roles, users) ------------------------------------------------------------------ */
/* IAMLayout: the account menu in a column beside the page, its captions (Teams, Users) as the contact
   profile's eyebrows, without the link arrow. */
.apm-iam-menu { padding-top: 6px; margin-bottom: 32px; }
.apm-iam-menu li:has(> [data-pal-menu-caption]) { margin-top: 18px; }
.apm-iam-menu li:first-child:has(> [data-pal-menu-caption]) { margin-top: 0; }
.apm-iam-menu li:has(> [data-pal-menu-caption])::before { content: none; }
.apm-iam-menu [data-pal-menu-caption] { font-family: var(--apm-display); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--apm-brass); }

/* ---- the contact profile (the Contacts pages, signed in) --------------------------------------------- */
/* automatingaction's contact page rebuilt as the Record Profile (Labs's NewInstall definitions, adopted): a
   Contact Links nav, the record's sections, its Attributes. The blueprint's structure is cards (a flush list group
   on a card for the nav and the attributes, a card per section); this template's savants add the apm-profile-*
   classes coloured here (apm-data.php, $data['savants']): brass small-caps labels, the current page a forest bar. */
body.apm-app .apm-app-main .list-group.rounded-3 { border-color: var(--apm-line) !important; border-radius: var(--apm-radius) !important; box-shadow: var(--apm-shadow) !important; }
.apm-profile-heading { font-family: var(--apm-display); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--apm-brass); }
.list-group-item.apm-profile-link { font-family: var(--apm-text); font-size: 14.5px; color: var(--apm-body); background: #fff; padding: 10px 16px; border-left: 3px solid transparent !important; border-radius: 0; }
.list-group-item.apm-profile-link:hover, .list-group-item.apm-profile-link:focus-visible { color: var(--apm-forest-dark, #2F4338); background: #F5F7F5; }
.list-group-item.active.apm-profile-current, .list-group-item.active.apm-profile-current:hover { color: var(--apm-forest-dark, #2F4338); background: var(--apm-tint, #EEF3EF); border-left-color: var(--apm-forest) !important; font-weight: 700; }
.apm-profile-section { font-family: var(--apm-display); font-size: 17px; font-weight: 700; letter-spacing: -.005em; color: var(--apm-ink); }
.list-group-item.apm-profile-attribute { font-family: var(--apm-text); font-size: 14.5px; color: var(--apm-body); background: #fff; }
.apm-profile-value { font-family: var(--apm-text); font-size: 15px; color: var(--apm-ink); }
.apm-profile-back { font-family: var(--apm-display); font-size: 13px; font-weight: 600; color: var(--apm-muted, #66756C) !important; text-decoration: none; }
.apm-profile-back::before { content: "\2190\00a0"; } /* the old page's arrow-left */
.apm-profile-back:hover, .apm-profile-back:focus-visible { color: var(--apm-forest) !important; text-decoration: underline; }
.apm-profile-title { font-family: var(--apm-display); font-weight: 700; letter-spacing: -.01em; color: var(--apm-ink); }
h1.apm-profile-title { font-size: 28px; }
h4.apm-profile-title { font-size: 18px; }
.apm-nav .offcanvas [data-pal-menu-panel-action] { display: block; text-align: center; }

/* ---- the signed-in dashboard (DashboardLayout) ----------------------------------------------------------------- */
/* The office's home: a welcome band, a card to each part of the office, then two of its pages embedded live. */
.apm-button-quiet { background: transparent; color: var(--apm-forest); box-shadow: inset 0 0 0 2px var(--apm-forest); }
.apm-button-quiet:hover, .apm-button-quiet:focus-visible { background: var(--apm-forest); color: #fff; }
.apm-dash-welcome { padding: 4px 0 34px; margin-bottom: 36px; border-bottom: 1px solid var(--apm-moss); }
body.apm-app .apm-app-main .apm-dash-welcome h1 { margin: 0 0 14px; font-size: 34px; font-weight: 700; color: var(--apm-forest); }
.apm-dash-welcome .apm-lead { margin-bottom: 22px; }
.apm-dash-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.apm-dash-actions .apm-button { margin: 0; }
.apm-dash-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 48px; }
.apm-dash-card { display: flex; flex-direction: column; gap: 8px; padding: 26px 22px 24px; background: #fff; border: 1px solid var(--apm-moss); border-radius: 10px; color: var(--apm-body); text-decoration: none; transition: transform .3s, box-shadow .3s, border-color .3s; }
.apm-dash-card::before { margin-bottom: 6px; font-family: "tabler-icons"; font-size: 30px; line-height: 1; color: var(--apm-brass); }
.apm-dash-card:hover, .apm-dash-card:focus-visible { transform: translateY(-4px); border-color: var(--apm-brass); box-shadow: 0 14px 30px rgba(31, 42, 34, .12); color: var(--apm-body); text-decoration: none; }
.apm-dash-card-title { font-family: var(--apm-display); font-size: 16px; font-weight: 700; color: var(--apm-forest); }
.apm-dash-card-text { font-size: 14px; line-height: 1.55; }
.apm-dash-proposals::before { content: "\ee8f"; }
.apm-dash-vendors::before { content: "\eb40"; }
.apm-dash-contacts::before { content: "\f021"; }
.apm-dash-lists::before { content: "\ef40"; }
.apm-dash-travelers::before { content: "\ec87"; }
.apm-dash-maps::before { content: "\eb17"; }
.apm-dash-emails::before { content: "\eae5"; }
.apm-dash-teams::before { content: "\fa21"; }
.apm-dash-live { display: grid; gap: 32px; }
.apm-dash-panel { min-width: 0; padding: 28px 26px; background: var(--apm-frost); border: 1px solid var(--apm-moss); border-radius: 10px; }
.apm-dash-panel .container { max-width: none; padding: 0; }
body.apm-app .apm-app-main .apm-dash-panel h1 { margin-bottom: 16px; font-size: 22px; }
.apm-dash-more { margin: 14px 0 0; }
@media (max-width: 991.98px) {
  .apm-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .apm-dash-grid { grid-template-columns: 1fr; }
  .apm-dash-panel { padding: 20px 14px; }
}