/* ==========================================================================
   productivity kick — site stylesheet (v2.27)

   Contents
     0. Web fonts (self-hosted) and their metric-matched fallbacks
     1. Design tokens
     2. Base
     3. Layout: page width, sections, header and navigation, footer
     4. Components
     5. Pages
     6. Responsive: max-width 900, 800, 760, 700, 560, 360px,
        then min-width 901, 1100px and the 561–900px range
     7. Accessibility and motion preferences

   Breakpoint contract
     900px  tablet: navigation collapses, multi-column layouts stack
     560px  phone
     360px  small phone (heading and video-button fixes only)
     901px+ and 1100px+  desktop refinements of the home hero
     Component breakpoints kept from v2.18 to preserve the approved design:
     800px Services platform grid, 760px home "solutions" and "flexible"
     bands, 700px testimonial type.

   Rules for changing this file
     - Search for a selector before adding it; extend the existing rule.
     - Within a breakpoint block keep the order of sections 3–5.
     - Never add an unconditional rule after section 6.
     - Repeated colours, radii and spacing come from tokens; a one-off
       tint may stay local to its component.
     - !important only in section 7, and to override inline styles that
       the third-party contact form injects.
     - Web fonts are self-hosted in assets/fonts (section 0); each page
       preloads the two latin files. No @import, no third-party font CSS.
   ========================================================================== */


/* 0. Web fonts
   ==========================================================================
   DM Sans (body) and Manrope (display) as variable WOFF2 files from Google
   Fonts (SIL Open Font License), split into latin and latin-ext subsets so a
   page normally downloads two files. The "Fallback" faces are Arial scaled to
   each web font's metrics, so text set before the fonts arrive occupies the
   same space and nothing shifts when they swap in. */

/* One declaration per weight, exactly as Google Fonts served them in v2.19:
   a request for a heavier weight than the last declared one (e.g. 800 for DM
   Sans, or the 650/750 used for buttons) resolves to the nearest declared
   weight, so the approved rendering is unchanged. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metric-matched fallbacks: Arial (or Arial Bold for the heavier weights) scaled
   to each web-font weight, computed from the font files (frequency-weighted
   character widths, ascender and descender). Declared per weight because the
   bold weights differ from Arial Bold far more than the regular ones do from
   Arial; a single adjustment made headings wrap differently while loading.
   The ranges cover only the characters the web fonts cover, so the few symbols
   neither font has keep coming from plain Arial exactly as before (last block). */
@font-face {
  font-family: "Manrope Fallback";
  font-weight: 400;
  src: local("Arial");
  size-adjust: 103.42%;
  ascent-override: 103.08%;
  descent-override: 29.01%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Manrope Fallback";
  font-weight: 500;
  src: local("Arial");
  size-adjust: 105.29%;
  ascent-override: 101.24%;
  descent-override: 28.49%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Manrope Fallback";
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 99.46%;
  ascent-override: 107.18%;
  descent-override: 30.16%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Manrope Fallback";
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 101.17%;
  ascent-override: 105.36%;
  descent-override: 29.65%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Manrope Fallback";
  font-weight: 800;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 102.91%;
  ascent-override: 103.58%;
  descent-override: 29.15%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "DM Sans Fallback";
  font-weight: 400;
  src: local("Arial");
  size-adjust: 104.57%;
  ascent-override: 94.87%;
  descent-override: 29.65%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "DM Sans Fallback";
  font-weight: 500;
  src: local("Arial");
  size-adjust: 106.48%;
  ascent-override: 93.16%;
  descent-override: 29.11%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "DM Sans Fallback";
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 101.03%;
  ascent-override: 98.19%;
  descent-override: 30.69%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "DM Sans Fallback";
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 102.69%;
  ascent-override: 96.6%;
  descent-override: 30.19%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "DM Sans Fallback";
  font-weight: 100 900;
  src: local("Arial");
  unicode-range: U+2190-21FF, U+25B6, U+2630, U+2713;
}
@font-face {
  font-family: "Manrope Fallback";
  font-weight: 100 900;
  src: local("Arial");
  unicode-range: U+2190-21FF, U+25B6, U+2630, U+2713;
}


/* 1. Design tokens
   ========================================================================== */

:root {
  /* Brand */
  --navy: #10243e;
  --navy-deep: #0c2946;
  --navy-band: #10334f;
  --blue: #086184;          /* links, eyebrows, active navigation */
  --blue-hover: #064b68;
  --blue-accent: #078fba;   /* highlighted words in page headings, rules */
  --em-blue: #087fbf;       /* default <em> highlight */
  --cyan-on-dark: #59dcff;  /* highlights on navy backgrounds */
  --sky-on-dark: #7fd6f5;   /* home hero highlight, focus ring on navy */

  /* Text */
  --ink: #152c46;
  --text-nav: #475b6e;
  --text-soft: #607486;
  --text-body-muted: #526b7d;
  --text-muted: #5b6b7c;

  /* Surfaces and lines */
  --white: #fff;
  --pale: #f4f8ff;
  --surface-tint: #f5f9fc;
  --surface-cool: #f7faff;
  --line: #e0e8ef;

  /* Buttons */
  --button-bg: #076da5;
  --button-bg-hover: #055b8a;

  /* Focus */
  --focus: var(--blue);
  --focus-on-dark: var(--sky-on-dark);

  /* Typography */
  --font-display: Manrope, "Manrope Fallback", Arial, sans-serif;
  --font-body: "DM Sans", "DM Sans Fallback", Arial, sans-serif;
  --h1-size: clamp(2.7rem, 5.2vw, 4.6rem);

  /* Shape */
  --radius-button: 5px;
  --radius-card: 8px;

  /* Layout */
  --page-width: 1180px;
  --header-height: 84px;
  --anchor-offset: 110px;
  --section-space: 105px;
  --section-space-tablet: 70px;
}


/* 2. Base
   ========================================================================== */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* The only in-page anchor offset (v2.18 also set scroll-margin, which doubled it). */
  scroll-padding-top: var(--anchor-offset);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
}

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.14;
  letter-spacing: -.047em;
}

h1 {
  margin: 20px 0 26px;
  font-size: var(--h1-size);
  font-weight: 800;
}

h2 {
  margin: 14px 0 24px;
  font-size: clamp(2.25rem, 4vw, 4rem);
  font-weight: 800;
}

h1, h2 { text-wrap: balance; }

h3 {
  font-size: 1.4rem;
  letter-spacing: -.03em;
}

em {
  font-style: normal;
  color: var(--em-blue);
}

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

img {
  display: block;
  max-width: 100%;
}

/* One focus style everywhere; dark sections swap --focus (section 7). */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}


/* 3. Layout
   ========================================================================== */

.wrap {
  width: min(var(--page-width), calc(100% - 64px));
  margin: auto;
}

