/* ==========================================================================
   #109686 — Private Sector sponsor pages (v1 style pass, 2026-07-31)
   One file owns all sponsor-page styling so later passes (incl. Erin's
   visual direction) change things in ONE place. Dynamic per-event color
   stays inline in the blade as --highlight-color; everything here keys off
   that variable with a neutral fallback.
   ========================================================================== */

/* Design review (Erin 8/13, confirmed by Nick): a per-event highlight color
   WINS when set; e.Republic Tangerine is the default when none is specified
   (the generic-artwork case). Events wanting the orange default just leave
   highlight_color blank. Teal carries secondary roles so the page doesn't
   go "Halloween". Palette = e.Republic style guide.
   (Defined on body, not :root — the blade sets --highlight-color on body,
   and var() substitution happens where the alias is DEFINED.) */
body {
    --sp-accent: var(--highlight-color, #ff5600);
}

/* style.events.2015.css sets body{overflow:hidden} + html{overflow-x:hidden},
   which KILLS position:sticky for all descendants. Sponsor pages (the only
   pages loading this file) restore sticky: `clip` keeps the no-horizontal-
   scroll intent without creating a scroll container. */
html { overflow-x: clip; }
body { overflow: visible; overflow-x: clip; min-height: 0; }
:root {
    --sp-ink: #2b2b2b;
    --sp-muted: #6b6f73;
    --sp-heading: #333;        /* small caps labels — readable at any accent */
    --sp-teal: #047889;        /* e.R Teal — secondary accent (stats, map) */
    --sp-mint: #94d8d4;        /* e.R Mint — reserved, sparing use */
    --sp-band: #f3f1ec;        /* warm neutral bands (Nick 8/13 — plays well
                                  with any accent; Light Mint #e8f5f4 fought
                                  non-teal accents) */
    --sp-line: #e3e5e7;        /* hairline separators */
    --sp-rule: #ddd9d0;        /* rule for use on the band backgrounds */
    --sp-navy: #243240;        /* e.R Dark Navy (emphasis copy, dark blocks) */
    --sp-space: 64px;          /* base section rhythm */
    --sp-space-tight: 40px;
}

/* Roboto across the board (Erin 8/13), weights vary regular→black. This file
   loads only on sponsor pages, so scoping to body is safe. */
body {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ----------------------------------------------------------- page width */
/* Match the new datasheet site (sandbox.erepublic.com event pages): 1280px
   containers vs Bootstrap 3's 1170px. This file loads ONLY on sponsor pages,
   so overriding .container here widens every band of this page (topbar,
   title, content) without touching the public event pages. Fluid below
   1280 exactly like the reference; the extra ~110px is what lets the DGS
   grid's nine columns breathe beside the form rail. */
@media (min-width: 1200px) {
    .container { width: auto; max-width: 1280px; }
}

/* ---------------------------------------------------------------- top bar */
/* Brand logo hard left; back link + CTA grouped hard right (wireframe). */
.sponsor-topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; }
/* Bootstrap's .container clearfix pseudo-elements become flex items on a flex
   container and take slots in the space-between distribution, nudging the
   brand off the padding edge. */
.sponsor-topbar::before,
.sponsor-topbar::after { content: none; }
.sponsor-topbar a { letter-spacing: .5px; }
.sponsor-topbar-brand { display: flex; align-items: center; min-height: 44px; flex: 0 0 auto; }
/* Explicit HEIGHT, not max-height: the brand SVGs carry a viewBox but no
   width/height attributes, and such an image collapses to 0x0 as a flex item
   when its width is left to resolve from intrinsic size. Fixing the height and
   letting width follow the ratio is deterministic. max-width still guards the
   wide marks — these range from roughly 2:1 (GovTech, Industry Insider) to
   5:1 (Governing). */
.sponsor-brand-logo { height: 42px; width: auto; max-width: 210px; display: block; flex: 0 0 auto; object-fit: contain; object-position: left center; }
.sponsor-topbar-actions { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.sponsor-topbar .register { margin: 6px 0 !important; font-size: 13px !important; padding: 8px 16px !important; }

/* ------------------------------------------------------------------- hero */
/* Generic 3:2 art (2400x1600, Erin 8/12) with the event title, date and
   location overlaid — replaces the old event-banner + white title strip
   (Erin's review: no repetition; title lives in the header). Full-bleed
   width; height is viewport-relative like the new-layout reference but
   capped so ultrawide screens don't get a wall of sky. The bottom scrim
   guarantees text contrast over ANY future artwork, not just the navy
   generic. Title/meta sit in a .container so they align with page content. */
.sponsor-hero {
    position: relative;
    height: clamp(260px, 30vw, 420px);
    /* TOP position: the generic art's corner arcs live at the top edge —
       centered cropping showed only the plain gradient band (Nick 8/12). */
    background: url('/images/sponsor-generic-header.jpg') top center / cover no-repeat;
    display: flex;
    align-items: flex-end;
    margin-bottom: var(--sp-space-tight);
}
/* Parallax feel like the Public Sector sandbox hero: fixed attachment on
   pointer devices only — mobile Safari janks with fixed backgrounds, and
   the sandbox disables its effect on touch too. */
@media (hover: hover) and (min-width: 768px) {
    .sponsor-hero { background-attachment: fixed; background-size: 100% auto; }
}
.sponsor-hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10, 22, 34, .72) 0%, rgba(10, 22, 34, .25) 38%, rgba(10, 22, 34, 0) 65%);
    pointer-events: none;
}
.sponsor-hero-content {
    position: relative;
    width: 100%;
    padding-bottom: 48px;
}
.sponsor-hero-content h1 {
    color: #fff;
    margin: 0 0 10px;
    font-size: clamp(26px, 3.4vw, 44px);
    line-height: 1.15;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    max-width: 15em;   /* long titles wrap rather than spanning the full bleed */
}
/* Thin stroke separating title from the meta pairs (Nick 8/12). */
.sponsor-hero-rule {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .35);
    margin: 14px 0;
    width: 100%;
}
.sponsor-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 44px;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.sponsor-hero-meta dt {
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 2px;
}
.sponsor-hero-meta dd {
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    margin: 0;
}
@media (max-width: 767px) {
    .sponsor-hero { height: clamp(200px, 46vw, 280px); }
    .sponsor-hero-content { padding-bottom: 28px; }
}

