/* ==========================================================================
   Caledonian Software Solutions — design system
   Direction: polished tech-company look (ref: TechIT template kit).
   Navy + royal blue, white/light-grey alternating sections, rounded cards
   with soft shadows, Poppins headings, Inter body. Fonts self-hosted.
   ========================================================================== */

/* ---- Fonts (self-hosted, latin subsets) --------------------------------- */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500-latin.792477d09826.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600-latin.b550bca8934b.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-latin.0bd523f60499.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400-latin.65850a373e25.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400-italic-latin.c5fa06d13e00.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500-latin.65850a373e25.woff2") format("woff2");
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --navy: #0b1236;
  --navy-soft: #17204f;
  --blue: #2b4eff;
  --blue-dark: #1d3ad9;
  --blue-tint: #ebefff;
  --bg-alt: #f5f7fc;
  --text: #4d566e;
  --text-on-dark: #c3c9e4;
  --border: #e4e8f3;
  --error: #cc3a54;

  --font-head: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 12px 32px rgba(11, 18, 54, 0.08);
  --shadow-lg: 0 18px 44px rgba(11, 18, 54, 0.12);
  --wrap: 72rem;
}

/* ---- Reset / base -------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Navy behind the page: any gap or overscroll past the footer (mobile URL
   bar, rubber-banding) blends with the footer instead of flashing white. */
html {
  background: var(--navy);
  scroll-behavior: smooth; /* hero anchor chips; reduced-motion resets it */
}

[id] {
  scroll-margin-top: 1.5rem;
}

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh; /* mobile: true visible height, not the 100vh estimate */
  flex-direction: column;
}

main {
  flex: 1;
}

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

h1,
h2,
h3 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.25;
  margin: 0 0 1rem;
  text-wrap: balance;
}

h1 {
  font-weight: 700;
  font-size: clamp(2.1rem, 4.5vw, 3.3rem);
  letter-spacing: -0.02em;
}
h2 {
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  letter-spacing: -0.01em;
}
h3 {
  font-weight: 600;
  font-size: 1.15rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Utility ------------------------------------------------------------- */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 50;
}

.skip-link:focus {
  left: 0;
}

/* Eyebrow label above headings; also reused for small captions/counters. */
.label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
}

.label--muted {
  color: #8b93ad;
}

.prose {
  max-width: 44rem;
}

.prose p {
  margin-bottom: 1.15rem;
}

/* Authored-HTML elements (insights bodies etc.) */
.prose h2 {
  font-size: 1.45rem;
  margin: 2.2rem 0 0.9rem;
}

.prose h3 {
  margin: 1.8rem 0 0.7rem;
}

.prose ul,
.prose ol {
  margin: 0 0 1.15rem;
  padding-left: 1.4rem;
}

.prose li {
  margin-bottom: 0.4rem;
}

.prose blockquote {
  margin: 1.5rem 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--blue);
  color: var(--navy);
  font-style: italic;
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

.prose pre {
  background: var(--navy);
  color: #dbe2f8;
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  overflow-x: auto;
  margin: 0 0 1.15rem;
}

.prose pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}

.prose img {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0.5rem 0 1rem;
}

/* ---- Header -------------------------------------------------------------- */
.site-header {
  background: #fff;
  box-shadow: 0 1px 0 var(--border), 0 6px 24px rgba(11, 18, 54, 0.04);
  position: relative;
  z-index: 20;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.05rem;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.logo-mark {
  width: 2.1rem;
  height: 2.1rem; /* square mark; explicit both ways for inline SVG */
  flex-shrink: 0;
  margin-right: 0.6rem;
}

/* Two-line lockup: name over tagline (per the brand concept sheet) */
.wordmark__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.wordmark__tag {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
}

.site-header .logo-mark {
  width: 2.6rem;
  height: 2.6rem; /* match the taller two-line lockup */
}

.wordmark:hover {
  color: var(--navy);
  text-decoration: none;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--navy);
  text-decoration: none;
  padding-block: 0.3rem;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--blue);
  text-decoration: none;
}

.site-nav .nav-cta {
  background: var(--blue);
  color: #fff;
  padding: 0.55rem 1.35rem;
  border-radius: var(--radius-sm);
  transition: background-color 150ms ease;
}

.site-nav .nav-cta:hover,
.site-nav .nav-cta[aria-current="page"] {
  background: var(--blue-dark);
  color: #fff;
}

/* Dashboard-only "more" menu (three vertical dots) */
.nav-more {
  position: relative;
}

.nav-more summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--navy);
}

.nav-more summary::-webkit-details-marker {
  display: none;
}

.nav-more summary:hover,
.nav-more[open] summary {
  border-color: var(--blue);
  color: var(--blue);
}

.nav-more__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 11rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 0.4rem;
  display: grid;
  z-index: 30;
}