.section { padding: var(--section-space) 0; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 85px;
  align-items: start;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 60px;
  margin-bottom: 45px;
}
.section-heading > div { flex: 1; }
.section-heading > p {
  width: 35%;
  color: #607386;
}

.section-lead {
  color: #40586d;
  font-size: 20px;
  line-height: 1.65;
}

.centered {
  margin-top: 40px;
  text-align: center;
}

/* Header ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-height);
}

/* .brand is used by the header logo and the footer logo. */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: Manrope, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.065em;
  white-space: nowrap;
}
.brand img {
  display: block;
  width: clamp(190px, 19vw, 245px);
  height: auto;
}

.menu-toggle {
  display: none;
  min-width: 88px;
  min-height: 44px;
  padding: 10px 12px;
  font-family: inherit;
  cursor: pointer;
}

/* Main navigation --------------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  gap: 27px;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.nav > a,
.nav-services-link {
  color: var(--text-nav);
  font-size: 13px;
  font-weight: 700;
}
.nav > a { transition: color .2s; }

.nav > a:hover,
.nav > a.active,
.nav-services-link:hover,
.nav-services-link.active,
.nav-services-link[aria-current="page"] { color: var(--blue); }

.nav .nav-cta {
  padding: 12px 19px;
  border-radius: var(--radius-button);
  background: var(--button-bg);
  color: var(--white);
}
.nav .nav-cta:hover {
  background: var(--button-bg-hover);
  color: var(--white);
}
.nav-cta span { margin-left: 8px; }

/* Services submenu: a disclosure that opens on click of the chevron button
   (not on hover). site.js toggles .submenu-open and aria-expanded. */
.nav-services {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--blue);
  font-size: 16px;
  cursor: pointer;
}
.submenu-toggle:focus-visible { outline-offset: 2px; }

.submenu-chevron {
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  clip-path: polygon(10% 30%, 20% 20%, 50% 50%, 80% 20%, 90% 30%, 50% 70%);
  transform: rotate(0deg);
  transition: transform .16s ease;
}
.nav-services.submenu-open .submenu-chevron { transform: rotate(180deg); }

.services-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  min-width: 230px;
  padding: 10px;
  border: 1px solid #d7e4ed;
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 12px 28px #12314d25;
}
.nav-services.submenu-open .services-submenu { display: block; }

.services-submenu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 4px;
  color: #173953;
  font-size: 14px;
  font-weight: 700;
}
.services-submenu a:hover,
.services-submenu a:focus-visible,
.services-submenu a[aria-current="page"] {
  background: #edf7fb;
  color: var(--blue);
}

/* Footer ------------------------------------------------------------------ */

.footer {
  padding: 56px 0 26px;
  border-top: 1px solid #dce7ef;
  background: var(--white);
  color: #52667a;
}

.footer-top,
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: max-content;
  max-width: 280px;
}
/* The white plate and padding around the footer logo are part of the approved design. */
.footer .footer-brand img {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  padding: 6px 8px;
  border-radius: 5px;
  background: var(--white);
}

.footer-top p {
  margin: 14px 0 0;
  color: #52667a;
  font-size: 14px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 27px;
  font-size: 13px;
  white-space: normal;
}
.footer-links a,
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-links a { color: #233d58; }
.footer-links a:hover { color: var(--blue); }

.footer-bottom {
  flex-wrap: wrap;
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid #dce7ef;
  color: #65798b;
  font-size: 12px;
}
.footer-bottom span { overflow-wrap: anywhere; }
.footer-bottom a { color: var(--blue); }
.footer-bottom a:hover { color: var(--blue-hover); }


/* 4. Components
   ========================================================================== */

/* Eyebrow label ----------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .17em;
}
.eyebrow.cyan { color: #4cd7f8; }

/* Lead paragraph ---------------------------------------------------------- */

.lead {
  max-width: 650px;
  color: #506477;
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.65;
}

/* Analytics consent panel and "Cookie settings" (v2.25) ------------------- */
/* A small, non-modal card: it never covers the page, and Accept and Reject are
   the same button, so neither is more prominent and neither is preselected. */
.consent {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  width: min(580px, calc(100% - 36px));
  padding: 18px 20px;
  border: 1px solid #dce8ef;
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: 0 18px 45px #13314d26;
  color: #43586b;
  font-size: 14px;
  line-height: 1.6;
}
.consent-text {
  flex: 1 1 300px;
  min-width: 0;
}
.consent-text p { margin: 0; }
.consent-text .consent-title {
  margin-bottom: 4px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
}
.consent-text .consent-status {
  margin-top: 6px;
  color: var(--ink);
  font-weight: 700;
}
.consent-text a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent-actions {
  display: flex;
  gap: 10px;
}
.consent-button {
  min-width: 96px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid var(--navy);
  border-radius: var(--radius-button);
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.consent-button:hover {
  background: var(--navy);
  color: var(--white);
}
.cookie-settings {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  cursor: pointer;
}
.cookie-settings:hover {
  color: var(--blue-hover);
  text-decoration: underline;
}

/* Buttons and text links -------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 16px 23px;
  border-radius: var(--radius-button);
  background: var(--button-bg);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  transition: transform .2s, background .2s;
}
.button:hover {
  transform: translateY(-2px);
  background: var(--button-bg-hover);
}
/* v2.27: secondary button, an outlined .button for a lesser action next to a solid one. */
.button-secondary {
  padding: 14.5px 21.5px;   /* .button less the border, so both are the same size */
  border: 1.5px solid var(--button-bg);
  background: var(--white);
  color: var(--button-bg);
}
.button-secondary:hover {
  background: #e8f8fd;
  color: var(--button-bg-hover);
  border-color: var(--button-bg-hover);
}

.button span,
.text-link span { font-size: 18px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 800;
}

/* Underline-on-hover variant inside specialist cards. */
.specialist-card .text-link,
.specialist-links .text-link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
}
.specialist-card .text-link:hover,
.specialist-links .text-link:hover {
  color: var(--blue-hover);
  text-decoration-color: currentColor;
}

/* Card grid and icons ----------------------------------------------------- */

.cards {
  display: grid;
  gap: 18px;
}
.three { grid-template-columns: repeat(3, 1fr); }

.pk-card-icon {
  display: block;
  flex: none;
  width: 58px;
  height: 58px;
  object-fit: contain;
}

/* Partner badges (Home and About) ----------------------------------------- */

/* v2.20: badges reduced by about a third so they support the page rather
   than dominate it. Each artwork has its own cap so the four read with the
   same visual weight despite different proportions. */
.badge-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px 20px;
  max-width: 640px;
  margin: 26px auto 0;
}

