/* ============================================================================
   arborstone-shell -- chrome stylesheet.

   Lifted verbatim from arborstone-programmatic-landing/assets/page.css so the
   shell can dress any template, not just the programmatic ones. Tokens live
   here too, because every shell page needs them.

   page.css still carries its own copy of these rules; the values are identical,
   so pages loading both are unchanged. De-duplicating page.css is a separate
   follow-up.

   Generated by extract_shell_css.py -- regenerate rather than hand-editing.
   ============================================================================ */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/Montserrat-Variable-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--font-sans:'Montserrat',Helvetica,Arial,sans-serif;--font-mono:ui-monospace,Menlo,Consolas,monospace}

/* ===== Base palette =====
   Primary is Pantone 2965C / #003A60. No green in website UI; green exists only as a
   semantic status color in reporting. */
:root{
  --navy:#003A60;          /* Pantone 2965C — primary */
  --navy-deep:#002A48;     /* press states, gradient anchor */
  --navy-hover:#004A78;
  --navy-80:#335E80;
  --navy-60:#6685A0;
  --navy-tint:#E6EEF4;
  --navy-tint-deep:#D5E1EC; /* icon-button hover */
  --sky:#8FC0E0;           /* accent */
  --sky-dark:#4A8BB8;      /* eyebrows on light grounds */
  --ink:#1A1A1A;
  --slate:#1F2933;         /* reporting body text */
  --body:#444;
  --muted:#6B7280;
  --muted-cool:#5A6B7B;    /* reporting labels, axis text */
  --line:#E5E7EB;
  --line-cool:#E2E8EF;     /* reporting card border */
  --page:#F5F7FA;
  --card:#FFFFFF;
  --zebra:#F0F4F8;
  --footer:#001F35;
  --footer-ink:#8FA6B8;
  --white:#FFFFFF;
  /* Semantic status — reporting only */
  --positive:#2E7D5B;
  --caution:#C77D1A;
  --negative:#B23A3A;
  --series-5:#9A6FB0;
}

/* ===== Semantic aliases ===== */
:root{
  --text-body:var(--body);
  --text-heading:var(--navy);
  --text-ink:var(--ink);
  --text-muted:var(--muted);
  --text-on-navy:#FFFFFF;
  --text-lede-on-navy:#EAF1F6;
  --surface-page:var(--page);
  --surface-card:var(--card);
  --surface-tint:var(--navy-tint);
  --surface-navy:var(--navy);
  --surface-footer:var(--footer);
  --border-default:var(--line);
  --accent:var(--sky);
  --accent-on-light:var(--sky-dark);
  --action-primary:var(--navy);
  --action-primary-hover:var(--navy-hover);
  --action-primary-press:var(--navy-deep);
  /* Reporting aliases — mirror the arbor-* names used in report deliverables */
  --arbor-navy:var(--navy);--arbor-navy-80:var(--navy-80);--arbor-navy-60:var(--navy-60);
  --arbor-text:var(--slate);--arbor-muted:var(--muted-cool);--arbor-border:var(--line-cool);
  --arbor-bg:var(--page);--arbor-surface:var(--card);
  --arbor-positive:var(--positive);--arbor-caution:var(--caution);--arbor-negative:var(--negative);
  /* Multi-series chart order */
  --chart-1:var(--navy);--chart-2:var(--navy-60);--chart-3:var(--positive);
  --chart-4:var(--caution);--chart-5:var(--series-5);--chart-6:var(--negative);
}

/* Montserrat only. Weights carry the hierarchy: 800 display, 700 section/card,
   600 nav+label, 500 lede, 400 body. */
