/* ==========================================================================
   KenInfotec Consultancy Services — Site Stylesheet
   ========================================================================== */

:root {
  /* Brand palette — pulled directly from the KenInfotec logo:
     navy/blue "Ken" wordmark + globe, orange "Infotec" + swoosh. */
  --color-ink: #060f3e;
  --color-ink-soft: #0d1a4d;
  --color-navy: #0c1d71;
  --color-navy-2: #1c2f8c;
  --color-accent: #e9813a;
  --color-accent-dark: #d54128;
  --color-teal: #2753d6;
  --color-teal-dark: #1a3891;

  --color-bg: #ffffff;
  --color-bg-alt: #f6f7fb;
  --color-bg-dark: #060f3e;
  --color-bg-dark-alt: #0c1d71;

  --color-text: #182236;
  --color-text-muted: #57647d;
  --color-text-faint: #8592a8;
  --color-text-on-dark: #eef1f8;
  --color-text-on-dark-muted: #a7b2c9;

  --color-border: #e4e7f0;
  --color-border-dark: #22317c;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.14);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --container-w: 1180px;

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---- Page transitions ----
   Every page shares this stylesheet, and `navigation: auto` turns on the
   browser's native cross-document View Transition for every link click
   between them — no JS router, no click-hijacking, no risk of breaking the
   back button or opening-in-a-new-tab. Chrome/Edge cross-fade smoothly;
   any browser that doesn't support it yet just navigates normally, so
   there's nothing to fall back to by hand. */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: 0.28s var(--ease) both knf-page-out;
  }
  ::view-transition-new(root) {
    animation: 0.32s var(--ease) both knf-page-in;
  }
}
@keyframes knf-page-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes knf-page-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

section { position: relative; }

.section-pad { padding: 96px 0; }
@media (max-width: 768px) {
  .section-pad { padding: 64px 0; }
}

.bg-alt { background: var(--color-bg-alt); }
.bg-dark {
  background: linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-dark-alt) 100%);
  color: var(--color-text-on-dark);
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: #fff; }
.bg-dark p { color: var(--color-text-on-dark-muted); }

/* ---- Eyebrow / kicker ---- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: 14px;
}
.bg-dark .kicker { color: var(--color-accent); }
.kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-accent);
  display: inline-block;
}

.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.section-head p { color: var(--color-text-muted); font-size: 1.05rem; margin-top: 14px; }
.bg-dark .section-head p { color: var(--color-text-on-dark-muted); }

.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease), border-color .15s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary {
  background: var(--color-accent);
  color: #1b1204;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-dark {
  background: var(--color-ink);
  color: #fff;
}
.btn-dark:hover { background: var(--color-navy-2); transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-outline:hover { border-color: var(--color-ink); }

.bg-dark .btn-outline {
  border-color: rgba(255,255,255,0.28);
  color: #fff;
}
.bg-dark .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

.btn-ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.18);
}
.btn-ghost:hover { background: rgba(255,255,255,0.16); }

.btn-block { width: 100%; }
.btn-lg { padding: 15px 32px; font-size: 1rem; }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 0 0 rgba(15,23,42,0);
  transition: box-shadow 0.25s var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  transition: padding 0.25s var(--ease);
}
.site-header.is-scrolled .header-inner { padding: 11px 0; }
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-ink);
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-navy), var(--color-teal));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.brand-logo {
  height: 40px;
  width: auto;
  display: block;
}
/* The source logo file has a flat white background (no transparency), so on
   the dark footer it needs a light card behind it rather than sitting
   directly on the dark background. */
.footer-logo-box {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: inline-flex;
  align-self: flex-start;
}
.footer-logo-box .brand-logo { height: 34px; }
.brand small {
  display: block;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: 1px;
}

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.main-nav a:hover { background: var(--color-bg-alt); color: var(--color-ink); }
.main-nav a.active { color: var(--color-ink); background: var(--color-bg-alt); font-weight: 600; }