.badge-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 104px;
  padding: 12px 18px;
  border: 1px solid #e0ebf1;
  border-radius: 6px;
  background: var(--white);
  transition: transform .18s ease, background .18s ease;
}
.badge-link:hover {
  transform: translateY(-3px);
  background: #edf5fc;
}
.badge-link:focus-visible { outline-offset: 3px; }

.badge-link img {
  display: block;
  width: 100%;
  max-width: 210px;
  height: auto;
  max-height: 80px;
  object-fit: contain;
}
/* Noloco's artwork is a dark, deeper rectangle; Make's is a square medal. */
.badge-link.badge-noloco img { max-width: 180px; }
.badge-link.badge-make img {
  width: auto;
  max-width: 92px;
  max-height: 92px;
}

/* Testimonial carousel ---------------------------------------------------- */

.testimonial-carousel { position: relative; }

/* site.js reserves the height of the tallest collapsed slide plus the controls on
   .testimonial-carousel, so rotation never shifts the page; the controls follow
   the visible quote directly and the spare space sits below them (v2.20).
   touch-action keeps vertical scrolling native while site.js reads horizontal swipes. */
.testimonial-stage {
  position: relative;
  touch-action: pan-y;
}

.testimonial-slide blockquote {
  margin: 18px 0 20px;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.025em;
}
/* v2.20: quotes over ~150 characters are set smaller (site.js adds the class),
   so the tallest slide, and therefore the reserved stage height, is shorter. */
.testimonial-slide.is-long blockquote { font-size: clamp(19px, 2vw, 26px); }

.testimonial-byline {
  color: #5d7080;
  font-size: 15px;
}

.testimonial-expand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 8px 0 6px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: #006787;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.testimonial-expand:hover,
.testimonial-expand:focus-visible { color: #004f70; }

.testimonial-full {
  margin: 14px 0 20px;
  padding: 20px 25px;
  border-left: 4px solid #08b6d9;
  border-radius: 0 12px 12px 0;
  background: var(--white);
  box-shadow: 0 10px 30px #0b2d450d;
}
.testimonial-full p {
  margin: 0 0 16px;
  color: #314e61;
  font-size: 16px;
  line-height: 1.75;
}
.testimonial-full p:last-child { margin-bottom: 0; }

.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;  /* v2.27: centred as a group under the testimonial */
  gap: 12px;
  margin: 18px auto 0;
}
.testimonial-controls button {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid #bed6e2;
  border-radius: 5px;
  background: var(--white);
  color: #09334d;
  font: inherit;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
}
.testimonial-controls .testimonial-prev,
.testimonial-controls .testimonial-next {
  padding: 4px 12px;
  font-size: 28px;
}
.testimonial-controls .testimonial-pause { margin: 0; }
.testimonial-controls button:hover,
.testimonial-controls button:focus-visible {
  border-color: #008cad;
  background: #e8f8fd;
  outline-offset: 3px;
}

/* Video player (Zite page) ------------------------------------------------ */

.zite-video-shell {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0c2338;
  box-shadow: 0 18px 42px rgba(16, 51, 79, .14);
}
.zite-video-shell video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Light rings on the dark video (v2.18's global !important rule overrode these). */
.zite-video-shell video:focus-visible {
  outline: 4px solid var(--focus-on-dark);
  outline-offset: -5px;
}

/* Small play button in the lower-left corner keeps the poster headline legible. */
.zite-video-play {
  position: absolute;
  bottom: 5%;
  left: 4%;
  display: grid;
  place-items: center;
  width: clamp(50px, 6vw, 72px);
  height: clamp(50px, 6vw, 72px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(5, 31, 50, .83);
  color: var(--white);
  font: inherit;
  font-size: clamp(14px, 2vw, 19px);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .65);
  cursor: pointer;
}
.zite-video-play span {
  display: grid;
  place-items: center;
  width: clamp(42px, 5vw, 58px);
  height: clamp(42px, 5vw, 58px);
  border-radius: 50%;
  background: var(--blue-accent);
  color: var(--white);
  font-size: clamp(18px, 2vw, 24px);
  text-indent: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
  transition: transform .2s;
}
.zite-video-play:hover span { transform: scale(1.08); }
.zite-video-play:focus-visible {
  outline: 4px solid var(--white);
  outline-offset: -7px;
}

/* Embedded contact form (Zite) -------------------------------------------- */

.zite-contact-embed {
  display: block;
  width: 100%;
  height: 690px;   /* v2.20: measured form 620px, 686px with its validation messages, at every width */
  min-height: 690px;
}
/* The Zite script writes inline sizes on its iframe. */
.zite-contact-embed,
.zite-contact-embed iframe { max-width: 100% !important; }


/* Case studies (v2.21, illustrations v2.22): cards and the dedicated pages -- */
/* The illustrations are the approved PNGs in assets/images/, delivered as WebP
   at several widths through <picture> (tests/tools/case_studies_build.py). On a
   card the image fills a 2:1 frame (the contracts image is 3:2; the frame trims
   only its empty top and bottom margin); on a page it keeps its own ratio. */

.case-illustration {
  overflow: hidden;
  aspect-ratio: 2 / 1;
  margin: 0 0 17px;
  border-radius: 10px;
  background: #eaf6fc;
}
.case-illustration picture { display: block; height: 100%; }
.case-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.service-card:hover .case-illustration img { transform: scale(1.035); }

/* Cards: a .service-card with an illustration, platform label and one link. */
.case-cards { align-items: stretch; }
.case-cards.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
}
.case-card { background: var(--white); }
.case-card h3 { font-size: clamp(1.1rem, 1.45vw, 1.3rem); }
.case-card .case-link { gap: 8px; }
.case-card .case-link span { font-size: 16px; }
.case-studies-lead { max-width: 760px; }
.case-studies-tint { background: var(--surface-tint); }


/* 5. Pages
   ========================================================================== */

/* Home: hero -------------------------------------------------------------- */

.hero-bulbs {
  overflow: hidden;
  padding: 72px 0 75px;
  background: radial-gradient(ellipse at 72% 50%, #0a4168 0%, #062b4b 55%, #04213c 100%);
  color: var(--white);
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.5vw, 64px);
  align-items: center;
  isolation: isolate;
}
.hero-grid > div:first-child {
  z-index: 2;
  min-width: 0;
}

.hero-bulbs h1 {
  margin: 0 0 22px;
  font-size: clamp(2.7rem, 3.45vw, 3.7rem);
  line-height: 1.13;
  letter-spacing: -.045em;
}
.hero-bulbs h1 em { color: var(--sky-on-dark); }
/* The second sentence always starts on its own line. */
.hero-second-sentence { display: block; }

.hero-specialism,
.hero-specialism strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
}
.hero-specialism {
  max-width: 53ch;
  margin: 0 0 16px;
  color: #f0f8ff;
}
.hero-specialism strong { color: var(--white); }

.hero-bulbs .lead {
  max-width: 49ch;
  margin: 0;
  color: #e2edf8;
  font-size: 18px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin: 27px 0 0;
}