:root{
  --fs-display:64px; /* @kind font */
  --lh-display:1.02; /* @kind font */
  --ls-display:-.5px; /* @kind font */
  --fw-display:800; /* @kind font */
  --fs-h1-fluid:clamp(38px,5vw,64px); /* @kind font */
  --fs-h2:40px; /* @kind font */
  --fs-h2-fluid:clamp(28px,3.5vw,40px); /* @kind font */
  --lh-h2:1.15; /* @kind font */
  --fw-h2:700; /* @kind font */
  --fs-h2-sm:36px; /* @kind font */
  --fs-h3:20px; /* @kind font */
  --fw-h3:700; /* @kind font */
  --fs-h4:18px; /* @kind font */
  --fs-lede:20px; /* @kind font */
  --lh-lede:1.5; /* @kind font */
  --fw-lede:500; /* @kind font */
  --fs-body-lg:17px; /* @kind font */
  --fs-body:16px; /* @kind font */
  --lh-body:1.6; /* @kind font */
  --fw-body:400; /* @kind font */
  --fs-sm:15px; /* @kind font */
  --fs-xs:14px; /* @kind font */
  --fs-xxs:13px; /* @kind font */
  --fs-micro:12px; /* @kind font */
  --fw-label:600; /* @kind font */
  --ls-label:.2px; /* @kind font */
  --fs-eyebrow:12px; /* @kind font */
  --fw-eyebrow:700; /* @kind font */
  --ls-eyebrow:2px; /* @kind font */
  --fs-footer-head:13px; /* @kind font */
  --ls-footer-head:1.5px; /* @kind font */
  /* Composite font shorthands */
  --text-display:var(--fw-display) var(--fs-display)/var(--lh-display) var(--font-sans); /* @kind font */
  --text-h2:var(--fw-h2) var(--fs-h2)/var(--lh-h2) var(--font-sans); /* @kind font */
  --text-h3:var(--fw-h3) var(--fs-h3)/1.3 var(--font-sans); /* @kind font */
  --text-lede:var(--fw-lede) var(--fs-lede)/var(--lh-lede) var(--font-sans); /* @kind font */
  --text-body:var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-sans); /* @kind font */
}

/* Section rhythm is the real spacing system: 80px block padding, 32px gutters,
   24px card gaps, 1320px container. */
:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-7:28px;--space-8:32px;--space-10:40px;--space-12:48px;
  --space-14:56px;--space-18:72px;--space-20:80px;--space-22:88px;
  --gutter:32px;--gutter-sm:20px;
  --block-y:80px;--block-y-band:56px;--block-y-cta:72px;--hero-y:88px;
  --grid-gap:24px;--grid-gap-lg:40px;--col-gap:56px;
  --card-pad:24px;--card-pad-lg:40px;
  --container:1320px;--container-report:1200px;--measure:640px;
  --nav-h:88px;--hero-min-h:560px;
}

/* Soft navy-tinted shadows, never neutral black. Radii: 6px controls, 12px cards,
   20px hero card, 999px pills. */
:root{
  --radius-sm:6px;--radius:12px;--radius-lg:20px;--radius-report:10px;--radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,42,72,.06),0 1px 3px rgba(0,42,72,.04);
  --shadow:0 4px 12px rgba(0,42,72,.08),0 2px 4px rgba(0,42,72,.04);
  --shadow-lg:0 20px 40px rgba(0,42,72,.14),0 8px 16px rgba(0,42,72,.06);
  --shadow-header:0 2px 8px rgba(0,0,0,.08);
  --shadow-report:0 1px 3px rgba(0,58,96,.08),0 1px 2px rgba(0,58,96,.06);
  --focus-ring:0 0 0 3px rgba(0,58,96,.15);
  --ease:.15s; /* @kind other */
  --ease-slow:.18s; /* @kind other */
  --hero-gradient:linear-gradient(135deg,rgba(0,58,96,.92) 0%,rgba(0,42,72,.96) 100%),linear-gradient(180deg,#004A7A 0%,#002A48 100%); /* @kind color */
  --media-gradient:linear-gradient(135deg,#E7EEF6,#C9DBEB); /* @kind color */
  --image-gradient:linear-gradient(135deg,#004A7A,#003A60); /* @kind color */
}

/* ===== Arborstone website component CSS — lifted verbatim (values unchanged) from the
   approved website page template, with literals swapped for tokens. ===== */
*,*::before,*::after{box-sizing:border-box}

a{color:var(--navy);text-decoration:none}

a:hover{color:var(--sky-dark)}


/* Logo — locked 986x340 aspect ratio. Never distort. */
.as-logo{width:auto;aspect-ratio:986/340;object-fit:contain;align-self:flex-start;flex:0 0 auto;max-width:none}


/* ============= HEADER (LOCKED — ships on every page) ============= */
.site-header{position:sticky;top:0;z-index:100;background:var(--navy);box-shadow:var(--shadow-header)}

.header-inner{width:100%;max-width:var(--container);margin:0 auto;min-height:var(--nav-h);padding:16px 28px;display:flex;align-items:center;gap:24px}

.brand{display:flex;align-items:center;flex:0 0 auto}

.brand img{height:54px}

.primary-nav{flex:1 1 auto;display:flex;justify-content:flex-end}

.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;align-items:center;flex-wrap:nowrap}

.primary-nav li{white-space:nowrap}

.primary-nav a{color:#fff;font-weight:var(--fw-label);font-size:var(--fs-sm);letter-spacing:var(--ls-label);padding:10px 0;position:relative;display:inline-flex;align-items:center;transition:color var(--ease);white-space:nowrap}

.primary-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--sky);transform:scaleX(0);transform-origin:center;transition:transform var(--ease-slow)}

