in a panel, so the direct
child combinator ".footer-nav > ul" never matched anything -- the footer
rendered as a bullet list of default underlined links. Every selector here
is therefore a descendant selector. Keep it that way.
The wired menu is flat (no child items), so top-level items ARE the links;
they flow into a multi-column grid that fills the footer instead of
stacking in one narrow strip beside a half-empty row. */
.footer-nav ul{list-style:none;margin:0;padding:0;}
.footer-nav li{list-style:none;}
.footer-nav ul li::marker{content:"";}
/* Multi-column rather than a 3-track grid: a grid fills row-major, so a
menu read across as "Home About Services" instead of down each column,
and left the last column short. columns balances the items and keeps
menu order reading top-to-bottom. */
.footer-nav > div > ul,
.footer-nav > ul{columns:3;column-gap:32px;}
.footer-nav li{break-inside:avoid;}
.footer-nav a{
font-size:.9rem;color:var(--ink-soft);text-decoration:none;transition:color .18s ease;
display:block;padding:7px 0;
}
.footer-nav a:hover{color:var(--brand-blue-bright);}
/* A menu that does have children: the parent becomes the column header and its
children the list beneath it. */
.footer-nav li:has(> ul) > a{
font-family:var(--font-body);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;
color:var(--ink-faint);font-weight:700;margin-bottom:8px;
}
.footer-nav ul ul{display:block;}
.footer-nav ul ul a{font-size:.9rem;color:var(--ink-soft);text-transform:none;letter-spacing:0;font-weight:400;}
.footer-bottom{
border-top:1px solid var(--border);padding-top:24px;
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
font-size:.82rem;color:var(--ink-faint);
}
.footer-bottom a{color:var(--ink-faint);text-decoration:none;}
.footer-bottom a:hover{color:var(--brand-blue-bright);}
/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
/* ---------- Responsive ---------- */
@media (max-width:1080px){
.services-grid{grid-template-columns:repeat(2,1fr);}
.portfolio-grid{grid-template-columns:repeat(2,1fr);}
.process-grid{grid-template-columns:repeat(2,1fr);row-gap:36px;}
.process-step:nth-child(2)::after{display:none;}
.footer-grid{grid-template-columns:minmax(220px,1fr) 1.8fr;}
}
@media (max-width:980px){
.layout{grid-template-columns:1fr;}
aside.sidebar{position:static;grid-template-columns:1fr 1fr;}
.footer-grid{grid-template-columns:minmax(220px,1fr) 1.8fr;}
}
@media (max-width:900px){
.hero-inner{grid-template-columns:1fr;padding-block:88px 64px;}
/* Headings first on mobile. The console is decoration; leading with it
means the first screen says nothing about what the company does. */
.spotlight-grid{grid-template-columns:1fr;}
.spotlight .app-mock{order:-1;}
}
@media (max-width:760px){
nav.main-nav{
display:none;position:fixed;top:0; left:0; width:100vw; height:100vh; height:100dvh;z-index:200;background:var(--bg);
flex-direction:column;align-items:stretch;padding:88px 24px 24px;overflow-y:auto;
}
nav.main-nav.open{display:flex;}
nav.main-nav ul{flex-direction:column;align-items:stretch;gap:6px;}
nav.main-nav li > ul,
nav.main-nav li:hover > ul,
nav.main-nav li:focus-within > ul{display:none;}
nav.main-nav a{
/* The desktop rule sets display:inline-block for the pill shape, so without
this each link shrank to its text and the divider under it stopped at the
end of the word instead of spanning the menu. */
display:block;
font-family:var(--font-display);font-size:1.3rem;font-weight:700;padding:14px 4px;
border-bottom:1px solid var(--border);border-radius:0;
}
nav.main-nav li{display:block;}
.nav-actions .btn-primary{display:none;}
.menu-toggle{display:inline-flex;}
.services-grid{grid-template-columns:1fr;}
.portfolio-grid{grid-template-columns:1fr;}
.process-grid{grid-template-columns:1fr;}
.process-step::after{display:none;}
.footer-grid{grid-template-columns:1fr;gap:32px;}
.footer-nav > div > ul,
.footer-nav > ul{columns:2;}
.cta-band{padding:44px 28px;flex-direction:column;text-align:center;}
.cta-band p{margin-left:auto;margin-right:auto;}
.section{padding:64px 0;}
aside.sidebar{grid-template-columns:1fr;}
.title-band{padding:32px 0 40px;}
.layout{padding:40px 0 64px;gap:36px;}
.download-card{padding:26px;}
/* Tap targets: the header's icon buttons (theme toggle, search, menu) sit
just under the 40x40 CSS px minimum on touch. */
.icon-btn{width:44px;height:44px;}
/* Micro-text badges dip under 12px at the base size; keep it legible on
small screens without changing the desktop badge/kicker look. */
.badge,.p-kicker{font-size:12px;}
/* Footer and side-menu links are inline text ~17px tall, which is below the
24px WCAG 2.2 target minimum on its own -- it only passes via row spacing.
Making them block-level with vertical padding gives a real 40px touch row
on phones; desktop is untouched because this is inside the 760px query. */
.footer-nav ul ul a,
.footer-bottom a,
.side-menu a{display:block;padding:10px 0;}
.footer-nav ul ul{gap:0;}
.footer-bottom{gap:0;}
}
@media (max-width:520px){
.footer-grid{grid-template-columns:1fr;}
.footer-nav > div > ul,
.footer-nav > ul{columns:1;}
}
/* ---------- Legacy CMS body content ----------------------------------------
Content rows authored against the v1 design carry plain h1/h2/p/ul markup
with no layout classes of their own. This gives that markup the v2 type
scale and rhythm inside the standard container, so old content still reads
correctly in the new shell without having to be rewritten first. */
.cms-body { padding-block: 56px; }
/* .cms-body is the no-sidebar homepage case. Without an auto inline margin
the 72ch prose column pins to the left edge of a 1200px container and
leaves ~40%% of the width empty, while every other section on the page is
centred -- it read as a layout fault. Interior pages are unaffected: there
.cms-content sits in a sidebar grid column where left alignment is right. */
.cms-body .cms-content{margin-inline:auto;}
.cms-content { max-width: 72ch; }
.cms-content > *:first-child { margin-top: 0; }
.cms-content h1,
.cms-content h2,
.cms-content h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.2; margin: 1.6em 0 .5em; }
.cms-content h1 { font-size: clamp(1.75rem, 3vw, 2.35rem); }
.cms-content h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.cms-content h3 { font-size: 1.15rem; }
.cms-content p,
.cms-content li { color: var(--ink-soft); line-height: 1.75; }
.cms-content p { margin: 0 0 1.1em; }
.cms-content ul,
.cms-content ol { margin: 0 0 1.3em; padding-left: 1.35em; }
.cms-content li { margin-bottom: .45em; }
.cms-content a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 2px; }
.cms-content a:hover { color: var(--brand-blue-deep); }
.cms-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.cms-content iframe,
.cms-content embed,
.cms-content object,
.cms-content video { max-width: 100%; }
.cms-content table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 0 0 1.3em; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cms-content th,
.cms-content td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }
/* Legacy authored rows carry HTML width="NNN" attributes and inline
style="width:NNNpx" sized for the old wide v1 layout. Cap both to the
column instead of stripping them -- nothing is forced narrower than it
was authored, only ever narrower than the viewport allows. */
.cms-content [width],
.cms-content [style*="width"] { max-width: 100% !important; }
.cms-content * { max-width: 100%; }
/* ---------- Mobile-safety net for #pageContent (InteriorPageV2.master) -----
InteriorPageV2.master renders the same legacy CMS body straight into
#pageContent with no .cms-content wrapper of its own (only
HomePageV2.master's Content component gets that class), so none of the
protections above ever reached interior pages. Mirror them here scoped to
#pageContent so the 17 audited pages with fixed-width-markup, plus the
plain-HTML forms/tables other interior pages carry, are safe on mobile. */
#pageContent { max-width: 72ch; }
#pageContent > *:first-child { margin-top: 0; }
#pageContent h1, #pageContent h2, #pageContent h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.2; margin: 1.6em 0 .5em; }
#pageContent h1 { font-size: clamp(1.75rem, 3vw, 2.35rem); }
#pageContent h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
#pageContent h3 { font-size: 1.15rem; }
#pageContent p, #pageContent li { color: var(--ink-soft); line-height: 1.75; }
#pageContent p { margin-bottom: 1em; }
#pageContent p:last-child { margin-bottom: 0; }
#pageContent ul, #pageContent ol { margin: 0 0 1.3em; padding-left: 1.35em; }
#pageContent li { margin-bottom: .45em; }
#pageContent a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
#pageContent a:hover { color: var(--link-hover); }
#pageContent img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
#pageContent iframe,
#pageContent embed,
#pageContent object,
#pageContent video { max-width: 100%; }
#pageContent table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 0 0 1.3em; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#pageContent th,
#pageContent td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }
#pageContent [width],
#pageContent [style*="width"] { max-width: 100% !important; }
#pageContent * { max-width: 100%; }
/* The FormDisplay component (contact/quote forms dropped straight into
#pageContent rather than a .side-card) carries the same 600px-fieldset v1
form.css sizing that .side-card already had to contain below. */
#pageContent .formContainer,
#pageContent .columnLayout,
#pageContent fieldset,
#pageContent .fieldContainer,
#pageContent .fieldContainer.oneColumn,
#pageContent .fieldContainer.twoColumn {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
float: none !important;
box-sizing: border-box;
}
#pageContent input[type="text"],
#pageContent input[type="email"],
#pageContent input[type="tel"],
#pageContent select,
#pageContent textarea {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
/* ---------- Sidebar form containment -------------------------------------
The quote form is rendered by the shared FormDisplay component, whose markup
is styled by the v1 theme's form.css / form-grid-min.css with widths sized
for the old wide layout (600px fieldsets). Dropped into the narrow v2
sidebar that pushed the whole page into horizontal scroll. These rules keep
the component's own markup inside the card without touching the shared
stylesheets, which other templates still rely on. */
.side-card { overflow: hidden; }
.side-card .formContainer,
.side-card .columnLayout,
.side-card fieldset,
.side-card .fieldContainer,
.side-card .fieldContainer.oneColumn,
.side-card .fieldContainer.twoColumn {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
float: none !important;
box-sizing: border-box;
}
.side-card fieldset { border: 0; padding: 0; margin: 0; }
.side-card legend { padding: 0; }
.side-card input[type="text"],
.side-card input[type="email"],
.side-card input[type="tel"],
.side-card select,
.side-card textarea {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
.side-card textarea { resize: vertical; }
.side-card table { width: 100% !important; table-layout: fixed; }
.side-card img { max-width: 100%; height: auto; }
/* ...except the full-bleed lion, which deliberately overhangs the card padding.
This sits after the rule above because both are (0,1,1) specificity and the
later one wins; putting it with the other .lion-photo-accent declarations
further up the file would silently lose. */
.side-card img.lion-photo-accent{max-width:none;}
/* ---------- Main-column form skin ------------------------------------------
contact-us and request-more-information render the shared FormDisplay
component straight into #pageContent. The containment rules above stopped it
overflowing, but it still wore the v1 look: hairline fieldset box, tiny bold
labels, square grey inputs, and the operating system's default Submit button
-- directly opposite the fully themed sidebar quote card asking for the same
information. Skin it to match the .side-card form. */
#pageContent fieldset { border: 0; padding: 0; margin: 0 0 8px; }
#pageContent legend { padding: 0; font-family: var(--font-display); font-weight: 700; color: var(--ink); margin-bottom: 12px; }
#pageContent .fieldContainer label,
#pageContent label {
display: block; font-size: .78rem; font-weight: 600; color: var(--ink-soft);
margin-bottom: 6px; float: none !important; width: auto !important; text-align: left !important;
}
#pageContent input[type="text"],
#pageContent input[type="email"],
#pageContent input[type="tel"],
#pageContent input[type="password"],
#pageContent select,
#pageContent textarea {
padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border);
background: var(--bg-alt); color: var(--ink); font-family: var(--font-body); font-size: .9rem;
margin-bottom: 14px; transition: border-color .18s ease, background .18s ease;
}
#pageContent input:focus, #pageContent textarea:focus, #pageContent select:focus {
outline: none; border-color: var(--brand-blue-bright); background: var(--bg);
}
#pageContent textarea { resize: vertical; min-height: 96px; }
#pageContent .button,
#pageContent input[type="submit"],
#pageContent button[type="submit"] {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
width: auto !important; min-width: 180px;
font-family: var(--font-body); font-weight: 600; font-size: .95rem; padding: 13px 26px;
border-radius: 999px; border: 1px solid transparent;
background: linear-gradient(135deg, var(--brand-blue-bright), var(--brand-blue-deep));
color: #fff; box-shadow: 0 10px 24px -8px rgba(11,95,165,.55); cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease;
}
#pageContent .button:hover,
#pageContent input[type="submit"]:hover { transform: translateY(-2px); }
/* the legacy markup tables contact details into hairline-bordered cells;
inside prose they should read as a plain definition list */
#pageContent table.contact,
#pageContent table[border="0"] { display: table; }
/* ---------- Portfolio index (portfolio.aspx) --------------------------------
The index reuses the homepage's .p-card grid inside the interior article
column. The 72ch prose cap and the homepage's 4-up track count both fight a
card grid in a ~790px column, so lift the cap when a grid is present and run
the grid 2-up (1-up on phones). Items with no screenshot yet render a
monogram tile on the brand gradient instead of an empty image box. */
main.article:has(.portfolio-grid) #pageContent { max-width: none; }
#pageContent .portfolio-grid { grid-template-columns: repeat(2, 1fr); margin-top: 24px; }
#pageContent .portfolio-grid a { text-decoration: none; color: inherit; }
#pageContent .p-card h3 { margin: 0; }
@media (max-width: 700px) { #pageContent .portfolio-grid { grid-template-columns: 1fr; } }
.p-thumb.mono {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--brand-blue-deep), var(--bg-dark-2));
color: rgba(255,255,255,.85); font-family: var(--font-display);
font-size: 2.6rem; font-weight: 700; letter-spacing: .02em;
}
/* If the homepage's per-page body slot has no content, the empty section still
renders its padding as a blank band. Judge emptiness inside .cms-content --
the wrap/cms-content shells themselves are always present. */
section.cms-body:not(:has(.cms-content *)) { display: none; }
/* The full-screen nav overlay covers the header, and the header is where
the toggle lives. Without this the button is painted under the overlay
and there is no way to close the menu on a touch device, where Escape
is not available. */
.menu-toggle{position:relative;z-index:201;}
/* ---------- Product family menu ----------
Same disclosure as the product sites, but written against this theme's own
tokens rather than copied, because Interactive Lion is the only one of the
four with a dark mode. Everything here resolves through --card, --border,
--ink and friends, so it follows the theme toggle with no extra rules. */
.family-menu{position:relative;}
.family-menu > summary{
list-style:none;cursor:pointer;
}
.family-menu > summary::-webkit-details-marker{display:none;}
.family-menu > summary::marker{content:"";}
.family-menu[open] > summary{color:var(--brand-blue-bright);background:var(--bg-alt);}
.family-panel{
position:absolute;top:calc(100% + 10px);right:0;z-index:1200;
width:300px;padding:14px;
background:var(--card);
border:1px solid var(--card-border);
border-radius:14px;
box-shadow:0 24px 60px -20px rgba(0,0,0,.45);
}
.family-parent{
display:block;padding:12px;margin-bottom:6px;
border-radius:10px;background:var(--bg-alt);text-decoration:none;
}
.family-parent img{height:26px;width:auto;display:block;margin-bottom:8px;}
.family-parent .fam-note{display:block;font-size:.76rem;color:var(--ink-soft);line-height:1.4;}
.family-parent.is-here{cursor:default;}
.family-parent .fam-badge{
float:right;font-size:.66rem;font-weight:600;color:var(--ink-faint);letter-spacing:.02em;
}
.family-heading{
display:block;padding:10px 12px 6px;
font-weight:700;font-size:.68rem;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-faint);
}
.family-item{
display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;
column-gap:11px;align-items:center;
padding:9px 12px;border-radius:10px;
border-left:3px solid var(--fam);
text-decoration:none;transition:background .18s ease;
}
.family-emblem{grid-row:1 / span 2;width:28px;height:28px;object-fit:contain;display:block;}
.family-item strong{grid-column:2;align-self:end;font-weight:700;font-size:.92rem;color:var(--ink);line-height:1.3;}
.family-item span{grid-column:2;align-self:start;font-size:.76rem;color:var(--ink-soft);line-height:1.4;}
a.family-item:hover{background:var(--bg-alt);}
.fam-lc{--fam:#6FBB22;}
.fam-oc{--fam:#2B62C4;}
.fam-bc{--fam:#CDA73E;}
/* The lion lockup has a light and a dark artwork; reuse the site's own swap. */
.family-parent .logo-dark{display:none;}
[data-theme="dark"] .family-parent .logo-light{display:none;}
[data-theme="dark"] .family-parent .logo-dark{display:block;}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .family-parent .logo-light{display:none;}
:root:not([data-theme="light"]) .family-parent .logo-dark{display:block;}
}
/* Phones: stop anchoring to the trigger, which sits near the right edge. */
@media (max-width:560px){
.family-menu{position:static;}
.family-panel{
position:fixed;top:76px;left:12px;right:12px;width:auto;
max-height:calc(100vh - 92px);overflow-y:auto;
}
}
/* Hide the panel explicitly when the disclosure is closed rather than relying
on the browser's semantics. Those semantics do not reliably cover
an out-of-flow child: with the panel position:fixed and its parent static on
mobile, Chrome lays the closed panel out as a 30x562 sliver, and Safari on
iOS is looser still. One line removes the whole class of problem. */
.family-menu:not([open]) .family-panel{display:none;}
/* Mobile sidebar order: section menu first, then the quote form, then Follow Us.
The menu is navigation and the form is a conversion ask; making a visitor
scroll past an entire form before they can see the rest of the section is
backwards on a phone. Desktop keeps the form first, where both are visible
at once and the form is the priority. */
@media (max-width: 980px){
aside.sidebar{display:flex;flex-direction:column;min-width:0;}
aside.sidebar > .side-card{min-width:0;max-width:100%;}
aside.sidebar .side-card-menu{order:-1;}
}
/* Grid and flex children refuse to shrink below their content unless told to.
The quote form carries fixed pixel widths from the application's own markup,
so without this the sidebar drags the whole document wider than the screen. */
.layout > *{min-width:0;}
/* Footer link under an article list: the way through to the news archive and
back. Set apart from the last article with a rule above it so it reads as a
destination rather than another item in the list. */
#listItems .list-footer-link{
margin:28px 0 0;
padding-top:22px;
border-top:1px solid var(--border);
}
#listItems .list-footer-link a{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-display);font-weight:700;font-size:.95rem;
color:var(--brand-blue-bright);text-decoration:none;
}
#listItems .list-footer-link a::after{content:"→";}
#listItems .list-footer-link a:hover{text-decoration:underline;}