.header-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: #fff;
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 960px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
    padding: 10px 20px 18px;
    box-shadow: var(--shadow-md);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px 10px; border-radius: 8px; }
  .nav-toggle { display: inline-flex; }
  .header-cta .btn span.long { display: none; }
}

/* ---- Hero ---- */
.hero {
  padding: 88px 0 80px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  color: #fff;
}
.hero .lede {
  font-size: 1.12rem;
  color: var(--color-text-on-dark-muted);
  margin-top: 18px;
  max-width: 540px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
  max-width: 480px;
}
.hero-stat .num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
}
.hero-stat .lbl {
  font-size: 0.8rem;
  color: var(--color-text-on-dark-muted);
  margin-top: 2px;
}

.hero-visual {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(233,129,58,0.16), rgba(39,83,214,0.14));
  border: 1px solid rgba(255,255,255,0.12);
  padding: 28px;
  isolation: isolate;
}
.hero-visual .glass-card {
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  padding: 18px;
  backdrop-filter: blur(6px);
}
.hero-visual .glass-card + .glass-card { margin-top: 14px; }
.mockrow { display: flex; align-items: center; gap: 12px; }
.mockrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-teal); flex-shrink: 0; }
.mockbar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.16); }

/* Soft decorative motion behind the hero visual: a slow-turning dashed ring
   and a couple of gently drifting glows — echoes the kind of subtle ambient
   movement a lot of consultancy sites use, without borrowing anyone's exact
   graphic. Purely decorative, so it's inert to assistive tech and backs off
   completely for reduced motion. */
.hero-orbit {
  position: absolute;
  inset: -12%;
  z-index: -1;
  border: 1.5px dashed rgba(233,129,58,0.35);
  border-radius: 50%;
  pointer-events: none;
}
.hero-glow {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(46px);
  pointer-events: none;
  z-index: -1;
}
.hero-glow.g1 { background: rgba(233,129,58,0.35); top: -40px; right: -30px; }
.hero-glow.g2 { background: rgba(39,83,214,0.4); bottom: -30px; left: -30px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-orbit { animation: hero-orbit-spin 46s linear infinite; }
  .hero-glow.g1 { animation: hero-drift 9s ease-in-out infinite; }
  .hero-glow.g2 { animation: hero-drift 11s ease-in-out infinite reverse; }
}
@keyframes hero-orbit-spin { to { transform: rotate(360deg); } }
@keyframes hero-drift {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-16px) scale(1.08); }
}

/* A quiet pulse ring on the hero's main call-to-action — draws the eye to
   the one button that matters most without animating every button on the
   page. */
.btn-pulse { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .btn-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--color-accent);
    animation: btn-pulse-ring 2.4s var(--ease) infinite;
    pointer-events: none;
  }
}
@keyframes btn-pulse-ring {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ---- Badge marquee ---- */
.marquee-wrap {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  overflow: hidden;
  padding: 18px 0;
}
.marquee-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: scroll-x 32s linear infinite;
}
.marquee-track span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.marquee-track span::before { content: "\2713"; color: var(--color-teal); font-weight: 800; }
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(var(--marquee-shift, -50%)); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---- Cards ---- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 30px;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }

.icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(233,129,58,0.16), rgba(39,83,214,0.14));
  color: var(--color-teal-dark);
  margin-bottom: 18px;
}
.icon-tile svg { width: 24px; height: 24px; }

.card h3 { font-size: 1.12rem; margin-bottom: 8px; }
.card p { color: var(--color-text-muted); font-size: 0.96rem; }

.card-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.card-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.card-list li svg { width: 15px; height: 15px; margin-top: 3px; color: var(--color-teal); flex-shrink: 0; }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-ink);
}
.card-link svg { width: 14px; height: 14px; transition: transform 0.15s var(--ease); }
.card:hover .card-link svg { transform: translateX(3px); }

