/* Montserrat — the only Arborstone type family. Variable weight 400-800, latin subset,
extracted from the approved website template. */
@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}
.as-body{margin:0;font-family:var(--font-sans);color:var(--text-body);background:#fff;font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
.as-body img{max-width:100%;display:block}
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}}
/* ============= HERO ============= */
.hero{position:relative;min-height:var(--hero-min-h);display:flex;align-items:center;background:var(--hero-gradient);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 20%,rgba(143,192,224,.18),transparent 55%);pointer-events:none}
.hero[data-solo="true"] .hero-inner{grid-template-columns:1fr}
.hero-inner{position:relative;width:100%;max-width:var(--container);margin:0 auto;padding:var(--hero-y) var(--gutter);display:grid;grid-template-columns:1.15fr .85fr;gap:var(--col-gap);align-items:center}
.eyebrow-hero{font-size:var(--fs-sm);font-weight:500;color:#fff;margin-bottom:14px;opacity:.85}
.hero h1{font-family:var(--font-sans);font-size:var(--fs-h1-fluid);font-weight:var(--fw-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);margin:0 0 8px;color:#fff;text-transform:uppercase}
.hero h1 .accent{display:block;color:var(--sky)}
.hero .lede{font-size:var(--fs-lede);line-height:var(--lh-lede);margin:22px 0 12px;color:var(--text-lede-on-navy);font-weight:var(--fw-lede)}
.hero .sub{font-size:var(--fs-sm);color:rgba(234,241,246,.75);margin:0 0 32px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-card{background:#fff;border-radius:var(--radius-lg);padding:var(--card-pad-lg);color:var(--ink);box-shadow:var(--shadow-lg)}
.hero-card .kicker{font-size:var(--fs-micro);font-weight:var(--fw-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.hero-card h2{font-size:28px;font-weight:700;color:var(--navy);margin:0 0 20px}
.form-row{display:grid;grid-template-columns:1fr auto auto;gap:10px}
.input{font-family:var(--font-sans);padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:var(--fs-sm);color:var(--ink);background:#fff;outline:none;transition:border-color var(--ease),box-shadow var(--ease);min-width:0}
.input:focus{border-color:var(--navy);box-shadow:var(--focus-ring)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--navy-tint);border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;color:var(--navy);transition:background var(--ease)}
.icon-btn:hover{background:var(--navy-tint-deep)}
.helper{font-size:var(--fs-xxs);color:var(--muted);text-align:center;margin-top:14px}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;padding:56px 20px;gap:32px}.hero-card{padding:28px}.form-row{grid-template-columns:1fr}.icon-btn{width:100%;height:48px}}
/* ============= 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}
/* ============= FEATURE BAND ============= */
.feature-band{background:#fff;padding:var(--block-y-band) var(--gutter);border-bottom:1px solid var(--line)}
.feature-band-inner{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap-lg)}
.feature{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start}
.feature-icon{width:52px;height:52px;background:var(--navy-tint);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--navy)}
.feature h3{margin:0 0 4px;font-size:var(--fs-h4);font-weight:700;color:var(--ink)}
.feature p{margin:0;font-size:var(--fs-xs);color:var(--muted);line-height:1.5}
@media(max-width:900px){.feature-band-inner{grid-template-columns:1fr;gap:24px}}
/* ============= SECTIONS ============= */
section.block{padding:var(--block-y) var(--gutter)}
section.block.tinted{background:var(--page)}
.block-inner{max-width:var(--container);margin:0 auto}
.section-head{text-align:center;margin-bottom:var(--space-12)}
.section-head.left{text-align:left;margin-bottom:24px}
.section-head .kicker{font-size:var(--fs-micro);font-weight:var(--fw-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--sky-dark);margin-bottom:12px}
.section-head h2{font-size:var(--fs-h2-fluid);font-weight:var(--fw-h2);color:var(--navy);margin:0 0 12px;line-height:var(--lh-h2)}
.section-head p{max-width:var(--measure);margin:0 auto;color:var(--muted);font-size:var(--fs-body-lg)}
.section-head.left p{margin:0}
/* ============= CARDS ============= */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--ease),box-shadow var(--ease);border:1px solid var(--line)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card-media{aspect-ratio:16/10;background:var(--media-gradient);display:flex;align-items:center;justify-content:center;color:var(--sky-dark)}
.card-body{padding:var(--card-pad)}
.card h3{margin:0 0 8px;font-size:var(--fs-h3);font-weight:var(--fw-h3);color:var(--navy)}
.card p{margin:0 0 16px;font-size:var(--fs-sm);color:var(--body)}
.card-meta{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid var(--line);font-size:var(--fs-xs)}
.price{font-weight:700;color:var(--navy);font-size:var(--fs-h4)}
.badge{display:inline-block;padding:4px 10px;background:var(--navy-tint);color:var(--navy);border-radius:var(--radius-pill);font-size:var(--fs-micro);font-weight:700}
@media(max-width:900px){.card-grid{grid-template-columns:1fr}}
/* ============= TWO-COL ============= */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap);align-items:center}
.two-col h2{font-size:var(--fs-h2-sm);font-weight:700;color:var(--navy);margin:0 0 16px;line-height:var(--lh-h2)}
.two-col p{font-size:var(--fs-body-lg);color:var(--body);margin:0 0 16px}
.two-col ul{padding:0;list-style:none;margin:24px 0}
.two-col li{padding:10px 0 10px 32px;background:url("data:image/svg+xml;utf8,") left 10px/20px no-repeat;font-size:var(--fs-body);color:var(--body)}
.two-col .image{aspect-ratio:4/3;background:var(--image-gradient);border-radius:var(--radius);box-shadow:var(--shadow)}
@media(max-width:900px){.two-col{grid-template-columns:1fr;gap:32px}}
/* ============= 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}}
/* ===========================================================================
PAGE CSS — city x size / city x service landing pages
Everything below is the one-off layout spec from the design handoff,
expressed against the tokens above. Nothing here sets a blanket anchor
colour on a wrapper: `a{color:var(--navy)}` (0,0,1) must stay beatable by
every .btn-* class (0,1,0). See storage-types-page-rebuild gotcha.
=========================================================================== */
/* --- breadcrumb band --------------------------------------------------- */
.apl-crumbs{background:linear-gradient(135deg,var(--navy),var(--navy-deep));color:#fff;padding:28px var(--gutter) 0}
.apl-crumbs nav{max-width:var(--container);margin:0 auto;font-size:var(--fs-xxs);font-weight:var(--fw-label);letter-spacing:.2px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:rgba(234,241,246,.75)}
.apl-crumbs a{color:rgba(234,241,246,.75)}
.apl-crumbs a:hover{color:#fff}
.apl-crumbs .sep{opacity:.5}
.apl-crumbs .here{color:var(--sky)}
/* --- hero -------------------------------------------------------------- */
.apl-hero .hero-inner{padding:56px var(--gutter) 64px;gap:var(--space-8);align-items:center}
.apl-hero h1{text-transform:none}
.apl-hero .eyebrow-hero{font-size:var(--fs-micro);font-weight:var(--fw-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--sky);opacity:1}
.apl-hero .lede{font-size:18px;font-weight:500}
.apl-stats{display:flex;flex-wrap:wrap;gap:28px;margin-top:36px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.apl-stat-v{font-size:26px;font-weight:800;color:#fff;line-height:1.1}
.apl-stat-l{font-size:var(--fs-micro);font-weight:var(--fw-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:rgba(234,241,246,.75);margin-top:6px}
.apl-hero figure{margin:0}
.apl-hero figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
/* height:auto is load-bearing: the img carries width/height attributes (for CLS),
and without it the attribute height wins over aspect-ratio and the hero grows
to the image's intrinsic 900px. */
.apl-hero figcaption{font-size:var(--fs-micro);color:rgba(234,241,246,.75);margin-top:10px}
/* --- map + search ------------------------------------------------------ */
.apl-search-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--grid-gap-lg);align-items:stretch}
.apl-searchcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-8)}
.apl-searchcard .kicker{font-size:var(--fs-micro);font-weight:var(--fw-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.apl-searchcard h2{font-size:28px;font-weight:700;color:var(--navy);margin:0 0 22px}
.apl-fields{display:grid;gap:14px}
.apl-f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.apl-fl{display:grid;gap:6px}
.apl-fl>span{font-size:var(--fs-micro);font-weight:var(--fw-eyebrow);letter-spacing:.3px;color:var(--muted);text-transform:uppercase}
.apl-fl .input{padding:13px 14px}
.apl-loc{display:grid;grid-template-columns:1fr auto;gap:10px}
.apl-pills{display:flex;flex-wrap:wrap;gap:8px}
.apl-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:var(--radius-pill);font-size:var(--fs-xxs);font-weight:var(--fw-label);color:var(--navy);cursor:pointer}
.apl-pill:hover{background:rgba(0,58,96,.06)}
.apl-pill input{accent-color:var(--navy);margin:0}
.apl-mapcol{display:flex;flex-direction:column;gap:14px;min-height:520px}
/* The map sits in a positioned wrapper so the Layers control can be absolutely
placed INSIDE the map frame. The wrapper must be a flex column: as a plain
block it stretched to the column height while .apl-map kept only its
min-height, and the control then anchored to the wrapper's bottom edge --
i.e. floating below the map. */
.apl-mapwrap{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:460px}
.apl-map{flex:1 1 auto;min-height:0;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-sm);background:linear-gradient(160deg,#E9EFF5,#DCE6EF);overflow:hidden}
.apl-maplegend{display:flex;flex-wrap:wrap;gap:20px;align-items:center;font-size:var(--fs-xxs);color:var(--muted)}
.apl-legend-dot{width:14px;height:14px;border-radius:var(--radius-pill);background:var(--navy);border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
/* ---- Map pin ------------------------------------------------------------ *
* Structure copied from the production search-results marker (.as-mk in
* arborstone-search.php): a rounded-square badge carrying the Arborstone mark,
* with the price pill tucked BEHIND its right edge (negative margin + lower
* z-index). Drawn as a google.maps.OverlayView, so it is absolutely positioned
* in the overlay pane.
*
* The mark itself is the real five-polygon Arborstone "A", lifted verbatim from
* that component -- NOT redrawn. An earlier version of this file used a
* hand-drawn triangular "A" that was not the logo at all.
*
* ONE DELIBERATE DIFFERENCE from .as-mk: it paints #0E3255, which
* website-brand-tokens records as explicitly off-brand ("do not use anywhere").
* These pins use brand navy #003A60. Flagged rather than silently matched. */
.as-pin{position:absolute;transform:translate(-15px,-50%);display:inline-flex;align-items:center;cursor:pointer;background:none;border:0;padding:0;z-index:10;font-family:var(--font-sans)}
.as-pin-badge{width:30px;height:30px;border-radius:8px;position:relative;z-index:2;transition:transform .12s;
background:var(--navy) center/20px auto no-repeat;
background-image:url('data:image/svg+xml;utf8,')}
.as-pin-price{background:var(--navy);color:#fff;font-weight:800;font-size:12.5px;padding:4px 9px 4px 13px;
border-radius:0 7px 7px 0;margin-left:-6px;z-index:1;white-space:nowrap;height:24px;display:flex;
align-items:center;font-variant-numeric:tabular-nums}
.as-pin:hover{z-index:20}
.as-pin:hover .as-pin-badge{transform:scale(1.09)}
.as-pin.is-active{z-index:25}
.as-pin.is-active .as-pin-badge{transform:scale(1.09);box-shadow:0 0 0 2px #fff}
.as-pin:focus-visible{outline:3px solid #C8102E;outline-offset:2px;border-radius:8px}
/* ---- Layers control ------------------------------------------------------ *
* The production control is a disclosure panel (Map / Satellite / Terrain plus
* Traffic / Transit / Biking overlays), not a two-state button. Same markup,
* same behaviour, brand navy in place of #0E3255. */
.as-layers{position:absolute;z-index:5;left:10px;bottom:26px;font:600 13px/1 var(--font-sans)}
.as-layers[hidden]{display:none}
.as-layers-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap;
background:#fff;color:var(--navy);border:1px solid rgba(0,58,96,.14);border-radius:8px;
padding:8px 12px;font:inherit;box-shadow:0 2px 8px rgba(0,58,96,.2)}
.as-layers-btn:hover{background:#F2F6FA}
.as-layers-btn:focus-visible,.as-layers-opt:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.as-layers.is-open .as-layers-btn{background:#F2F6FA}
.as-layers-panel{position:absolute;bottom:calc(100% + 8px);left:0;
background:#fff;border:1px solid rgba(0,58,96,.14);border-radius:10px;padding:12px;
box-shadow:0 6px 20px rgba(0,58,96,.26);min-width:210px}
.as-layers-panel[hidden]{display:none}
.as-layers-h{margin:0 0 7px;font-size:11px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted-cool)}
.as-layers-row{display:flex;flex-wrap:wrap;gap:6px}
.as-layers-row + .as-layers-h{margin-top:13px}
.as-layers-opt{cursor:pointer;background:#fff;color:var(--navy);font:inherit;
border:1px solid var(--line-cool);border-radius:999px;padding:7px 13px}
.as-layers-opt:hover{background:#F2F6FA}
.as-layers-opt.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
@media(max-width:600px){
.as-layers{bottom:20px}
.as-layers-panel{max-width:calc(100vw - 32px)}
}
/* InfoWindow contents. Google supplies the chrome; this is just our type. */
.apl-iw{font-family:var(--font-sans);line-height:1.5}
.apl-iw strong{color:var(--navy);font-size:14px}
.apl-iw span{color:var(--muted);font-size:12px}
.apl-iw a{color:var(--navy);font-weight:700;font-size:12px}
/* --- short answer + spec rail ------------------------------------------ */
.apl-answer-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--col-gap);align-items:start}
.apl-answer p{max-width:var(--measure);text-wrap:pretty;color:var(--body)}
.apl-answer .p-lede{font-size:18px;margin:0 0 18px}
.apl-answer .p-body{font-size:var(--fs-body);margin:0 0 24px}
.apl-answer strong{color:var(--navy)}
.apl-checks{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.apl-checks li{padding:10px 0 10px 32px;background:url("data:image/svg+xml;utf8,") left 10px/20px no-repeat;font-size:var(--fs-body);color:var(--body)}
.apl-spec{background:#fff;border:1px solid var(--line);border-radius:var(--radius-report);box-shadow:var(--shadow-sm);padding:28px}
.apl-spec .kicker{font-size:var(--fs-micro);font-weight:var(--fw-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--sky-dark);margin-bottom:18px}
.apl-spec-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.apl-spec-row:last-of-type{border-bottom:0}
.apl-spec-row .k{font-size:var(--fs-xs);color:var(--muted)}
.apl-spec-row .v{font-size:var(--fs-xs);font-weight:700;color:var(--navy);text-align:right}
.apl-spec .btn{width:100%;margin-top:22px}
/* --- facility cards ----------------------------------------------------- */
.apl-fac-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px}
.apl-fac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--grid-gap)}
.apl-fac-top{padding:28px 28px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.apl-fac-top h3{margin:0 0 6px;font-size:22px;font-weight:700;color:var(--navy)}
.apl-fac-addr{margin:0;font-size:var(--fs-xs);color:var(--muted)}
.apl-fac-addr a{font-weight:700}
.apl-fac .card-body{padding:22px 28px 28px}
.apl-fac-desc{margin:0 0 18px;font-size:var(--fs-sm);color:var(--body)}
.apl-amen{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.apl-amen span{font-size:var(--fs-micro);font-weight:700;color:var(--navy);background:rgba(0,58,96,.06);border-radius:var(--radius-pill);padding:6px 12px}
.badge.is-waitlist{background:rgba(199,125,26,.1);color:var(--caution)}
/* --- live conditions ---------------------------------------------------- */
.apl-cond-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--grid-gap);margin-bottom:var(--grid-gap)}
.apl-cond{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:28px}
.apl-cond.is-primary{background:linear-gradient(135deg,var(--navy),var(--navy-deep));border:0;color:#fff}
.apl-cond .k{font-size:var(--fs-micro);font-weight:var(--fw-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--sky-dark);margin-bottom:14px}
.apl-cond.is-primary .k{color:rgba(255,255,255,.75)}
.apl-cond .v{font-size:clamp(28px,3.4vw,46px);font-weight:800;line-height:1;color:var(--navy);overflow-wrap:break-word}
.apl-cond.is-primary .v{color:#fff}
.apl-cond .s1{font-size:var(--fs-sm);color:var(--body);margin-top:8px}
.apl-cond.is-primary .s1{color:rgba(255,255,255,.85)}
.apl-cond .s2{font-size:var(--fs-xxs);color:var(--muted);margin-top:4px}
.apl-cond.is-primary .s2{color:rgba(255,255,255,.75)}
.apl-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--grid-gap)}
.apl-panel{background:var(--page);border-radius:var(--radius);padding:28px}
.apl-panel h3{margin:0 0 18px;font-size:var(--fs-h4);font-weight:700;color:var(--navy)}
.apl-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.apl-rowline{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm);color:var(--body)}
.apl-rowline:last-child{border-bottom:0}
.apl-rowline .dim{color:var(--muted);font-size:var(--fs-xs)}
.apl-fc{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.apl-fc:last-child{border-bottom:0}
.apl-fc .d{font-size:var(--fs-sm);font-weight:700;color:var(--navy);min-width:52px}
.apl-fc .c{font-size:var(--fs-xs);color:var(--muted);flex:1}
.apl-fc .hi{font-size:var(--fs-sm);font-weight:700;color:var(--navy)}
.apl-fc .lo{font-size:var(--fs-sm);color:var(--muted)}
.apl-src{margin:16px 0 0;font-size:var(--fs-xxs);color:var(--muted)}
/* --- about the area ----------------------------------------------------- */
.apl-area-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--grid-gap)}
.apl-area-grid+.apl-area-grid{margin-top:var(--grid-gap)}
.apl-areacard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-report);box-shadow:var(--shadow-sm);padding:28px}
.apl-areacard h3{margin:0 0 12px;font-size:var(--fs-h4);font-weight:700;color:var(--navy)}
.apl-areacard p{margin:0 0 12px;font-size:var(--fs-sm);color:var(--body)}
.apl-areacard p:last-child{margin-bottom:0}
.apl-areacard strong{color:var(--navy)}
.apl-townpills{display:flex;flex-wrap:wrap;gap:8px}
.apl-townpills span{font-size:var(--fs-xxs);font-weight:var(--fw-label);color:var(--navy);border:1px solid var(--line);border-radius:var(--radius-pill);padding:6px 12px}
.apl-drivers{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.apl-drivers li{font-size:var(--fs-sm);color:var(--body)}
.apl-drivers strong{color:var(--navy)}
.apl-glance{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px}
.apl-glance .v{font-size:24px;font-weight:800;color:var(--navy);line-height:1.1}
.apl-glance .l{font-size:var(--fs-micro);color:var(--muted);font-weight:var(--fw-label);margin-top:4px}
.apl-hours{background:linear-gradient(135deg,var(--navy),var(--navy-deep));border-radius:var(--radius-report);padding:28px;color:#fff}
.apl-hours h3{margin:0 0 14px;font-size:var(--fs-h4);font-weight:700;color:#fff}
.apl-hours>p{margin:0 0 18px;font-size:var(--fs-sm);color:rgba(255,255,255,.85)}
.apl-hours-rows{display:grid;gap:10px;font-size:var(--fs-sm)}
.apl-hours-row{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.14)}
.apl-hours-row:last-child{border-bottom:0;padding-bottom:0}
.apl-hours-row span:first-child{color:rgba(255,255,255,.85)}
.apl-hours-row span:last-child{font-weight:700}
.apl-hours .btn{margin-top:22px}
/* --- FAQ ---------------------------------------------------------------- */
.apl-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--col-gap);align-items:start}
.apl-faq-list{display:grid;gap:0;border-top:1px solid var(--line)}
.apl-faq-list details{border-bottom:1px solid var(--line);padding:20px 0}
.apl-faq-list summary{font-size:17px;font-weight:700;color:var(--navy);cursor:pointer;list-style:none}
.apl-faq-list summary::-webkit-details-marker{display:none}
.apl-faq-list summary:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.apl-faq-list details p{margin:14px 0 0;font-size:var(--fs-body);color:var(--body);max-width:var(--measure)}
/* --- related reading ----------------------------------------------------- */
.apl-read .card-media svg{opacity:.85}
.apl-read .kicker{font-size:var(--fs-micro);font-weight:var(--fw-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--sky-dark);margin-bottom:10px}
/* --- internal link columns ---------------------------------------------- */
.apl-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--grid-gap-lg)}
.apl-links h3{font-size:var(--fs-sm);font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:1.5px;margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid var(--navy)}
.apl-links ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.apl-links a{font-size:var(--fs-sm);font-weight:var(--fw-label)}
/* --- focus ring, site-wide on these pages -------------------------------- */
.apl-body a:focus-visible,.apl-body button:focus-visible,.apl-body summary:focus-visible,.apl-body input:focus-visible,.apl-body select:focus-visible{outline:none;border-color:var(--navy);box-shadow:var(--focus-ring)}
/* --- 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)}
/* --- responsive ---------------------------------------------------------- */
@media(max-width:900px){
.apl-search-grid,.apl-answer-grid,.apl-faq-grid{grid-template-columns:1fr;gap:32px}
.apl-hero .hero-inner{padding:48px var(--gutter-sm) 56px}
.apl-crumbs{padding:24px var(--gutter-sm) 0}
section.block{padding:56px var(--gutter-sm)}
.apl-mapcol{min-height:0}
.apl-f2{grid-template-columns:1fr}
.apl-stats{gap:20px}
.apl-glance{grid-template-columns:1fr 1fr}
}
@media(max-width:1100px){.apl-mobnav-enabled .nav-toggle{display:inline-flex}}
@media print{.apl-map,.apl-searchcard,.site-header,.apl-mobnav{display:none}}
/* --- narrow-phone header ------------------------------------------------- *
* At 375px the locked header row (44px logo + "Pay Online" pill + hamburger
* + 24px gaps + 20px padding) measures ~420px and pushes the toggle 16px past
* the viewport, giving the page a horizontal scroll. The design-system header
* block is marked LOCKED, so this tightens it only on these pages and only
* below 600px, rather than editing the shared component.
* Specificity note: .apl-body .x is (0,2,0) and beats the component's (0,1,0). */
@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}}
/* ---------------------------------------------------------------------------
City-hub overrides -- added 2026-09-15 when the hub moved onto this shell.
`.hero h1` above sets text-transform:uppercase for the facet template's
display headline. The hub headline is sentence case.
This MUST live here, not in city-hub.php's inline