/* --------------------------------------------------------- section rhythm */
.sponsor-page { padding-bottom: var(--sp-space); }
.sponsor-page .content-section { margin: 0 0 var(--sp-space-tight); padding: 0; }
.sponsor-page .content-section:last-child { margin-bottom: 0; }
/* The intro (top_center) sits in its own wrapper so mobile can reorder the
   form between it and the body. Side effect: it is :last-child of that
   wrapper, so the rule above zeroed its bottom margin and "Benefits of
   Sponsoring" sat flush against the intro text (Nick, 8/7 review). Restore
   the section rhythm on the wrapper itself. */
.sponsor-intro { margin-bottom: var(--sp-space-tight); }

/* Hairline separator between plain sections. Bands already read as their own
   block, so they neither take a rule nor put one on the section that follows
   them (adjacent-sibling selectors below). */
.sponsor-page .content-section + .content-section {
    border-top: 1px solid var(--sp-line);
    padding-top: var(--sp-space-tight);
}
/* Attendance Snapshot + Past Attendees read as ONE section (Erin 8/24).
   padding-top must RESTATE the band's internal padding — this selector
   outranks #past_attendees, and 0 was eating the band's own 34px (caught
   by Nick 8/25). Only the separator border goes. */
.sponsor-page #attendee_mix + #past_attendees { border-top: 0; padding-top: 34px; }

/* The speaking-intro H2 heads ONE logical section: intro copy → Premier
   Engagement Opportunities (map) → speaking roles. No hairlines between its
   sub-blocks — rules/bands only separate true H2 sections (Nick 8/17). */
.sponsor-page #floor_map,
.sponsor-page #speaking_roles { border-top: 0; padding-top: 0; }
/* NOTE: .sponsor-video-band + .content-section deliberately NOT in this list —
   Nick 8/17 wants the hairline + space back between the video band and the
   "Lead the Conversation" section that follows it. */
.sponsor-page .sponsor-quote-band,
.sponsor-page .sponsor-video-band,
.sponsor-page .sponsor-why-band,
.sponsor-page .sponsor-stats,
.sponsor-page .sponsor-quote-band + .content-section,
.sponsor-page .sponsor-why-band + .content-section,
.sponsor-page .sponsor-stats + .content-section {
    border-top: 0;
    padding-top: 0;
}
.sponsor-page .content-section p { line-height: 1.65; }

/* Section headers — accent colour, heavy. Sentence case per design review
   (Erin 8/13: no all-caps outside small labels); tracking eased to match. */
.sponsor-page .content-section > .section-header {
    margin: 0 0 24px;
    padding-bottom: 0;
    color: var(--sp-accent);
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.25;
}
/* Drop the 160px accent underline from style.events.2015.css — section
   separation is carried by the hairline rules and bands instead. */
.sponsor-page .content-section .section-header:after { display: none; }
/* Bands carry their own padding, so the heading sits inside them. */
.sponsor-quote-band > .section-header,
.sponsor-video-band > .section-header,
.sponsor-why-band > .section-header,
.sponsor-stats > .section-header { margin-top: 0; }

/* Warm greige "band" sections. The ER26 datasheet separates content with
   full-bleed bands rather than boxes, so these run edge-to-edge inside the
   content column: square corners, no border, generous padding. The negative
   inline margin cancels the Bootstrap column gutter so the band reaches the
   column edge; overflow-x:clip on html keeps it from creating a scrollbar. */
.sponsor-quote-band,
.sponsor-video-band,
.sponsor-why-band,
.sponsor-stats {
    background: var(--sp-band);
    border-radius: 6px; /* all filled bands share the soft corner (Nick 8/13) */
    padding: 40px 32px !important;
    margin-left: -15px;
    margin-right: -15px;
}

/* ------------------------------------------------------ top center / hero */
#top_center .section-header { font-size: 28px; line-height: 1.25; }

/* --------------------------------------------------------- benefits 2-up */
.sponsor-two-up h3 { margin: 0 0 18px; font-size: 20px; letter-spacing: .5px; }
/* Flex instead of Bootstrap floats: with floats, uneven blurb lengths made
   item 3 catch on the taller item 1 and the 2x2 grid collapsed into a ragged
   stagger (seen on proof 8/7 with the real synced copy — the QA copy happened
   to be even lengths, which is why it never showed locally). The row's
   clearfix pseudo-elements must not become flex items (same fix as the
   topbar container). */
.benefits-grid { display: flex; flex-wrap: wrap; }
.benefits-grid::before, .benefits-grid::after { content: none; }
.benefits-grid .benefit-item { margin-bottom: 22px; padding-right: 18px; float: none; }
/* Small labels read better in neutral grey — the accent stays on icons and
   headings, where there's enough weight to carry a light brand color. With a
   pale accent (EE26 yellow) 16px caps text was washing out (Nick 8/7). */
.benefits-grid .benefit-item h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--sp-heading, #333); letter-spacing: .2px; }
.benefits-grid .benefit-item p { font-size: 14px; color: var(--sp-muted); margin: 0; }
#targeted_titles { background: var(--sp-band); border-radius: 6px; padding: 22px 24px; }
/* Full-width band, roomy padding; navy reversed-text treatment matching the
   map/video bands (Nick 8/17). Label keeps the accent. */
#past_attendees { background: var(--sp-navy); border-radius: 6px; padding: 34px 38px; }
#past_attendees .past-attendees-body,
#past_attendees .past-attendees-body p { color: #fff; }
/* Rich-text lists inside the box: kill the browser's default UL indent so
   bullets align with the heading; markers hang just inside the padding. */
#past_attendees ul, #targeted_titles ul { margin: 0; padding-left: 18px; }
#past_attendees li, #targeted_titles li { margin-bottom: 6px; }
/* IT spend, stacked under Past Attendees as a companion fact box. */
.sponsor-stat-box {
    background: var(--sp-band);
    border-radius: 6px;
    padding: 20px 24px;
    margin: 18px auto 0;
    text-align: center;
    /* Equal squares (Nick 8/13): content is minimal, so the tiles read as
       compact matched cards instead of stretched bands. Capped so the
       square never balloons; content centers within it; long labels
       ("Expected Attendance") stack. */
    aspect-ratio: 1 / 1;
    max-width: 180px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.sponsor-stat-box .stat-label { white-space: normal; }
/* Stacked squares on desktop; side-by-side pair on phones (Nick 8/17).
   Fixed width: flex shrink-to-fit otherwise sizes each square to its own
   label, making the pair mismatched. */
.sponsor-stat-row { display: flex; flex-direction: column; align-items: center; }
.sponsor-stat-row .sponsor-stat-box { width: 180px; }
@media (max-width: 767px) {
    .sponsor-stat-row { flex-direction: row; justify-content: center; gap: 14px; }
    .sponsor-stat-row .sponsor-stat-box { margin: 18px 0 0; width: calc(50% - 7px); max-width: 180px; }
}
.sponsor-stat-box .stat-value {
    display: block;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 900;
    color: var(--sp-teal); /* teal balances the orange (Erin 8/13) */
}
.sponsor-stat-box .stat-label {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--sp-muted);
}
#past_attendees h3, #targeted_titles h3 { margin-top: 0; }

/* ------------------------------------------------------------ event stats */
.sponsor-stats { text-align: center; }
.sponsor-stats .stat-item { padding: 6px 0; }
.sponsor-stats .stat-value { display: block; font-size: 44px; font-weight: 900; line-height: 1.1; color: var(--sp-teal); }
.sponsor-stats .stat-label { display: block; margin-top: 4px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--sp-muted); }

/* ------------------------------------------------------ partnership line */
.sponsor-partnership { text-align: center; padding: 0 40px; margin-bottom: var(--sp-space-tight) !important; }
.sponsor-partnership p { margin: 0; color: var(--sp-ink); letter-spacing: .5px; } /* darker (Erin 8/24) */
.sponsor-partnership .partner-logo { max-height: 56px; margin-bottom: 14px; }

/* ------------------------------------------------------------ quote bands */
.sponsor-quote-band { display: flex; gap: 28px; align-items: center; }
.sponsor-quote-band .endorsement-headshot { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.15); }
.sponsor-quote-band blockquote,
#sponsor_quote blockquote { border: none; margin: 0; padding: 0; font-size: 19px; line-height: 1.55; font-style: normal; color: var(--sp-ink); } /* regular, not italic (Erin 8/24) */
.sponsor-quote-band blockquote footer,
#sponsor_quote blockquote footer { margin-top: 12px; font-size: 14px; font-style: normal; color: var(--sp-muted); }
/* No floating grey glyph (style.events.2015.css puts a 45px “ on every
   blockquote) — plain quote marks around the copy instead (Nick 8/13). */
.sponsor-page blockquote > p:first-child:before {
    content: '\201C';
    font-size: inherit; float: none; vertical-align: baseline;
    margin: 0; color: inherit;
}
.sponsor-page blockquote > p:last-of-type:after { content: '\201D'; }
/* (The accent left-bar and inset that used to live here are gone — this quote
   is now a tinted band like the endorsement quote above it.) */
#sponsor_quote .sponsor-quote-logo { max-height: 40px; display: block; margin: 10px 0 6px; }

/* ------------------------------------------------------------- video band */
/* Video facade: clean thumbnail + play button until clicked (YouTube's
   title/avatar overlay can't be disabled on a live embed — Nick 8/25). */
.video-facade { border: 0; padding: 0; cursor: pointer; background: #000; display: block; width: 100%; }
.video-facade-thumb { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: opacity .2s ease; }
.video-facade:hover .video-facade-thumb { opacity: 1; }
.video-facade-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 72px; height: 50px; border-radius: 12px;
    background: var(--sp-accent); box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s ease;
}
.video-facade:hover .video-facade-play { transform: translate(-50%, -50%) scale(1.08); }
.video-facade-play::after {
    content: ''; display: block; margin-left: 4px;
    border-style: solid; border-width: 11px 0 11px 19px;
    border-color: transparent transparent transparent #fff;
}

/* Video bleeds to the band's top and side edges (band padding removed;
   overflow clips the iframe into the rounded top corners). Navy band matching
   the floor map (Nick 8/17): h3 title in accent, description reversed white. */
.sponsor-video-band { padding: 0 !important; overflow: hidden; background: var(--sp-navy); }
.sponsor-video-band .embed-responsive { max-width: none; margin: 0; }
/* three classes: must outrank the generic .sponsor-page h3 rule below */
.sponsor-page .content-section.sponsor-video-band h3 { margin: 26px 32px 6px; color: var(--sp-accent); }
.sponsor-video-band p { max-width: none; margin: 0 32px 28px; color: #fff; text-align: left; }
/* title but no description (or vice versa) still needs bottom breathing room */
.sponsor-video-band > :last-child { margin-bottom: 30px; }
.sponsor-video-band > .embed-responsive:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- floor map */
/* Full column width on desktop; the 720px cap only applies on smaller screens
   where the map benefits from a little breathing room. */
#floor_map .floor-map-wrap { max-width: 720px; margin: 0 auto; }
@media (min-width: 992px) {
    #floor_map .floor-map-wrap { max-width: none; }
}
/* Raster schematic artwork (Erin 8/17) with numbered hotspot pins.
   Pin positions are % coordinates from config/sponsor_floor_maps.php.
   Band treatment mirrors the video band: art bleeds to the box edges,
   call-outs + disclaimer in the tinted area beneath (Nick 8/17). */
/* Dark navy band under the art — the neutral band washed into the artwork's
   pale floor, teal tried + rejected (Nick 8/17). Text reverses to white;
   call-out label takes the accent. */
.floor-map-band { background: var(--sp-navy); border-radius: 6px; overflow: hidden; }
.floor-map-band .floor-map-desc { max-width: none; margin: 0; padding: 30px 32px 26px; }
.floor-map-band .floor-map-desc h4 { color: var(--sp-accent); }
.floor-map-band .floor-map-desc p { color: #fff; }
.floor-map-band .fm-hint { color: rgba(255, 255, 255, .8); }
.floor-map-band .fm-desc-num { background: #fff; color: var(--sp-navy); }
/* Disclaimer overlays the artwork, bottom center, in a translucent navy pill
   so it reads over the pale floor (Nick 8/17). */
.floor-map-stage .floor-map-disclaimer {
    position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
    margin: 0; padding: 4px 14px; border-radius: 999px;
    background: rgba(36, 50, 64, .65); color: rgba(255, 255, 255, .9);
    font-size: 12px; white-space: nowrap; pointer-events: none;
}
.floor-map-stage { position: relative; }
.floor-map-art { width: 100%; height: auto; display: block; }
.fm-pin {
    position: absolute; transform: translate(-50%, -50%);
    width: 30px; height: 30px; padding: 0; border-radius: 50%;
    background: var(--sp-accent); color: #fff;
    border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
    font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s ease, background .15s ease;
}
.fm-pin:hover,
.fm-pin:focus { transform: translate(-50%, -50%) scale(1.18); }
.fm-pin.active { background: var(--sp-teal); }
@media (max-width: 600px) { .fm-pin { width: 24px; height: 24px; font-size: 12px; } }
.floor-map-desc { min-height: 72px; padding: 16px 4px 0; max-width: 720px; margin: 0 auto; }
.floor-map-desc h4 { margin: 0 0 6px; color: var(--sp-teal); }
.fm-desc-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-right: 8px; border-radius: 50%;
    background: var(--sp-teal); color: #fff; font-size: 12px; vertical-align: 2px;
}
.floor-map-desc .fm-hint { color: var(--sp-muted); font-style: italic; }
.fm-desc-lead { font-weight: 700; margin: 12px 0 6px; }
.floor-map-band .fm-desc-lead { color: #fff; }
.fm-desc-bullets { margin: 0 0 4px; padding-left: 20px; }
.fm-desc-bullets li { margin-bottom: 5px; }
.floor-map-band .fm-desc-bullets li { color: #fff; }
.floor-map-disclaimer { text-align: center; margin-top: 14px; color: var(--sp-muted); font-size: 13px; }

/* ---------------------------------------------------------- advisory board */
.board-meetings { margin: 20px 0 26px; }
/* Outline card, not a filled band (Nick 8/13): thin border, accent bar on
   the left, right corners softly rounded (left stays square for the bar). */
.board-meeting { background: none; border: 1px solid var(--sp-line); border-radius: 6px; padding: 18px 22px; margin-bottom: 12px; } /* accent bar dropped (Erin 8/24: 'seems random') */
.board-meeting h4 { margin: 0 0 6px; letter-spacing: .5px; }
.board-meeting p { margin: 0 0 4px; font-size: 14px; }
.board-meeting-location { color: var(--sp-muted); }
/* Small text in grey, not accent — pale brand colors (EE26 yellow) washed
   out at these sizes (Nick 8/7). Accent stays on structure: borders, icons,
   buttons, big stat numbers. */
.board-meeting-rsvp { color: var(--sp-muted); }
.board-year-note { color: var(--sp-muted); margin: 6px 0 14px; }
/* Roster flows down three columns instead of sitting in grid rows (Erin 9/24:
   a row was as tall as its longest entry, leaving ragged gaps under the short
   ones). Entries now stack at an even rhythm; reading order is down each
   column, then across. */
.board-members { margin-top: 8px; column-count: 3; column-gap: 30px; }
.board-member { margin-bottom: 24px; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }
.board-member h4 { margin: 0 0 3px; font-size: 15px; color: var(--sp-ink); }
.board-member p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--sp-muted); }
.board-member .board-title { color: var(--sp-ink); }

/* ------------------------------------------------------- sponsorship grid */
/* STATIC grids (Erin's meeting 8/10): desktop = the full matrix table
   mirroring her PDF; mobile = per-level accordions from the same data.
   Both live in the DOM; the media query picks one. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.grid-matrix-wrap { overflow-x: auto; }   /* narrow-desktop safety, not the mobile plan */
/* Condensed to fit the DGS grid (widest: row header + 9 level columns) inside
   the content column beside the form rail (Nick 8/10). Levers: two-line
   header wrap instead of wide single-line columns, tighter cell padding,
   headers a point smaller, and cell text allowed to wrap ("One (1) /
   Two (2)" becomes two lines rather than forcing column width). */
/* Full hairline grid, matching Erin's PDF: every cell boxed in the light
   line color, including between the dark header blocks (thin light seams
   separate them). Corner cell stays unboxed like the PDF's blank corner. */
.grid-matrix { width: 100%; border-collapse: collapse; font-size: 12px; }
.grid-matrix th, .grid-matrix td { border: 1px solid var(--sp-line); }
.grid-matrix thead th {
    background: var(--sp-ink); color: #fff; padding: 8px 5px; text-align: center;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    vertical-align: middle; line-height: 1.3;
}
.grid-matrix thead th.grid-matrix-corner { background: transparent; border-top: 0; border-left: 0; }
.grid-matrix tbody th[scope="row"] {
    text-align: left; font-weight: 400; color: var(--sp-ink); font-size: 12px;
    padding: 7px 10px 7px 12px; line-height: 1.3; max-width: 200px;
}
.grid-matrix tbody td { text-align: center; padding: 7px 5px; vertical-align: middle; }
/* Included marker — the PDF's green dot, keyed to the event accent so the
   grid recolors with the brand like everything else. */
.grid-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--sp-accent); }
.grid-cell-text { font-size: 11px; color: var(--sp-ink); line-height: 1.25; display: inline-block; max-width: 72px; }