.nav-more__menu a,
.nav-more__menu button {
  display: block;
  width: 100%;
  text-align: left;
  font: 500 0.92rem var(--font-body);
  color: var(--navy);
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  text-decoration: none;
}

.nav-more__menu a:hover,
.nav-more__menu button:hover {
  background: var(--blue-tint);
  color: var(--blue);
  text-decoration: none;
}

@media (max-width: 47.99rem) {
  .nav-more__menu {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0;
  }
}

.nav-toggle {
  display: none; /* shown only on small screens when JS is available */
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav-toggle:hover {
  border-color: var(--blue);
}

.nav-toggle__bar {
  display: block;
  width: 1.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform 200ms ease, opacity 150ms ease;
}

/* Morph to an X while the menu is open */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 47.99rem) {
  .js .nav-toggle {
    display: flex;
  }
  /* Keep the header to one row: a hair smaller wordmark leaves room for
     the toggle, which otherwise wraps underneath (and under the cookie
     card) on narrow phones. */
  .wordmark {
    font-size: 0.95rem;
  }
  .site-header .logo-mark {
    width: 2.1rem;
    height: 2.1rem;
  }
  .wordmark__tag {
    font-size: 0.55rem;
    letter-spacing: 0.18em;
  }
  .js .site-nav {
    display: none;
    width: 100%;
  }
  .js .site-nav.is-open {
    display: block;
  }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 0.5rem;
  }
  .site-nav li {
    border-top: 1px solid var(--border);
  }
  .site-nav a {
    display: block;
    padding-block: 0.85rem;
  }
  .site-nav .nav-cta {
    display: inline-block;
    margin-block: 0.75rem;
    text-align: center;
  }
}

/* ---- Hero (dark navy with geometric decoration) -------------------------- */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--navy) 0%, #101b57 60%, #16247a 100%);
  color: var(--text-on-dark);
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Brand mark watermark, right side (mobile-first: subtler, smaller) */
.hero::before {
  width: 18rem;
  height: 18rem;
  right: -6rem;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 0;
  background: url("../img/logo-mark.6fc50f4401a9.svg") no-repeat center / contain;
  opacity: 0.3;
}

@media (min-width: 48rem) {
  .hero::before {
    width: 30rem;
    height: 30rem;
    right: -5rem;
    opacity: 0.35;
  }
}

/* Small filled circle, lower left */
.hero::after {
  width: 11rem;
  height: 11rem;
  left: -4rem;
  bottom: -5rem;
  background: rgba(43, 78, 255, 0.22);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 9vw, 7.5rem);
  max-width: 46rem;
}

.hero .label {
  color: #93a5ff;
  margin-bottom: 0.9rem;
}

.hero h1 {
  color: #fff;
  margin-bottom: 1.25rem;
}

.hero .lede {
  font-size: 1.15rem;
  max-width: 36rem;
  margin-bottom: 2.25rem;
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.hero__note {
  font-size: 0.85rem;
  color: #8f97c0;
}

/* Compact variant for inner pages */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #101b57 70%, #16247a 100%);
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
}

/* Brand mark watermark (mobile-first: subtler, smaller) */
.page-hero::before {
  content: "";
  position: absolute;
  width: 14rem;
  height: 14rem;
  right: -4rem;
  top: 50%;
  transform: translateY(-50%);
  background: url("../img/logo-mark.6fc50f4401a9.svg") no-repeat center / contain;
  opacity: 0.3;
  pointer-events: none;
}

@media (min-width: 48rem) {
  .page-hero::before {
    width: 20rem;
    height: 20rem;
    right: -2rem;
    opacity: 0.35;
  }
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.page-hero .label {
  color: #93a5ff;
  margin-bottom: 0.6rem;
}

.page-hero h1 {
  color: #fff;
  margin-bottom: 0.5rem;
}

.page-hero p {
  max-width: 40rem;
  margin: 0;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  font: 500 0.98rem var(--font-body);
  text-decoration: none;
  padding: 0.85rem 1.8rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--blue);
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease,
    transform 150ms ease;
}

.btn:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.btn--light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.btn--light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

/* Secondary button for white/light sections (btn--light is for dark heroes). */
.btn--outline {
  background: #fff;
  border-color: #ccd3e8;
  color: var(--navy);
}

.btn--outline:hover {
  background: var(--blue-tint);
  border-color: var(--blue);
  color: var(--blue);
}

.btn--danger {
  background: #fff;
  border-color: #e5b7c0;
  color: var(--error);
}

.btn--danger:hover {
  background: #fdf1f3;
  border-color: var(--error);
  color: var(--error);
}

.btn--sm {
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
}

