/* =====================================================================
   Hermann Sustainability Summit 2026 — enhancements layer
   Loaded AFTER css/site.css. Everything Raja asked for on 2026-08-24:
   1. Univers type system (interim: Universalis ADF, open-source Univers design)
   2. Original 2025 wordmark sizing (nav / hero / footer)
   3. About section: headline left, key points stacked right
   4. Motion: hero video + parallax, page progress, agenda scroll line,
      staggered reveals, heading rule, card lift, tab fade, CTA sheen
   Plain CSS on purpose — the Tailwind part of site.css is compiled output.
   ===================================================================== */

/* ---------- 1. FONTS ------------------------------------------------ */
/* Interim family: Universalis ADF Std (GPL + font exception, see fonts/universalis/LICENSE). */
@font-face { font-family: "Universalis ADF"; src: url(/summit/fonts/universalis/UniversalisADFStd-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Universalis ADF"; src: url(/summit/fonts/universalis/UniversalisADFStd-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Universalis ADF"; src: url(/summit/fonts/universalis/UniversalisADFStd-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Universalis ADF Cond"; src: url(/summit/fonts/universalis/UniversalisADFStd-Cond.woff2) format("woff2"); font-weight: 300 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Universalis ADF Cond"; src: url(/summit/fonts/universalis/UniversalisADFStd-CondItalic.woff2) format("woff2"); font-weight: 300 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Universalis ADF Cond"; src: url(/summit/fonts/universalis/UniversalisADFStd-BoldCond.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* UNIVERS (licensed) — 1) drop the files in /fonts/univers/ (names in fonts/univers/README.txt)
   2) uncomment this block  3) in :root below, put "Univers" / "Univers Condensed" FIRST in the stacks.
@font-face { font-family: "Univers"; src: url(/summit/fonts/univers/Univers-Roman.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Univers"; src: url(/summit/fonts/univers/Univers-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Univers Condensed"; src: url(/summit/fonts/univers/UniversCondensed.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Univers Condensed"; src: url(/summit/fonts/univers/UniversCondensed-Light.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
*/

:root {
  /* Role → face. Univers 55 Roman = body · 65 Bold = display/buttons · 57 Condensed = data/tags · 47 Condensed Light = quote/tagline */
  --font-univers-sans: "Universalis ADF", "Univers", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-univers-cond: "Universalis ADF Cond", "Univers Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-sans: var(--font-univers-sans);
  --font-display: var(--font-univers-sans);
  --font-mono: var(--font-univers-cond);
  --amber-glow: 0 0 0 4px rgba(255, 199, 44, 0.18);
}
body { font-weight: 400; }
.display { font-weight: 700; letter-spacing: -0.01em; }
.font-\[750\] { font-weight: 700; }
.kicker, .font-mono { letter-spacing: 0.1em; }
.tab { font-weight: 700; }
/* Condensed Light role: the quote band and the hero tagline (large sizes only, where the light cut reads well) */
.quote-marks { font-family: var(--font-univers-cond); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.32; letter-spacing: 0.005em; }
.hero-tagline { font-family: var(--font-univers-cond); font-weight: 300; font-style: italic; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.35; }
/* Stat numbers and agenda times in the condensed cut sit a touch larger to keep their presence */
[data-stats] dd { font-size: clamp(2.3rem, 3.8vw, 3.2rem); font-weight: 700; letter-spacing: 0.02em; }
[data-stats] dt { letter-spacing: 0.02em; }

/* ---------- 2. WORDMARK ---------------------------------------------- */
/* The nav lockup is a column flexbox: without align-self the image is STRETCHED to the width of the
   text line under it (that was the "expanded to the sides" logo). Always keep width:auto + align-self. */
.logo-nav { height: 30px; width: auto; align-self: flex-start; flex: none; }
header[data-nav] nav > a > span { margin-top: 5px; font-size: 0.78rem; }
.logo-footer { height: 36px; width: auto; align-self: flex-start; }
/* Hero: the big HERMANN line is the real wordmark, sized to the summit line under it */
.hero-wordmark { display: block; width: clamp(230px, 34vw, 520px); height: auto; margin-bottom: 0.9rem; }

/* ---------- 3. ABOUT: headline left, points stacked right ------------ */
.about-grid { display: grid; gap: 3rem; }
.about-points { display: grid; gap: 2.25rem; }
@media (min-width: 64rem) {
  .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 5rem; align-items: start; }
  .about-copy { position: sticky; top: calc(var(--nav-h) + 2.5rem); }
  .about-points { padding-top: 0.5rem; }
}

/* ---------- 4. MOTION ------------------------------------------------- */
/* 4a. Page progress hairline under the nav */
.page-progress { position: fixed; top: var(--nav-h); left: 0; z-index: 50; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--page-progress, 0)); background: var(--amber); pointer-events: none; }

/* 4b. Hero: video sits behind the still, fades in once it plays; both get a slow parallax */
.hero-media { position: absolute; inset: 0; z-index: -20; overflow: hidden; }
.hero-media > img, .hero-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.08); will-change: transform; }
.hero-media > video { opacity: 0; transition: opacity 1.2s ease; }
.hero-media > video.is-playing { opacity: 1; }
.hero-year { display: inline-block; animation: yearIn 0.7s var(--ease-snap) 0.55s both; }
@keyframes yearIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* 4c. Nav links: amber underline grows on hover */
header[data-nav] nav > ul > li > a { position: relative; padding-bottom: 2px; }
header[data-nav] nav > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%; background: var(--amber); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.35s var(--ease-snap); }
header[data-nav] nav > ul > li > a:hover::after, header[data-nav] nav > ul > li > a:focus-visible::after { transform: scaleX(1); }

