/* Arborstone corporate / legal / service pages — parity stylesheet.
   Measured off live /accessibility/ on 2026-09-15 at clientWidth 1265. These pages
   use Divi's DEFAULT typography (#333 headings, #666 body, 1080px row), unlike the
   unit-size family which customises all of it — so most of this is just restating
   Divi's base, and compat.css already supplies the rest.

   ⚠️ Assert clientWidth before trusting any capture: a 0x0 pane resolves every
   media query at the smallest breakpoint and hands back the MOBILE type scale. */

.cp { color: #666; }
.cp .cp-in { width: 80%; max-width: 1080px; margin: 0 auto; }

/* Divi supplies img{max-width:100%}; a Divi-free sheet must restate it, or an
   image with an intrinsic width attribute forces horizontal scroll on mobile. */
.cp img { max-width: 100%; height: auto; }

/* Divi applies `overflow-wrap: break-word` to headings; without it a long single
   word cannot break. Measured on live /accessibility/ at a 375px viewport: the h1
   "Accessibility" renders at 60px in a 300px column and WRAPS to 147px tall. With
   the rule missing it stayed on one 372px line, widening the document to 409 and
   dragging the fixed RingCentral chat button out with it -- which looked like a
   chat-widget bug and was not. */
.cp :where(h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; }

.cp-body { background: #fff; padding: 50.59px 0; }
.cp-dir-ok   { background: #0E3255; padding: 0; }
.cp-dir-txar { background: #0E3255; padding: 0 0 9px; }
.cp-basefoot { background: #0E3255; padding: 0 0 9px; }

.cp-body h1 { font-size: 60px; line-height: 68.4px; font-weight: 500; color: #333;
              padding-bottom: 10px; margin: 0 0 20px; text-align: left; }
.cp-body h2 { font-size: 30px; line-height: 30px; font-weight: 500; color: #333;
              padding-bottom: 10px; margin: 0; text-align: left; }
.cp-body h3 { font-size: 25px; line-height: 25px; font-weight: 500; color: #333;
              padding-bottom: 10px; margin: 0; text-align: left; }
.cp-body p  { font-size: 16px; line-height: 27.2px; font-weight: 500; color: #666;
              padding-bottom: 16px; margin: 0; }
.cp-body ul { font-size: 16px; line-height: 26px; font-weight: 500; color: #666;
              padding-bottom: 16px; }
.cp-body li { font-size: 16px; line-height: 26px; font-weight: 500; color: #666; }
.cp-body a  { color: #003A60; }

/* Navy tail sections invert. */
.cp-dir, .cp-dir p, .cp-dir a, .cp-basefoot, .cp-basefoot p, .cp-basefoot a { color: #fff; }
.cp-dir a, .cp-basefoot a { text-decoration: none; }
.cp-dir a:hover, .cp-basefoot a:hover { text-decoration: underline; }

.cp-dirgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px;
              padding: 18px 0; }
.cp-dircol p { margin: 0 0 6px; font-size: 15px; line-height: 24px; }
.cp-basefoot .cp-in { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
                      gap: 20px; padding: 18px 0; }

/* No mobile font-size override for h1: live renders it at 60px at EVERY width and
   simply breaks the word. Shrinking it here would have been a deviation dressed up
   as a fix. */
@media (max-width: 980px) {
  .cp-dirgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .cp-dirgrid, .cp-basefoot .cp-in { grid-template-columns: 1fr; }
}

/* ===========================================================================
   /pay-online/ — rebuilt 2026-09-16 (Callum's call: rebuild, not parity port)
   ---------------------------------------------------------------------------
   This page is NOT a parity port and deliberately does not reproduce the Divi
   layout. The Divi version wrapped the Monument tenant portal in acquisition
   copy -- "Why Choose Arborstone Storage?", "It's Easy To Get Started!", a
   testimonial and two decorative background bands -- aimed at someone choosing
   a facility, on the page an EXISTING TENANT opens to pay a bill. Those nine
   sections are dropped. What is kept: the h1, the h2, the per-unit payment
   warning (verbatim), the reassurance line, the portal, and the locations link.

   Colour: the Divi page's navy bands are #0E3255, which is NOT the brand navy
   (see the brand tokens note -- #0E3255 was an invented value). This uses the
   shell's --navy / Pantone 2965C #003A60. Buttons use the shell's own
   .btn/.btn-invert rather than .cp-btn, which the extractor emits but NOTHING
   styles -- all four previously ported pages happen to contain zero buttons, so
   the gap never surfaced. Fix .cp-btn before porting any page that has one.
   =========================================================================== */

.po-intro { padding: 56px 0 40px; }
.po-intro h2 { margin-top: 4px; }

.po-lead { font-size: 16px; line-height: 27.2px; color: #666; padding-bottom: 0; }

/* The portal itself. Full-bleed, no padding: the iframe manages its own height
   via postMessage from Monument, so anything that boxes it in fights that. */
.po-portal { background: #fff; padding: 0 0 8px; }

.po-help { background: var(--navy, #003A60); padding: 44px 0 48px; text-align: center; }
.po-help .cp-in { width: 80%; max-width: 1080px; margin: 0 auto; }
.po-help .po-help-q { color: #fff; font-size: 22px; line-height: 30px;
                      font-weight: 700; padding-bottom: 6px; margin: 0; }
.po-help .po-help-a { color: #D5E1EC; font-size: 16px; line-height: 27.2px;
                      font-weight: 500; padding-bottom: 20px; margin: 0; }
.po-help .po-help-cta { padding-bottom: 0; margin: 0; }

@media (max-width: 767px) {
  .po-intro { padding: 36px 0 28px; }
  .po-help  { padding: 36px 0 40px; }

  /* The shared .cp-body h1 is 60px at EVERY width, inherited from the legal-page
     parity sheet where matching Divi exactly was the goal. On a 375px screen that
     wraps "Pay Online" onto two lines and burns roughly half the viewport before a
     tenant can see the payment warning, let alone the portal. This page is a rebuild,
     not a parity port, so the type scale is ours to set -- and getting a paying tenant
     to the portal is the whole job. The four parity pages are untouched: this is
     scoped to .po-intro. */
  .po-intro h1 { font-size: 38px; line-height: 44px; margin-bottom: 12px; }
  .po-intro h2 { font-size: 24px; line-height: 30px; }
}

/* ===========================================================================
   /find-a-unit/ and /self-storage/ — rebuilt 2026-09-16, same call as
   /pay-online/: rebuild on the shell rather than reproduce the Divi layout.
   ---------------------------------------------------------------------------
   Both END IN THE DIVI FACILITY DIRECTORY on the old page, and both DROP it
   here (dirs=false) in favour of the shell's own CTA + footer. That is safe and
   was checked, not assumed: the 66 facility links in that directory also appear
   on /storage-locations/ and all three /self-storage/<state>/ hubs -- 62 unique
   facility links each -- and those four pages are ALREADY on the shell and keep
   their directory. So nothing is orphaned; the links sit one click away on
   pages whose whole job is that index.
   ⚠️ This is the OPPOSITE conclusion to storage-locations, where dropping the
   directory was rejected. The difference is that there the directory WAS the
   page; here it is a redundant footer block.

   ⚠️ /self-storage/ rendered 31 headings of which only 14 were real: 8 wrapped
   nothing but an <img> and 9 were completely empty, used as Divi spacers. A
   screen reader announced 31 headings, 17 of them silent. Every REAL heading
   keeps its original level (1 h1 + 9 h2 + 4 h3 = 14); only the non-headings are
   gone. That is not a heading-level change.
   =========================================================================== */

/* ---- /find-a-unit/ ----
   Reproduces the Divi design, measured off live 2026-09-16 at clientWidth 1265:
   hero toppay.jpg cover / 50% 50%, padding 24px 0 23px, h1 77px/100.1px/700 left;
   navy rule 52px; grey band #787878 padding 50.59px 0 with a 56px/700 white kicker,
   three 300px columns in a 1012px row, 93x93 numerals, h2 23px/23px/700 white,
   body 17px/27.2px white; white band padding 50.59px 0 with a 56px/700 navy heading,
   20px/27.2px body, and grey #787878 pills at 20px/500, 6px 20px, radius 8px.

   TWO DELIBERATE DEVIATIONS FROM LIVE, both disclosed:
   1. Pills are EQUAL WIDTH. Live sizes each to its text (Oklahoma 146, Texas 95,
      Arkansas 132 -- still unequal at 1671px, so this is not a breakpoint effect).
      The reference screenshot shows them equal, and equal reads better.
   2. Navy is the brand --navy #003A60 (Pantone 2965C), not Divi's #0E3255, which
      [[website-brand-tokens]] records as an invented value. It also keeps the hero
      title consistent with the shell header directly above it. */
/* Hero geometry measured on live at cw 1671: section 325px tall, h1 box 110px
   (100.1px line-height + 10px padding-bottom), 116px above it and 99px below.
   116 + 110 + 99 = 325 exactly, so the padding carries the spacing and the h1
   stays a plain box -- simpler than reproducing Divi's section+row+column nest. */
.fau-hero { background: #fff url("/wp-content/uploads/2025/01/toppay.jpg") 50% 50% / cover no-repeat;
            padding: 116px 0 99px; }
.fau-hero .cp-in { width: 80%; max-width: 1080px; margin: 0 auto; }
.fau-hero h1 { font-size: 77px; line-height: 100.1px; font-weight: 700;
               color: var(--navy, #003A60); text-align: left;
               margin: 0; padding: 0 0 10px; }

.fau-rule { background: var(--navy, #003A60); height: 52px; }

.fau-steps { background: #787878; padding: 50.59px 0; }
.fau-steps .cp-in { width: 80%; max-width: 1080px; margin: 0 auto; }
.fau-kicker { font-size: 56px; line-height: 56px; font-weight: 700; color: #fff;
              text-align: center; padding-bottom: 46px; margin: 0; }
.fau-steplist { list-style: none; margin: 0; padding: 0;
                display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.fau-step { text-align: center; }
.fau-step img { width: 93px; height: 93px; margin: 0 auto 18px; display: block; }
.fau-step h2 { font-size: 23px; line-height: 23px; font-weight: 700; color: #fff;
               text-align: center; padding-bottom: 12px; margin: 0; }
.fau-step p  { font-size: 17px; line-height: 27.2px; color: #fff;
               text-align: center; padding-bottom: 0; margin: 0; }

.fau-states { background: #fff; padding: 50.59px 0; }
.fau-states .cp-in { width: 80%; max-width: 1080px; margin: 0 auto; }
.fau-states-h   { font-size: 56px; line-height: 56px; font-weight: 700;
                  color: var(--navy, #003A60); text-align: center;
                  padding-bottom: 22px; margin: 0; }
.fau-states-sub { font-size: 20px; line-height: 27.2px; color: #000;
                  text-align: center; padding-bottom: 34px; margin: 0; }
.fau-states-btns { list-style: none; margin: 0; padding: 0;
                   display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px;
                   justify-items: center; }
.fau-btn { display: inline-block; background: #787878; color: #fff;
           font-family: var(--font-sans, 'Montserrat', Helvetica, Arial, sans-serif);
           font-size: 20px; line-height: 34px; font-weight: 500;
           padding: 6px 20px; border-radius: 8px; text-decoration: none;
           min-width: 190px; text-align: center;
           transition: background .15s ease; }
.fau-btn:hover, .fau-btn:focus-visible { background: var(--navy, #003A60); color: #fff; }

/* ---- /self-storage/ ----
   Reproduces the Divi design on Callum's instruction (two reference screenshots,
   2026-09-16). Every value measured off the ORIGINAL page at cw 1671 -- staging was
   temporarily reverted to Divi to take these, then restored.

   Sections: hero business.jpg (sec pad 24/0/23 + inner 61/0/68, h 295, h1 54px/70.2px/
   700 LEFT in a 1080 container) / navy rule h 42 / full-bleed split (row 1671, two 836
   halves: left #787878 padding 80px, right business2.jpg; row carries
   circle-background-pattern.png repeated over #787878) / white sizes band (pad 13/0/21)
   with a 1466-wide white card, radius 20, shadow rgba(0,0,0,.3) 0 2px 18px, pad 27/50,
   four 342 columns / white options band with a 1466-wide rgba(120,120,120,.24) panel,
   radius 20, holding four #0E3255 cards radius 20 pad 20/30 / second split, right half
   b3.jpg.

   ⚠️ The diagonal hatch visible in the reference screenshots across the sizes and
   options bands is a SCREENSHOT ARTIFACT, not design: circle-background-pattern.png is
   referenced EXACTLY ONCE in the live CSS, on the split rows only, and both those
   sections compute a plain white background. Do not chase it.

   Deviation, same as find-a-unit: navy is the brand --navy #003A60, not Divi's #0E3255.
   Divi's 182px bottom padding on the option cards is its height-equalisation hack and is
   replaced by grid stretch. */

.ss-hero { background: #fff url("/wp-content/uploads/2025/03/business.jpg") 50% 50% / cover no-repeat;
           padding: 105px 0 110px; }   /* 105 + 80.2 (h1 box) + 110 = 295.2, live's 295 */
.ss-hero .cp-in { width: 80%; max-width: 1080px; margin: 0 auto; }
.ss-hero h1 { font-size: 54px; line-height: 70.2px; font-weight: 700;
              color: var(--navy, #003A60); text-align: left; margin: 0; padding: 0 0 10px; }

.ss-rule { background: var(--navy, #003A60); height: 42px; }

/* Full-bleed two-up: text half on the patterned grey, photo half bleeding to the edge. */
.ss-split { display: grid; grid-template-columns: 1fr 1fr;
            background: #787878 url("/wp-content/uploads/2025/03/circle-background-pattern.png") left top repeat; }
.ss-split-text { padding: 80px; display: flex; align-items: center; }
.ss-split-in { width: 100%; }
/* Live puts ~88px between this heading and its paragraph, but it gets there with TWO
   empty <p>&nbsp;</p> Divi spacers rather than spacing. The gap is clearly intentional in
   the design, so it is reproduced as padding -- real spacing, no junk nodes, and it keeps
   the heading count honest (those empty paragraphs were part of the 17 fake headings and
   spacer elements this page was carrying). */
.ss-split-in h3 { font-size: 35px; line-height: 35px; font-weight: 700; color: #fff;
                  text-align: left; margin: 0; padding: 0 0 52px; }
.ss-split-in p  { font-size: 16px; line-height: 27.2px; font-weight: 500; color: #fff;
                  text-align: left; margin: 0; padding: 0 0 16px; }
.ss-split-in p:last-child { padding-bottom: 0; }
/* Live's split bands measure 488/551; this rebuild lands at ~456/518. The whole gap is
   Divi spacer paragraphs (two empty <p>&nbsp;</p> per band) rather than any design value,
   so it is reproduced as real spacing up to the point where it still LOOKS right, and not
   padded further just to match a number derived from junk nodes. */
.ss-split-cta { padding-top: 34px; }
.ss-split-photo { background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;
                  min-height: 328px; }
.ss-photo-intro  { background-image: url("/wp-content/uploads/2025/03/business2.jpg"); }
.ss-photo-budget { background-image: url("/wp-content/uploads/2025/03/b3.jpg"); }

.ss-btn { display: inline-block; background: var(--navy, #003A60); color: #fff;
          font-family: var(--font-sans, 'Montserrat', Helvetica, Arial, sans-serif);
          font-size: 20px; line-height: 34px; font-weight: 700;
          padding: 6px 20px; border-radius: 3px; text-decoration: none;
          transition: background .15s ease; }
.ss-btn:hover, .ss-btn:focus-visible { background: var(--navy-hover, #004A78); color: #fff; }

.ss-sizes   { background: #fff; padding: 13px 0 21px; }
.ss-options { background: #fff; padding: 0 0 2px; }
.ss-sech  { font-size: 23px; line-height: 27.6px; font-weight: 700; color: var(--navy, #003A60);
            text-align: center; margin: 0; padding: 27px 0 10px; }
.ss-sech2 { font-size: 28px; line-height: 28px; font-weight: 700; color: var(--navy, #003A60);
            text-align: center; margin: 0; padding: 27px 0 10px; }
.ss-help  { font-size: 23px; line-height: 27.6px; font-weight: 700; color: var(--navy, #003A60);
            text-align: center; margin: 0; padding: 27px 0 10px; }

.ss-cardwrap, .ss-panel { width: 88%; max-width: 1466px; margin: 0 auto; border-radius: 20px;
                          padding: 27px 50px; box-sizing: border-box; }
.ss-cardwrap { background: #fff; box-shadow: rgba(0, 0, 0, .3) 0 2px 18px 0; }
.ss-panel    { background: rgba(120, 120, 120, .24); }

.ss-card { text-align: left; }
.ss-card .ss-icon { width: 99px; height: 87px; display: block; margin: 0 auto 14px; }
.ss-card h2 { font-size: 19px; line-height: 19px; font-weight: 700; color: var(--navy, #003A60);
              text-align: center; margin: 0; padding: 0 0 18px; }
.ss-card p  { font-size: 16px; line-height: 27.2px; color: #000; text-align: left;
              margin: 0; padding: 0; }

.ss-optcard { background: var(--navy, #003A60); border-radius: 20px; padding: 20px 30px 28px; }
/* The four illustrations are 136/118/112/118 tall, which staggered the card titles by
   24px. A fixed 136px box with object-fit:contain lands every title on the same line. */
.ss-optcard img { width: 145px; height: 136px; object-fit: contain; object-position: center bottom;
                  display: block; margin: 0 auto 14px; }
.ss-optcard h2 { font-size: 19px; line-height: 19px; font-weight: 700; color: #fff;
                 text-align: center; margin: 0; padding: 0 0 18px; }
.ss-optcard p  { font-size: 16px; line-height: 27.2px; color: #fff; text-align: left;
                 margin: 0; padding: 0; }

@media (max-width: 980px) {
  .fau-steplist { grid-template-columns: 1fr; gap: 34px; }
  .fau-states-btns { grid-template-columns: 1fr; gap: 14px; }
  .fau-kicker, .fau-states-h { font-size: 40px; line-height: 44px; }
  .fau-hero { padding: 72px 0 60px; }
  .fau-hero h1 { font-size: 56px; line-height: 68px; }
  .ss-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .ss-grid-4, .ss-grid-2 { grid-template-columns: 1fr; }
  .fau-hero { padding: 44px 0 40px; }
  .fau-hero h1 { font-size: 38px; line-height: 46px; }
  .ss-intro h1 { font-size: 38px; line-height: 44px; margin-bottom: 12px; }
  .fau-kicker, .fau-states-h { font-size: 32px; line-height: 38px; }
  .fau-steps, .fau-states, .ss-sizes, .ss-options { padding: 34px 0 38px; }
}

/* ⚠️ LIST RESET -- MUST BE ID-SCOPED, AND THIS IS NOT OPTIONAL.
   compat.css restates Divi's own rules verbatim:
       #left-area ol, .entry-content ol { list-style-type: decimal; list-style-position: inside }
       #left-area ul, .entry-content ul { list-style-type: disc; padding: 0 0 23px 1em }
   Those selectors are (1,0,1). A plain `.fau-steplist { list-style: none }` is (0,1,0)
   and LOSES -- measured on staging 2026-09-16: the ol's computed list-style came back
   `decimal / inside` and a faint "1 2 3" rendered above each numbered circle, plus the
   ul grids inherited a 1em inset and disc bullets.
   The page wrapper is <div id="arbor-corp" class="cp">, so scoping by that id gives
   (1,1,0)/(1,1,1) which outranks (1,0,1) on class count. Do NOT "simplify" these back
   to bare class selectors, and do not reach for !important -- the id is already there. */
#arbor-corp .fau-steplist,
#arbor-corp .fau-states-btns,
#arbor-corp .ss-grid {
  list-style: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#arbor-corp .fau-steplist > li,
#arbor-corp .fau-states-btns > li,
#arbor-corp .ss-grid > li {
  list-style: none;
  list-style-type: none;
  display: block;
  padding: 0;
  margin: 0;
  line-height: normal;
}
#arbor-corp .fau-steplist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
#arbor-corp .fau-states-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; justify-items: center; }
#arbor-corp .ss-grid { display: grid; gap: 26px; }
#arbor-corp .ss-grid-4 { grid-template-columns: repeat(4, 1fr); }
#arbor-corp .ss-grid-2 { grid-template-columns: repeat(2, 1fr); }
#arbor-corp .ss-grid > li.ss-card    { display: block; padding: 0; }
#arbor-corp .ss-grid > li.ss-optcard { display: block; padding: 20px 30px 28px; }
#arbor-corp .ss-grid { align-items: stretch; }

@media (max-width: 980px) {
  .ss-split { grid-template-columns: 1fr; }
  .ss-split-text { padding: 44px 28px; }
  .ss-split-photo { min-height: 260px; }
  .ss-cardwrap, .ss-panel { width: 92%; padding: 24px 24px; }
  .ss-hero { padding: 56px 0 60px; }
  .ss-hero h1 { font-size: 40px; line-height: 50px; }
  #arbor-corp .fau-steplist { grid-template-columns: 1fr; gap: 34px; }
  #arbor-corp .fau-states-btns { grid-template-columns: 1fr; gap: 14px; }
  #arbor-corp .ss-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  #arbor-corp .ss-grid-4, #arbor-corp .ss-grid-2 { grid-template-columns: 1fr; }
  .ss-hero { padding: 40px 0 44px; }
  .ss-hero h1 { font-size: 34px; line-height: 42px; }
  .ss-split-in h3 { font-size: 27px; line-height: 32px; }
  .ss-sech2 { font-size: 24px; line-height: 28px; }
}

/* ⚠️ `.cp-body a` (0,1,1) OUTRANKS shell.css's `.btn-primary` (0,1,0), so a shell
   button placed inside .cp-body renders NAVY TEXT ON A NAVY GROUND -- invisible.
   Measured on staging 2026-09-16: /self-storage/'s intro CTA computed
   color rgb(0,58,96) on background rgb(0,58,96), a 231x55 solid navy block with a
   readable label nobody could read. It is not caught by any structural check --
   the link, its href and its text are all present and correct.
   /pay-online/ escaped only by accident: its button sits in .po-help, outside
   .cp-body, so the rule never reached it (verified on live).
   Scope by the wrapper id to win, and set colour on BOTH states. */
#arbor-corp a.btn.btn-primary,
#arbor-corp a.btn.btn-primary:hover,
#arbor-corp a.btn.btn-primary:focus-visible { background: var(--navy, #003A60); color: #fff; }
#arbor-corp a.btn.btn-invert,
#arbor-corp a.btn.btn-invert:hover,
#arbor-corp a.btn.btn-invert:focus-visible { background: #fff; color: var(--navy, #003A60); }

/* ===========================================================================
   SHARED CORPORATE COMPONENTS (cpx-*) — introduced for /about-us/ 2026-09-16
   ---------------------------------------------------------------------------
   The remaining corporate pages reuse the same handful of Divi section shapes:
   a photo hero, a navy rule, a grey/photo split, a full-bleed photo band with
   copy over it, an n-up card grid, a decorative photo band, and a translucent
   navy quote card over a photo. They are built ONCE here as cpx-* so each new
   page is content plus a per-page background image, not a fresh stylesheet.
   Per-page images live in the small block at the end of each page's section.

   Deliberately NOT a refactor of the existing .ss-* / .fau-* / .po-* rules:
   those are live and verified, and rewriting them to share a base would put
   four working pages at risk to save duplication. Fold them in later, or don't.

   All values measured off live /about-us/ at cw 1671 on 2026-09-16.
   Navy is the brand --navy #003A60, not Divi's #0E3255 (see website-brand-tokens).
   =========================================================================== */

.cpx-hero { background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;
            background-color: #fff; padding: 116px 0 99px; }
.cpx-hero .cp-in { width: 80%; max-width: 1080px; margin: 0 auto; }
.cpx-hero h1 { font-size: 77px; line-height: 100.1px; font-weight: 700; color: #fff;
               text-align: left; margin: 0; padding: 0 0 10px; }

.cpx-rule { background: var(--navy, #003A60); height: 55px; }

.cpx-split { display: grid; grid-template-columns: 1fr 1fr;
             background: #787878 url("/wp-content/uploads/2025/03/circle-background-pattern.png") left top repeat; }
.cpx-split-text { padding: 90px 80px; display: flex; align-items: center; }
.cpx-split-in { width: 100%; }
.cpx-split-in p { font-size: 18px; line-height: 32.4px; font-weight: 500; color: #fff;
                  text-align: left; margin: 0; padding: 0 0 18px; }
.cpx-split-cta { padding: 12px 0 0 !important; }
.cpx-split-photo { background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;
                   min-height: 320px; }

.cpx-btn { display: inline-block; background: var(--navy, #003A60); color: #fff;
           font-family: var(--font-sans, 'Montserrat', Helvetica, Arial, sans-serif);
           font-size: 20px; line-height: 34px; font-weight: 700;
           padding: 6px 20px; border-radius: 3px; text-decoration: none;
           transition: background .15s ease; }
.cpx-btn:hover, .cpx-btn:focus-visible { background: var(--navy-hover, #004A78); color: #fff; }

/* Full-bleed photo band with copy over it. Live row is 1593 wide inside 1671. */
.cpx-band { background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;
            padding: 58px 0 62px; }
.cpx-band-in { width: 95%; max-width: 1593px; margin: 0 auto; }
.cpx-band-in p { font-size: 20px; line-height: 30px; font-weight: 600; color: var(--navy, #003A60);
                 text-align: center; margin: 0; padding: 0 0 20px; }
.cpx-band-cta { padding: 8px 0 0 !important; text-align: center; }

.cpx-cards { background: #fff; padding: 58px 0 64px; }
.cpx-cards .cp-in { width: 80%; max-width: 1080px; margin: 0 auto; }
.cpx-cards h2 { font-size: 28px; line-height: 28px; font-weight: 700; color: var(--navy, #003A60);
                text-align: center; margin: 0; padding: 0 0 28px; }
.cpx-grid { width: 80%; max-width: 1080px; margin: 0 auto; display: grid; gap: 30px; }
.cpx-grid-4 { grid-template-columns: repeat(4, 1fr); }
.cpx-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cpx-card { text-align: center; }
.cpx-card .cpx-icon { width: 95px; height: 83px; display: block; margin: 0 auto 14px; }
.cpx-card .cpx-step { width: 100%; max-width: 241px; height: auto; display: block; margin: 0 auto 14px; }
.cpx-card h3 { font-size: 24px; line-height: 24px; font-weight: 700; color: var(--navy, #003A60);
               text-align: center; margin: 0; padding: 0 0 10px; }
.cpx-card p  { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--navy, #003A60);
               text-align: center; margin: 0; padding: 0; }

/* Decorative photo band -- no content at all on live, 499px tall. */
.cpx-photoband { background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;
                 height: 499px; }

/* Translucent navy card floated over a photo. */
.cpx-quote { background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;
             padding: 156px 0 54px; }
.cpx-quote-card { width: 80%; max-width: 1334px; margin: 0 auto; border-radius: 20px;
                  background: rgba(0, 58, 96, .86); padding: 124px 50px; box-sizing: border-box; }
.cpx-quote-card h3 { font-size: 35px; line-height: 35px; font-weight: 700; color: #fff;
                     text-align: center; margin: 0; padding: 0 0 10px; }
.cpx-quote-card p  { font-size: 20px; line-height: 27.2px; font-weight: 500; color: #fff;
                     text-align: center; margin: 0; padding: 0; }

/* Per-page background images.
   ⚠️ UPLOAD FOLDERS ARE PER-ASSET, NOT PER-PAGE. ac3.png, ab2.png and ab5.png live under
   uploads/2026/01/ while slide2-1.png and slide3.png are under 2025/01/. Assuming a folder
   from a sibling page produced two silent 404s here -- and because the hero h1 is WHITE,
   the missing hero image rendered as white text on white: an invisible page title with no
   layout error at all. Read the computed background-image off the live element, and curl
   every path before using it. */
.cpx-hero-about      { background-image: url("/wp-content/uploads/2026/01/ac3.png"); }
.cpx-photo-about     { background-image: url("/wp-content/uploads/2026/01/ab2.png"); }
.cpx-band-about      { background-image: url("/wp-content/uploads/2025/01/slide2-1.png"); }
.cpx-photoband-about { background-image: url("/wp-content/uploads/2025/01/slide3.png"); }
.cpx-quote-about     { background-image: url("/wp-content/uploads/2026/01/ab5.png"); }

/* List reset -- same (1,0,1) Divi problem as the other grids; id-scoped to win. */
#arbor-corp .cpx-grid { list-style: none; list-style-type: none; padding: 0; margin: 0 auto;
                        align-items: stretch; }
#arbor-corp .cpx-grid > li { list-style: none; list-style-type: none; display: block;
                             padding: 0; margin: 0; line-height: normal; }
/* .cp-body a (0,1,1) would repaint these navy-on-navy -- see the pay-online note. */
#arbor-corp a.cpx-btn, #arbor-corp a.cpx-btn:hover, #arbor-corp a.cpx-btn:focus-visible {
  background: var(--navy, #003A60); color: #fff; }

@media (max-width: 980px) {
  .cpx-split { grid-template-columns: 1fr; }
  .cpx-split-text { padding: 44px 28px; }
  .cpx-split-photo { min-height: 260px; }
  .cpx-hero { padding: 72px 0 60px; }
  .cpx-hero h1 { font-size: 56px; line-height: 68px; }
  #arbor-corp .cpx-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .cpx-photoband { height: 320px; }
  .cpx-quote { padding: 80px 0 40px; }
  .cpx-quote-card { padding: 44px 28px; }
}
@media (max-width: 767px) {
  .cpx-hero { padding: 44px 0 40px; }
  .cpx-hero h1 { font-size: 38px; line-height: 46px; }
  #arbor-corp .cpx-grid-4, #arbor-corp .cpx-grid-3 { grid-template-columns: 1fr; }
  .cpx-quote-card h3 { font-size: 27px; line-height: 32px; }
  .cpx-photoband { height: 220px; }
}

/* ---- /acquisitions/ — additional cpx components, measured on live at cw 1671 ----
   Its hero IS the split, with a NAVY left half (not the grey used on about-us /
   self-storage). Then a photo band holding two translucent grey panels, then a white
   section of rounded panels, the last of which carries its own photo. */
/* Scoped to -navy so about-us keeps the 90px it was verified at. */
.cpx-split-navy .cpx-split-text { background: var(--navy, #003A60); padding: 131px 80px; }
.cpx-split-navy .cpx-split-in h1 { font-size: 35px; line-height: 35px; font-weight: 700;
                                   color: #fff; text-align: left; margin: 0; padding: 0 0 10px; }
.cpx-split-navy .cpx-split-in h2 { font-size: 30px; line-height: 30px; font-weight: 300;
                                   color: #fff; text-align: left; margin: 0; padding: 0 0 10px; }
.cpx-split-navy .cpx-split-in p  { font-size: 16px; line-height: 27.2px; font-weight: 500;
                                   color: #fff; text-align: left; margin: 0; padding: 0 0 16px; }

.cpx-panelband { background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;
                 padding: 13px 0 21px; }
.cpx-panels    { background: #fff; padding: 13px 0 21px; }

.cpx-panel { width: 88%; max-width: 1466px; margin: 0 auto 27px; border-radius: 20px;
             padding: 58px 50px; box-sizing: border-box; }
.cpx-panel:last-child { margin-bottom: 0; }
.cpx-panel-tint  { background: rgba(120, 120, 120, .61); }
.cpx-panel-white { background: #fff; }
.cpx-panel-photo { background-color: #fff; background-position: 50% 50%; background-size: cover;
                   background-repeat: no-repeat; padding: 52px 50px 87px; }

.cpx-panel-tint h2  { font-size: 24px; line-height: 24px; font-weight: 700; color: #fff;
                      text-align: center; margin: 0; padding: 0 0 10px; }
.cpx-panel-tint p   { font-size: 16px; line-height: 27.2px; font-weight: 500; color: #fff;
                      text-align: left; margin: 0; padding: 0 0 16px; }
.cpx-panel-white h2, .cpx-panel-photo h2 { font-size: 24px; line-height: 24px; font-weight: 700;
                      color: var(--navy, #003A60); text-align: center; margin: 0; padding: 0 0 10px; }
.cpx-panel-white p, .cpx-panel-photo p   { font-size: 16px; line-height: 27.2px; font-weight: 500;
                      color: #000; text-align: left; margin: 0; padding: 0 0 16px; }
.cpx-panel p:last-of-type { padding-bottom: 0; }
.cpx-panel-cta { padding: 20px 0 0 !important; text-align: center; }

.cpx-panels-head { width: 80%; max-width: 1080px; margin: 0 auto; padding: 27px 0 0; }
.cpx-panels-head h2 { font-size: 24px; line-height: 24px; font-weight: 700;
                      color: var(--navy, #003A60); text-align: center; margin: 0; padding: 0 0 10px; }

.cpx-photo-acq     { background-image: url("/wp-content/uploads/2026/01/ac1.png"); }
.cpx-panelband-acq { background-image: url("/wp-content/uploads/2026/01/ac2.png"); }
.cpx-panel-acqcta  { background-image: url("/wp-content/uploads/2026/01/ac3.png"); }

@media (max-width: 980px) {
  .cpx-panel, .cpx-panels-head { width: 92%; padding-left: 24px; padding-right: 24px; }
}

/* ---- /investor/ — measured on live at cw 1671 ----
   Hero is a photo section with copy in the left half and the right half left empty so
   the photo shows through. Then white / navy / plain rounded panels at 1466, and 4-up
   check rows at 405 per column inside a 1620 row. */
.cpx-splitphoto { background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;
                  display: grid; grid-template-columns: 1fr 1fr; }
.cpx-splitphoto-text { padding: 80px; display: flex; align-items: center; }
.cpx-splitphoto-text h1 { font-size: 35px; line-height: 35px; font-weight: 700; color: #fff;
                          text-align: left; margin: 0; padding: 0 0 10px; }
.cpx-splitphoto-text p  { font-size: 16px; line-height: 27.2px; font-weight: 500; color: #fff;
                          text-align: left; margin: 0; padding: 0 0 16px; }

.cpx-btn-grey { background: #787878; }
.cpx-btn-grey:hover, .cpx-btn-grey:focus-visible { background: #5f5f5f; }
#arbor-corp a.cpx-btn.cpx-btn-grey,
#arbor-corp a.cpx-btn.cpx-btn-grey:hover { background: #787878; color: #fff; }

.cpx-panel-navy  { background: var(--navy, #003A60); }
.cpx-panel-navy h2 { font-size: 24px; line-height: 24px; font-weight: 700; color: #fff;
                     text-align: center; margin: 0; padding: 0 0 10px; }
.cpx-panel-navy p  { font-size: 19px; line-height: 27.2px; font-weight: 500; color: #fff;
                     text-align: left; margin: 0; padding: 0 0 16px; }
.cpx-panel-plain { background: transparent; }
.cpx-panel-plain h2 { font-size: 24px; line-height: 24px; font-weight: 700;
                      color: var(--navy, #003A60); text-align: center; margin: 0; padding: 0 0 10px; }
.cpx-panel-plain p  { font-size: 16px; line-height: 27.2px; font-weight: 500; color: #000;
                      text-align: left; margin: 0; padding: 0 0 16px; }

.cpx-checks { background: #fff; padding: 19px 0 27px; }
.cpx-checks .cp-in { width: 80%; max-width: 1080px; margin: 0 auto; }
.cpx-checks h2 { font-size: 23px; line-height: 23px; font-weight: 700; color: var(--navy, #003A60);
                 text-align: center; margin: 0; padding: 0 0 24px; }
.cpx-checkgrid { width: 96%; max-width: 1620px; margin: 0 auto; padding: 27px 0;
                 display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cpx-check { text-align: center; }
.cpx-check img { width: 97px; height: 86px; display: block; margin: 0 auto 12px; }
.cpx-check p { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--navy, #003A60);
               text-align: center; margin: 0; padding: 0; }

.cpx-splitphoto-inv { background-image: url("/wp-content/uploads/2026/01/in1.png"); }
.cpx-photo-inv      { background-image: url("/wp-content/uploads/2026/01/in2.png"); }

#arbor-corp .cpx-checkgrid { list-style: none; list-style-type: none; padding: 27px 0; margin: 0 auto;
                             display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
#arbor-corp .cpx-checkgrid > li { list-style: none; display: block; padding: 0; margin: 0; }

@media (max-width: 980px) {
  .cpx-splitphoto { grid-template-columns: 1fr; }
  .cpx-splitphoto-text { padding: 44px 28px; }
  #arbor-corp .cpx-checkgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  #arbor-corp .cpx-checkgrid { grid-template-columns: 1fr; }
}

/* Per-page spacing. The cpx-* components are shared, but Divi's row padding differs per
   page, so each page carries a small modifier block rather than the base being retuned --
   retuning the base would move pages already verified live. */
.cpx-splitphoto-inv .cpx-splitphoto-text { padding: 108px 80px; }
.cpx-checks { padding: 73px 0 81px; }
.cpx-split-inv .cpx-split-text { padding: 63px 80px; }
.cpx-panels-inv .cpx-panel { padding: 44px 50px; }
.cpx-panels-inv .cpx-panel-photo { padding: 44px 50px 79px; }
@media (max-width: 980px) {
  .cpx-splitphoto-inv .cpx-splitphoto-text { padding: 44px 28px; }
  .cpx-split-inv .cpx-split-text { padding: 44px 28px; }
  .cpx-checks { padding: 40px 0 44px; }
}

/* ---- /contact/ — measured on live at cw 1671 ----
   Hero topcontact.jpg 325px, navy rule 55px, then one white section holding the intro,
   a centred Find A Unit button, and a grey #787878 panel (1298 wide, two 613 halves at
   20px padding): contact detail + logo on the left, WPForms 2012 on the right.
   ⚠️ The form goes in as the SHORTCODE [wpforms id="2012" title="false"], never as the
   extractor's captured render -- the loader passes the snippet through do_shortcode() at
   priority 9, so the real form is built by WPForms and keeps its nonce, validation and
   Site Kit conversion tracking. A baked-in copy would post to nothing. */
.cpx-hero-contact { background-image: url("/wp-content/uploads/2025/02/topcontact.jpg"); }
.cpx-hero-contact h1 { color: var(--navy, #003A60); }

.cpx-contact { background: #fff; padding: 54px 0; }
.cpx-contact .cp-in { width: 80%; max-width: 1080px; margin: 0 auto; }
.cpx-contact-intro p { font-size: 16px; line-height: 27.2px; font-weight: 500; color: #666;
                       text-align: center; margin: 0; padding: 0 0 16px; }
.cpx-contact-cta { text-align: center; padding: 14px 0 27px; }
.cpx-contact-panel { width: 88%; max-width: 1298px; margin: 0 auto; background: #787878;
                     display: grid; grid-template-columns: 1fr 1fr; gap: 0;
                     padding: 27px 0; box-sizing: border-box; }
.cpx-contact-info, .cpx-contact-form { padding: 20px; box-sizing: border-box; }
.cpx-contact-info p { font-size: 16px; line-height: 27.2px; font-weight: 500; color: #fff;
                      text-align: left; margin: 0; padding: 0 0 16px; }
.cpx-contact-info a:not(.cpx-btn) { color: #fff; }
.cpx-contact-btns { display: flex; gap: 12px; flex-wrap: wrap; padding: 6px 0 20px !important; }
.cpx-contact-info img { max-width: 260px; height: auto; display: block; }
.cpx-contact-form { background: transparent; }
.cpx-contact-form label, .cpx-contact-form .wpforms-field-label { color: #fff; }

@media (max-width: 980px) {
  .cpx-contact-panel { grid-template-columns: 1fr; width: 92%; }
}

/* ---- /tenant-protection/ — measured on live at cw 1671 ----
   Reuses the about-us components (hero, rule, 4-up and 3-up cards, photo band, quote)
   plus a SafeLease embed and a navy CTA band.

   ⚠️ THE onload WAS DROPPED, DELIBERATELY. Live's iframe carries
   onload="iframeLoaded()" and that function is DEFINED NOWHERE on the page (grepped: one
   occurrence, the call site). Verified on live 2026-09-16: every load throws
   `ReferenceError: iframeLoaded is not defined`. The iframe has a fixed height attribute,
   so nothing depended on the callback -- keeping it would only reproduce a JS error.
   The embed itself is SafeLease's surface and is otherwise untouched. */
.cpx-embed { background: #fff; padding: 54px 0; }
.cpx-embed-in { width: 80%; max-width: 1080px; margin: 0 auto; }
.cpx-embed-in iframe { display: block; width: 100%; border: 0; }

.cpx-ctaband { background: var(--navy, #003A60); padding: 6px 0 5px; }
.cpx-ctaband .cp-in { width: 80%; max-width: 1080px; margin: 0 auto;
                      display: flex; align-items: center; justify-content: center;
                      gap: 28px; flex-wrap: wrap; min-height: 104px; }
.cpx-ctaband-h   { color: #fff; font-size: 20px; line-height: 28px; font-weight: 700;
                   margin: 0; padding: 0; }
.cpx-ctaband-btn { margin: 0; padding: 0 !important; }
.cpx-btn-invert { background: #fff; color: var(--navy, #003A60); }
#arbor-corp a.cpx-btn.cpx-btn-invert,
#arbor-corp a.cpx-btn.cpx-btn-invert:hover { background: #fff; color: var(--navy, #003A60); }

.cpx-hero-tenant      { background-image: url("/wp-content/uploads/2025/01/tenant.jpg"); }
.cpx-hero-tenant h1   { color: var(--navy, #003A60); }
.cpx-photoband-tenant { background-image: url("/wp-content/uploads/2025/01/slide3.png"); height: 528px; }
.cpx-quote-tenant     { background-image: url("/wp-content/uploads/2025/01/ar4.png"); padding: 221px 0 54px; }

@media (max-width: 980px) {
  .cpx-ctaband .cp-in { min-height: 0; padding: 22px 0; }
  .cpx-photoband-tenant { height: 300px; }
  .cpx-quote-tenant { padding: 90px 0 40px; }
}

/* ⚠️ Mobile padding overrides MUST match the specificity of the desktop rule they undo.
   `.cpx-split-navy .cpx-split-text{padding:131px 80px}` is (0,2,0); the mobile
   `.cpx-split-text{padding:44px 28px}` is (0,1,0) and LOSES, so /acquisitions/ kept 80px
   side padding at 375px and its split ran 386px wide in a 375px viewport. Measured, not
   assumed. Any future per-page padding modifier needs its own mobile twin. */
@media (max-width: 980px) {
  .cpx-split-navy .cpx-split-text { padding: 44px 28px; }
  .cpx-splitphoto-inv .cpx-splitphoto-text { padding: 44px 28px; }
  .cpx-split-inv .cpx-split-text { padding: 44px 28px; }
  .cpx-panels-inv .cpx-panel { padding: 30px 24px; }
  .cpx-panels-inv .cpx-panel-photo { padding: 30px 24px 50px; }
}

/* ---- /acquisitions/ fixes, Callum 2026-09-16 ----
   1. The hero button sat NAVY ON NAVY (#003A60 on the #003A60 panel), so only its white
      label read and the shape itself was a ghost outline. Made a solid white fill with
      navy text -- same treatment as the shell's own .btn-invert on the CTA band, so the
      button reads as a button and there is no white boundary around empty navy.
   2. The "Let's Talk" panel sits on a DARK photo (ac3.png) but inherited the white-panel
      body colour #000, so its copy was black on a dark image. Now white, with a text
      shadow so it stays legible wherever the photo is light. */
#arbor-corp .cpx-split-navy a.cpx-btn,
#arbor-corp .cpx-split-navy a.cpx-btn:hover,
#arbor-corp .cpx-split-navy a.cpx-btn:focus-visible {
  background: #fff;
  color: var(--navy, #003A60);
  border: 0;
}
#arbor-corp .cpx-split-navy a.cpx-btn:hover { background: var(--navy-tint, #E6EEF4); }

.cpx-panel-photo p,
.cpx-panel-photo h2,
.cpx-panel-photo li { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.cpx-panel-photo a:not(.cpx-btn) { color: #fff; }

/* ---- /investor/ hero CTA, Callum 2026-09-16 ----
   Was "Invest in Arborstone Storage Today" plus a grey "Investor Portal" that rendered
   detached over on the photo half. Now two buttons in one row, identical styling:
   Email Us and Investor Portal.

   ⚠️ HREFS CORRECTED AT THE SAME TIME. My first build pointed these at /contact/ and
   /pay-online/ -- placeholders, not what live does. Live's real targets, reproduced here:
       Email Us / Start a conversation -> mailto:investorrelations@arborstonestorage.com
       Investor Portal / Login / Invest in Arborstone Storage Today -> https://app.investnext.com/
   External links carry target="_blank" rel="noopener" exactly as live does -- noopener,
   never noreferrer, which is the house standard and matters because a noreferrer on this
   path would break attribution.

   Buttons sit on a dark photo, so they are a solid white fill with navy text (the same
   treatment the acquisitions hero button got) rather than a ghost outline. */
.cpx-btnrow { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cpx-btn-onphoto { background: #fff; color: var(--navy, #003A60); }
#arbor-corp a.cpx-btn.cpx-btn-onphoto,
#arbor-corp a.cpx-btn.cpx-btn-onphoto:focus-visible { background: #fff; color: var(--navy, #003A60); }
#arbor-corp a.cpx-btn.cpx-btn-onphoto:hover { background: var(--navy-tint, #E6EEF4); color: var(--navy, #003A60); }

/* Hero legibility scrim. The investor hero puts white copy straight onto in1.png, which
   is a bright sunset -- readable over the dark doors, not over the sky. Live has the same
   problem; this adds a left-weighted dark gradient behind the text half only, so the
   photo still reads as a photo on the right. Pure CSS, no image change. */
.cpx-splitphoto { position: relative; }
.cpx-splitphoto::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,26,43,.86) 0%, rgba(0,26,43,.72) 38%, rgba(0,26,43,0) 68%); }
.cpx-splitphoto > * { position: relative; z-index: 1; }
@media (max-width: 980px) {
  .cpx-splitphoto::before { background: rgba(0, 26, 43, .74); }
}

/* ---- href audit against live, 2026-09-16 ----
   /contact/  Account Access + Pay Online: live opens them in a new tab
     (target=_blank rel=noopener) and points at the ABSOLUTE
     https://www.arborstonestorage.com/pay-online -- note no trailing slash, so live takes
     a 301 hop on every click. Reproduced the new-tab behaviour; kept the href
     root-relative (/pay-online/) which avoids both the redirect and the cross-env
     absolute-URL problem this project has hit before.
   /tenant-protection/  "Select a Location": live's markup is literally
     <a class="et_pb_button ..." href="">Select a Location</a> -- an EMPTY href, so the
     button just reloads the page. Pointed at /find-a-unit/, which is where the identical
     "Explore Our Storage Unit Locations / Select a Location" block goes elsewhere on the
     site. This is a deviation from live BECAUSE live is broken. */

/* ===========================================================================
   Texas / Arkansas directory (Divi global 220) -- re-laid 2026-09-17.
   Divi: one row of two 1/2 columns for the headings, then five 1/5 columns
   (TX, TX, TX + white vertical rule, AR, AR). The first port poured all nine
   fragments into the shared 4-column .cp-dirgrid, so the headings sat inside
   the grid, the Texas list rendered twice (a phone-only Divi variant lost its
   visibility flag) and the rule image floated at the wrong edge.
   The rule is a border on column 3 instead of Divi's 3x179 li.jpg -- same white
   line, same place, no image request. <=980px stacks to ONE column (Divi
   stacked 1/5 columns fully) so the in-flow "Arkansas" heading reads in order.
   =========================================================================== */
.cp-dirheads-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
                 padding-top: 18px; }
.cp-dirhead, .cp-dir .cp-dirhead { text-align: center; margin: 0; padding: 0 0 6px; }
.cp-dirgrid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cp-dircol-sep { border-right: 3px solid #fff; padding-right: 20px; }
.cp-dircol .cp-mob { display: none; }
@media (max-width: 980px) {
  .cp-dirheads-2 { grid-template-columns: 1fr; }
  .cp-dirgrid-5 { grid-template-columns: 1fr; }
  .cp-dirhead.cp-desk { display: none; }
  .cp-dircol .cp-mob { display: block; text-align: left; padding-top: 12px; }
  .cp-dircol-sep { border-right: 0; padding-right: 0; }
}