/* Shared rules for the exported site. Page-specific styles live in each page's <style> block. */
[hidden] { display: none !important; }
html { scroll-padding-top: 80px; }

/* ---------- Layout tokens ---------- */
/* Header height (16px padding + 44px row + 16px padding + 1px border). Heroes tuck under the header by this amount. */
:root { --hdr-h: 77px; }
/* Hero top/bottom padding for SEF, News, Contact, Careers and Onboarding, measured from the header's bottom edge. */
:root { --hero-pad-y: 72px; }

/* ---------- Header ---------- */
.hdr-inner { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; }
/* On desktop the menu wrapper is layout-transparent, so nav and actions sit in the header row as before. */
.hdr-menu { display: contents; }
.hdr-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; font-size: 15px; font-weight: 500; }
.hdr-actions { display: flex; align-items: center; gap: 16px; }
.hdr .hdr-toggle { display: none; }
.hdr-toggle .i-close { display: none; }
.hdr.menu-open .hdr-toggle .i-open { display: none; }
.hdr.menu-open .hdr-toggle .i-close { display: block; }

/* ---------- Heroes ---------- */
/* svh keeps full-height heroes stable when mobile browser bars show/hide; vh is the fallback. */
.hero-full { min-height: min(100vh, 1200px); min-height: min(100svh, 1200px); }
.hero-half { min-height: min(50vh, 600px); min-height: min(50svh, 600px); }
/* Image heroes (Trading, Collateral): the section sets the height, the inner column fills it. */
/* 1248px = 1200px content + 2 × 24px padding (border-box), matching the content-box 1200px sections below. */
.hero-inner { position: relative; flex: 1; width: 100%; max-width: 1248px; box-sizing: border-box; margin: 0 auto; padding: calc(var(--hdr-h) + 80px) 24px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 80px; }

