/* THE header measurement source for every public page.
 * ---------------------------------------------------------------------------------------------
 * Until this file existed, each section carried its own numbers. A sweep of the site found eight
 * different nav gaps (40px on the homepage, 36px on Services, 30px on Shows, 28px on the Blog's
 * bar, 26px on Company History and Testimonials, 24px on the guides, 34px on the quote landing
 * page), five font sizes and six different link-row shells. That is why the header changed shape
 * as a visitor moved between sections, and why adding one entry made "Trade Show Guides" break
 * onto a second line on some pages and not others.
 *
 * Those per-page declarations have been REMOVED from the pages themselves - 60 of them, out of 18
 * inline <style> blocks (each re-pinned in SecurityConfig, since style-src carries no
 * 'unsafe-inline') and 4 stylesheets. This file is not an override layer on top of them; it is
 * what is left. The numbers are taken from /services.html as it rendered, which is the reference
 * the owner named.
 *
 * What is deliberately NOT standardised here: position/top/z-index on the bars that already pin
 * themselves. Some are `fixed` with the page reserving top padding for them, others `sticky` with
 * no such reservation, so turning one into the other leaves either a gap under the header or
 * content hidden beneath it. Every page measures as staying put while scrolling, so the behaviour
 * is uniform; only the mechanism differs, and it differs for a reason.
 *
 *   GAP            28px          (desktop)
 *   FONT_SIZE      14.4px        (var(--text-sm))
 *   LINE_HEIGHT    1
 *   CONTACT_HEIGHT 40px          padding 8px 20px, 13.6px / 600
 *   QUOTE          600 weight, the page's own link colour
 *   NOWRAP         yes, on every entry
 *   BREAKPOINT     980px
 */

/* Every link row the public site ships. One list, so there is one place to change. */
.nav-links,
.bl-nav-links,
.history-nav-links,
.site-links,
.quote-landing-nav,
.quote-entry-nav,
.customer-links,
.seo-links,
.t-nav-links {
  /* No `display` here on purpose. Every one of these rows is hidden below its own breakpoint and
     reopened by a toggle, and each page does that with `display:none` inside its own media query.
     A `display:flex` in this file sits later in the cascade at equal specificity, so it won the
     tie and forced all nine entries open on a 390px screen. Alignment and spacing are safe to set
     because they only take effect once the page has decided the row is a flex row at all. */
  align-items: center;
  gap: 28px;
  flex-wrap: nowrap;
  margin-left: auto;          /* the row sits at the right-hand end of the bar, as on Services */
}

/* white-space is the whole reason "Trade Show Guides" used to fold. These rows are already
   flex-wrap:nowrap, so no entry can move to a second line - what happened instead is that the
   words broke INSIDE one box once the row ran short of room, taking the row from 40px tall to 46
   and then to 69. Entries that cannot break need a gap that can give, hence the clamp below. */
.nav-links > a,
.bl-nav-links > a,
.history-nav-links > a,
.site-links > a,
.quote-landing-nav > a,
.quote-entry-nav > a,
.customer-links > a,
.seo-links > a,
.t-nav-links > a {
  white-space: nowrap;
  flex: 0 0 auto;
  font-size: var(--text-sm, 14.4px);
  line-height: 1;
  text-transform: none;       /* Company History rendered HOME PORTFOLIO SERVICES in capitals */
  letter-spacing: normal;
  text-decoration: none;
}

/* Between the desktop row and the mobile menu there is a band where eight entries plus a button no
   longer fit at 28px. Closing the gap to 16px buys about 100px, which covers it; below that the
   toggle takes over. */
@media (max-width: 1200px) {
  .nav-links,
  .bl-nav-links,
  .history-nav-links,
  .site-links,
  .quote-landing-nav,
  .quote-entry-nav,
  .customer-links,
  .seo-links,
  .t-nav-links { gap: clamp(16px, 2vw, 28px); }
}

/* ---------------------------------------------------------------------------------------------
 * Quote and Contact - the two entries every row ends with.
 *
 * etexpo-boot.js appends these as well, but its first line is querySelector(".nav-links"), and
 * only ten of the site's pages use that shell AND load that script. Everywhere else the pair never
 * appeared. Worse, the orange styling boot injects reads ".nav-links a.nav-contact", so on any
 * other shell Contact fell back to body text: the same button was orange on Services and black on
 * the Blog. contact-nav.js fills the gap in the DOM; these rules make it look the same everywhere.
 */

.nav-links a.nav-contact,
.bl-nav-links a.nav-contact,
.history-nav-links a.nav-contact,
.site-links a.nav-contact,
.quote-landing-nav a.nav-contact,
.quote-entry-nav a.nav-contact,
.customer-links a.nav-contact,
.seo-links a.nav-contact,
.t-nav-links a.nav-contact,
.nav-links a.nav-contact span,
.bl-nav-links a.nav-contact span,
.history-nav-links a.nav-contact span,
.site-links a.nav-contact span,
.quote-landing-nav a.nav-contact span,
.quote-entry-nav a.nav-contact span,
.t-nav-links a.nav-contact span {
  text-transform: none;
  letter-spacing: normal;
}

.nav-links a.nav-contact,
.bl-nav-links a.nav-contact,
.history-nav-links a.nav-contact,
.site-links a.nav-contact,
.quote-landing-nav a.nav-contact,
.quote-entry-nav a.nav-contact,
.customer-links a.nav-contact,
.seo-links a.nav-contact,
.t-nav-links a.nav-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  white-space: nowrap;

  height: 40px;
  padding: 8px 20px;
  /* Literal, not var(--accent): the guides page defines --accent as #ff684b, which rendered the
     same button as rgb(255,104,75) there and rgb(255,107,74) everywhere else. */
  border: 1px solid #ff6b4a;
  border-radius: 0;
  background: #ff6b4a;
  color: #0a0c10;

  font-family: inherit;
  font-size: 13.6px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.nav-links a.nav-contact:hover,
.bl-nav-links a.nav-contact:hover,
.history-nav-links a.nav-contact:hover,
.site-links a.nav-contact:hover,
.quote-landing-nav a.nav-contact:hover,
.quote-entry-nav a.nav-contact:hover,
.customer-links a.nav-contact:hover,
.seo-links a.nav-contact:hover,
.t-nav-links a.nav-contact:hover {
  background: transparent;
  color: #ff6b4a;
}

/* Quote is a text entry, not a button. No colour of its own on purpose: --text-primary is #FFFFFF
   site-wide, which is right on the dark bars but rendered Quote white-on-white on the legal pages,
   whose header is light. Left unset, it takes the colour of the links beside it on every page. */