/* ---- Numbered section labels ---- */
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ---- Product hero / feature split ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split.reverse .split-visual { order: 2; }
@media (max-width: 900px) { .split.reverse .split-visual { order: -1; } }

.app-frame {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.app-frame .app-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.app-frame .app-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border-dark); opacity: .5; }
.app-frame .app-bar-label { margin-left: auto; font-size: 0.76rem; font-weight: 600; color: var(--color-text-faint); }
.app-frame .app-body { padding: 22px; }
.app-frame .app-screenshot { width: 100%; height: auto; display: block; }
.screenshot-caption {
  margin-top: 14px;
  font-size: 0.84rem;
  color: var(--color-text-faint);
  text-align: center;
}
.screenshot-caption a { color: var(--color-teal-dark); font-weight: 600; }

/* Product-overview cards with a screenshot header */
.card-media {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid var(--color-border);
}

/* Homepage hero: real product screenshots in a small "window" card */
.hero-shot { padding: 0; overflow: hidden; }
.hero-shot-label {
  padding: 10px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.hero-shot img { width: 100%; height: 170px; object-fit: cover; object-position: top; display: block; }

.stat-strip {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.stat-chip {
  flex: 1;
  min-width: 110px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.stat-chip .n { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-ink); }
.stat-chip .l { font-size: 0.72rem; color: var(--color-text-faint); margin-top: 2px; }

.fake-table { border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.fake-row { display: flex; justify-content: space-between; padding: 11px 14px; font-size: 0.82rem; }
.fake-row:not(:last-child) { border-bottom: 1px solid var(--color-border); }
.fake-row .l { color: var(--color-text-muted); }
.fake-row .r { font-weight: 600; color: var(--color-ink); }
.fake-row .badge { font-size: 0.7rem; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill); }
.badge-green { background: rgba(39,83,214,0.14); color: var(--color-teal-dark); }
.badge-amber { background: rgba(233,129,58,0.18); color: var(--color-accent-dark); }

.feature-list { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.feature-row { display: flex; gap: 16px; }
.feature-row .icon-tile { margin-bottom: 0; flex-shrink: 0; }
.feature-row h4 { font-size: 1rem; margin-bottom: 4px; }
.feature-row p { font-size: 0.92rem; color: var(--color-text-muted); }

/* ---- Timeline / process ---- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }
.process-step {
  position: relative;
  padding: 26px 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
}
.process-step .step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--color-border-dark);
  opacity: 0.5;
}
.process-step h4 { margin-top: 10px; font-size: 1rem; }
.process-step p { margin-top: 6px; font-size: 0.88rem; color: var(--color-text-muted); }

/* ---- Pricing / engagement cards ---- */
.pricing-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.pricing-card.featured {
  border-color: var(--color-ink);
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
}
@media (max-width: 900px) { .pricing-card.featured { transform: none; } }
.pricing-card .badge-top {
  position: absolute;
  top: -13px;
  left: 30px;
  background: var(--color-accent);
  color: #1b1204;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.pricing-card .price {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  margin: 14px 0 4px;
}
.pricing-card .price small { font-size: 0.9rem; font-weight: 500; color: var(--color-text-faint); }
.pricing-card .desc { font-size: 0.88rem; color: var(--color-text-muted); margin-bottom: 20px; }
.pricing-card ul { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; flex: 1; }
.pricing-card li { display: flex; gap: 9px; font-size: 0.9rem; align-items: flex-start; }
.pricing-card li svg { width: 15px; height: 15px; color: var(--color-teal); margin-top: 3px; flex-shrink: 0; }

/* ---- Testimonials ---- */
.testi-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px;
}
.testi-card .stars { color: var(--color-accent); font-size: 0.85rem; letter-spacing: 2px; margin-bottom: 14px; }
.testi-card blockquote { font-size: 0.96rem; color: var(--color-text); }
.testi-foot { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.avatar-fallback {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-navy), var(--color-teal));
  color: #fff; font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}
.testi-foot .name { font-weight: 600; font-size: 0.9rem; }
.testi-foot .role { font-size: 0.8rem; color: var(--color-text-faint); }

/* ---- Team ---- */
.team-card { text-align: center; }
.team-card .avatar-fallback { width: 84px; height: 84px; font-size: 1.5rem; margin: 0 auto 16px; }
.team-card h3 { font-size: 1.02rem; }
.team-card .role { font-size: 0.85rem; color: var(--color-teal-dark); font-weight: 600; margin-top: 2px; }
.team-card p.bio { margin-top: 10px; font-size: 0.86rem; color: var(--color-text-muted); }

/* ---- CTA band ---- */
.cta-band {
  border-radius: var(--radius-lg);
  padding: 56px;
  background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-navy-2) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-band h2 { color: #fff; font-size: 1.7rem; max-width: 480px; }
.cta-band p { color: var(--color-text-on-dark-muted); margin-top: 10px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Forms ---- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.84rem; font-weight: 600; color: var(--color-text); }
.field label .opt { font-weight: 400; color: var(--color-text-faint); }
.field input, .field select, .field textarea {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text);
  font-size: 0.92rem;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(39,83,214,0.15);
}
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 0.8rem; color: var(--color-text-faint); margin-top: 14px; }
.form-status { font-size: 0.88rem; margin-top: 14px; display: none; padding: 12px 14px; border-radius: var(--radius-sm); }
.form-status.show { display: block; }
.form-status.ok { background: rgba(39,83,214,0.12); color: var(--color-teal-dark); }
.form-status.err { background: rgba(196,74,58,0.12); color: #a13c2b; }

/* ---- Contact info cards ---- */
.info-row { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--color-border); }
.info-row:last-child { border-bottom: none; }
.info-row .icon-tile { margin-bottom: 0; width: 42px; height: 42px; }
.info-row h4 { font-size: 0.92rem; margin-bottom: 3px; }
.info-row p { font-size: 0.9rem; color: var(--color-text-muted); }
.info-row a { color: var(--color-teal-dark); font-weight: 600; }

.confirm-flag {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  background: rgba(233,129,58,0.14);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

/* ---- Job cards ---- */
.job-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  flex-wrap: wrap;
}
.job-card h3 { font-size: 1rem; }
.job-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.job-meta span { font-size: 0.8rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 5px; }
.job-meta svg { width: 14px; height: 14px; color: var(--color-text-faint); }

/* ---- Breadcrumb / page header ---- */
.page-hero {
  padding: 60px 0 56px;
}
.page-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: #fff; }
.page-hero p.lede { color: var(--color-text-on-dark-muted); margin-top: 14px; max-width: 620px; font-size: 1.05rem; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--color-text-on-dark-muted); margin-bottom: 18px; }
.breadcrumb a:hover { color: #fff; }

/* ---- Footer ---- */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark-muted);
  padding: 72px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .brand { color: #fff; }
.footer-brand p { margin-top: 14px; font-size: 0.9rem; max-width: 280px; }
.footer-tagline { margin-top: 16px; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; }
.footer-col h5 { color: #fff; font-size: 0.85rem; font-weight: 700; margin-bottom: 16px; letter-spacing: 0.02em; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 0.88rem; transition: color 0.15s var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
}
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border-dark);
  display: flex; align-items: center; justify-content: center;
}
.social-row a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.social-row svg { width: 16px; height: 16px; }

/* ---- Utility ---- */
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
/* Content is always visible by default — this is deliberate. A
   scroll/opacity reveal effect here would hide real content whenever JS is
   slow, disabled, or a search crawler doesn't scroll, which works against
   the whole point of moving to real, indexable pages. So .reveal elements
   are only ever hidden once JS has confirmed it can reveal them again: see
   the .js-reveal rule below, which main.js opts into, and which always
   backs off for prefers-reduced-motion and carries its own timeout
   fallback so nothing can end up stuck invisible. */
.reveal, .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  html.js-reveal .reveal.in { opacity: 1; transform: none; }
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }