/* Inspired Custom Pools and Landscape: brand style sheet
   Colours, type, spacing and shape for the whole site, in one file.
   Change a value here and it changes everywhere.
   Generated by John Kaplar (johnkaplar.ai) from the original site and the chosen design. */

/* Theme: Your Brand, Modernized. Built from the original site's own
   typefaces and colours, applied to the modern layout.
   - background #ffffff kept from the old site; text #4c5253; headings in the navy of the logo wordmark #0d4a7c
   - accent: their button cyan #2fc1ff on the buttons with navy words; a deeper #0f7fb5 of the same blue where it has to be read as text
   - headline typeface Jost, the face of their own headings and of the logo wordmark
   - body typeface Roboto kept
   - tracked uppercase headings kept, centred sections
   - corner radius 0px from the old site's buttons */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f8fc;
  --line: #dde6ea;
  --line-strong: #b7c5cc;

  --text: #4c5253;
  --text-2: #646c6e;

  --accent: #0f7fb5;
  --accent-deep: #0b6592;
  --accent-soft: rgba(47, 193, 255, 0.16);
  --on-accent: #ffffff;

  --dark-bg: #0b3558;
  --dark-text: #ffffff;
  --dark-text-2: #bcd3e3;

  --font-display: 'Jost', system-ui, sans-serif;
  --font-body: 'Roboto', system-ui, sans-serif;
  --font-eyebrow: 'Jost', system-ui, sans-serif;
  --display-weight: 500;
  --display-tracking: 0.045em;
  --display-transform: uppercase;
  --display-size: 4.4rem;
  --h1-size: 3rem;
  --h2-size: 2.1rem;
  --h3-size: 1.35rem;
  --body-size: 1.0625rem;
  --lead-size: 1.22rem;
  --eyebrow-size: 0.76rem;
  --eyebrow-tracking: 0.16em;
  --eyebrow-transform: uppercase;
  --btn-size: 0.92rem;
  --btn-tracking: 0.08em;
  --btn-transform: uppercase;
  --btn-pad: 14px 26px;

  --radius-control: 3px;
  --radius-card: 6px;
  --radius-image: 4px;
  --gutter: 24px;
  --gap: 24px;
  --gap-lg: 60px;
  --section-pad: clamp(72px, 10vw, 132px);
  --content-max: 1160px;
  --content-max-wide: 1400px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --reveal-duration: 750ms;

  --hero-scrim: linear-gradient(to bottom, rgba(5, 28, 48, 0.62) 0%, rgba(5, 28, 48, 0.34) 22%, rgba(5, 28, 48, 0.42) 60%, rgba(5, 28, 48, 0.66) 100%);

  --brand-ink: #0d4a7c;
  --font-brand: 'Jost', system-ui, sans-serif;
  --cyan: #2fc1ff;
}

/* Their button: the bright cyan of the old site, with navy words so it can be read. */
body .btn-primary {
  background: var(--cyan);
  color: #06304f;
}
body .btn-primary:hover {
  background: #5fd0ff;
}
/* Headings in the wordmark navy on light ground. */
:where(main) :where(h1, h2, h3) {
  color: var(--brand-ink);
}
.hero :where(h1),
.cta-band :where(h2),
.band :where(h2, h3) {
  color: inherit;
}

/* Over the hero the logo sits on a white plate, as it does on their site today. */
body .site-header.transparent:not(.scrolled) .brand {
  background: #fff;
  padding: 6px 16px 6px 10px;
  border-radius: 4px;
}
body .site-header.site-header.transparent:not(.scrolled) .brand .brand-name,
body .site-header.site-header.transparent:not(.scrolled) .brand .brand-sub {
  color: var(--brand-ink);
}
body .site-header.transparent:not(.scrolled) .header-cta {
  background: var(--cyan);
  color: #06304f;
}

/* ---- Captured from the original site (reference only) ----
   platform: wordpress
   fonts: Roboto | Jost | Roboto Slab | Roboto Flex
   colours: rgb(76, 82, 83) | rgb(255, 255, 255) | rgb(0, 0, 0) | rgba(255, 255, 255, 0) | rgb(47, 193, 255) | rgb(16, 18, 24) | rgb(250, 250, 250) | rgb(102, 102, 102)
   Use the brand colour above as --accent if the designer has one. */