/* ---------------------------------------------------------------------------
 * Arborstone home page — Divi-free.
 *
 * Built from tools/homepage/stylemap.tsv, captured from the live DOM at
 * clientWidth 1440 (above Divi's 1350 breakpoint) on 2026-09-17.
 *
 * TWO TRAPS THIS SHEET IS BUILT TO AVOID, both of which have already shipped
 * to live on this project:
 *
 *  1. #id beats .class. `#arbor-hp :where(ul,ol)` is (1,0,0) and beats any
 *     unscoped `.hp-cardgrid` at (0,1,0). That left UA disc bullets on eight
 *     live vehicle pages. Fix: the reset below sets list-style AND padding, so
 *     there is nothing left for a component rule to have to win back.
 *  2. Equal specificity -> source order decides. Every rule that styles content
 *     INSIDE a container lives in the CONTAINER OVERRIDES block at the bottom.
 *     A modifier declared above its base is silently dead; that shipped white
 *     text on a white background.
 *
 * DELIBERATE DEVIATIONS FROM LIVE (consistent with the other 25 rebuilt pages):
 *  - Navy is brand #003A60, not Divi's #0E3255. Approved by Callum 2026-09-17.
 *  - Divi hand-tuned all eight card paddings (34/43, 33/34, 50/50, 50/68,
 *    50/51, 32/48, 68/85, 35/44) to fake equal heights at one viewport width.
 *    Dropped; the grid equalises properly at every width.
 * ------------------------------------------------------------------------- */

#arbor-hp {
  --hp-navy: #003A60;
  --hp-ink: #666;
  --hp-grey: #787878;
  --hp-wrap: 1080px;

  /* The directory + base-footer rules lifted from arborstone-size-pages are
     written against sz-* custom properties. Those live in that sheet's
     `#arbor-sz { }` block, whose SELECTOR does not contain any sz-dir/sz-basefoot
     token -- so the lift took the rules and left the variables behind, and
     `background: var(--sz-navy)` resolved to transparent. That put 76 items of
     WHITE TEXT ON WHITE through the directory and footer. Caught by the contrast
     sweep, not by any count. Values copied verbatim from the size sheet. */
  --sz-navy:      var(--navy, #003A60);
  --sz-navy-deep: #002B47;
  --sz-ink:       #0E3255;
  --sz-panel:     rgba(120, 120, 120, .24);
  --sz-grey:      #787878;
  color: var(--hp-ink);
  font: 500 16px/1.7 Montserrat, Helvetica, Arial, sans-serif;
}

#arbor-hp :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
#arbor-hp :where(img) { max-width: 100%; height: auto; }
#arbor-hp :where(p) { margin: 0 0 1em; }
#arbor-hp :where(p):last-child { margin-bottom: 0; }

/* --- s1 : photo / text split ------------------------------------------- */
#arbor-hp .hp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #fff;
  padding-bottom: 10px;
}
#arbor-hp .hp-split-photo {
  background: url(/wp-content/uploads/2025/01/mid1.png) center/cover no-repeat;
  min-height: 356px;
}
#arbor-hp .hp-split-text { padding: 129px 20px 20px; }

/* --- s2 : eight navy cards on a photo ground ---------------------------- */
#arbor-hp .hp-cards {
  background: var(--hp-navy) url(/wp-content/uploads/2026/07/slide2-opt.webp) center/cover no-repeat;
  padding: 71px 0 54px;
}
#arbor-hp .hp-cardgrid {
  max-width: var(--hp-wrap);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 27px 30px;
}

/* --- s3 / s6 : navy rules ---------------------------------------------- */
#arbor-hp .hp-strip { background: var(--hp-navy); height: 29px; }
#arbor-hp .hp-strip-tall { height: 53px; }

/* --- s4 : why choose ---------------------------------------------------- */
#arbor-hp .hp-why { background: #fff; padding: 19px 0 7px; }
#arbor-hp .hp-whygrid {
  max-width: var(--hp-wrap);
  margin: 0 auto;
  padding: 27px 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

/* --- s5 : decorative photo band ----------------------------------------- */
#arbor-hp .hp-band {
  background: var(--hp-navy) url(/wp-content/uploads/2026/07/slide3-opt.webp) center/cover no-repeat;
  height: 362px;
}

/* --- s7 : three steps --------------------------------------------------- */
#arbor-hp .hp-steps { background: #fff; padding: 19px 0 7px; }
#arbor-hp .hp-stepgrid {
  max-width: var(--hp-wrap);
  margin: 0 auto;
  padding: 27px 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

