/* Polyfusion Labs — static site styles
   Rebuilt from the Squarespace 7.1 site (Nov 2026). Layout grids inside each section are
   the original Fluid Engine grid rules, kept verbatim in each page; this file supplies the
   site-wide styles Squarespace used to provide, plus the site's own custom CSS. */

/* ---------- Fonts (self-hosted, SIL Open Font Licence — see /assets/fonts/) ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/raleway-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  --sqs-site-max-width: 1500px;
  --sqs-site-gutter: 4vw;
  --sqs-mobile-site-gutter: 6vw;
  --container-width: min(var(--sqs-site-max-width), calc(100vw - var(--sqs-site-gutter) * 2));
  --blue: #4B9FD4; --blue-hover: #3E92C9; --blue-ink: #1C6BA8;
  --gold: #C9A84C; --ink: #000; --ink-soft: #1E3A5F;
  --font-head: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-nav: 'Raleway', system-ui, sans-serif;
  --h1: clamp(2.5rem, 1.6rem + 3.9vw, 4.78rem);
  --h2: clamp(2.05rem, 1.45rem + 2.4vw, 3.205rem);
  --h3: clamp(1.5rem, 1.15rem + 1.1vw, 2.05rem);
  --h4: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
  --p: clamp(1.05rem, .98rem + .3vw, 1.21rem);
  --p-large: clamp(1.15rem, 1.02rem + .5vw, 1.42rem);
  --p-small: clamp(.9rem, .86rem + .15vw, 1rem);
}
@media (max-width: 767px) { :root { --container-width: calc(100vw - var(--sqs-mobile-site-gutter) * 2); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--font-body); font-weight: 500;
  font-size: var(--p); line-height: 1.5; letter-spacing: .01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:not(.sqs-block-button-element):not(.btn):hover { color: var(--blue-ink); }
:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: #fff; padding: 12px 16px; z-index: 1000; }
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Typography (Squarespace site styles, measured from the live site) ---------- */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; color: inherit; margin: 0 0 .5em; }
h1 { font-size: var(--h1); line-height: 1.03; letter-spacing: -.05em; }
h2 { font-size: var(--h2); line-height: 1.1; letter-spacing: -.05em; }
h3 { font-size: var(--h3); line-height: 1.15; letter-spacing: -.05em; }
h4 { font-size: var(--h4); line-height: 1.25; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.sqsrte-large { font-size: var(--p-large); line-height: 1.5; }
.sqsrte-small { font-size: var(--p-small); line-height: 1.6; }
/* from the site's custom CSS */
.sqs-html-content h1::after, .sqs-html-content h2::after { content: ""; display: block; width: 64px; height: 4px; background: var(--gold); border-radius: 4px; margin-top: 16px; }
.sqs-html-content [style*="text-align:center"] + *::after, .sqs-html-content h1[style*="text-align:center"]::after, .sqs-html-content h2[style*="text-align:center"]::after { margin-left: auto; margin-right: auto; }
.sqs-html-content h1[style*="text-align:right"]::after, .sqs-html-content h2[style*="text-align:right"]::after { margin-left: auto; }
ol li::marker, ul li::marker { color: var(--gold); }
.sqs-html-content ul, .sqs-html-content ol { margin: 0 0 1em; padding-left: 1.4em; }
.sqs-html-content li { margin: .25em 0; }
.sqs-html-content li > p { margin: 0; }
.sqs-html-content a { text-decoration: underline; text-underline-offset: .15em; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 50; border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg, #4b9fd4 0%, #c9a84c 100%) 1; background: transparent; }
.site-header__inner { display: flex; align-items: center; gap: 48px; min-height: 77px; padding: 0 4vw; max-width: 1500px; margin: 0 auto; }
.site-header__logo img { width: 200px; height: auto; }
.site-nav { display: flex; gap: 53px; align-items: center; flex-wrap: wrap; }
.site-nav a { font-family: var(--font-nav); font-size: 1.21rem; font-weight: 500; letter-spacing: .01em; text-decoration: none; color: #000;
  background-image: linear-gradient(#000, #000); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s; padding-bottom: 2px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background-size: 100% 1px; color: #000; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 28px; height: 2px; background: #000; margin: 6px 0; transition: transform .2s, opacity .2s; }
@media (max-width: 1023px) {
  .site-header__inner { gap: 16px; min-height: 68px; }
  .site-header__logo img { width: 150px; }
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; align-items: flex-start;
    gap: 0; padding: 8px 6vw 24px; box-shadow: 0 12px 24px rgba(0,0,0,.08); }
  .site-nav a { display: block; padding: 14px 0; font-size: 1.35rem; width: 100%; }
  .site-header.is-open .site-nav { display: flex; }
  .site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* ---------- Sections ---------- */
.page-section { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.page-section > .section-background { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.page-section > .section-background img { width: 100%; height: 100%; object-fit: cover; }
.page-section > .content-wrapper { position: relative; z-index: 1; width: 100%; }
.section-height--small > .content-wrapper { padding-top: 3.3vmax; padding-bottom: 3.3vmax; }
.section-height--medium > .content-wrapper { padding-top: 6.6vmax; padding-bottom: 6.6vmax; }
.section-height--large > .content-wrapper { padding-top: 10vmax; padding-bottom: 10vmax; }

/* Section colour themes (Squarespace themes used on this site) */
[data-section-theme="white"], [data-section-theme="white-bold"], [data-section-theme="light"], [data-section-theme="bright"] { color: #000; }
[data-section-theme="white"] > .section-background { background: #fff; }
[data-section-theme="white-bold"] > .section-background { background: #fafafa; }
[data-section-theme="light"] > .section-background { background: #f2f2f2; }
[data-section-theme="bright"] > .section-background { background: #e9e9e9; }
[data-section-theme="black"] { color: #fff; }
[data-section-theme="black"] > .section-background { background: #000; }
[data-section-theme="black"] .sqs-html-content h1, [data-section-theme="black"] .sqs-html-content h2,
[data-section-theme="black"] .sqs-html-content h3, [data-section-theme="black"] .sqs-html-content p { color: #fff; }

/* The live site uses Squarespace's animated "background art". It cannot be exported, so these are
   static approximations of the same soft grey light shapes. */
.art-spotlight > .section-background { background:
  radial-gradient(ellipse 34% 55% at 50% 58%, #fff 0 52%, rgba(255,255,255,0) 72%),
  radial-gradient(ellipse 70% 90% at 50% 40%, #f1f1f1 0 40%, #d8d8d8 100%); }
.art-arcs > .section-background { background:
  radial-gradient(circle at 0% 100%, rgba(255,255,255,.55) 0 22%, rgba(255,255,255,0) 22.3%),
  radial-gradient(ellipse 120% 60% at 50% 115%, rgba(255,255,255,.7) 0 45%, rgba(255,255,255,0) 45.4%),
  linear-gradient(180deg, #e3e3e3, #dadada); }
.art-glow > .section-background { background:
  radial-gradient(ellipse 55% 75% at 62% 45%, #fff 0 30%, rgba(255,255,255,0) 70%), #dcdcdc; }
.art-bokeh > .section-background { background:
  radial-gradient(circle at 18% 22%, rgba(255,255,255,.9) 0 3px, transparent 4px),
  radial-gradient(circle at 72% 14%, rgba(255,255,255,.8) 0 5px, transparent 6px),
  radial-gradient(circle at 44% 63%, rgba(255,255,255,.85) 0 4px, transparent 5px),
  radial-gradient(circle at 86% 71%, rgba(255,255,255,.7) 0 7px, transparent 8px),
  radial-gradient(circle at 9% 84%, rgba(255,255,255,.75) 0 5px, transparent 6px),
  radial-gradient(circle at 57% 36%, rgba(255,255,255,.6) 0 9px, transparent 10px),
  radial-gradient(ellipse 80% 70% at 50% 40%, #f0f0f0, #d9d9d9); }
.art-strokes > .section-background { background:
  repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 140px, rgba(255,255,255,.55) 140px 158px, rgba(255,255,255,0) 158px 320px),
  #dadada; }
/* Live site: white text on pale animated art (hard to read). Darker static stand-in keeps the white text legible. */
.art-dark > .section-background { background:
  radial-gradient(ellipse 70% 80% at 30% 20%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%),
  linear-gradient(160deg, #6f7c89, #4f5b67); }
.art-streaks > .section-background { background:
  linear-gradient(115deg, rgba(255,255,255,0) 0 30%, rgba(255,255,255,.55) 30% 32%, rgba(255,255,255,0) 32% 55%, rgba(255,255,255,.45) 55% 58%, rgba(255,255,255,0) 58%),
  #dedede; }

/* ---------- Fluid Engine (Squarespace's grid; per-section and per-block rules are inline in each page) ---------- */
.fluid-engine { position: relative; }
.fe-block { position: relative; display: flex; min-width: 0; }
.fe-block > .sqs-block { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; }
.fe-block .sqs-block-content { width: 100%; flex: var(--sqs-block-content-flex, 0 0 auto); }
.sqs-block-alignment-wrapper { display: flex; flex-direction: column; }
/* image blocks */
.sqs-block-image .sqs-block-content, .fluid-image-component-root, .fluid-image-animation-wrapper,
.fluid-image-container, .js-content-mode-element-wrapper, .sqs-block-image-link, .content-fill { width: 100%; height: 100%; }
.fluid-image-component-root { position: relative; }
.fluid-image-container { position: relative; overflow: hidden; }
.sqs-block-image-link, .content-fill { display: block; }
/* Images fill their grid cell but must not size it (as on Squarespace) — so they are taken out of flow. */
.fluid-image-container img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--image-component-object-fit, cover); object-position: var(--image-component-focal-point, 50% 50%); }
.image-caption { margin-top: .5em; font-size: var(--p-small); }

/* Buttons (site custom CSS) */
.sqs-block-button-container { display: flex; width: 100%; height: 100%; }
.sqs-block-button-container--left { justify-content: flex-start; }
.sqs-block-button-container--center { justify-content: center; }
.sqs-block-button-container--right { justify-content: flex-end; }
.sqs-block-button-element, .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 48px;
  background-color: var(--blue); color: #fff; border: 0; border-radius: 7px; font-family: var(--font-head); font-weight: 500;
  font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; text-align: center;
  transition: background-color .2s, transform .15s; }
.sqs-block-button-element:hover, .btn:hover { background-color: var(--blue-hover); color: #fff; transform: translateY(-1px); }
.sqs-block-button-container.sqs-stretched .sqs-block-button-element { width: 100%; height: 100%; }

/* Code blocks carry their own scoped styles (copied verbatim from the live site) */
.sqs-block-code .sqs-block-content { height: 100%; }

/* Where the live site had a Squarespace form: email call-to-action instead */
.fe-block .sqs-block.sqs-block-form { justify-content: center !important; }
.contact-cta { background: rgba(255,255,255,.88); color: #000; border: 1px solid #d6dde4; border-radius: 12px; padding: clamp(20px, 3vw, 36px); }
.contact-cta p a { color: var(--blue-ink); }
.contact-cta p { margin: 0 0 18px; }
.contact-cta .btn { text-transform: none; letter-spacing: .01em; }

/* ---------- Footer ---------- */
.site-footer { position: relative; }

/* ---------- Mobile: Fluid Engine switches to its 8-column grid at <768px (inline rules) ---------- */
@media (max-width: 767px) {
  .section-height--small > .content-wrapper { padding-top: 6vmax; padding-bottom: 6vmax; }
  .section-height--medium > .content-wrapper { padding-top: 9vmax; padding-bottom: 9vmax; }
  .section-height--large > .content-wrapper { padding-top: 12vmax; padding-bottom: 12vmax; }
  .sqs-block-button-element, .btn { padding: 0 28px; min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }