/* ==========================================================================
   public-modern.css  —  Positive Proximity public site refresh
   --------------------------------------------------------------------------
   Loaded AFTER layout.css, and everything is scoped to  body.pub-modern  so
   the refresh is opt-in: remove the class in /includes/header_inc.asp and the
   site renders exactly as it did before.

   Phase 1 (8/16/2026) is the HEADER and MAIN MENU only. Page content is
   deliberately untouched — that is the next phase.

   The design language is the one already built for /mytools/ (admin-modern.css)
   so the marketing site and the signed-in portal read as one product: the same
   greens and neutrals, the same 10px radius, the same pill navigation with a
   ring on the current item.

   NOTE: /mytools/ is NOT affected by this file. It is only linked from the
   public header include.
   ========================================================================== */

body.pub-modern {
    /* brand — same values as admin-modern.css */
    --pp-green:        #36b44b;
    --pp-green-dark:   #2a9c3d;
    --pp-green-soft:   #eaf7ec;

    /* neutrals */
    --pp-text:         #23282d;
    --pp-muted:        #6b7280;
    --pp-faint:        #98a1ac;
    --pp-line:         #e3e7ec;
    --pp-line-soft:    #eef1f5;
    --pp-surface:      #ffffff;
    --pp-canvas:       #f5f7fa;
    --pp-hover:        #f2f5f8;

    --pp-radius:       10px;
    --pp-radius-sm:    6px;
    --pp-shadow-sm:    0 1px 2px rgba(16,24,40,.06);
    --pp-shadow:       0 8px 24px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06);

    --pp-navfont:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                       "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   1. The header shell
   The old header was a 5px grey slab over a white row, with a dark
   #signup_login bar under it carrying the menu. One white surface now, with a
   hairline under it and the menu on the same field as the logo.
   ========================================================================== */

body.pub-modern #header {
    border-top: 3px solid var(--pp-green);
    background: var(--pp-surface);
}
body.pub-modern #header .row { border: none; }

/* ---------- one horizontal band ----------
   The header used to be two stacked bands: a row with the logo, and a separate
   #signup_login bar under it holding the menu. #signup_login now sits inside
   the row's right-hand column (see header_inc.asp), so the whole header is one
   line: logo and tagline left, Contact/Login over the menu on the right.

   The two columns ship as .span6, a fixed 300px each. That is nowhere near
   enough for five menu options, so the row is a flex pair instead: the logo
   takes what it needs and the nav side takes the rest. */
body.pub-modern #header > .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
body.pub-modern #header > .row > .span6 {
    width: auto;
    margin: 0;
    box-sizing: border-box;
}
body.pub-modern #header > .row > .span6:first-child { flex: 0 0 auto; }
body.pub-modern #header > .row > .span6:last-child {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

/* layout.css caps this bar at 40px (and 38px under 767px) because it used to
   be a single strip of buttons. It holds two stacked rows now, so the caps
   have to go — they are id selectors, hence the !importants. */
body.pub-modern #signup_login {
    background: transparent !important;
    max-height: none !important;
    height: auto !important;
    border: none;
    box-sizing: border-box;
    padding: 10px 0;
}
/* Contact/Login above, menu below, both hard right */
body.pub-modern #signup_login .row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: auto;
    margin: 0;
    padding: 0 !important;
}
body.pub-modern #signup_login #login {
    height: auto;
    float: none;
    margin: 0;
}
body.pub-modern #signup_login #buttons {
    float: none;
    margin: 0;
    display: flex;
    gap: 8px;
}

/* the menu's own column ships as a percentage-width .span10 */
body.pub-modern #signup_login .span10 {
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
}

/* Logo + tagline
   The file is 2048x768. The width/height attributes in the markup are the
   intrinsic size — they give the browser the aspect ratio so the header does
   not reflow while the image loads — and the display size is set here.

   Both boxes ship as floats, so their vertical relationship was whatever two
   hand-tuned margins happened to produce (12px on the logo, 22px on the
   tagline). Their container is a flex row instead, which centres the tagline
   against the logo whatever either one's height turns out to be — including
   after the logo is replaced again. */
body.pub-modern #header .row > .span6:first-child {
    display: flex;
    align-items: center;
    gap: 0;
}
body.pub-modern #logo {
    float: none !important;
    flex: 0 0 auto;
    margin: 12px 0;
    padding: 0 !important;
}
body.pub-modern #logo img {
    display: block;
    width: 150px;
    height: auto;
    max-width: 100%;
}
body.pub-modern #tagline {
    float: none;
    flex: 0 1 auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 2px 0 2px 16px;
    margin-left: 16px;
    border-left: 1px solid var(--pp-line);
    color: var(--pp-text);
    font-family: var(--pp-navfont);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}
body.pub-modern #tagline div { padding: 0 !important; }
body.pub-modern #tagline span {
    color: var(--pp-text);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
}

/* ==========================================================================
   2. The main menu — pills, matching the portal
   ========================================================================== */

body.pub-modern .sf-menu {
    float: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* the menu sits to the right, by Login */
    flex-wrap: wrap;
    gap: 0;
    font-family: var(--pp-navfont);
}
body.pub-modern .sf-menu > li {
    float: none;
    display: flex;
    align-items: center;
    margin: 0;
    border: none !important;    /* the old menu drew 1px dividers between items */
    text-align: left;
}
/* Contact and Login are in the list for the mobile clone only — they are
   buttons above the menu on desktop. layout.css hides them with
   `.display-mobile{display:none}`, which the rule above was outranking, so
   they showed up twice. Restated here at the weight it takes to win.
   The mobile menu is unaffected: scripts.js replaces the clone's class
   attribute, so #mobile-menu is not .sf-menu. */
body.pub-modern .sf-menu > li.display-mobile { display: none; }

/* (Green dot separators between the options were tried on 8/16/2026 and
   removed — they read as clutter next to the pills, which already separate the
   options on their own. The old 1px dividers are gone too; spacing does the
   work.) */
body.pub-modern .sf-menu > li + li { margin-left: 2px; }
body.pub-modern .sf-menu a {
    font-family: var(--pp-navfont);
    color: var(--pp-text);
}
body.pub-modern .sf-menu > li > a,
body.pub-modern .sf-menu > li.dropdown > a {
    color: var(--pp-text) !important;
    font-size: 14.5px;
    font-weight: 600;
}
body.pub-modern .sf-menu > li > a > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: var(--pp-radius);
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.pub-modern .sf-menu > li > a:hover > span,
body.pub-modern .sf-menu > li.sfHover > a > span {
    color: var(--pp-text) !important;
    background-color: var(--pp-hover) !important;
}
/* the current section */
body.pub-modern .sf-menu > li.active > a > span {
    color: var(--pp-text) !important;
    background-color: var(--pp-surface) !important;
    border-color: var(--pp-green);
    border-width: 1.5px;
    box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 0 0 3px rgba(54,180,75,.12);
}
body.pub-modern .sf-menu > li > a:focus-visible {
    outline: 2px solid var(--pp-green);
    outline-offset: 2px;
}