/* --- s8 : testimonial --------------------------------------------------- */
#arbor-hp .hp-quote {
  background: var(--hp-navy) url(/wp-content/uploads/2026/07/slide4-opt.webp) center/cover no-repeat;
  padding: 221px 0 54px;
}
#arbor-hp .hp-quote-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* --- responsive --------------------------------------------------------- */
@media (max-width: 980px) {
  #arbor-hp .hp-split { grid-template-columns: minmax(0, 1fr); }
  #arbor-hp .hp-split-photo { min-height: 240px; }
  #arbor-hp .hp-split-text { padding: 40px 20px 20px; }
  #arbor-hp .hp-whygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #arbor-hp .hp-cards { padding: 40px 0 34px; }
  #arbor-hp .hp-quote { padding: 120px 0 40px; }
  #arbor-hp .hp-band { height: 220px; }
}
@media (max-width: 640px) {
  #arbor-hp .hp-cardgrid,
  #arbor-hp .hp-whygrid,
  #arbor-hp .hp-stepgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
 * CONTAINER OVERRIDES — MUST STAY LAST
 *
 * Everything below styles content INSIDE a container. These selectors tie on
 * specificity with the component rules above, so source order is what makes
 * them win. Moving any of this upward silently disables it.
 * ======================================================================== */

/* s1 split text */
#arbor-hp .hp-split-text h3 {
  margin: 0 0 18px;
  color: var(--hp-navy);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}
#arbor-hp .hp-split-text p {
  color: var(--hp-grey);
  font-size: 18px;
  text-align: left;
}

/* s2 navy cards — measured: bg #0E3255 -> brand navy, radius 20, white 15/600 */
#arbor-hp .hp-card {
  background: var(--hp-navy);
  border-radius: 20px;
  padding: 34px 26px;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#arbor-hp .hp-card h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}
#arbor-hp .hp-card p {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

/* s4 / s7 section headings — measured 18px #787878, centred */
#arbor-hp .hp-why > h2,
#arbor-hp .hp-steps > h2 {
  max-width: var(--hp-wrap);
  margin: 0 auto;
  padding: 13px 20px 20px;
  color: var(--hp-navy);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

/* s4 why cells — measured text colour #0E3255 -> brand navy */
#arbor-hp .hp-why-cell { text-align: center; }
#arbor-hp .hp-why-cell img { width: 127px; height: auto; margin: 0 auto 14px; display: block; }
#arbor-hp .hp-why-cell h3 {
  margin: 0 0 8px;
  color: var(--hp-navy);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}
#arbor-hp .hp-why-cell p {
  color: var(--hp-navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

/* s7 steps */
#arbor-hp .hp-step { text-align: center; }
#arbor-hp .hp-step img { width: 241px; height: auto; margin: 0 auto 14px; display: block; }
#arbor-hp .hp-step h3 {
  margin: 0 0 8px;
  color: var(--hp-navy);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}
#arbor-hp .hp-step p {
  color: var(--hp-navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

/* s8 testimonial — measured white 20px on the photo ground */
#arbor-hp .hp-quote-inner h3 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
}
#arbor-hp .hp-quote-inner p {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * Directory + base-footer rules, lifted verbatim from arborstone-size-pages/
 * styles.css and rescoped #arbor-sz -> #arbor-hp. The sz-* CLASS NAMES are kept
 * so directories.html and basefoot.html stay byte-identical across families --
 * one copy of that markup, four sheets that dress it.
 * ------------------------------------------------------------------------- */
.sz-in { width: 91%; max-width: 1317px; margin: 0 auto; }
/* --- intro ---------------------------------------------------------------- */
.sz-intro { background: #fff; padding: 13px 0 0; }
.sz-intro-grid { display: grid; grid-template-columns: 342px minmax(0, 1fr);
                 gap: 48px; align-items: center; }
.sz-intro-fig { margin: 0; }
.sz-intro-fig img { display: block; width: 100%; }
/* ⚠️ These two blocks are <h3> in post_content -- body copy marked up as
   headings. Pre-existing on all 10 pages. Heading LEVELS are never changed on
   this site (a documented hard rule), so they stay h3 and are styled as lead
   copy, exactly as Divi renders them today. */
.sz-intro-copy h3 { font-size: 23px; line-height: 27.6px; font-weight: 700;
                    color: var(--sz-ink); text-align: center; padding: 0 0 10px; }
.sz-cta .sz-in { display: flex; align-items: center; justify-content: center;
                 gap: 32px; flex-wrap: wrap; }
/* --- location directories + base footer (Divi globals 170 / 220 / 70) ------ */
/* Divi globals 170 (Oklahoma) and 220 (Texas + Arkansas). The two sections do NOT
   share a column count: Oklahoma is one full-width heading over 4 columns, while
   Texas/Arkansas is a 2-column heading row over a 5-column content row, split 3
   Texas / 2 Arkansas. Rendering both as a 4-column grid drops the Arkansas heading
   into the middle of the Texas links. */
.sz-dir { background: var(--sz-navy); padding: 24px 0 9px; }
.sz-dir-ok { padding-top: 32px; }
.sz-dirhead { text-align: center; padding: 0 0 14px; }
#arbor-hp .sz-dirhead, #arbor-hp .sz-dirhead a { color: #fff; font-size: 20px;
                       line-height: 28px; font-weight: 700; }