.hero-art {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-bulbs-art {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 12px 15px #00192d4d);
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 85%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 85%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%);
  -webkit-mask-composite: source-in;
}

/* Home: problem list ------------------------------------------------------ */

.problem,
.muted-section { background: var(--pale); }

.problem-list {
  margin: 30px 0;
  padding: 0;
  list-style: none;
}
.problem-list li {
  padding: 17px 0;
  border-bottom: 1px solid #dbe5ec;
  font-weight: 600;
}
.problem-list span {
  margin-right: 17px;
  color: var(--blue);
  font-size: 11px;
}

.process-reassurance {
  max-width: 610px;
  margin: 26px 0 0;
  color: #244760;
  font-size: clamp(17px, 1.45vw, 20px);
  font-weight: 650;
  line-height: 1.55;
}

/* Home: service cards ----------------------------------------------------- */

.service-card {
  display: flex;
  flex-direction: column;
  min-height: 360px;
  overflow: hidden;
  padding: 14px 14px 23px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  transition: box-shadow .2s, transform .2s;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px #13314d12;
}

.service-illustration {
  overflow: hidden;
  aspect-ratio: 429 / 179;
  margin: 0 0 17px;
  border-radius: 10px;
  background: #eaf6fc;
}
.service-illustration img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.service-card:hover .service-illustration img { transform: scale(1.035); }

.card-num {
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.service-card .card-num,
.service-card h3,
.service-card p,
.service-card a {
  margin-left: 9px;
  margin-right: 9px;
}
.service-card h3 {
  margin-top: 12px;
  margin-bottom: 15px;
  font-size: clamp(1.18rem, 1.65vw, 1.5rem);
}
.service-card p {
  color: #5b6d7c;
  font-size: 15px;
}
.service-card > a {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 24px;   /* v2.20: WCAG 2.2 target size for a standalone link */
  margin-top: auto;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
}

/* v2.27: whole-card links. A card's one existing link is stretched over the card
   with ::after, so a click anywhere on the card follows it, while the card still
   has a single link (nothing nested or duplicated) and the same tab order. The
   keyboard focus ring is drawn around the whole card. Used by the process tiles
   and case-study cards (.service-card) and the specialist cards that link to one
   page (.specialist-card with a link); cards without a link are unaffected. */
.service-card,
.specialist-card { position: relative; }
.service-card > a::after,
.specialist-card > a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}
.service-card:has(> a:focus-visible),
.specialist-card:has(> a:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}
@supports selector(:has(a)) {
  .service-card > a:focus-visible,
  .specialist-card > a:focus-visible { outline: none; }
}

/* Home: practical solutions ----------------------------------------------- */

.tangible-section { background: var(--surface-tint); }

.tangible-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.tangible-card {
  padding: 26px;
  border: 1px solid #d9e5ee;
  border-radius: 12px;
  background: var(--white);
}
.tangible-card > .pk-card-icon { margin-bottom: 18px; }
.tangible-card h3 {
  margin: 0 0 10px;
  color: #123b5c;
}
.tangible-card p { margin: 0 0 12px; }
.tangible-card .tangible-replaces {
  margin: 18px 0 0;
  color: #35526d;
  font-size: 14px;
  font-weight: 700;
}

/* Home: approach steps ---------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.steps > div {
  padding-top: 25px;
  border-top: 2px solid #9eddea;
}
.steps > div > span {
  color: #426078;
  font-size: 13px;
  font-weight: 800;
}
.steps h3 { margin: 18px 0 12px; }
.steps p {
  color: var(--text-soft);
  font-size: 14px;
}

/* Home: founder ----------------------------------------------------------- */

.founder {
  display: grid;
  grid-template-columns: .7fr 1fr;
  gap: 100px;
  align-items: start;   /* v2.27: the photo's top lines up with the eyebrow, not centred lower */
}

.founder-photo {
  height: 440px;
  overflow: hidden;
  border-radius: 10px;
  background: #e7edf2;
}
.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%; /* v2.20: keeps the top of the head in frame at 1440px */
}

/* .founder p also colours .founder-name (approved v2.18 rendering). */
.founder p { color: var(--text-soft); }
.founder .text-link { margin-top: 12px; }

.founder-name {
  margin: 18px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.2vw, 4.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.05em;
}
.founder-name + h2 {
  margin-top: 0;
  font-size: clamp(2rem, 3.2vw, 3.3rem);
}

.founder-reasons {
  display: grid;
  gap: 17px;
  margin: 24px 0 26px;
}
.founder-reasons > div {
  padding-left: 17px;
  border-left: 3px solid #00b8d9;
}
.founder-reasons strong {
  display: block;
  color: #092f49;
  font-size: 17px;
  line-height: 1.35;
}
.founder-reasons p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.6;
}

/* Home: flexible ways of working band ------------------------------------- */

.flexible-band {
  padding: 48px 0;
  background: var(--navy-band);
  color: var(--white);
}
.flexible-band .eyebrow { color: #9fe8ff; }

.flexible-inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 45px;
  align-items: center;
}
.flexible-inner h2 {
  margin: 8px 0;
  color: var(--white);
}
.flexible-inner p {
  margin: 0;
  color: #e0edf7;
  font-size: 18px;
}

/* Home: partner credentials strip ------------------------------------------ */

.trust {
  padding-top: 35px;
  padding-bottom: 45px;
  text-align: center;
}
.trust > p {
  color: #526477;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
}

/* Home: testimonials section ---------------------------------------------- */

.quote-section {
  padding-top: 55px;
  padding-bottom: 65px;
  background: #f3f8fb;
}
.quote-wrap { max-width: 850px; }

/* Shared: closing call to action ------------------------------------------ */

.cta-section {
  padding: 65px 0;
  background: var(--navy-deep);
  color: var(--white);
}

.cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
}
.cta-inner h2 {
  margin: 12px 0;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
}
.cta-inner p {
  margin: 0;
  color: #c2d1df;
}
.cta-inner > .button {
  flex-shrink: 0;
  min-height: 64px;
  padding: 18px 29px;
  font-size: 15px;
}

/* Shared: specialist sections (Home, Services, Airtable, Zite) ------------ */

.specialist-section,
.specialist-links,
.specialist-section + .case-studies-tint { background: #f7fbfd; }
/* v2.25: on the Airtable and Zite pages the case studies follow "How I can help"
   on the same background, so they continue that band instead of adding a second
   full section gap (the two paddings had made an empty band of 210px / 140px). */
.specialist-section + .case-studies-tint { padding-top: 0; }

.specialist-intro { max-width: 810px; }

.specialist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 32px;
}
.specialist-grid article {
  padding: 30px;
  border: 1px solid #dce8ef;
  border-radius: var(--radius-card);
  background: var(--white);
}
.specialist-grid h3 { font-size: 1.35rem; }
.specialist-grid p { color: var(--text-body-muted); }

.specialist-card h3 {
  margin: 0 0 14px;
  color: #153957;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
}
.specialist-card p {
  margin: 0 0 18px;
  color: #4b6377;
  line-height: 1.75;
}

.specialist-links .specialist-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.specialist-links .specialist-card a { margin-top: auto; }

.services-platforms .specialist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* v2.20: the third card matches its siblings; the earlier tint read as "disabled". */

.specialist-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
}
.specialist-two p {
  color: #4b6377;
  line-height: 1.8;
}

.specialist-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 25px;
}
.specialist-badge img {
  display: block;
  width: auto;
  max-width: min(100%, 160px);
  height: auto;
  max-height: 80px;
  object-fit: contain;
}
.specialist-badge p {
  margin: 0;
  color: var(--text-body-muted);
  font-size: 13px;
}
.specialist-badge-link {
  display: inline-block;
  border-radius: 4px;
  line-height: 0;
}
.specialist-badge-link:focus-visible { outline-offset: 5px; }

.specialist-next {
  background: var(--navy-band);
  color: var(--white);
  text-align: center;
}
.specialist-next h2 { color: var(--white); }
.specialist-next h2 em { color: var(--sky-on-dark); }
.specialist-next p { color: #e0edf7; }
.specialist-related { margin-top: 28px; }
.specialist-related a {
  display: inline-block;  /* v2.20: a line-height-tall (27px) target, no visual change */
  color: #9ee5ff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Services, Airtable and Zite: centred light hero ------------------------- */

.services-hero-light {
  padding: 105px 0 100px;
  border-bottom: 1px solid #e4edf2;
  background: var(--white);
  color: #102f47;
  text-align: center;
}
.services-hero-centred {
  max-width: 970px;
  margin: auto;
}
/* v2.20: the eyebrow is centred like everything else in this hero. */
.services-hero-centred .eyebrow { justify-content: center; }
.services-hero-centred h1 {
  max-width: 17ch;
  margin: 20px auto 24px;
  line-height: 1.09;
}
.services-hero-centred h1 em { color: var(--blue-accent); }

.services-intro {
  max-width: 720px;
  margin: 0 auto 30px;
  color: var(--text-body-muted);
  font-size: 20px;
  line-height: 1.7;
}

/* Services: "does this sound familiar" ------------------------------------ */

.services-recognise { background: #f7f9ff; }

.services-recognise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: start;
  margin-top: 25px;
}
.services-recognise h2 { max-width: 13ch; }

.services-pains p {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 16px 0 20px;
  border-bottom: 1px solid #dce7ee;
  font-size: 18px;
  line-height: 1.5;
}
.services-pains span {
  padding-top: 4px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

/* Services: four offer rows ------------------------------------------------ */

.services-offer { background: var(--white); }
.services-offer h2 { max-width: 740px; }
.services-offer-lead { margin-bottom: 38px; }

.services-offer-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 38px;
  border-top: 1px solid #dbe7ef;
}

/* Desktop: icon | heading | description, with examples under the description. */
.offer-row {
  display: grid;
  grid-template-columns: 120px minmax(230px, .7fr) minmax(290px, 1.3fr);
  gap: 20px 40px;
  align-items: start;
  padding: 42px 10px;
  border-bottom: 1px solid #dbe7ef;
}

.offer-top {
  display: flex;
  align-items: center;
  gap: 20px;
  grid-column: 1;
  grid-row: 1;
}
.offer-number {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}
.offer-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  min-width: 64px;
  height: 64px;
  line-height: 1;
}

.offer-row h3 {
  grid-column: 2;
  grid-row: 1;
  max-width: 280px;
  margin: 0;
  font-size: clamp(24px, 2.3vw, 31px);
}
.offer-row > p {
  grid-column: 3;
  grid-row: 1;
  max-width: 620px;
  margin: 0;
  color: #53697a;
  font-size: 16px;
  line-height: 1.75;
}

.offer-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 3;
  grid-row: 2;
}
.offer-examples span {
  padding: 6px 11px;
  border-radius: 20px;
  background: #eff4ff;
  color: #284b90;
  font-size: 12px;
  font-weight: 700;
}

.services-approach-link {
  padding: 50px 0 0;
  text-align: center;
}
.services-approach-link p {
  margin: 0 0 12px;
  color: #405a6d;
  font-size: 19px;
}

/* Services: "what could we build" ------------------------------------------ */

.services-build {
  border-top: 1px solid #e4ebf7;
  background: #f8faff;
}
.services-build-head {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 65px;
  align-items: end;
  margin-bottom: 34px;
}
.services-build-head h2 {
  max-width: 690px;
  margin-bottom: 0;
}
.services-build-head > p {
  margin: 0 0 6px;
  color: #53677c;
  font-size: 18px;
  line-height: 1.7;
}

.build-examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #dce6f5;
  border-left: 1px solid #dce6f5;
}
.build-examples article {
  min-height: 220px;
  padding: 32px 28px 30px;
  border-right: 1px solid #dce6f5;
  border-bottom: 1px solid #dce6f5;
  background: var(--white);
}
.build-examples h3 {
  margin: 14px 0 10px;
  font-size: 21px;
  letter-spacing: -.03em;
}
.build-examples p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.65;
}
.build-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 1px solid #b9d2f7;
  border-radius: 9px;
  line-height: 1;
}
.build-icon .pk-card-icon {
  width: 54px;
  height: 54px;
}

/* Services: technology ----------------------------------------------------- */

.services-tech { background: #f0f6ff; }
.services-tech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}
.services-tech h2 {
  font-size: clamp(2.25rem, 3.6vw, 3.15rem);
  line-height: 1.13;
}
.services-tech .section-lead { font-size: 19px; }
/* Deliberate break between the two sentences of the heading. */
.tech-second-sentence { display: block; }

/* Zite: video section ------------------------------------------------------ */

.zite-video-section { background: #f3f8fb; }
.zite-video-intro {
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: center;
}
.zite-video-intro p {
  color: #4b6377;
  line-height: 1.75;
}

/* Approach ----------------------------------------------------------------- */

.approach-intro {
  padding: 110px 0 106px;
  border-bottom: 1px solid #e4ebf5;
  background: var(--white);
}
.approach-intro-inner { max-width: 930px; }
.approach-intro h1 {
  max-width: 14ch;
  margin: 25px 0 31px;
  line-height: 1.06;
}
.approach-intro h1 em { color: var(--blue-accent); }

.approach-lead {
  max-width: 770px;
  margin-bottom: 19px;
  color: #304961;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.58;
}
.approach-lead-secondary {
  max-width: 750px;
  margin-bottom: 28px;
  color: #5c6f81;
  font-size: 17px;
}

.approach-story { background: var(--surface-cool); }
.approach-story-head {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 75px;
  align-items: end;
  margin-bottom: 60px;
}
.approach-story-head h2 {
  max-width: 760px;
  margin-bottom: 0;
}
.approach-story-head > p {
  margin: 0 0 7px;
  color: #5b7084;
  font-size: 18px;
  line-height: 1.7;
}

.approach-timeline { border-top: 1px solid #d6e2ef; }
.approach-moment {
  display: grid;
  grid-template-columns: .37fr 1fr;
  gap: 60px;
  padding: 42px 12px 48px 0;
  border-bottom: 1px solid #d6e2ef;
}
.approach-index {
  color: var(--blue-accent);
  font-family: var(--font-display);
  font-size: 45px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.06em;
}
.approach-index span {
  display: block;
  margin-top: 12px;
  color: #364e61;
  font: 800 12px/normal "DM Sans", Arial, sans-serif;
  letter-spacing: .14em;
}
.approach-moment h3 {
  margin: 3px 0 14px;
  font-size: clamp(26px, 2.8vw, 36px);
}
.approach-moment p {
  max-width: 700px;
  margin: 0;
  color: #536a7c;
  font-size: 17px;
  line-height: 1.75;
}
.approach-aside {
  margin-top: 20px;
  padding: 9px 0 9px 19px;
  border-left: 3px solid var(--cyan-on-dark);
  color: #234d7b;
  font-weight: 700;
}

.approach-belief {
  padding: 100px 0;
  background: var(--navy-deep);
  color: var(--white);
}
.approach-belief-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 95px;
  align-items: start;
}
.approach-belief h2 {
  max-width: 630px;
  margin-bottom: 0;
}
.approach-belief h2 em { color: var(--cyan-on-dark); }
.approach-belief p {
  color: #d1deeb;
  font-size: 18px;
  line-height: 1.75;
}
/* Approved v2.18 rendering: the closing line is set in a slightly softer colour. */
.approach-belief .approach-belief-last {
  color: #c4d0df;
  font-weight: 400;
}
.approach-ai-note { margin-top: 20px; }

.approach-reassurance {
  background: var(--white);
  text-align: center;
}
.approach-reassurance-inner { max-width: 880px; }
.approach-reassurance .eyebrow { justify-content: center; }
.approach-reassurance h2 { margin: 22px 0 23px; }
.approach-reassurance p {
  max-width: 690px;
  margin: auto;
  color: #5b7084;
  font-size: 18px;
  line-height: 1.7;
}

/* About -------------------------------------------------------------------- */

.about-hero {
  padding: 86px 0 90px;
  background: var(--surface-cool);
}
.about-hero-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 95px;
  align-items: start;   /* v2.27: as .founder */
}
.about-hero h1 {
  max-width: 790px;
  font-size: clamp(3.15rem, 5.6vw, 4.6rem);
}
.about-hero p:not(.lead) {
  max-width: 640px;
  color: var(--text-body-muted);
  font-size: 17px;
}

.about-portrait {
  height: 465px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: #e6edf5;
}
.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.about-now-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}
.about-now-grid > div:first-child > p:not(.section-lead) {
  color: #536c7c;
  font-size: 17px;
  line-height: 1.85;
}

.about-working { border-top: 2px solid #10add1; }
.about-working h3 { margin: 24px 0; }
.about-working > div {
  padding: 20px 0 16px;
  border-top: 1px solid var(--line);
}
.about-working strong {
  color: #14314c;
  font-family: var(--font-display);
  font-size: 18px;
}
.about-working p {
  margin: 7px 0 0;
  color: #5b7080;
}

/* Contact, Company, Privacy and 404 ----------------------------------------- */

.page-hero {
  padding-top: 105px;
  padding-bottom: 82px;
}
.page-hero h1 { max-width: 920px; }
.page-hero h1 em { color: var(--blue-accent); }
.page-hero .lead { max-width: 760px; }

.contact-intro { padding-bottom: 0; }
.contact-intro p { margin-bottom: 18px; }

.contact-section {
  padding-top: 24px;
  padding-bottom: 85px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}
.contact-grid > * { min-width: 0; }
.contact-grid h2 { font-size: clamp(2.2rem, 3.6vw, 3.5rem); }
/* Also colours .contact-direct-email (approved v2.18 rendering). */
.contact-grid p { color: var(--text-soft); }

.contact-side > p {
  color: var(--text-body-muted);
  font-size: 17px;
  line-height: 1.8;
}
.contact-reassurance {
  margin-top: 8px;
  padding: 11px 0;
  color: #234259;
  font-weight: 700;
}
.contact-reassurance span {
  margin-right: 10px;
  color: #079fc8;
}
.contact-animated-logo {
  max-width: 380px;
  margin: 24px 0 8px;
}
.contact-animated-logo img {
  width: 100%;
  height: auto;
}

.contact-panel {
  min-width: 0;
  padding: clamp(14px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--pale);
}
.contact-direct-email {
  margin: 18px 0 16px;
  line-height: 1.65;
}
.contact-direct-email strong { color: #123a54; }
.contact-direct-email a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.contact-panel .contact-privacy {
  margin: 17px 0 0;
  color: #4d6274;
  font-size: 12px;
}
.contact-privacy a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.contact-privacy a,
.privacy-page a:not(.button) {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* v2.27: Privacy notice and Company information are set as compact documents
   (14px text on desktop, 16px on tablets and phones; see the 900px block). */
.privacy-page {
  max-width: 880px;
  font-size: 14px;
  line-height: 1.5;
}
.privacy-page h1 {
  margin-bottom: 18px;
  font-size: clamp(2.25rem, 4vw, 3rem);
}
.privacy-page .lead {
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.5;
}
.privacy-page h2 {
  margin: 30px 0 8px;
  font-size: 20px;
  line-height: 1.3;
}
.privacy-page p {
  max-width: 750px;
  margin: 0 0 12px;
}
.privacy-page .cookie-settings {
  min-height: 24px;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* Case-study pages ---------------------------------------------------------- */

.case-hero {
  padding: 86px 0 60px;
  background: var(--surface-cool);
}
/* The hero and the article share one centred 860px column. */
.case-hero > .wrap { width: min(860px, calc(100% - 64px)); }
.case-hero h1 {
  max-width: 17ch;
  margin: 20px 0 22px;
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  line-height: 1.08;
}
.case-hero .lead { max-width: 720px; }
.case-tech {
  margin-top: 18px;
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 600;
}
.case-tech span {
  margin-right: 8px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* v2.25: "Client project · Delivered by productivity kick" and the partner
   badges of the platforms the project was built on. */
.case-credit {
  position: relative;
  margin: 16px 0 0;
  padding-left: 28px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}
/* The same tick as .case-benefits: a circle and a rotated border. */
.case-credit::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue-accent);
}
.case-credit::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 6px;
  width: 6px;
  height: 3px;
  border: 0 solid var(--white);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
.case-hero .case-tech { margin-top: 10px; }
.case-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 18px;
}
.case-badge-link {
  display: inline-block;
  border-radius: 4px;
  line-height: 0;
}
.case-badge-link:focus-visible { outline-offset: 4px; }
.case-badge-link img {
  display: block;
  width: auto;
  height: 38px;
}

.case-figure {
  max-width: 860px;
  margin: 46px 0 0;
}
/* The illustration at its own aspect ratio; width and height attributes reserve
   its space, so nothing shifts while it loads. */
.case-figure-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #d7e5ee;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 20px 50px #13314d12;
}
.case-figure figcaption {
  margin-top: 14px;
  color: var(--text-soft);
  font-size: 13px;
}

.case-article { max-width: 780px; }
.case-article h2 {
  margin: 46px 0 14px;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
}
.case-article h2:first-child { margin-top: 0; }
.case-article h3 {
  margin: 30px 0 10px;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
}
.case-article p {
  color: #4b6377;
  font-size: 17px;
  line-height: 1.8;
}
.case-benefits {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.case-benefits li {
  position: relative;
  padding: 14px 18px 14px 50px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--white);
  color: #4b6377;
  line-height: 1.65;
}
.case-benefits li::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 18px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue-accent);
}
.case-benefits li::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 25px;
  width: 7px;
  height: 4px;
  border: 0 solid var(--white);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