/* ---- Sections ------------------------------------------------------------ */
.section {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.section--alt {
  background: var(--bg-alt);
}

.section__head {
  max-width: 40rem;
  margin-bottom: 2.75rem;
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head .label {
  margin-bottom: 0.6rem;
}

.section__head h2 {
  margin-bottom: 0.6rem;
}

/* When a section head opens the page (no hero above), its h1 keeps h2's
   scale so the page doesn't shout. */
.section__head h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  margin-bottom: 0.6rem;
}

.section__head p {
  margin: 0;
}

/* ---- Cards --------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.5rem;
}

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.9rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card__icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 10px;
  background: var(--blue-tint);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin-bottom: 0.5rem;
}

.card__icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.card h3 {
  margin: 0;
}

.card h3 a {
  color: var(--navy);
}

.card h3 a:hover {
  color: var(--blue);
  text-decoration: none;
}

.card p {
  margin: 0;
  font-size: 0.95rem;
}

.card .card__meta {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b93ad;
}

.card__more {
  margin-top: auto;
  padding-top: 0.5rem;
  font-weight: 500;
  font-size: 0.92rem;
}

/* ---- Services index -------------------------------------------------------- */
/* Faded brand-mark watermark on the left of the explorer section (the
   heroes carry the same mark on the right). */
.svc-explore {
  position: relative;
  overflow: hidden;
}

.svc-explore::before {
  content: "";
  position: absolute;
  width: 16rem;
  height: 16rem;
  left: -6rem;
  top: 50%;
  transform: translateY(-50%);
  background: url("../img/logo-mark.6fc50f4401a9.svg") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
}

@media (min-width: 48rem) {
  .svc-explore::before {
    width: 26rem;
    height: 26rem;
    left: -8rem;
  }
}

/* Explorer: one screen per service. Tabs pick a screen; explorer.js swaps
   the active panel. All hiding is gated on html.js (set by nav.js), so
   without JS every panel renders stacked and nothing is lost. */
.explorer__tabs {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  scrollbar-width: none; /* Firefox */
  /* Six tabs overflow on most screens: fade the right edge so it reads as
     scrollable rather than clipped. */
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
}

.explorer__tabs::-webkit-scrollbar {
  display: none;
}

/* Mouse users drag the bar to scroll it (explorer.js); touch scrolls it
   natively. */
html.js .explorer__tabs {
  cursor: grab;
}

html.js .explorer__tabs.is-dragging,
html.js .explorer__tabs.is-dragging .explorer__tab {
  cursor: grabbing;
  user-select: none;
}

.explorer__tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font: 500 0.9rem var(--font-body);
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease,
    color 150ms ease;
}

.explorer__tab:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.explorer__tab[aria-current="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.explorer__tab-num {
  font: 600 0.72rem var(--font-head);
  letter-spacing: 0.06em;
  color: var(--blue);
}

.explorer__tab[aria-current="true"] .explorer__tab-num {
  color: #93a5ff;
}

/* The slider is a transform, not a scroll container. Earlier versions
   scrolled a snapped track, and every gesture shorter than half a panel
   was snapped back to where it began, which made swiping look broken.
   Shifting the track by whole panels cannot spring back. The card styling
   lives on the viewport so the panels inside it slide cleanly. */
.explorer__viewport {
  /* Positioned so the card sits above the section's logo watermark, which
     is absolute and would otherwise show through the white background. */
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: var(--shadow);
}

html.js .explorer__viewport {
  overflow: hidden;
  cursor: grab;
  /* Horizontal gestures are ours; vertical ones still scroll the page. */
  touch-action: pan-y;
}

html.js .explorer__viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.explorer__viewport:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

/* No JS: the panels simply stack and every service stays readable. */
.explorer__track {
  display: grid;
  gap: 1.25rem;
}

html.js .explorer__track {
  display: flex;
  gap: 0;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.explorer__panel {
  position: relative;
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.9rem, 4.5vw, 3.25rem);
  overflow: hidden;
}

html.js .explorer__panel {
  flex: 0 0 100%;
}

@media (min-width: 48rem) {
  .explorer__panel {
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
  }
}

.explorer__ghost {
  position: absolute;
  top: -1.2rem;
  right: 0.4rem;
  font: 700 8.5rem var(--font-head);
  line-height: 1;
  color: var(--bg-alt);
  user-select: none;
  pointer-events: none;
}

.explorer__copy {
  position: relative; /* above the ghost numeral */
}

/* Icon row: the featured badge sits beside it, above the service name. */
.explorer__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.explorer__title .card__icon {
  margin-bottom: 0;
}

/* Small by design: a marker, not a shout. Driven by Service.is_featured. */
.explorer__badge {
  font: 600 0.68rem var(--font-head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-tint);
  border: 1px solid #d5ddff;
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
}

/* Same signal in the tab row, so it reads while another screen is open. */
.explorer__tab-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--blue);
}

.explorer__tab[aria-current="true"] .explorer__tab-dot {
  background: #93a5ff;
}