.grid-levels { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
/* Quiet tabs (Nick 8/18 — a column of orange boxes was a lot of orange on
   phones): hairline border + charcoal title, reversing onto a #333 fill
   when active. The expanded detail card keeps its accent treatment. */
.grid-level-btn { border: 1px solid var(--sp-line); background: #fff; color: var(--sp-heading, #333); padding: 10px 20px; font-weight: 600; letter-spacing: .5px; cursor: pointer; transition: all .2s ease; border-radius: 3px; }
.grid-level-btn[aria-expanded="true"], .grid-level-btn:hover { background: var(--sp-heading, #333); border-color: var(--sp-heading, #333); color: #fff; }
.grid-level-detail { border-left: 3px solid var(--sp-accent); background: var(--sp-band); border-radius: 0 6px 6px 0; padding: 20px 24px; }
/* extra air under the grid's long title (Nick 8/13) */
#sponsorship_grid > .section-header { margin-bottom: 36px; }
.grid-level-detail .grid-value-statement { font-size: 16px; margin-bottom: 12px; }
.grid-deliverables { margin: 6px 0 0 18px; padding: 0; }
.grid-deliverables li { margin-bottom: 7px; line-height: 1.5; }

/* Mobile accordions stack: buttons become full-width rows with their detail
   directly beneath (source order is btn, detail, btn, detail…). */
.grid-levels-mobile { display: none; }
@media (max-width: 767px) {
    .grid-matrix-wrap { display: none; }
    .grid-levels-mobile { display: block; }
    .grid-levels-mobile .grid-level-btn { display: block; width: 100%; text-align: left; margin-bottom: 8px; }
    .grid-levels-mobile .grid-level-detail { margin: -4px 0 12px; }
}

/* ------------------------------------------------------------ attendee mix */
body {
    --mix-c0: var(--sp-accent);
    --mix-c1: #6b7f93; --mix-c2: #a3b2bf; --mix-c3: #d3dbe1;
    --mix-c4: #8fa8a0; --mix-c5: #c4b590;
}
.attendee-mix-row { margin-top: 8px; }
.mix-chart { text-align: center; margin-bottom: 24px; }
.mix-chart h4 { font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--sp-muted); margin-bottom: 14px; }
.mix-pie { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 14px; }
.mix-legend { list-style: none; margin: 0; padding: 0; font-size: 13px; text-align: left; display: inline-block; }
.mix-pct { color: var(--sp-muted); font-size: 12px; margin-left: 4px; }
.mix-legend li { margin-bottom: 5px; color: var(--sp-ink); }
.mix-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }

/* ---------------------------------------------------------- speaking roles */
.speaking-roles-row { margin-top: 10px; }
.speaking-role-photo {
    background: var(--sp-band) url('/images/headshot-placeholder.svg') center/64px no-repeat;
    border: 1px solid var(--sp-line); border-radius: 6px; min-height: 220px;
    margin-bottom: 20px; /* air below when the columns stack on mobile (Nick 8/17) */
}
.speaking-role-list { margin: 8px 0 14px 18px; padding: 0; }
.speaking-role-list li { margin-bottom: 6px; font-weight: 600; color: var(--sp-heading, #333); }

.grid-variance-note { margin-top: 14px; color: var(--sp-muted); font-size: 13px; text-align: center; }
.board-roster-head { margin: 24px 0 14px; font-size: 18px; letter-spacing: .5px; }

/* ------------------------------------------------------------ TY ad slots */
.ty-ad-slots { margin-top: 34px; }
.ty-ad-slot {
    background: var(--sp-band, #f5f6f7); border: 1px dashed #c6cacd; border-radius: 4px;
    min-height: 180px; display: flex; align-items: center; justify-content: center;
    color: var(--sp-muted, #6b6f73); font-size: 14px; letter-spacing: 1px; text-transform: uppercase;
    margin-bottom: 16px;
}

/* --------------------------------------------------------- current sponsors */
#current_sponsors .sponsors { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
#current_sponsors .sponsor .logo img { max-height: 60px; max-width: 150px; object-fit: contain; }

/* ----------------------------------------------------------- closing + why */
/* Left-aligned to match every other section on the page. */
.sponsor-closing { text-align: left; padding: 12px 0 0; }
/* Why e.R bullets flow in two columns (Erin 8/24 asked for columns; works
   because the DCS content is a bullet list — see cheat sheet guidance) */
.sponsor-why-band ul { columns: 3; column-gap: 44px; margin: 0; padding-left: 20px; }
@media (max-width: 767px) { .sponsor-why-band ul { columns: 1; } }
.sponsor-why-band li { break-inside: avoid; margin-bottom: 10px; }

/* Navy reversed-text treatment matching the map/video bands (Nick 8/17);
   the section-header keeps the accent color. Color sits on the BAND, not
   just p: the DCS body arrives via {!! !!} and on proof isn't guaranteed
   to be <p>-wrapped — text nodes/divs must inherit white too (caught on
   proof 8/18; local QA copy happened to be plain paragraphs). */
.sponsor-why-band { text-align: left; background: var(--sp-navy); color: #fff; }
.sponsor-why-band p, .sponsor-why-band div, .sponsor-why-band li { color: #fff; }
.sponsor-why-band p { max-width: 720px; margin-left: 0; margin-right: 0; }

/* ---------------------------------------------------------------- form rail */
/* Sticky needs room to travel: BS3 float columns are only content-tall, so
   the row goes flex on desktop to stretch both columns to equal height.
   DOM order = rail first (mobile: form near top); flex `order` restores the
   desktop right-rail position instead of BS3 push/pull offsets. */
@media (min-width: 992px) {
    .sponsor-page > .row { display: flex; align-items: stretch; }
    .sponsor-page > .row > .col-md-4.col-md-push-8 { order: 2; left: auto; }
    .sponsor-page > .row > .col-md-8.col-md-pull-4 { order: 1; right: auto; }
}
.sponsor-form-rail { position: sticky; top: 20px; }
.sponsor-form-card { border: 1px solid var(--sp-line); border-top: 4px solid var(--sp-accent); background: #fff; padding: 24px 22px; box-shadow: 0 2px 10px rgba(0,0,0,.06); border-radius: 4px; }
.sponsor-form-card h3 { margin: 0 0 8px; font-size: 20px; }
.sponsor-form-card > p { color: var(--sp-muted); font-size: 14px; margin-bottom: 16px; }
.sponsor-form-card .form-group { margin-bottom: 14px; }
.sponsor-form-card label { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--sp-muted); margin-bottom: 4px; }
.sponsor-form-card .form-control { border-radius: 3px; box-shadow: none; border-color: #cfd3d6; }
.sponsor-form-card .form-control:focus { border-color: var(--sp-accent); }
/* <button class="register"> — the page's inline a.register rule only hits anchors */
/* Sized to keep the CTA on one line. The label comes from Salesforce
   (Sponsor_Form_CTA_Text__c, max 25 chars), so this has to hold the longest
   allowed value, not just "Connect with an Advisor" — hence the smaller type,
   tighter tracking and reduced side padding rather than nowrap alone. */
.sponsor-form-submit {
    border: 0; width: 100%;
    background: var(--sp-accent); color: #fff;
    font-size: 15px; font-weight: 700; letter-spacing: .3px;
    padding: 13px 10px; white-space: nowrap; transition: opacity .25s ease;
}
.sponsor-form-submit:hover { opacity: .85; }

/* a.register: full button treatment lives HERE, unconditionally. The blade
   only styles a.register inside @if($event->highlight_color) — an event with
   no color set (the orange-default case) would otherwise render a bare
   default link on an accent background (caught on CIO Academy 8/13).
   !importants beat the blade's inline <style>, which follows this sheet.
   Buttons drop all-caps (Erin 8/13; small labels keep theirs). */
a.register {
    background: var(--sp-accent) !important;
    color: #fff !important;
    font-size: 20px;
    text-decoration: none !important;
    margin: 20px 0;
    padding: 10px 20px !important;
    text-align: center;
    display: inline-block !important;
    transition: all .25s ease;
    text-transform: none !important;
    letter-spacing: .3px !important;
    font-weight: 500;
    border: 0;
}
a.register:hover { opacity: .8; }
.sponsor-hp { position: absolute; left: -9999px; top: -9999px; }

/* ==========================================================================
   ER26 datasheet alignment (2026-08-05)
   Matches the "ER26 Automated Datasheet V3" print piece so the sponsor page
   and the leave-behind read as one family. Everything keys off --sp-accent,
   so each event's colour carries through unchanged.
   ========================================================================== */

/* Benefit icons, lifted from the datasheet's circular line art. They're
   single-colour, so they're used as CSS masks with the accent as the paint —
   that way each event's colour carries through exactly like the type does.
   Driven by data-benefit-icon, which already carries the Salesforce "Benefits
   Icon" value set (Connect / Learn / Lead / Accelerate); an unrecognised
   value simply renders no icon. Case-insensitive match for safety. */
.benefits-grid .benefit-item[data-benefit-icon]::before {
    content: "";
    display: block;
    width: 54px;
    height: 54px;
    margin-bottom: 12px;
    background-color: var(--sp-accent);
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain;    mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.benefits-grid .benefit-item[data-benefit-icon=""]::before { display: none; }
.benefits-grid .benefit-item[data-benefit-icon="Connect" i]::before {
    -webkit-mask-image: url(/images/sponsor-icons/connect.png);
            mask-image: url(/images/sponsor-icons/connect.png);
}
.benefits-grid .benefit-item[data-benefit-icon="Learn" i]::before {
    -webkit-mask-image: url(/images/sponsor-icons/learn.png);
            mask-image: url(/images/sponsor-icons/learn.png);
}
.benefits-grid .benefit-item[data-benefit-icon="Lead" i]::before {
    -webkit-mask-image: url(/images/sponsor-icons/lead.png);
            mask-image: url(/images/sponsor-icons/lead.png);
}
.benefits-grid .benefit-item[data-benefit-icon="Accelerate" i]::before {
    -webkit-mask-image: url(/images/sponsor-icons/accelerate.png);
            mask-image: url(/images/sponsor-icons/accelerate.png);
}

/* Speaking-roles photo — nudged down so its top edge lines up with the cap
   height of the paragraph beside it rather than the column top. */
.speaking-role-photo { margin-top: 10px; }

/* Small caps labels — the datasheet's VALUE / DELIVERABLES / AUDIENCE and
   the CONNECT / LEARN / LEAD / ACCELERATE benefit headings. Grey, not accent:
   pale brand colors (EE26 yellow) wash out at 13px caps (Nick 8/7). The
   accent carries the icons and big headings instead. */
.sp-label,
.benefits-grid .benefit-item h4,
.mix-chart h4,
.grid-level-detail .grid-deliverables-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--sp-heading, #333);
    margin-bottom: 10px;
}

/* Sub-headings — charcoal, heavy, sentence case (Nick 8/13: h3s drop all
   caps; only the small labels keep theirs). */
.sponsor-page h3 {
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--sp-ink);
    font-size: 19px;
}
/* Grid tier headings stay the datasheet's DIAMOND SPONSOR label treatment. */
.sp-tier-heading {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .8px;
    color: var(--sp-ink);
    font-size: 19px;
}
/* Headings inside the tinted side boxes follow the datasheet's smaller
   accent "AUDIENCE:" label instead — small label, caps stay. */
#past_attendees h3,
#targeted_titles h3 { color: var(--sp-accent); font-size: 15px; letter-spacing: 1.1px; text-transform: uppercase; margin-top: 0; }

/* The form heading stays sentence case — it's a conversational invitation,
   not a section label, and all-caps made it shout over the content column. */
.sponsor-form-card h3 { text-transform: none; letter-spacing: 0; font-size: 20px; }

/* Advisory board roster sits on a band, as on datasheet page 4. One wrapper
   carries the background so the heading and the names read as a single block
   (two adjacent backgrounds left a white seam between them). */
.board-roster-band {
    background: var(--sp-band);
    border-radius: 6px;
    margin: 0 -15px;
    padding: 30px 32px; /* bottom matches top (Nick 9/29); the columns drop the last entry's trailing margin, so no offset is needed */
}
/* On desktop the band aligns with the section's own heading and copy — unlike
   the self-contained bands, this one sits below an h2 at the content margin,
   so running to the column edge read as breaking out of the column. Mobile
   keeps the full-bleed inherited above. */
@media (min-width: 992px) {
    .board-roster-band { margin-left: 0; margin-right: 0; }
}
.board-roster-band .board-roster-head { margin: 0 0 20px; }

/* Legend rows: keep the swatch on the same line as long labels. */
.mix-legend { list-style: none; padding-left: 0; display: inline-block; text-align: left; }
/* pct sits BEFORE the label in a fixed right-aligned box: percentages line up
   in a column and long wrapped labels can't push them around (Nick 8/13). */
.mix-pct { color: var(--sp-muted); font-size: 12px; margin-left: 0; flex: 0 0 32px; text-align: right; font-variant-numeric: tabular-nums; }
.mix-legend li { display: flex; align-items: baseline; gap: 5px; margin-bottom: 5px; line-height: 1.4; }
.mix-legend .mix-swatch { flex: 0 0 auto; margin-right: 0; }
.mix-legend .mix-label { flex: 1 1 auto; min-width: 0; }
/* long picklist labels (e.g. Finance/Procurement/Budget/Auditor) wrap at
   slashes and stay tidy (Erin 8/24 'messy') */
.mix-legend .mix-label { overflow-wrap: break-word; line-height: 1.35; }

/* Availability pill — the datasheet's "Limited" / "Exclusive" chips. */
.sp-pill {
    display: inline-block; vertical-align: middle;
    background: var(--sp-accent); color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
    padding: 3px 10px; margin-left: 10px; border-radius: 2px;
}

/* Hairline-ruled lists — the datasheet underlines each sponsorship option. */
.grid-deliverables { list-style: none; margin-left: 0; }
.grid-deliverables li {
    border-bottom: 1px solid var(--sp-rule);
    padding: 0 0 8px; margin-bottom: 10px;
}
.grid-deliverables li:last-child { border-bottom: 0; }

/* Buttons — solid accent, all caps, letter-spaced, near-square. */
.grid-level-btn,
.sponsor-closing .register,
.sponsor-topbar .register {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    border-radius: 2px;
}
.sponsor-form-submit { border-radius: 2px; }

/* Past-sponsor quote — same tinted box as the endorsement quote at the top of
   the page, so the two testimonials read as one treatment. Left-aligned like
   every other section (the datasheet centres it, but that piece is a
   full-width page; here it would be the only centred block). */
#sponsor_quote.sponsor-quote-band { display: block; text-align: left; }
#sponsor_quote blockquote { border: 0; padding: 0; margin: 0; max-width: 820px; }
#sponsor_quote blockquote strong,
#sponsor_quote blockquote b { color: var(--sp-navy); }
/* Byline matches the endorsement quote's treatment exactly (Nick 8/13
   preferred the top one): 14px muted sentence case via the shared rule
   above; bootstrap's blockquote footer supplies the em dash. The old
   bold/uppercase/navy override is gone. */
#sponsor_quote .sponsor-quote-logo { margin-left: auto; margin-right: auto; }

/* Attendance snapshot headings pick up the accent (datasheet page 3). */
.mix-chart h4 { margin-bottom: 14px; }

/* Thin vertical rule between content and the form rail, mirroring the
   datasheet's two-column divider. Desktop only — the rail stacks on mobile. */
@media (min-width: 992px) {
    .sponsor-page > .row > .col-md-4.col-md-push-8 .sponsor-form-rail { padding-left: 28px; border-left: 1px solid var(--sp-line); }
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 991px) {
    :root { --sp-space: 44px; --sp-space-tight: 28px; }
    .sponsor-form-rail { position: static; margin-bottom: var(--sp-space-tight); }

    /* Form sits between the intro and the rest of the page, not above
       everything. The content column becomes display:contents so its two
       wrappers join the rail as orderable flex items of the row; the column's
       gutter moves onto the wrappers, since a contents box has no padding. */
    .sponsor-page > .row { display: flex; flex-direction: column; }
    .sponsor-page > .row > .col-md-8 { display: contents; }
    .sponsor-intro { order: 1; }
    .sponsor-page > .row > .col-md-4 { order: 2; }
    .sponsor-body { order: 3; }
    .sponsor-intro, .sponsor-body { padding-left: 15px; padding-right: 15px; }

    /* Top bar keeps the brand left and the back link right; the CTA is
       redundant on mobile now that the form sits high on the page.
       !important is required: the per-event inline style block sets
       a.register { display: inline-block !important }. */
    .sponsor-topbar .register { display: none !important; }
    .sponsor-topbar { flex-wrap: nowrap; }

    /* (title strip + banner rules removed 8/12 — the hero replaced both) */

    /* style.events.2015.css pushes the body down (20% under 768px, 24% under
       580px) to clear the fixed header those pages use. The sponsor top bar is
       in normal flow, so that margin was just a band of dead space above it —
       103px on a 430px-wide phone. This file loads after that one, so equal
       specificity is enough to win. */
    body { margin-top: 0; }


    /* ---- page gutters: 25px, not 15 -------------------------------------
       .container carries the outer inset (top bar, title strip, content), and
       the full-bleed bands pull back by the same amount so they still reach
       the screen edge. Content lands at 25px: row -15 + wrapper 15 + the
       container's 25. */
    .container { padding-left: 25px; padding-right: 25px; }
    .sponsor-topbar { padding-left: 25px; padding-right: 25px; }
    /* Only the roster band is full-bleed on mobile (agreed earlier); the other
       bands sit inside the gutter, so their horizontal margins stay zeroed by
       `.sponsor-page .content-section`. */
    .board-roster-band { margin-left: -25px; margin-right: -25px; }

    /* The roster band runs full-bleed here, so its 32px desktop inset put the
       names further in than the surrounding copy. Match the other bands. */
    .board-roster-band { padding-left: 20px; padding-right: 20px; }

    /* Breathing room above the form now that it sits mid-page. */
    .sponsor-form-rail { margin-top: 28px; }

    /* ---- centred blocks on mobile --------------------------------------- */
    /* Benefits centre completely — icon, label and blurb. The icon is a
       ::before block, so it needs auto margins rather than text-align. */
    #benefits,
    .benefits-grid .benefit-item { text-align: center; }
    .benefits-grid .benefit-item[data-benefit-icon]::before { margin-left: auto; margin-right: auto; }

    /* video title/description stay LEFT (8/13); floor map's H2 became an
       h3 on 8/17, so its old center rule is gone */
    #attendee_mix > .section-header { text-align: center; }
    #floor_map .fm-hint { text-align: center; }
    #sponsor_quote,
    #sponsor_quote blockquote { text-align: center; }

    /* ---- advisory board: two columns, tightened ------------------------- */
    /* 27 members in one column ran very long; two flowing columns here. */
    .board-members { column-count: 2; column-gap: 16px; }
    .board-members .board-member { margin-bottom: 16px; }
    .board-member h4 { font-size: 14px; }
    .board-member p { font-size: 12px; line-height: 1.35; }
}

/* Benefits go single-column on phones. Two columns leaves roughly 190px per
   item, which wraps the blurbs to five or six lines; the datasheet stacks them
   as well. Tablets keep the two-up. */
@media (max-width: 575px) {
    .benefits-grid .benefit-item { width: 100%; float: none; }
    .sponsor-quote-band { flex-direction: column; text-align: center; }
    .sponsor-page .content-section { margin-bottom: var(--sp-space); }
    /* video band keeps the desktop format on phones — full-bleed video,
       text in the connected box below with tighter padding (Nick 8/17) */
    .sponsor-quote-band, .sponsor-why-band, .sponsor-stats { padding: 26px 20px !important; }
    .sponsor-video-band { padding: 0 !important; }
    .sponsor-page .content-section.sponsor-video-band h3 { margin: 18px 20px 4px; }
    .sponsor-video-band p { margin: 0 20px 20px; }
    .sponsor-quote-band blockquote,
    #sponsor_quote blockquote { font-size: 18px; }
    /* Narrow bar: let the actions wrap under the logo rather than crush them. */
    .sponsor-topbar { flex-wrap: wrap; gap: 10px; }
    .sponsor-topbar-actions { gap: 14px; }
    .sponsor-brand-logo { height: 30px; max-width: 150px; }
}

/* ------------------------------------------------------------- sponsors */
/* Flat grid mirroring the public pages' bordered same-size boxes, 4 across
   on the sponsor page (Nick 8/12); level = meta per box; fold past 12 with
   a two-way Show all / Show fewer toggle. */
.sponsor-grid-flat { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 991px) { .sponsor-grid-flat { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 600px) { .sponsor-grid-flat { grid-template-columns: 1fr 1fr; } }
/* hidden overflow boxes must not hold grid slots open */
.sponsor-grid-flat .sponsor[hidden] { display: none; }

/* Past Attendees: full-width band, single column — the multi-column flow
   broke oddly on real content (Nick 8/12). */
.past-attendees-body p { margin: 0; }
.sponsor-showall {
    display: block; margin: 18px auto 0;
    border: 2px solid var(--sp-accent); background: #fff; color: var(--sp-accent);
    padding: 10px 24px; font-weight: 600; letter-spacing: .5px;
    cursor: pointer; border-radius: 3px; transition: all .2s ease;
}
.sponsor-showall:hover { background: var(--sp-accent); color: #fff; }