.sz-dirheads-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                 gap: 20px; }
#arbor-hp .sz-dircol li { color: #fff; font-size: 15px; line-height: 24px;
                          padding: 0 0 6px; }
#arbor-hp .sz-dir a { color: #fff; text-decoration: none; }
#arbor-hp .sz-dir a:hover { text-decoration: underline; }
.sz-dirgrid { display: grid; gap: 20px; padding: 18px 0; }
.sz-dirgrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sz-dirgrid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Divi global 70. Rebuilt from live 2026-09-16 rather than reused from the
   corporate family: that copy is a 2-column logo|text grid carrying an OLDER
   revision of the sentence ("state-of-the-art facility is" vs live's "facilities
   are") and it DROPS the Main Office address and the tel: link entirely. Live is
   a single centred column, stacked: paragraph, logo, address, phone. */
.sz-basefoot { background: var(--sz-navy); padding: 24px 0 32px; text-align: center; }
#arbor-hp .sz-basefoot p { color: #fff; font-size: 16px; line-height: 27.2px;
                           padding: 0 0 12px; }
#arbor-hp .sz-basefoot p:last-child { padding-bottom: 0; }
#arbor-hp .sz-basefoot a { color: #fff; text-decoration: none; }
#arbor-hp .sz-basefoot a:hover { text-decoration: underline; }
.sz-footlogo img { display: block; margin: 8px auto 12px; max-width: 405px; }
@media (max-width: 980px) {
  .sz-intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .sz-intro-fig { max-width: 342px; margin: 0 auto; }
  .sz-intro-copy h3 { font-size: 19px; line-height: 24.7px; }
  .sz-cta .sz-in { gap: 18px; }
  .sz-dirgrid-4, .sz-dirgrid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .sz-sizegrid, .sz-dirgrid-4, .sz-dirgrid-5,
  .sz-dirheads-2 { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------------------------
 * LEGAL / SOCIAL BAR (#et-footer-nav)
 *
 * Reproduces live's Divi footer bottom. Ids reused so the social plugin's own
 * wp_head CSS flexes .container and lays the discs out -- only the ground and
 * the link colour are ours, because those come from Divi's stylesheet and a
 * shell page never loads it.
 *
 * Values MEASURED on live 2026-09-17, composited:
 *   #main-footer            rgb(34,34,34)
 *   + #et-footer-nav        rgba(255,255,255,.05)
 *   = effective ground      rgb(45,45,45)
 *   legal link colour       #BBBBBB @ 16px  -> contrast 7.17
 *   social disc             44px, 50% radius, #003A60 ground, white glyph -> 11.84
 *
 * The ground is written as a solid rgb(45,45,45) rather than #222 + a 5% overlay:
 * one layer, same painted result, and nothing to composite wrongly.
 * ------------------------------------------------------------------------- */
#arbor-hp #et-footer-nav { background: rgb(45, 45, 45); padding: 14px 0; }
#arbor-hp #et-footer-nav .container {
  max-width: var(--hp-wrap);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;
}
#arbor-hp #et-footer-nav .container::before,
#arbor-hp #et-footer-nav .container::after { display: none; }

/* CONTAINER OVERRIDES for the bar -- these style content INSIDE #et-footer-nav
   and must stay after the block above, same rule as the rest of this sheet. */
#arbor-hp #et-footer-nav .bottom-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
#arbor-hp #et-footer-nav .bottom-nav li { margin: 0; padding: 0; }
#arbor-hp #et-footer-nav .bottom-nav a {
  color: #BBBBBB;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
#arbor-hp #et-footer-nav .bottom-nav a:hover { color: #fff; text-decoration: underline; }
#arbor-hp .as-footer-social-list { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
#arbor-hp .as-footer-social-list li { margin: 0; padding: 0; }
#arbor-hp .as-footer-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--hp-navy); color: #fff; text-decoration: none;
}
@media (max-width: 640px) {
  #arbor-hp #et-footer-nav .container { justify-content: center; }
  #arbor-hp #et-footer-nav .bottom-nav { margin: 0; justify-content: center; }
}