.nav-links a.nav-quote-link,
.bl-nav-links a.nav-quote-link,
.history-nav-links a.nav-quote-link,
.site-links a.nav-quote-link,
.quote-landing-nav a.nav-quote-link,
.quote-entry-nav a.nav-quote-link,
.customer-links a.nav-quote-link,
.seo-links a.nav-quote-link,
.t-nav-links a.nav-quote-link {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------
 * Mobile. Below the breakpoint each of these rows becomes a stacked panel behind a toggle - that
 * mechanism is the page's own and is left alone. What is set here is only what the panel needs to
 * be legible: entries on their own lines, and a touch target tall enough to hit.
 */
@media (max-width: 980px) {
  .nav-links,
  .bl-nav-links,
  .history-nav-links,
  .site-links,
  .quote-landing-nav,
  .quote-entry-nav,
  .customer-links,
  .seo-links,
  .t-nav-links {
    /* Only what the opened panel needs. A row that reaches this width still laid out (the legal
       pages drop theirs to full width under the logo rather than behind a toggle) has nine entries
       and nowhere near the room for them on one line, so wrapping is what keeps it inside the
       viewport. Rows that ARE behind a toggle are display:none from their own stylesheet and this
       changes nothing for them - the earlier version of this block set `display:flex` as well,
       which overrode that and forced all nine open on a 390px screen. */
    flex-wrap: wrap;
    gap: 12px;
    margin-left: 0;
  }

  .nav-links a.nav-contact,
  .bl-nav-links a.nav-contact,
  .history-nav-links a.nav-contact,
  .site-links a.nav-contact,
  .quote-landing-nav a.nav-contact,
  .quote-entry-nav a.nav-contact,
  .t-nav-links a.nav-contact { margin: 10px 0 4px; justify-content: center; }
}

/* ---------------------------------------------------------------------------------------------
 * Staying put while the page scrolls.
 *
 * Services pins its bar with .navbar{position:fixed;top:0}. Three sections never pinned anything:
 * the guides page, the quote landing page and the legal pages scrolled their header away with the
 * content. sticky rather than fixed, because those pages reserve no top padding for a bar lifted
 * out of the flow - sticky keeps the space the header already occupies and pins it on the way past.
 *
 * Written with the element name attached so these outrank each page's own single-class rule
 * whichever stylesheet the browser reads last: those pages carry their CSS in a CSP-hash-pinned
 * inline <style>, which cannot be reordered without re-pinning.
 */
header.site-head,
header.quote-landing-header,
nav.history-nav,
nav.t-nav {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* The guides page keeps a second sticky strip - its section tabs - pinned to top:0 from when
   nothing sat above it. Left alone the two would occupy the same band. */
main.wrap .tabs,
.wrap > .tabs {
  top: 71px;
}

/* ---------------------------------------------------------------------------------------------
 * The pinned corner fallback, for a page with no link row at all (/thank-you.html). It is a
 * fallback, not the design: an earlier version of this file used it on every page, which put a
 * floating button on top of headers that had room for a real nav entry.
 */
.et-contact-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-sizing: border-box;
  height: 40px;
  padding: 8px 20px;
  border: 1px solid #ff6b4a;
  border-radius: 0;
  background: #ff6b4a;
  color: #0a0c10;
  font-family: inherit;
  font-size: 13.6px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.et-contact-cta:hover,
.et-contact-cta:focus-visible {
  background: transparent;
  color: #ff6b4a;
  outline: none;
}

.et-contact-cta--float {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 2147483000;
}

@media (max-width: 600px) {
  .et-contact-cta { height: 36px; padding: 7px 14px; font-size: 12.8px; }
}

/* ---------------------------------------------------------------------------------------------
 * The homepage alone released its bar on a phone: index.html carries
 * `@media(max-width:767px){.navbar.scrolled{position:relative}}`, so the moment a visitor scrolled
 * the header dropped back into the flow and rode up the screen, while every other section's stayed.
 * The bar is `fixed` before it scrolls and the page already reserves the space for it, so keeping
 * it fixed afterwards changes nothing about the layout - only about where it ends up.
 */
@media (max-width: 767px) {
  nav.navbar.scrolled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------------------------
 * The mobile menu on the three pages that never had one.
 *
 * Twelve of the fifteen headers collapse behind a toggle below 980px. The quote landing page and
 * the two legal pages did not: their rows stayed laid out and, now that they carry nine entries
 * rather than five, wrapped across the width of a phone. contact-nav.js supplies the button on
 * those pages; these rules are what it needs to hide and show the row.
 */
[data-et-menu-collapsed] {
  display: none !important;
}

[data-et-menu-collapsed].is-open {
  display: flex !important;
  position: absolute;
  z-index: 30;
  top: calc(100% + 1px);
  right: 12px;
  left: 12px;
  /* The legal pages give their row `width:100%` at this breakpoint. Left in place that is 100% of
     the containing block, which the 12px insets then push past the right edge - the panel opened
     wider than the phone and the page scrolled sideways. The insets alone decide the width. */
  width: auto;
  box-sizing: border-box;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin: 0;
  padding: 12px;
  /* No background here: contact-nav.js copies the header bar's own, walking up until it finds one
     that is not transparent. A fixed colour was wrong on half the site - the legal pages have a
     light header with dark-grey links, so a dark panel rendered dark text on a dark ground. */
  border: 1px solid currentColor;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .45);
}

[data-et-menu-collapsed].is-open > a {
  display: flex;
  align-items: center;
  min-height: 44px;          /* a tap target, not a line of text */
  padding: 10px 12px;
}

.et-menu-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.et-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 3px 0;
  background: currentColor;
}

@media (min-width: 981px) {
  .et-menu-toggle { display: none; }
}

/* ---------------------------------------------------------------------------------------------
 * One column for the header content, the same one the page body uses.
 *
 * Measured at 1440: Services, Contact and the homepage line their bar up inside a 1280px column
 * (80..1360). The guides page ran its header edge to edge (1440) and the quote landing page used
 * 1360, so the logo started and the row ended in a different place on those two - which is the
 * "顶部导航没有对齐下面的横线" the owner kept pointing at.
 *
 * Done with padding rather than a width, so the bar's background and its bottom rule still span
 * the full screen while the content inside sits on the 1280 column. Below the column's own width
 * the max() falls back to a plain 24px gutter.
 */
/* The column every header's content sits on: 1232px wide, centred - which at 1440 puts the logo's
   left edge on 104 and the row's right edge on 1336, exactly where /services.html has them and
   exactly where the page body's own container puts its first and last pixel.

   Measured before this block existed, at 1440: logo left was 104 on Services, Home and Contact,
   120 on the legal pages and 154 on the Blog and Testimonials; the row's right edge took six
   different values between 1176 and 1360. That is the "顶部导航没有对齐下面的横线" the owner kept
   coming back to.

   Two shapes to cover. Pages with an inner wrapper (.container, .bl-wrap, .t-wrap) constrain it
   with a max-width, and three different ones were in use - 1180, 1200 and 1280. Pages without one
   (the guides and quote headers) carry the column as padding on the bar itself, so its background
   and rule still span the screen. */

header.site-head,
header.quote-landing-header {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: max(24px, calc((100% - 1232px) / 2));
  padding-right: max(24px, calc((100% - 1232px) / 2));
  box-sizing: border-box;
}

nav.navbar > .container,
nav.navbar > .nav-flex,
nav.bl-nav > .bl-wrap,
nav.history-nav > .container,
nav.t-nav > .t-wrap,
header.bl-head > .bl-wrap {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* company-history and the legal pages centre their row with `margin: 0 auto`, which beats a
   margin-left on its own - the entries ended up floating in the middle of the bar with a wide gap
   before the right edge. Naming both sides settles it. */
.history-nav-links,
.bl-nav-links,
.t-nav-links,
.site-links,
.nav-links {
  margin-right: 0;
}

/* The quote landing page lays its header out as a grid - logo, nav, phone - and left to itself the
   nav floats in the middle of its column. Pushing it to the end of that column puts its right edge
   beside the phone rather than 160px short of it. */
header.quote-landing-header > nav.quote-landing-nav {
  justify-self: end;
}

/* The quote landing page sets its header's vertical rhythm through the same shorthand, so the
   block above would have flattened it to zero. */
header.quote-landing-header {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* The quote landing page renders its entries at 650. Every other section uses the body weight. */
.quote-landing-nav > a,
.quote-entry-nav > a {
  font-weight: 400;
}

/* Quote keeps the emphasis it has on Services - it is the entry before the button. */
.quote-landing-nav > a.nav-quote-link,
.quote-entry-nav > a.nav-quote-link {
  font-weight: 600;
}

/* The quote landing page is the only header carrying a third thing - a phone number - and it sat
   at the far right, which left the link row ending on 1152 while every other section's ends on
   1336. Laying the bar out as a flex row and putting the phone ahead of the links moves the row
   back to the shared right edge without taking the number off the page.

   The page declares this header as a three-column grid; `display:flex` here replaces that, so the
   column widths it defines (260px 1fr auto) no longer apply and the three children size to their
   content instead. */
header.quote-landing-header {
  display: flex;
  align-items: center;
  gap: 28px;
}

header.quote-landing-header > .quote-landing-contact {
  order: 2;
  margin-left: auto;        /* takes up the slack, so the phone and the row travel together */
  flex: 0 0 auto;
}

header.quote-landing-header > nav.quote-landing-nav {
  order: 3;
  margin-left: 0;
  justify-self: auto;
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  header.quote-landing-header { flex-wrap: wrap; position: relative; }
  header.quote-landing-header > .quote-landing-contact { margin-left: auto; }
}

/* =============================================================================================
 * THE public footer.
 *
 * Same story as the header, one layer down. The site rendered seven different footers, and on
 * thirteen pages the footer was built twice: the document carried one shape and then
 * phase6b-public.js's normalizeFooter() pulled the grid apart and rebuilt it, forcing the result
 * with a wall of !important injected from script. A visitor saw the first shape, then the second.
 *
 * The values below are that second shape, read off the homepage as it finally rendered - so the
 * footer looks exactly as it does today, but it is in the document from the first byte and styled
 * by a stylesheet rather than by a script that has to run first.
 *
 * The column is 1280 wide with 24px of padding, which puts the content on 104..1336 at 1440 -
 * the same line the header sits on, which is what "顶部和底部对齐" means in practice.
 * ============================================================================================= */

footer[data-et-footer="standard"] {
  padding: 48px 0 32px;
  background: #06080a;
  color: #e8edf2;
  font-size: 16px;
}

footer[data-et-footer="standard"] > .container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

footer[data-et-footer="standard"] .footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 8vw, 120px);
  align-items: start;
  width: 100%;
}

footer[data-et-footer="standard"] .footer-brand-col img {
  display: block;
  width: auto;
  height: 26px;
  max-width: 180px;
}

footer[data-et-footer="standard"] .footer-brand-col p {
  margin: 16px 0 0;
  color: #a0aab5;
  font-size: 13.6px;
  line-height: 1.7;
}

footer[data-et-footer="standard"] .social-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
}