/* ---------- Contact / office cards ---------- */
/* Shared by sef.html (compliance), onboarding.html (team contacts) and contact.html (offices) so they look the same. */
.ct-card { background: #FFFFFF; border: 1px solid #E1E7EE; border-radius: 6px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
/* A group shows several cards in one bordered block, with 1px hairlines between them. */
.ct-group { display: grid; gap: 1px; background: #E1E7EE; border: 1px solid #E1E7EE; border-radius: 6px; overflow: hidden; }
.ct-group > .ct-card { border: 0; border-radius: 0; }
.ct-label { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #5B6B7E; }
.ct-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: #0B1E33; }
.ct-tag { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #0A5FA8; }
.ct-details { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5; font-style: normal; color: #46566A; }
.ct-email { font-weight: 500; }
.ct-phone { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; letter-spacing: .02em; white-space: nowrap; color: #46566A; }
/* Office cards: name on the left, phone number top right (wraps below on narrow widths). */
.ct-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }

/* ---------- "Leaving the SEF site" dialog (every page except collateral.html / news.html) — frosted glass ---------- */
.leave-dlg { box-sizing: border-box; width: min(520px, calc(100vw - 32px)); margin: auto; padding: 32px; border: 0; border-radius: 8px; background: #FFFFFF; box-shadow: 0 24px 64px rgba(5,11,22,.28); color: #0B1E33; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
.leave-dlg::backdrop { background: rgba(5,11,22,.32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.leave-dlg[open] { animation: leave-dlg-in .18s ease-out; }
@keyframes leave-dlg-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .leave-dlg[open] { animation: none; } }
/* Without backdrop-filter, darken the page behind a little more so the card still stands out. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .leave-dlg::backdrop { background: rgba(5,11,22,.55); }
}
.leave-dlg-title { margin: 0 0 16px; font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; }
.leave-dlg-msg { margin: 0 0 28px; font-size: 16px; line-height: 1.6; color: #46566A; }
.leave-dlg-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.leave-dlg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 4px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.leave-dlg-continue { background: #0B1E33; color: #FFFFFF; border: 1px solid #0B1E33; }
.leave-dlg-continue:hover { background: #FFFFFF; color: #0B1E33; }
.leave-dlg-stay { background: rgba(255,255,255,.55); color: #0B1E33; border: 1px solid #C9D3DE; }
.leave-dlg-stay:hover { border-color: #0B1E33; background: #FFFFFF; }
.leave-dlg-btn:focus-visible { outline: 2px solid #0A5FA8; outline-offset: 2px; }
@media (max-width: 480px) { .leave-dlg { padding: 24px; } .leave-dlg-title { font-size: 22px; } .leave-dlg-btn { flex: 1 1 100%; } }

/* ---------- "Separate from the SEF" disclaimer (collateral.html, news.html) ---------- */
/* Pinned to the top above the sticky header; the header sticks just below it (--notice-h is measured in site.js). */
.sef-notice { position: sticky; top: 0; z-index: 51; background: #FFFFFF; color: #0B1E33; font-size: 12.5px; line-height: 1.4; }
.sef-notice-inner { max-width: 1200px; margin: 0 auto; padding: 6px 24px; text-align: center; }
.sef-notice-msg strong { font-weight: 600; }
.sef-notice-link { margin-left: 4px; color: #0A5FA8; font-weight: 500; white-space: nowrap; transition: color .15s ease; }
.sef-notice-link:hover { color: #073F70; }
.sef-notice-link:focus-visible { outline: 2px solid #0A5FA8; outline-offset: 2px; border-radius: 2px; }
@media (max-width: 640px) { .sef-notice { font-size: 12px; } .sef-notice-inner { padding: 6px 16px; } }
/* The header pins directly under the banner instead of at the very top. */
.sef-notice ~ .hdr { top: var(--notice-h, 0px); }
/* Once the header turns white, draw the banner's divider line along the header's top edge (fades in with the header's own transition). */
.sef-notice ~ .hdr-solid { box-shadow: inset 0 1px 0 #E1E7EE, 0 6px 24px rgba(11,30,51,.06); }
@media (max-width: 920px) {
  /* Keep the open mobile menu within the screen now that the banner also takes space at the top. */
  .sef-notice ~ .hdr .hdr-menu { max-height: calc(100vh - var(--hdr-h) - var(--notice-h, 0px)); max-height: calc(100dvh - var(--hdr-h) - var(--notice-h, 0px)); }
}

/* ---------- Mobile / tablet navigation ---------- */
/* Below this width the five nav items, logo and CTA no longer fit on one row. */
@media (max-width: 920px) {
  .hdr-inner { flex-wrap: wrap; gap: 0 16px; }
  .hdr .hdr-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0; margin: 0 -10px 0 0; font: inherit; background: none; border: 0; cursor: pointer; }
  /* The open menu overlays the page below the header rather than pushing it down. */
  .hdr-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; padding: 0 24px 20px; background: #FFFFFF; border-bottom: 1px solid #E1E7EE; box-shadow: 0 18px 40px rgba(11,30,51,.12); max-height: calc(100vh - var(--hdr-h)); max-height: calc(100dvh - var(--hdr-h)); overflow-y: auto; }
  .hdr.menu-open .hdr-menu { display: flex; }
  .hdr-nav { flex-direction: column; align-items: stretch; gap: 0; font-size: 17px; }
  .hdr .hdr-nav .nav-link, .hdr-nav .menu-link { color: #0B1E33; display: flex; align-items: center; min-height: 48px; margin: 0; padding: 0 4px; border-top: 1px solid #E1E7EE; border-radius: 0; font-size: 17px; }
  /* Fold the "More" dropdown into the list so every page is one tap away. */
  .hdr-nav .more { display: block; }
  .hdr .hdr-nav .more-btn { display: none; }
  .hdr-nav .more-pop { display: block; position: static; padding: 0; }
  .hdr-nav .more-menu { min-width: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .hdr-actions { padding-top: 16px; border-top: 1px solid #E1E7EE; }
  .hdr-actions .cta { flex: 1; justify-content: center; min-height: 48px !important; }
  /* Less dead space above image-hero copy on small screens. */
  .hero-inner { padding-top: calc(var(--hdr-h) + 40px); gap: 48px; }
}

/* ---------- Feature cards ---------- */
/* Shared by "The next generation of institutional trading" (index) and
   "Collateral that never waits for the open" (collateral) so both sections stay identical in style. */
.fc-grid { display: grid; gap: 16px; }
.fc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .fc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fc-grid-4 { grid-template-columns: minmax(0, 1fr); } }
.fc-card { background: #FFFFFF; border: 1px solid #E1E7EE; border-radius: 6px; padding: 32px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fc-item { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: 1px solid #E1E7EE; }
.fc-item:last-child { padding-bottom: 0; }
/* A card without a label starts directly with its first item, so no divider above it. */
.fc-card > .fc-item:first-child { padding-top: 0; border-top: 0; }
.fc-title { margin: 0; font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.fc-body { margin: 0; font-size: 15px; line-height: 1.6; color: #46566A; text-wrap: pretty; }
@media (max-width: 600px) { .fc-card { padding: 24px; } }
/* Trading: three labelled columns of single-item cards. The groups share the parent's rows (subgrid),
   so the label row and each card row line up across columns and all three columns end at the same height. */
.fc-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fc-group { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fc-group > .fc-card { flex: 1 1 auto; }
@supports (grid-template-rows: subgrid) {
  .fc-columns { grid-template-rows: auto repeat(4, auto); }
  .fc-group { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
}
@media (max-width: 1024px) {
  /* Stacked columns: each group flows naturally, no cross-column alignment needed. */
  .fc-columns { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 40px; }
  .fc-group { display: flex; grid-row: auto; }
}

/* ---------- Large screens (QHD to 4K) ---------- */
/* Scale the whole layout so content keeps its proportions instead of becoming a narrow column.
   Browsers without `zoom` support simply keep the 1200px layout. Zoom also scales vh, so hero
   heights divide by the zoom factor to stay one screen tall. */
@media (min-width: 2240px) {
  html { zoom: 1.25; }
  .hero-full { min-height: min(calc(100vh / 1.25), 1200px); min-height: min(calc(100svh / 1.25), 1200px); }
  .hero-half { min-height: min(calc(50vh / 1.25), 600px); min-height: min(calc(50svh / 1.25), 600px); }
}
@media (min-width: 2800px) {
  html { zoom: 1.5; }
  .hero-full { min-height: min(calc(100vh / 1.5), 1200px); min-height: min(calc(100svh / 1.5), 1200px); }
  .hero-half { min-height: min(calc(50vh / 1.5), 600px); min-height: min(calc(50svh / 1.5), 600px); }
}
@media (min-width: 3200px) {
  html { zoom: 1.75; }
  .hero-full { min-height: min(calc(100vh / 1.75), 1200px); min-height: min(calc(100svh / 1.75), 1200px); }
  .hero-half { min-height: min(calc(50vh / 1.75), 600px); min-height: min(calc(50svh / 1.75), 600px); }
}
@media (min-width: 3600px) {
  html { zoom: 2; }
  .hero-full { min-height: min(50vh, 1200px); min-height: min(50svh, 1200px); }
  .hero-half { min-height: min(25vh, 600px); min-height: min(25svh, 600px); }
}