:root {
  --folio-font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --folio-font-heading: Inter, system-ui, sans-serif;
  --folio-colour-canvas: #ffffff;
  --folio-colour-canvas-alt: #f2f7fb;
  --folio-colour-accent: #1267b1;
  --folio-colour-accent-dark: #0a3a69;
  --folio-colour-accent-soft: #d9edf7;
  --folio-colour-teal: #0f8b8d;
  --folio-colour-green: #5c7f45;
  --folio-colour-accent-text: #ffffff;
  --folio-colour-text: #10233f;
  --folio-colour-muted: #51647d;
  --folio-colour-hairline: #d6e2ec;
  --folio-colour-border: var(--folio-colour-hairline);
  --folio-colour-success: #18794e;
  --folio-colour-warning: #a15c00;
  --folio-colour-danger: #b42318;
  --folio-space-xs: 0.5rem;
  --folio-space-sm: 1rem;
  --folio-space-md: 1.5rem;
  --folio-space-lg: 3rem;
  --folio-space-xl: 4rem;
  --folio-space-xxl: 6rem;
  --folio-radius-none: 0;
  --folio-radius-sm: 0.25rem;
  --folio-radius-md: 0.5rem;
  --folio-radius-lg: 0.75rem;
  --folio-radius-full: 9999px;
  --folio-shadow-sm: 0 1px 2px rgba(20,35,55,.08), 0 10px 24px rgba(20,35,55,.06);
  --folio-shadow-md: 0 24px 58px rgba(16,35,63,.16);
  --folio-container-width: 1240px;
  --folio-reading-width: 72ch;
  --folio-radius: var(--folio-radius-md);
  --folio-type-display-size: clamp(2.8rem, 5vw, 5rem);
  --folio-type-display-weight: 760;
  --folio-type-display-line-height: 1.03;
  --folio-type-heading-weight: 650;
  --folio-type-heading-line-height: 1.15;
  --folio-type-body-size: 1.0625rem;
  --folio-type-body-line-height: 1.68;
  --folio-type-caption-size: 0.875rem;
  --folio-type-caption-letter-spacing: 0;
}

* { box-sizing: border-box; }
body.folio-site { margin: 0; color: var(--folio-colour-text); font-family: var(--folio-font-body); font-size: var(--folio-type-body-size); line-height: var(--folio-type-body-line-height); background: linear-gradient(180deg, #fff 0, #fff 32rem, #f8fbfd 100%); overflow-x: hidden; text-rendering: optimizeLegibility; }
a { color: var(--folio-colour-accent); text-underline-offset: .18em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--folio-colour-teal) 55%, #fff); outline-offset: 3px; border-radius: var(--folio-radius-sm); }
.folio-skip-link { position: absolute; left: 1rem; top: -4rem; background: #fff; padding: .75rem 1rem; z-index: 10; box-shadow: var(--folio-shadow-md); }
.folio-skip-link:focus { top: 1rem; }
.folio-site-header { border-bottom: 1px solid rgba(215,228,240,.85); background: rgb(255 255 255 / 92%); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(16px); box-shadow: 0 12px 30px rgba(16,35,63,.04); }
.folio-site-header-inner { max-width: var(--folio-container-width); margin: 0 auto; display: flex; align-items: center; gap: 1.65rem; padding: .68rem 1.5rem; }
.folio-site-brand { position: relative; font-family: var(--folio-font-heading); font-size: 1.5rem; line-height: 1; font-weight: 900; color: #0b213d; text-decoration: none; display: flex; align-items: center; gap: .55rem; min-width: max-content; letter-spacing: 0; }
.folio-site-brand span { display: inline-block; padding-block: .15rem; }
.folio-site-brand img { height: 1.9rem; width: 1.9rem; object-fit: contain; }
.folio-primary-nav { margin-left: auto; }
.folio-primary-nav ul, .folio-footer-column ul, .folio-breadcrumbs ol { list-style: none; display: flex; gap: 1rem; padding: 0; margin: 0; }
.folio-primary-nav a { color: #223653; text-decoration: none; font-weight: 750; font-size: .94rem; padding: .45rem .1rem; border-bottom: 2px solid transparent; }
.folio-primary-nav a:hover { color: var(--folio-colour-accent); border-bottom-color: var(--folio-colour-accent-soft); }
.folio-primary-nav a[aria-current="page"] { color: var(--folio-colour-accent-dark); border-bottom-color: var(--folio-colour-teal); }
.folio-header-cta, .folio-cover-cta { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--folio-colour-accent), #0d7896); color: var(--folio-colour-accent-text); border-radius: var(--folio-radius); padding: .78rem 1.08rem; text-decoration: none; font-weight: 800; box-shadow: 0 12px 26px rgba(18,103,177,.22); transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.folio-header-cta:hover, .folio-cover-cta:hover { background: linear-gradient(135deg, var(--folio-colour-accent-dark), #0a647c); transform: translateY(-1px); box-shadow: 0 16px 34px rgba(18,103,177,.24); }
.folio-cover-secondary-cta { display: inline-flex; align-items: center; justify-content: center; color: var(--folio-colour-accent-dark); border: 1px solid color-mix(in srgb, var(--folio-colour-accent) 22%, var(--folio-colour-border)); border-radius: var(--folio-radius); padding: .78rem 1.08rem; text-decoration: none; font-weight: 800; background: rgb(255 255 255 / 84%); box-shadow: 0 8px 18px rgba(16,35,63,.06); }
.folio-breadcrumbs { max-width: var(--folio-container-width); margin: 1rem auto; padding: 0 1.25rem; font-size: .9rem; }
.folio-breadcrumbs li + li::before { content: "/"; margin-right: 1rem; color: #667; }
.folio-main { padding: 3rem 1.5rem 5.75rem; }
.folio-layout-landing .folio-main { padding-top: 3.5rem; }
.folio-article { max-width: var(--folio-container-width); margin: 0 auto; }
.folio-article > p, .folio-article > ul, .folio-article > ol, .folio-article > blockquote, .folio-article > pre, .folio-article > table, .folio-article > h2, .folio-article > h3, .folio-article > h4, .folio-article > h5, .folio-article > h6 { max-width: var(--folio-reading-width); }
h1, h2, h3, h4 { font-family: var(--folio-font-heading); line-height: var(--folio-type-heading-line-height); font-weight: var(--folio-type-heading-weight); letter-spacing: 0; }
h1 { font-size: var(--folio-type-display-size); line-height: var(--folio-type-display-line-height); font-weight: var(--folio-type-display-weight); text-wrap: balance; }
h2 { font-size: 2.15rem; margin-top: 3rem; text-wrap: balance; }
.folio-block h2, .folio-block h3 { margin-top: 0; }
.folio-page-header p, .folio-cover p { max-width: 49rem; font-size: 1.22rem; line-height: 1.62; color: var(--folio-colour-muted); }
.folio-cover { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(24rem, .9fr); gap: 4rem; align-items: center; max-width: var(--folio-container-width); margin: 2rem auto 0; padding: 4.25rem 1.5rem; overflow: hidden; }
.folio-layout-landing .folio-cover { max-width: none; margin: 0; padding: 5rem max(1.5rem, calc((100vw - var(--folio-container-width)) / 2)) 4.6rem; background: linear-gradient(130deg, #f8fcff 0%, #eaf4fb 48%, #edf7f2 100%); border-bottom: 1px solid var(--folio-colour-border); }
.folio-layout-landing .folio-cover::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(120deg, rgb(18 103 177 / .08) 1px, transparent 1px), linear-gradient(30deg, rgb(15 139 141 / .06) 1px, transparent 1px); background-size: 5.5rem 5.5rem, 7rem 7rem; mask-image: linear-gradient(90deg, #000 0, rgb(0 0 0 / .66) 42%, transparent 100%); }
.folio-cover > * { position: relative; z-index: 1; }
.folio-cover-eyebrow { margin: 0 0 1rem; color: var(--folio-colour-accent-dark) !important; font-size: .9rem !important; font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
.folio-cover-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.6rem; }
.folio-cover-media { display: block; width: 100%; cursor: zoom-in; }
.folio-cover-image { width: 100%; border-radius: var(--folio-radius-lg); box-shadow: var(--folio-shadow-md); border: 1px solid rgb(255 255 255 / 78%); background: #f5f9fd; }
.folio-layout-landing .folio-cover-image { aspect-ratio: 16 / 11; min-height: 25rem; object-fit: cover; object-position: left center; }
.folio-layout-landing .folio-cover-split .folio-cover-media { width: min(100%, 34rem); max-width: 100%; justify-self: end; }
.folio-layout-landing .folio-cover-split .folio-cover-image { width: 100%; max-width: 100%; height: auto; min-height: 0; aspect-ratio: auto; object-fit: contain; object-position: center; }
.folio-cover-content { max-width: 55rem; min-width: 0; }
.folio-landing-content { max-width: var(--folio-container-width); margin: 0 auto; }
.folio-landing-content > h1 { max-width: 12ch; }
.folio-landing-content > p { max-width: var(--folio-reading-width); }
.folio-toc { border: 1px solid var(--folio-colour-border); border-radius: var(--folio-radius); padding: 1rem 1.25rem; background: var(--folio-colour-canvas-alt); margin: 2rem 0; }
.folio-toc ol { margin: 0; }
.folio-site-footer { background: linear-gradient(145deg, #071a32 0%, #0b213d 54%, #12394d 100%); color: #fff; padding: 4rem 1.5rem; border-top: 4px solid var(--folio-colour-teal); }
.folio-site-footer a { color: #dbeafe; text-decoration-color: rgb(219 234 254 / 38%); }
.folio-footer-brand { max-width: var(--folio-container-width); margin: 0 auto 2.25rem; display: grid; gap: .5rem; }
.folio-footer-brand-name { display: flex; align-items: center; gap: .6rem; color: #fff; font-family: var(--folio-font-heading); font-size: 1.45rem; line-height: 1; font-weight: 900; }
.folio-footer-brand-name img { height: 2.45rem; width: 2.45rem; object-fit: contain; }
.folio-footer-brand p { margin: 0; color: #c5d5e7; max-width: 32rem; }
.folio-footer-columns { max-width: var(--folio-container-width); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2.25rem; }
.folio-footer-column h2, .folio-footer-column h3 { color: #fff; font-size: 1rem; margin: 0 0 .8rem; }
.folio-footer-column ul { display: block; }
.folio-footer-column li + li { margin-top: .4rem; }
.folio-footer-legal { max-width: var(--folio-container-width); margin: 2.25rem auto 0; color: #c5d5e7; font-size: .92rem; border-top: 1px solid rgb(255 255 255 / 14%); padding-top: 1.25rem; }
@media (max-width: 1040px) { .folio-cover { grid-template-columns: minmax(0, 1fr) minmax(18rem, .75fr); gap: 2.5rem; } .folio-primary-nav a { font-size: .9rem; } }
@media (max-width: 940px) { .folio-site-header-inner { align-items: center; flex-wrap: wrap; gap: .9rem 1rem; } .folio-primary-nav { width: 100%; margin-left: 0; order: 3; } .folio-primary-nav ul { flex-wrap: wrap; gap: .7rem 1rem; } h2 { font-size: 1.85rem; } }
@media (max-width: 760px) { body.folio-site { font-size: 1rem; } .folio-main { padding: 2rem 1rem 4rem; } .folio-layout-landing .folio-main { padding-top: 2.25rem; } .folio-site-header-inner { display: grid; grid-template-columns: 1fr; padding: .8rem 1rem; } .folio-site-brand { min-width: 0; font-size: 1.45rem; } .folio-site-brand img { height: 1.8rem; width: 1.8rem; object-fit: contain; } .folio-header-cta { width: 100%; max-width: 22rem; padding: .7rem .8rem; font-size: .92rem; text-align: center; } .folio-primary-nav { grid-column: 1 / -1; max-width: 22rem; overflow-x: visible; padding-bottom: .1rem; } .folio-primary-nav ul { flex-wrap: wrap; min-width: 0; gap: .4rem .9rem; } .folio-primary-nav a { font-size: .9rem; padding-block: .25rem; } h1 { max-width: 100%; font-size: 2.15rem; line-height: 1.12; overflow-wrap: anywhere; } h2 { font-size: 1.65rem; } .folio-cover { grid-template-columns: 1fr; gap: 2rem; } .folio-layout-landing .folio-cover { padding: 3rem 1rem 3.25rem; } .folio-layout-landing .folio-cover::before { opacity: .55; } .folio-cover-content, .folio-cover p, .folio-cover-actions { width: 100%; max-width: 22rem; } .folio-layout-landing .folio-cover-image, .folio-layout-landing .folio-cover-split .folio-cover-image, .folio-layout-landing .folio-cover-split:first-child .folio-cover-image { width: 100%; max-width: 22rem; height: auto; min-height: 0; aspect-ratio: 16 / 10; justify-self: start; } .folio-cover-actions { align-items: stretch; } .folio-cover-actions a { width: 100%; text-align: center; } }
@media (max-width: 560px) { .folio-article, .folio-landing-content, .folio-page-header, .folio-landing-content > .folio-block, .folio-section, .folio-cards, .folio-listing, .folio-specs, .folio-cta { width: 100%; max-width: 22rem; margin-left: 0; margin-right: auto; } .folio-section-wide { width: 100%; } .folio-card, .folio-listing-item article, .folio-spec { max-width: 100%; } .folio-article > p, .folio-article > ul, .folio-article > ol, .folio-article > blockquote, .folio-article > pre, .folio-article > table, .folio-article > h2, .folio-article > h3, .folio-article > h4, .folio-article > h5, .folio-article > h6 { max-width: 22rem; } }
@media (max-width: 480px) { .folio-site-header-inner { grid-template-columns: 1fr; } .folio-header-cta { width: 100%; max-width: none; } .folio-primary-nav { overflow-x: visible; } .folio-primary-nav ul { flex-wrap: wrap; min-width: 0; gap: .35rem .75rem; } .folio-primary-nav a { font-size: .84rem; padding-block: .25rem; } h1 { max-width: 22rem; font-size: 2.05rem; line-height: 1.12; overflow-wrap: break-word; } .folio-layout-landing .folio-cover { width: 100%; } .folio-cover-content, .folio-cover p, .folio-cover-actions { width: 100%; max-width: 22rem; } .folio-layout-landing .folio-cover-image { width: 100%; max-width: 22rem; justify-self: start; } .folio-page-header p, .folio-cover p { font-size: 1.05rem; } }