/* v2.22: a highlighted feature inside "The solution". */
.case-callout {
  margin: 26px 0;
  padding: 22px 26px;
  border-left: 4px solid var(--blue-accent);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--pale);
}
.case-callout h3 { margin-top: 0; }
.case-callout p { margin-bottom: 0; }
.case-callout p + p { margin-top: 10px; }

/* v2.22: numbered steps ("How it works", contracts). */
.case-steps {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: case-step;
}
.case-steps li {
  position: relative;
  padding: 20px 22px 20px 74px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--white);
  counter-increment: case-step;
}
.case-steps li::before {
  content: counter(case-step);
  position: absolute;
  top: 20px;
  left: 22px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
}
.case-steps h3,
.case-impact h3 {
  margin: 4px 0 6px;
  font-size: 1.12rem;
}
.case-steps p,
.case-impact p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
}
.case-steps p + p { margin-top: 8px; }

/* v2.22: "The business impact", a grid of short headed points. */
.case-impact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.case-impact > div {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue-accent);
  border-radius: var(--radius-card);
  background: var(--white);
}
/* An odd last point spans the row instead of leaving a gap beside it. */
.case-impact > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

.case-outcome {
  margin-top: 26px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
}
.case-built {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 600;
}
.case-built a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.case-cta .cta-inner h2 { max-width: 16ch; }
.case-cta p { max-width: 520px; }

/* v2.23: Airtable-to-Zite migration page. It reuses the service-page hero,
   specialist grid and story, the case-study article column (lists, steps,
   impact grid, callout) and the navy closing band; these rules only adjust them. */
.migration-intro-section { padding: 72px 0 80px; }
.migration-intro p:first-child { margin-top: 0; }
.migration-intro p:last-child { margin-bottom: 0; }
.migration-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 22px;
}
.migration-note { margin-top: 24px; }
.migration-principle p {
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}
.case-article > .text-link { margin-top: 6px; }
.migration-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0 44px;
}
/* A fixed cap: the percentage cap on .specialist-badge img does not limit the
   intrinsic width used to size flex items, so two badges would not share a row. */
.migration-badges .specialist-badge img { max-width: 160px; }
.migration-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 30px;
}
.migration-cta p {
  max-width: 680px;
  margin-right: auto;
  margin-left: auto;
}

/* v2.27: "What can be migrated?" and "Experience that counts" share a white
   background, so the second drops its top padding (as .specialist-section +
   .case-studies-tint) and the first ends with a shorter padding: about 97px
   between them on desktop, 73px on phones and tablets (was 227 and 157px). */
.migration-scope { padding-bottom: 80px; }
.migration-scope + .specialist-story { padding-top: 0; }

/* Services and Approach: one-line references to the case studies. */
.approach-case-link { margin-top: 22px; }


/* 6. Responsive
   ========================================================================== */