/* a section with a sub-menu opens it rather than navigating, so it should not
   offer the pointer of a link */
body.pub-modern .sf-menu > li.dropdown > a { cursor: default; }

/* the caret on a section that has a sub-menu, drawn rather than a font icon */
body.pub-modern .sf-menu > li.dropdown > a > span:after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--pp-faint);
    transition: transform .15s ease;
}
body.pub-modern .sf-menu > li.dropdown:hover > a > span:after,
body.pub-modern .sf-menu > li.dropdown.sfHover > a > span:after { transform: rotate(180deg); }

/* ---------- sub-menus ----------
   Two things about the open/close, both of which broke it:

   1. THE GAP. Sitting the panel 4px below the pill looked right and killed it:
      the panel only stays open while the cursor is inside the parent <li>, and
      that gap is outside it. The panel keeps its gap, and the :before below is
      a transparent bridge across it — the bridge is a descendant of the <li>,
      so hovering it counts as hovering the parent.

   2. THE EDGE. layout.css anchors sub-menus with `left:0`, which was written
      for a left-aligned menu. This menu is right-justified, so a 300px panel
      hanging off the last options ran past the edge of the page. They hang
      from the right edge of their parent instead. */
body.pub-modern .sf-menu li.dropdown ul {
    min-width: 260px;
    max-width: 340px;
    padding: 6px;
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
    background-color: var(--pp-surface) !important;
    box-shadow: var(--pp-shadow);
    top: calc(100% + 6px);
    left: auto;
    right: 0;
}
body.pub-modern .sf-menu li.dropdown li,
body.pub-modern .sf-menu li.dropdown li a { background-color: transparent; }
body.pub-modern .sf-menu li.dropdown > ul:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}
body.pub-modern .sf-menu li.dropdown li {
    padding: 0;
    border: none;
    background: transparent;
    text-align: left;
}
body.pub-modern .sf-menu li.dropdown li a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--pp-radius-sm);
    color: var(--pp-text) !important;
    font-size: 13.5px;   /* one step under the top-level options */
    font-weight: 500;
    line-height: 1.35;
}
body.pub-modern .sf-menu li.dropdown li a:hover { background-color: var(--pp-hover); }

/* layout.css paints the panel GREEN the moment it opens
   (`.sf-menu li.dropdown:hover > ul { background-color: green }`), and it
   paints every item black. Both have to be answered — but the reset has to
   name the surface, not `transparent`: blanking it left the open panel see-
   through over the page behind it, which is the state you actually look at. */
body.pub-modern .sf-menu li.dropdown:hover > ul,
body.pub-modern .sf-menu li.dropdown.sfHover > ul {
    background-color: var(--pp-surface) !important;
}
body.pub-modern .sf-menu li.dropdown > ul li:hover { background-color: transparent; }

/* The self-service option is a different kind of thing from the full-service
   ones above it - a separate product, on a separate site - so it is set apart:
   a rule across the panel and a shaded row, rather than reading as one more
   item in the same list. */
body.pub-modern .sf-menu li.dropdown li.is-alt {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--pp-line);
}
body.pub-modern .sf-menu li.dropdown li.is-alt > a {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--pp-canvas);
    color: var(--pp-text) !important;   /* the shade sets it apart, not the type colour */
}
/* a small mark on the self-service option - it is the quick, do-it-yourself
   route, so a bolt. Inline SVG, so it takes the row's own colour. */
body.pub-modern .pp-mi {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--pp-green);
}
body.pub-modern .sf-menu li.dropdown li.is-alt > a:hover {
    background-color: var(--pp-hover);
    color: var(--pp-text) !important;
}
/* in the mobile clone the panel is a flat list, so the rule alone does it */
body.pub-modern #mobile-menu li.is-alt > a {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--pp-line);
    background-color: var(--pp-canvas);
}
body.pub-modern #mobile-menu .pp-mi { width: 16px; height: 16px; }

/* the small note under an option, e.g. the product name for the self-service
   tools */
body.pub-modern .sf-menu li.dropdown li em {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pp-green-dark);
    padding-top: 2px;
}

/* an option that is not live yet. Shown, so the shape of the range is visible,
   but inert. (Nothing uses this at the moment - both self-service options went
   live with /proxexpress.asp on 8/16/2026 - it is kept for the next one.) */
body.pub-modern .sf-menu li.dropdown li.is-disabled > a,
body.pub-modern .sf-menu li.dropdown li.is-disabled > a:hover {
    color: var(--pp-faint) !important;
    background: transparent;
    cursor: not-allowed;
}
body.pub-modern .sf-menu li.is-disabled em {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: var(--pp-faint);
    padding-top: 2px;
}

/* ---------- Contact + Login, above the menu ----------
   Deliberately smaller than the menu pills: they are secondary to the sections
   and sit on the line above them. */
body.pub-modern #signup_login #login .btn,
body.pub-modern .sf-menu > li.login > a > span {
    /* the anchor is the flex box, not just the span inside it: as an
       inline-block its baseline sat against the label, which pushed the icon
       and the text a pixel apart vertically */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 11px !important;
    border-radius: var(--pp-radius-sm) !important;
    background-color: var(--pp-green) !important;
    border: none !important;
    color: #fff !important;
    font-family: var(--pp-navfont);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    text-shadow: none;
}
body.pub-modern #signup_login #login .btn:hover,
body.pub-modern .sf-menu > li.login > a:hover > span {
    background-color: var(--pp-green-dark) !important;
    color: #fff !important;
}
body.pub-modern #signup_login #login .btn span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;          /* no leading to centre against */
    color: #fff !important;
}
/* the icon is one step lighter than the label, so the label still leads.
   display:block kills the inline baseline gap under the svg, which is what
   made it sit a hair high next to the text. */
body.pub-modern .pp-btn-ico {
    display: block;
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    opacity: .85;
}
body.pub-modern #signup_login #login .btn:hover .pp-btn-ico { opacity: 1; }

/* Optical nudges (8/16/2026). The label is wrapped in its own element so each
   button's text can be moved without taking the icon with it — the two sit
   differently because one is an outline button and one is solid.
   position:relative so nothing reflows around them. */
body.pub-modern .pp-btn-txt {
    position: relative;
    font-weight: inherit;
}
body.pub-modern #signup_login #login .btn.accent-color-1 .pp-btn-txt { top: 0; }
body.pub-modern #signup_login #login #contact_btn .pp-btn-txt { top: 2px; }
/* the envelope rides a touch high against its label */
body.pub-modern #signup_login #login #contact_btn .pp-btn-ico {
    position: relative;
    top: 2px;
}

/* Contact sits beside Login rather than in the menu. layout.css hides
   #contact_btn below 1400px — it was competing for room with the old wide
   menu; it has its own line now, so it stays. */