/* The Explore column ends on the same line the header's Contact button ends on. */
footer[data-et-footer="standard"] .footer-explore-col {
  justify-self: end;
  width: auto;
}

footer[data-et-footer="standard"] .footer-explore-col h3 {
  margin: 0 0 18px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

footer[data-et-footer="standard"] .footer-explore-col p {
  margin: 0;
}

footer[data-et-footer="standard"] .footer-explore-col a {
  color: #a0aab5;
  font-size: 13.6px;
  line-height: 1.7;
  text-decoration: none;
}

footer[data-et-footer="standard"] .footer-explore-col a:hover,
footer[data-et-footer="standard"] .footer-legal a:hover,
footer[data-et-footer="standard"] .u-fe432663bd:hover {
  color: #ff6b4a;
}

footer[data-et-footer="standard"] hr {
  height: 1px;
  margin: 32px 0;
  border: 0;
  border-top: 1px solid #2a2e38;
  background: transparent;
}

footer[data-et-footer="standard"] .u-8a28a69d45 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

footer[data-et-footer="standard"] .copyright {
  color: #a0aab5;
  font-size: 12px;
}

footer[data-et-footer="standard"] .u-fe432663bd {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a0aab5;
  font-size: 12px;
  text-decoration: none;
}

footer[data-et-footer="standard"] .footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  margin: 10px 0 0;
}

