/*
  Pan Am Brand Hub, lab build. One stylesheet for the hub: top bar, section sidebar,
  page column with an "on this page" list, and one rule set per content block type.
  Look: the Pan Am family of the panam.com refresh and the Pan Am Shop (white, Pan Am Blue,
  light Neue Einstellung, Advercase headings set in capitals as on the Frontify hub).
*/

* { box-sizing: border-box; }
:root { --logo-h: clamp(32px, 5.3vw, 76px); --header-h: calc(var(--logo-h) + 40px); } /* one header on every page: 20 px above and below the globe */
html { scroll-padding-top: 24px; }
body { margin: 0; background: var(--colors--cloud-white); color: var(--colors--text); font: 300 17px/1.65 var(--fonts--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--colors--pan-am-blue); text-underline-offset: 3px; }
a:hover { color: var(--colors--worldport-blue); }
strong { font-weight: 500; color: var(--colors--night-sky); }

/* Top bar */
.topbar { position: relative; z-index: 20; display: flex; align-items: center; gap: 32px; height: var(--header-h); padding: 0 32px; background: transparent; } /* sits at the top of the page and scrolls away, on every page */
.brandmark img { height: var(--logo-h); width: auto; }
.topnav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 4px; white-space: nowrap; }
.topnav .menu-only { display: none; }
.topactions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topactions a { font: 500 11px/1 var(--fonts--body); letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; padding: 12px 20px; border: 1px solid var(--colors--pan-am-blue); border-radius: 999px; color: var(--colors--pan-am-blue); white-space: nowrap; }
.topactions a:hover { background: var(--colors--seasalt); }
.topactions a.primary { background: var(--colors--pan-am-blue); color: #fff; }
.topactions a.primary:hover { background: var(--colors--worldport-blue); border-color: var(--colors--worldport-blue); }
.topnav a { font: 400 14px/1 var(--fonts--body); letter-spacing: 1px; text-transform: uppercase; color: var(--colors--night-sky); text-decoration: none; padding: 10px 14px; border-radius: 999px; }
.topnav a:hover { background: var(--colors--seasalt); }
.topnav a.on { background: var(--colors--pan-am-blue); color: #fff; }
.menu-btn { display: none; margin-left: auto; font: 500 11px/1 var(--fonts--body); letter-spacing: 2px; text-transform: uppercase; background: none; border: 1px solid var(--colors--line); border-radius: 999px; padding: 10px 14px; }

/* Layout */
.shell { display: grid; grid-template-columns: 260px minmax(0, 1fr) 220px; gap: 48px; max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 120px; }
body.home .sidebar, body.home .toc { display: none; }
.main { min-width: 0; outline: none; }
.main > .page { max-width: 820px; }

/* Sidebar */
.sidebar { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow: auto; padding-right: 8px; padding-left: 10px; margin-left: -10px; font-size: 14px; } /* the 10 px each side lets the links' highlight reach past the text without being clipped by the scroll box */
.sidebar h2 { font: 500 11px/1.3 var(--fonts--body); letter-spacing: var(--text-spacing--large); text-transform: uppercase; color: var(--colors--night-sky); margin: 26px 0 8px; }
.sidebar h2:first-child { margin-top: 0; }
.sidebar h3 { font: 400 10.5px/1.3 var(--fonts--body); letter-spacing: var(--text-spacing--medium); text-transform: uppercase; color: var(--colors--muted); margin: 16px 0 4px; }
.sidebar a { display: block; padding: 5px 10px; margin-left: -10px; border-radius: 8px; color: var(--colors--text); text-decoration: none; line-height: 1.35; }
.sidebar a:hover { background: var(--colors--seasalt); }
.sidebar a.on { background: var(--colors--seasalt); color: var(--colors--pan-am-blue); font-weight: 400; }

/* On this page */
.toc { position: sticky; top: 24px; align-self: start; font-size: 13px; }
.toc h2 { font: 500 10.5px/1.3 var(--fonts--body); letter-spacing: var(--text-spacing--large); text-transform: uppercase; color: var(--colors--muted); margin: 0 0 10px; }
.toc a { display: block; color: var(--colors--text); text-decoration: none; padding: 4px 0 4px 12px; border-left: 1px solid var(--colors--line); }
.toc a:hover { color: var(--colors--pan-am-blue); border-left-color: var(--colors--pan-am-blue); }

/* Page header */
.crumb { font: 400 11px/1.3 var(--fonts--body); letter-spacing: var(--text-spacing--large); text-transform: uppercase; color: var(--colors--muted); margin: 0 0 10px; }
.page-title { font: 400 var(--headings--h2)/1.05 var(--fonts--heading); text-transform: uppercase; color: var(--colors--night-sky); margin: 0 0 32px; letter-spacing: 0.5px; }
.page-meta { margin-top: 64px; font-size: 13px; color: var(--colors--muted); }

/* Rich text */
.rich h1, .rich h2, .rich h3, .rich h4, .b-heading { font-family: var(--fonts--heading); font-weight: 400; color: var(--colors--night-sky); text-transform: uppercase; line-height: 1.1; margin: 1.4em 0 0.5em; letter-spacing: 0.4px; }
.rich h1, .rich h2.rich-h1 { font-size: var(--headings--h3); }
.rich h2, .b-heading.h2 { font-size: var(--headings--h4); }
.rich h3, .b-heading.h3 { font-size: 19px; }
.rich h4, .b-heading.h4 { font-size: 16px; }
.b-heading.h1 { font-size: var(--headings--h3); }
.b-heading { scroll-margin-top: 24px; }
.rich p { margin: 0 0 1em; white-space: pre-line; }
.rich .lead { font-size: 21px; line-height: 1.5; color: var(--colors--night-sky); }
.rich .eyebrow { font: 500 11.5px/1.4 var(--fonts--body); letter-spacing: var(--text-spacing--large); text-transform: uppercase; color: var(--colors--muted); }
.rich .small { font-size: 14px; }
.rich blockquote { margin: 1.2em 0; font-size: 20px; color: var(--colors--night-sky); }
.rich ul, .rich ol { margin: 0 0 1em; padding-left: 1.2em; }
.rich li { margin: 0.25em 0; }
.rich > :first-child { margin-top: 0; }
.cols-2 { column-count: 2; column-gap: 40px; }
.cols-3 { column-count: 3; column-gap: 32px; }

/* Blocks */
.block { margin: 0 0 28px; }
.row { display: grid; gap: 32px; margin: 0 0 28px; align-items: start; }
.row > .block { margin: 0; }
.b-divider { border: 0; border-top: 1px solid var(--colors--line); margin: 40px 0; }
.b-image img { width: 100%; border-radius: var(--shop--radius); background: var(--colors--seasalt); }
.b-image figcaption, .b-grid figcaption { font-size: 14px; color: var(--colors--muted); margin-top: 10px; }
.b-image .img-title { font-weight: 400; color: var(--colors--night-sky); }
.b-cards { display: grid; gap: 20px; }
.card { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
a.card:hover .card-title, a.card:hover .rich { color: var(--colors--pan-am-blue); }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--shop--radius); background: var(--colors--seasalt); }
.card-title { font-weight: 400; color: var(--colors--night-sky); margin: 0; }
.card .rich p { margin: 0 0 0.4em; }
.b-text-image { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.b-text-image.text-left .ti-image { order: 2; }
.b-text-image img { border-radius: var(--shop--radius); }
.b-grid { display: grid; gap: 24px; }
.b-grid img { border-radius: var(--shop--radius); width: 100%; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 2px solid var(--colors--night-sky); }
.timeline li { position: relative; padding: 0 0 40px; }
.timeline li::before { content: ""; position: absolute; left: -36px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--colors--night-sky); }
.timeline .year { font: 500 13px/1 var(--fonts--body); letter-spacing: var(--text-spacing--medium); color: var(--colors--night-sky); }
.timeline img { max-width: 360px; margin: 14px 0; }
.timeline h3 { font: 400 17px/1.3 var(--fonts--body); color: var(--colors--night-sky); margin: 8px 0 6px; }
.filebox { border: 1px solid var(--colors--line); border-radius: var(--shop--radius); padding: 20px 22px; }
.filebox h3 { font: 500 15px/1.3 var(--fonts--body); color: var(--colors--night-sky); margin: 0 0 8px; }
.filebox ul { list-style: none; margin: 12px 0 0; padding: 0; font-size: 14px; }
.filebox li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--colors--line); }
.filebox li span:last-child { color: var(--colors--muted); white-space: nowrap; }