body.pub-modern #signup_login #login #contact_btn {
    display: inline-block !important;
    background-color: transparent !important;
    border: 1px solid var(--pp-line) !important;
    color: var(--pp-text) !important;
}
body.pub-modern #signup_login #login #contact_btn span { color: var(--pp-text) !important; }
body.pub-modern #signup_login #login #contact_btn .pp-btn-ico { color: var(--pp-green); opacity: 1; }
body.pub-modern #signup_login #login #contact_btn:hover {
    background-color: var(--pp-hover) !important;
}

/* ==========================================================================
   3. The home page's H1 block (8/16/2026, SEO phase 1)
   The one heading that says what the company does, with the services named
   under it. Sized to lead the page without competing with the slider above it.
   ========================================================================== */

/* ---------- the mobile banner, de-headinged ----------
   `Attendance Tracking` / `& Event Management` were an H2 and an H3 sitting
   ABOVE the page's H1 in source order, so the first two headings a crawler met
   were half a phrase each. They are divs now. These rules are copied from the
   #homebanner_mobile h2/h3 rules in layout.css so nothing moves or resizes,
   including the calc() sizes and the 500px step-down.
   Same for the section banners, which were H2s over a background image. */
body.pub-modern #homebanner_mobile .hb-title,
body.pub-modern #homebanner_mobile .hb-sub,
body.pub-modern .hb-section {
    text-align: center;
    color: #fff;
}
body.pub-modern #homebanner_mobile .hb-title {
    font-size: calc(2.4em + 1vw);
    line-height: 30px;
    margin-bottom: 0px;
    font-family: 'open_sansbold', sans-serif;
}
body.pub-modern #homebanner_mobile .hb-sub {
    font-size: calc(1.4em + 1vw);
    line-height: 28px;
    margin-bottom: 15px;
    font-family: 'open_sansregular', sans-serif;
}
@media (max-width: 500px) {
    body.pub-modern #homebanner_mobile .hb-title { font-size: calc(2.1em + 1vw); }
    body.pub-modern #homebanner_mobile .hb-sub   { font-size: calc(1.6em + 1vw); }
}
body.pub-modern .hb-section {
    font-size: calc(1.9em + 1vw);
    line-height: 1.15;
    margin-bottom: 0px;
    font-family: 'open_sansbold', sans-serif;
}
/* the blurb under each banner was an H5, which left the page outline jumping
   from H1 straight to H5. Same declarations as the `#sectionN h5` rules in
   layout.css, on a div. */
body.pub-modern .hb-blurb {
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    text-transform: none;
    line-height: 20px;
}

/* The H2 that opens the home page's main explanatory section.
   The selector has to name .headline2 as well, and that is the whole point of
   it: `body.pub-modern .headline2 h2` further down this file is (0,2,2) and was
   beating a plain `body.pub-modern .hp-section-h2` at (0,2,1) on every property
   they share. So this heading was drawing at 30px and CENTRED, off the generic
   rule, rather than at the 24px and left that are written here - a second
   centred banner sitting under the centred H1 and lede, above a column of
   left-aligned body copy. */
body.pub-modern .headline2 .hp-section-h2 {
    max-width: 100%;
    margin: 0 0 16px;
    padding: 0;
    text-align: left;
    color: var(--pp-text);
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
    text-indent: 0;
    height: auto;
    float: none;
    border: none;
}
@media (max-width: 767px) {
    body.pub-modern .headline2 .hp-section-h2 { font-size: 20px; }
}

/* ---------------------------------------------------------------------------
   Contact page (8/17/2026)
   Two columns that had never been styled: the copy on the left inherited the
   body's size and read as small print under a photographic banner, and the
   details on the right were held down by an inline font-size and a stack of
   inline label styles. Both are typed here now, and the details are a card so
   the column reads as a thing rather than as leftover text.
   --------------------------------------------------------------------------- */
body.pub-modern .pp-contact { padding-top: 28px; }

body.pub-modern .pp-contact-copy p {
    margin: 0 0 20px;
    color: var(--pp-text);
    font-size: 18.5px;
    line-height: 1.62;
}
body.pub-modern .pp-contact-copy .pp-contact-call {
    margin-top: 26px;
    font-size: 21px;
    font-weight: 600;
}
body.pub-modern .pp-contact-copy .pp-contact-call a {
    color: var(--pp-green-dark);
    white-space: nowrap;
}
body.pub-modern .pp-contact-photo {
    margin: 4px 0 26px;
    text-align: center;
}
body.pub-modern .pp-contact-photo img {
    width: 100%;
    max-width: 420px;
    height: auto;              /* the width/height attributes are 700x525 */
    border: 4px solid var(--pp-line);
    border-radius: 6px;
}

body.pub-modern #contact_content {
    padding: 26px 28px 28px;
    background: var(--pp-canvas);
    border: 1px solid var(--pp-line);
    border-radius: 10px;
    font-size: 17.5px;
    line-height: 1.55;
}
body.pub-modern .pp-contact-label {
    margin-bottom: 3px;
    color: var(--pp-green-dark);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
/* the gap between one labelled block and the next, in place of the <br> tags
   that used to separate them */
body.pub-modern .pp-contact-val + .pp-contact-label { margin-top: 22px; }
body.pub-modern .pp-contact-val { color: var(--pp-text); }
body.pub-modern .pp-contact-val a { color: var(--pp-green-dark); }

@media (max-width: 979px) {
    body.pub-modern #contact_content { margin-top: 26px; }
    body.pub-modern .pp-contact-copy p { font-size: 17px; }
}

/* The one-sentence row that used to have entering-conference.png beside it
   (8/17/2026). .headline2_content_home is built to stand next to a 420px-tall
   photograph: display:table so it shrink-wraps into the remaining column, 40px
   of padding on the box and another 50 on the paragraph to bring the text down
   level with the middle of the picture. With the picture gone that is just a
   90px hole above one sentence, and a sentence justified across the full grid
   besides. Centred on a measure instead. */
body.pub-modern #MobileEventSection .headline2_content_home {
    display: block;
    padding-top: 0;
}
body.pub-modern #MobileEventSection .headline2_content_home p {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 0;
    /* layout.css sets justify with !important, so this needs it too - equal
       weight, and this selector is the more specific of the two */
    text-align: center !important;
    font-size: 22px;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   The three capability columns at the foot of the home page (8/17/2026)
   includes/modules_inc.asp - "Real-Time Conference Attendance Reporting",
   "Web-Based Event Management Tools", "Reliability & Data Security"

   Nothing here had ever been styled: the headings fell through to layout.css's
   bare `h3` rule, which is 18px ARIAL - the only Arial left on a page set in
   Source Sans Pro - and the paragraphs and bullets were held at 14px by an
   inline style on the container. Heading and body ended up close enough in
   size that the three columns read as one undifferentiated block of grey text
   in three ragged strips, with nothing marking where one stopped and the next
   began.

   So: a real step between heading, standfirst and list, and a rule down each
   gutter. The grid is declared here rather than left to the .span4 floats
   because a floated column has no height to hang a full-length divider on -
   as grid items all three are the height of the tallest, and the borders run
   the whole way down.
   --------------------------------------------------------------------------- */
