/* CompFlow component layer.
 *
 * The templates carry the prototype's own inline styles, which fixes the
 * desktop geometry exactly. This file supplies only what an inline style
 * cannot express: hover/focus states, keyframes, and the responsive layer.
 *
 * The prototypes contain no media queries at all, so every rule below the
 * "Responsive" heading is a design decision, not a transcription.
 */

/* ------------------------------------------------------------------ Base */

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

html, body {
  margin: 0;
  padding: 0;
  background: #F4F3EF;
}

body {
  font-family: 'IBM Plex Sans', sans-serif;
  color: #10151D;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }

a {
  color: #10151D;
  text-decoration: none;
}

*:focus-visible {
  outline: 2px solid #1B74D2;
  outline-offset: 3px;
}

.cf-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: #0B1017;
  color: #F4F3EF;
  font-size: 14px;
}
.cf-skip:focus { left: 0; }

/* ------------------------------------------------------------------- Nav */

.cf-nav__link:hover { color: #1B74D2; }

/* The caret button exists for keyboard users; on desktop the group also
   opens on hover, matching the prototype. */
.cf-nav__toggle {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.cf-nav__caret { transition: transform 0.18s ease; }
.cf-nav__group[data-open="true"] .cf-nav__caret { transform: rotate(180deg); }

.cf-menu { display: none; }
.cf-nav__group[data-open="true"] .cf-menu { display: flex; }

.cf-menu__item:last-child { border-bottom: 0 !important; }
.cf-menu__item:hover {
  background: #FFFFFF;
  color: #1B74D2 !important;
}
.cf-menu__more:hover { background: #FFFFFF; }

.cf-nav__cta { transition: background 0.18s ease, color 0.18s ease; }
.cf-nav__cta:hover {
  background: #1B74D2 !important;
  color: #FFFFFF !important;
}

/* Burger: hidden until the mobile breakpoint. 44px box meets the minimum
   touch-target size; the prototype had no mobile nav to copy. */
.cf-burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid rgba(16,21,29,0.12);
  border-radius: 2px;
  cursor: pointer;
}
.cf-burger span,
.cf-burger span::before,
.cf-burger span::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 1.5px;
  background: #10151D;
  transition: transform 0.2s ease, background 0.2s ease;
}
.cf-burger span { top: 50%; transform: translate(-50%, -50%); }
.cf-burger span::before { content: ""; left: 0; transform: translateY(-6px); }
.cf-burger span::after  { content: ""; left: 0; transform: translateY(6px); }
.cf-burger[aria-expanded="true"] span { background: transparent; }
.cf-burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.cf-burger[aria-expanded="true"] span::after  { transform: rotate(-45deg); }

/* ------------------------------------------------------------------ Hero */

.cf-hero__inner { animation: cfHeroRise 0.7s ease-out both; }

@keyframes cfHeroRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cf-btn { transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
.cf-btn--primary:hover { background: #F4F3EF !important; color: #0B1017 !important; }
.cf-btn--ghost:hover   { border-color: #F4F3EF !important; color: #FFFFFF !important; }
.cf-btn--cta:hover     { background: #10151D !important; }

/* --------------------------------------------------------------- Sections */

.cf-morelink:hover { text-decoration: underline; }

.cf-servicecard:hover { background: #FFFFFF; }

.cf-sectorcard { transition: color 0.18s ease; }
.cf-sectorcard:hover { color: #1B74D2; }
.cf-sectorcard img { transition: transform 0.4s ease; }
.cf-sectorcard:hover img { transform: scale(1.03); }

.cf-footer__link { transition: color 0.18s ease; }
.cf-footer__link:hover { color: #F4F3EF !important; }

.cf-postlink:hover h2 { color: #1B74D2; }

/* ----------------------------------------------------------------- Prose */

.cf-prose__body {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(16,21,29,0.78);
  max-width: 68ch;
}
.cf-prose__body h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 48px 0 16px;
  color: #10151D;
}
.cf-prose__body h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 36px 0 12px;
  color: #10151D;
}
.cf-prose__body a { color: #1B74D2; }
.cf-prose__body a:hover { text-decoration: underline; }
.cf-prose__body ul,
.cf-prose__body ol { padding-left: 22px; }
.cf-prose__body li { margin-bottom: 8px; }

/* ============================================================ Responsive

   The source prototypes are desktop-only: no media queries, and every grid
   uses a fixed column count. Everything below is newly designed. */

/* Tablet ------------------------------------------------------------- */

@media (max-width: 1080px) {
  .cf-servicegrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cf-sectorgrid  { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .cf-split       { grid-template-columns: 1fr !important; gap: 40px !important; }
  .cf-split__body { padding-top: 0 !important; }
  .cf-footer__grid { grid-template-columns: 1.4fr 1fr !important; gap: 48px !important; }
  .cf-nav { gap: 24px !important; }
}

/* Mobile ------------------------------------------------------------- */

@media (max-width: 781px) {
  .cf-burger { display: block; }

  .cf-header__inner { padding: 0 20px !important; }

  /* Desktop row becomes a stacked drawer under the sticky bar. */
  .cf-nav {
    position: fixed;
    inset: 84px 0 auto 0;
    display: none !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 8px 20px 24px;
    background: #F4F3EF;
    border-bottom: 1px solid rgba(16,21,29,0.12);
    box-shadow: 0 12px 32px rgba(11,16,23,0.13);
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
  }
  .cf-header[data-nav-open="true"] .cf-nav { display: flex !important; }

  .cf-nav > .cf-nav__link,
  .cf-nav__group {
    width: 100%;
    padding: 4px 0 !important;
    border-bottom: 1px solid rgba(16,21,29,0.09);
  }
  .cf-nav > .cf-nav__link { padding: 15px 0 !important; }

  /* 48px rows clear the 44px minimum touch target. */
  .cf-nav__group {
    position: static !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 0 !important;
  }
  .cf-nav__group > .cf-nav__link {
    flex: 1;
    padding: 15px 0;
  }
  .cf-nav__group > .cf-nav__link,
  .cf-nav__toggle { display: inline-flex; align-items: center; }
  .cf-nav__grouprow { display: flex; align-items: center; justify-content: space-between; }
  .cf-nav__toggle { min-width: 44px; min-height: 44px; justify-content: flex-end; }

  /* Dropdowns become inline accordions rather than floating overlays. */
  .cf-menu {
    position: static !important;
    min-width: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-left: 12px;
  }
  .cf-menu__item { padding: 14px 0 !important; border-bottom: 0 !important; }

  .cf-nav__cta {
    display: block;
    text-align: center;
    margin-top: 20px;
    padding: 15px 22px !important;
  }

  /* Sections */
  .cf-shell,
  .cf-split,
  .cf-cta,
  .cf-hero__inner,
  .cf-footer__inner { padding-left: 20px !important; padding-right: 20px !important; }

  .cf-shell,
  .cf-split { padding-top: 64px !important; padding-bottom: 64px !important; }

  .cf-hero__inner { padding-top: 72px !important; padding-bottom: 64px !important; }

  .cf-sectionhead {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
    margin-bottom: 40px !important;
  }

  /* Section "more" links are 21px of text on their own row; give them a real
     touch target without changing the desktop geometry. */
  .cf-morelink,
  .cf-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .cf-servicegrid { grid-template-columns: 1fr !important; }
  .cf-sectorgrid  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 20px !important; }
  .cf-reasons     { grid-template-columns: 1fr !important; }

  .cf-hero h1 { max-width: none !important; }
  .cf-hero p  { max-width: none !important; margin: 24px 0 32px !important; }
  .cf-hero__actions { flex-direction: column; align-items: stretch !important; }
  .cf-hero__actions .cf-btn { text-align: center; }

  /* The sector strip scrolls rather than wrapping into a ragged block. */
  .cf-hero__strip {
    padding: 16px 20px !important;
    gap: 28px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cf-hero__strip::-webkit-scrollbar { display: none; }
  .cf-hero__strip span { white-space: nowrap; }

  .cf-cta {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 28px !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .cf-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding-bottom: 40px !important;
  }
  .cf-footer__inner { padding-top: 56px !important; }
  .cf-footer__base { flex-direction: column; gap: 10px; }
  /* Footer link rows need a real touch target. */
  .cf-footer__link { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 420px) {
  .cf-sectorgrid { grid-template-columns: 1fr !important; }
  .cf-brand__mark { height: 34px !important; }
  .cf-brand__word { font-size: 24px !important; }
  .cf-brand__rule { height: 24px !important; }
}

/* ------------------------------- Sector & services page components */

.cf-servicerow { transition: background 0.2s ease; }
.cf-servicerow:hover { background: #FFFFFF; }
.cf-servicerow__arrow { transition: transform 0.18s ease; }
.cf-servicerow:hover .cf-servicerow__arrow { transform: translateX(4px); }

.cf-needrow:hover,
.cf-casecard:hover { background: #FFFFFF !important; }

.cf-briefbtn { transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; }
.cf-briefbtn:hover {
  background: #1B74D2;
  border-color: #1B74D2 !important;
  color: #FFFFFF !important;
}

.cf-chip { transition: border-color 0.18s ease, color 0.18s ease; }
.cf-chip:hover { border-color: #1B74D2 !important; color: #1B74D2 !important; }

@media (max-width: 1080px) {
  .cf-casegrid { grid-template-columns: 1fr !important; }
}

@media (max-width: 781px) {
  /* The 4-column service row collapses to a stacked block; the trailing
     arrow column is dropped rather than orphaned on its own line. */
  .cf-servicerow {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 26px 0 !important;
  }
  .cf-servicerow__arrow { display: none; }

  .cf-needrow,
  .cf-policyrow {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 20px 22px !important;
  }

  .cf-casecard { padding: 26px 22px !important; }

  .cf-sectorhero {
    padding-top: 56px !important;
    padding-bottom: 48px !important;
  }
}

/* ==================================== Transpiled prototype pages

   The service, company and legal pages are transpiled straight from the
   prototypes, so they carry the original inline styles and no class hooks.
   Their responsive behaviour therefore has to target the inline declarations
   themselves. These selectors are deliberately generic and live only inside
   media queries, so they never affect the desktop rendering. */

@media (max-width: 1080px) {
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="gap: 80px"] { gap: 44px !important; }
}

@media (max-width: 781px) {
  /* Any inline multi-column grid collapses to a single column. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* The shared 1280px shell picks up the mobile gutter. */
  [style*="max-width: 1280px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Section rhythm: the prototypes use 88px and 96px vertical padding. */
  [style*="padding: 88px 40px"],
  [style*="padding: 96px 40px"] {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  [style*="padding: 88px 40px 72px"],
  [style*="padding: 88px 40px 64px"] {
    padding-top: 56px !important;
    padding-bottom: 44px !important;
  }
  [style*="padding: 72px 40px 40px"] { padding-top: 52px !important; }
  [style*="padding: 48px 40px 96px"] {
    padding-top: 28px !important;
    padding-bottom: 60px !important;
  }
  [style*="padding: 56px 40px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Large inline gaps are tuned for two columns, not one. */
  [style*="gap: 80px"] { gap: 32px !important; }
  [style*="gap: 64px"] { gap: 30px !important; }
  [style*="gap: 48px"] { gap: 26px !important; }

  /* Space-between rows become stacked blocks. */
  [style*="justify-content: space-between"] {
    flex-wrap: wrap;
    gap: 20px;
  }

  /* Wide inline flex rows must not force overflow. */
  [style*="display: flex"] { flex-wrap: wrap; }
}

/* -------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .cf-hero__inner { animation: none; }
  .cf-sectorcard:hover img { transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}