*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  html {
    scroll-behavior: smooth;
    /* Offset anchor jumps so the sticky header doesn't cover section titles. */
    scroll-padding-top: 5rem;
  }
  @media (min-width: 1024px) {
    html { scroll-padding-top: 6.5rem; }
  }
  body {
  --tw-bg-opacity: 1;
  background-color: rgb(242 245 248 / var(--tw-bg-opacity, 1));
  font-family: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(51 51 51 / var(--tw-text-opacity, 1));
}
  /* Headings inherit color from their parent so the same H1 renders correctly
     on dark hero backgrounds (white) and light body sections (brand-ink-soft).
     Font-weight and font-family are set; color stays inherited. */
  h1, h2, h3, h4 {
  font-family: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  font-weight: 700;
}
  
h1h1, h2h1, h3h1, h4h1,
h1 h2, h2 h2, h3 h2, h4 h2,
h1 h3, h2 h3, h3 h3, h4 h3,
h1 h4, h2 h4, h3 h4, h4 h4 { font-weight: 500; }
  h1, h2, h3, h4 { color: inherit; }
  h1 { letter-spacing: -0.022em; }
  h2 { letter-spacing: -0.018em; }
  h3 { letter-spacing: -0.012em; }

  /* Smooth tabular numerals for price rendering */
  .tabular-nums { font-variant-numeric: tabular-nums; }

  /* Long-form reading rhythm.
     The theme ships without @tailwindcss/typography, so `prose-lg` in the
     templates resolves to nothing and body copy fell back to the 16px/1.5 base.
     Set the reading size and leading explicitly. */
  .prose {
    font-size: 1.0625rem;
    line-height: 1.7;
  }

  /* Body prose measure — readable line length (~65ch). Applies inside .prose blocks
     that do not opt out via .prose--wide. */
  .prose :where(p, ul, ol, blockquote):not(:where([class~="not-prose"] *)) {
    max-width: 65ch;
  }
  /* prose--wide is the two-column explainer variant, where the column is meant
     to do the measure work. It doesn't: a half of the 1200px container runs to
     ~80 characters. Cap it rather than leaving it unbounded. */
  .prose.prose--wide :where(p, ul, ol, blockquote) { max-width: 72ch; }

  /* Vertical rhythm: theme's .prose ships without @tailwindcss/typography, so
     paragraph and list margins need explicit rules — otherwise multi-paragraph
     rich_text bodies render as a single dense block. */
  /* The gap between paragraphs must exceed the line height, or paragraphs read
     as one block. At 1.7 leading, 1em was smaller than a single line. */
  .prose :where(p, ul, ol, blockquote):not(:where([class~="not-prose"] *)) {
    margin: 1.35em 0;
  }
  .prose > :where(p, ul, ol, blockquote, h2, h3, h4):first-child { margin-top: 0; }
  .prose > :where(p, ul, ol, blockquote):last-child { margin-bottom: 0; }
  .prose :where(ul, ol):not(:where([class~="not-prose"] *)) { padding-left: 1.5em; }
  .prose :where(ul):not(:where([class~="not-prose"] *)) { list-style: disc; }
  .prose :where(ol):not(:where([class~="not-prose"] *)) { list-style: decimal; }
  /* Lettered clauses — the Terms cross-reference "clause 4(d)". */
  .prose ol[type="a"] { list-style-type: lower-alpha; }
  .prose :where(li):not(:where([class~="not-prose"] *)) { margin: 0.4em 0; }
  .prose :where(h2):not(:where([class~="not-prose"] *)) {
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
  }
  .prose :where(h3):not(:where([class~="not-prose"] *)) {
    margin-top: 1.4em;
    margin-bottom: 0.5em;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
  }
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
@media (min-width: 1200px) {

  .container {
    max-width: 1200px;
  }
}
@media (min-width: 1320px) {

  .container {
    max-width: 1320px;
  }
}
.container-hpc {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 1024px) {

  .container-hpc {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
/* Wider gutter for full-bleed heroes: the 1200px content column left a huge
     empty margin on either side of the headline on a large screen, which read
     as a floating centred box rather than a hero. */
.container-hero {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1560px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 640px) {

  .container-hero {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1024px) {

  .container-hero {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }
}
@media (min-width: 1280px) {

  .container-hero {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
/* Full-bleed hero scrim.
     Wide screens: the copy column ends around 60% of the viewport, so the scrim
     is horizontal and the right-hand two fifths of the film stay untouched.
     Below lg the copy runs the full width, so a horizontal falloff leaves the
     eyebrow and the tail of the subtitle sitting on bare daylight — there the
     scrim becomes vertical, dark through the copy and clearing at the foot. */
.hero-scrim {
    background-image: linear-gradient(
      180deg,
      rgba(18, 20, 22, 0.82) 0%,
      rgba(18, 20, 22, 0.74) 45%,
      rgba(18, 20, 22, 0.55) 78%,
      rgba(18, 20, 22, 0.35) 100%
    );
  }
@media (min-width: 1024px) {
    .hero-scrim {
      background-image: linear-gradient(
        90deg,
        rgba(18, 20, 22, 0.82) 0%,
        rgba(18, 20, 22, 0.68) 32%,
        rgba(18, 20, 22, 0.34) 58%,
        rgba(18, 20, 22, 0.06) 82%,
        rgba(18, 20, 22, 0) 100%
      );
    }
  }
/* ── The hero system ──────────────────────────────────────────────────
     Hero height used to be decided by whether anyone had happened to supply
     a photograph: a page with art got a 68vh full-bleed band, a page without
     got a 36-unit ink panel with an empty right half. Nothing chose either.
     That is why the heroes read as an accident rather than a system.

     FOUR NAMED HEIGHTS, and the rule for which page type gets which:

       film     The home page only. The hero film given room to be a film.
       feature  A section or product landing that carries a photograph:
                /3dgait/ /visfrailty/ /evidence/ /insights/ /stories/
                /applications/ and the four clinical application pages.
       page     A page whose work starts below the fold — /request-a-demo/,
                /faq/, /company/, category archives. Enough band to seat a
                headline and a sentence, and no more.
       brief    A statement page: privacy, terms, accessibility.

     Each is a min-height PLUS its own padding, so a long headline on a
     narrow screen grows the band rather than overflowing it, and the
     four sizes stay distinguishable at every width.

     TWO TONES. `ink` is the dark ground, for a photograph with its own
     dark subject and for the film. `day` is Direction A's own ground —
     #FBFCFD, #0B2E4C headline, hairline base rule — used both for the
     bright clinical photography (evidence.jpg, insights.jpg are near-white
     with the copy space on the left) and, on a page that genuinely carries
     no photograph, on its own. A page with no art gets the daylight ground
     and a measurement graticule, not a dark band with an empty half. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: 10;
  width: 100%;
}
.hero--film    { min-height: clamp(30rem, 76vh, 48rem); }
.hero--feature { min-height: clamp(20rem, 46vh, 29rem); }
.hero--page    { min-height: clamp(15rem, 32vh, 20rem); }
.hero--brief   { min-height: clamp(11rem, 22vh, 15rem); }
/* The fixed header is 72–76px, so every hero clears it before its own
     top padding starts. */
.hero--film .hero__inner {
  padding-top: 7rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 640px) {

  .hero--film .hero__inner {
    padding-top: 8rem;
    padding-bottom: 5rem;
  }
}
@media (min-width: 1024px) {

  .hero--film .hero__inner {
    padding-top: 9rem;
    padding-bottom: 6rem;
  }
}
.hero--feature .hero__inner {
  padding-top: 7rem;
  padding-bottom: 3rem;
}
@media (min-width: 640px) {

  .hero--feature .hero__inner {
    padding-top: 8rem;
    padding-bottom: 3.5rem;
  }
}
@media (min-width: 1024px) {

  .hero--feature .hero__inner {
    padding-top: 9rem;
    padding-bottom: 4rem;
  }
}
.hero--page .hero__inner {
  padding-top: 7rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 640px) {

  .hero--page .hero__inner {
    padding-top: 8rem;
    padding-bottom: 3rem;
  }
}
@media (min-width: 1024px) {

  .hero--page .hero__inner {
    padding-top: 8rem;
    padding-bottom: 3.5rem;
  }
}
.hero--brief .hero__inner {
  padding-top: 7rem;
  padding-bottom: 2rem;
}
@media (min-width: 640px) {

  .hero--brief .hero__inner {
    padding-top: 8rem;
    padding-bottom: 2.5rem;
  }
}
@media (min-width: 1024px) {

  .hero--brief .hero__inner {
    padding-top: 8rem;
    padding-bottom: 3rem;
  }
}
/* Headline scale is part of the height, not a separate decision. */
.hero__title {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

h1.hero__title, h2.hero__title, h3.hero__title, h4.hero__title { font-weight: 500; }
.section-title.hero__title { color: #fff; }
.hero__title {
    letter-spacing: -0.02em;
  }
.hero--film .hero__title    { font-size: clamp(2.25rem, 1.35rem + 3.5vw, 4rem);    line-height: 1.05; }
.hero--feature .hero__title { font-size: clamp(2rem, 1.35rem + 2.4vw, 3.25rem);    line-height: 1.08; }
.hero--page .hero__title    { font-size: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem); line-height: 1.1; }
.hero--brief .hero__title   { font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.125rem); line-height: 1.15; }
.hero__sub {
  line-height: 1.625;
  color: rgb(255 255 255 / 0.85);
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem);
}
.hero--page .hero__sub, .hero--brief .hero__sub {
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  }
/* Daylight tone. Direction A's own ground. */
.hero--day {
    background-color: #FBFCFD;
    border-bottom: 1px solid #DCE4EC;
  }
.hero--day .hero__title { color: #0B2E4C; text-shadow: none; }
.hero--day .hero__sub   { color: #3B546B; text-shadow: none; }
.hero--day .eyebrow,
  .hero--day .eyebrow.eyebrow-on-dark { color: #115A95; text-shadow: none; }
.hero--day .eyebrow::before,
  .hero--day .eyebrow.eyebrow-on-dark::before { background-color: rgba(17, 90, 149, 0.6); }
/* The considered ground for a page that carries no photograph: the
     instrument graticule, in the brand blue at 4%, held off the copy column
     by a mask so it never sits behind a word. */
.hero--day.hero--plain::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><path d='M56 0H0v56' fill='none' stroke='%23115A95' stroke-opacity='0.09' stroke-width='1'/></svg>");
    -webkit-mask-image: linear-gradient(105deg, transparent 0%, transparent 38%, #000 78%, #000 100%);
            mask-image: linear-gradient(105deg, transparent 0%, transparent 38%, #000 78%, #000 100%);
    pointer-events: none;
  }
/* And a measurement rule at the foot of the copy — the same hairline-plus-
     ticks the report pages use. It is the tell that this is an instrument
     company, and it costs one element. */
/* The rule that closes a hero with nothing else in it. It was a hairline
     with descending ticks, which at this size read as a broken dashed line
     rather than as a measurement scale. One definite 2px rule instead. */
.hero__rule {
  margin-top: 2.25rem;
  height: 0.125rem;
  width: 4rem;
  --tw-bg-opacity: 1;
  background-color: rgb(17 90 149 / var(--tw-bg-opacity, 1));
}
.hero--ink .hero__rule {
  background-color: rgb(255 255 255 / 0.5);
}
/* Daylight scrim over a bright photograph. Same geometry as .hero-scrim,
     inverted: the ground colour comes forward instead of the ink. */
.hero-scrim--day {
    background-image: linear-gradient(
      180deg,
      rgba(251, 252, 253, 0.95) 0%,
      rgba(251, 252, 253, 0.90) 46%,
      rgba(251, 252, 253, 0.74) 78%,
      rgba(251, 252, 253, 0.58) 100%
    );
  }
@media (min-width: 1024px) {
    .hero-scrim--day {
      background-image: linear-gradient(
        90deg,
        rgba(251, 252, 253, 0.96) 0%,
        rgba(251, 252, 253, 0.90) 34%,
        rgba(251, 252, 253, 0.58) 60%,
        rgba(251, 252, 253, 0.14) 84%,
        rgba(251, 252, 253, 0) 100%
      );
    }
  }
/* Contrast without darkening the photograph into mud. */
.hero-copy h1,
  .hero--ink .hero__title {
    text-shadow: 0 2px 24px rgba(15, 15, 15, 0.55), 0 1px 3px rgba(15, 15, 15, 0.45);
  }
.hero-copy p,
  .hero--ink .hero__sub {
    text-shadow: 0 1px 14px rgba(15, 15, 15, 0.6);
  }
/* On a solid ink panel primary-200 is the right weight for an eyebrow. Over a
     film it is a pale blue on daylight and fails at 12px. One step lighter, plus
     the same shadow the rest of the hero copy carries. */
.hero-copy .eyebrow.eyebrow-on-dark {
    color: #CBDDEB;
    text-shadow: 0 1px 10px rgba(15, 15, 15, 0.7);
  }
.hero-copy .eyebrow.eyebrow-on-dark::before {
    background-color: rgba(203, 221, 235, 0.8);
  }
/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  --tw-bg-opacity: 1;
  background-color: rgb(29 188 236 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 0 0 1px rgba(29,188,236,0.45);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: #1DBCEC;
  --tw-shadow: var(--tw-shadow-colored);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

h1.btn-primary, h2.btn-primary, h3.btn-primary, h4.btn-primary { font-weight: 500; }
.section-title.btn-primary { color: #fff; }
.btn-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 159 202 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 0 0 1px #DCE4EC, 0 12px 32px -24px rgba(11,26,38,0.35);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 12px 32px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn-primary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.btn-primary:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(29 188 236 / 0.4);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.7);
  background-color: rgb(255 255 255 / 0.05);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

h1.btn-secondary, h2.btn-secondary, h3.btn-secondary, h4.btn-secondary { font-weight: 500; }
.section-title.btn-secondary { color: #fff; }
.btn-secondary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 26 38 / var(--tw-text-opacity, 1));
}
.btn-secondary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.btn-secondary:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(255 255 255 / 0.3);
}
/* Outline CTA for light-background sections (rich_text callouts, etc.) */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 4px;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(17 90 149 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(17 90 149 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

h1.btn-outline, h2.btn-outline, h3.btn-outline, h4.btn-outline { font-weight: 500; }
.btn-outline:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(17 90 149 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  --tw-shadow: 0 0 0 1px rgba(17,90,149,0.35);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: #115A95;
  --tw-shadow: var(--tw-shadow-colored);
}
.btn-outline:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.btn-outline:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(17 90 149 / 0.25);
}
.btn-outline .arrow {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
    display: inline-block;
}
.btn-outline:hover .arrow,
  .btn-outline:focus-visible .arrow {
    transform: translateX(4px);
  }
/* Inline prose links inside FAQ answers: readable without a persistent
     underline (which competes with the button-style CTA at the end of the
     answer), but with a clear hover affordance. */
.faq-answer.prose :where(a):not(:where(.btn-outline, [class~="not-prose"] *)) {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(17 90 149 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0 100%;
    transition: background-size 250ms ease, color 150ms ease;
}
.faq-answer.prose :where(a):not(:where(.btn-outline, [class~="not-prose"] *)):hover,
  .faq-answer.prose :where(a):not(:where(.btn-outline, [class~="not-prose"] *)):focus-visible {
    background-size: 100% 1px;
    color: #0B3E66;
  }
/* Wrapper lifted out of a prose <p> so the outline CTA sits with clear
     vertical breathing room instead of hugging the paragraph above it. */
.cta-row {
  margin-top: 1.5rem;
}
@media (min-width: 1024px) {

  .cta-row {
    margin-top: 2rem;
  }
}
.cta-row + .cta-row {
  margin-top: 0.75rem;
}
/* Section rhythm.
     docs/design-dna.md sets the vertical scale at 8/16/24/48/96. These were 112
     and 80, which are on no scale at all, and because the rhythm also alternates
     the ground on every section (see cc_section_classes) each boundary was
     doing its job twice over — a tone change AND 224px of air. On a 900px
     screen that is a quarter of the viewport of nothing between every pair of
     sections, and short sections like "Meet the team" ended up with more
     padding than content. Now 96 airy / 64 tight: both on the declared scale,
     and the ground change is still there to divide them. */
.section {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 640px) {

  .section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@media (min-width: 1024px) {

  .section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
.section-tight {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 640px) {

  .section-tight {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
@media (min-width: 1024px) {

  .section-tight {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
/* When two same-tone sections stack (e.g. multiple FAQ groups), collapse the
     inner gap so visitors don't feel the "hall of groups" effect. Apply via
     PHP on second-onward occurrences of the same block type. */
.section-stack { padding-top: 0 !important; }
.section-stack:has(+ .section-stack) { padding-bottom: 1.5rem !important; }
.section:has(+ .section-stack), .section-tight:has(+ .section-stack) { padding-bottom: 1.5rem !important; }
/* Eyebrow tags */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(17 90 149 / var(--tw-text-opacity, 1));
}

h1.eyebrow, h2.eyebrow, h3.eyebrow, h4.eyebrow { font-weight: 500; }
.eyebrow::before {
    content: '';
    display: block;
    height: 1px;
    width: 1.5rem;
    background-color: rgb(17 90 149 / 0.6);
  }
.eyebrow.eyebrow-on-dark {
  --tw-text-opacity: 1;
  color: rgb(157 190 214 / var(--tw-text-opacity, 1));
}
.eyebrow.eyebrow-on-dark::before {
  background-color: rgb(94 150 184 / 0.7);
}
.eyebrow.eyebrow-plain::before { content: none; }
/* Section header (eyebrow + h2 + intro) */
.section-header {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3.5rem;
  max-width: 42rem;
}
.section-header > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.section-header {
  text-align: center;
}
@media (min-width: 1024px) {

  .section-header {
    margin-bottom: 4rem;
  }
}
.section-header--left {
  margin-left: 0px;
  margin-right: 0px;
  text-align: left;
}
.section-title {
  font-weight: 700;
  line-height: 1.14;
  --tw-text-opacity: 1;
  color: rgb(11 26 38 / var(--tw-text-opacity, 1));
}

h1.section-title, h2.section-title, h3.section-title, h4.section-title { font-weight: 500; }
.section-title {
    /* Fluid scale: 1.875rem (30px) on small screens → 2.5rem (40px) on xl */
    font-size: clamp(1.875rem, 1.35rem + 1.8vw, 2.5rem);
  }
.section-title--xl {
    /* Fluid scale: 2.25rem (36px) → 3rem (48px) */
    font-size: clamp(2.25rem, 1.6rem + 2.1vw, 3rem);
  }
.section-intro {
  line-height: 1.625;
  color: rgb(11 26 38 / 0.7);
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
}
/* Decorative accents */
.accent-bar {
  height: 0.25rem;
  width: 3rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(17 90 149 / var(--tw-bg-opacity, 1));
}
/* Hero-specific background layers */
.hero-ink {
  position: relative;
  overflow: hidden;
  background-image: radial-gradient(ellipse 70% 60% at 8% 0%, rgba(17,90,149,0.30) 0%, rgba(17,90,149,0) 62%), linear-gradient(180deg, #1F1F1F 0%, #141414 100%);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.section-title.hero-ink { color: #fff; }
.hero-ink::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M40 0H0v40' fill='none' stroke='white' stroke-opacity='0.04' stroke-width='1'/></svg>");
    pointer-events: none;
  }
/* No coloured glow. Depth on an ink panel comes from the graticule and a
     hairline, never a blurred blob — see docs/design-dna.md. */
.hero-ink::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: rgba(255,255,255,0.14);
    pointer-events: none;
  }
/* Bone surface section. Flat — the surface change IS the elevation. */
.section-soft {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(242 245 248 / var(--tw-bg-opacity, 1)); --cc-panel: #FFFFFF; background-color: #F5F9FC;
}
.section-soft > * { position: relative; }
/* Card base styles.
     A card is a paper (or bone) plane inside a hairline box — no shadow, no
     radius beyond the 4px ceiling. It reads against whichever ground the
     section rhythm put it on via --cc-panel. */
.card-surface {
  position: relative;
  border-radius: 3px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(220 228 236 / var(--tw-border-opacity, 1));
  background-color: var(--cc-panel);
}
/* Hover is a rule, not a lift. A 2px signal-blue rule crossing the top edge is
     the same gesture as a trace crossing a graticule — and it means the card
     is a link, which the old shadow-and-float never actually said. */
.card-surface-hover {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.card-surface-hover:hover {
  border-color: rgb(11 26 38 / 0.25);
}
.card-surface-hover::after {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 2px;
    background: #1DBCEC;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
.card-surface-hover:hover::after,
  .card-surface-hover:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .card-surface-hover::after { transition: none; }
  }
/* ---------- Resource "book" card ---------- */
/* A portrait book with spine, stacked pages, and a tilt-open 3D hover.
     Used via feature_grid with `variant: 'book'` on /resources-library. */
.book-card {
    perspective: 1600px;
    perspective-origin: 60% 40%;
    /* Keep the tilted cover from being clipped by the parent grid gap. */
    padding-bottom: 4px;
  }
.book {
    position: relative;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    aspect-ratio: 5 / 7;       /* Book cover proportions. */
    transform-style: preserve-3d;
    transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
.book-card:hover .book { transform: translateY(-4px); }
.book__cover {
    position: absolute;
    inset: 0;
    border-radius: 3px 12px 12px 3px;   /* Slightly rounded outer corner. */
    background: #0B1A26;
    overflow: hidden;
    transform-origin: left center;
    transform: rotateY(-2deg);
    transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 500ms ease;
    box-shadow:
      2px 4px 10px rgba(26,26,26, 0.18),
      6px 12px 30px rgba(26,26,26, 0.25),
      inset -1px 0 0 rgba(255, 255, 255, 0.05);
    z-index: 2;
  }
.book-card:hover .book__cover,
  .book-card:focus-visible .book__cover {
    transform: rotateY(-34deg);
    box-shadow:
      4px 8px 16px rgba(26,26,26, 0.22),
      14px 22px 44px rgba(26,26,26, 0.32),
      inset -1px 0 0 rgba(255, 255, 255, 0.06);
  }
.book__cover-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
.book__cover-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    padding: 1.25rem;
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    background: linear-gradient(145deg, #0B1A26 0%, #2C2C2C 100%);
  }
/* Darker inner ridge along the spine (left edge) of the cover. */
.book__spine {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 10px;
    background:
      linear-gradient(to right,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0.14) 45%,
        rgba(255, 255, 255, 0.05) 80%,
        rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
  }
/* Stacked page edges sticking out under/right of the cover. */
.book__pages {
    position: absolute;
    top: 4px; right: -5px; bottom: 4px;
    width: 6px;
    background:
      repeating-linear-gradient(
        to bottom,
        #ffffff 0 1px,
        #e3e9f0 1px 2px
      );
    border-radius: 0 3px 3px 0;
    box-shadow: 1px 0 2px rgba(26,26,26, 0.15);
    z-index: 1;
  }
/* Back page peeking from behind the cover when it tilts open. */
.book__back {
    position: absolute;
    inset: 0;
    border-radius: 3px 12px 12px 3px;
    background:
      linear-gradient(135deg, #f4f7fb 0%, #e6eef8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #115A95;
    font-weight: 700;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    text-transform: uppercase;
    z-index: 1;
    box-shadow: inset 2px 0 4px rgba(26,26,26, 0.1);
  }
/* Compact book thumbnail used in the resource hero (dark background). */
.hero-book {
    width: 140px;
    aspect-ratio: 5 / 7;
    perspective: 1200px;
  }
.hero-book__cover {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 2px 10px 10px 2px;
    overflow: hidden;
    transform: rotateY(-8deg);
    transform-origin: left center;
    background: #ffffff;
    box-shadow:
      4px 8px 20px rgba(0, 0, 0, 0.25),
      12px 20px 40px rgba(0, 0, 0, 0.35),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }
.hero-book__cover-img {
    width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block;
  }
.hero-book__spine {
    position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
    background: linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.14) 60%, rgba(0,0,0,0) 100%);
    pointer-events: none;
  }
.hero-book__pages {
    position: absolute; top: 3px; right: -4px; bottom: 3px; width: 5px;
    background: repeating-linear-gradient(to bottom, #ffffff 0 1px, #d4dde8 1px 2px);
    border-radius: 0 2px 2px 0;
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.25);
  }
/* Scroll-reveal used by the book cards and other [data-reveal] elements. */
[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
@media (prefers-reduced-motion: reduce) {
    .book,
    .book__cover,
    [data-reveal] {
      transition: none !important;
    }
    .book-card:hover .book__cover,
    .book-card:focus-visible .book__cover {
      transform: rotateY(-2deg); /* stay at rest */
    }
    [data-reveal] { opacity: 1; transform: none; }
  }
/* Icon badges.
     Line icons, no filled plate. The tinted rounded square read as a SaaS
     feature chip and, repeated nine times down a page, was the loudest thing
     on screen while carrying the least information. What is left is the mark
     itself, sitting on a short hairline that ties it to the card's grid. */
.icon-badge {
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(17 90 149 / var(--tw-text-opacity, 1));
}
.icon-badge-lg {
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: flex-start;
  --tw-text-opacity: 1;
  color: rgb(17 90 149 / var(--tw-text-opacity, 1));
}
/* On an ink ground the icon takes the pale end of the primary ramp, not
     the cyan. Cyan is reserved for interactive and CTA (design-dna.md §3);
     an ornamental glyph is neither. */
.icon-badge-dark {
  --tw-text-opacity: 1;
  color: rgb(157 190 214 / var(--tw-text-opacity, 1));
}
/* Post card with no featured image. See cc_post_thumb() in inc/blog.php. */
/* The card of an article whose photograph has not been supplied.
     This used to be a near-black panel with a grey camera glyph floating in
     the middle of it, which in a grid of nine photographed cards reads as a
     broken image rather than as a deliberate one. It is now a daylight plate
     in the same register as everything else on the page: the ground, the
     graticule, and the CareCam mark at low contrast. A slot with no art is
     still a slot that was designed. */
.post-thumb-empty {
    position: relative;
    background-color: #F4F7FA;
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g fill='none' stroke='%23115A95' stroke-opacity='0.20' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><rect x='14' y='30' width='68' height='50' rx='10'/><circle cx='48' cy='56' r='17'/><path d='M34 30l6-10h16l6 10'/></g></svg>"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M40 0H0v40' fill='none' stroke='%23115A95' stroke-opacity='0.07' stroke-width='1'/></svg>");
    background-repeat: no-repeat, repeat;
    background-position: center, top left;
    background-size: 56px 56px, 40px 40px;
    box-shadow: inset 0 -1px 0 #DCE4EC;
  }
/* ── Comparison table (the `contrast` block) ──────────────────────────
     Direction A's "a real table", taken from nanoporetech.com/platform/
     accuracy: hairlines, no zebra striping, no card, mono column heads,
     and the two columns given different weight rather than different
     colour — the argument is a contrast, not a scoreboard. */
.compare-table {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
    text-align: left;
  }
.compare-table thead th,
  .compare-table thead td {
  vertical-align: bottom;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(119 119 119 / var(--tw-text-opacity, 1));
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    font-weight: 400;
    padding: 0 1.25rem 0.75rem;
    border-bottom: 1px solid #0B1A26;
}
.compare-table thead .compare-table__b {
  --tw-text-opacity: 1;
  color: rgb(17 90 149 / var(--tw-text-opacity, 1));
}
.compare-table__corner { border-bottom: 1px solid #0B1A26 !important; width: 22%; }
.compare-table tbody th {
  vertical-align: top;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(11 26 38 / var(--tw-text-opacity, 1));
}

h1.compare-table tbody th, h2.compare-table tbody th, h3.compare-table tbody th, h4.compare-table tbody th { font-weight: 500; }
.compare-table tbody th {
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 1.125rem 1.25rem 1.125rem 0;
    border-bottom: 1px solid #DCE4EC;
    width: 22%;
  }
.compare-table tbody td {
  vertical-align: top;
  --tw-text-opacity: 1;
  color: rgb(51 51 51 / var(--tw-text-opacity, 1));
    font-size: 0.9375rem;
    line-height: 1.6;
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid #DCE4EC;
    width: 39%;
}
/* The CareCam column is the one being introduced, so it carries the
     weight and a 3%-tint ground. One column, one tint, no chrome. */
.compare-table tbody td.compare-table__b {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(11 26 38 / var(--tw-text-opacity, 1));
    background-color: rgba(17, 90, 149, 0.035);
    box-shadow: inset 2px 0 0 rgba(17, 90, 149, 0.35);
}
.compare-table thead .compare-table__b { box-shadow: inset 2px 0 0 rgba(17, 90, 149, 0.35); }
.compare-note {
  --tw-text-opacity: 1;
  color: rgb(119 119 119 / var(--tw-text-opacity, 1));
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.7;
    max-width: 68ch;
}
.compare-note strong {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(51 51 51 / var(--tw-text-opacity, 1));
}

h1.compare-note strong, h2.compare-note strong, h3.compare-note strong, h4.compare-note strong { font-weight: 500; }
/* ── Showcase rows (the `showcase` block) ─────────────────────────────
     One row per product or application: the photograph at half the page,
     the positioning line at heading scale, specifications as a hairline
     fact list. Sized like the thing it describes, so a product section
     cannot be mistaken for the values grid above it. */
.showcase > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(4rem * var(--tw-space-y-reverse));
}
@media (min-width: 1024px) {

  .showcase > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(5rem * var(--tw-space-y-reverse));
  }
}
.showcase--compact > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}
@media (min-width: 1024px) {

  .showcase--compact > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(3.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(3.5rem * var(--tw-space-y-reverse));
  }
}
.showcase__row {
  display: grid;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 1024px) {

  .showcase__row {
    gap: 3.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
    .showcase--compact .showcase__row { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
    .showcase__row--reverse .showcase__media { order: 2; }
}
.showcase__media {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(220 228 236 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(242 245 248 / var(--tw-bg-opacity, 1)); --cc-panel: #FFFFFF; background-color: #F5F9FC;
    aspect-ratio: 16 / 10;
}
.showcase--compact .showcase__media { aspect-ratio: 16 / 10; }
.showcase__eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(17 90 149 / var(--tw-text-opacity, 1));
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    margin-bottom: 0.85rem;
}
.showcase__title {
  font-weight: 700;
  line-height: 1.15;
  --tw-text-opacity: 1;
  color: rgb(11 26 38 / var(--tw-text-opacity, 1));
}

h1.showcase__title, h2.showcase__title, h3.showcase__title, h4.showcase__title { font-weight: 500; }
.showcase__title {
    letter-spacing: -0.015em;
    font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem);
  }
.showcase--compact .showcase__title {
    font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  }
.showcase__desc {
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(51 51 51 / var(--tw-text-opacity, 1));
    margin-top: 1rem;
    font-size: 1.0625rem;
    max-width: 52ch;
}
.showcase--compact .showcase__desc { font-size: 1rem; margin-top: 0.75rem; }
.showcase__desc + .showcase__desc { margin-top: 0.875rem; }
.showcase__media-links { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid #DCE4EC; }
.showcase__media-label { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: #777777; margin-bottom: 0.625rem; }
.showcase__media-links ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.showcase__media-links a { font-weight: 600; color: #115A95; text-decoration: underline; text-underline-offset: 3px; }
.showcase__media-links a:hover { color: #0E4C7D; }
.showcase__facts {
    margin-top: 1.75rem;
    border-top: 1px solid #DCE4EC;
    max-width: 34rem;
  }
.showcase__facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #DCE4EC;
}
.showcase__facts dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(119 119 119 / var(--tw-text-opacity, 1));
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
}
.showcase__facts dd {
  text-align: right;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(11 26 38 / var(--tw-text-opacity, 1));
}

h1.showcase__facts dd, h2.showcase__facts dd, h3.showcase__facts dd, h4.showcase__facts dd { font-weight: 500; }
/* ── Showcase cards (showcase density 'cards') ────────────────────────
     Four across on a desktop, two on a tablet, one on a phone. The
     photograph, the question it answers, one sentence and one link. */
.showcase-cards {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 640px)  { .showcase-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .showcase-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.showcase-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 4px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(220 228 236 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --cc-panel: #F2F5F8;
}
.showcase-card__media {
  position: relative;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(242 245 248 / var(--tw-bg-opacity, 1)); --cc-panel: #FFFFFF; background-color: #F5F9FC; aspect-ratio: 16 / 10;
}
.showcase-card__body {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column; padding: 1.4rem 1.4rem 1.5rem;
}
.showcase-card__title {
  font-weight: 700;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(11 26 38 / var(--tw-text-opacity, 1));
}

h1.showcase-card__title, h2.showcase-card__title, h3.showcase-card__title, h4.showcase-card__title { font-weight: 500; }
.showcase-card__title {
    font-size: 1.125rem;
    letter-spacing: -0.01em;
  }
.showcase-card__desc {
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(51 51 51 / var(--tw-text-opacity, 1));
    margin-top: 0.6rem;
    font-size: 0.9375rem;
}
.showcase-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(17 90 149 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

h1.showcase-card__link, h2.showcase-card__link, h3.showcase-card__link, h4.showcase-card__link { font-weight: 500; }
.showcase-card__link {
    margin-top: auto;
    padding-top: 1.1rem;
  }
.showcase-card__link:hover {
  gap: 0.625rem;
}
/* ── Testimony ────────────────────────────────────────────────────────
     Four named clinicians at TTSH, NHG Polyclinics, NNI and NHCS are the
     strongest trust asset on this site, and they were set as four white
     cards with a hairline and a 17px paragraph — identical to the values
     cards, the applications cards and the hospital cards on the same
     page. The eye slid straight past them.
     Testimony now has its own typography and nothing else on the site
     uses it: the ink ground, the quote at display scale with a hanging
     opening mark, the attribution in mono under a rule. The quotes and
     attributions are unchanged to the character. */
.testimony {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(11 26 38 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.section-title.testimony { color: #fff; }
.testimony::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M48 0H0v48' fill='none' stroke='white' stroke-opacity='0.045' stroke-width='1'/></svg>");
    pointer-events: none;
  }
/* The credentials strip above the quotes. */
.testimony__facts {
  display: grid;
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
  row-gap: 1.5rem;
    margin-bottom: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 640px)  { .testimony__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .testimony__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.testimony__facts dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
  text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.45rem;
}
.testimony__facts dd {
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

h1.testimony__facts dd, h2.testimony__facts dd, h3.testimony__facts dd, h4.testimony__facts dd { font-weight: 500; }
.section-title.testimony__facts dd { color: #fff; }
.testimony__facts dd {
    font-size: 0.9375rem;
  }
.testimony__grid {
  display: grid;
  -moz-column-gap: 3.5rem;
       column-gap: 3.5rem;
  row-gap: 0px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 900px) {
    .testimony__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
.testimony__item {
  position: relative;
  display: flex;
  flex-direction: column;
    padding: 2.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* The attribution sits at the foot of its cell, so the four names line up
     across a row however long the quotes above them run. */
.testimony__by { margin-top: auto; }
@media (min-width: 900px) {
    /* Two columns of continuous rules rather than four boxes — the page
       reads down each column, not across a grid of tiles. */
    .testimony__item { padding: 2.5rem 0; }
  }
.testimony__quote {
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.section-title.testimony__quote { color: #fff; }
.testimony__quote {
    font-size: clamp(1.125rem, 1rem + 0.55vw, 1.4375rem);
    line-height: 1.45;
    letter-spacing: -0.011em;
    text-wrap: pretty;
  }
/* The opening quotation mark hangs into the left margin, so the first
     word of every quote still starts on the column's own left edge. */
.testimony__quote::before {
    content: '\201C';
    position: absolute;
    left: -0.62em;
    font-size: inherit;
    color: rgba(255, 255, 255, 0.4);
  }
.testimony__by {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
  row-gap: 0.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 34rem;
}
.testimony__name {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

h1.testimony__name, h2.testimony__name, h3.testimony__name, h4.testimony__name { font-weight: 500; }
.section-title.testimony__name { color: #fff; }
.testimony__name {
    font-size: 0.9375rem;
  }
.testimony__role {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
  text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.6875rem;
    letter-spacing: 0.11em;
    line-height: 1.6;
}
/* ── Roster ───────────────────────────────────────────────────────────
     Named institutions as indexable text, which is the entire point of
     the section (docs/research.md: their own site ships them as 1.png …
     10.png with no alt text). Nine of them as nine cards was a third
     card grid in a row; as a hairline-ruled list it is a reference,
     which is what it is. */
.roster {
  display: grid;
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
    border-top: 1px solid #DCE4EC;
}
@media (min-width: 640px) { .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.roster__item {
    padding: 1.15rem 0;
    border-bottom: 1px solid #DCE4EC;
  }
.roster__name {
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(11 26 38 / var(--tw-text-opacity, 1));
}

h1.roster__name, h2.roster__name, h3.roster__name, h4.roster__name { font-weight: 500; }
.roster__name { font-size: 1rem; }
.roster__note {
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(119 119 119 / var(--tw-text-opacity, 1)); margin-top: 0.3rem; font-size: 0.8125rem;
}
/* ── Partner logos ────────────────────────────────────────────────────
     The proof strip under the homepage hero and the grid on
     /company/partners/. A partner without artwork is set as its name. */
.logo-strip-band {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.75rem 0;
    border-bottom: 1px solid #DCE4EC;
}
.logo-strip__label {
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(119 119 119 / var(--tw-text-opacity, 1));
    font-size: 0.6875rem; letter-spacing: 0.12em; margin-bottom: 1rem;
}
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; gap: 0.75rem 2.5rem;
}
.logo-strip__item {
  display: flex;
  align-items: center;
}
.logo-strip__img { height: 2.25rem; width: auto; max-width: 9rem; -o-object-fit: contain; object-fit: contain; }
.logo-strip__name {
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(51 51 51 / var(--tw-text-opacity, 1));
}

h1.logo-strip__name, h2.logo-strip__name, h3.logo-strip__name, h4.logo-strip__name { font-weight: 500; }
.logo-strip__name { font-size: 0.9375rem; }
.logo-grid {
  display: grid;
  gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.logo-grid__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 4px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    border: 1px solid #DCE4EC;
    padding: 1.25rem 1.25rem; min-height: 6.5rem;
}
.logo-grid__img { height: 2.75rem; width: auto; max-width: 10rem; -o-object-fit: contain; object-fit: contain; margin-bottom: 0.75rem; }
.logo-grid__name {
  display: block;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(11 26 38 / var(--tw-text-opacity, 1));
}

h1.logo-grid__name, h2.logo-grid__name, h3.logo-grid__name, h4.logo-grid__name { font-weight: 500; }
.logo-grid__name { font-size: 0.9375rem; }
.logo-grid__note {
  display: block;
  --tw-text-opacity: 1;
  color: rgb(119 119 119 / var(--tw-text-opacity, 1)); margin-top: 0.3rem; font-size: 0.8125rem;
}
/* Three-across variant of the card showcase (homepage segments, case studies). */
@media (min-width: 1100px) { .showcase-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .showcase-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Group sub-heading inside the numbered publications list. */
.source-group { list-style: none; padding: 2rem 0 0.75rem; border-bottom: 1px solid #DCE4EC; }
.source-group:first-child { padding-top: 1.25rem; }
.source-group__title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(119 119 119 / var(--tw-text-opacity, 1)); font-size: 0.75rem; letter-spacing: 0.12em;
}
/* ── Claims and their sources ─────────────────────────────────────────
     Direction A's citation apparatus (nanoporetech.com/platform/accuracy,
     aidoc.com): the claim is made in prose, a superscript number sits on
     the end of the sentence it belongs to, and it jumps to a compact
     numbered source below.

     What was here was direction B's — Nature's reference component, the
     number right-aligned in its own 4rem gutter, entries as plates. Good
     component, wrong direction, and on a page with no claims anywhere in
     it a bibliography is all a procurement reviewer got. */
.claim-list { border-top: 1px solid #DCE4EC; max-width: 58rem; }
.claim {
    padding: 1.35rem 0;
    border-bottom: 1px solid #DCE4EC;
  }
.claim__text {
  --tw-text-opacity: 1;
  color: rgb(11 26 38 / var(--tw-text-opacity, 1));
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    line-height: 1.55;
    text-wrap: pretty;
}
.claim__refs {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
    font-size: 0.62em;
    line-height: 1;
    /* `vertical-align: super` sat the number below the cap-height of the
       sentence it belongs to. A fixed rise puts it where a journal puts it. */
    vertical-align: baseline;
    position: relative;
    top: -0.52em;
    margin-left: 0.12em;
    letter-spacing: 0.02em;
}
.claim__refs a {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(17 90 149 / var(--tw-text-opacity, 1));
}

h1.claim__refs a, h2.claim__refs a, h3.claim__refs a, h4.claim__refs a { font-weight: 500; }
.claim__refs a {
    text-decoration: none;
    padding: 0 0.08em;
  }
.claim__refs a:hover,
  .claim__refs a:focus-visible { text-decoration: underline; }
.claim__note {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(119 119 119 / var(--tw-text-opacity, 1));
    margin-top: 0.55rem;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    line-height: 1.6;
}
.source-list { border-top: 1px solid #DCE4EC; }
.source {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0 0.85rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid #DCE4EC;
    scroll-margin-top: 7rem;
  }
@media (min-width: 768px) {
    .source { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 1.25rem; padding: 1.35rem 0; }
  }
/* The number is a target, not a display element — under A it is the
     small thing a superscript points at, set in the brand blue so the
     jump is visible when it lands. */
.source__num { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace; --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); --tw-text-opacity: 1; color: rgb(17 90 149 / var(--tw-text-opacity, 1));
    font-size: 0.8125rem;
    line-height: 1.7; }
.source__title {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(11 26 38 / var(--tw-text-opacity, 1));
}

h1.source__title, h2.source__title, h3.source__title, h4.source__title { font-weight: 500; }
.source__title {
    font-size: 1.0625rem;
    line-height: 1.4;
  }
.source__title a {
    color: inherit;
    text-decoration: none;
    box-shadow: inset 0 -1px 0 rgba(17, 90, 149, 0.35);
    transition: box-shadow 150ms ease, color 150ms ease;
  }
.source__title a:hover,
  .source__title a:focus-visible {
    color: #115A95;
    box-shadow: inset 0 -1px 0 #115A95;
  }
.source__meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(119 119 119 / var(--tw-text-opacity, 1));
    margin-top: 0.3rem;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
}
.source__gloss {
  --tw-text-opacity: 1;
  color: rgb(51 51 51 / var(--tw-text-opacity, 1));
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    max-width: 66ch;
}
.source__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(17 90 149 / var(--tw-text-opacity, 1));
}

h1.source__link, h2.source__link, h3.source__link, h4.source__link { font-weight: 500; }
.source__link {
    margin-top: 0.6rem;
    font-size: 0.8125rem;
  }
.source__link:hover {
  --tw-text-opacity: 1;
  color: rgb(14 76 125 / var(--tw-text-opacity, 1));
}
.source-note {
  --tw-text-opacity: 1;
  color: rgb(119 119 119 / var(--tw-text-opacity, 1));
    margin-top: 1.15rem;
    font-size: 0.8125rem;
    line-height: 1.7;
}
/* The landed citation, briefly. Nothing else on the site animates. */
.source:target { background-color: rgba(17, 90, 149, 0.045); }
/* The enquiry form card. A B2B enquiry form on a page whose whole job is
     the enquiry is not a modest box: generous padding, a hairline rather
     than a drop shadow (elevation in this system is never a blur), and the
     4px radius the direction caps at. */
.cc-form-card {
  position: relative;
  border-radius: 4px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(220 228 236 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1.75rem 1.5rem;
    box-shadow: 0 0 0 1px rgba(17, 90, 149, 0.05);
}
@media (min-width: 640px) { .cc-form-card { padding: 2.5rem; } }
@media (min-width: 1024px) { .cc-form-card { padding: 3rem 3.25rem; } }
/* A hairline in the brand blue along the top edge — the tell that this is
     the page's one action, at a cost of one pseudo-element. */
.cc-form-card::before {
    content: '';
    position: absolute;
    left: -1px; right: -1px; top: -1px;
    height: 2px;
    background: #115A95;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
/* Links inside a form intro. Also: break a long address rather than let it
     widen the page — a mailto label is one unbreakable token. */
.contact-intro { overflow-wrap: anywhere; }
.contact-intro a {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(17 90 149 / var(--tw-text-opacity, 1));
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(17, 90, 149, 0.4);
}
.contact-intro a:hover { text-decoration-color: currentColor; }
/* Check bullet.
     A cyan tick inside a cyan-tinted disc, repeated down every checklist and
     every process step on the site, is the reserved CTA colour doing
     decorative work — and the disc is a pill, which the direction bans. The
     tick is now a bare mark in the primary ink. */
.check-bullet {
  display: inline-flex;
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(17 90 149 / var(--tw-text-opacity, 1));
}
.check-bullet svg { width: 14px; height: 14px; stroke-width: 2.5; }
/* Numbered marker for process steps */
.step-number {
  display: inline-flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background-image: radial-gradient(ellipse 70% 60% at 8% 0%, rgba(17,90,149,0.30) 0%, rgba(17,90,149,0) 62%), linear-gradient(180deg, #1F1F1F 0%, #141414 100%);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 0 0 1px rgba(17,90,149,0.35);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: #115A95;
  --tw-shadow: var(--tw-shadow-colored);
}

h1.step-number, h2.step-number, h3.step-number, h4.step-number { font-weight: 500; }
.section-title.step-number { color: #fff; }
/* Divider wedge used between dark hero and light section */
.hero-wedge {
    position: relative;
  }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.-bottom-4 {
  bottom: -1rem;
}
.-left-4 {
  left: -1rem;
}
.-right-4 {
  right: -1rem;
}
.-top-3 {
  top: -0.75rem;
}
.-top-4 {
  top: -1rem;
}
.-top-5 {
  top: -1.25rem;
}
.bottom-8 {
  bottom: 2rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-10 {
  left: 2.5rem;
}
.left-4 {
  left: 1rem;
}
.left-6 {
  left: 1.5rem;
}
.right-0 {
  right: 0px;
}
.top-0 {
  top: 0px;
}
.top-3 {
  top: 0.75rem;
}
.top-4 {
  top: 1rem;
}
.top-8 {
  top: 2rem;
}
.isolate {
  isolation: isolate;
}
.z-10 {
  z-index: 10;
}
.order-first {
  order: -9999;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}
.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-7 {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}
.-mt-10 {
  margin-top: -2.5rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-14 {
  margin-bottom: 3.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-7 {
  margin-bottom: 1.75rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-3\.5 {
  margin-top: 0.875rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[16\/10\] {
  aspect-ratio: 16/10;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-20 {
  height: 5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-44 {
  height: 11rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.\!min-h-0 {
  min-height: 0px !important;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-16 {
  width: 4rem;
}
.w-20 {
  width: 5rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-4 {
  width: 1rem;
}
.w-44 {
  width: 11rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-\[1200px\] {
  max-width: 1200px;
}
.max-w-\[13rem\] {
  max-width: 13rem;
}
.max-w-\[1560px\] {
  max-width: 1560px;
}
.max-w-\[16ch\] {
  max-width: 16ch;
}
.max-w-\[18ch\] {
  max-width: 18ch;
}
.max-w-\[22ch\] {
  max-width: 22ch;
}
.max-w-\[22rem\] {
  max-width: 22rem;
}
.max-w-\[26ch\] {
  max-width: 26ch;
}
.max-w-\[28ch\] {
  max-width: 28ch;
}
.max-w-\[34ch\] {
  max-width: 34ch;
}
.max-w-\[620px\] {
  max-width: 620px;
}
.max-w-\[68ch\] {
  max-width: 68ch;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c auto\)\] {
  grid-template-columns: minmax(0,1fr) minmax(0,auto);
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0 {
  gap: 0px;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-px {
  gap: 1px;
}
.gap-x-10 {
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}
.gap-x-14 {
  -moz-column-gap: 3.5rem;
       column-gap: 3.5rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.gap-y-6 {
  row-gap: 1.5rem;
}
.space-y-12 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}
.space-y-16 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(4rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.space-y-px > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1px * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-white\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.1);
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.text-wrap {
  text-wrap: wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.rounded {
  border-radius: 3px;
}
.rounded-2xl {
  border-radius: 4px;
}
.rounded-3xl {
  border-radius: 4px;
}
.rounded-\[3px\] {
  border-radius: 3px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 4px;
}
.rounded-md {
  border-radius: 4px;
}
.rounded-xl {
  border-radius: 4px;
}
.rounded-b-2xl {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l-\[3px\] {
  border-left-width: 3px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-dashed {
  border-style: dashed;
}
.border-brand-line {
  --tw-border-opacity: 1;
  border-color: rgb(220 228 236 / var(--tw-border-opacity, 1));
}
.border-brand-muted {
  --tw-border-opacity: 1;
  border-color: rgb(248 250 252 / var(--tw-border-opacity, 1));
}
.border-brand-muted-200 {
  --tw-border-opacity: 1;
  border-color: rgb(220 228 236 / var(--tw-border-opacity, 1));
}
.border-brand-primary {
  --tw-border-opacity: 1;
  border-color: rgb(17 90 149 / var(--tw-border-opacity, 1));
}
.border-brand-primary-100 {
  --tw-border-opacity: 1;
  border-color: rgb(203 221 235 / var(--tw-border-opacity, 1));
}
.border-brand-primary\/20 {
  border-color: rgb(17 90 149 / 0.2);
}
.border-brand-primary\/30 {
  border-color: rgb(17 90 149 / 0.3);
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-white\/70 {
  border-color: rgb(255 255 255 / 0.7);
}
.border-t-brand-primary {
  --tw-border-opacity: 1;
  border-top-color: rgb(17 90 149 / var(--tw-border-opacity, 1));
}
.bg-\[var\(--cc-panel\)\] {
  background-color: var(--cc-panel);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-brand-accent {
  --tw-bg-opacity: 1;
  background-color: rgb(29 188 236 / var(--tw-bg-opacity, 1));
}
.bg-brand-accent-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(231 250 255 / var(--tw-bg-opacity, 1));
}
.bg-brand-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(242 245 248 / var(--tw-bg-opacity, 1));
}
.bg-brand-bone {
  --tw-bg-opacity: 1;
  background-color: rgb(242 245 248 / var(--tw-bg-opacity, 1));
}
.bg-brand-bone-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-brand-ink {
  --tw-bg-opacity: 1;
  background-color: rgb(11 26 38 / var(--tw-bg-opacity, 1));
}
.bg-brand-line {
  --tw-bg-opacity: 1;
  background-color: rgb(220 228 236 / var(--tw-bg-opacity, 1));
}
.bg-brand-muted {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-brand-muted-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(227 234 240 / var(--tw-bg-opacity, 1));
}
.bg-brand-muted\/40 {
  background-color: rgb(248 250 252 / 0.4);
}
.bg-brand-muted\/60 {
  background-color: rgb(248 250 252 / 0.6);
}
.bg-brand-paper {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-brand-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(17 90 149 / var(--tw-bg-opacity, 1));
}
.bg-brand-primary-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 242 248 / var(--tw-bg-opacity, 1));
}
.bg-brand-primary\/10 {
  background-color: rgb(17 90 149 / 0.1);
}
.bg-brand-primary\/25 {
  background-color: rgb(17 90 149 / 0.25);
}
.bg-brand-primary\/40 {
  background-color: rgb(17 90 149 / 0.4);
}
.bg-brand-primary\/5 {
  background-color: rgb(17 90 149 / 0.05);
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}
.bg-dots-ink {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='2' cy='2' r='1' fill='%23FFFFFF' fill-opacity='0.08'/></svg>");
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-hero-ink-soft {
  background-image: radial-gradient(ellipse 70% 60% at 8% 0%, rgba(17,90,149,0.30) 0%, rgba(17,90,149,0) 62%), linear-gradient(180deg, #1F1F1F 0%, #141414 100%);
}
.bg-primary-band {
  background-image: linear-gradient(135deg, #115A95 0%, #0B3E66 100%);
}
.from-brand-primary-50 {
  --tw-gradient-from: #EAF2F8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 242 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-primary\/40 {
  --tw-gradient-from: rgb(17 90 149 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(17 90 149 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-brand-primary\/20 {
  --tw-gradient-to: rgb(17 90 149 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(17 90 149 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-white {
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-14 {
  padding-bottom: 3.5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-\[1\.1875rem\] {
  padding-left: 1.1875rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-28 {
  padding-top: 7rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-9 {
  padding-top: 2.25rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
}
.font-sans {
  font-family: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-\[0\.6875rem\] {
  font-size: 0.6875rem;
}
.text-\[0\.7rem\] {
  font-size: 0.7rem;
}
.text-\[0\.8125rem\] {
  font-size: 0.8125rem;
}
.text-\[0\.9375rem\] {
  font-size: 0.9375rem;
}
.text-\[0\.95rem\] {
  font-size: 0.95rem;
}
.text-\[1\.0625rem\] {
  font-size: 1.0625rem;
}
.text-\[1\.5rem\] {
  font-size: 1.5rem;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.normal-case {
  text-transform: none;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[1\.05\] {
  line-height: 1.05;
}
.leading-\[1\.06\] {
  line-height: 1.06;
}
.leading-\[1\.14\] {
  line-height: 1.14;
}
.leading-\[1\.15\] {
  line-height: 1.15;
}
.leading-\[1\.18\] {
  line-height: 1.18;
}
.leading-\[1\.1\] {
  line-height: 1.1;
}
.leading-\[1\.2\] {
  line-height: 1.2;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.01em\] {
  letter-spacing: 0.01em;
}
.tracking-\[0\.02em\] {
  letter-spacing: 0.02em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}
.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-brand-accent-600 {
  --tw-text-opacity: 1;
  color: rgb(21 159 202 / var(--tw-text-opacity, 1));
}
.text-brand-ink {
  --tw-text-opacity: 1;
  color: rgb(11 26 38 / var(--tw-text-opacity, 1));
}
.text-brand-ink-mute {
  --tw-text-opacity: 1;
  color: rgb(119 119 119 / var(--tw-text-opacity, 1));
}
.text-brand-ink-soft {
  --tw-text-opacity: 1;
  color: rgb(51 51 51 / var(--tw-text-opacity, 1));
}
.text-brand-ink-soft\/70 {
  color: rgb(51 51 51 / 0.7);
}
.text-brand-ink-soft\/80 {
  color: rgb(51 51 51 / 0.8);
}
.text-brand-ink-soft\/85 {
  color: rgb(51 51 51 / 0.85);
}
.text-brand-ink\/50 {
  color: rgb(11 26 38 / 0.5);
}
.text-brand-ink\/60 {
  color: rgb(11 26 38 / 0.6);
}
.text-brand-ink\/70 {
  color: rgb(11 26 38 / 0.7);
}
.text-brand-ink\/75 {
  color: rgb(11 26 38 / 0.75);
}
.text-brand-primary {
  --tw-text-opacity: 1;
  color: rgb(17 90 149 / var(--tw-text-opacity, 1));
}
.text-brand-primary-200 {
  --tw-text-opacity: 1;
  color: rgb(157 190 214 / var(--tw-text-opacity, 1));
}
.text-brand-primary-200\/80 {
  color: rgb(157 190 214 / 0.8);
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.underline {
  text-decoration-line: underline;
}
.no-underline {
  text-decoration-line: none;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-70 {
  opacity: 0.7;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-brand {
  --tw-shadow: 0 0 0 1px #DCE4EC;
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-brand-accent {
  --tw-shadow: 0 0 0 1px rgba(29,188,236,0.45);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-brand-lg {
  --tw-shadow: 0 0 0 1px #DCE4EC, 0 12px 32px -24px rgba(11,26,38,0.35);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 12px 32px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-brand-primary {
  --tw-shadow: 0 0 0 1px rgba(17,90,149,0.35);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-brand-primary-lg {
  --tw-shadow: 0 0 0 1px rgba(17,90,149,0.35);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-brand-sm {
  --tw-shadow: 0 0 0 1px #DCE4EC;
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-brand-accent {
  --tw-shadow-color: #1DBCEC;
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-brand-primary {
  --tw-shadow-color: #115A95;
  --tw-shadow: var(--tw-shadow-colored);
}
.outline {
  outline-style: solid;
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
  --tw-ring-inset: inset;
}
.ring-brand-ink\/10 {
  --tw-ring-color: rgb(11 26 38 / 0.1);
}
.ring-brand-line {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 228 236 / var(--tw-ring-opacity, 1));
}
.ring-brand-muted-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 228 236 / var(--tw-ring-opacity, 1));
}
.ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.ring-white\/15 {
  --tw-ring-color: rgb(255 255 255 / 0.15);
}
.ring-white\/20 {
  --tw-ring-color: rgb(255 255 255 / 0.2);
}
.ring-white\/25 {
  --tw-ring-color: rgb(255 255 255 / 0.25);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* The footer's legal-entity marker. It was a cyan dot pulsing forever
     beside "CareCam Pte Ltd - Singapore", which is two rule breaks in one
     6px element: the reserved interactive colour used as decoration, and
     motion on a page where the direction is near-still ("one hero video
     loop, one toggle, hover states. Nothing else."). Still a dot; it just
     stopped flashing and stopped claiming to be a control. */
.dot-live {
  display: inline-block;
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(94 150 184 / var(--tw-bg-opacity, 1));
}
/* Clamp card copy to 3 lines without needing the @tailwindcss/line-clamp
     plugin. Graceful fallback in browsers without line-clamp support. */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

/* ---------- Article prose (single blog posts) ------------------------------
   Explicit styling for `the_content()` output because we don't ship the
   @tailwindcss/typography plugin. Tuned for long-form reading at ~68ch. */
.article-prose {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #333333;
}
@media (min-width: 1024px) {
  .article-prose { font-size: 1.125rem; }
}
.article-prose > * + * { margin-top: 1.25em; }
.article-prose p { margin: 1.1em 0; }
.article-prose h2 {
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.875rem);
  font-weight: 700;
  color: #0B1A26;
  margin-top: 2em;
  margin-bottom: 0.6em;
  line-height: 1.25;
  letter-spacing: -0.018em;
  scroll-margin-top: 6rem;
}
.article-prose h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0B1A26;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}
.article-prose h4 { font-size: 1.0625rem; font-weight: 700; color: #0B1A26; margin-top: 1.4em; }
.article-prose strong { color: #0B1A26; font-weight: 600; }
.article-prose a {
  color: #115A95;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 150ms ease;
}
.article-prose a:hover { color: #0B3E66; }
.article-prose ul, .article-prose ol {
  margin: 1.1em 0;
  padding-left: 1.4em;
}
.article-prose ul { list-style: none; padding-left: 0; }
.article-prose ul > li {
  position: relative;
  padding-left: 1.65em;
  margin: 0.45em 0;
}
.article-prose ul > li::before {
  content: '';
  position: absolute;
  left: 0.1em;
  top: 0.7em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 9999px;
  background: #115A95;
}
.article-prose ol { list-style: decimal; }
.article-prose ol > li::marker { color: #115A95; font-weight: 700; }
.article-prose ol > li { margin: 0.45em 0; padding-left: 0.4em; }
.article-prose blockquote {
  margin: 1.6em 0;
  padding: 0.6em 1.25em;
  border-left: 3px solid #115A95;
  background: #F8FAFC;
  border-radius: 0;
  font-style: italic;
  color: #333333;
}
.article-prose blockquote p { margin: 0.4em 0; }
.article-prose code {
  background: #F8FAFC;
  color: #0B1A26;
  padding: 0.1em 0.4em;
  border-radius: 2px;
  font-size: 0.92em;
}
.article-prose pre {
  background: #0B1A26;
  color: #F8FAFC;
  padding: 1em 1.25em;
  border-radius: 0;
  overflow-x: auto;
  font-size: 0.92em;
  line-height: 1.55;
}
.article-prose pre code { background: transparent; color: inherit; padding: 0; }
.article-prose img {
  border-radius: 0;
  margin: 1.6em auto;
  max-width: 100%;
  height: auto;
  box-shadow: 0 0 0 1px #E5E5E5;
}
.article-prose hr {
  border: 0;
  border-top: 1px solid #E5E5E5;
  margin: 2.2em 0;
}
.article-prose > :first-child { margin-top: 0; }

/* ---------- TOC sidebar ---------------------------------------------------- */
.toc-sidebar .toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid #E5E5E5;
}
.toc-sidebar .toc-list li { display: block; }
.toc-sidebar .toc-list a {
  position: relative;
  display: flex;
  gap: 0.75rem;
  padding: 0.55rem 0 0.55rem 1rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: #333333;
  font-size: 0.875rem;
  line-height: 1.45;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.toc-sidebar .toc-list a:hover {
  color: #115A95;
  border-left-color: #D2A4A6;
}
.toc-sidebar .toc-list a.is-active {
  color: #115A95;
  border-left-color: #115A95;
  font-weight: 600;
}
.toc-sidebar .toc-num {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #777777;
  padding-top: 0.1em;
  font-variant-numeric: tabular-nums;
}
.toc-sidebar .toc-list a:hover .toc-num,
.toc-sidebar .toc-list a.is-active .toc-num { color: #115A95; }

/* ---------- Pagination (blog index + archive) ------------------------------ */
.pagination .nav-links,
nav.pagination .nav-links {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  justify-content: center;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 2px;
  border: 1px solid #E5E5E5;
  background: #FFFFFF;
  color: #333333;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.pagination .page-numbers:hover {
  border-color: #115A95;
  color: #115A95;
  box-shadow: none;
}
.pagination .page-numbers.current {
  background: #115A95;
  border-color: #115A95;
  color: #FFFFFF;
  box-shadow: none;
}
.pagination .page-numbers.dots {
  border: none;
  background: transparent;
  color: #777777;
  cursor: default;
}
.pagination .page-numbers.dots:hover { box-shadow: none; }

/* Primary-nav styling (desktop + mobile) and current-page indicator. */
/* Mega panels anchor to the site header, not the individual trigger <li>,
   so the panel stays centered on the page regardless of where "Services"
   sits inside the nav and never drifts off-screen. */
[data-site-header] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background-color: #0B1A26; /* brand-ink, solid default */
  transition: box-shadow 250ms ease, background-color 250ms ease, backdrop-filter 250ms ease;
  will-change: background-color;
}
/* Scrolled: a bone bar with a hairline base rule. Bone rather than white so the
   header reads as part of the page ground, and hairline rather than a drop
   shadow because elevation in this system is never a blur. */
[data-site-header][data-scrolled] {
  background-color: #F2F5F8;
  backdrop-filter: none;
  box-shadow: inset 0 -1px 0 #DCE4EC;
}
/* A light header — either because the page has been scrolled, or because the
   page leads with a daylight hero and the bar has been light from the start.
   Both cases need the same flip of logo, wordmark, links and controls to ink,
   so both select the same rules rather than drifting apart. */
[data-site-header] .site-logo--color { display: none; }
:is([data-site-header][data-scrolled],
    body.hero-daylight [data-site-header]) .site-logo--reversed { display: none; }
:is([data-site-header][data-scrolled],
    body.hero-daylight [data-site-header]) .site-logo--color { display: block; }
/* The wordmark beside the mark is a <span> inheriting the header's white, so it
   vanished the moment the header flipped to a light surface on scroll. */
:is([data-site-header][data-scrolled],
    body.hero-daylight [data-site-header]) .site-wordmark { color: #0B1A26; }
:is([data-site-header][data-scrolled],
    body.hero-daylight [data-site-header]) .site-wordmark__sub { color: rgba(26,26,26,0.55); }
:is([data-site-header][data-scrolled],
    body.hero-daylight [data-site-header]) .nav-primary-desktop .nav-link { color: #0B1A26; }
:is([data-site-header][data-scrolled],
    body.hero-daylight [data-site-header]) .nav-primary-desktop .nav-link:hover,
:is([data-site-header][data-scrolled],
    body.hero-daylight [data-site-header]) .nav-primary-desktop .nav-link:focus-visible { color: #115A95; }
:is([data-site-header][data-scrolled],
    body.hero-daylight [data-site-header]) .nav-primary-desktop .nav-link::after { background: #0B1A26; }
:is([data-site-header][data-scrolled],
    body.hero-daylight [data-site-header]) .nav-phone { color: rgba(26,26,26, 0.72); }
:is([data-site-header][data-scrolled],
    body.hero-daylight [data-site-header]) .nav-phone:hover { color: #0B1A26; }
:is([data-site-header][data-scrolled],
    body.hero-daylight [data-site-header]) .nav-burger { color: #0B1A26; }
/* Daylight hero: the bar is the hero's own ground, closed by a hairline, so
   there is no dark slab sitting on top of a near-white photograph. */
body.hero-daylight [data-site-header]:not([data-scrolled]) {
  background-color: #FBFCFD;
  box-shadow: inset 0 -1px 0 #DCE4EC;
}
.site-logo { transition: filter 250ms ease; }
.nav-phone, .nav-burger { transition: color 250ms ease; }
/* Transparent over a dark hero (only before scroll).
   Not actually transparent: the hero scrim is a left-to-right gradient that has
   cleared entirely by the right edge, which is exactly where the last nav items
   sit. Over the hero film "Insights" and "Company" were white-on-daylight. A
   top-down vignette behind the bar restores contrast across the full width
   while reading as photographic falloff rather than a panel — the imagery is
   still visible through it. */
body.hero-transparent [data-site-header]:not([data-scrolled]) {
  background-color: transparent;
  background-image: linear-gradient(
    180deg,
    rgba(11, 26, 38, 0.72) 0%,
    rgba(11, 26, 38, 0.52) 55%,
    rgba(11, 26, 38, 0) 100%
  );
}
/* Keep a solid backing when a mega panel is open at the very top. */
body.hero-transparent [data-site-header]:has(.has-mega[data-open="true"]):not([data-scrolled]) {
  background-color: rgba(26,26,26, 0.92);
  backdrop-filter: saturate(1.2) blur(8px);
}
/* Non-hero pages — push content below the fixed header. Every hero in the
   system clears the bar with its own top padding, so both hero body classes
   are exempt. */
body:not(.hero-transparent):not(.hero-daylight) #main { padding-top: 5.5rem; }
.nav-primary-desktop { position: static; }
.nav-primary-desktop > li { position: static; }
.nav-primary-desktop .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.2s ease;
  /* Button reset — top-level mega triggers are <button> elements. */
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
}
.nav-primary-desktop button.nav-link { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.nav-primary-desktop .nav-link:hover,
.nav-primary-desktop .nav-link:focus-visible {
  color: #ffffff;
  outline: none;
}
.nav-primary-desktop .nav-link:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
  border-radius: 4px;
}
/* Active underline, animates in */
.nav-primary-desktop .nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}
.nav-primary-desktop .nav-link:hover::after,
.nav-primary-desktop .current-menu-item > .nav-link::after,
.nav-primary-desktop .current-menu-ancestor > .nav-link::after,
.nav-primary-desktop .has-mega[data-open="true"] > .nav-link::after {
  transform: scaleX(1);
}
.nav-primary-desktop .current-menu-item > .nav-link,
.nav-primary-desktop .current-menu-ancestor > .nav-link,
.nav-primary-desktop .has-mega[data-open="true"] > .nav-link { color: #ffffff; }

/* ---------- Mega dropdowns (desktop, click-to-open) ---------- */
.nav-primary-desktop .has-mega .mega-caret {
  opacity: 0.75;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-primary-desktop .has-mega[data-open="true"] .mega-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-primary-desktop .mega-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  /* Clamp the panel to the site container width so its edges line up with
     page content instead of floating at an arbitrary width under the trigger. */
  width: min(900px, calc(100vw - 2rem));
  max-width: 1136px;
  transform: translateX(-50%) translateY(4px);
  background: #ffffff;
  color: #0B1A26;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #E5E5E5, 0 18px 40px -32px rgba(26,26,26,0.45);
  padding: 0.75rem;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 50;
}
.nav-primary-desktop .has-mega[data-open="true"] .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-primary-desktop .mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Rows auto-size to the tallest cell, so wrapping labels don't break row
     rhythm between columns. Tight gap — the item padding + hover rect does
     the visual spacing work. */
  grid-auto-rows: minmax(44px, auto);
  gap: 2px;
}
.nav-primary-desktop .mega-grid > li { margin: 0; display: flex; }
.nav-primary-desktop .mega-grid a {
  position: static;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border-radius: 2px;
  font-size: 0.875rem;
  line-height: 1.35;
  color: #333333;
  font-weight: 500;
  white-space: normal;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-primary-desktop .mega-grid a::after { content: none; }
.nav-primary-desktop .mega-grid a:hover,
.nav-primary-desktop .mega-grid a:focus-visible {
  background: #EAF2F8;
  color: #115A95;
  outline: none;
  box-shadow: none;
}

/* Dropdown footer — the one way into the parent landing page. */
.nav-primary-desktop .mega-foot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0.625rem 0.5rem 0.25rem;
  padding: 0.5rem 0.875rem;
  border-radius: 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #115A95;
  text-decoration: none;
  transition: gap 0.2s ease, background 0.15s ease, color 0.15s ease;
}
.nav-primary-desktop .mega-foot:hover,
.nav-primary-desktop .mega-foot:focus-visible {
  background: #EAF2F8;
  color: #0B3E66;
  outline: none;
  gap: 10px;
}
.nav-primary-desktop .mega-foot::after { content: none; }

/* Mobile drawer */
.nav-primary-mobile a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.25rem;
  color: rgba(255, 255, 255, 0.88);
  min-height: 48px; /* tap target */
}
.nav-primary-mobile a:hover { color: #ffffff; }
.nav-primary-mobile a::after {
  content: '›';
  color: rgba(255, 255, 255, 0.35);
  font-size: 1.25rem;
  line-height: 1;
  padding-left: 0.75rem;
}
.nav-primary-mobile .current-menu-item > a {
  color: #ffffff;
  font-weight: 600;
}
.nav-primary-mobile .current-menu-item > a::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 18px;
  margin-right: 0.75rem;
  background: #115A95;
  border-radius: 2px;
}

/* Mobile: parent submenu trigger is a full-width button that toggles the list. */
.nav-primary-mobile .submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 0.25rem;
  color: rgba(255, 255, 255, 0.88);
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 500;
  text-align: left;
  min-height: 48px;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-primary-mobile .submenu-toggle:hover,
.nav-primary-mobile .submenu-toggle:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.nav-primary-mobile .submenu-toggle svg {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.2s ease, color 0.15s ease;
}
.nav-primary-mobile .submenu-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
  color: #ffffff;
}
.nav-primary-mobile .submenu-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem 0.75rem;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
  margin-left: 0.25rem;
}
.nav-primary-mobile .submenu-list > li { border: none; }
.nav-primary-mobile .submenu-list a {
  padding: 0.625rem 0.5rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.78);
  min-height: 40px;
}
.nav-primary-mobile .submenu-list a::after { content: none; }
.nav-primary-mobile .submenu-list a:hover { color: #ffffff; }
.nav-primary-mobile .submenu-list .submenu-foot {
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-primary-mobile .submenu-list .submenu-foot a {
  color: #D2A4A6;
  font-weight: 600;
}
.nav-primary-mobile .submenu-list .submenu-foot a:hover { color: #ffffff; }

/* Global: sharpen focus-visible across all links that don't opt out */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #115A95;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Skip elements that already style their own rings */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
[data-menu-toggle]:focus-visible,
.nav-primary-desktop a:focus-visible {
  outline: none;
}

/* Product spec list — clean key/value rows (used in product pages). */
.article-prose .spec-list, .prose .spec-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0; }
.spec-list > li { padding: 0.6rem 0; border-bottom: 1px solid rgba(26,26,26,0.10); font-size: 0.95rem; color: #333333; }
.spec-list > li:last-child { border-bottom: 0; }
.spec-list > li > strong { color: #0B1A26; font-weight: 700; margin-right: 0.4rem; }

/* Mobile drawer: opening it locks page scroll on <html> (main.js), so the
   drawer itself must scroll. Cap it to the viewport below the sticky header --
   otherwise a long expanded submenu list runs past the screen and its bottom
   items become unreachable on phones. */
[data-mobile-menu] {
  max-height: calc(100vh - 4.5rem);
  max-height: calc(100dvh - 4.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Section rhythm surfaces ---------------------------------------
   cc_section_classes() (inc/helpers.php) alternates the section ground bone ↔
   paper on every adjacent pair. A panel nested inside a section reads
   `--cc-panel` so it always lifts off whichever ground it landed on, instead
   of dissolving into it. */
.bg-brand-bone  { --cc-panel: #FFFFFF; }
.bg-brand-paper { --cc-panel: #F2F5F8; }

/* Secondary hero action on an ink/photographic canvas. Subordinate to the solid
   signal-blue CTA by weight, not by being unreadable — signal-blue body text over a
   dark photograph measured about 2.5:1. */
.btn-ghost-ink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.25rem;
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.45);
  transition: box-shadow 200ms ease, color 200ms ease;
}
.btn-ghost-ink:hover,
.btn-ghost-ink:focus-visible {
  color: #FFFFFF;
  box-shadow: inset 0 -1px 0 #FFFFFF;
}
.btn-ghost-ink:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 3px;
}

/* ==========================================================================
   CALM CLINICAL — 9 Oct 2026
   --------------------------------------------------------------------------
   After the call of 8 Oct CareCam named one reference, nabla.com, "down to
   the footer": simpler, more seamless, less static. This block is that pass.
   It is deliberately last and unlayered, so it restyles what is above it
   without rewriting it: one white bar, medium-weight headings with tight
   tracking, one small button system, soft radii, film in the home hero, and
   motion on entry. The palette is still CareCam's own two blues.
   ========================================================================== */
:root {
  --cc-ink:   #0B2E4C;
  --cc-deep:  #0E4C7D;
  --cc-night: #082338;
  --cc-tint:  #EAF5FB;
  --cc-line:  #E3EAF0;
  --cc-mute:  #51677A;
  --cc-sky:   #8FDDF6;
  --cc-bar:   68px;
  --cc-ease:  cubic-bezier(0.2, 0.7, 0.2, 1);
}

body { background-color: #fff; color: #33485A; }
.bg-brand-bone { background-color: #F5F9FC; }

/* ---------- Type ---------- */
h1, h2, h3, h4,
h1.font-bold, h2.font-bold, h3.font-bold, h4.font-bold,
h1.font-semibold, h2.font-semibold, h3.font-semibold, h4.font-semibold { font-weight: 500; }
h1, h2 { letter-spacing: -0.028em; }
h3 { letter-spacing: -0.018em; }
.section-title {
  font-weight: 500;
  color: var(--cc-ink);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem);
}
.section-intro { color: var(--cc-mute); }
.hero__title { font-weight: 500; letter-spacing: -0.032em; }
.showcase-card__title { font-weight: 500; }

/* ---------- Buttons ---------- */
.btn-primary, .btn-secondary, .btn-light, .btn-glass, .btn-outline-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: 8px;
  padding: 0.72rem 1.15rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn-primary { background-color: var(--cc-deep); color: #fff; }
.btn-primary:hover { background-color: var(--cc-ink); box-shadow: none; }
.btn-sm { padding: 0.55rem 0.9rem; font-size: 0.875rem; }
.btn-light { background-color: #fff; color: var(--cc-ink); }
.btn-light:hover { background-color: var(--cc-tint); }
.btn-glass {
  background-color: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  backdrop-filter: blur(10px);
}
.btn-glass:hover { background-color: rgba(255, 255, 255, 0.26); }
.btn-outline-day { border: 1px solid rgba(14, 76, 125, 0.3); color: var(--cc-deep); }
.btn-outline-day:hover { background-color: var(--cc-deep); color: #fff; }
.btn-link, .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--cc-ink);
  text-decoration: none;
}
.btn-link { padding: 0.72rem 0.4rem; }
.link-arrow svg { transition: transform 250ms var(--cc-ease); }
.link-arrow:hover svg { transform: translateX(4px); }
/* Every button ends in the same small arrow, and it moves on hover. */
.btn-primary::after, .btn-light::after, .btn-outline-day::after, .btn-link::after {
  content: '';
  flex: none;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 250ms var(--cc-ease);
}
.btn-primary:hover::after, .btn-light:hover::after, .btn-outline-day:hover::after, .btn-link:hover::after { transform: translateX(3px); }
.btn-primary:has(svg)::after { content: none; }

/* ---------- The bar ---------- */
[data-site-header],
[data-site-header][data-scrolled],
body.hero-transparent [data-site-header]:not([data-scrolled]),
body.hero-daylight [data-site-header]:not([data-scrolled]) {
  background-color: #fff;
  background-image: none;
  backdrop-filter: none;
  box-shadow: inset 0 -1px 0 var(--cc-line);
  color: var(--cc-ink);
  transition: background-color 350ms ease, box-shadow 350ms ease, color 350ms ease;
}
/* Over film or a photograph the bar is clear and its type is white; it takes
   its white ground the moment the page scrolls, or the phone menu opens. */
body.hero-transparent [data-site-header]:not([data-scrolled]):not(:has([data-mobile-menu]:not(.hidden))) {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(8, 35, 56, 0.42), rgba(8, 35, 56, 0));
  box-shadow: none;
  color: #fff;
}
body.hero-transparent [data-site-header]:not([data-scrolled]):not(:has([data-mobile-menu]:not(.hidden))) :is(.site-wordmark, .nav-burger, .nav-primary-desktop > li > .nav-link) { color: #fff; }
/* Over film the logo is white; it returns to its own two blues on scroll
   (Chongkal, 21 Oct — supersedes the 12 Oct "original colours" note). */
body.hero-transparent [data-site-header]:not([data-scrolled]):not(:has([data-mobile-menu]:not(.hidden))) .site-bar > a > img { filter: brightness(0) invert(1); }
body.hero-transparent [data-site-header]:not([data-scrolled]):not(:has([data-mobile-menu]:not(.hidden))) .site-bar .btn-primary { background-color: #fff; color: var(--cc-ink); }
.site-bar > a > img, .site-wordmark, .site-bar .btn-primary { transition: filter 350ms ease, color 350ms ease, background-color 350ms ease; }
.site-bar { height: var(--cc-bar); }
.site-wordmark {
  font-family: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Helvetica Neue, Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--cc-ink);
}
[data-site-header] .nav-burger { color: var(--cc-ink); }
body:not(.hero-transparent):not(.cc-none) #main { padding-top: var(--cc-bar); }

.nav-primary-desktop { gap: 2rem; font-size: 0.9375rem; font-weight: 400; }
.nav-primary-desktop > li { position: relative; }
[data-site-header] .nav-primary-desktop .nav-link,
[data-site-header] .nav-primary-desktop .has-mega[data-open="true"] > .nav-link {
  color: var(--cc-ink);
  font-weight: 400;
  padding: 0.5rem 0;
}
[data-site-header] .nav-primary-desktop .nav-link:hover,
[data-site-header] .nav-primary-desktop .nav-link:focus-visible { color: var(--cc-deep); }
[data-site-header] .nav-primary-desktop .nav-link::after { content: none; }
.nav-primary-desktop .nav-link:focus-visible { box-shadow: 0 0 0 2px rgba(14, 76, 125, 0.35); }

/* The menus were page-wide panels built for a dozen links. Each now holds two
   to four, so it is a small list under its own label, open on hover as well
   as on click. */
.nav-primary-desktop .mega-panel {
  left: -0.9rem;
  width: -moz-max-content;
  width: max-content;
  min-width: 13rem;
  max-width: none;
  padding: 0.4rem;
  border-radius: 12px;
  transform: translateY(6px);
  box-shadow: 0 0 0 1px var(--cc-line), 0 24px 48px -24px rgba(11, 46, 76, 0.28);
}
.nav-primary-desktop .has-mega[data-open="true"] .mega-panel,
.nav-primary-desktop .has-mega:hover .mega-panel,
.nav-primary-desktop .has-mega:focus-within .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-primary-desktop .has-mega:hover .mega-caret { transform: rotate(180deg); }
.nav-primary-desktop .mega-grid {
  display: flex !important;
  flex-direction: column;
  gap: 0;
}
.nav-primary-desktop .mega-grid a {
  display: block;
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 0;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--cc-ink);
  white-space: nowrap;
}
.nav-primary-desktop .mega-grid a:hover,
.nav-primary-desktop .mega-grid a:focus-visible {
  background: var(--cc-tint);
  color: var(--cc-ink);
  box-shadow: none;
  transform: none;
}

.site-drawer { background: #fff; border-top: 1px solid var(--cc-line); }
.nav-primary-mobile { border-color: var(--cc-line); }
.nav-primary-mobile > li { border-color: var(--cc-line) !important; }
.nav-primary-mobile a,
.nav-primary-mobile a:hover,
.nav-primary-mobile .submenu-toggle,
.nav-primary-mobile .submenu-toggle:hover,
.nav-primary-mobile .submenu-list a,
.nav-primary-mobile .submenu-list a:hover { color: var(--cc-ink); }
.nav-primary-mobile .submenu-list a { color: var(--cc-mute); }

/* ---------- Home hero: film ---------- */
.cine {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: min(100svh, 58rem);
  min-height: 36rem;
  background: var(--cc-night);
  color: #fff;
}
.cine__media .hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  transition: opacity 1400ms ease;
}
.cine__media .hero-slide.is-active { opacity: 1; }
.cine__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 35, 56, 0.08) 0%, rgba(8, 35, 56, 0.18) 38%, rgba(8, 35, 56, 0.78) 100%);
}
.cine__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: clamp(4.5rem, 11vh, 7.5rem);
}
.cine__title {
  font-weight: 400;
  font-size: clamp(2.3rem, 1.1rem + 4.3vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.038em;
  color: #fff;
}
.cine__title span { display: block; }
.cine__accent { color: var(--cc-sky); }
.cine__sub {
  margin-top: 1.5rem;
  max-width: 41rem;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0938rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}
.cine__ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.cine__dots { position: absolute; z-index: 2; left: 50%; bottom: 1.6rem; transform: translateX(-50%); display: flex; gap: 0.4rem; }
.cine__dots span { width: 1.6rem; height: 2px; background: rgba(255, 255, 255, 0.35); transition: background-color 400ms ease; }
.cine__dots span.is-active { background: #fff; }
.cine__inner > * { animation: cc-rise 1000ms var(--cc-ease) both; }
.cine__inner > :nth-child(2) { animation-delay: 140ms; }
.cine__inner > :nth-child(3) { animation-delay: 280ms; }
@keyframes cc-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------- Tabs: a list, and the picture for the open item ---------- */
.tabsx__grid { display: grid; gap: 2.5rem; }
.tabsx__copy { display: flex; flex-direction: column; }
.tabsx__list { margin-top: 2.5rem; }
.tabsx__item { border-left: 2px solid var(--cc-line); padding-left: 1.25rem; transition: border-color 400ms ease; }
.tabsx__item.is-active { border-left-color: var(--cc-ink); }
.tabsx__head {
  display: block;
  width: 100%;
  padding: 0.55rem 0;
  text-align: left;
  font-family: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Helvetica Neue, Arial, sans-serif;
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #A3B4C2;
  transition: color 300ms ease;
}
.tabsx__head:hover { color: var(--cc-deep); }
.tabsx__item.is-active .tabsx__head { color: var(--cc-ink); }
.tabsx__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 500ms var(--cc-ease); }
.js .tabsx__item:not(.is-active) .tabsx__body { grid-template-rows: 0fr; }
.tabsx__body > div { overflow: hidden; }
.tabsx__body p { max-width: 27rem; padding-bottom: 0.75rem; font-size: 0.9688rem; line-height: 1.6; color: var(--cc-mute); }
.tabsx__body .link-arrow { margin-bottom: 0.9rem; }
.tabsx__media {
  position: relative;
  order: -1;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 4 / 3;
  background: var(--cc-tint);
}
.tabsx__media img, .tabsx__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 700ms ease, transform 1600ms var(--cc-ease);
}
.tabsx__media img.is-active, .tabsx__media video.is-active { opacity: 1; transform: none; }
@media (min-width: 1024px) {
  .tabsx__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 5rem; }
  .tabsx__list { margin-top: auto; padding-top: 3rem; min-height: 19rem; }
  .tabsx__media { order: 0; aspect-ratio: 1 / 1.04; }
}

/* ---------- Float: one picture, the cards across its lower edge ---------- */
.floatx .section-header { margin-bottom: 3rem; }
.floatx__stage { overflow: hidden; border-radius: 20px; background: var(--cc-tint); aspect-ratio: 16 / 10; }
.floatx__stage img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.floatx__cards { display: grid; gap: 0.9rem; margin-top: 0.9rem; }
.floatx__card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.4rem;
  text-align: center;
  box-shadow: 0 0 0 1px var(--cc-line), 0 22px 44px -26px rgba(11, 46, 76, 0.28);
}
.floatx__card h3 { font-size: 1.0625rem; font-weight: 500; color: var(--cc-deep); }
.floatx__card p { margin-top: 0.55rem; font-size: 0.875rem; line-height: 1.55; color: var(--cc-mute); }
@media (min-width: 768px) {
  .floatx__stage { aspect-ratio: 21 / 9; }
  .floatx__cards { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: -4.5rem 2rem 0; }
  .floatx__cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Quotes: one tinted panel ---------- */
.quotex { background: var(--cc-tint); border-radius: 20px; padding: clamp(1.25rem, 3vw, 2.5rem); }
.quotex__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(11, 46, 76, 0.14);
}
.quotex__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 500; letter-spacing: -0.028em; color: var(--cc-ink); }
.quotex__grid { display: grid; gap: 0.9rem; }
.quotex__card {
  display: flex;
  flex-direction: column;
  min-height: 19rem;
  padding: 1.5rem;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(180deg, #1A6FA8 0%, #0E4C7D 55%, #0B3A5F 100%);
  transition: transform 350ms var(--cc-ease), box-shadow 350ms ease;
}
.quotex__card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(11, 46, 76, 0.55); }
.quotex__org { margin-bottom: 1.25rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.quotex__card blockquote { font-size: 1rem; line-height: 1.55; }
.quotex__card figcaption { margin-top: auto; padding-top: 1.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.quotex__name { font-size: 0.875rem; font-weight: 500; }
.quotex__role { font-size: 0.75rem; line-height: 1.45; color: rgba(255, 255, 255, 0.72); }
@media (min-width: 640px)  { .quotex__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .quotex__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .quotex__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Partner tiles: an ink band ---------- */
.tilex { background: var(--cc-night); color: #fff; overflow: hidden; }
.tilex__grid { display: grid; gap: 1rem; align-items: center; }
.tilex__copy { padding: 4rem 0 1rem; }
.tilex__title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; max-width: 18ch; }
.tilex__intro { margin: 1.25rem 0 1.75rem; max-width: 31rem; line-height: 1.6; color: rgba(255, 255, 255, 0.8); }
.tilex__wall {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  height: 15rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.tilex__col { animation: cc-drift 38s linear infinite; }
.tilex__col--1 { animation-direction: reverse; }
.tilex__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7rem;
  margin-bottom: 0.75rem;
  padding: 1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
}
.tilex__tile img { max-height: 3rem; max-width: 80%; filter: brightness(0) invert(1); }
@keyframes cc-drift { to { transform: translateY(-50%); } }
@media (min-width: 1024px) {
  .tilex__grid { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; }
  .tilex__copy { padding: 0; }
  .tilex__wall { height: 27rem; }
}

/* ---------- Closing band ---------- */
.closex { position: relative; overflow: hidden; padding: clamp(4.5rem, 9vw, 7rem) 0; text-align: center; background: linear-gradient(180deg, #fff 0%, #E4F2FA 100%); }
.closex__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 1.1%; padding: 0 1.5%; }
.closex__bars i {
  flex: 1;
  height: 38%;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  transform-origin: bottom;
  animation: cc-bar 7s ease-in-out infinite alternate;
}
.closex__bars i:nth-child(3n)   { height: 62%; animation-delay: -2s; }
.closex__bars i:nth-child(4n+1) { height: 80%; animation-delay: -4s; }
.closex__bars i:nth-child(5n+2) { height: 50%; animation-delay: -1s; }
.closex__bars i:nth-child(7n)   { height: 92%; animation-delay: -5s; }
@keyframes cc-bar { from { transform: scaleY(0.72); } to { transform: scaleY(1.08); } }
.closex__inner { position: relative; }
.closex__title { margin: 0 auto; max-width: 20ch; font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.032em; color: var(--cc-ink); }
.closex__body { margin: 1.25rem auto 0; max-width: 36rem; color: var(--cc-mute); }
.closex__ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

/* ---------- Cards everywhere ---------- */
.showcase-card {
  overflow: hidden;
  border-radius: 14px;
  border-color: var(--cc-line);
  transition: transform 350ms var(--cc-ease), box-shadow 350ms ease;
}
.showcase-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(11, 46, 76, 0.35); }
.showcase-card__media img { transition: transform 1200ms var(--cc-ease); }
.showcase-card:hover .showcase-card__media img { transform: scale(1.04); }

/* ---------- Footer ----------
   Light since 15 Oct 2026: the client asked for the logo in its own two blues
   in the footer as well (review overlay, 13 and 15 Oct), and the deep blue of
   "Cam" does not read on the night ground the footer had. */
.site-foot { background: var(--cc-mist, #F3F7FA); border-top: 1px solid var(--cc-line); padding: 4.5rem 0 2rem; font-size: 0.875rem; color: rgba(11, 26, 38, 0.72); }
.site-foot__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem 2rem; padding-bottom: 3.5rem; }
.site-foot__brand { display: inline-flex; align-items: center; gap: 0.8rem; height: clamp(2rem, 1.5rem + 1.8vw, 2.9rem); }
.site-foot__brand img { width: auto; height: 100%; }
.site-foot__brand img.site-foot__wordmark { height: 62%; }
.site-foot__contact { display: flex; flex-direction: column; gap: 0.35rem; }
.site-foot__contact a { color: var(--cc-ink); }
.site-foot__contact a:hover { color: var(--cc-deep); }
.site-foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
.site-foot__cols h3 { margin-bottom: 1rem; font-size: 0.8125rem; font-weight: 400; letter-spacing: 0; color: rgba(11, 26, 38, 0.55); }
.site-foot__menu { display: flex; flex-direction: column; gap: 0.7rem; }
.site-foot__menu a { color: var(--cc-ink); transition: color 200ms ease; }
.site-foot__menu a:hover { color: var(--cc-deep); }
.site-foot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cc-line);
  font-size: 0.75rem;
  color: rgba(11, 26, 38, 0.55);
}
.site-foot__managed { margin-left: 0.75rem; }
.site-foot__managed a { color: rgba(11, 26, 38, 0.72); }
.site-foot__social { display: flex; gap: 0.5rem; }
.site-foot__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: rgba(11, 26, 38, 0.06);
  color: var(--cc-ink);
  transition: background-color 200ms ease, color 200ms ease;
}
.site-foot__social-link:hover { background: var(--cc-deep); color: #fff; }
@media (min-width: 768px)  { .site-foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-foot__contact { text-align: right; } }
@media (min-width: 1024px) { .site-foot__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- Entry motion ----------
   main.js adds .rv only to things that start below the fold, so nothing that
   is already on screen blinks, and nothing is hidden without JS. */
.js .rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--cc-ease), transform 800ms var(--cc-ease);
  transition-delay: var(--rv-d, 0ms);
}
.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .cine__inner > *, .tilex__col, .closex__bars i { animation: none; }
  .cine__media .hero-slide, .tabsx__media img { transition: none; }
}
.floatx__label { margin-bottom: 0.5rem; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-mute); }
.tabsx__media { box-shadow: inset 0 0 0 1px var(--cc-line); }
.floatx__stage img { -o-object-position: 50% 30%; object-position: 50% 30%; }
.tilex__title + .btn-light { margin-top: 1.75rem; }
.section-title.text-white, .testimony .section-title { color: #fff; }
.testimony { background-color: var(--cc-night); }

/* ==========================================================================
   CALM CLINICAL, second pass — 9 Oct 2026
   The same treatment carried to every other page: the cinema hero at page
   height, the light band for pages without a picture, and the remaining
   blocks redrawn with the same radii, hairlines and motion.
   ========================================================================== */

/* ---------- Cinema hero, page height ---------- */
.cine--page { height: clamp(27rem, 66svh, 39rem); min-height: 0; }
.cine--page .cine__title { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.5rem); max-width: 22ch; }
.cine--page .cine__inner { padding-bottom: clamp(3rem, 8vh, 5rem); }
.cine__label {
  margin-bottom: 1.1rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.cine__inner > :nth-child(4) { animation-delay: 420ms; }
.hero-slide--still { animation: cc-pan 26s ease-in-out infinite alternate; }
@keyframes cc-pan { from { transform: scale(1.02); } to { transform: scale(1.12) translate3d(-1.2%, -1%, 0); } }

/* ---------- Light band: pages without a picture ---------- */
.pagehead {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(4rem, 8vw, 6rem);
  text-align: center;
  background: linear-gradient(180deg, #fff 0%, #E4F2FA 100%);
}
.pagehead__inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.pagehead__inner > * { animation: cc-rise 900ms var(--cc-ease) both; }
.pagehead__inner > :nth-child(2) { animation-delay: 120ms; }
.pagehead__inner > :nth-child(3) { animation-delay: 240ms; }
.pagehead__inner > :nth-child(4) { animation-delay: 360ms; }
.pagehead__label { margin-bottom: 1.1rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-deep); }
.pagehead__title { max-width: 20ch; font-size: clamp(2.2rem, 1.3rem + 3.2vw, 3.6rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.036em; color: var(--cc-ink); }
.pagehead__sub { margin-top: 1.4rem; max-width: 40rem; font-size: 1.0625rem; line-height: 1.6; color: var(--cc-mute); }
.pagehead__meta { margin-top: 1.4rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.25rem; font-size: 0.8125rem; color: var(--cc-mute); }
.pagehead__ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.pagehead__facts { margin-top: 2.25rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.pagehead__facts > div { padding: 0.7rem 1.1rem; border-radius: 10px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 0 0 1px var(--cc-line); text-align: left; }
.pagehead__facts dt { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-mute); }
.pagehead__facts dd { margin-top: 0.15rem; font-size: 0.9375rem; font-weight: 500; color: var(--cc-ink); }
@media (prefers-reduced-motion: reduce) { .hero-slide--still, .pagehead__inner > * { animation: none; } }

/* ---------- Tabs: picture on the left, device screens, points ---------- */
@media (min-width: 1024px) {
  .tabsx--flip .tabsx__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .tabsx--flip .tabsx__media { order: -1; }
}
.tabsx--contain .tabsx__media { background: linear-gradient(160deg, #F3F9FD 0%, #DCEEF8 100%); }
.tabsx--contain .tabsx__media img, .tabsx--contain .tabsx__media video { -o-object-fit: contain; object-fit: contain; padding: 7% 7% 0; -o-object-position: 50% 0; object-position: 50% 0; transform: translateY(5%); }
.tabsx--contain .tabsx__media img.is-active, .tabsx--contain .tabsx__media video.is-active { transform: none; }
.tabsx__label { padding-bottom: 0.4rem !important; font-weight: 500; color: var(--cc-ink) !important; }
.tabsx__points { padding-bottom: 0.9rem; display: grid; gap: 0.45rem; max-width: 27rem; }
.tabsx__points li { position: relative; padding-left: 1.5rem; font-size: 0.9063rem; line-height: 1.5; color: var(--cc-mute); }
.tabsx__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.85rem;
  height: 0.5rem;
  border-left: 1.6px solid #1AA7DE;
  border-bottom: 1.6px solid #1AA7DE;
  transform: rotate(-45deg) scale(0.85);
}

/* ---------- Quotes: the clinician's portrait ---------- */
.quotex__card figcaption { flex-direction: row; align-items: center; gap: 0.8rem; }
.quotex__card figcaption > span { display: flex; flex-direction: column; gap: 0.25rem; }
.quotex__face { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 999px; -o-object-fit: cover; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }

/* ---------- Partner tiles with logos ---------- */
.tilex__tile--logo { background: #fff; }
.tilex__tile--logo img { max-height: 3.4rem; max-width: 78%; filter: none; -o-object-fit: contain; object-fit: contain; }

/* ---------- Pills: labels over one wide panel ---------- */
.pillx__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pillx__head .section-title { max-width: 24ch; }
.pillx__nav { margin-top: 2.25rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; padding: 0.35rem; border-radius: 14px; background: #F1F6FA; }
.pillx__pill .tabsx__head {
  width: auto;
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--cc-mute);
  transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
}
.pillx__pill.is-active .tabsx__head { background: #fff; color: var(--cc-ink); box-shadow: 0 0 0 1px var(--cc-line), 0 10px 20px -14px rgba(11, 46, 76, 0.4); }
.pillx__stage { margin-top: 2rem; display: grid; }
.pillx__panel {
  grid-area: 1 / 1;
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: 20px;
  background: var(--cc-tint);
  transition: opacity 600ms ease, transform 700ms var(--cc-ease), visibility 0s linear 600ms;
}
.js .pillx__panel:not(.is-active) { opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; }
.js .pillx__panel.is-active { transition-delay: 0s; }
html:not(.js) .pillx__panel { grid-area: auto; margin-bottom: 1rem; }
.pillx__copy { display: flex; flex-direction: column; justify-content: center; }
.pillx__copy h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 500; letter-spacing: -0.025em; color: var(--cc-ink); }
.pillx__copy > p { margin: 0.9rem 0 1.4rem; max-width: 30rem; line-height: 1.6; color: var(--cc-mute); }
.pillx__copy .tabsx__points { max-width: 30rem; }
.pillx__copy .tabsx__points li { font-size: 0.9375rem; }
.pillx__copy .link-arrow { margin-top: 0.75rem; }
.pillx__media { overflow: hidden; border-radius: 14px; aspect-ratio: 16 / 10; }
.pillx__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transform: scale(1.06); transition: transform 1800ms var(--cc-ease); }
.pillx__panel.is-active .pillx__media img { transform: none; }
@media (min-width: 900px) {
  .pillx__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: stretch; }
  .pillx__copy { padding: 1.5rem 0 1.5rem 1rem; }
  .pillx__media { aspect-ratio: auto; min-height: 24rem; }
}
/* The list no longer sinks to the foot of the column: with two or three items
   that left a hole under the heading. Copy is centred against the picture. */
@media (min-width: 1024px) {
  .tabsx__copy { justify-content: center; }
  .tabsx__list { margin-top: 2.5rem; padding-top: 0; min-height: 0; }
}

/* ---------- Panel cards and figures: every inner page ---------- */
.panelx__head { max-width: 44rem; margin-bottom: 2.75rem; }
.panelx__grid { display: grid; gap: 1rem; }
.panelx__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: #F3F8FC;
  transition: transform 350ms var(--cc-ease), box-shadow 350ms ease, background-color 350ms ease;
}
.panelx__card:hover { transform: translateY(-4px); background: var(--cc-tint); box-shadow: 0 24px 44px -30px rgba(11, 46, 76, 0.4); }
.panelx__media { aspect-ratio: 16 / 10; overflow: hidden; }
.panelx__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 1200ms var(--cc-ease); }
.panelx__card:hover .panelx__media img { transform: scale(1.05); }
.panelx__body { display: flex; flex: 1; flex-direction: column; padding: 1.6rem 1.5rem 1.7rem; }
.panelx__label { margin-bottom: 0.7rem; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-deep); }
.panelx__body h3 { font-size: 1.1875rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; color: var(--cc-ink); }
.panelx__body > p { margin-top: 0.6rem; font-size: 0.9375rem; line-height: 1.6; color: var(--cc-mute); }
.panelx__body .tabsx__points { margin-top: 1.1rem; padding: 1.1rem 0 0; border-top: 1px solid rgba(11, 46, 76, 0.1); }
.panelx__body .link-arrow { margin-top: auto; padding-top: 1.1rem; }
@media (min-width: 700px)  { .panelx__grid--2, .panelx__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .panelx__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .panelx__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.panelx--stats { padding-top: 0; }
.panelx--stats .panelx__grid { gap: 0; border-top: 1px solid var(--cc-line); border-bottom: 1px solid var(--cc-line); }
.panelx--stats .panelx__card { border-radius: 0; background: none; text-align: center; }
.panelx--stats .panelx__card:hover { transform: none; background: none; box-shadow: none; }
.panelx--stats .panelx__body { padding: 2.25rem 1rem; align-items: center; }
.panelx--stats h3 { font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); font-weight: 400; letter-spacing: -0.04em; color: var(--cc-deep); }
.panelx--stats .panelx__body > p { margin-top: 0.4rem; font-size: 0.875rem; }
@media (min-width: 900px) { .panelx--stats .panelx__card + .panelx__card { border-left: 1px solid var(--cc-line); } }

.quotex__facts { display: grid; gap: 1rem 2rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(11, 46, 76, 0.14); }
.quotex__facts dt { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-mute); }
.quotex__facts dd { margin-top: 0.3rem; font-size: 0.9375rem; line-height: 1.45; color: var(--cc-ink); }
@media (min-width: 900px) { .quotex__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Partner grid: logos on white cards ---------- */
.logo-grid__item { border-radius: 14px; background: #fff; border: 1px solid var(--cc-line); transition: transform 350ms var(--cc-ease), background-color 350ms ease; }
.logo-grid__item:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -28px rgba(11, 46, 76, 0.4); }
.logo-grid__img + .logo-grid__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.logo-grid__img { max-height: 3.25rem; width: auto; max-width: 11rem; -o-object-fit: contain; object-fit: contain; }
.panelx--stats .panelx__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) { .panelx--stats .panelx__body { padding: 1.5rem 0.4rem; } .panelx--stats h3 { font-size: 1.9rem; } }

/* ---------- Tabs: the rule on the left marks the open item ---------- */
.tabsx__item { position: relative; }
.tabsx__item::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--cc-deep);
  transform: scaleY(0);
  transform-origin: top;
}
.tabsx__item.is-active { border-left-color: var(--cc-line); }
.tabsx__item.is-active::before { transform: scaleY(1); }
/* Scroll mode (15 Oct 2026, main.js adds .is-scroll on wide screens): the
   section is as tall as its items need, the grid is pinned under the bar, and
   the open item's rule fills with the scroll through it. */
.tabsx.is-scroll { height: calc(var(--tabs-n, 3) * 70vh + 30vh); padding-top: 0; padding-bottom: 0; }
.tabsx.is-scroll > .tabsx__grid {
  position: sticky;
  top: var(--cc-bar);
  min-height: calc(100vh - var(--cc-bar));
  align-content: center;
  align-items: center;
}
.tabsx.is-scroll .tabsx__item.is-active::before { transform: scaleY(calc(0.08 + var(--tab-fill, 0) * 0.92)); transition: transform 120ms linear; }
/* The same idea on the pills: a line under the open label. */
.pillx__pill { position: relative; }
.pillx .pillx__pill.is-active::after {
  content: '';
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--cc-deep);
}

/* ---------- Figures: four across ---------- */
.panelx--stats .panelx__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .panelx--stats .panelx__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px) { .panelx--stats .panelx__grid--4 .panelx__card:nth-child(n+3) { border-top: 1px solid var(--cc-line); } }

/* ---------- Publications: the findings as cards, the sources as rows ---------- */
.claim-list { display: grid; gap: 1rem; counter-reset: claim; max-width: none; }
@media (min-width: 900px) { .claim-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.claim {
  counter-increment: claim;
  margin: 0;
  padding: 1.75rem 1.6rem;
  border: 0;
  border-radius: 16px;
  background: #F3F8FC;
  transition: transform 350ms var(--cc-ease), background-color 350ms ease;
}
.claim:hover { transform: translateY(-3px); background: var(--cc-tint); }
.claim::before {
  content: counter(claim, decimal-leading-zero);
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--cc-deep);
}
.claim__text { font-size: 1.0625rem; line-height: 1.55; color: var(--cc-ink); max-width: none; }
.claim__note { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid rgba(11, 46, 76, 0.1); font-family: inherit; font-size: 0.8125rem; letter-spacing: 0; text-transform: none; color: var(--cc-mute); }
.claim__refs a { color: var(--cc-deep); }

.source-list { max-width: none; display: grid; gap: 0.75rem; }
.source-group { margin-top: 1.75rem; padding: 0; border: 0; }
.source-group:first-child { margin-top: 0; }
.source-group__title { font-family: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Helvetica Neue, Arial, sans-serif; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; text-transform: none; color: var(--cc-ink); }
.source {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.5rem 1rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--cc-line);
  border-radius: 16px;
  background: #fff;
  transition: transform 350ms var(--cc-ease), box-shadow 350ms ease, border-color 350ms ease;
}
.source:hover { transform: translateY(-3px); border-color: transparent; box-shadow: 0 0 0 1px var(--cc-line), 0 24px 44px -30px rgba(11, 46, 76, 0.4); }
.source:target { border-color: var(--cc-deep); }
.source__num { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--cc-tint); font-family: inherit; font-size: 0.8125rem; font-weight: 500; color: var(--cc-deep); }
.source__title { font-size: 1.125rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; color: var(--cc-ink); }
.source__title a { color: inherit; text-decoration: none; }
.source__title a:hover { color: var(--cc-deep); }
.source__meta { margin-top: 0.45rem; font-family: inherit; font-size: 0.8125rem; letter-spacing: 0; text-transform: none; line-height: 1.5; color: var(--cc-mute); }
.source__gloss { margin-top: 0.7rem; max-width: 52rem; font-size: 0.9375rem; line-height: 1.6; color: #33485A; }
.source__link { margin-top: 0.9rem; font-weight: 500; color: var(--cc-deep); }
.source-note { max-width: none; margin-top: 1.5rem; font-size: 0.875rem; color: var(--cc-mute); }

/* Publications as CareCam asked for it (15 Oct 2026): no number gutter. */
.source.source--plain { grid-template-columns: minmax(0, 1fr); }
/* "Highlight CareCam team" (client, 12 Oct): the logo's light blue, darkened to read on the light band. */
.pagehead__accent { color: #0B8BC0; }

/* Newsroom "Featured" (15 Oct 2026): news articles and media coverage. */
.featurednews { display: grid; gap: 1rem; }
@media (min-width: 768px) { .featurednews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .featurednews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.featurednews__item a { display: flex; flex-direction: column; gap: 0.6rem; height: 100%; padding: 1.5rem 1.6rem; border: 1px solid var(--cc-line); border-radius: 16px; background: #fff; transition: transform 350ms var(--cc-ease), box-shadow 350ms ease; }
.featurednews__item a:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -30px rgba(11, 46, 76, 0.4); }
.featurednews__source { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-deep); }
.featurednews__title { font-size: 1.0625rem; font-weight: 500; line-height: 1.4; color: var(--cc-ink); }
/* "Remove the whitespace" (client, 12 Oct, fall risk page): the section after
   a row of figures starts close under it rather than a full section away. */
.panelx--stats + .section { padding-top: 2.5rem; }

/* ---------- 19 Oct 2026: client media (report video, SVG screens, icons) ---------- */
/* A screen recording is a phone-shaped portrait: show it whole, sitting on the tint. */
.tabsx--contain .tabsx__media video { padding: 6% 6% 0; -o-object-position: 50% 0; object-position: 50% 0; }
.tabsx__media .is-shared { opacity: 1; transform: none; }
/* Rich text: a picture that is a cut-out or a screen is shown whole, not cropped. */
.rt-media--contain { background: linear-gradient(160deg, #F3F9FD 0%, #DCEEF8 100%); }
.rt-media--contain img, .rt-media--contain video { -o-object-fit: contain !important; object-fit: contain !important; padding: 6%; }
.rt-media video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
/* Feature cards with an icon in place of a photograph (brochure icons). */
.panelx__icon { width: 4.5rem; height: 4.5rem; border-radius: 9999px; overflow: hidden; margin-bottom: 1.25rem; box-shadow: 0 6px 16px rgba(17, 90, 149, 0.18); }
.panelx__icon img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
/* Showcase rows: illustrations shown whole on white; a video fills the frame. */
.showcase__media--contain { background: #fff; }
.showcase__media--contain img { -o-object-fit: contain !important; object-fit: contain !important; }
.showcase__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.showcase__credit { margin-top: 0.5rem; font-size: 0.75rem; color: var(--cc-mute); }
.showcase__credit a { text-decoration: underline; text-underline-offset: 2px; }
.panelx--stats .panelx__unit { font-size: 1.125rem; font-weight: 600; letter-spacing: 0; color: var(--cc-ink); margin-left: 0.15em; }
.placeholder\:text-brand-ink\/40::-moz-placeholder {
  color: rgb(11 26 38 / 0.4);
}
.placeholder\:text-brand-ink\/40::placeholder {
  color: rgb(11 26 38 / 0.4);
}
.first\:border-t-0:first-child {
  border-top-width: 0px;
}
.first\:pt-0:first-child {
  padding-top: 0px;
}
.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:gap-2\.5:hover {
  gap: 0.625rem;
}
.hover\:border-brand-primary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(17 90 149 / var(--tw-border-opacity, 1));
}
.hover\:border-brand-primary\/30:hover {
  border-color: rgb(17 90 149 / 0.3);
}
.hover\:border-brand-primary\/40:hover {
  border-color: rgb(17 90 149 / 0.4);
}
.hover\:border-white:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.hover\:bg-brand-accent-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 159 202 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(17 90 149 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-primary-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(234 242 248 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-primary-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(14 76 125 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:text-brand-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(11 26 38 / var(--tw-text-opacity, 1));
}
.hover\:text-brand-primary:hover {
  --tw-text-opacity: 1;
  color: rgb(17 90 149 / var(--tw-text-opacity, 1));
}
.hover\:text-brand-primary-600:hover {
  --tw-text-opacity: 1;
  color: rgb(14 76 125 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:no-underline:hover {
  text-decoration-line: none;
}
.hover\:shadow-brand-lg:hover {
  --tw-shadow: 0 0 0 1px #DCE4EC, 0 12px 32px -24px rgba(11,26,38,0.35);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 12px 32px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-brand-primary:hover {
  --tw-shadow: 0 0 0 1px rgba(17,90,149,0.35);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: #115A95;
  --tw-shadow: var(--tw-shadow-colored);
}
.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
.focus\:absolute:focus {
  position: absolute;
}
.focus\:left-2:focus {
  left: 0.5rem;
}
.focus\:top-2:focus {
  top: 0.5rem;
}
.focus\:border-brand-primary:focus {
  --tw-border-opacity: 1;
  border-color: rgb(17 90 149 / var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-4:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-brand-primary:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(17 90 149 / var(--tw-ring-opacity, 1));
}
.focus\:ring-brand-primary\/15:focus {
  --tw-ring-color: rgb(17 90 149 / 0.15);
}
.focus\:ring-brand-primary\/30:focus {
  --tw-ring-color: rgb(17 90 149 / 0.3);
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-4:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-brand-accent\/40:focus-visible {
  --tw-ring-color: rgb(29 188 236 / 0.4);
}
.focus-visible\:ring-brand-primary\/25:focus-visible {
  --tw-ring-color: rgb(17 90 149 / 0.25);
}
.focus-visible\:ring-brand-primary\/40:focus-visible {
  --tw-ring-color: rgb(17 90 149 / 0.4);
}
.focus-visible\:ring-white\/30:focus-visible {
  --tw-ring-color: rgb(255 255 255 / 0.3);
}
.group[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-\[1\.03\] {
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:gap-2\.5 {
  gap: 0.625rem;
}
.group:hover .group-hover\:bg-brand-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(17 90 149 / var(--tw-bg-opacity, 1));
}
@media (min-width: 640px) {

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:block {
    display: block;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:pb-10 {
    padding-bottom: 2.5rem;
  }

  .sm\:pb-12 {
    padding-bottom: 3rem;
  }

  .sm\:pb-14 {
    padding-bottom: 3.5rem;
  }

  .sm\:pb-16 {
    padding-bottom: 4rem;
  }

  .sm\:pb-20 {
    padding-bottom: 5rem;
  }

  .sm\:pt-28 {
    padding-top: 7rem;
  }

  .sm\:pt-32 {
    padding-top: 8rem;
  }
}
@media (min-width: 768px) {

  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {

  .lg\:sticky {
    position: sticky;
  }

  .lg\:top-24 {
    top: 6rem;
  }

  .lg\:top-28 {
    top: 7rem;
  }

  .lg\:order-last {
    order: 9999;
  }

  .lg\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:-my-4 {
    margin-top: -1rem;
    margin-bottom: -1rem;
  }

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:-mt-16 {
    margin-top: -4rem;
  }

  .lg\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .lg\:mb-12 {
    margin-bottom: 3rem;
  }

  .lg\:mb-14 {
    margin-bottom: 3.5rem;
  }

  .lg\:mb-16 {
    margin-bottom: 4rem;
  }

  .lg\:mt-16 {
    margin-top: 4rem;
  }

  .lg\:mt-auto {
    margin-top: auto;
  }

  .lg\:block {
    display: block;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:aspect-auto {
    aspect-ratio: auto;
  }

  .lg\:h-20 {
    height: 5rem;
  }

  .lg\:h-52 {
    height: 13rem;
  }

  .lg\:w-1\/2 {
    width: 50%;
  }

  .lg\:w-20 {
    width: 5rem;
  }

  .lg\:w-52 {
    width: 13rem;
  }

  .lg\:scale-\[1\.03\] {
    --tw-scale-x: 1.03;
    --tw-scale-y: 1.03;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.15fr_1fr\] {
    grid-template-columns: 1.15fr 1fr;
  }

  .lg\:grid-cols-\[1\.1fr_0\.9fr\] {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .lg\:grid-cols-\[1fr_1\.1fr\] {
    grid-template-columns: 1fr 1.1fr;
  }

  .lg\:grid-cols-\[minmax\(0\2c 0\.72fr\)_minmax\(0\2c 1\.28fr\)\] {
    grid-template-columns: minmax(0,0.72fr) minmax(0,1.28fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 0\.8fr\)_minmax\(0\2c 1\.2fr\)\] {
    grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1\.55fr\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(0,1.55fr) minmax(0,1fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_260px\] {
    grid-template-columns: minmax(0,1fr) 260px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 0\.9fr\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,0.9fr);
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:justify-end {
    justify-content: flex-end;
  }

  .lg\:justify-center {
    justify-content: center;
  }

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

  .lg\:gap-14 {
    gap: 3.5rem;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-6 {
    gap: 1.5rem;
  }

  .lg\:space-y-24 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(6rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(6rem * var(--tw-space-y-reverse));
  }

  .lg\:justify-self-end {
    justify-self: end;
  }

  .lg\:p-10 {
    padding: 2.5rem;
  }

  .lg\:p-12 {
    padding: 3rem;
  }

  .lg\:p-14 {
    padding: 3.5rem;
  }

  .lg\:p-6 {
    padding: 1.5rem;
  }

  .lg\:p-7 {
    padding: 1.75rem;
  }

  .lg\:p-8 {
    padding: 2rem;
  }

  .lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .lg\:px-14 {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  .lg\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .lg\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .lg\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .lg\:py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .lg\:pb-24 {
    padding-bottom: 6rem;
  }

  .lg\:pb-7 {
    padding-bottom: 1.75rem;
  }

  .lg\:pt-1\.5 {
    padding-top: 0.375rem;
  }

  .lg\:pt-10 {
    padding-top: 2.5rem;
  }

  .lg\:pt-12 {
    padding-top: 3rem;
  }

  .lg\:pt-14 {
    padding-top: 3.5rem;
  }

  .lg\:pt-2 {
    padding-top: 0.5rem;
  }

  .lg\:pt-32 {
    padding-top: 8rem;
  }

  .lg\:pt-36 {
    padding-top: 9rem;
  }

  .lg\:pt-4 {
    padding-top: 1rem;
  }

  .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .lg\:text-\[1\.125rem\] {
    font-size: 1.125rem;
  }

  .lg\:text-\[1\.75rem\] {
    font-size: 1.75rem;
  }

  .lg\:text-\[2\.125rem\] {
    font-size: 2.125rem;
  }

  .lg\:text-\[2\.25rem\] {
    font-size: 2.25rem;
  }

  .lg\:text-\[2\.5rem\] {
    font-size: 2.5rem;
  }

  .lg\:text-\[2rem\] {
    font-size: 2rem;
  }

  .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .lg\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}