body.pub-modern #module_group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 30px;
}
body.pub-modern #module_group .module {
    float: none;          /* .span4 floats it and gives it a fixed width */
    width: auto;
    margin: 0;
    padding: 2px 34px 0;
}
body.pub-modern #module_group .module + .module {
    border-left: 1px solid var(--pp-line);
}
body.pub-modern #module_group .module:first-child { padding-left: 0; }
body.pub-modern #module_group .module:last-child { padding-right: 0; }

body.pub-modern #module_group h3 {
    margin: 0 0 12px;
    padding: 0;
    color: var(--pp-text);
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 19px;
    line-height: 1.28;
    font-weight: 700;
    text-align: left;
}
body.pub-modern #module_group p {
    margin: 0 0 16px;
    color: var(--pp-muted);
    font-size: 15.5px;
    line-height: 1.6;
    text-align: left;
}
/* #content ul / #content li in layout.css carry a 40px indent and 10px between
   items, which is a lot of air for a five-line list in a narrow column. The
   green chevron goes to absolute so the text hangs from a single left edge
   instead of being pushed off it by the marker's negative margin. */
body.pub-modern #content #module_group ul.arrow {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.pub-modern #content #module_group ul.arrow li {
    position: relative;
    margin: 0;
    padding: 0 0 9px 17px;
    color: var(--pp-text);
    font-size: 15px;
    line-height: 1.45;
}
body.pub-modern #module_group ul.arrow li:before {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    color: var(--pp-green);
}
@media (max-width: 979px) {
    body.pub-modern #module_group .module { padding: 2px 20px 0; }
    body.pub-modern #module_group h3 { font-size: 17.5px; }
}
@media (max-width: 767px) {
    /* one column: the dividers become the rules BETWEEN stacked blocks, or
       there would be a line down the side of a single column */
    body.pub-modern #module_group { grid-template-columns: minmax(0, 1fr); }
    body.pub-modern #module_group .module { padding: 0; }
    body.pub-modern #module_group .module + .module {
        margin-top: 24px;
        padding-top: 24px;
        border-left: 0;
        border-top: 1px solid var(--pp-line);
    }
}

/* The column of body copy under that heading.
   .headline2 carries `text-align: justify` and `.headline2 p` carries 24px/30
   (layout.css). Both are right where that block is used elsewhere - one
   full-width standfirst across the page - and both are wrong here, because on
   the home page the same block is a half-width column: 24px is the same size
   as the heading above it, so there is no hierarchy left, and justifying a
   long measure into ~430px opens rivers of white space through every
   paragraph. Ragged right, and a size that sits under the heading rather than
   level with it. */
body.pub-modern .hp-lead-col p {
    margin: 0 0 16px;
    text-align: left;
    font-size: 18px;
    line-height: 1.62;
}

body.pub-modern .hp-intro {
    padding-top: 46px;
    padding-bottom: 10px;
    text-align: center;
}
/* The green rule the site uses as an accent everywhere else (.line in
   layout.css), as a pseudo-element so the markup stays one H1 and one
   paragraph. It gives the block a top edge to start from - without it the
   statement began in mid-air directly under the photograph. */
body.pub-modern .hp-intro h1:before {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    margin: 0 auto 22px;
    background: var(--pp-green);
    border-radius: 2px;
}
/* 38px over a measure, NOT 32px across the full row.
   Set at 32 and pinned to one line by white-space:nowrap, this headline ran
   about 1080px - nearly the whole grid - and a single line that long reads as
   thin and wide however large the type is, because there is nothing to give it
   a shape. Held to a 940px measure it breaks into two lines it can be set
   bigger on, and text-wrap:balance keeps those two lines even. */
body.pub-modern .hp-intro h1 {
    display: block;
    max-width: 940px;
    margin: 0 auto 18px;
    padding: 0;
    text-align: center;      /* stated on the element, not inherited */
    color: var(--pp-text);
    font-family: var(--pp-navfont);
    font-size: 38px;
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-indent: 0;         /* layout.css indents h1 off-screen for the header copy */
    height: auto;
    float: none;
    border: none;
    white-space: normal;
    text-wrap: balance;
}
body.pub-modern .hp-intro .hp-lede {
    display: block;
    max-width: 880px;
    margin: 0 auto;
    padding: 8px 0 26px;    /* air above, and enough below to separate the
                               centred intro from the columns under it */
    text-align: center;
    color: var(--pp-muted);
    font-size: 17.5px;
    line-height: 1.65;
    /* It runs to about 1070px, so it always takes two lines in an 880 box -
       and left to itself it broke 640/430, a long line over a short one under
       a centred H1. Balanced it sits as two even lines. */
    text-wrap: balance;
}

@media (max-width: 1240px) {
    body.pub-modern .hp-intro h1 { font-size: 33px; }
}
@media (max-width: 979px) {
    body.pub-modern .hp-intro { padding-top: 30px; }
    body.pub-modern .hp-intro h1 { font-size: 27px; margin-bottom: 14px; }
    body.pub-modern .hp-intro h1:before { margin-bottom: 16px; }
    body.pub-modern .hp-intro .hp-lede { font-size: 15.5px; padding: 4px 0 16px; }
}

/* ==========================================================================
   4. Promoted heading levels (8/16/2026, SEO phase 1)
   Every page banner used an <h3> for its name and an <h4> under it, and every
   content section used an <h3> — so no page had an H1, and the section
   headings all sat at the same level as the page's own title.

   The tags are now H1 (page) and H2 (sections), which is the structure a
   crawler reads as "this page is about X, and here are its parts". Nothing
   should LOOK different: these rules teach the new tags the styles that
   layout.css gives the old ones, breakpoint for breakpoint.
   ========================================================================== */

/* ---------- the page banners ----------
   Every sub-page pins its banner to `min-height:290px` in its own <style>
   block. These rules outrank that (a class plus an id beats a bare id), so all
   of them shorten together and any page added later inherits it.

   The scrim is an overlay rather than a darkened photograph: the same images
   are used elsewhere, and white type over an untreated conference photo is
   never reliably legible. */
body.pub-modern #page-header-new {
    position: relative;
    min-height: 0 !important;
    padding: 46px 0 !important;
}
body.pub-modern #page-header-new:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .58);
}
/* A hairline along the top of the band, inset 2px so a sliver of the
   photograph shows above it and it reads as a rule laid ON the image rather
   than as the edge of the image. Every sub page that carries this header gets
   it. z-index 3 puts it over the scrim (:before, unnumbered) and over the
   content (z-index 2 below), which matters because it runs the full width and
   would otherwise be interrupted by whatever it crosses. */