.explorer__copy h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  margin: 0 0 0.6rem;
}

.explorer__copy > p {
  margin: 0 0 1.5rem;
  max-width: 34rem;
}

.explorer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.explorer__aside {
  position: relative;
  background: linear-gradient(120deg, var(--navy) 0%, #14205e 100%);
  border-radius: var(--radius);
  padding: 1.7rem 1.6rem;
  color: var(--text-on-dark);
}

.explorer__aside .label {
  color: #93a5ff;
  display: block;
  margin-bottom: 0.9rem;
}

.explorer__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.explorer__points li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.95rem;
}

.explorer__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 3px;
  background: var(--blue);
}

.explorer__nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.5rem;
}

html.js .explorer__nav {
  display: flex;
}

.explorer__count {
  font: 600 0.85rem var(--font-head);
  letter-spacing: 0.08em;
  color: #8b93ad;
  min-width: 3.5rem;
  text-align: center;
}

/* Service detail: reading-first. Light header (no navy hero), prose beside
   a sticky at-a-glance card. */
.svc-head {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(2rem, 4vw, 3rem);
}

/* .breadcrumb is coloured for dark heroes; re-ink it for the light header. */
.svc-head .breadcrumb {
  color: #8b93ad;
}

.svc-head .breadcrumb a {
  color: var(--text);
}

.svc-head .breadcrumb a:hover {
  color: var(--blue);
}

.svc-head .breadcrumb [aria-current="page"] {
  color: var(--navy);
}

.svc-head__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

/* Split only when a scene renders next to the title (falls back to stacked
   where :has is unsupported, which reads fine). */
@media (min-width: 60rem) {
  .svc-head__grid:has(.svc-art) {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
}

.svc-head__title {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 0.9rem;
}

.svc-head__title .card__icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.svc-head__title h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3.5vw, 2.7rem);
}

.svc-head__summary {
  font-size: 1.1rem;
  max-width: 44rem;
  margin: 0;
}

.svc-layout {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 60rem) {
  .svc-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }

  .svc-aside {
    position: sticky;
    top: 1.5rem;
  }
}

.glance {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.7rem 1.6rem;
}

.glance .label {
  display: block;
  margin-bottom: 1rem;
}

.glance__points {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.glance__points li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.95rem;
  color: var(--navy);
}

.glance__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 3px;
  background: var(--blue);
}

.glance > a {
  font-weight: 500;
  font-size: 0.95rem;
}

/* ---- Service art (animated scenes) ---------------------------------------- */
/* Abstract, label-free illustrations. The global reduced-motion rule kills
   every animation, so the static bases below must read as a sensible
   diagram on their own: dots sit mid-line, bars at full height. */
.svc-art {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  padding: 1.2rem 1.2rem 0.9rem;
}

.svc-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.svc-art__caption {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: #8b93ad;
  text-align: center;
}

/* Packets travelling from the sources into the dashboard. Base position is
   the middle of the line so the frozen frame still makes sense. */
@keyframes ci-flow {
  0% {
    transform: translateX(-44px);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  74% {
    opacity: 1;
  }
  88%,
  100% {
    transform: translateX(44px);
    opacity: 0;
  }
}

.ci-dot {
  animation: ci-flow 2.8s ease-in-out infinite;
}

.ci-dot--2 {
  animation-delay: 0.9s;
}

.ci-dot--3 {
  animation-delay: 1.8s;
}

/* The dashed connectors drift the same way the packets move. */
@keyframes ci-dash {
  to {
    stroke-dashoffset: -18;
  }
}

.ci-line {
  stroke-dasharray: 5 4;
  animation: ci-dash 1.4s linear infinite;
}

/* Sources ping as they are polled. */
@keyframes ci-ping {
  0% {
    transform: scale(0.55);
    opacity: 0.8;
  }
  70%,
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

.ci-ping {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: ci-ping 2.8s ease-out infinite;
}

.ci-ping--2 {
  animation-delay: 0.9s;
}

.ci-ping--3 {
  animation-delay: 1.8s;
}

/* Dashboard bars settle as fresh data lands. */
@keyframes ci-bar {
  0%,
  20%,
  100% {
    transform: scaleY(1);
  }
  55% {
    transform: scaleY(0.62);
  }
}

.ci-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: ci-bar 5.6s ease-in-out infinite;
}

.ci-bar--2 {
  animation-delay: 0.7s;
}

.ci-bar--3 {
  animation-delay: 1.4s;
}

.ci-bar--4 {
  animation-delay: 2.1s;
}

.ci-bar--5 {
  animation-delay: 2.8s;
}

@keyframes ci-tick {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.7);
    opacity: 0.55;
  }
}

.ci-tick {
  transform-box: fill-box;
  transform-origin: center;
  animation: ci-tick 2.1s ease-in-out infinite;
}

/* Engagement steps: three numbered items. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  counter-reset: step;
}

@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.steps__item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.9rem 1.7rem;
}

.steps__num {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font: 600 1rem var(--font-head);
  margin-bottom: 1rem;
}

.steps__item h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.steps__item p {
  margin: 0;
  font-size: 0.95rem;
}

/* Other-capability chips on service detail pages. */
.svc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.svc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.55rem 1.2rem 0.55rem 0.6rem;
  color: var(--navy);
  font-weight: 500;
  font-size: 0.92rem;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.svc-chip:hover {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: var(--shadow);
  text-decoration: none;
}

.svc-chip .card__icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  margin-bottom: 0;
}

.svc-chip .card__icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* Scroll reveal: [data-reveal] elements fade up as they enter the viewport.
   reveal.js adds .reveal only when it runs, so content is never hidden
   without JavaScript. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.reveal--in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- CTA band ------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(120deg, var(--navy) 0%, #14205e 100%);
  border-radius: calc(var(--radius) + 8px);
  padding: clamp(2.5rem, 6vw, 4rem);
  position: relative;
  overflow: hidden;
}

.cta-band::after {
  content: "";
  position: absolute;
  width: 16rem;
  height: 16rem;
  right: -6rem;
  bottom: -8rem;
  border-radius: 50%;
  border: 1.6rem solid rgba(43, 78, 255, 0.25);
  pointer-events: none;
}

.cta-band h2 {
  color: #fff;
}

.cta-band p {
  color: var(--text-on-dark);
  max-width: 34rem;
}

.cta-band > * {
  position: relative;
  z-index: 1;
}

/* ---- Fact rows (company record, article lists) ---------------------------- */
.facts {
  margin: 0;
  max-width: 46rem;
}

.facts > div {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.facts > div:first-child {
  border-top: 1px solid var(--border);
}

.facts dt {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8b93ad;
  padding-top: 0.25rem;
}

.facts dd {
  margin: 0;
  color: var(--navy);
}

.facts dd p {
  color: var(--text);
}

@media (max-width: 30rem) {
  .facts > div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

/* ---- Empty states ---------------------------------------------------------- */
.empty {
  background: #fff;
  border: 1px dashed #c6cde4;
  border-radius: var(--radius);
  padding: 3rem 2rem;
  max-width: 44rem;
  text-align: center;
}

.empty .label {
  display: block;
  margin-bottom: 0.75rem;
}

.empty p {
  margin: 0 auto;
  max-width: 34rem;
}

/* ---- TODO marker — a visible, honest gap ----------------------------------- */
.todo {
  background: #fff;
  border: 1px dashed var(--error);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  max-width: 44rem;
  font-size: 0.95rem;
}

.todo .label {
  color: var(--error);
  display: block;
  margin-bottom: 0.3rem;
}

/* Visually hidden, still announced by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Forms ------------------------------------------------------------------ */
/* Card wrapper around public forms (contact page): centred column on wide
   screens, full width (inside the page padding) on phones. */
.form-card {
  max-width: 42rem;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.25rem, 4vw, 2.75rem);
}

.form-card .form {
  max-width: none;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
}

.form {
  max-width: 38rem;
}

.form .field {
  margin-bottom: 1.4rem;
}

.form label {
  display: block;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--navy);
  margin-bottom: 0.45rem;
}

.form input[type="text"],
.form input[type="email"],
.form textarea {
  width: 100%;
  font: inherit;
  color: var(--navy);
  background: #fff;
  border: 1px solid #ccd3e8;
  border-radius: var(--radius-sm);
  padding: 0.78rem 1rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form input:focus-visible,
.form textarea:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43, 78, 255, 0.18);
}

.form .errorlist,
.form .error {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  color: var(--error);
  font-size: 0.9rem;
}

.form .nonfield {
  background: #fdf1f3;
  border: 1px solid var(--error);
  border-radius: var(--radius-sm);
  color: var(--error);
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.4rem;
}

.form .help {
  font-size: 0.85rem;
  color: #8b93ad;
  margin-top: 0.3rem;
}

/* Honeypot: removed from visual flow and the tab order, still in the DOM. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.founder-intro {
  margin-bottom: 2rem;
}

.founder-intro p {
  font-size: 0.97rem;
  text-align: justify;
  hyphens: auto;
}

/* ---- Founder section: photo + bio -------------------------------------------
   Mobile-first: single column with a full-width (capped) photo; the two-
   column layout is a wide-screen enhancement. */
.founder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

.founder-grid .founder-photo {
  width: 100%;
  max-width: 24rem;
}

@media (min-width: 40rem) {
  .founder-grid {
    grid-template-columns: 15rem 1fr;
    gap: 2.5rem;
  }

  .founder-grid .founder-photo {
    max-width: none;
  }
}

.founder-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}

/* Visible, honest gap until the real photo is supplied (same register as .todo) */
.founder-photo--placeholder {
  background: #fff;
  border: 1px dashed var(--error);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1rem;
  text-align: center;
  color: #8b93ad;
  font-size: 0.92rem;
}

.founder-photo--placeholder .label {
  color: var(--error);
}

/* ---- Founder timelines (about page) -----------------------------------------
   Brand-mark language: a navy-to-blue gradient rail, isometric diamond
   nodes (the logo's plate, rotated), and a stacked-plates node on the
   founding milestone. */
.timeline-heading {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.timeline-heading::before {
  content: "";
  width: 1.4rem;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0B1020, #0091FF);
}

.timeline + .timeline-heading {
  margin-top: 2.2rem;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #0B1020, #0091FF 70%, #4FB8FF);
}

.timeline li {
  position: relative;
  padding-left: 2.3rem;
}

/* Isometric diamond node, echoing the logo plate */
.timeline li::before {
  content: "";
  position: absolute;
  left: 0.14rem;
  top: 0.88rem;
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 2px;
  transform: rotate(45deg) scale(1, 0.82);
  background: linear-gradient(135deg, #0B1020, #0091FF);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blue-tint);
  transition: box-shadow 180ms ease, transform 180ms ease;
  z-index: 1;
}

.timeline li:hover::before {
  transform: rotate(45deg) scale(1.18, 0.97);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(0, 145, 255, 0.28),
    0 4px 14px rgba(0, 145, 255, 0.45);
}

/* Founding milestone: stacked plates, like the mark's rails */
.timeline li.timeline__milestone::before {
  background: linear-gradient(135deg, #0091FF, #4FB8FF);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blue-tint),
    3px 3px 0 -1px #fff, 4px 4px 0 0 #4FB8FF,
    7px 7px 0 -1px #fff, 8px 8px 0 0 #CBE4FF;
}

.timeline summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.55rem 2rem 0.55rem 0;
  font-weight: 600;
  color: var(--navy);
  position: relative;
  transition: transform 160ms ease, color 160ms ease;
}

.timeline summary::-webkit-details-marker {
  display: none;
}

.timeline summary:hover {
  color: var(--blue);
  transform: translateX(4px);
}

/* Expand toggle: a fine + that becomes x */
.timeline summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-52%);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  color: #9aa3bd;
  transition: transform 200ms ease, color 200ms ease;
}

.timeline details[open] summary::after {
  transform: translateY(-52%) rotate(45deg);
  color: var(--blue);
}

.timeline__years {
  flex-shrink: 0;
  min-width: 6.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(120deg, #0B1020 10%, #0091FF 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.timeline__note {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8b93ad;
  align-self: center;
}

.timeline details p {
  margin: 0.15rem 0 0.9rem;
  padding: 0.65rem 0.9rem;
  font-size: 0.93rem;
  color: var(--text);
  background: linear-gradient(90deg, var(--blue-tint), rgba(235, 239, 255, 0));
  border-left: 2px solid #0091FF;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  animation: tl-reveal 240ms ease;
}

@keyframes tl-reveal {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline summary,
  .timeline li::before {
    transition: none;
  }

  .timeline details p {
    animation: none;
  }
}

/* ---- Social profile links (founder section) --------------------------------- */
.social-links {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.15rem;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(11, 18, 54, 0.05);
  transition: border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.social-link:hover {
  border-color: var(--blue);
  color: var(--blue);
  text-decoration: none;
  transform: translateY(-1px);
}

.social-link svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

/* Icon-only variant, shown under the founder's name */
.social-links--compact {
  margin-top: 0.35rem;
}

.social-link--icon {
  padding: 0.5rem;
}

.social-link--icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* ---- Direct contact details (Contact page) --------------------------------- */
/* Same centred column as .form-card so the chip and card left-align */
.contact-direct {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

.contact-direct__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 100%;
  overflow-wrap: anywhere; /* long email must wrap, not overflow, on phones */
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.15rem;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(11, 18, 54, 0.05);
}

.contact-direct__item:hover {
  border-color: var(--blue);
  color: var(--blue);
  text-decoration: none;
}

.contact-direct__item svg {
  flex-shrink: 0;
  color: var(--blue);
}

/* ---- Cookie consent card (Cookiebot-style floating widget) ------------------- */
/* Mobile-first: centred card; pinned bottom-left from tablet up */
.cookie-banner {
  position: fixed;
  inset-inline: 1.25rem;
  margin-inline: auto;
  bottom: 1.25rem;
  z-index: 60;
  width: min(23rem, calc(100vw - 2.5rem));
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(11, 18, 54, 0.28);
  padding: 1.25rem 1.25rem 1.1rem;
  animation: cookie-in 320ms ease;
}

@media (min-width: 48rem) {
  .cookie-banner {
    margin-inline: 0 auto; /* pin bottom-left, Cookiebot style */
  }
}

@keyframes cookie-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.cookie-banner__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--blue);
  margin-bottom: 0.5rem;
}