footer[data-et-footer="standard"] .footer-legal a,
footer[data-et-footer="standard"] .footer-legal-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #a0aab5;
  font: inherit;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}

/* On a phone the two columns stack and the legal strip moves under the copyright, which is what
   phase6b's injected @media did. The bottom padding clears the floating WhatsApp rail. */
@media (max-width: 768px) {
  footer[data-et-footer="standard"] .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  footer[data-et-footer="standard"] .footer-explore-col {
    justify-self: start;
    width: 100%;
  }
  footer[data-et-footer="standard"] .footer-explore-col p {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  footer[data-et-footer="standard"] .footer-explore-col p br { display: none; }
  footer[data-et-footer="standard"] .footer-explore-col a {
    display: block;
    min-height: 40px;
    line-height: 40px;
  }
  footer[data-et-footer="standard"] .u-8a28a69d45 { justify-content: flex-start; gap: 14px; }
  footer[data-et-footer="standard"] .footer-legal { justify-content: flex-start; }
  footer[data-et-footer="standard"] { padding-bottom: max(104px, calc(104px + env(safe-area-inset-bottom))); }
}

/* The footer's social icons, to the measurements /services.html renders.
 *
 * Measured across pages before this rule: 38x38 with a 1px #2a2e38 border and grey glyphs on
 * Services, an unstyled 18x22 link in the browser's default blue on the legal pages, and a 38x38
 * white glyph with no border on the quote landing page. Same four links, three appearances. */
/* Two extra classes in the selector, not !important: the quote landing page colours every link in
   its body white with a selector specific enough to beat a shorter one, and the box needs
   border-box or the 1px border makes it 40px on pages whose reset does not set it. */
footer[data-et-footer="standard"] .footer-brand-col .social-row a[href] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid #2a2e38;
  border-radius: 0;
  background: transparent;
  color: #a0aab5;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}

footer[data-et-footer="standard"] .footer-brand-col .social-row a[href]:hover,
footer[data-et-footer="standard"] .footer-brand-col .social-row a[href]:focus-visible {
  color: #ff6b4a;
  border-color: #ff6b4a;
  outline: none;
}

footer[data-et-footer="standard"] .footer-brand-col .social-row a[href] svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* =============================================================================================
 * The quote landing page keeps the standard footer's structure and takes its own colours.
 *
 * Every measurement above still applies - same 1280 column, same two-column grid, same 48/32
 * padding, same 13.6px links, same 38x38 social boxes. Only the palette is swapped, to the one
 * that page already defines for itself (--quote-purple-deep #240061, --quote-yellow #fff200,
 * --quote-white #fff), so the footer belongs to the page it sits on without becoming a second
 * footer variant. Nothing here changes a size, a spacing or a line-height.
 * ============================================================================================= */

body.quote-landing-page footer[data-et-footer="standard"] {
  background: #240061;
  color: #fff;
}

body.quote-landing-page footer[data-et-footer="standard"] .footer-brand-col p,
body.quote-landing-page footer[data-et-footer="standard"] .footer-explore-col a,
body.quote-landing-page footer[data-et-footer="standard"] .copyright,
body.quote-landing-page footer[data-et-footer="standard"] .u-fe432663bd,
body.quote-landing-page footer[data-et-footer="standard"] .footer-legal a,
body.quote-landing-page footer[data-et-footer="standard"] .footer-legal-button {
  color: #eadfff;                 /* the page's own muted tone, not the site's grey */
}

body.quote-landing-page footer[data-et-footer="standard"] .footer-explore-col h3 {
  color: #fff;
}

/* Yellow is this page's accent everywhere else on it, so it is the hover here too. */
body.quote-landing-page footer[data-et-footer="standard"] .footer-explore-col a:hover,
body.quote-landing-page footer[data-et-footer="standard"] .footer-legal a:hover,
body.quote-landing-page footer[data-et-footer="standard"] .u-fe432663bd:hover {
  color: #fff200;
}

body.quote-landing-page footer[data-et-footer="standard"] hr {
  border-top-color: rgba(255, 242, 0, .38);
}

body.quote-landing-page footer[data-et-footer="standard"] .footer-brand-col .social-row a[href] {
  border-color: rgba(255, 242, 0, .38);
  color: #eadfff;
}

body.quote-landing-page footer[data-et-footer="standard"] .footer-brand-col .social-row a[href]:hover,
body.quote-landing-page footer[data-et-footer="standard"] .footer-brand-col .social-row a[href]:focus-visible {
  border-color: #fff200;
  color: #fff200;
}

/* ---------------------------------------------------------------------------------------------
 * Two page families that were never part of the header standard.
 *
 * The landing pages (*-booth-builder.html and friends, rendered from LandingPageRenderer) carried
 * their own five-entry row under a different class, and the booth package pages carried no site
 * navigation at all - a visitor arriving from search could reach the quote flow and nothing else.
 * Registering .lp-fullnav alongside the other rows brings both under the same measurements, and
 * contact-nav.js appends Quote and Contact to them like every other row.
 */
.lp-fullnav {
  align-items: center;
  gap: 28px;
  flex-wrap: nowrap;
  margin-left: auto;
  margin-right: 0;
}

.lp-fullnav > a {
  white-space: nowrap;
  flex: 0 0 auto;
  font-size: var(--text-sm, 14.4px);
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
}

@media (max-width: 1200px) {
  .lp-fullnav { gap: clamp(16px, 2vw, 28px); }
}

@media (max-width: 980px) {
  .lp-fullnav { flex-wrap: wrap; gap: 12px; margin-left: 0; }
}

.lp-fullnav a.nav-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  white-space: nowrap;
  height: 40px;
  padding: 8px 20px;
  border: 1px solid #ff6b4a;
  border-radius: 0;
  background: #ff6b4a;
  color: #0a0c10;
  font-family: inherit;
  font-size: 13.6px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
}

.lp-fullnav a.nav-contact span { text-transform: none; letter-spacing: normal; }
.lp-fullnav a.nav-contact:hover { background: transparent; color: #ff6b4a; }
.lp-fullnav a.nav-quote-link { font-weight: 600; }

/* The booth package header stayed where it was written while the page scrolled past it, and its
   content sat on a 1180 column rather than the 1232 everything else uses. */
header.bp-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #0b0d11;
  padding-left: max(24px, calc((100% - 1232px) / 2));
  padding-right: max(24px, calc((100% - 1232px) / 2));
}

/* The SeoController shell's header (services detail, locations, landing pages). It had no styling
   of its own beyond the browser default, so its links rendered in Times New Roman at 16px while
   every other section used Inter at 14.4px. Same bar treatment as /services.html. */
nav.seo-navbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 16px 0;
  background: rgba(10, 12, 16, .94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

nav.seo-navbar .seo-nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

nav.seo-navbar .seo-logo img {
  display: block;
  width: auto;
  height: 26px;
}

nav.seo-navbar .nav-links > a { color: #a0aab5; }
nav.seo-navbar .nav-links > a:hover { color: #ff6b4a; }

/* Two residuals the sweep turned up across the wider page families.
 *
 * font-family: the SeoController shell and the booth package pages set none, so their entries fell
 * back to the browser default - Times New Roman on one, Arial on another, against Inter everywhere
 * else. Naming the stack here rather than on each page keeps it in the one measurement source.
 *
 * box-sizing: two pages rendered Contact at 44px instead of 40 because their own reset leaves
 * content-box in place and the 1px border and 8px padding then sit outside the declared height. */
.nav-links > a,
.bl-nav-links > a,
.history-nav-links > a,
.site-links > a,
.quote-landing-nav > a,
.quote-entry-nav > a,
.customer-links > a,
.seo-links > a,
.t-nav-links > a,
.lp-fullnav > a {
  font-family: var(--font-sans, "Inter", "Segoe UI", Arial, sans-serif);
}

.nav-links a.nav-contact,
.bl-nav-links a.nav-contact,
.history-nav-links a.nav-contact,
.site-links a.nav-contact,
.quote-landing-nav a.nav-contact,
.quote-entry-nav a.nav-contact,
.customer-links a.nav-contact,
.seo-links a.nav-contact,
.t-nav-links a.nav-contact,
.lp-fullnav a.nav-contact {
  box-sizing: border-box;
  min-height: 40px;
  max-height: 40px;
}

/* The booth package DETAIL page wraps its bar as <header class="package-detail-header"><div
   class="bp-header">, so the bp-header rule above - written for the element - never matched it and
   that page alone scrolled its header away. The portfolio case pages and blog articles keep their
   own crumb rows; those sit below the standard bar and are not headers. */
header.package-detail-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #0b0d11;
}

header.package-detail-header > .bp-header {
  padding-left: max(24px, calc((100% - 1232px) / 2));
  padding-right: max(24px, calc((100% - 1232px) / 2));
}

/* A crumb row directly under the standard bar reads as part of the header, so it takes the same
   column rather than starting at the viewport edge. */
nav.case-nav,
nav.ba-nav {
  padding-left: max(24px, calc((100% - 1232px) / 2));
  padding-right: max(24px, calc((100% - 1232px) / 2));
}

/* The last two single-page deviations the sweep turned up.
 *
 * company-history renders its entries at 600 while every other section uses the body weight; the
 * standard row set size and family but never weight, so that page kept its own. Quote stays at 600
 * by its own rule below - it is the entry before the button and is meant to stand out.
 *
 * The booth package detail page puts its row inside <header class="package-detail-header"><div
 * class="bp-header">, and booth-packages.css gives .bp-header a 1180 column - so that one page's
 * row ended on 1216 while all forty-four others ended on 1336. The descendant selector outranks
 * the page's single class without needing !important. */
.nav-links > a,
.bl-nav-links > a,
.history-nav-links > a,
.site-links > a,
.quote-landing-nav > a,
.quote-entry-nav > a,
.customer-links > a,
.seo-links > a,
.t-nav-links > a,
.lp-fullnav > a {
  font-weight: 400;
}

.nav-links > a.nav-quote-link,
.bl-nav-links > a.nav-quote-link,
.history-nav-links > a.nav-quote-link,
.site-links > a.nav-quote-link,
.quote-landing-nav > a.nav-quote-link,
.quote-entry-nav > a.nav-quote-link,
.customer-links > a.nav-quote-link,
.seo-links > a.nav-quote-link,
.t-nav-links > a.nav-quote-link,
.lp-fullnav > a.nav-quote-link,
.nav-links > a.nav-contact,
.bl-nav-links > a.nav-contact,
.history-nav-links > a.nav-contact,
.site-links > a.nav-contact,
.quote-landing-nav > a.nav-contact,
.quote-entry-nav > a.nav-contact,
.t-nav-links > a.nav-contact,
.lp-fullnav > a.nav-contact {
  font-weight: 600;
}

header.package-detail-header .bp-header {
  padding-left: max(24px, calc((100% - 1232px) / 2));
  padding-right: max(24px, calc((100% - 1232px) / 2));
}

header.package-detail-header .nav-links > a {
  color: #a0aab5;
}

header.package-detail-header .nav-links > a:hover {
  color: #ff6b4a;
}

/* The row has to BE a flex row for the gap, the nowrap and the margin-left:auto above to mean
   anything, and two pages never made it one - the booth package detail page laid its entries out
   as inline text inside a block, 121px wide in the middle of the bar.
 *
 * Declared inside min-width so it cannot repeat the earlier mistake: every page hides its row
 * below the breakpoint with `display:none` inside a max-width query, and a bare `display:flex`
 * here won that tie and forced all nine entries open on a 390px screen. A min-width rule cannot
 * reach a max-width one. */
@media (min-width: 981px) {
  .nav-links,
  .bl-nav-links,
  .history-nav-links,
  .site-links,
  .quote-landing-nav,
  .quote-entry-nav,
  .seo-links,
  .t-nav-links,
  .lp-fullnav {
    display: flex;
  }
}

/* And that page's bar is not full width - it sits at 200..1240 inside a 1440 viewport, so even a
   correct column inside it started in the wrong place. */
header.package-detail-header {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}