body.pub-modern #page-header-new:after {
    content: "";
    position: absolute;
    top: 2px;
    right: 0;
    left: 0;
    z-index: 3;
    height: 1px;
    background: #b6bcc3;   /* light grey - it reads as a rule, not as an edge */
}
body.pub-modern #page-header-new > .row,
body.pub-modern #page-header-content {
    position: relative;
    z-index: 2;
}
/* The content box ships at width:60% of the row (and 75-80% in the page-level
   media queries), which is narrower than the H1s these pages now carry -
   "Conference Attendance & Session Tracking" was breaking onto two lines. Wide
   enough to hold them on one, and the H1 rule below stops it wrapping. */
body.pub-modern #page-header-content {
    width: 92% !important;
    max-width: 1000px;
    margin: 0 auto;
}
body.pub-modern #page-header-new p {
    max-width: 760px;
    margin: 12px auto 0;
    font-size: 16px;
    line-height: 1.5;
}
body.pub-modern #page-header-new .btn-large { margin-top: 14px; }

/* ---------------------------------------------------------------------------
   .pp-hdr-tall - a page header that is a photograph rather than a texture
   (8/17/2026, attendance-tracking.asp)

   The band above is 46px of padding around the text, which is right when the
   background is a backdrop nobody is meant to look at. Give it a photograph of
   people and that height becomes the problem: a 2.33:1 picture in a ~276px
   band at desktop width is cropped to a 7:1 strip taken from its own middle,
   so the heads are above the frame, the feet below it, and what is left is a
   row of torsos with the H1 across them.

   So this is the same band with room to see the picture - the padding is what
   sets the height, and it is the padding rather than a fixed height so the
   band still grows if the headline wraps on a narrow window.

   The scrim goes from .58 to .65 to hold white type over a photo that is
   brighter and far busier than a texture: this one has a lit kiosk, a glass
   wall and its own captions in it.

   Pair it with background-position on the page itself. Which part of a
   photograph can be given up is a fact about that photograph, not about this
   class.
   --------------------------------------------------------------------------- */
/* 80, down from 150. Two of those steps: the subhead and the standfirst each
   wrap to two lines now, which added about 66px to the block between the
   paddings, and the band is measured from the text outwards - so the padding
   had to come down just to stand still. Then down again to shorten it.

   At desktop width the text block is ~326px, plus 70px of #page-header-content
   padding from layout.css, so the band lands near 560px against the ~640 it
   was. That figure is also the crop: at 1920 the photo is drawn 823px tall, so
   a 560px band takes 263px of it, ~50 off the top and ~213 off the bottom at
   the 20% weighting the page sets. 50 off the top is what the kiosk headline
   can afford - it starts 95px down - which is what stops this going lower. */
body.pub-modern #page-header-new.pp-hdr-tall {
    padding: 80px 0 !important;
}
body.pub-modern #page-header-new.pp-hdr-tall:before {
    background: rgba(0, 0, 0, .65);
}

/* The type in a tall band, which is a different problem from the type in a
   276px one. The sizes above are set so a headline, a subhead, a line of body
   and a button fit inside a shallow strip, and they sit tight against each
   other because that is the only way they fit. Dropped into a band twice the
   height they read as one small block marooned in the middle of a photograph.

   So it is scaled up and given air, and only here - every rule is on
   .pp-hdr-tall. The other pages' bands are unchanged, and they have to be:
   48px of headline in a 276px strip is exactly the crowding this is fixing,
   in the other direction. */
/* 48px, and the box below is widened to 1120px to hold a headline set at it.
   "Conference Attendance & Session Tracking" is ~975px at 48 and stays on one
   line inside that; "Conference Badge Printing & On-Site Badge Printing" is
   ~1175px and takes two.

   Which is why white-space goes back to normal here. The rule above pins these
   headlines to a single line with nowrap - right for a 276px strip, where a
   second line would not fit - but in a tall band a headline too long for the
   box then runs out of it and off toward the window edges instead of simply
   wrapping. The box width is the constraint now, and a headline wraps only if
   it has to. */
body.pub-modern #page-header-new.pp-hdr-tall h1 {
    font-size: 48px;
    line-height: 1.1;
    white-space: normal;
}
body.pub-modern #page-header-new.pp-hdr-tall #page-header-content {
    max-width: 1120px;
}
/* Narrower than the headline ABOVE it, which is the whole point of the figure:
   the H1 is held on one line at about 975px, and this subhead set across the
   full content box runs to roughly 1150 - so the line that is meant to be
   subordinate was the widest thing in the band. Capped here it breaks into two
   shorter lines and the block reads as a pyramid under the headline.

   The auto side margins are load-bearing. text-align:center centres the type
   INSIDE the box; without them the box itself sits at the left of the content
   area and a centred headline above would have an off-centre subhead below it.

   text-wrap:balance evens the two lines where it is supported and is ignored
   where it is not - the max-width is what actually does the work. */
body.pub-modern #page-header-new.pp-hdr-tall h2 {
    margin: 16px auto 0;
    max-width: 760px;
    font-size: 27px;
    line-height: 1.35;
    text-wrap: balance;
}
/* The rule between the subhead and the standfirst. It ships at 10px above and
   12px below, which is a hairline gap at this size, and solid #fff, which put
   a second bright white line directly under a white headline and read as part
   of the type rather than as a separator. Grey steps it back behind both. */
body.pub-modern #page-header-new.pp-hdr-tall #page-header-divider {
    margin-top: 26px;
    margin-bottom: 24px;
    border-top-color: #9098a0;
}
/* narrower again, so the taper continues past the subhead */
body.pub-modern #page-header-new.pp-hdr-tall p {
    margin-top: 0;
    max-width: 660px;
    font-size: 19px;
    line-height: 1.55;
    text-wrap: balance;
}
body.pub-modern #page-header-new.pp-hdr-tall .btn-large { margin-top: 30px; }

@media (max-width: 1400px) {
    body.pub-modern #page-header-new.pp-hdr-tall h1 { font-size: 44px; }
    body.pub-modern #page-header-new.pp-hdr-tall h2 { font-size: 24px; }
    body.pub-modern #page-header-new.pp-hdr-tall p  { font-size: 18px; }
}
@media (max-width: 979px) {
    /* back in step with every other page's band, since the band itself is */
    body.pub-modern #page-header-new.pp-hdr-tall h1 { font-size: 34px; line-height: 38px; }
    body.pub-modern #page-header-new.pp-hdr-tall h2 { margin-top: 10px; font-size: 19px; line-height: 23px; }
    body.pub-modern #page-header-new.pp-hdr-tall #page-header-divider { margin-top: 14px; margin-bottom: 12px; }
    body.pub-modern #page-header-new.pp-hdr-tall p { font-size: 16px; }
    body.pub-modern #page-header-new.pp-hdr-tall .btn-large { margin-top: 16px; }
}
@media (max-width: 767px) {
    body.pub-modern #page-header-new.pp-hdr-tall h1 { font-size: 28px; line-height: 32px; }
}
/* Stepped down with the window, because the band is measured from the text
   outwards: the same 150px either side of a headline that has wrapped onto
   three lines is a very tall band on a small laptop. */