.cookie-banner__title {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
}

.cookie-banner__text {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: var(--text);
}

.cookie-banner__details {
  margin-bottom: 0.9rem;
  font-size: 0.85rem;
}

.cookie-banner__details summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 500;
  list-style: none;
}

.cookie-banner__details summary::-webkit-details-marker {
  display: none;
}

.cookie-banner__details summary::after {
  content: " ▾";
  font-size: 0.75em;
}

.cookie-banner__details[open] summary::after {
  content: " ▴";
}

.cookie-banner__details ul {
  list-style: none;
  margin: 0.6rem 0;
  padding: 0;
}

.cookie-banner__details li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--bg-alt);
  color: var(--navy);
  font-weight: 500;
}

.cookie-banner__details p {
  margin: 0.5rem 0 0;
}

.cookie-chip {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8b93ad;
  background: var(--bg-alt);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}

.cookie-chip--on {
  color: #0a7a44;
  background: #e4f6ec;
}

.cookie-banner__actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}

.cookie-banner__actions .btn {
  padding-inline: 0.5rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

@media print {
  .cookie-banner {
    display: none !important;
  }
}

/* ---- Article / meta ---------------------------------------------------------- */
.article-meta {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

/* ---- Insights entry pattern ---------------------------------------------------- */
.post-figure {
  margin: 0 auto 2.25rem;
  max-width: 46rem;
}

/* Insights article body: centred column */
.post-body {
  margin-inline: auto;
}

/* Breadcrumb (post pages, on the navy hero) */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.82rem;
  margin-bottom: 1.1rem;
  color: var(--text-on-dark);
}

.breadcrumb a {
  color: #CBD8E6;
}

.breadcrumb a:hover {
  color: #fff;
}

.breadcrumb [aria-current="page"] {
  color: #fff;
}

.post-figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.post-list {
  display: grid;
  gap: 1.5rem;
  max-width: 46rem;
  margin-inline: auto;
}

.post-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.7rem 1.7rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.8rem;
  color: #8b93ad;
}

.post-card__category {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--blue);
  background: var(--blue-tint);
  border-radius: 999px;
  padding: 0.18rem 0.7rem;
}

.post-card h2 {
  margin: 0;
  font-size: 1.25rem;
}

.post-card h2 a {
  color: var(--navy);
}

.post-card h2 a:hover {
  color: var(--blue);
  text-decoration: none;
}

.post-card p {
  margin: 0;
  font-size: 0.95rem;
}

/* ---- Pagination ---------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
  font-weight: 500;
  font-size: 0.92rem;
}

/* ---- Footer (dark navy, columns + statutory disclosure) ----------------------- */
.site-footer {
  margin-top: clamp(3rem, 7vw, 5rem);
  background: var(--navy);
  color: var(--text-on-dark);
  font-size: 0.95rem;
}

.site-footer a {
  color: #dfe3f6;
}

.site-footer a:hover {
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.6fr;
  gap: 2.5rem;
  padding-block: 3.5rem 2.5rem;
}

@media (max-width: 56rem) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 34rem) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.footer-brand .wordmark {
  color: #fff;
  display: inline-block;
  margin-bottom: 0.75rem;
}

.footer-brand p {
  margin: 0;
  font-size: 0.92rem;
}

/* Kept in the brand column, away from the statutory disclosure block */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.footer-social svg {
  flex-shrink: 0;
}