@media (max-width: 900px) {
  /* Layout */
  .wrap { width: min(100% - 40px, var(--page-width)); }
  .section { padding: var(--section-space-tablet) 0; }
  .migration-scope { padding-bottom: 56px; }   /* v2.27, see the migration page */
  .privacy-page { font-size: 16px; }
  .privacy-page h2 {
    margin-top: 24px;
    font-size: 19px;
  }
  .two-col,
  .founder {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .section-heading {
    flex-direction: column;
    align-items: start;
    gap: 0;
  }
  .section-heading > p {
    width: auto;
    max-width: 650px;
  }

  /* Header. The open menu starts 72px from the top, overlapping the 84px
     header by 12px: this is the approved v2.18 rendering. */
  .menu-toggle {
    display: block;
    border: 0;
    background: none;
    color: var(--navy);
    font-size: 14px;
    font-weight: 700;
  }
  .menu-toggle span { margin-left: 8px; }

  .nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 22px 24px;
    background: var(--white);
    box-shadow: 0 16px 24px #1233;
  }
  .nav.open { display: flex; }
  .nav .nav-cta { text-align: center; }

  .nav-services {
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 4px;
  }
  .nav-services-link { flex: 0 1 auto; }
  .submenu-toggle { margin-left: 0; }
  .services-submenu {
    position: static;
    flex: 0 0 100%;
    width: 100%;
    margin-top: 4px;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 3px solid var(--blue-accent);
    border-radius: 0;
    box-shadow: none;
  }

  /* Components */
  .three { grid-template-columns: 1fr; }

  /* Home */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .hero-bulbs h1 { max-width: 19ch; }
  .hero-art {
    max-width: 720px;
    margin: auto;
  }
  .service-card { min-height: 0; }
  .steps { grid-template-columns: 1fr 1fr; }
  .founder-photo { max-width: 430px; }
  .quote-section { padding: 55px 0 65px; }
  .cta-inner {
    flex-direction: column;
    align-items: start;
  }
  .specialist-two {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Services */
  .services-hero-light { padding: 70px 0; }
  .services-recognise-grid,
  .services-tech-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .services-recognise h2 { max-width: none; }
  .offer-row {
    grid-template-columns: 65px 1fr;
    gap: 12px 18px;
  }
  .offer-row h3 {
    grid-column: 2;
    grid-row: 1;
  }
  .offer-row > p {
    grid-column: 2;
    grid-row: 2;
  }
  .offer-examples {
    grid-column: 2;
    grid-row: 3;
  }
  .services-build-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .build-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Approach */
  .approach-intro { padding: 80px 0; }
  .approach-story-head,
  .approach-belief-inner {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .approach-moment {
    grid-template-columns: 125px 1fr;
    gap: 28px;
  }

  /* About */
  .about-hero { padding: 65px 0; }
  .about-hero-grid,
  .about-now-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about-portrait {
    max-width: 430px;
    height: 400px;
  }

  /* Contact and simple pages */
  .page-hero { padding: 75px 0 50px; }
  .contact-intro { padding-bottom: 0; }
  .contact-section { padding: 14px 0 85px; }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Case studies */
  .case-cards.three,
  .case-cards.two {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
  .case-hero { padding: 64px 0 48px; }
  .case-hero > .wrap { width: min(860px, 100% - 40px); }
  .case-hero h1 { max-width: none; }
  .case-figure { margin-top: 34px; }
  .case-cta .cta-inner h2 { max-width: none; }
}

@media (max-width: 800px) {
  .services-platforms .specialist-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .tangible-grid,
  .flexible-inner { grid-template-columns: 1fr; }
  .flexible-inner { gap: 22px; }
  .tangible-card { padding: 22px; }
}

@media (max-width: 700px) {
  .testimonial-slide blockquote { font-size: 21px; }
  .testimonial-full { padding: 16px; }
}

@media (max-width: 560px) {
  /* Layout */
  .consent {
    bottom: 12px;
    left: 12px;
    width: calc(100% - 24px);
    padding: 16px;
  }
  .consent-actions { width: 100%; }
  .consent-button { flex: 1; }
  .wrap { width: calc(100% - 34px); }
  .footer-top,
  .footer-bottom { flex-direction: column; }
  .footer-links { gap: 15px; }

  /* Header */
  .brand { font-size: 19px; }
  .brand img { width: 190px; }

  /* Components */
  .badge-row {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    max-width: 390px;
  }
  .badge-link {
    min-height: 72px;
    padding: 10px 12px;
  }
  .badge-link img {
    max-width: 150px;
    max-height: 52px;
  }
  .badge-link.badge-noloco img { max-width: 130px; }
  .badge-link.badge-make img {
    width: 64px;
    height: 64px;
    max-width: 64px;
    max-height: 64px;
  }

  /* Home */
  .hero-bulbs { padding: 45px 0; }
  .hero-bulbs h1 {
    max-width: 100%;
    margin-bottom: 20px;
    font-size: clamp(2.15rem, 8vw, 2.85rem);
    line-height: 1.14;
  }
  .hero-specialism,
  .hero-specialism strong {
    font-size: 14px;
    line-height: 1.65;
  }
  .hero-bulbs .lead {
    font-size: 16px;
    line-height: 1.7;
  }
  .hero-actions { gap: 18px; }
  .service-card { padding: 12px 12px 22px; }
  .steps { grid-template-columns: 1fr; }
  /* v2.27: phones show the whole photograph at its own proportions (801 × 1100),
     so no width can crop the chin; see also .about-portrait below. */
  .founder-photo { height: auto; }
  .founder-photo img { height: auto; }
  .cta-inner > .button { width: 100%; }
  .specialist-grid { grid-template-columns: 1fr; }

  /* Services */
  .services-hero-centred h1 {
    font-size: clamp(2rem, 9vw, 2.55rem);
    line-height: 1.16;
  }
  .services-intro { font-size: 17px; }
  .services-pains p { font-size: 16px; }
  .offer-row { grid-template-columns: 1fr; }
  .offer-top,
  .offer-row h3,
  .offer-row > p,
  .offer-examples {
    grid-column: 1;
    grid-row: auto;
  }
  .build-examples { grid-template-columns: 1fr; }
  .build-examples article { min-height: 0; }

  /* Zite */
  .zite-video-intro { margin-bottom: 20px; }

  /* Approach */
  .approach-moment {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 28px 0;
  }
  .approach-index { font-size: 30px; }
  .approach-belief { padding: 70px 0; }

  /* About */
  .about-hero h1 { font-size: clamp(2.7rem, 10vw, 3.15rem); }
  /* v2.27: the whole photograph at its own proportions on phones. The v2.24
     square crop still cut the chin close on large phones (440px). */
  .about-portrait { height: auto; }
  .about-portrait img { height: auto; }

  /* Contact */
  .contact-panel { padding: 12px; }

  /* Case studies */
  .case-cards.three,
  .case-cards.two { max-width: none; }
  .case-hero h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .case-article h2 { margin-top: 36px; }
  .case-figure figcaption { font-size: 12px; }
  .case-callout { padding: 18px 20px; }
  .case-impact { grid-template-columns: 1fr; }
  .migration-list { grid-template-columns: 1fr; }
  .case-steps li { padding: 18px 18px 18px 64px; }
  .case-steps li::before { left: 18px; }
}

@media (max-width: 360px) {
  .services-hero-centred h1 {
    max-width: 100%;
    font-size: 32px;
  }
  .services-h1-make { white-space: nowrap; }
  .services-tech h2 {
    font-size: 1.65rem;
    line-height: 1.18;
  }
  .zite-video-play {
    bottom: 2%;
    left: 2%;
    width: 44px;
    height: 44px;
  }
  .zite-video-play span {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }
}

@media (min-width: 901px) {
  .hero-grid > div:first-child { position: relative; }
  .hero-bulbs-art { mix-blend-mode: normal; }
}

@media (min-width: 1100px) {
  .hero-bulbs h1 { font-size: clamp(2.65rem, 3.25vw, 3.45rem); }
  .hero-second-sentence {
    font-size: .84em;
    letter-spacing: -.045em;
  }
}

/* Tablet only: the Services icon spans the heading and description rows. */
@media (min-width: 561px) and (max-width: 900px) {
  .offer-row {
    grid-template-columns: 132px minmax(0, 1fr);
    column-gap: 20px;
  }
  .offer-top { grid-row: 1 / span 2; }
}


/* 7. Accessibility and motion preferences
   ========================================================================== */

.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  top: 12px;
  left: 16px;
  z-index: 100;
  padding: 8px;
  background: var(--white);
}

/* Hidden content stays hidden even where a component sets display. */
[hidden] { display: none !important; }

/* Lighter focus ring on navy backgrounds. */
.hero-bulbs,
.flexible-band,
.cta-section,
.approach-belief,
.specialist-next { --focus: var(--focus-on-dark); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .service-illustration img,
  .case-illustration img,
  .badge-link,
  .zite-video-play span,
  .submenu-chevron { transition: none !important; }

  /* Replace the animated GIF logo with the static logo. */
  .contact-animated-logo {
    height: 80px;
    background: url("productivity-kick-logo.png") left center / contain no-repeat;
  }
  .contact-animated-logo img { display: none; }
}