@media (max-width: 1400px) {
    body.pub-modern #page-header-new.pp-hdr-tall { padding: 62px 0 !important; }
}
@media (max-width: 1100px) {
    body.pub-modern #page-header-new.pp-hdr-tall { padding: 50px 0 !important; }
}
@media (max-width: 979px) {
    /* back to the ordinary band. The rule below this one already forces
       scroll attachment here, and at phone widths there is no room to show a
       photograph and a headline in the same space. */
    body.pub-modern #page-header-new.pp-hdr-tall { padding: 30px 0 !important; }
}

@media (max-width: 979px) {
    body.pub-modern #page-header-new {
        padding: 30px 0 !important;
        /* fixed attachment is unreliable on touch browsers and costs a repaint
           on every scroll frame */
        background-attachment: scroll !important;
    }
}

body.pub-modern #page-header-new h1 {
    margin: 0;
    padding: 0;
    height: auto;
    float: none;
    border: none;
    text-indent: 0;
    font-size: 40px;
    font-weight: bold;
    line-height: 1.15;
    text-align: center;
    color: #fff;
    text-shadow: none;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    white-space: nowrap;   /* the page name reads as one line */
}
@media (max-width: 1100px) {
    /* below this there is not room for the longer names, so let them wrap
       rather than overflow the banner */
    body.pub-modern #page-header-new h1 { white-space: normal; }
}
body.pub-modern #page-header-new h2 {
    margin: 0;
    padding: 0;
    height: auto;
    float: none;
    border: none;
    text-indent: 0;
    font-size: 24px;
    line-height: 28px;
    font-weight: 400;
    text-align: center;
    color: #fff;
    text-shadow: none;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
/* the plain page-title bar (FAQ, News, Contact) - its heading is an H1 now,
   and layout.css only styles the H3 that used to be there */
body.pub-modern #page-header h1 {
    margin: 0;
    padding: 0;
    height: auto;
    float: none;
    border: none;
    text-indent: 0;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--pp-text);
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
@media (max-width: 767px) {
    body.pub-modern #page-header h1 { font-size: 22px; }
}

body.pub-modern .headline2 h2 {
    text-align: center;
    color: #555;
    font-size: 30px;
    line-height: 36px;
    font-weight: 500;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    text-indent: 0;
    height: auto;
    float: none;
    border: none;
}
/* the sub-heading that names the product behind a capability, e.g.
   "Powered by IntelliTrak®" under a plain-language H2 */
body.pub-modern .headline2 .brandline {
    display: block;
    margin: -6px 0 14px;
    text-align: center;
    color: var(--pp-muted);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
}
/* the numbered explainer on the lead retrieval page */
body.pub-modern .pp-steps {
    max-width: 820px;
    margin: 14px auto 16px;
    padding: 0 0 0 22px;
    text-align: left;
    list-style: decimal;
}
body.pub-modern .pp-steps li {
    padding: 0 0 10px;
    line-height: 1.6;
}

/* A section linked from the menu anchors on the whole block, image included,
   not on its heading - jumping to the heading landed you underneath the
   picture. scroll-margin-top leaves room for the sticky header so the first
   line is not tucked under it. */
body.pub-modern .headline2[id] { scroll-margin-top: 96px; }
@media (max-width: 979px) {
    body.pub-modern .headline2[id] { scroll-margin-top: 20px; }
}

/* ---------- the question lists under each section ----------
   These belong to the section they sit in: the RFID questions live under the
   RFID heading, the scanner questions under the scanner heading. They are the
   same accordion as the FAQ page, so the styling is shared from here rather
   than copied into each page.

   <details>/<summary>: no JavaScript, and the answers are in the HTML whether
   an item is open or shut, so a crawler reads all of them. An accordion built
   from JS and hidden divs is the version that costs you the content. */
body.pub-modern .qa-block {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--pp-line-soft);
}
body.pub-modern .qa-title {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pp-muted);
}
body.pub-modern .faq-item { border-bottom: 1px solid var(--pp-line); }
body.pub-modern .faq-item summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 2px;
    cursor: pointer;
    list-style: none;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    text-align: left;
    color: var(--pp-text);
}
body.pub-modern .faq-item summary::-webkit-details-marker { display: none; }
body.pub-modern .faq-item summary:hover { color: var(--pp-green-dark); }
body.pub-modern .faq-item summary:after {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 0;
    margin-top: 7px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--pp-green);
    transition: transform .15s ease;
}
body.pub-modern .faq-item[open] summary:after { transform: rotate(180deg); }
body.pub-modern .faq-answer {
    padding: 0 2px 18px;
    text-align: left;
    font-size: 15px;
    line-height: 1.65;
    color: #555;
}
body.pub-modern .faq-answer p { margin: 0 0 12px; }
body.pub-modern .faq-answer p:last-child { margin-bottom: 0; }
body.pub-modern .faq-answer ul { margin: 0 0 12px 18px; }
body.pub-modern .faq-answer li { padding-bottom: 4px; }
@media (max-width: 767px) {
    body.pub-modern .faq-item summary { font-size: 15px; }
    body.pub-modern .faq-answer { font-size: 14.5px; }
}
body.pub-modern .qa-block h3 {
    margin: 22px 0 6px;
    text-align: left;
    color: var(--pp-text);
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    text-indent: 0;
    height: auto;
    float: none;
    border: none;
}
body.pub-modern .qa-block p { margin: 0 0 10px; }

@media (max-width: 979px) {
    body.pub-modern #page-header-new h1 { font-size: 34px; line-height: 38px; }
    body.pub-modern #page-header-new h2 { font-size: 19px; line-height: 23px; }
    body.pub-modern .headline2 h2 { font-size: 26px; line-height: 28px; }
    body.pub-modern .qa-block h3 { font-size: 17px; }
}
@media (max-width: 767px) {
    body.pub-modern #page-header-new h1 { font-size: 28px; line-height: 32px; }
    body.pub-modern .headline2 h2 { font-size: 20px; line-height: 24px; }
}

/* ==========================================================================
   5. Login (8/16/2026)
   One card, centred. It used to be a 400px background image (loginbg_tall.png)
   with the form laid out in nested tables inside it, which meant the frame was
   a picture rather than a box and could not follow the field widths.
   ========================================================================== */

/* the padding is what gives the backdrop its height - the photograph is on
   #content, and this row is the only thing in it */
body.pub-modern #login-form {
    display: flex;
    justify-content: center;
    padding: 70px 16px 90px;
}
/* The shadow is deeper than the one the rest of the refresh uses because this
   card now sits on a darkened photograph (see the note in login_secured.asp),
   not on white - a shadow tuned for a white page disappears against it and the
   card looks pasted on. */