.footer-col h3 {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

/* Statutory trading disclosure — required on every page. */
.footer-legal {
  font-size: 0.88rem;
  line-height: 1.65;
}

.footer-legal strong {
  color: #fff;
  font-weight: 600;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1.4rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: #8f97c0;
}

/* ---- Error pages ----------------------------------------------------------------- */
.error-page {
  padding-block: clamp(4rem, 12vw, 8rem);
}

/* ---- Dashboard (superuser-only, /dashboard) -------------------------------- */
/* Compact page header instead of the public pages' full navy hero. */
.dash-header {
  border-bottom: 1px solid var(--border);
  padding: 1.6rem 0 1.3rem;
}

.dash-header h1 {
  font-size: 1.55rem;
  margin: 0;
}

.dash-header .label {
  font-size: 0.7rem;
}

.dash-header + .section {
  padding-top: 2.25rem;
}

.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.dash-head h2 {
  margin: 0;
}

.dash-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.table-scroll {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 0.95rem;
}

.table th,
.table td {
  text-align: left;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table thead th {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8b93ad;
  background: var(--bg-alt);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table-missing {
  color: var(--error);
  font-weight: 500;
}

.status {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 99px;
}

.status--draft {
  background: var(--bg-alt);
  color: #6b7390;
}

.status--sent {
  background: var(--blue-tint);
  color: var(--blue);
}

.status--paid {
  background: #e8f7ee;
  color: #1c7c46;
}

.form--wide {
  max-width: 52rem;
}

.form .field select,
.form .field input[type="number"],
.form .field input[type="date"],
.form .field input[type="file"] {
  width: 100%;
  font: inherit;
  color: var(--navy);
  background: #fff;
  border: 1px solid #ccd3e8;
  border-radius: var(--radius-sm);
  padding: 0.78rem 1rem;
}

.lines-heading {
  margin: 2rem 0 1rem;
  font-size: 1.25rem;
}

.lines-table input {
  width: 100%;
  font: inherit;
  color: var(--navy);
  border: 1px solid #ccd3e8;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  min-width: 5.5rem;
}

.lines-table td:first-child input {
  min-width: 18rem;
}

/* ---- Invoice document (print-ready A4) -------------------------------------- */
.invoice-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.invoice-doc {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.75rem, 5vw, 3.5rem);
  max-width: 52rem;
  margin-inline: auto;
  color: var(--navy);
}

.invoice-doc h2 {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b93ad;
  margin: 0 0 0.5rem;
}

.invoice-doc__head {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.invoice-doc__brand {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.invoice-doc__brand .logo-mark {
  width: 3.2rem;
  height: 3.2rem;
  flex-shrink: 0;
  margin: 0;
}

.invoice-doc__company {
  font-family: var(--font-head, inherit);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
}

.invoice-doc__addr {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.6;
}

/* Everything inside the meta block is left-aligned: on wide screens the
   block itself sits on the right (flex), and when the header wraps it lands
   flush left — no breakpoint to mis-guess the wrap point. */
.invoice-doc__type {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 0.6rem;
  text-align: left;
}

.invoice-doc__meta table {
  border-collapse: collapse;
  font-size: 0.92rem;
}

.invoice-doc__meta th {
  text-align: left;
  color: #8b93ad;
  font-weight: 500;
  padding: 0.15rem 1.2rem 0.15rem 0;
}

.invoice-doc__meta td {
  text-align: right;
}

.invoice-doc__billto {
  margin-bottom: 2.5rem;
}

.invoice-doc__billto p {
  margin: 0;
  line-height: 1.7;
}

.invoice-doc__lines {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin-bottom: 2.5rem;
}

.invoice-doc__lines th,
.invoice-doc__lines td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
}

.invoice-doc__lines thead th {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8b93ad;
  text-align: left;
  border-bottom: 2px solid var(--navy);
}

.invoice-doc__lines th:nth-child(n+2),
.invoice-doc__lines td:nth-child(n+2) {
  text-align: right;
  white-space: nowrap;
}

.invoice-doc__lines tfoot th {
  text-align: right;
  font-weight: 500;
  color: var(--text);
}

.invoice-doc__lines tfoot td {
  text-align: right;
}

.invoice-doc__total th,
.invoice-doc__total td {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  border-top: 2px solid var(--navy);
  border-bottom: 0;
}

.invoice-doc__notes,
.invoice-doc__payment {
  margin-bottom: 2rem;
}

.invoice-doc__notes p,
.invoice-doc__payment p {
  margin: 0;
  line-height: 1.7;
}

.invoice-doc__foot {
  border-top: 1px solid var(--border);
  padding-top: 1.2rem;
  font-size: 0.8rem;
  color: #8b93ad;
  line-height: 1.6;
}

@media print {
  /* Zero page margins: the browser draws its date/title/URL header and
     footer inside them, so removing the margins removes those lines. The
     document's own padding provides the breathing room instead. */
  @page {
    size: A4;
    margin: 0;
  }

  .site-header,
  .site-footer,
  .invoice-toolbar,
  .skip-link {
    display: none !important;
  }

  .invoice-page {
    padding: 0;
  }

  .wrap {
    max-width: none;
    padding: 0;
  }

  .invoice-doc {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    max-width: none;
    padding: 1.2cm 1.8cm;
  }

  /* Tighter vertical rhythm on paper so a typical invoice fits one page. */
  .invoice-doc {
    font-size: 0.92rem;
  }

  /* Keep the header two-column on paper: the company block wraps its text
     instead of pushing the meta block onto its own row. */
  .invoice-doc__head {
    flex-wrap: nowrap;
  }

  .invoice-doc__brand {
    flex: 1;
  }

  .invoice-doc__meta {
    flex-shrink: 0;
  }

  .invoice-doc__head,
  .invoice-doc__billto,
  .invoice-doc__lines {
    margin-bottom: 1.4rem;
  }

  .invoice-doc__notes,
  .invoice-doc__payment {
    margin-bottom: 1.2rem;
  }

  .invoice-doc__payment,
  .invoice-doc__foot {
    break-inside: avoid;
  }

  body {
    background: #fff;
  }
}