/* 4d. Staggered reveals: any [data-stagger] container reveals its children one after another */
/* clip-path (not opacity) so the text colour is never blended mid-animation: audits and screen readers see full-contrast text at every frame */
.rv { clip-path: inset(0 0 100% 0); transform: translateY(18px); transition: clip-path 0.7s var(--ease-snap), transform 0.7s var(--ease-snap); transition-delay: var(--rv-delay, 0ms); }
.rv.in { clip-path: inset(-48px); transform: none; }

/* 4e. Section headings draw a short amber rule once revealed */
.reveal .h2 { position: relative; padding-bottom: 0.55rem; }
.reveal .h2::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 3.25rem; background: var(--amber); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s var(--ease-snap) 0.25s; }
.reveal.in .h2::after { transform: scaleX(1); }

/* 4f. Stats: an amber bar grows under each number after the count-up */
[data-stats] dd { position: relative; padding-bottom: 0.45rem; }
[data-stats] dd::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 2.5rem; background: var(--amber); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--ease-snap) 0.9s; }
[data-stats].in dd::after { transform: scaleX(1); }

/* 4g. Agenda: a line on the left draws itself as you scroll, and each session lights up as the line passes it */
.agenda-track { position: relative; padding-left: 1.75rem; }
@media (min-width: 40rem) { .agenda-track { padding-left: 2.5rem; } }
.agenda-line { position: absolute; left: 0.35rem; top: 0; bottom: 0; width: 2px; background: var(--line-soft); }
.agenda-line-fill { position: absolute; left: 0; top: 0; width: 100%; height: var(--agenda-progress, 0%); background: linear-gradient(to bottom, var(--amber) 0%, var(--amber) 85%, var(--amber-deep) 100%); box-shadow: 0 0 12px rgba(255, 199, 44, 0.45); }
.agenda-line-head { position: absolute; left: 50%; top: var(--agenda-progress, 0%); width: 14px; height: 14px; border-radius: 999px; background: var(--amber); box-shadow: var(--amber-glow), 0 0 18px rgba(255, 199, 44, 0.6); transform: translate(-50%, -50%); }
.agenda-track [role="tabpanel"] > ul > li { position: relative; }
.agenda-track [role="tabpanel"] > ul > li::before { content: ""; position: absolute; left: calc(-1.75rem + 0.35rem + 1px); top: 1.55rem; width: 9px; height: 9px; border-radius: 999px; background: var(--ink-2); border: 2px solid var(--line); transform: translateX(-50%); transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
@media (min-width: 40rem) { .agenda-track [role="tabpanel"] > ul > li::before { left: calc(-2.5rem + 0.35rem + 1px); } }
.agenda-track [role="tabpanel"] > ul > li.is-past::before { background: var(--amber); border-color: var(--amber); box-shadow: var(--amber-glow); }
.agenda-track [role="tabpanel"] > ul > li.is-past > div:first-child > p:first-child, .agenda-track [role="tabpanel"] > ul > li.is-past > p:first-child { color: var(--amber); transition: color 0.35s ease; }
[role="tabpanel"]:not([hidden]) { animation: panelIn 0.4s var(--ease-snap); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 4h. Cards lift on hover (tickets, packages, venue) */
#tickets .card, #sponsors .card, #venue .card { transition: transform 0.35s var(--ease-snap), border-color 0.35s ease, box-shadow 0.35s ease; }
@media (hover: hover) and (pointer: fine) {
  #tickets .card:hover, #sponsors .card:hover, #venue .card:hover { transform: translateY(-4px); border-color: rgba(255, 199, 44, 0.45); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8); }
  .logo-flat img, .logo-detail img, .logo-tone img, .logo-box img { transition: opacity 0.3s ease, transform 0.35s var(--ease-snap); }
  .logo-flat:hover img, .logo-detail:hover img, .logo-tone:hover img, .logo-box:hover img { opacity: 1; transform: translateY(-2px); }
  .btn-amber:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(255, 199, 44, 0.9); }
}

/* 4i. CTA band: a slow amber sheen */
.ctaband { background: linear-gradient(110deg, var(--amber) 0%, #ffd45c 45%, var(--amber) 60%, var(--amber-deep) 100%); background-size: 220% 100%; animation: sheen 11s linear infinite; }
@keyframes sheen { from { background-position: 0% 50%; } to { background-position: 220% 50%; } }


/* ---------- 5. EV TRUCK STRIP: larger, with a slow scroll-linked zoom over the pan ---------- */
.truck-pan { position: relative; }
.truck-pan > img { height: 360px; object-position: 32% 58%; transform: scale(var(--truck-zoom, 1)); transform-origin: 50% 60%; will-change: transform; }
@media (min-width: 40rem) { .truck-pan > img { height: min(56vw, 800px); max-height: none; object-position: 50% 58%; } }
.truck-pan::after { content: ""; position: absolute; inset: auto 0 0 0; height: 22%; background: linear-gradient(to bottom, rgba(11, 18, 14, 0) 0%, rgba(11, 18, 14, 0.35) 100%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .truck-pan > img { transform: none; } }


/* ---------- 7. VENUE BAND (thin screen-wide strip on desktop, tall portrait on phones) ---------- */
.venue-hero { position: relative; margin: 0; overflow: hidden; border-bottom: 1px solid var(--line-soft); background: var(--ink-2); }
.venue-hero img { display: block; width: 100%; height: clamp(300px, 31vw, 480px); object-fit: cover; object-position: 50% 48%; }
@media (max-width: 39.99rem) { .venue-hero img { height: min(78vh, 640px); object-position: 50% 42%; } }
.venue-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 26%; background: linear-gradient(to bottom, rgba(11, 18, 14, 0) 0%, rgba(11, 18, 14, 0.5) 100%); pointer-events: none; }

/* ---------- Reduced motion: everything settles instantly ------------- */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv.in { clip-path: none; transform: none; transition: none; }
  .hero-media > img, .hero-media > video { transform: none; }
  .hero-year { animation: none; }
  .ctaband { animation: none; background: var(--amber); }
  .page-progress { display: none; }
  .agenda-line-fill, .agenda-line-head { transition: none; }
  .reveal .h2::after, [data-stats] dd::after { transform: scaleX(1); transition: none; }
}

/* ---------- 5. SPONSOR LOGOS: the originals, not silhouettes --------- */
/* site.css normalises every sponsor mark for a dark page by recolouring it
   (.logo-flat img{filter:brightness(0)invert()} = white silhouette;
   .logo-detail and .logo-tone lighten theirs). Raja asked for the ORIGINAL
   logos, so the filters come off and each mark sits on a white tile, which
   is what lets true brand colour read against the near-black page — and is
   invisible behind the same logos on the light build.
   Three sponsor files are white knockout artwork with no colour version on
   disk (TD Bank, Samsara, Shamy Shipers & Lonski); they invert to black so
   they read on the same tile. Replace them if colour originals arrive. */
#sponsors a.logo-flat,
#sponsors a.logo-detail,
#sponsors a.logo-tone { background: #fff; border-radius: 0.6rem; padding: 0.9rem 1.15rem; }
#sponsors .logo-flat img,
#sponsors .logo-detail img,
#sponsors .logo-tone img { filter: none; opacity: 1; }
#sponsors img[src*="td-bank-letters"],
#sponsors img[src*="Untitled-design-12"],
#sponsors img[src*="Untitled-design-22"] { filter: invert(1); }

/* Campbell Supply is red type over a WHITE knockout second line ("Supply
   Company"), so on a white tile that whole line disappears and the mark reads
   as just "CAMPBELL". It is the one file that needs a dark tile. Replace with
   a light-background version if the sponsor supplies one. */
#sponsors a:has(img[src*="Untitled-design-25"]) { background: #24382e; }

/* ---------- 6. AGENDA CHIP COLUMN ------------------------------------ */
/* The speaker column is the 3rd grid child of an agenda row. Between sm and
   lg the row has only two columns (96px + 1fr), so the column wrapped onto a
   second line INSIDE the 96px time slot and `truncate` cut every name to
   about three characters ("And… / New …"). Give it the whole row there; the
   lg 3-column layout with its 240px rail is untouched.
   Done here rather than with an lg:col-span-1 utility: this is a zero-build
   site and that class is not in the compiled bundle. */
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .agenda-track [role="tabpanel"] > ul > li > div.space-y-4 { grid-column: 2 / -1; }
}

/* Chip names and job titles wrap instead of clipping - some titles are 40+
   characters and the rail is 240px. */
.agenda-track [role="tabpanel"] a .truncate { overflow: visible; text-overflow: clip; white-space: normal; }

/* The three original chips still carry a bio tooltip. It was positioned
   above the chip, which put it behind the 72px sticky nav whenever the row
   sat near the top of the viewport, and covered the session title. Below the
   chip it is always in view - these three rows have at most two chips. */
.agenda-track [id^="agenda-bio-"] { top: 100%; bottom: auto; margin-top: 0.5rem; margin-bottom: 0; }

/* ---------- 7. SPONSOR WALL: one tile size for everyone -------------- */
/* The source marks have wildly different aspect ratios and each <img> carried
   its own height utility, so every frame came out a different size. Make the
   TILE the fixed thing and let each mark scale to fit inside it. Rows are
   centred flex rather than a 2-col grid, so a leftover logo centres instead of
   leaving a hole beside it. */
#sponsors ul[data-stagger] { --tile-gap: 1rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2rem var(--tile-gap); }
#sponsors ul[data-stagger] > li { width: calc(50% - var(--tile-gap) / 2); }
#sponsors a.logo-flat,
#sponsors a.logo-detail,
#sponsors a.logo-tone { width: 100%; height: 104px; padding: 0.85rem 1rem; }
#sponsors a.logo-flat img,
#sponsors a.logo-detail img,
#sponsors a.logo-tone img,
#sponsors a.logo-detail > span { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
@media (min-width: 40rem) {
  #sponsors ul[data-stagger] { --tile-gap: 2.5rem; }
  #sponsors ul[data-stagger] > li { width: 196px; }
  #sponsors a.logo-flat,
  #sponsors a.logo-detail,
  #sponsors a.logo-tone { height: 132px; }
}

/* ---------- 8. CHAT: the floating button blocked the send button ----- */
/* The FAB is fixed at right-5 bottom-5; on phones the panel runs to the bottom
   of the screen, so the button sat directly on top of the form's send button
   and the message could not be sent. The panel header carries its own Close
   control, so the floating one stands down while the panel is open. */
@media (max-width: 39.999rem) {
  .hss-fab.fixed[aria-expanded="true"] { display: none; }
}

/* One sponsor ENTRY (Atlantic Utility Trailer Sales - Cargobull North America,
   one caption, one link, one Vehicle Showcase sponsorship) carries TWO marks in
   a single tile. Side by side each needed the full tile width, so the second was
   pushed outside it and put a horizontal scrollbar on the whole page at 390.
   Stacked, both fit inside the same tile every other sponsor gets.
   Specificity must beat `#sponsors a.logo-detail img` above (1-1-2). */
#sponsors a.logo-detail > span { flex-direction: column; align-items: center; justify-content: center;
  gap: 0.35rem; height: 100%; max-width: 100%; }
#sponsors a.logo-detail > span > img { max-width: 100%; max-height: 46%; }

/* Near-square marks (TD Bank, PSE&G, Hunter) otherwise fill the tile edge to
   edge and read heavier than the wide ones beside them. */
#sponsors a.logo-flat img,
#sponsors a.logo-detail img,
#sponsors a.logo-tone img { max-height: 86%; }

/* Chat bubbles render with textContent; keep a stray newline from collapsing. */
.hss-msg p { white-space: pre-line; }