body.pub-modern .pp-login-card {
    width: 100%;
    max-width: 420px;
    padding: 30px 30px 26px;
    background: var(--pp-surface);
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
    box-shadow: 0 18px 44px rgba(0,0,0,.34), 0 4px 12px rgba(0,0,0,.20);
    box-sizing: border-box;
}
body.pub-modern .pp-login-head {
    text-align: center;
    margin-bottom: 24px;
}
body.pub-modern .pp-login-avatar {
    display: block;
    width: 56px;
    height: auto;
    margin: 0 auto 14px;
    opacity: .8;
}
body.pub-modern .pp-login-card h1 {
    margin: 0 0 6px;
    padding: 0;
    height: auto;
    float: none;
    border: none;
    text-indent: 0;
    font-family: var(--pp-navfont);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--pp-text);
}
body.pub-modern .pp-login-sub {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--pp-muted);
}
body.pub-modern .pp-login-field { margin-bottom: 16px; }
body.pub-modern .pp-login-field label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--pp-navfont);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pp-muted);
}
body.pub-modern .pp-login-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius-sm);
    background: var(--pp-surface);
    font-size: 15px;
    color: var(--pp-text);
}
body.pub-modern .pp-login-field input:focus {
    border-color: var(--pp-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(54,180,75,.12);
}
/* the reCAPTCHA widget is a fixed 304px wide; centre it and let it shrink out
   of the card's padding rather than overflow it on a narrow phone */
body.pub-modern #captcha {
    display: flex;
    justify-content: center;
    margin: 4px 0 18px;
    max-width: 100%;
    overflow: hidden;
}
body.pub-modern #signInSubmit,
body.pub-modern #signInSubmit:link {
    display: block;
    width: 100%;
    padding: 12px 16px !important;
    border: none !important;
    border-radius: var(--pp-radius-sm) !important;
    background-color: var(--pp-green) !important;
    color: #fff !important;
    font-family: var(--pp-navfont);
    font-size: 15px;
    font-weight: 600;
    text-shadow: none;
    cursor: pointer;
}
body.pub-modern #signInSubmit:hover {
    background-color: var(--pp-green-dark) !important;
    color: #fff !important;
}
body.pub-modern .pp-login-foot {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--pp-line-soft);
    text-align: center;
    font-size: 13px;
    color: var(--pp-muted);
}
body.pub-modern .pp-login-foot a { color: var(--pp-green-dark); font-weight: 600; }

@media (max-width: 480px) {
    body.pub-modern #login-form { padding: 24px 12px 40px; }
    body.pub-modern .pp-login-card { padding: 24px 20px 20px; }
}

/* ==========================================================================
   6. Mobile
   scripts.js clones #menu into #mobile-menu below 979px, so the sub-menus and
   their arrows come along; these are the colours for that clone.
   ========================================================================== */

body.pub-modern #mobile-menu-trigger {
    color: var(--pp-text);
    font-size: 30px;
}
body.pub-modern #mobile-menu li { background-color: var(--pp-surface); }
body.pub-modern #mobile-menu li a {
    padding: 14px 16px;
    border-top: 1px solid var(--pp-line-soft);
    color: var(--pp-text);
    font-family: var(--pp-navfont);
    font-size: 15px;
    font-weight: 600;
}
body.pub-modern #mobile-menu ul a {
    padding-left: 32px;
    font-weight: 500;
    font-size: 14px;
    color: var(--pp-muted);
}
body.pub-modern #mobile-menu li:hover,
body.pub-modern #mobile-menu li a:hover {
    background-color: var(--pp-hover);
    color: var(--pp-text);
}
body.pub-modern #mobile-menu li.is-disabled a,
body.pub-modern #mobile-menu li.is-disabled a:hover {
    color: var(--pp-faint);
    background: transparent;
    cursor: not-allowed;
}
body.pub-modern #mobile-menu .mobile-menu-submenu-arrow {
    width: 56px;
    border-left: 1px solid var(--pp-line-soft);
    color: var(--pp-muted);
    line-height: 48px;
}
body.pub-modern #mobile-menu .mobile-menu-submenu-arrow:hover {
    background-color: var(--pp-hover);
    color: var(--pp-text);
}

@media (max-width: 979px) {
    /* the desktop menu is replaced by the #mobile-menu clone, so the right-hand
       column carries only the trigger and the two buttons */
    body.pub-modern #header > .row {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    body.pub-modern #header > .row > .span6:last-child {
        align-items: center;
        gap: 12px;
    }
    body.pub-modern #signup_login { padding: 0; }
    body.pub-modern #signup_login .row { align-items: flex-end; }
    body.pub-modern #tagline { display: none; }
}

/* ---------------------------------------------------------------------------
   Home page banner - navigation off  (8/17/2026)

   The banner is a single, non-cycling slide now, so the Revolution Slider's
   next/prev arrows and the bullet row along the bottom point at nothing. They
   are switched off at the source in js/plugins.js (navigationType and
   navigationArrows are both "none" for .fullwidthbanner). These rules are the
   belt to that pair of braces: the plugin builds its nav markup from its own
   templates and some builds emit the containers regardless of the option, so
   anything that does get injected is hidden here rather than left to sit over
   the photo.

   Scoped to .fullwidthbanner-container on purpose. .fullwidthbanner2 is a
   separate slider with its own settings and its navigation is untouched.
   --------------------------------------------------------------------------- */
