/* ─── AL Page — shared chrome for every template except the homepage ───
Page hero, breadcrumb, prose body, sticky aside, pagination, plain grids.
Per-template stylesheets add only what is genuinely new. */
/* ── Page hero ── */
/* padding-block, never the shorthand — see hero.css */
.al-phero { padding-block: 54px 0; position: relative; }
.al-phero::before {
content: ""; position: absolute; inset: -80px 0 auto 0; height: 460px; z-index: 0;
background:
radial-gradient(700px 380px at 84% 0%, rgba(227,73,58,.08), transparent 64%),
radial-gradient(620px 360px at 4% 26%, rgba(233,178,0,.06), transparent 62%);
pointer-events: none;
}
.al-phero > * { position: relative; z-index: 1; }
.al-phero__in { padding-bottom: 56px; }
.al-phero h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; margin: 16px 0 0; letter-spacing: -.035em; max-width: 15ch; }
.al-phero h1 em { font-style: normal; color: var(--red); }
.al-phero__lead { font-size: 18.5px; color: var(--ink-3); max-width: 620px; margin: 20px 0 0; }
.al-phero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 32px; }
.al-phero--center { text-align: center; }
.al-phero--center h1, .al-phero--center .al-phero__lead { margin-inline: auto; }
.al-phero--center .al-eyebrow { justify-content: center; }
.al-phero--center .al-phero__actions { justify-content: center; }
.al-phero--center .al-crumbs { justify-content: center; }
/* Split page hero — copy left, one image right */
.al-phero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 60px; align-items: center; }
.al-phero__media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-1); position: relative; }
.al-phero__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
/* ── Breadcrumb ── */
.al-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; font-size: 13.5px; color: var(--ink-3); }
.al-crumbs a { text-decoration: none; color: var(--ink-3); border-bottom: 1px solid transparent; transition: color .16s ease, border-color .16s ease; }
.al-crumbs a:hover { color: var(--red); border-bottom-color: currentColor; }
/* separator trails its own item — as ::before it led the line when the trail wrapped */
.al-crumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--line); }
.al-crumbs [aria-current] { color: var(--ink); font-weight: 600; }
/* ── Two-column body: content + sticky aside ── */
.al-body { display: grid; grid-template-columns: minmax(0,1fr) 366px; gap: 64px; align-items: start; }
.al-body > * { min-width: 0; }
.al-aside { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 20px; }
.al-panel { background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-1); padding: 28px 28px 30px; }
.al-panel h3 { font-size: 20px; margin: 0 0 10px; }
.al-panel p { font-size: 15.5px; color: var(--ink-3); margin: 0 0 20px; }
.al-panel--dark { background: var(--ink); color: #b0b0ba; position: relative; overflow: hidden; }
.al-panel--dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 260px at 88% 0%, rgba(227,73,58,.30), transparent 66%); }
.al-panel--dark > * { position: relative; z-index: 1; }
.al-panel--dark h3 { color: #fff; }
.al-panel--dark p { color: #8f8f99; }
.al-panel .al-combo__phone { margin-bottom: 18px; }
/* the phone block is authored for the dark combo — recolour it on a light panel */
.al-panel:not(.al-panel--dark) .al-combo__phone b { color: var(--ink); }
.al-panel:not(.al-panel--dark) .al-combo__phone small { color: var(--ink-3); }
/* Aside link list */
.al-sidelist { list-style: none; margin: 0; padding: 0; }
.al-sidelist li + li { border-top: 1px solid var(--line-2); }
.al-sidelist a { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; padding: 13px 0; font-size: 15.5px; color: var(--ink-2); transition: color .16s ease, padding .16s ease; }
.al-sidelist a svg { width: 15px; height: 15px; stroke: var(--red); flex: none; opacity: 0; transform: translateX(-6px); transition: opacity .16s ease, transform .16s ease; }
.al-sidelist a:hover { color: var(--red); }
.al-sidelist a:hover svg { opacity: 1; transform: none; }
.al-sidelist [aria-current] { color: var(--red); font-weight: 700; }
.al-sidelist [aria-current] svg { opacity: 1; transform: none; }
/* ── Prose ── */
.al-prose { font-size: 17.5px; color: var(--ink-2); }
.al-prose > * + * { margin-top: 24px; }
.al-prose h2 { font-size: clamp(26px, 3vw, 34px); margin-top: 48px; letter-spacing: -.03em; }
.al-prose h3 { font-size: 21px; margin-top: 36px; }
/* The imported posts also use h4, h5 and h6. Unsized they fell back to browser defaults,
where h5 and h6 are SMALLER than the paragraph they introduce. Measured 2026-08-08. */
.al-prose h4 { font-size: 18px; margin-top: 32px; }
.al-prose h5 { font-size: 16.5px; margin-top: 28px; }
.al-prose h6 { font-size: 15px; margin-top: 24px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.al-prose p { margin: 0; }
/* `.al-prose > * + *` (0,1,0) is outranked by every `margin: 0` reset below it — `.al-prose p`,
`.al-prose figure`, `.al-prose ul, ol` are all (0,1,1) — so the rhythm was silently zeroed for
whichever element the reset covered. Patching it pair by pair (p+p, then h2+*, then p+ul) kept
missing the next combination: a figure after a paragraph still sat flush, and so did a
paragraph after a list. These two rules state the rhythm ONCE at (0,1,2), above every reset,
for any pair of children. Headings are excluded on the right so they keep their own larger
margins. Vikas, 2026-08-08. */
/* `body[class]` because Elementor resets figures at
`.elementor .elementor-widget:not(...) figure` — (0,3,1), which beats anything scoped to
.al-prose alone, and is why the images in the blog posts sat flush against the paragraph
above them. Measured on /blog/car-key-programming-rockville/. */
body[class] .al-prose > * + :not(h1, h2, h3, h4, h5, h6),
body[class] .elementor .elementor-widget .al-prose > * + :not(h1, h2, h3, h4, h5, h6) { margin-top: 24px; }
body[class] .al-prose > :is(h1, h2, h3, h4, h5, h6) + :not(h1, h2, h3, h4, h5, h6),
body[class] .elementor .elementor-widget .al-prose > :is(h1, h2, h3, h4, h5, h6) + :not(h1, h2, h3, h4, h5, h6) { margin-top: 14px; }
/* The fact-card block sets its own deliberate 48px (`.al-prose .al-facts`, 0,2,0); the two rules
above outrank it and would flatten it to 24. Restated at the same weight as them. */
body[class] .al-prose > .al-facts,
body[class] .elementor .elementor-widget .al-prose > .al-facts { margin-top: 48px; }
.al-prose a { color: var(--red); text-underline-offset: 3px; }
.al-prose ul, .al-prose ol { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 12px; }
.al-prose ul li { display: flex; gap: 12px; align-items: flex-start; }
.al-prose ul li svg { width: 19px; height: 19px; stroke: var(--green); stroke-width: 2.4; flex: none; margin-top: 3px; }
/* `display: flex` makes EVERY child of an item its own column, so an item written as
`Label. the sentence` puts the label in a narrow column of its own and wraps it
mid-phrase. The earlier fix only covered items with no icon; this one is the same fault WITH
an icon, seen on /client-reviews/ on mobile. Taking the icon out of flow instead means the
item's layout no longer depends on how many children it has — the design's own
`…` items are unaffected (measured: 0 change on 72 pages at 1440px, and
only the broken items move at 390px). `:not([class])` so classed lists — .al-facts, .al-mention
— keep their own layout. Vikas, 2026-08-08. */
.al-prose ul:not([class]) > li { display: list-item; list-style: none; position: relative; padding-left: 31px; }
.al-prose ul:not([class]) > li > svg { position: absolute; left: 0; top: 3px; margin-top: 0; }
/* `display: block` killed the marker — `list-style` only applies to a list-item box, so the
imported posts' plain bullets vanished entirely. list-item keeps the disc AND lets the text
flow inline, which is what the icon items needed. Measured on the old posts, 2026-08-08. */
.al-prose ul:not([class]) > li:not(:has(> svg)) { list-style: disc; padding-left: 6px; margin-left: 18px; }
.al-prose ol { counter-reset: al-o; }
/* Same flex fault the bullets had: `Security: the sentence` put the
label in its own column. The numbered circle goes out of flow instead, so an item's layout
does not depend on how many children it has. Vikas, 2026-08-08. */
.al-prose ol li { display: block; position: relative; padding-left: 41px; counter-increment: al-o; }
.al-prose ol li::before {
/* 4px, not 0: the 27px circle sits on the box top while the text starts one half-leading
down, so a flush marker read as riding high against its own line. Devendra, 2026-08-13. */
content: counter(al-o); position: absolute; left: 0; top: 4px; width: 27px; height: 27px;
border-radius: 50%; background: var(--bone); border: 1px solid var(--line);
display: grid; place-items: center;
font-family: var(--font-display); font-size: 13.5px; font-weight: 800; color: var(--ink);
}
.al-prose blockquote { margin: 0; padding: 24px 28px; background: var(--bone); border-radius: var(--r-lg); font-size: 19px; color: var(--ink); }
.al-prose img { border-radius: var(--r-lg); }
.al-prose figure { margin: 0; }
.al-prose figcaption { margin-top: 12px; font-size: 14px; color: var(--ink-3); }
/* ── Generic tile grids ── */
.al-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.al-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.al-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.al-grid-2 > *, .al-grid-3 > *, .al-grid-4 > * { min-width: 0; }
.al-tilecard {
display: flex; flex-direction: column;
background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-1);
padding: 28px 26px 30px; text-decoration: none;
transition: transform .22s ease, box-shadow .22s ease;
}
a.al-tilecard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.al-tilecard i {
width: 46px; height: 46px; border-radius: var(--r); background: var(--red);
display: grid; place-items: center; margin-bottom: 18px;
box-shadow: 0 8px 20px rgba(227,73,58,.28);
}
.al-tilecard i svg { width: 22px; height: 22px; stroke: #fff; }
.al-tilecard h3 { font-size: 19px; margin: 0 0 9px; }
.al-tilecard p { font-size: 15.5px; color: var(--ink-3); margin: 0; }
.al-tilecard__more { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; margin-top: auto; padding-top: 18px; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--red); }
.al-tilecard__more svg { width: 15px; height: 15px; stroke: currentColor; transition: transform .18s ease; }
a.al-tilecard:hover .al-tilecard__more svg { transform: translateX(4px); }
/* ── Pagination ── */
.al-pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 56px; list-style: none; padding: 0; }
.al-pager a, .al-pager span {
min-width: 46px; height: 46px; padding: 0 14px; border-radius: var(--r-pill);
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font-display); font-weight: 700; font-size: 15px;
text-decoration: none; color: var(--ink); border: 1.5px solid var(--line);
transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.al-pager a:hover { border-color: var(--ink); }
.al-pager [aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.al-pager svg { width: 15px; height: 15px; stroke: currentColor; }
/* ── Focus ring, every clickable card ── */
a.al-tilecard:focus-visible, .al-crumbs a:focus-visible, .al-sidelist a:focus-visible,
.al-pager a:focus-visible {
outline: 3px solid var(--red); outline-offset: 3px; border-radius: var(--r);
}
/* ── Responsive ── */
@media (max-width: 1080px) {
.al-body { grid-template-columns: 1fr; gap: 48px; }
.al-aside { position: static; grid-template-columns: repeat(2, 1fr); }
.al-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.al-phero__grid { grid-template-columns: 1fr; gap: 36px; }
.al-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.al-phero { padding-top: 34px; }
.al-phero__in { padding-bottom: 38px; }
.al-phero h1 { max-width: none; }
.al-aside { grid-template-columns: 1fr; }
.al-grid-2, .al-grid-3, .al-grid-4 { grid-template-columns: 1fr; }
.al-prose { font-size: 16.5px; }
.al-panel { padding: 24px 22px 26px; }
}
/* Advice callout in prose — was an unlabelled , which read as a stray grey slab */
.al-prose .al-tip {
display: flex; gap: 18px; align-items: flex-start;
background: var(--bone); border-radius: var(--r-lg); padding: 24px 28px 26px;
}
.al-prose .al-tip i {
width: 40px; height: 40px; flex: none; border-radius: var(--r); background: var(--red);
display: grid; place-items: center;
}
.al-prose .al-tip i svg { width: 22px; height: 12px; fill: #fff; stroke: none; }
.al-prose .al-tip i.al-tip__ico--stroke svg { width: 20px; height: 20px; fill: none; stroke: #fff; }
.al-prose .al-tip b {
display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 13px;
font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red);
}
.al-prose .al-tip p { font-size: 17px; color: var(--ink); }
@media (max-width: 560px) {
/* icon beside the text left it a 225px column in a 339px box */
.al-prose .al-tip { flex-direction: column; gap: 14px; padding: 22px 22px 24px; }
.al-prose .al-tip p { font-size: 16px; }
}