.primary-nav a:hover{color:var(--sky)}

.primary-nav a:hover::after{transform:scaleX(1)}

.primary-nav .has-caret>span::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);display:inline-block;margin-left:8px;vertical-align:middle;opacity:.7}

.header-actions{display:flex;align-items:center;gap:16px;flex:0 0 auto;padding-left:8px;margin-left:8px;border-left:1px solid rgba(255,255,255,.14)}

.search-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-pill);background:transparent;border:0;color:#fff;cursor:pointer;transition:background var(--ease)}

.search-btn:hover{background:rgba(255,255,255,.1)}

.search-btn svg{width:20px;height:20px}

.pay-btn{display:inline-flex;align-items:center;padding:11px 24px;border:2px solid rgba(255,255,255,.9);border-radius:var(--radius-pill);background:transparent;color:#fff!important;font-weight:700;font-size:var(--fs-xs);letter-spacing:.3px;transition:background var(--ease),color var(--ease),border-color var(--ease);white-space:nowrap}

.pay-btn:hover{background:#fff;color:var(--navy)!important;border-color:#fff}

.nav-toggle{display:none;background:transparent;border:0;padding:8px;cursor:pointer;color:#fff}

.nav-toggle svg{width:28px;height:28px}
@media(max-width:1300px){.primary-nav ul{gap:22px}.primary-nav a{font-size:var(--fs-xs)}.header-inner{gap:18px}}
@media(max-width:1100px){.header-inner{padding:12px 20px}.primary-nav,.header-actions .search-btn{display:none}.nav-toggle{display:inline-flex}.brand img{height:44px}.header-actions{border-left:0;padding-left:0;margin-left:auto}}


/* ============= BUTTONS ============= */
.btn{font-family:var(--font-sans);font-weight:700;font-size:var(--fs-sm);padding:14px 28px;border-radius:var(--radius-sm);border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background var(--ease),color var(--ease),border-color var(--ease),transform .05s;text-decoration:none}

.btn-primary{background:var(--navy);color:#fff}

.btn-primary:hover{background:var(--navy-hover);color:#fff}

.btn-primary:active{transform:translateY(1px)}

.btn-invert{background:#fff;color:var(--navy)}

.btn-invert:hover{background:var(--navy-tint);color:var(--navy)}

.btn-outline-light{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}

.btn-outline-light:hover{background:rgba(255,255,255,.1);border-color:#fff}

.btn-outline-dark{background:transparent;color:var(--navy);border:2px solid var(--navy)}

.btn-outline-dark:hover{background:var(--navy);color:#fff}

.btn-ghost{background:transparent;color:var(--navy);border:1px solid var(--line)}

.btn-ghost:hover{background:var(--navy-tint);border-color:var(--navy-tint)}

.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}


/* ============= CTA BAND ============= */
.cta-band{background:var(--navy);color:#fff;padding:var(--block-y-cta) var(--gutter);text-align:center}

.cta-band h2{font-size:clamp(28px,4vw,40px);font-weight:800;text-transform:uppercase;margin:0 0 12px;color:#fff;letter-spacing:-.3px}

.cta-band p{margin:0 0 28px;color:rgba(255,255,255,.85);font-size:var(--fs-body-lg)}

.cta-band .btn-row{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}


/* ============= FOOTER ============= */
.site-footer{background:var(--footer);color:var(--footer-ink);padding:72px var(--gutter) 24px}

.footer-inner{max-width:var(--container);margin:0 auto}

.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--grid-gap-lg);padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}

.site-footer h4{color:#fff;font-size:var(--fs-footer-head);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-footer-head);margin:0 0 16px}

.site-footer ul{list-style:none;padding:0;margin:0}

.site-footer li{padding:5px 0}

.site-footer a{color:var(--footer-ink);font-size:var(--fs-xs)}

.site-footer a:hover{color:#fff}

.footer-brand img{height:48px;margin-bottom:16px}

.footer-brand p{font-size:var(--fs-xs);line-height:var(--lh-body);margin:12px 0 20px;max-width:340px}

.footer-bottom{padding:24px 0 0;display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-xxs);color:rgba(255,255,255,.4)}

.footer-bottom .legal{display:flex;gap:20px}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column;gap:12px}}


/* --- mobile nav ---------------------------------------------------------- */
.apl-mobnav{display:none;background:var(--navy-deep);padding:8px var(--gutter-sm) 20px}

.apl-mobnav.is-open{display:block}

.apl-mobnav ul{list-style:none;margin:0;padding:0}

.apl-mobnav li{border-bottom:1px solid rgba(255,255,255,.1)}

.apl-mobnav a{display:block;padding:14px 0;color:#fff;font-weight:var(--fw-label);font-size:var(--fs-sm)}

.apl-mobnav a:hover{color:var(--sky)}
@media(max-width:1100px){.apl-mobnav-enabled .nav-toggle{display:inline-flex}}
@media(max-width:600px){.apl-body .header-inner{gap:12px;padding:12px 16px}.apl-body .brand img{height:38px}.apl-body .pay-btn{padding:9px 16px;font-size:12px;letter-spacing:0}.apl-body .nav-toggle{padding:4px}.apl-body .nav-toggle svg{width:26px;height:26px}}


/* ---------------------------------------------------------------------------
   Primary-nav dropdowns -- added 2026-09-14 with nav depth 2.
   Restores the four dropdowns the Divi header carries (Unit Size Guide 12,
   Storage Types 10, Company 10, Trash Services 2) so those 34 child pages keep
   the sitewide internal link they have on every Divi-chrome page.
   Fully inert at depth 1: WordPress emits no .sub-menu markup, so nothing here
   matches. Revert notes live in templates/shell-head.php.
   --------------------------------------------------------------------------- */
.primary-nav .menu-item-has-children{position:relative;padding-right:15px}

.primary-nav .menu-item-has-children::after{content:"";position:absolute;right:0;top:calc(50% - 4px);width:5px;height:5px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);color:#fff;opacity:.75;pointer-events:none;transition:opacity var(--ease)}

.primary-nav .menu-item-has-children:hover::after,
.primary-nav .menu-item-has-children:focus-within::after{color:var(--sky);opacity:1}

.primary-nav .sub-menu{display:block;gap:0;position:absolute;top:100%;left:50%;min-width:234px;margin:0;padding:8px 0;list-style:none;background:var(--navy-deep);border:1px solid rgba(255,255,255,.14);border-radius:10px;box-shadow:0 14px 32px rgba(0,20,40,.38);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(6px);transition:opacity var(--ease),transform var(--ease),visibility var(--ease);z-index:70}

.primary-nav .menu-item-has-children:hover>.sub-menu,
.primary-nav .menu-item-has-children:focus-within>.sub-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}

.primary-nav .sub-menu li{white-space:nowrap;padding-right:0}

.primary-nav .sub-menu a{display:block;padding:9px 20px;font-size:var(--fs-xs);font-weight:var(--fw-body);letter-spacing:0;color:#fff}

.primary-nav .sub-menu a::after{display:none}

.primary-nav .sub-menu a:hover{color:var(--sky);background:rgba(255,255,255,.07)}

/* Rightmost dropdown (Company) right-aligns so it cannot overflow the viewport. */
.primary-nav>ul>li:last-child .sub-menu{left:auto;right:0;transform:translateX(0) translateY(6px)}

.primary-nav>ul>li:last-child:hover>.sub-menu,
.primary-nav>ul>li:last-child:focus-within>.sub-menu{transform:translateX(0) translateY(0)}

/* Mobile drawer: children render as an indented nested list, as Divi's does. */
.apl-mobnav .sub-menu{list-style:none;margin:0;padding:0 0 6px 16px}

.apl-mobnav .sub-menu li{border-bottom:0}

.apl-mobnav .sub-menu a{padding:10px 0;font-size:var(--fs-xs);font-weight:var(--fw-body);opacity:.86}

.apl-mobnav .sub-menu a:hover{opacity:1}
@media(prefers-reduced-motion:reduce){.primary-nav .sub-menu{transition:none}}