body.pub-modern .fullwidthbanner-container .tp-bullets,
body.pub-modern .fullwidthbanner-container .tparrows,
body.pub-modern .fullwidthbanner-container .tp-leftarrow,
body.pub-modern .fullwidthbanner-container .tp-rightarrow {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Home page banner - fade up out of black  (8/17/2026)

   The container carries the black. The slider sizes it as soon as the DOM is
   ready, so the band is there and filled long before the photo arrives.

   The photo starts at opacity 0 and is transitioned to 1 when slide_inc.asp
   adds .is-in, which it does on window "load" - i.e. once the image has
   finished downloading. registration-wide.png is 2.3 MB, so without that wait
   a visitor would watch a half-drawn picture ease in.

   .js-fade is the safety net, and it is why the hiding rule is keyed on it
   rather than on .pp-fade alone: the script adds .js-fade itself, inline and
   immediately after the markup. So the photo is only ever hidden by a script
   that is definitely running and will definitely un-hide it. If the script
   never runs - JS off, an error above it, a blocked inline script - .js-fade
   is never added, nothing sets opacity 0, and the banner simply appears with
   no fade. It cannot get stuck invisible.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Home page hero  (8/17/2026)

   A plain block, not the Revolution Slider - see the note at the top of
   includes/slide_inc.asp for why the plugin had to go. The rules below are the
   whole thing: a fixed-height black box, photos cropped to fill it, and a fade.

   A ROTATION SINCE 8/17/2026 - five slides as of writing: 6 seconds on screen,
   then a 2 second crossfade, round and round. They are stacked, not laid out:
   each one is absolutely positioned and fills the box, so they occupy the same
   space and only opacity separates them. That is why nothing here counts the
   slides and why the height rule below survives another one being added - the
   box's height is its own, never the sum or the tallest of its contents.

   THE HEIGHT IS HERE AND ONLY HERE. It is reserved before the photo loads, so
   nothing moves when it arrives - that reservation is what stopped the banner
   jumping up under the header.

   The photo is 1916x821. At full window width it has to lose roughly 175px of
   height to fill a 640px band, and object-position decides from where:
   "center" splits the loss between top and bottom. "top" would take it all off
   the bottom; "bottom" would take it all off the top, which is the sliced
   heads that were visible earlier.
   --------------------------------------------------------------------------- */
body.pub-modern .pp-hero {
    position: relative;
    height: 640px;
    overflow: hidden;
    background-color: #000;          /* what shows through while it fades */
    border-bottom: 5px solid var(--pp-green);
}
body.pub-modern .pp-hero-img {
    position: absolute;              /* stacked, so a swap is opacity only */
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
/* Per-slide crop. "center" splits the overflow evenly, which is right for a
   photo whose subject is in the middle, and wrong for one with something at
   the top edge it cannot afford to lose. A lower percentage keeps more of the
   top and gives up more of the bottom.

   .pp-hero-high is on the RFID slide: at 1920x640 that photo loses 183 of its
   821 rows, and split evenly the top 91 were cutting through "GLOBAL" on the
   kiosk and "CONFERENCE" on the wayfinding sign - both headlines sliced
   mid-letter. 30% moves it to 55 off the top and 128 off the bottom, which
   clears both and spends the difference on carpet and lower legs. The figure
   is a percentage of whatever the overflow happens to be, so it holds at every
   window width and at all three band heights. */
body.pub-modern .pp-hero-img.pp-hero-high {
    object-position: center 30%;
}
/* WITHOUT the script. Stacked slides need someone to say which one is on top,
   or the last <img> in the markup wins on source order and the visitor gets
   slide two. So slide one is opaque, the rest are not, and with no JavaScript
   nothing ever changes that: no fade, no rotation, and still a hero. */
body.pub-modern .pp-hero-img             { opacity: 0; }
body.pub-modern .pp-hero-img:first-child { opacity: 1; }

/* WITH the script. .js-fade is added by slide_inc.asp before the first paint,
   so a photo can only be hidden by something that is definitely running and
   will definitely show one again. From here the script owns which slide is up,
   by putting .is-on on exactly one of them - slide one included, which is why
   this rule has to out-rank the :first-child line above (it does: four classes
   to three) and hide it too until the script says otherwise.

   2000ms, and the script's FADE constant has to be kept equal to it - that is
   how long the script waits before it hides the outgoing slide, and it is also
   half of how it works out the cycle length. The transition
   is on every slide, not just the incoming one, because any of them can be the
   one coming in. */
body.pub-modern .pp-hero.js-fade .pp-hero-img {
    opacity: 0;
    transition: opacity 2000ms ease-in;
}
body.pub-modern .pp-hero.js-fade .pp-hero-img.is-on {
    opacity: 1;
}
/* The incoming slide is lifted above the one it is replacing, so it fades up
   OVER a photo still at full opacity rather than the two of them dissolving
   into each other. Two half-faded photos over a black box do not add back up to
   one opaque photo - the hero dips toward black in the middle - and the longer
   the fade, the more that shows. This is what keeps it solid throughout. */
body.pub-modern .pp-hero.js-fade .pp-hero-img.is-top {
    z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
    /* Neither the fade nor the rotation: the script tests this same query and
       never starts its timer, so slide one comes up and stays. Stripping the
       transition but leaving the rotation running would be the worst of both -
       a hard cut every few seconds. Selectors matched to the rules above on
       purpose - one class fewer and they would lose the cascade to them and do
       nothing. */
    body.pub-modern .pp-hero.js-fade .pp-hero-img {
        transition: none;
    }
    body.pub-modern .pp-hero.js-fade .pp-hero-img:first-child {
        opacity: 1;
    }
}
/* A 640px band is right on a wide monitor and overbearing on a small laptop,
   so it steps down. Below 767px .hidden-phone takes the hero out entirely and
   header_inc.asp shows a static image instead. */
@media (max-width: 1400px) {
    body.pub-modern .pp-hero { height: 540px; }
}
@media (max-width: 1100px) {
    body.pub-modern .pp-hero { height: 440px; }
}

/* ---------- the jump, and the cut-off top (superseded) ----------
   Kept because the rules still apply to any .fullwidthbanner-container that
   carries .pp-fade, and because the caps they answer are the reason the hero
   above is not a slider any more.
   ----------
   The banner grew while it loaded, then snapped up under the header with the
   top of the photo sliced off. Read in the browser, it was one cause with
   three parts:

     · js/revolutionslider/css/custom.min.css carries
           .fullwidthbanner-container { max-height: 485px !important }
       485 was the OLD startheight. Raising startheight in js/plugins.js moved
       the slider to 640 and left the container pinned at 485, so the slider was
       drawing 640px of photo into a 485px hole. That mismatch IS the jump: on
       init the banner takes its new height, the container refuses it, and
       everything settles 155px higher than it was drawn.
     · An `aspect-ratio` was tried here first and could never have worked - a
       computed height loses to a max-height with !important on it. It has to be
       answered on its own terms.
     · Nothing reserved the space beforehand either. Until the slider takes the
       <img> over it is an ordinary image at its natural 1916x821, and
       layout.css hides .fullwidthbanner with `visibility:hidden`, which hides
       it WITHOUT taking it out of the flow - so 821px sat there, invisible,
       until init replaced it with the real height.

   A plain height on the container fixes all three: it reserves the right box
   from the first paint, it matches what the slider will draw, and it overrides
   the cap. The slider does not scale this banner (fullWidth and forceFullWidth
   are both "off"), so startheight is a constant, not a ratio - which is why a
   fixed height is right here and aspect-ratio was not.

   THREE NUMBERS, ONE VALUE. Change the banner height and change all of them:
   startheight in js/plugins.js, and both 640s below. */
body.pub-modern .fullwidthbanner-container.pp-fade {
    background-color: #000;
    height: 640px;
    /* the 485px cap in custom.min.css is !important, so this has to be too */
    max-height: none !important;
    /* the slider writes overflow:visible onto the element's style attribute
       for captions to hang out of; this banner has no captions, and inline
       style is only beaten by !important */
    overflow: hidden !important;
}
body.pub-modern .fullwidthbanner-container.pp-fade .fullwidthbanner {
    height: 640px !important;
}
body.pub-modern .fullwidthbanner-container.pp-fade.js-fade .fullwidthbanner {
    opacity: 0;
    transition: opacity 900ms ease-in;
}
body.pub-modern .fullwidthbanner-container.pp-fade.js-fade.is-in .fullwidthbanner {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    /* Someone who has asked for less motion gets the photo, not the fade.
       Selector matched to the .js-fade rules above on purpose - written with
       one fewer class it would lose the cascade to them and do nothing. */
    body.pub-modern .fullwidthbanner-container.pp-fade.js-fade .fullwidthbanner,
    body.pub-modern .fullwidthbanner-container.pp-fade.js-fade.is-in .fullwidthbanner {
        opacity: 1;
        transition: none;
    }
}