/* Home: as the Frontify cover page (hero 1000 px at 1440 wide, tiles 333 px with 20 px gaps) */
body.home .shell { display: block; max-width: none; padding: 0; }
body.home .topbar { position: absolute; left: 0; right: 0; top: 0; background: transparent; border: 0; backdrop-filter: none; }
body.home .topactions a { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
body.home .topactions a:hover { background: rgba(255, 255, 255, 0.12); }
body.home .topactions a.primary { background: #fff; border-color: #fff; color: var(--colors--pan-am-blue); }
body.home .topactions a.primary:hover { background: var(--colors--seasalt); }
body.home .topnav a { color: rgba(247, 247, 247, 0.8); }
body.home .topnav a:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
body.home .menu-btn { color: #fff; border-color: rgba(255, 255, 255, 0.5); background: transparent; }
.home-hero { height: 1000px; background-size: cover; background-position: 50% 50%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(clamp(330px, 23.6vw, 340px) - 1.1 * clamp(23.4px, 5vw, 72px)) 32px 0; /* raised one heading line so a two-line heading keeps the intro in the sky */ color: var(--colors--seasalt); }
.home-hero h1 { font: 400 clamp(23.4px, 5vw, 72px)/1.1 var(--fonts--heading); color: var(--colors--seasalt); margin: 0; text-transform: none; white-space: pre-line; }
.home-hero p { font: 300 clamp(15px, 1.4vw, 20px)/1.2 var(--fonts--body); color: var(--colors--seasalt); margin: clamp(12px, 1.7vw, 24px) 0 0; white-space: pre-line; max-width: 640px; }
.home-band { background: var(--colors--seasalt); padding-top: 40px; }
.home-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 0 20px; }
.tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); transition: background var(--dur-quick); }
.tile:hover::after { background: rgba(0, 0, 0, 0.4); }
.tile-title { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 0 12%; text-align: center; font: 500 40px/1.2 var(--fonts--heading); letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.home-feedback { text-align: center; padding: 159px var(--gutter) 90px; }
.home-feedback h2 { font: 500 32px/1.2 var(--fonts--heading); text-transform: uppercase; color: #000; margin: 0 0 20px; }
.home-feedback p { font: 400 16px/1.5 var(--fonts--body); color: #000; white-space: pre-line; margin: 0 0 30px; }
.home-button { display: inline-block; font: 400 14px/22px var(--fonts--body); color: #fff; background: var(--colors--pan-am-blue); padding: 10px 100px; border-radius: 0; text-decoration: none; }
.home-button:hover { color: #fff; background: var(--colors--worldport-blue); }
.home-note { text-align: center; padding: 50px var(--gutter) 60px; border-top: 1px solid var(--colors--line); }
.home-note h2 { font: 400 16px/1.3 var(--fonts--body); text-transform: uppercase; color: #000; margin: 0 0 10px; }
.home-note p { font: 400 16px/24px var(--fonts--body); color: #000; max-width: 680px; margin: 0 auto; }
body.home .footer { background: var(--colors--seasalt); border-top: 0; color: #000; font-size: 16px; padding-top: 10px; }
@media (max-width: 860px) {
  .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-button { padding: 10px 48px; }
}
@media (max-width: 520px) { .home-tiles { grid-template-columns: 1fr; } .topbar { padding: 0 24px; } }

.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--colors--line); font-size: 14px; }
.pager a { text-decoration: none; }
.pager span { display: block; font-size: 11px; letter-spacing: var(--text-spacing--large); text-transform: uppercase; color: var(--colors--muted); }

.footer { border-top: 1px solid var(--colors--line); padding: 28px var(--gutter) 100px; font-size: 13px; color: var(--colors--muted); text-align: center; }

@media (max-width: 1180px) {
  .shell { grid-template-columns: 230px minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sidebar { position: static; max-height: none; border-bottom: 1px solid var(--colors--line); padding-bottom: 16px; }
  .b-cards, .b-grid, .row { grid-template-columns: 1fr 1fr !important; }
  .b-text-image { grid-template-columns: 1fr; }
  .cols-2, .cols-3 { column-count: 1; }
}
@media (max-width: 520px) {
  .b-cards, .b-grid, .row { grid-template-columns: 1fr !important; }
}

/* Colour palettes */
.b-colors .colors-title { font: 500 13px/1.3 var(--fonts--body); letter-spacing: var(--text-spacing--medium); text-transform: uppercase; color: var(--colors--night-sky); margin: 0 0 12px; }
.b-colors table { width: 100%; border-collapse: collapse; font-size: 14px; }
.b-colors th { text-align: left; font: 400 11px/1.3 var(--fonts--body); letter-spacing: var(--text-spacing--medium); text-transform: uppercase; color: var(--colors--muted); padding: 0 12px 8px 0; border-bottom: 1px solid var(--colors--line); }
.b-colors td { padding: 0 12px 0 0; border-bottom: 1px solid var(--colors--line); font-variant-numeric: tabular-nums; }
.b-colors .swatch { display: block; width: 72px; height: 40px; border: 1px solid rgba(17, 17, 17, 0.08); }
.b-colors .sw-name { font-weight: 400; color: var(--colors--night-sky); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 700px) { .b-colors table { font-size: 12px; } .b-colors .swatch { width: 40px; } }

/* Lab notes at the top of a rebuilt page (open questions; never shipped) */
.lab-page-note .lab-mark { text-transform: none; letter-spacing: 0; font-size: 12.5px; }

/* Header below 1280 px: the centred links would meet the buttons (24 px clear space minimum), so links and buttons move into the menu */
@media (max-width: 1279px) {
  /* The menu (2026-11-10, Johan: "for the mobile menu, lets make sure to add smoothing for the opening and more
     styling to match the rest of the site"): a panel that fills the screen below the header, sections in the
     heading face with a rule between them, Contact and Become a Licensee as the site's pills. It fades and slides in,
     its rows follow one after another; reduced motion shows it at once. */
  .topnav {
    --m-bg: #fff; --m-ink: var(--colors--night-sky); --m-line: var(--colors--line); --m-on: var(--colors--pan-am-blue);
    display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 0 12px;
    position: absolute; top: 100%; left: 0; right: 0; transform: translateY(-12px);
    height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px var(--gutter) calc(32px + env(safe-area-inset-bottom)); background: var(--m-bg); border-top: 1px solid var(--m-line);
    white-space: normal; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.28s ease, transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.38s;
  }
  body.menu-open .topnav { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 0.28s ease, transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s; }
  body.menu-open { overflow: hidden; }
  .topnav a:not(.menu-only) {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
    font: 400 clamp(26px, 7vw, 40px)/1.1 var(--fonts--heading); letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--m-ink); padding: 18px 0; border-radius: 0; border-bottom: 1px solid var(--m-line); background: none;
  }
  .topnav a:not(.menu-only)::after { content: "\2192"; font: 300 20px/1 var(--fonts--body); opacity: 0.45; transition: transform 0.2s ease, opacity 0.2s ease; }
  .topnav a:not(.menu-only):hover, .topnav a:not(.menu-only):focus-visible { background: none; color: var(--m-on); }
  .topnav a:not(.menu-only):hover::after { transform: translateX(4px); opacity: 1; }
  .topnav a.on, body.home .topnav a.on { background: none; color: var(--m-on); }
  .topnav a.on::after { opacity: 1; }
  .topnav .menu-only { display: flex; align-items: center; justify-content: center; margin-top: 28px; padding: 15px 12px; border-radius: 999px; border: 1px solid var(--colors--pan-am-blue); color: var(--colors--pan-am-blue); background: transparent; font: 500 11px/1 var(--fonts--body); letter-spacing: 1.5px; text-transform: uppercase; text-align: center; }
  .topnav a.menu-only.primary { background: var(--colors--pan-am-blue); border-color: var(--colors--pan-am-blue); color: #fff; }
  .topnav > * { opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
  body.menu-open .topnav > * { opacity: 1; transform: none; }
  body.menu-open .topnav > :nth-child(1) { transition-delay: 0.04s; } body.menu-open .topnav > :nth-child(2) { transition-delay: 0.08s; }
  body.menu-open .topnav > :nth-child(3) { transition-delay: 0.12s; } body.menu-open .topnav > :nth-child(4) { transition-delay: 0.16s; }
  body.menu-open .topnav > :nth-child(5) { transition-delay: 0.2s; } body.menu-open .topnav > :nth-child(n+6) { transition-delay: 0.24s; }
  .topactions { display: none; }
  .menu-btn { display: inline-flex; align-items: center; gap: 10px; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
  .menu-btn .mi { position: relative; width: 14px; height: 8px; }
  .menu-btn .mi::before, .menu-btn .mi::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), top 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .menu-btn .mi::before { top: 0; } .menu-btn .mi::after { top: calc(100% - 1.5px); }
  body.menu-open .menu-btn .mi::before { top: calc(50% - 0.75px); transform: rotate(45deg); }
  body.menu-open .menu-btn .mi::after { top: calc(50% - 0.75px); transform: rotate(-45deg); }
  /* Light on every page (Johan, 2026-11-10: "for the mobile menu styling, make sure we use light colors"): a white
     panel with Night Sky type, Pan Am Blue for the current section and the pills. On the home page the header stays on
     the photograph and the white panel opens below it; elsewhere the header turns white with it. */
  body.home .topnav { --m-bg: #fff; --m-ink: var(--colors--night-sky); --m-line: var(--colors--line); --m-on: var(--colors--pan-am-blue); }
  body.home .topnav a:not(.menu-only) { color: var(--m-ink); }
  body.home .topnav a.on { color: var(--m-on); }
  body.home .topnav a:not(.menu-only):hover, body.home .topnav a:not(.menu-only):focus-visible { color: var(--m-on); background: none; }
  body.home .topnav .menu-only { border-color: var(--colors--pan-am-blue); color: var(--colors--pan-am-blue); }
  body.home .topnav a.menu-only.primary { background: var(--colors--pan-am-blue); border-color: var(--colors--pan-am-blue); color: #fff; }
  body.home .topnav { border-top: 0; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.35); }
  body:not(.home).menu-open .topbar { background: #fff; }
}
@media (max-width: 1279px) and (prefers-reduced-motion: reduce) {
  .topnav, body.menu-open .topnav, .topnav > *, .menu-btn .mi::before, .menu-btn .mi::after { transition: none !important; transform: none; }
}

/* Registration marks: small and raised in body type; Advercase draws its own raised ® in headings */
.reg { font-size: 0.6em; vertical-align: 0.6em; line-height: 0; margin-left: 0.05em; }
h1 .reg, h2 .reg, h3 .reg, .page-title .reg, .b-heading .reg, .tile-title .reg { font-size: inherit; vertical-align: baseline; margin-left: 0; }
.tiles-note { grid-column: 1 / -1; text-align: left; margin: 0; }

/* Our Brands */
.brand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.brand-card { border: 1px solid var(--colors--line); border-radius: var(--shop--radius); overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.brand-logo { background: var(--colors--pan-am-blue); height: 132px; display: flex; align-items: center; justify-content: center; padding: 0 12%; }
.brand-logo img { max-height: 44px; width: auto; max-width: 100%; }
.brand-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.brand-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.brand-head h3 { font: 400 17px/1.3 var(--fonts--body); color: var(--colors--night-sky); margin: 0; }
.brand-status { font: 500 10.5px/1 var(--fonts--body); letter-spacing: 1px; text-transform: uppercase; color: var(--colors--pan-am-blue); border: 1px solid var(--colors--pan-am-blue); border-radius: 999px; padding: 5px 9px; white-space: nowrap; }
.brand-body p { margin: 0; font-size: 15px; line-height: 1.5; }
.brand-link { margin-top: auto; padding-top: 6px; font-size: 14px; }
.brand-body .lab-mark { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
@media (max-width: 600px) { .brand-grid { grid-template-columns: 1fr; } }

/* ===== Interior layouts (lab: Layout in the edit bar; "current" is the layout above) =====
   All three share a tighter scale: 40 px page titles (48 in Showcase) instead of 56, 24 px section
   heads, 16 px body, 20 px between blocks instead of 28. */
body:is([data-layout="handbook"], [data-layout="showcase"], [data-layout="index"]) {
  .shell { padding-top: 8px; padding-bottom: 96px; }
  .crumb { margin-bottom: 6px; }
  .page-title { font-size: 40px; margin-bottom: 20px; }
  .rich h1, .rich h2.rich-h1 { font-size: 26px; }
  .rich h2, .b-heading.h2 { font-size: 24px; }
  .rich h3, .b-heading.h3 { font-size: 18px; }
  .rich h4, .b-heading.h4 { font-size: 15px; }
  .rich h1, .rich h2, .rich h3, .rich h4, .b-heading { margin: 1.1em 0 0.4em; }
  .rich p, .rich li { font-size: 16px; line-height: 1.6; }
  .rich .lead { font-size: 18px; }
  .block, .row { margin-bottom: 20px; }
  .b-divider { margin: 28px 0; }
  .b-image img { max-height: 520px; object-fit: contain; }
  .card img { aspect-ratio: 3 / 2; }
  .card-title { font-size: 15px; }
  .pager { margin-top: 40px; }
  .page-meta { margin-top: 32px; }
}

/* Handbook: one sidebar for the whole hub, a wider reading column (about 860 px at 1440) */
body[data-layout="handbook"] .shell { grid-template-columns: 240px minmax(0, 1fr) 200px; gap: 40px; max-width: 1440px; padding-left: 32px; padding-right: 32px; }
body[data-layout="handbook"] .main > .page { max-width: 900px; }
.sidebar a[aria-current="page"] { background: var(--colors--seasalt); color: var(--colors--pan-am-blue); }

/* Showcase: no side columns; the section's pages as tabs, this page's sections as a sticky chip row;
   text keeps a 760 px reading measure while images, cards and grids run the full 1100 px */
body[data-layout="showcase"] .shell { grid-template-columns: minmax(0, 1fr); max-width: 1180px; padding-left: 32px; padding-right: 32px; }
body[data-layout="showcase"] .sidebar, body[data-layout="showcase"] .toc { display: none; }
body[data-layout="showcase"] .main > .page { max-width: none; }
body[data-layout="showcase"] .page-title { font-size: 48px; }
.section-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.section-tabs a { font: 400 13px/1 var(--fonts--body); color: var(--colors--text); text-decoration: none; padding: 9px 14px; border: 1px solid var(--colors--line); border-radius: 999px; }
.section-tabs a:hover { border-color: var(--colors--pan-am-blue); color: var(--colors--pan-am-blue); }
.section-tabs a[aria-current="page"] { background: var(--colors--pan-am-blue); border-color: var(--colors--pan-am-blue); color: #fff; }
.chips { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; margin: 0 0 20px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--colors--line); scrollbar-width: none; }
.chips a { flex: none; font: 400 13px/1 var(--fonts--body); color: var(--colors--text); text-decoration: none; padding: 8px 12px; border-radius: 999px; background: var(--colors--seasalt); }
.chips a:hover { color: var(--colors--pan-am-blue); }
body[data-layout="showcase"] .b-text .rich > :is(p, ul, ol, blockquote, h3, h4) { max-width: 760px; }
body[data-layout="showcase"] .b-image img { max-height: 640px; }
body[data-layout="showcase"] .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-layout="showcase"] { scroll-padding-top: 64px; }
body[data-layout="showcase"] .b-heading { scroll-margin-top: 64px; }

/* Index: a contents grid of the page's sections, then each section folded until opened */
body[data-layout="index"] .shell { grid-template-columns: 240px minmax(0, 1fr) 200px; gap: 40px; max-width: 1440px; padding-left: 32px; padding-right: 32px; }
body[data-layout="index"] .main > .page { max-width: 900px; }
.contents { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin: 4px 0 28px; }
.contents-card { display: flex; flex-direction: column; border: 1px solid var(--colors--line); border-radius: var(--shop--radius); overflow: hidden; text-decoration: none; background: #fff; }
.contents-card img, .contents-noimg { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; padding: 8px; background: var(--colors--seasalt); display: block; }
.contents-title { padding: 10px 12px; font: 400 14px/1.3 var(--fonts--body); color: var(--colors--night-sky); }
.contents-card:hover .contents-title { color: var(--colors--pan-am-blue); }
details.fold { border-top: 1px solid var(--colors--line); }
details.fold:last-of-type { border-bottom: 1px solid var(--colors--line); }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "+"; font: 300 26px/1 var(--fonts--body); color: var(--colors--pan-am-blue); }
details.fold[open] > summary::after { content: "\2212"; }
details.fold > summary .b-heading { margin: 0; }
.fold-body { padding: 4px 0 24px; }

@media (max-width: 1180px) {
  body:is([data-layout="handbook"], [data-layout="index"]) .shell { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 860px) {
  body:is([data-layout="handbook"], [data-layout="index"]) .shell { grid-template-columns: minmax(0, 1fr); }
  body[data-layout="showcase"] .brand-grid { grid-template-columns: 1fr; }
}
.chips .chips-label { flex: none; align-self: center; font: 500 10.5px/1 var(--fonts--body); letter-spacing: var(--text-spacing--large); text-transform: uppercase; color: var(--colors--muted); margin-right: 4px; }
.chips a { background: transparent; border: 1px solid var(--colors--line); }

/* Finding things: hub search on top of the sidebar, and an outline that follows the reader */
.search-wrap { position: relative; margin: 0 0 18px; }
.hub-search { width: 100%; font: 400 14px/1 var(--fonts--body); color: var(--colors--night-sky); padding: 10px 14px; border: 1px solid var(--colors--line); border-radius: 999px; background: var(--colors--seasalt); outline: none; }
.hub-search:focus { border-color: var(--colors--pan-am-blue); background: #fff; }
.search-results { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(420px, 80vw); max-height: 60vh; overflow: auto; background: #fff; border: 1px solid var(--colors--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(18, 20, 23, 0.12); padding: 6px; }
.search-results[hidden] { display: none; }
.search-results a { display: block; padding: 9px 10px; margin: 0; border-radius: 8px; text-decoration: none; }
.search-results a:hover, .search-results a:focus { background: var(--colors--seasalt); }
.sr-where { display: block; font: 500 11px/1.3 var(--fonts--body); letter-spacing: 0.5px; color: var(--colors--pan-am-blue); }
.sr-text { display: block; font-size: 13px; line-height: 1.4; color: var(--colors--text); margin-top: 3px; }
.sr-none { font-size: 13px; color: var(--colors--muted); padding: 8px 10px; margin: 0; }
.toc { max-height: calc(100vh - 48px); overflow: auto; }
.toc a.sub { padding-left: 24px; font-size: 12.5px; color: var(--colors--muted); }
.toc a.now { color: var(--colors--pan-am-blue); border-left-color: var(--colors--pan-am-blue); }

/* Image heights (2026-11-05): no image taller than 440 px or 55% of the screen; tall images shrink
   and centre instead of filling the column or sitting in grey letterbox bars */
body:is([data-layout="handbook"], [data-layout="showcase"], [data-layout="index"]) {
  /* Every image keeps the column width; height is capped. Photos outside Visual Identity that are
     1.3:1 or wider fill the frame (trimmed top and bottom); diagrams and squarer images are shown
     whole on a light panel. Revised 2026-11-05 after the first cap narrowed images. */
  .b-image img, .b-text-image img, .b-grid img { width: 100%; height: auto; max-height: min(520px, 65vh); object-fit: contain; background: var(--colors--seasalt); margin: 0; }
  .page:not([data-doc="visual-identity"]) :is(.b-image, .b-text-image, .b-grid) img.wide { object-fit: cover; background: none; }
  .card img { max-height: 300px; }
}

/* Brand cards with a photo: taller image panel, the logo over a dark shade so it reads on any picture */
.brand-logo.has-photo { position: relative; height: 210px; background-size: cover; background-position: center; }
.brand-logo.has-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 20, 23, 0.35) 0%, rgba(18, 20, 23, 0.6) 100%); }
.brand-logo.has-photo img { position: relative; z-index: 1; max-height: 48px; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35)); }

/* Sidebar groups after the section's own pages (Our Brands in Brand): set apart below a rule */
.sidebar .side-group { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--colors--line); }
.sidebar .side-group h3 { margin: 0 0 6px; }
.sidebar a.group-link { display: flex; align-items: center; justify-content: space-between; font-weight: 500; color: var(--colors--night-sky); }
.sidebar a.group-link::after { content: "\2192"; font-weight: 300; color: var(--colors--muted); }
.sidebar a.group-link.on, .sidebar a.group-link:hover { color: var(--colors--pan-am-blue); }
.sidebar a.group-link.on::after, .sidebar a.group-link:hover::after { color: var(--colors--pan-am-blue); }

/* Sub-headings inside page text ("Discover brand applications"): Neue Einstellung in spaced capitals
   (Johan, 2026-11-05). Section headings that make up "On this page" (.b-heading) stay in Advercase. */
.rich :is(h1, h2, h3, h4),
body:is([data-layout="handbook"], [data-layout="showcase"], [data-layout="index"]) .rich :is(h1, h2, h3, h4) {
  font-family: var(--fonts--body); font-weight: 500; text-transform: uppercase; letter-spacing: 2px;
  color: var(--colors--night-sky); line-height: 1.35; margin: 1.6em 0 0.6em;
}
.rich h1, body:is([data-layout="handbook"], [data-layout="showcase"], [data-layout="index"]) :is(.rich h1, .rich h2.rich-h1) { font-size: 20px; }
.rich h2, body:is([data-layout="handbook"], [data-layout="showcase"], [data-layout="index"]) .rich h2 { font-size: 17px; }
.rich h3, body:is([data-layout="handbook"], [data-layout="showcase"], [data-layout="index"]) .rich h3 { font-size: 14.5px; letter-spacing: 1.8px; }
.rich h4, body:is([data-layout="handbook"], [data-layout="showcase"], [data-layout="index"]) .rich h4 { font-size: 13px; letter-spacing: 1.5px; }
.rich :is(h1, h2, h3, h4) .reg { font-size: 0.6em; vertical-align: 0.6em; }

/* ===== Manifesto: alternative layouts (lab) ===== */
.lab-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 22px; padding: 8px 10px; border: 1px dashed var(--lab--mark); border-radius: 10px; background: var(--lab--mark-bg); font-size: 12.5px; }
.lab-switch span { color: var(--lab--mark); font-weight: 500; letter-spacing: 0.5px; margin-right: 6px; }
.lab-switch a { text-decoration: none; color: var(--colors--text); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--colors--line); background: #fff; }
.lab-switch a[aria-current] { background: var(--colors--pan-am-blue); border-color: var(--colors--pan-am-blue); color: #fff; }
body.marks-off .lab-switch { display: none; }

.manifesto p { margin: 0; white-space: pre-line; }
.manifesto .m-title { font: 400 13px/1.3 var(--fonts--body); letter-spacing: 3px; text-transform: uppercase; margin: 0 0 14px; }
.manifesto .m-quote { font: 400 clamp(30px, 4vw, 52px)/1.08 var(--fonts--heading); }
.manifesto .m-quote em { font-style: normal; }
.manifesto .t-num { font: 400 15px/1 var(--fonts--body); letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.manifesto .t-head { display: block; font: 400 24px/1.15 var(--fonts--heading); text-transform: uppercase; letter-spacing: 0.3px; }
.manifesto .t-sub, .manifesto .t-more { display: block; font: 300 16px/1.55 var(--fonts--body); margin-top: 8px; }
.manifesto .t-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.manifesto .t-chip { font: 500 12px/1 var(--fonts--body); letter-spacing: 1.5px; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; }
.manifesto .m-closing { font: 400 clamp(26px, 3vw, 38px)/1.1 var(--fonts--heading); text-transform: uppercase; text-align: center; }

/* Statement: a dark poster, the tenets set large, one per row */
.m-statement { background: var(--colors--night-sky); color: var(--colors--seasalt); border-radius: var(--shop--radius-xl); padding: clamp(28px, 5vw, 64px); }
.m-statement .m-title { color: var(--colors--clipper-silver); }
.m-statement .m-quote { color: #fff; margin-bottom: 40px; }
.m-statement .tenet { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid rgba(247, 247, 247, 0.14); }
.m-statement .t-num { color: var(--colors--terminal-gold); padding-top: 6px; }
.m-statement .t-head { color: #fff; font-size: clamp(24px, 2.6vw, 34px); }
.m-statement .t-sub, .m-statement .t-more { color: rgba(247, 247, 247, 0.72); }
.m-statement .t-chip { border: 1px solid rgba(247, 247, 247, 0.3); color: #fff; }
.m-statement .m-closing { color: #fff; margin-top: 36px; padding-top: 36px; border-top: 1px solid rgba(247, 247, 247, 0.14); }

/* Grid: numbered cards, two across */
.m-grid .m-head { text-align: center; padding: 8px 0 32px; }
.m-grid .m-quote { color: var(--colors--night-sky); }
.m-grid .m-tenets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.m-grid .tenet { border: 1px solid var(--colors--line); border-radius: var(--shop--radius); padding: 22px 22px 24px; background: #fff; }
.m-grid .t-num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--colors--pan-am-blue); color: #fff; font-size: 13px; letter-spacing: 1px; margin-bottom: 16px; }
.m-grid .t-head { color: var(--colors--night-sky); font-size: 22px; }
.m-grid .t-chip { background: var(--colors--seasalt); color: var(--colors--night-sky); }
.m-grid .tenet:nth-child(7) { grid-column: 1 / -1; }
.m-grid .m-closing { margin-top: 28px; padding: 36px 20px; background: var(--colors--pan-am-blue); color: #fff; border-radius: var(--shop--radius); }

/* Timeline: the tenets along a line with numbered markers */
.m-timeline .m-head { padding-bottom: 28px; }
.m-timeline .m-quote { color: var(--colors--night-sky); }
.m-timeline .m-tenets { position: relative; padding-left: 64px; }
.m-timeline .m-tenets::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: var(--colors--line); }
.m-timeline .tenet { position: relative; padding: 0 0 34px; }
.m-timeline .t-num { position: absolute; left: -64px; top: -6px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--colors--pan-am-blue); color: var(--colors--pan-am-blue); font-size: 13px; letter-spacing: 1px; }
.m-timeline .t-head { color: var(--colors--night-sky); font-size: 22px; }
.m-timeline .t-chip { background: var(--colors--seasalt); color: var(--colors--night-sky); }
.m-timeline .m-closing { color: var(--colors--pan-am-blue); margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--colors--line); }

@media (max-width: 700px) {
  .m-grid .m-tenets { grid-template-columns: 1fr; }
  .m-statement .tenet { grid-template-columns: 1fr; gap: 6px; }
}

/* Manifesto lab bar: two rows (layout, quote) and a hint */
.lab-switch { flex-direction: column; align-items: stretch; }
.lab-switch .ls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lab-switch .ls-row span { min-width: 92px; }
.lab-switch .ls-hint { font-size: 11.5px; color: var(--colors--muted); }

/* Original Manifesto, tighter (2026-11-09): lines under a tenet sit close, each tenet opens with space */
.manifesto-original .rich p { margin: 0 0 4px; }
.manifesto-original .rich p.m-num { margin-top: 22px; }
.manifesto-original .m-lead { font-weight: 500; color: var(--colors--night-sky); }
.manifesto-original .m-rest { display: block; margin-top: 4px; font-weight: 300; color: var(--colors--text); }
.manifesto-original .rich p.m-num:first-child { margin-top: 0; }
.manifesto-original .rich blockquote { margin: 0.4em 0 1em; }
/* the alternative layouts, slightly tighter too */
.m-statement .tenet { padding: 18px 0; }
.m-timeline .tenet { padding-bottom: 24px; }
.m-grid .m-tenets { gap: 12px; }
.manifesto .t-sub, .manifesto .t-more { margin-top: 4px; }

/* Quote designs */
.q-head { margin: 0 0 28px; }
.q-head p { margin: 0; white-space: pre-line; }
.q-head .q-title { font: 500 12px/1.3 var(--fonts--body); letter-spacing: 3px; text-transform: uppercase; }
.q-head .q-text { font: 400 clamp(32px, 4.4vw, 60px)/1.05 var(--fonts--heading); }
.q-head .q-text em { font-style: normal; }
.q-band { position: relative; border-radius: var(--shop--radius-xl); overflow: hidden; background-size: cover; background-position: center 35%; min-height: 340px; display: flex; align-items: flex-end; }
.q-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 20, 23, 0.1) 0%, rgba(18, 20, 23, 0.7) 100%); }
.q-band .q-inner { position: relative; padding: clamp(24px, 4vw, 44px); }
.q-band .q-title { color: rgba(247, 247, 247, 0.8); margin-bottom: 10px; }
.q-band .q-text { color: #fff; }
.q-panel { background: var(--colors--pan-am-blue); color: #fff; border-radius: var(--shop--radius-xl); padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px); text-align: center; }
.q-panel .q-globe { width: 56px; height: 56px; margin: 0 auto 18px; }
.q-panel .q-title { color: rgba(255, 255, 255, 0.8); margin-bottom: 12px; }
.q-panel .q-text { color: #fff; }
.q-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0; border: 1px solid var(--colors--line); border-radius: var(--shop--radius-xl); overflow: hidden; }
.q-split .q-words { padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 12px; background: var(--colors--seasalt); }
.q-split .q-title { color: var(--colors--pan-am-blue); }
.q-split .q-text { color: var(--colors--night-sky); font-size: clamp(30px, 3.6vw, 48px); }
.q-split .q-pic { min-height: 280px; background-size: cover; background-position: center; }
.q-marquee { padding: 8px 0 12px; }
.q-marquee .q-rule { display: block; width: 72px; height: 3px; background: var(--colors--terminal-gold); margin-bottom: 18px; }
.q-marquee .q-title { color: var(--colors--muted); margin-bottom: 14px; }
.q-marquee .q-text { color: var(--colors--night-sky); font-size: clamp(44px, 6.4vw, 88px); line-height: 0.98; text-transform: uppercase; letter-spacing: -0.5px; }
/* inside the dark Statement layout, keep the quote light */
.m-statement .q-split .q-words { background: transparent; }
.m-statement .q-split, .m-statement .q-head { border-color: rgba(247, 247, 247, 0.14); }
.m-statement .q-split .q-text, .m-statement .q-marquee .q-text { color: #fff; }
@media (max-width: 700px) { .q-split { grid-template-columns: 1fr; } .q-split .q-pic { min-height: 200px; } }

/* Card images (2026-11-09): shown whole at their own shape, as on Frontify, never cropped to a fixed
   frame; capped at 320 px tall. Line drawings (Logo in Use, Iconography) were losing up to a third. */
.card img,
body:is([data-layout="handbook"], [data-layout="showcase"], [data-layout="index"]) .card img {
  aspect-ratio: auto; width: 100%; height: auto; max-height: 320px; object-fit: contain;
}

/* ===== Consistent type (2026-11-09) ===== */
/* Card labels: one style whether stored as a title, a short line or in bold */
.card .card-title, .brand-head h3 { font: 500 16px/1.35 var(--fonts--body); color: var(--colors--night-sky); margin: 0; text-transform: none; letter-spacing: 0; }
.card .card-title strong, .card .card-title em { font-weight: inherit; font-style: normal; color: inherit; }
/* Card body text: 15 px everywhere, light, body colour */
.card .rich p, .card .rich li, .brand-body p { font-size: 15px; line-height: 1.55; font-weight: 300; color: var(--colors--text); }
.card .rich p.small { font-size: 15px; }
/* Small capital labels were coming out at 16 px; 12 px grey, everywhere */
.rich p.eyebrow, body:is([data-layout="handbook"], [data-layout="showcase"], [data-layout="index"]) .rich p.eyebrow { font: 500 12px/1.4 var(--fonts--body); letter-spacing: var(--text-spacing--large); text-transform: uppercase; color: var(--colors--muted); }
/* Timeline text matches body text */
.timeline li, .timeline .rich p { font-size: 16px; }
/* Links inside body text: same blue, normal weight */
.rich a { color: var(--colors--pan-am-blue); font-weight: inherit; }

/* ===== Card hovers (lab: Hover in the edit bar) ===== */
.card-media { display: block; overflow: hidden; border-radius: var(--shop--radius); }
.card-media img { display: block; border-radius: 0; transition: transform var(--dur-base) var(--ease-out); }
.card.is-link, .contents-card, .tile { transition: transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out); }
.card.is-link .card-title { transition: color var(--dur-quick); }
a.card:hover .rich, a.card:hover .card-title { color: inherit; }
/* None: label turns blue only */
body[data-hover="none"] a.card:hover .card-title { color: var(--colors--pan-am-blue); }
/* Lift: the card rises with a soft shadow */
body[data-hover="lift"] a.card:hover, body[data-hover="lift"] .contents-card:hover { transform: translateY(-4px); }
body[data-hover="lift"] a.card:hover .card-media, body[data-hover="lift"] .contents-card:hover { box-shadow: 0 14px 30px rgba(18, 20, 23, 0.14); }
body[data-hover="lift"] a.card:hover .card-title { color: var(--colors--pan-am-blue); }
/* Zoom: the picture moves closer inside its frame */
body[data-hover="zoom"] a.card:hover .card-media img, body[data-hover="zoom"] .contents-card:hover img, body[data-hover="zoom"] .tile:hover img { transform: scale(1.05); }
body[data-hover="zoom"] .tile img { transition: transform var(--dur-base) var(--ease-out); }
body[data-hover="zoom"] a.card:hover .card-title { color: var(--colors--pan-am-blue); }
/* Underline: the label underlines and an arrow slides in */
body[data-hover="underline"] a.card .card-title::after { content: " \2192"; display: inline-block; opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-quick), transform var(--dur-quick) var(--ease-out); }
body[data-hover="underline"] a.card:hover .card-title { color: var(--colors--pan-am-blue); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
body[data-hover="underline"] a.card:hover .card-title::after { opacity: 1; transform: translateX(0); }
/* Tint: a Pan Am Blue wash over the picture, the label turns blue */
body[data-hover="tint"] .card-media { position: relative; }
body[data-hover="tint"] .card-media::after { content: ""; position: absolute; inset: 0; background: var(--colors--pan-am-blue); opacity: 0; transition: opacity var(--dur-quick); }
body[data-hover="tint"] a.card:hover .card-media::after { opacity: 0.18; }
body[data-hover="tint"] a.card:hover .card-title { color: var(--colors--pan-am-blue); }
@media (prefers-reduced-motion: reduce) { .card-media img, .card.is-link, .contents-card, .tile { transition: none !important; } }
.brand-head h3, body:is([data-layout="handbook"], [data-layout="showcase"], [data-layout="index"]) .brand-head h3 { font-size: 15px; }

/* ===== Visual pages (Licensing, 2026-11-09: "less copy and more showcase") ===== */
.main > .page.page-visual { max-width: 1040px; }
/* Hero: the page title and one line over a photograph, with the page's two buttons */
.feature-hero { position: relative; min-height: 440px; display: flex; align-items: flex-end; border-radius: var(--shop--radius-xl); overflow: hidden; background: var(--colors--night-sky) center / cover no-repeat; margin: 0 0 20px; }
.feature-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 20, 23, 0.82) 0%, rgba(18, 20, 23, 0.55) 45%, rgba(18, 20, 23, 0) 75%), linear-gradient(180deg, rgba(18, 20, 23, 0) 40%, rgba(18, 20, 23, 0.45) 100%); }
.fh-inner { position: relative; padding: 40px; max-width: 640px; color: #fff; }
.fh-crumb { font: 500 12px/1.4 var(--fonts--body); letter-spacing: var(--text-spacing--large); text-transform: uppercase; color: rgba(255, 255, 255, 0.8); margin: 0 0 10px; }
.feature-hero .page-title { color: #fff; margin: 0 0 12px; }
.fh-text { font: 300 18px/1.5 var(--fonts--body); color: #fff; margin: 0 0 22px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions .btn { font: 500 11px/1 var(--fonts--body); letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--colors--pan-am-blue); color: var(--colors--pan-am-blue); background: #fff; white-space: nowrap; }
.actions .btn.primary { background: var(--colors--pan-am-blue); color: #fff; }
.actions .btn:hover { background: var(--colors--seasalt); }
.actions .btn.primary:hover { background: var(--colors--worldport-blue); border-color: var(--colors--worldport-blue); }
.feature-hero .btn { border-color: rgba(255, 255, 255, 0.8); color: #fff; background: transparent; }
.feature-hero .btn.primary { background: #fff; border-color: #fff; color: var(--colors--pan-am-blue); }
.feature-hero .btn:hover { background: rgba(255, 255, 255, 0.14); }
.feature-hero .btn.primary:hover { background: var(--colors--seasalt); }

/* Every licensee's name on one moving band */
.roster-strip { display: flex; align-items: center; gap: 24px; overflow: hidden; text-decoration: none; color: var(--colors--text); border-top: 1px solid var(--colors--line); border-bottom: 1px solid var(--colors--line); padding: 14px 0; margin: 0 0 8px; }
.rs-count { flex: none; font: 400 13px/1 var(--fonts--body); letter-spacing: var(--text-spacing--medium); text-transform: uppercase; color: var(--colors--muted); }
.rs-count strong { font: 400 28px/1 var(--fonts--heading); color: var(--colors--pan-am-blue); margin-right: 6px; letter-spacing: 0; }
.rs-track { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rs-run { display: flex; flex: none; gap: 28px; padding-right: 28px; animation: rs-move 90s linear infinite; }
.rs-run span { white-space: nowrap; font: 400 15px/1 var(--fonts--body); color: var(--colors--night-sky); }
.roster-strip:hover .rs-run { animation-play-state: paused; }
.roster-strip:hover .rs-count { color: var(--colors--pan-am-blue); }
@keyframes rs-move { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .rs-run { animation: none; } }

/* Featured licensees: big photographs filling their frame, the name and one line under them */
.cards-showcase { gap: 28px 20px; }
.cards-showcase .card-media { aspect-ratio: 4 / 3; background: var(--colors--seasalt); }
.cards-showcase .card img, body:is([data-layout="handbook"], [data-layout="showcase"], [data-layout="index"]) .cards-showcase .card img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.cards-showcase .card-title { margin-top: 12px; }
.cards-showcase .rich p { margin: 2px 0 0; color: var(--colors--muted); }
/* Two ways to work with us: image above, title and one line */
.cards-panels { gap: 20px; }
.cards-panels .card { background: var(--colors--seasalt); border-radius: var(--shop--radius-xl); padding: 14px 14px 22px; }
.cards-panels .card-media { aspect-ratio: 16 / 9; }
.cards-panels .card img, body:is([data-layout="handbook"], [data-layout="showcase"], [data-layout="index"]) .cards-panels .card img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.cards-panels .card-title { margin: 16px 8px 4px; font-size: 18px; }
.cards-panels .rich { padding: 0 8px; }

/* Moments: a row of dated photographs, scrolling sideways on small screens */
.moments { list-style: none; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
.moment { display: flex; flex-direction: column; text-decoration: none; color: inherit; scroll-snap-align: start; }
.moment .card-media { aspect-ratio: 3 / 4; background: var(--colors--seasalt); }
.moment img { width: 100%; height: 100%; object-fit: cover; }
.m-year { font: 400 26px/1 var(--fonts--heading); color: var(--colors--pan-am-blue); margin: 14px 0 6px; }
.moment .card-title { font: 500 15px/1.35 var(--fonts--body); color: var(--colors--night-sky); }
.m-text { font: 300 14px/1.5 var(--fonts--body); color: var(--colors--muted); margin-top: 4px; }
body[data-hover="zoom"] a.moment:hover img { transform: scale(1.05); }
a.moment:hover .card-title { color: var(--colors--pan-am-blue); }

/* Apply: the poster beside four numbered steps, the button and the files */

/* Our Licensees: every current licensee, filterable by category */
.dir-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.dir-chips button { font: 400 13px/1 var(--fonts--body); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--colors--line); background: #fff; color: var(--colors--text); cursor: pointer; }
.dir-chips button[aria-pressed="true"] { background: var(--colors--pan-am-blue); border-color: var(--colors--pan-am-blue); color: #fff; }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 16px; }
.dir-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.dir-card .card-media { aspect-ratio: 1; background: var(--colors--seasalt); display: grid; place-items: center; }
.dir-card .card-media img { width: 100%; height: 100%; object-fit: cover; }
.dir-card .card-title { font: 500 15px/1.3 var(--fonts--body); color: var(--colors--night-sky); margin-top: 10px; }
.dir-cat { font: 300 13px/1.4 var(--fonts--body); color: var(--colors--muted); margin-top: 2px; }
a.dir-card:hover .card-title { color: var(--colors--pan-am-blue); }
body[data-hover="zoom"] a.dir-card:hover img { transform: scale(1.05); }
.dir-updated { font: 300 13px/1.4 var(--fonts--body); color: var(--colors--muted); margin-top: 16px; }

@media (max-width: 760px) {
  .feature-hero { min-height: 380px; }
  .fh-inner { padding: 24px; }
  .moments { grid-auto-columns: 70%; }
  .b-cards.cards-showcase, .b-cards.cards-panels { grid-template-columns: 1fr !important; }
}

/* Key facts (Licensing, from the Pan Am Shop, 2026-11-09) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 8px 0 20px; }
.stat { background: var(--colors--seasalt); border-radius: var(--shop--radius); padding: 22px 24px; margin: 0; }
.stat-value { font: 400 40px/1 var(--fonts--heading); color: var(--colors--pan-am-blue); margin: 0 0 8px; }
.stat-label { font: 500 12px/1.4 var(--fonts--body); letter-spacing: var(--text-spacing--large); text-transform: uppercase; color: var(--colors--muted); margin: 0; }
.rs-count { font-weight: 500; font-size: 12px; letter-spacing: var(--text-spacing--large); }
/* What we license: the shop's six categories as labels */
.steps-cats { margin: 0 0 22px; }
.steps-cats-label { font: 500 12px/1.4 var(--fonts--body); letter-spacing: var(--text-spacing--large); text-transform: uppercase; color: var(--colors--muted); margin: 0 0 10px; }
.steps-cats ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.steps-cats li { font: 400 13px/1 var(--fonts--body); padding: 9px 14px; border-radius: 999px; background: var(--colors--seasalt); color: var(--colors--night-sky); }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 14px 12px; }
  .stat-value { font-size: 28px; }
  .stat-label { font-size: 10px; letter-spacing: var(--text-spacing--medium); }
}

/* ===== Apply: five designs (lab: ?apply=poster|row|panel|split|cards), 2026-11-09 ===== */
.steps-wrap .lab-switch { margin: 0 0 18px; }
.st-list { list-style: none; padding: 0; margin: 0; }
.st-list > li { position: relative; display: flex; flex-direction: column; }
.st-num { font: 500 14px/34px var(--fonts--body); width: 34px; height: 34px; border-radius: 50%; background: var(--colors--pan-am-blue); color: #fff; text-align: center; flex: none; }
.st-list .card-title { font: 500 16px/1.35 var(--fonts--body); color: var(--colors--night-sky); }
.step-text { font: 300 15px/1.55 var(--fonts--body); color: var(--colors--text); margin-top: 2px; }
.steps-files ul { list-style: none; padding: 0; margin: 0; border: 1px solid var(--colors--line); border-radius: var(--shop--radius); background: #fff; }
.steps-files li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; font: 400 14px/1.4 var(--fonts--body); color: var(--colors--night-sky); }
.steps-files li + li { border-top: 1px solid var(--colors--line); }
.sf-meta { color: var(--colors--muted); white-space: nowrap; }
.steps-files .lab-mark { margin-top: 8px; }
.st-cta-title { font: 400 30px/1.1 var(--fonts--heading); text-transform: uppercase; color: var(--colors--night-sky); margin: 0 0 10px; }
.st-cta-text { font: 300 16px/1.55 var(--fonts--body); color: var(--colors--text); margin: 0 0 20px; }
.steps .actions { margin: 0 0 18px; }

/* Poster: the poster beside the steps (the first design) */
.st-poster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; }
.st-poster .steps-image img { width: 100%; height: auto; max-height: none; border-radius: var(--shop--radius); }
.st-poster .st-list { margin-bottom: 24px; }
.st-poster .st-list > li { padding: 0 0 18px 52px; }
.st-poster .st-num { position: absolute; left: 0; top: -6px; }
.st-poster .st-list > li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: 2px; width: 1px; background: var(--colors--line); }

/* Row: the four steps across on one line, then categories, button and files in a band */
.st-row .st-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 28px; }
.st-row .st-list > li { padding-top: 50px; }
.st-row .st-num { position: absolute; top: 0; left: 0; }
.st-row .st-list > li::before { content: ""; position: absolute; top: 17px; left: 42px; right: -12px; height: 1px; background: var(--colors--line); }
.st-row .st-list > li:last-child::before { display: none; }
.st-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; background: var(--colors--seasalt); border-radius: var(--shop--radius-xl); padding: 24px; }
.st-band .steps-cats { margin: 0; }
.st-band-end .actions { margin-bottom: 16px; }

/* Blue panel: the whole section on Pan Am Blue, white type */
.st-panel { background: var(--colors--pan-am-blue); color: #fff; border-radius: var(--shop--radius-xl); padding: 36px; }
.st-panel .st-cta-title, .st-panel .st-cta-text, .st-panel .card-title, .st-panel .step-text { color: #fff; }
.st-panel .st-cta-text { opacity: 0.85; max-width: 560px; }
.st-panel .st-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 8px 0 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.3); }
.st-panel .st-num { background: #fff; color: var(--colors--pan-am-blue); margin-bottom: 12px; }
.st-panel .step-text { opacity: 0.85; }
.st-panel .steps-cats-label { color: rgba(255, 255, 255, 0.75); }
.st-panel .steps-cats li { background: transparent; border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; }
.st-panel .steps-cats { margin-bottom: 24px; }
.st-panel .st-band-end { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.st-panel .btn.primary { background: #fff; border-color: #fff; color: var(--colors--pan-am-blue); }
.st-panel .btn.primary:hover { background: var(--colors--seasalt); }
.st-panel .steps-files ul { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); }
.st-panel .steps-files li { color: #fff; }
.st-panel .steps-files li + li { border-color: rgba(255, 255, 255, 0.3); }
.st-panel .sf-meta { color: rgba(255, 255, 255, 0.7); }

/* Split: an invitation card with the poster, button and files beside the steps */
.st-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; }
.st-card { background: var(--colors--seasalt); border-radius: var(--shop--radius-xl); padding: 24px; position: sticky; top: 24px; }
.st-card img { width: 100%; height: auto; max-height: none; border-radius: var(--shop--radius); margin-bottom: 20px; background: #fff; }
.st-card .st-cta-title { font-size: 24px; }
.st-split .st-list > li { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 20px 0; border-bottom: 1px solid var(--colors--line); }
.st-split .st-list > li:first-child { padding-top: 0; }
.st-split .st-num { width: auto; height: auto; background: none; color: var(--colors--pan-am-blue); font: 400 44px/1 var(--fonts--heading); min-width: 40px; }
.st-split .st-list .card-title { font-size: 18px; }
.st-split .step-text { flex-basis: 100%; padding-left: 56px; }
.st-split .steps-cats { margin-top: 24px; }

/* Cards: four numbered cards, then a bar with the poster, the invitation, button and files */
.st-cards .st-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.st-cards .st-list > li { background: var(--colors--seasalt); border-radius: var(--shop--radius-xl); padding: 22px 20px 24px; min-height: 190px; }
.st-cards .st-num { width: auto; height: auto; background: none; color: var(--colors--pan-am-blue); font: 400 40px/1 var(--fonts--heading); text-align: left; margin-bottom: 18px; }
.st-bar { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; border: 1px solid var(--colors--line); border-radius: var(--shop--radius-xl); padding: 20px; margin-top: 24px; }
.st-bar-img img { width: 100%; height: auto; max-height: none; border-radius: var(--shop--radius); }
.st-bar .st-cta-title { font-size: 22px; }
.st-bar .st-cta-text { margin: 0; font-size: 15px; }
.st-bar-end .actions { margin-bottom: 12px; }

@media (max-width: 760px) {
  .st-poster, .st-split, .st-band, .st-bar, .st-panel .st-band-end { grid-template-columns: 1fr; }
  .st-row .st-list, .st-panel .st-list, .st-cards .st-list { grid-template-columns: 1fr 1fr; }
  .st-row .st-list > li::before { display: none; }
  .st-panel { padding: 24px; }
  .st-card { position: static; }
}
.st-band .steps-cats li { background: #fff; }
.st-panel .lab-mark { background: #fff; }

/* Now seeking: the categories from the hub's "actively seeking" poster, above the steps (2026-11-09) */
.st-seeking { background: rgba(39, 103, 173, 0.07); border: 1px solid rgba(39, 103, 173, 0.25); border-radius: var(--shop--radius-xl); padding: 22px 24px 18px; margin: 0 0 28px; }
.sk-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 14px; }
.sk-title { font: 400 24px/1.1 var(--fonts--heading); text-transform: uppercase; color: var(--colors--pan-am-blue); margin: 0; }
.sk-note { font: 300 14px/1.4 var(--fonts--body); color: var(--colors--text); margin: 0; }
.st-seeking ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.st-seeking li { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 10px; padding: 9px 12px; }
.sk-code { font: 500 11px/1 var(--fonts--body); letter-spacing: var(--text-spacing--medium); color: var(--colors--pan-am-blue); min-width: 34px; }
.sk-name { font: 400 14px/1.3 var(--fonts--body); color: var(--colors--night-sky); flex: 1; }
.sk-open { font: 500 10px/1 var(--fonts--body); letter-spacing: var(--text-spacing--medium); text-transform: uppercase; color: #fff; background: var(--colors--pan-am-blue); border-radius: 999px; padding: 5px 8px; }
/* Downloads inside step 1 */
.st-list > li .steps-files { margin-top: 12px; }
.st-split .st-list > li .steps-files { flex-basis: 100%; padding-left: 56px; }
@media (max-width: 760px) { .st-seeking ul { grid-template-columns: 1fr; } .st-split .st-list > li .steps-files, .st-split .step-text { padding-left: 0; } }

/* Downloads that open a saved copy */
a.file-link { color: var(--colors--pan-am-blue); text-decoration: none; }
a.file-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Licensee without a photo yet: Pan Am Blue with the globe and the category (2026-11-09) */
.dir-card .dir-noimg { background: linear-gradient(160deg, var(--colors--pan-am-blue), var(--colors--worldport-blue)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.dir-card .dir-noimg img.dir-globe { width: 34%; height: auto; object-fit: contain; opacity: 0.9; }
.dir-card .dir-noimg .dir-noimg-cat { font: 500 10px/1.3 var(--fonts--body); letter-spacing: var(--text-spacing--large); text-transform: uppercase; color: rgba(255, 255, 255, 0.8); text-align: center; padding: 0 10px; }
.dir-card .card-media img:not(.dir-globe) { background: #fff; }

/* Download previews (2026-11-09): a small thumbnail beside each file name */
ul.file-list li { display: flex; align-items: center; gap: 12px; }
ul.file-list li > a, ul.file-list li > span:not(.sf-meta):not(.file-thumb) { flex: 1; min-width: 0; }
ul.file-list .sf-meta { margin-left: auto; white-space: nowrap; }
.file-thumb { flex: none; width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--colors--seasalt); border: 1px solid var(--colors--line); }
img.file-thumb { max-height: none; }
span.file-type { display: grid; place-items: center; font: 500 10px/1 var(--fonts--body); letter-spacing: var(--text-spacing--medium); color: var(--colors--pan-am-blue); }
.filebox ul.file-list li { padding: 8px 0; }
img.file-thumb { object-fit: contain; padding: 4px; }
img.file-thumb[src$=".jpg"] { object-fit: cover; padding: 0; }
img.file-thumb.on-dark { background: var(--colors--night-sky); }

/* ===== Newsroom (2026-11-09): three designs, lab ?press=magazine|stream|split ===== */
.newsroom .lab-switch { margin-bottom: 16px; }
.nr-hero { position: relative; border-radius: var(--shop--radius-xl); overflow: hidden; background: var(--colors--night-sky) center / cover no-repeat; color: #fff; margin-bottom: 28px; }
.nr-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 20, 23, 0.85), rgba(18, 20, 23, 0.45) 60%, rgba(18, 20, 23, 0.25)); }
.nr-hero-inner { position: relative; padding: 44px 40px 28px; max-width: 640px; }
.nr-hero.compact .nr-hero-inner { padding: 30px 32px 20px; }
.nr-hero .page-title { color: #fff; margin: 0 0 10px; }
.nr-hero .btn { border-color: rgba(255, 255, 255, 0.8); color: #fff; background: transparent; }
.nr-hero .btn.primary { background: #fff; border-color: #fff; color: var(--colors--pan-am-blue); }
.nr-hero .btn:hover { background: rgba(255, 255, 255, 0.14); }
.nr-stats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.25); background: rgba(18, 20, 23, 0.35); backdrop-filter: blur(4px); }
.nr-stats div { padding: 16px 24px; margin: 0; }
.nr-stats div + div { border-left: 1px solid rgba(255, 255, 255, 0.2); }
.nr-stats dt { font: 400 28px/1.1 var(--fonts--heading); color: #fff; }
.nr-stats dd { margin: 4px 0 0; font: 500 11px/1.3 var(--fonts--body); letter-spacing: var(--text-spacing--large); text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.nr-sec { margin: 8px 0 36px; scroll-margin-top: 16px; }
.nr-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
.nr-h2 { font: 400 28px/1.1 var(--fonts--heading); text-transform: uppercase; color: var(--colors--night-sky); margin: 0; }
.nr-sec-head p { margin: 0; font: 300 14px/1.4 var(--fonts--body); color: var(--colors--muted); }
.nr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 400 12.5px/1.3 var(--fonts--body); color: var(--colors--muted); margin-top: 12px; }
.nr-kind { font: 500 10px/1 var(--fonts--body); letter-spacing: var(--text-spacing--medium); text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: var(--colors--seasalt); color: var(--colors--night-sky); }
.nr-kind.k-release, .nr-kind.k-announcement { background: var(--colors--pan-am-blue); color: #fff; }
.nr-kind.k-social { background: rgba(39, 103, 173, 0.12); color: var(--colors--pan-am-blue); }
.nr-card, .nr-lead-card, .nr-row { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.nr-card .card-media { aspect-ratio: 16 / 10; background: var(--colors--seasalt); }
.nr-card .card-media img, .nr-lead-card .card-media img, .nr-thumb img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.nr-card .card-title { font: 500 16px/1.35 var(--fonts--body); color: var(--colors--night-sky); margin-top: 6px; }
.nr-sum { font: 300 14px/1.5 var(--fonts--body); color: var(--colors--text); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nr-go { font: 500 12px/1 var(--fonts--body); letter-spacing: var(--text-spacing--small); color: var(--colors--pan-am-blue); margin-top: 10px; }
a.nr-card:hover .card-title, a.nr-row:hover .card-title, a.nr-lead-card:hover .nr-lead-title { color: var(--colors--pan-am-blue); }
body[data-hover="zoom"] a.nr-card:hover img, body[data-hover="zoom"] a.nr-lead-card:hover img, body[data-hover="zoom"] a.nr-row:hover img { transform: scale(1.05); }
.nr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
.nr-lead { margin-bottom: 36px; }
.nr-lead-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: center; }
.nr-lead-card .card-media { aspect-ratio: 16 / 10; }
.nr-lead-body { display: flex; flex-direction: column; }
.nr-lead-title { font: 400 24px/1.15 var(--fonts--heading); text-transform: uppercase; color: var(--colors--night-sky); margin: 10px 0 6px; }
.nr-outlets { border-top: 1px solid var(--colors--line); border-bottom: 1px solid var(--colors--line); padding: 18px 0; margin: 4px 0 36px; }
.nr-outlets > div { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 10px; }
.nr-outlets > div span { font: 400 19px/1.2 var(--fonts--quote); font-style: italic; color: var(--colors--night-sky); opacity: 0.85; }
.nr-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.nr-filters .dir-chips { margin: 0; }
.nr-more { margin-top: 22px; }
/* Stream: one dated list */
.nr-tabs { margin-bottom: 8px; }
.nr-month { font: 500 12px/1.4 var(--fonts--body); letter-spacing: var(--text-spacing--large); text-transform: uppercase; color: var(--colors--muted); margin: 26px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--colors--line); }
.nr-row { flex-direction: row; align-items: center; gap: 16px; padding: 10px 0; }
.nr-row + .nr-row { border-top: 1px solid rgba(192, 192, 192, 0.3); }
.nr-thumb { flex: none; width: 96px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--colors--seasalt); }
.nr-row-body { display: flex; flex-direction: column-reverse; gap: 2px; min-width: 0; }
.nr-row .nr-meta { margin-top: 2px; }
.nr-row .card-title { font: 500 15px/1.35 var(--fonts--body); color: var(--colors--night-sky); }
/* Split: two columns */
.nr-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; }
.nr-stack { display: flex; flex-direction: column; gap: 24px; }
.nr-split .nr-list .nr-thumb { width: 72px; }
@media (max-width: 900px) {
  .nr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nr-split, .nr-lead-card { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nr-grid { grid-template-columns: 1fr; }
  .nr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nr-stats div:nth-child(3) { border-left: 0; }
  .nr-hero-inner { padding: 28px 22px 20px; }
  .nr-lead-title { font-size: 24px; }
}
/* Logos in the feed (PNG artwork) shown whole on white, not cropped */
.newsroom .card-media img[src$=".png"], .newsroom .nr-thumb img[src$=".png"] { object-fit: contain; padding: 14px 18px; background: #fff; }
.newsroom .card-media:has(img[src$=".png"]), .newsroom .nr-thumb:has(img[src$=".png"]) { border: 1px solid var(--colors--line); background: #fff; }
#in-the-press.nr-sec .nr-kind.k-news { display: none; }

/* Newsroom hero buttons: the primary keeps its white fill on hover (2026-11-09: the blue-on-blue hover) */
.nr-hero .btn.primary:hover { background: var(--colors--seasalt); border-color: var(--colors--seasalt); color: var(--colors--worldport-blue); }
.nr-hero-inner { padding-bottom: 40px; }

/* Smooth hover in and out for every button and button-like link (2026-11-09) */
.btn, .topactions a, .home-button, .dir-chips button, .nr-more, .lab-bar button, .lab-panel button, .menu-btn, .feature-hero .btn,
a.file-link, .search-results a, .sidebar a, .toc a, .topnav a, .pager a, .brand-link, .actions a {
  transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out), opacity var(--dur-quick) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { .btn, .topactions a, .home-button, .dir-chips button, .nr-more, .actions a { transition: none; } }

/* ===== About Pan Am and Contact Pan Am (2026-11-09) ===== */
/* A statement set large between sections */
.statement { margin: 40px 0; }
.stmt-eyebrow { font: 500 12px/1.3 var(--fonts--body); letter-spacing: var(--text-spacing--large); text-transform: uppercase; margin: 0 0 12px; }
.stmt-body { margin-top: 18px; max-width: 680px; }
.stmt-body .rich p { font: 300 16px/1.6 var(--fonts--body); margin: 0 0 10px; }
.statement.st-blue .stmt-eyebrow, .statement.st-blue .stmt-body .rich p { color: rgba(255, 255, 255, 0.88); }
.stmt-text { font: 400 34px/1.15 var(--fonts--heading); text-transform: uppercase; color: var(--colors--night-sky); margin: 0 0 10px; max-width: 760px; }
.stmt-sub { font: 300 18px/1.5 var(--fonts--body); color: var(--colors--text); margin: 0; }
.statement.st-blue { border: 0; background: var(--colors--pan-am-blue); border-radius: var(--shop--radius-xl); padding: 40px; }
.statement.st-blue .stmt-text, .statement.st-blue .stmt-sub { color: #fff; }
/* Quick facts: tiles, then the family */
.facts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
.fact { background: var(--colors--seasalt); border-radius: var(--shop--radius); padding: 22px 20px; margin: 0; }
.fact dt { font: 400 22px/1.1 var(--fonts--heading); color: var(--colors--pan-am-blue); text-transform: uppercase; margin: 0 0 8px; }
.fact dd { font: 400 13px/1.4 var(--fonts--body); color: var(--colors--muted); margin: 0; }
.facts-family { border: 1px solid var(--colors--line); border-radius: var(--shop--radius-xl); padding: 20px 22px; }
.facts-family ul { list-style: none; padding: 0; margin: 10px 0 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.facts-family li { display: flex; flex-direction: column; }
.facts-family .nr-sum { -webkit-line-clamp: unset; }
/* Leadership: portraits */
.leaders-intro { font: 300 17px/1.5 var(--fonts--body); color: var(--colors--text); margin: 0 0 22px; max-width: 640px; }
.leaders-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
.leader .card-media { aspect-ratio: 4 / 5; background: var(--colors--seasalt); }
.leader .card-media img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.leader .card-title { font: 500 17px/1.3 var(--fonts--body); margin: 14px 0 2px; text-transform: none; letter-spacing: 0; }
.leader-role { font: 400 13px/1.4 var(--fonts--body); color: var(--colors--pan-am-blue); margin: 0 0 10px; }
.leader-quote { font: italic 400 17px/1.45 var(--fonts--quote); color: var(--colors--night-sky); margin: 0 0 10px; padding: 0; border: 0; }
.leader-more summary { font: 500 12px/1 var(--fonts--body); letter-spacing: var(--text-spacing--medium); text-transform: uppercase; color: var(--colors--pan-am-blue); cursor: pointer; list-style: none; }
.leader-more summary::-webkit-details-marker { display: none; }
.leader-more summary::after { content: " +"; }
.leader-more[open] summary::after { content: " –"; }
.leader-more p { font: 300 14px/1.55 var(--fonts--body); color: var(--colors--text); margin: 8px 0 0; }
/* Call to action band */
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; background: var(--colors--seasalt); border-radius: var(--shop--radius-xl); padding: 28px 30px; margin: 40px 0 8px; }
.cta-title { font: 400 26px/1.15 var(--fonts--heading); text-transform: uppercase; color: var(--colors--night-sky); margin: 0 0 6px; }
.cta-text { font: 300 16px/1.5 var(--fonts--body); color: var(--colors--text); margin: 0; }
/* Contact card */
.contact-card { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 28px; background: var(--colors--seasalt); border-radius: var(--shop--radius-xl); padding: 30px; margin: 0 0 32px; }
.cc-urgent { font: 400 14px/1.5 var(--fonts--body); color: var(--colors--night-sky); margin: 14px 0 0; padding: 10px 14px; background: #fff; border-radius: 10px; border: 1px solid var(--colors--line); }
.cc-mail { background: #fff; border-radius: var(--shop--radius); padding: 22px; display: flex; flex-direction: column; justify-content: center; }
.cc-address { font: 400 clamp(20px, 2.1vw, 30px)/1.15 var(--fonts--heading); color: var(--colors--pan-am-blue); text-decoration: none; margin: 8px 0 18px; white-space: nowrap; overflow-wrap: normal; }
.cc-address:hover { color: var(--colors--worldport-blue); }
/* Press kit */
.pk-all { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: var(--colors--pan-am-blue); border-radius: var(--shop--radius-xl); padding: 22px 26px; margin-bottom: 28px; }
.pk-all .card-title, .pk-all .nr-sum { color: #fff; }
.pk-all .nr-sum { opacity: 0.85; margin: 2px 0 0; }
.pk-all .btn.primary { background: #fff; border-color: #fff; color: var(--colors--pan-am-blue); }
.pk-all .btn.primary:hover { background: var(--colors--seasalt); border-color: var(--colors--seasalt); }
.pk-set { margin: 0 0 32px; scroll-margin-top: 16px; }
.pk-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px; }
.pk-title { font: 400 22px/1.15 var(--fonts--heading); text-transform: uppercase; color: var(--colors--night-sky); margin: 0 0 4px; }
.pk-head .nr-sum { margin: 0; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 14px; }
.pk-file { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.pk-file .card-media { aspect-ratio: 4 / 3; background: var(--colors--seasalt); border: 1px solid var(--colors--line); display: grid; place-items: center; }
.pk-file .card-media img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
#kit-logos .pk-file .card-media img { object-fit: contain; padding: 10px; }
.pk-file.on-dark .card-media { background: var(--colors--night-sky); }
.pk-name { font: 500 13.5px/1.3 var(--fonts--body); color: var(--colors--night-sky); margin-top: 8px; }
.pk-file .sf-meta { font-size: 12px; margin-top: 2px; }
a.pk-file:hover .pk-name { color: var(--colors--pan-am-blue); }
body[data-hover="zoom"] a.pk-file:hover img { transform: scale(1.05); }
@media (max-width: 900px) { .leaders-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .contact-card { grid-template-columns: 1fr; padding: 22px; }
  .facts-family ul { grid-template-columns: 1fr; }
  .stmt-text { font-size: 26px; }
  .statement.st-blue { padding: 26px; }
  .cc-address { font-size: 24px; }
}
/* Buttons look the same wherever they sit, not only inside an action row (2026-11-09) */
.btn { display: inline-flex; align-items: center; font: 500 11px/1 var(--fonts--body); letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--colors--pan-am-blue); color: var(--colors--pan-am-blue); background: #fff; white-space: nowrap; cursor: pointer; }
.btn.primary { background: var(--colors--pan-am-blue); color: #fff; }
.btn:hover { background: var(--colors--seasalt); }
.btn.primary:hover { background: var(--colors--worldport-blue); border-color: var(--colors--worldport-blue); color: #fff; }
.pk-all .btn.primary { background: #fff; border-color: #fff; color: var(--colors--pan-am-blue); }
.pk-all .btn.primary:hover { background: var(--colors--seasalt); border-color: var(--colors--seasalt); color: var(--colors--worldport-blue); }
@media (max-width: 760px) { .pk-head .btn, .pk-all .btn { white-space: normal; } }

/* ===== Quotes (2026-11-09): the blue side bar is gone; one treatment site-wide, chosen in the lab bar ===== */
/* applies to the white statements and to quotes in page text */
.statement.is-quote, .rich blockquote { position: relative; border: 0; }
.q-ornament { display: none; }
.statement.is-quote .stmt-text { max-width: 820px; }
/* Centred: set in the middle of the column, a short Pan Am Blue line above */
body[data-quote="centred"] :is(.statement.is-quote, .rich blockquote) { text-align: center; padding: 8px 0; }
body[data-quote="centred"] .statement.is-quote .stmt-text { margin-left: auto; margin-right: auto; }
body[data-quote="centred"] .statement.is-quote .q-ornament { display: block; width: 48px; height: 2px; background: var(--colors--pan-am-blue); margin: 0 auto 22px; }
/* Quote mark: a large opening quotation mark in Pan Am Blue */
body[data-quote="mark"] .statement.is-quote .q-ornament { display: block; }
body[data-quote="mark"] .statement.is-quote .q-ornament::before, body[data-quote="mark"] .rich blockquote::before { content: "\201C"; display: block; font: 400 88px/0.6 var(--fonts--quote); color: var(--colors--pan-am-blue); height: 40px; margin: 0 0 6px; }
/* Seasalt panel: on a light panel, centred */
body[data-quote="panel"] :is(.statement.is-quote, .rich blockquote) { background: var(--colors--seasalt); border-radius: var(--shop--radius-xl); padding: clamp(28px, 4vw, 48px); text-align: center; }
body[data-quote="panel"] .statement.is-quote .stmt-text { margin-left: auto; margin-right: auto; }
/* Rules: hairlines above and below, as a pull quote in print */
body[data-quote="rules"] :is(.statement.is-quote, .rich blockquote) { border-top: 1px solid var(--colors--night-sky); border-bottom: 1px solid var(--colors--line); padding: 28px 0; }
/* Gold rule: a short Terminal Gold line above, left aligned */
body[data-quote="gold"] .statement.is-quote .q-ornament { display: block; width: 72px; height: 3px; background: var(--colors--terminal-gold); margin: 0 0 20px; }
body[data-quote="gold"] .rich blockquote { padding-top: 20px; }
body[data-quote="gold"] .rich blockquote::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 3px; background: var(--colors--terminal-gold); }
@media (max-width: 700px) { .statement.is-quote .stmt-text { font-size: 26px; } }

/* About Pan Am: copy as Frontify had it, reformatted (2026-11-09) */
.b-text.t-lead .rich p { font: 300 20px/1.55 var(--fonts--body); color: var(--colors--night-sky); max-width: 760px; }
.keywords { margin: 28px 0 8px; }
.kw-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kw-list li { font: 400 13px/1 var(--fonts--body); padding: 9px 14px; border: 1px solid var(--colors--line); border-radius: 999px; color: var(--colors--night-sky); }
.fact .fact-label { font: 500 11px/1.3 var(--fonts--body); letter-spacing: var(--text-spacing--medium); text-transform: uppercase; color: var(--colors--muted); margin: 0 0 10px; }
.facts-rows { margin: 20px 0 0; border-top: 1px solid var(--colors--line); }
.facts-rows > div { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--colors--line); }
.facts-rows dt { font: 500 12px/1.5 var(--fonts--body); letter-spacing: var(--text-spacing--medium); text-transform: uppercase; color: var(--colors--night-sky); }
.facts-rows dd { font: 300 16px/1.55 var(--fonts--body); color: var(--colors--text); margin: 0; }
.leaders-heading { font: 400 28px/1.15 var(--fonts--heading); text-transform: uppercase; color: var(--colors--night-sky); margin: 0 0 12px; }
.leaders-intro + .leaders-grid { margin-top: 10px; }
.leader-label { font-weight: 500 !important; margin-top: 12px !important; }
@media (max-width: 700px) { .facts-rows > div { grid-template-columns: 1fr; gap: 4px; } }

/* Feature hero with a portrait photo (Contact Pan Am, 2026-11-09) */
.feature-hero.fh-portrait { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: stretch; background: var(--colors--night-sky); min-height: 460px; }
.feature-hero.fh-portrait::before { display: none; }
.fh-portrait .fh-inner { align-self: end; }
.fh-photo { position: relative; margin: 0; min-height: 100%; }
.fh-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center 30%; }
.fh-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--colors--night-sky) 0%, rgba(18, 20, 23, 0) 22%); pointer-events: none; }
.fh-photo figcaption { position: absolute; z-index: 2; right: 14px; bottom: 12px; font: 400 11px/1.3 var(--fonts--body); color: rgba(255, 255, 255, 0.78); text-align: right; }
@media (max-width: 760px) {
  .feature-hero.fh-portrait { grid-template-columns: 1fr; }
  .fh-photo { order: -1; height: 300px; }
  .fh-photo::before { background: linear-gradient(0deg, var(--colors--night-sky) 0%, rgba(18, 20, 23, 0) 30%); }
}

/* ===== Downloads (2026-11-09): sets, jump tiles, search and type filters, preview tiles ===== */
.dl-jump { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 22px; }
.dl-jump a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--colors--night-sky); border: 1px solid var(--colors--line); border-radius: var(--shop--radius); padding: 10px; transition: border-color var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out); }
.dl-jump a:hover { border-color: var(--colors--pan-am-blue); background: var(--colors--seasalt); }
.dl-jump .dl-media { height: 74px; margin-bottom: 8px; }
.dl-jump-title { font: 500 14px/1.3 var(--fonts--body); }
.dl-jump .sf-meta { font-size: 12px; }
.dl-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 0; background: #fff; border-bottom: 1px solid var(--colors--line); margin-bottom: 8px; }
.dl-search { flex: 1 1 240px; min-width: 0; font: 400 15px/1 var(--fonts--body); padding: 11px 16px; border: 1px solid var(--colors--line); border-radius: 999px; background: var(--colors--seasalt); color: var(--colors--night-sky); }
.dl-search:focus { outline: 2px solid var(--colors--pan-am-blue); outline-offset: 1px; }
.dl-kinds { margin: 0; }
.dl-empty { font: 300 16px/1.5 var(--fonts--body); color: var(--colors--muted); padding: 24px 0; }
.dl-section { margin: 0 0 12px; }
.dl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 0 0 16px; }
.dl-text { font: 300 16px/1.5 var(--fonts--body); color: var(--colors--text); margin: 0 0 4px; }
.dl-head .sf-meta { white-space: normal; font-size: 13px; margin: 0; }
.dl-head .sf-meta a { color: var(--colors--pan-am-blue); }
.dl-head .btn { flex: none; }
.dl-group + .dl-group { margin-top: 22px; }
.dl-group-title { font: 500 12px/1.3 var(--fonts--body); letter-spacing: var(--text-spacing--medium); text-transform: uppercase; color: var(--colors--night-sky); margin: 0 0 10px; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.dl-grid .dl-extra { display: none; }
.dl-grid.dl-open .dl-extra, .dl-filtering .dl-grid .dl-extra { display: flex; }
.dl-filtering .dl-showall { display: none; }
.dl-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-decoration: none; color: var(--colors--night-sky); }
.dl-tile[hidden] { display: none !important; }
.dl-media { display: flex; align-items: center; justify-content: center; height: 120px; border-radius: var(--shop--radius); background: var(--colors--seasalt); overflow: hidden; margin-bottom: 6px; }
.dl-media img { width: 100%; height: 100%; max-height: none; object-fit: contain; padding: 10px; transition: transform var(--dur-quick) var(--ease-out); }
.dl-jump a.is-photo .dl-media img, .dl-strip:not(.is-logos) .dl-media img { object-fit: cover; padding: 0; }
.dl-jump .dl-media img { padding: 8px; }
.dl-tile.on-dark .dl-media, .dl-media.on-dark { background: var(--colors--night-sky); }
.dl-media .file-type { font: 500 13px/1 var(--fonts--body); letter-spacing: var(--text-spacing--medium); color: var(--colors--pan-am-blue); }
a.dl-tile:hover .dl-media img { transform: scale(1.05); }
a.dl-tile:hover .dl-name { color: var(--colors--pan-am-blue); }
.dl-name { font: 500 13px/1.35 var(--fonts--body); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--dur-quick) var(--ease-out); }
.dl-tile .sf-meta { font-size: 12px; }
.dl-held { font: 500 10px/1.3 var(--fonts--body); letter-spacing: var(--text-spacing--medium); text-transform: uppercase; color: var(--colors--muted); }
.dl-showall { margin-top: 14px; }
.dl-presskit .pk-all { margin-bottom: 16px; }
.dl-presskit .pk-all .actions { margin: 0; }
.dl-kitsets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dl-kitset { border: 1px solid var(--colors--line); border-radius: var(--shop--radius); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.dl-kitset .card-title { margin: 6px 0 0; }
.dl-kitset .sf-meta { margin: 0 0 8px; font-size: 12px; }
.dl-kitset .btn { align-self: flex-start; margin-top: auto; }
.dl-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.dl-strip .dl-media { height: 70px; margin: 0; }
.dl-libs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .dl-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dl-kitsets, .dl-libs { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .dl-head { flex-direction: column; align-items: flex-start; }
  .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dl-media { height: 100px; }
  .dl-jump { gap: 8px; }
  .dl-jump a { flex-direction: row; align-items: center; gap: 10px; padding: 8px; }
  .dl-jump .dl-media { width: 52px; height: 44px; flex: none; margin: 0; }
  .dl-jump .dl-media img { padding: 4px; }
  .dl-jump-title { font-size: 13px; }
  .dl-jump .sf-meta { display: none; }
}
/* The sidebar search lines up with the link highlights below it (2026-11-09): both start 10 px left of the text */
.sidebar .search-wrap { margin-left: -10px; }

/* Skip link (published site, 2026-11-09): hidden until a keyboard user tabs to it */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--colors--pan-am-blue); color: #fff; font: 500 14px/1 var(--fonts--body); text-decoration: none; }
.skip-link:focus { top: 12px; }

/* Footer legal links (2026-11-10) */
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 0 0 14px; }
.footer-legal a, .footer-cookie { font: inherit; color: inherit; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.footer-legal a:hover, .footer-cookie:hover { color: var(--colors--pan-am-blue); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:focus-visible, .footer-cookie:focus-visible { outline: 2px solid var(--colors--pan-am-blue); outline-offset: 3px; }

/* Cookie banner, Preferences Center and the closed state (2026-11-10, Johan: "style the banner in the closed and open
   states like they are styled on the other sites, and ensure there is a manage preferences option as well").
   Measured from panam.com's live banner (Consent Pro): a white card in the lower right, 1 px silver border, 8 px corners,
   24 px padding, 12 px Neue Einstellung, buttons with 4 px corners (Reject on a 10% grey, Accept in Pan Am Blue, the
   preferences link as text); a centred Preferences Center with the globe and an Advercase title, category rows with
   chevrons and switches, a grey footer bar with Reject All, Accept All and Save Preferences in Night Sky; after a choice,
   a 40 px round cookie button 16 px from the lower left. */
.cb { position: fixed; z-index: 60; right: 16px; bottom: 16px; width: min(372px, calc(100vw - 32px)); padding: 24px; background: #fff; color: var(--colors--night-sky); border: 1px solid #c0c0c0; border-radius: 8px; box-shadow: 0 10px 30px rgba(18, 20, 23, 0.08); font: 400 12px/1.6 var(--fonts--body);
  opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; }
.cb.is-in { opacity: 1; transform: none; }
.cb[hidden], .cpc-overlay[hidden], .cfab[hidden] { display: none; }
.cb p { margin: 0 0 16px; }
.cb a, .cpc-intro a { color: var(--colors--pan-am-blue); text-decoration: underline; text-underline-offset: 2px; }
.cb .placeholder { display: block; padding: 8px 10px; border: 1px dashed var(--colors--terminal-gold); border-radius: 4px; background: #fffaf0; color: #6b5a2e; font-style: italic; }
.cb-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.cb-btn { font: 400 12px/1.2 var(--fonts--body); padding: 8px 16px; border-radius: 4px; border: 0; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.cb-accept { background: var(--colors--pan-am-blue); color: #fff; }
.cb-accept:hover { background: var(--colors--worldport-blue); }
.cb-reject { background: rgba(0, 0, 0, 0.1); color: #000; }
.cb-reject:hover { background: rgba(0, 0, 0, 0.16); }
.cb-save { background: var(--colors--night-sky); color: #fff; }
.cb-save:hover { background: #2a2d33; }
.cb-manage { margin-right: auto; background: none; border: 0; padding: 8px 4px; font: 400 12px/1.2 var(--fonts--body); color: var(--colors--night-sky); cursor: pointer; box-shadow: inset 0 -1px 0 currentColor; }
.cb-manage:hover { color: var(--colors--pan-am-blue); }
.cb-btn:focus-visible, .cb-manage:focus-visible, .cfab:focus-visible, .cpc-close:focus-visible, .cpc summary:focus-visible, .cpc-switch:focus-visible, .footer-legal a:focus-visible, .footer-cookie:focus-visible { outline: 2px solid var(--colors--pan-am-blue); outline-offset: 2px; }

.cpc-overlay { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; background: rgba(18, 20, 23, 0.32); opacity: 0; transition: opacity 0.25s ease; }
.cpc-overlay.is-in { opacity: 1; }
.cpc { display: flex; flex-direction: column; width: min(800px, 100%); max-height: min(88vh, 860px); background: #fff; color: var(--colors--night-sky); border-radius: 8px; overflow: hidden; box-shadow: 0 24px 60px rgba(18, 20, 23, 0.22); transform: translateY(12px) scale(0.985); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cpc-overlay.is-in .cpc { transform: none; }
.cpc-head { display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--colors--line); }
.cpc-head img { width: 30px; height: 30px; }
.cpc-head h2 { flex: 1; margin: 0; font: 400 clamp(20px, 2.4vw, 26px)/1.1 var(--fonts--heading); color: var(--colors--night-sky); text-transform: none; letter-spacing: 0; }
.cpc-close { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 0; background: #efefef; color: var(--colors--night-sky); cursor: pointer; }
.cpc-close:hover { background: #e2e2e2; }
.cpc-body { overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 8px; }
.cpc-intro p { margin: 0 0 14px; font: 400 12px/1.65 var(--fonts--body); color: #333; }
.cpc-cats { margin: 10px 0 0; }
.cpc details { border-top: 1px solid var(--colors--line); padding: 14px 0; }
.cpc summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; cursor: pointer; }
.cpc summary::-webkit-details-marker { display: none; }
.cpc-chev { flex: none; width: 12px; height: 12px; transition: transform 0.25s ease; }
.cpc details[open] .cpc-chev { transform: rotate(90deg); }
.cpc-name { flex: 1; font: 400 20px/1.2 var(--fonts--heading); color: var(--colors--night-sky); }
.cpc-desc { flex-basis: 100%; margin: 6px 0 0 24px; font: 400 13px/1.5 var(--fonts--body); color: #333; }
.cpc-always { flex: none; font: 400 12px/1 var(--fonts--body); padding: 7px 10px; border: 1px solid #c0c0c0; border-radius: 4px; color: var(--colors--night-sky); }
.cpc-switch { flex: none; appearance: none; -webkit-appearance: none; position: relative; width: 36px; height: 20px; margin: 0; border-radius: 999px; background: #c9c9c9; cursor: pointer; transition: background 0.2s ease; }
.cpc-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; }
.cpc-switch:checked { background: var(--colors--pan-am-blue); }
.cpc-switch:checked::after { transform: translateX(16px); }
.cpc-items { margin: 12px 0 2px 24px; display: grid; gap: 8px; }
.cpc-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; padding: 12px 14px; background: var(--colors--seasalt); border-radius: 6px; font: 400 12px/1.5 var(--fonts--body); }
.cpc-item dt { color: var(--colors--muted); }
.cpc-item dd { margin: 0; color: var(--colors--night-sky); overflow-wrap: anywhere; }
.cpc-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); background: #f2f2f2; border-top: 1px solid var(--colors--line); }
body.cpc-open { overflow: hidden; }

/* Closed state, clear like glass as on panam.com (Johan, 2026-11-10: "the cookie should be clear like glass"): a
   see-through disc that blurs what is behind it, a white cookie, panam.com's light and inset shadows */
.cfab { position: fixed; z-index: 60; left: 16px; bottom: 16px; width: 40px; height: 40px; display: grid; place-items: center; padding: 8px; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: rgba(255, 255, 255, 0.3) 0 2px 5px 0, rgba(0, 0, 0, 0.2) 0 2px 5px 0 inset, rgba(0, 0, 0, 0.2) 0 2px 5px 0;
  transition: transform 0.2s ease, background 0.2s ease; }
.cfab:hover { background: rgba(255, 255, 255, 0.28); transform: scale(1.05); }
.cfab svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35)); }

@media (max-width: 600px) {
  .cb { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 20px; }
  .cb-actions .cb-btn { flex: 1; padding: 11px 12px; }
  .cb-manage { flex-basis: 100%; text-align: left; margin: 0 0 4px; padding: 10px 0; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
  .cpc-overlay { padding: 0; place-items: end stretch; }
  .cpc { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 12px 12px 0 0; transform: translateY(24px); }
  .cpc-head { padding: 14px 14px 14px 18px; }
  .cpc-body { padding: 14px 18px 6px; }
  .cpc-item { grid-template-columns: 1fr; }
  .cpc-foot { padding-left: 18px; padding-right: 18px; }
  .cpc-foot .cb-btn { flex: 1 1 30%; padding: 12px 8px; }
}
@media (prefers-reduced-motion: reduce) { .cb, .cpc-overlay, .cpc, .cpc-chev, .cpc-switch, .cpc-switch::after, .cfab { transition: none !important; } }
@media print { .cb, .cpc-overlay, .cfab { display: none !important; } }
@media (max-width: 1279px) { body.menu-open .cfab, body.menu-open .cb { display: none; } } /* the open menu covers the page; the cookie symbol returns when it closes */

/* Phone audit (2026-11-10, Johan: "lets do an audit of the mobile version of the brands site to ensure sizing and
   everything is working as intended"). Every page checked at 375 and 320 px wide. */
/* Nothing may push the page sideways: long file names and raw web addresses wrap, timeline images fit their column,
   and the colour table scrolls inside its own box on the narrowest phones */
ul.file-list a.file-link, .filebox li a.file-link span, ul.file-list a.file-link span { white-space: normal; overflow-wrap: anywhere; }
.rich a, .filebox a { overflow-wrap: anywhere; }
.timeline img { max-width: min(360px, 100%); height: auto; }
.b-colors { overflow-x: auto; overscroll-behavior-x: contain; }
/* Touch targets: at least 40 px tall on a phone without changing how the links look */
@media (max-width: 700px) {
  .footer-legal { gap: 0 20px; margin-bottom: 6px; }
  .footer-legal a, .footer-cookie { padding: 10px 0; }
  .nr-more { padding-top: 11px; padding-bottom: 11px; }
  .nr-go { display: inline-block; padding: 12px 0; margin-top: 0; }
  .brand-link { padding-bottom: 8px; padding-top: 8px; }
  .cc-address { display: inline-block; padding: 6px 0; }
}
/* File rows (held files are plain text, not links): names such as Timex_FW2025_..._social wrap anywhere, and on a
   phone the type and size sit under the name instead of squeezing it into a sliver */
ul.file-list li { overflow-wrap: anywhere; }
@media (max-width: 520px) {
  ul.file-list li { flex-wrap: wrap; row-gap: 2px; }
  ul.file-list li:has(> .file-thumb) { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; align-items: center; }
  ul.file-list li:has(> .file-thumb) > .file-thumb { grid-row: span 2; }
  ul.file-list li:has(> .file-thumb) > .sf-meta { grid-column: 2; margin-left: 0; align-self: start; }
  ul.file-list li:not(:has(> .file-thumb)) > .sf-meta { flex-basis: 100%; margin-left: 0; }
}

/* ===== Type scale on phones (2026-11-10, Johan: "make sure on mobile the fonts scale appropriately up and down to
   follow the rules on the other pan am sites"). panam.com's rule (pan-am-com-lab shared/tokens.css, measured live):
   type is fluid between a phone minimum and a desktop maximum, headings at about 60 to 75 % of their desktop size on a
   phone (h1 44 to 72, h2 38 to 60, h3 32 to 48, h4 26 to 36, h5 22 to 30), body text 15 px on a phone to 17 on desktop,
   about 1.6 line height. The hub keeps its approved desktop sizes as the maximum and takes the minimums from that rule;
   the home title uses panam.com's h1 exactly. ===== */
.home-hero h1 { font-size: clamp(44px, 6vw, 72px); line-height: 1.05; }
body { font-size: clamp(15px, calc(13.24px + 0.368vw), 17px); line-height: 1.6; }
.page-title { font-size: clamp(36px, 4.4vw, 56px); }
body:is([data-layout="handbook"], [data-layout="showcase"], [data-layout="index"]) {
  .page-title { font-size: clamp(32px, 4vw, 40px); }
  .rich h1, .rich h2.rich-h1 { font-size: clamp(22px, 2.6vw, 26px); }
  .rich h2, .b-heading.h2 { font-size: clamp(21px, 2.4vw, 24px); }
  .rich h3, .b-heading.h3 { font-size: clamp(17px, 1.7vw, 18px); }
  .rich p, .rich li { font-size: clamp(15px, calc(13.7px + 0.35vw), 16px); line-height: 1.6; }
  .rich .lead { font-size: clamp(16px, calc(14.4px + 0.4vw), 18px); }
}
body[data-layout="showcase"] .page-title { font-size: clamp(32px, 4vw, 48px); }
.rich h1, .rich h2.rich-h1, .b-heading.h1 { font-size: clamp(26px, 3.4vw, 38px); }
.rich h2, .b-heading.h2 { font-size: clamp(22px, 2.4vw, 26px); }
.tile-title { font-size: clamp(30px, 3.64vw, 40px); }
.home-feedback h2 { font-size: clamp(26px, 2.91vw, 32px); }
.stat-value { font-size: clamp(28px, 3.64vw, 40px); }
.st-split .st-num { font-size: clamp(32px, 4.0vw, 44px); }
.st-cards .st-num { font-size: clamp(30px, 3.64vw, 40px); }
.stmt-text { font-size: clamp(26px, 3.09vw, 34px); }
.st-cta-title { font-size: clamp(24px, 2.73vw, 30px); }
.nr-h2 { font-size: clamp(22px, 2.55vw, 28px); }
.nr-stats dt { font-size: clamp(22px, 2.55vw, 28px); }
.leaders-heading { font-size: clamp(22px, 2.55vw, 28px); }
.rs-count strong { font-size: clamp(22px, 2.55vw, 28px); }
.m-year { font-size: clamp(22px, 2.36vw, 26px); }
.cta-title { font-size: clamp(22px, 2.36vw, 26px); }
.sk-title { font-size: clamp(20px, 2.18vw, 24px); }
.nr-lead-title { font-size: clamp(20px, 2.18vw, 24px); }
.manifesto .t-head { font-size: clamp(20px, 2.18vw, 24px); }
.fact dt { font-size: clamp(19px, 2.0vw, 22px); }
.pk-title { font-size: clamp(19px, 2.0vw, 22px); }