/* =========================================================
   Ascend Talent – main stylesheet (Indigo-blue theme)
   Edit the colour and font tokens in :root to retheme the site.
   ========================================================= */

:root {
  /* Backgrounds, from lightest to darkest */
  --bg-hero: #272757;      /* hero navy blue */
  --bg: #0b1849;           /* main page background */
  --bg-alt: #08123a;       /* alternate section background */
  --bg-deep: #050b26;      /* footer */
  --card: #122463;         /* card surface */
  --card-hover: #182e78;

  /* Accents */
  --violet: #7b5cfa;       /* primary buttons, highlights */
  --violet-light: #9d86ff;
  --violet-dark: #5a3be0;
  --cyan: #3fd6e0;         /* data lines, icons */
  --gold: #f5c04a;         /* summit flag, charts */

  /* Text */
  --text: #ffffff;
  --muted: #aebde8;
  --line: rgba(120, 160, 255, 0.2);

  /* Shape and layout */
  --radius-lg: 20px;
  --radius-sm: 12px;
  --max: 1200px;
  --glow: 0 20px 50px -18px rgba(123, 92, 250, 0.55);

  /* Fonts */
  --display: "Poppins", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
}

/* ---------- base ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}
h1,
h2,
h3 {
  font-family: var(--display);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 700;
}
h3 {
  font-size: 1.2rem;
  font-weight: 600;
}
p.lead {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 58ch;
}
.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--violet);
  padding: 8px 14px;
  border-radius: 8px;
  z-index: 100;
}
.skip:focus {
  left: 8px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}
.btn-violet {
  background: var(--violet);
  color: #fff;
  box-shadow: var(--glow);
}
.btn-violet:hover {
  background: var(--violet-light);
}
.btn-soft {
  background: rgba(123, 92, 250, 0.22);
  color: #fff;
}
.btn-soft:hover {
  background: rgba(123, 92, 250, 0.4);
}
.btn-white {
  background: #fff;
  color: var(--violet-dark);
}
.btn-white:hover {
  background: #efeaff;
}

/* small rounded label, as in the reference design */
.chip,
.pill {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(123, 92, 250, 0.25);
  color: var(--violet-light);
}

/* ---------- header / nav ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 33, 96, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
}
.brand-name span {
  color: var(--violet-light);
}
.menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.menu a {
  display: block;
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 9px 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s, background 0.2s;
}
.menu a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}
.menu a[aria-current="page"] {
  color: #fff;
}
.menu .btn {
  margin-left: 12px;
  padding: 10px 22px;
  color: #fff;
}
.menu .btn:hover {
  background: var(--violet-light);
}
.burger {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
}
.burger svg {
  margin: auto;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(60% 70% at 75% 40%, rgba(70, 120, 255, 0.28), transparent 70%),
    var(--bg-hero);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 32px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 150px;
}
.hero h1 {
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  font-weight: 700;
  max-width: 15ch;
}
.hero p.lead {
  margin: 22px 0 34px;
}
.paths {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero-note {
  margin-top: 30px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--cyan);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-note::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 5px rgba(63, 214, 224, 0.18);
}
.hero-art {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(10, 4, 40, 0.45));
}
/* the one moving element: data flowing along the circuit lines */
.hero-art .trace {
  stroke-dasharray: 10 8;
  animation: flow 1.6s linear infinite;
}
@keyframes flow {
  to {
    stroke-dashoffset: -36;
  }
}
.wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 110px;
}
.wave path {
  fill: var(--bg);
}

/* ---------- sectors ---------- */
.sectors .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.sectors ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 32px;
  list-style: none;
}
.sectors li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--muted);
}
.sectors li svg {
  width: 20px;
  height: 20px;
  color: var(--cyan);
}

/* ---------- sections ---------- */
section.block {
  padding: 100px 0;
}
section.block.tight {
  padding-bottom: 48px;
}
section.block.alt {
  background: var(--bg-alt);
}
.head {
  margin-bottom: 52px;
}
.head.center {
  text-align: center;
}
.head.center h2,
.head.center p.lead {
  margin-left: auto;
  margin-right: auto;
}
.head.center p.lead {
  margin-top: 14px;
}
.head.split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* card surface used across the page */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* ---------- practices ---------- */
.practices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1000px;
  margin: 0 auto;
}
.practice {
  padding: 42px;
  display: flex;
  flex-direction: column;
}
.practice .ico {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  background: rgba(63, 214, 224, 0.14);
  color: var(--cyan);
}
.practice h3 {
  font-size: 1.7rem;
  margin-bottom: 10px;
}
.practice > p {
  color: var(--muted);
}
.ticks {
  list-style: none;
  margin: 26px 0 34px;
  display: grid;
  gap: 12px;
}
.ticks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ticks svg {
  flex: none;
  margin-top: 4px;
  color: var(--cyan);
}
.practice .btn {
  margin-top: auto;
  align-self: flex-start;
}
/* highlighted card, like the "NOW" card in the reference */
.practice.featured {
  background: linear-gradient(160deg, var(--violet-light), var(--violet-dark));
  border-color: transparent;
  box-shadow: var(--glow);
}
.practice.featured > p {
  color: rgba(255, 255, 255, 0.85);
}
.practice.featured .ico {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.practice.featured .ticks svg {
  color: var(--gold);
}

/* ---------- specialisms ---------- */
.roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.role {
  padding: 30px 28px;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.role:hover {
  background: var(--card-hover);
  border-color: rgba(157, 134, 255, 0.45);
}
.role .chip {
  position: absolute;
  top: 26px;
  right: 24px;
}
.role svg {
  color: var(--cyan);
  margin-bottom: 18px;
}
.role h3 {
  margin-bottom: 6px;
}
.role p {
  color: var(--muted);
  font-size: 0.96rem;
}
.stack {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  align-items: center;
}
.stack b {
  width: 100%;
  text-align: center;
  font-family: var(--display);
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 6px;
}
.stack span {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
}

/* three pillars on the home page */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pillars .practice {
  padding: 36px 32px;
}
.pillars .practice h3 {
  font-size: 1.55rem;
}

/* ---------- process (a real sequence) ---------- */
.climb-panel {
  background: #071034;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px 44px 40px;
}
.climb {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: end;
}
.step .alt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(123, 92, 250, 0.25);
  color: var(--violet-light);
}
.step .bar {
  border-radius: 12px 12px 0 0;
  margin: 14px 0 20px;
  position: relative;
  background: linear-gradient(180deg, var(--violet), rgba(123, 92, 250, 0.15));
}
.step:nth-child(1) .bar { height: 60px; }
.step:nth-child(2) .bar { height: 110px; }
.step:nth-child(3) .bar { height: 160px; }
.step:nth-child(4) .bar {
  height: 210px;
  background: linear-gradient(180deg, var(--cyan), rgba(63, 214, 224, 0.12));
  box-shadow: 0 0 40px -10px rgba(63, 214, 224, 0.6);
}
.step:nth-child(4) .bar::after {
  content: "";
  position: absolute;
  top: -34px;
  right: 48px;
  width: 3px;
  height: 34px;
  background: #fff;
}
.step:nth-child(4) .bar::before {
  content: "";
  position: absolute;
  top: -34px;
  right: 22px;
  width: 26px;
  height: 17px;
  background: var(--gold);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.step h3 {
  margin-bottom: 6px;
}
.step p {
  color: var(--muted);
  font-size: 0.96rem;
}

/* ---------- why ---------- */
.why {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: center;
}
.why-art {
  background: radial-gradient(70% 70% at 50% 45%, rgba(70, 120, 255, 0.35), transparent 70%), var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}
.why-art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.why-rings { stroke: var(--cyan); }
.m-back { fill: var(--violet); }
.m-snow { fill: #ffffff; }
.m-flag { fill: var(--gold); }
.m-front { fill: var(--violet-dark); opacity: 0.6; }
.why-list {
  list-style: none;
  display: grid;
  gap: 28px;
  margin-top: 34px;
}
.why-list li {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 18px;
}
.why-list .dot {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(63, 214, 224, 0.14);
  display: grid;
  place-items: center;
  color: var(--cyan);
}
.why-list h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.why-list p {
  color: var(--muted);
}

/* ---------- insights ---------- */
.insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.post {
  text-decoration: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, background 0.2s;
}
.post:hover {
  border-color: rgba(157, 134, 255, 0.5);
  background: var(--card-hover);
}
.post .thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.post .thumb svg {
  width: 100%;
  height: 100%;
}
.thumb.t1 { background: linear-gradient(160deg, #1c3a94, #0e1f5a); }
.thumb.t2 { background: #071034; }
.thumb.t3 { background: linear-gradient(160deg, var(--violet-light), var(--violet-dark)); }
.t-grid { stroke: rgba(120, 160, 255, 0.2); }
.t-line { stroke: var(--cyan); }
.t-dot { fill: var(--cyan); }
.t-bars rect { fill: var(--gold); }
.t-node { stroke: var(--cyan); }
.t-hub { fill: var(--gold); }
.t-link { stroke: var(--violet-light); }
.t-ring { stroke: #fff; }
.t-face { fill: var(--violet-dark); }
.post-body {
  padding: 22px 24px 26px;
}
.post h3 {
  font-size: 1.1rem;
  margin-top: 12px;
}

/* ---------- call to action ---------- */
.cta-block {
  padding-top: 0;
}
.cta {
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(63, 214, 224, 0.35), transparent 60%),
    linear-gradient(135deg, var(--violet-light), var(--violet-dark));
  border-radius: var(--radius-lg);
  padding: 60px 64px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
  box-shadow: var(--glow);
}
.cta p {
  margin-top: 12px;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.88);
}
.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  justify-self: end;
}
.text-link {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}
.text-link:hover {
  border-color: #fff;
}

/* ---------- footer ---------- */
footer {
  background: var(--bg-deep);
  color: var(--muted);
  padding: 76px 0 34px;
}
.foot {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}
.foot .brand {
  color: #fff;
  margin-bottom: 16px;
}
.foot-about {
  max-width: 34ch;
}
.foot h4 {
  font-family: var(--display);
  font-weight: 600;
  color: #fff;
  font-size: 1rem;
  margin-bottom: 14px;
}
.foot ul {
  list-style: none;
  display: grid;
  gap: 9px;
}
.foot a {
  text-decoration: none;
}
.foot a:hover {
  color: #fff;
  text-decoration: underline;
}
.legal {
  border-top: 1px solid var(--line);
  margin-top: 54px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.9rem;
}


/* ---------- tablet ---------- */
@media (max-width: 1020px) {

  .hero-grid {
    grid-template-columns: 1fr;
    padding-top: 44px;
    padding-bottom: 120px;
  }
  .hero-art {
    max-width: 600px;
    margin: 0 auto;
  }
  .practices,
  .pillars,
  .why,
  .cta {
    grid-template-columns: 1fr;
  }
  .roles,
  .insights {
    grid-template-columns: 1fr 1fr;
  }
  .climb {
    grid-template-columns: 1fr 1fr;
    row-gap: 44px;
  }
  .cta-actions {
    justify-self: start;
  }
  .foot {
    grid-template-columns: 1fr 1fr;
  }
  .why-art {
    max-width: 460px;
  }
}

/* ---------- mobile ---------- */
@media (max-width: 620px) {
  body {
    font-size: 16px;
  }
  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  section.block {
    padding: 72px 0;
  }
  .practice {
    padding: 30px 24px;
  }
  .roles,
  .insights,
  .foot,
  .climb {
    grid-template-columns: 1fr;
  }
  .climb-panel {
    padding: 32px 22px;
  }
  .step .bar {
    height: 12px !important;
    width: var(--w);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(123, 92, 250, 0.2), var(--violet));
  }
  .step:nth-child(1) { --w: 25%; }
  .step:nth-child(2) { --w: 50%; }
  .step:nth-child(3) { --w: 75%; }
  .step:nth-child(4) { --w: 100%; }
  .step:nth-child(4) .bar {
    background: linear-gradient(90deg, rgba(63, 214, 224, 0.2), var(--cyan));
  }
  .step:nth-child(4) .bar::before,
  .step:nth-child(4) .bar::after {
    display: none;
  }
  .cta {
    padding: 40px 24px;
  }
  .paths .btn {
    flex: 1 1 100%;
  }
  .wave {
    height: 60px;
  }
}

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

/* =========================================================
   MULTI-PAGE COMPONENTS
   ========================================================= */

/* ---------- dropdown menus ---------- */
.menu .has-sub {
  position: relative;
}
.menu .has-sub > a {
  display: flex;
  align-items: center;
  gap: 6px;
}
.menu .has-sub > a svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}
.sub {
  list-style: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 250px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.sub::before {
  content: "";
  position: absolute;
  inset: -10px 0 auto 0;
  height: 10px;
}
.menu .has-sub:hover .sub,
.menu .has-sub:focus-within .sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.menu .sub a {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.92rem;
}
.menu .sub a small {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--muted);
}
.menu a.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

/* ---------- inner page hero ---------- */
.page-hero {
  position: relative;
  background:
    radial-gradient(55% 80% at 85% 30%, rgba(70, 120, 255, 0.3), transparent 70%),
    var(--bg-hero);
  overflow: hidden;
}
.page-hero .wrap {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 40px;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 130px;
}
.page-hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.5rem);
  font-weight: 700;
  max-width: 18ch;
  margin-top: 16px;
}
.page-hero p.lead {
  margin-top: 20px;
}
.page-hero .paths {
  margin-top: 30px;
}
.crumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--muted);
}
.crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: 0.5;
}
.crumbs a {
  text-decoration: none;
}
.crumbs a:hover {
  color: #fff;
  text-decoration: underline;
}
.orbit {
  width: 100%;
  max-width: 340px;
  justify-self: end;
}
.orbit .o-ring { fill: none; stroke: var(--cyan); }
.orbit .o-core { fill: var(--violet); }
.orbit .o-node { fill: var(--gold); }
.orbit .o-dot { fill: var(--cyan); }
.orbit .o-icon { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.orbit .o-spin {
  transform-origin: 170px 170px;
  animation: spin 40s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- generic layouts ---------- */
.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: start;
}
.split h2 {
  margin-bottom: 18px;
}
.split p + p {
  margin-top: 16px;
}
.split .muted,
.muted {
  color: var(--muted);
}
.panel {
  padding: 36px;
}
.panel h3 {
  margin-bottom: 14px;
}
.panel .ticks {
  margin: 0;
}
.panel .btn {
  margin-top: 28px;
}
a.card {
  text-decoration: none;
  display: block;
}
.role .more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--violet-light);
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* numbered flow – only used for genuine sequences */
.flow {
  list-style: none;
  counter-reset: flow;
  display: grid;
  gap: 18px;
  max-width: 860px;
  margin: 0 auto;
}
.flow li {
  counter-increment: flow;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px 28px;
}
.flow li::before {
  content: counter(flow, decimal-leading-zero);
  font-family: var(--display);
  font-weight: 700;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(123, 92, 250, 0.25);
  color: var(--violet-light);
}
.flow li:last-child::before {
  background: rgba(63, 214, 224, 0.2);
  color: var(--cyan);
}
.flow h3 {
  margin-bottom: 4px;
}
.flow p {
  color: var(--muted);
}

/* FAQ */
.faq {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.faq details {
  padding: 0;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 26px;
  font-family: var(--display);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--cyan);
  transition: transform 0.2s;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  padding: 0 26px 24px;
  color: var(--muted);
}

/* quote / callout */
.callout {
  border-left: 4px solid var(--cyan);
  padding: 22px 28px;
  background: var(--card);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
}

/* values */
.value {
  padding: 30px;
}
.value h3 {
  margin: 14px 0 6px;
}
.value p {
  color: var(--muted);
  font-size: 0.96rem;
}
.ico-sm,
.contact-list .ci {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(63, 214, 224, 0.14);
  color: var(--cyan);
}

/* ---------- article / prose ---------- */
.prose {
  max-width: 72ch;
  margin: 0 auto;
  font-size: 1.06rem;
}
.prose > * + * {
  margin-top: 1.1em;
}
.prose h2 {
  font-size: 1.7rem;
  margin-top: 2em;
}
.prose h3 {
  margin-top: 1.6em;
}
.prose p,
.prose li {
  color: #dbe3fa;
}
.prose ul,
.prose ol {
  padding-left: 1.3em;
  display: grid;
  gap: 8px;
}
.prose a {
  color: var(--cyan);
}
.prose strong {
  color: #fff;
}
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
}
.prose th,
.prose td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.prose th {
  font-family: var(--display);
  font-weight: 600;
  background: var(--card);
}
.prose tr:last-child td {
  border-bottom: 0;
}
.prose td:first-child {
  white-space: normal;
}
.prose figcaption,
.small-note {
  font-size: 0.88rem;
  color: var(--muted);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin-top: 22px;
  color: var(--muted);
  font-size: 0.92rem;
}
.legal-doc h2 {
  font-size: 1.35rem;
}

/* ---------- forms ---------- */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.form .full {
  grid-column: 1 / -1;
}
.field label {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 7px;
}
.field label span {
  color: var(--muted);
  font-weight: 400;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: #fff;
  background: #081236;
  border: 1px solid rgba(120, 160, 255, 0.3);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea {
  min-height: 150px;
  resize: vertical;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233fd6e0' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(63, 214, 224, 0.2);
}
.field input::placeholder,
.field textarea::placeholder {
  color: #7d8bb8;
}
.form-status {
  grid-column: 1 / -1;
  font-size: 0.95rem;
  color: var(--cyan);
  min-height: 1.4em;
}
.form-status.error {
  color: #ff9f9f;
}
.contact-list {
  list-style: none;
  display: grid;
  gap: 22px;
}
.contact-list li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
}
.contact-list h3 {
  font-size: 1rem;
  margin-bottom: 2px;
}
.contact-list a {
  color: var(--cyan);
}

/* ---------- 404 ---------- */
.notfound {
  text-align: center;
  padding: 120px 0 140px;
}
.notfound .big {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(5rem, 16vw, 9rem);
  line-height: 1;
  background: linear-gradient(135deg, var(--violet-light), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.notfound p {
  color: var(--muted);
  margin: 18px auto 30px;
  max-width: 46ch;
}

/* ---------- multi-page responsive ---------- */
@media (max-width: 1020px) {

  .page-hero .wrap,
  .split {
    grid-template-columns: 1fr;
  }
  .orbit {
    display: none;
  }
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .grid-2,
  .grid-4,
  .form {
    grid-template-columns: 1fr;
  }
  .page-hero .wrap {
    padding-bottom: 100px;
  }
  .flow li {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px;
  }
}

/* ---------- navigation: compact on mid-size screens ---------- */
@media (max-width: 1360px) and (min-width: 1201px) {
  .menu {
    gap: 0;
  }
  .menu a {
    padding: 9px 11px;
    font-size: 0.88rem;
  }
  .menu .btn {
    margin-left: 8px;
    padding: 10px 18px;
  }
}

/* ---------- navigation: hamburger menu below 1200px ---------- */
@media (max-width: 1200px) {
  .menu {
    position: fixed;
    inset: 76px 0 auto 0;
    background: var(--bg-hero);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 20px 28px;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }
  .menu.open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .menu a {
    padding: 14px 16px;
    font-size: 1.02rem;
  }
  .menu .btn {
    margin: 10px 0 0;
  }
  .burger {
    display: grid;
    margin-left: auto;
  }
  .sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 6px 14px;
    min-width: 0;
  }
  .menu .sub a small {
    display: none;
  }
  .menu {
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
}

/* =========================================================
   THEME: NAVY + ORANGE ON WHITE
   Dark navy header and heroes with a blue glow, white main sections,
   midnight-blue alternate sections with straight edges, and the hero
   wave shape repeated at the top of the footer. Orange links and accents.
   Delete this block to return to the previous all-dark theme.
   ========================================================= */

:root {
  /* core palette */
  --navy-deep: #060a1c;     /* header, hero, footer */
  --navy: #0c1430;          /* alternate sections */
  --paper: #ffffff;         /* main background */
  --paper-soft: #f4f6fb;    /* cards on white */
  --ink: #0c1430;           /* headings and body text on white */
  --ink-soft: #3d4763;      /* paragraphs on white */
  --orange: #f2600c;        /* buttons, highlights */
  --orange-light: #ff8a3d;  /* accents on dark backgrounds */
  --orange-dark: #c2410c;   /* links and small text on white */
  --blue-glow: 47, 95, 255; /* rgb for the hero glow */

  /* remap the existing tokens for light sections */
  --bg: var(--paper);
  --bg-hero: var(--navy-deep);
  --bg-alt: var(--navy);
  --bg-deep: var(--navy-deep);
  --card: var(--paper-soft);
  --card-hover: #eaeef7;
  --text: var(--ink);
  --muted: var(--ink-soft);
  --line: rgba(12, 20, 48, 0.1);
  --violet: var(--orange);
  --violet-light: #ff7d33;
  --violet-dark: #d94f06;
  --cyan: #ea580c;          /* icons on white */
  --accent-text: var(--orange-dark);
  --accent-soft: rgba(242, 96, 12, 0.1);
  --glow: 0 20px 50px -20px rgba(242, 96, 12, 0.55);
}

/* dark areas: swap the tokens so everything inside reads light-on-dark */
header.site,
.hero,
.page-hero,
section.block.alt,
.climb-panel,
footer,
.cta {
  --text: #ffffff;
  --muted: #b9c1da;
  --card: rgba(255, 255, 255, 0.05);
  --card-hover: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.12);
  --cyan: var(--orange-light);
  --accent-text: #ffa366;
  --accent-soft: rgba(255, 138, 61, 0.16);
  color: var(--text);
}

body {
  background: var(--paper);
  color: var(--ink);
}

/* ---------- header ---------- */
header.site {
  background: rgba(6, 10, 28, 0.96);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.brand-name span {
  color: var(--orange-light);
}
#g-violet stop:first-child { stop-color: #ff9a4d; }
#g-violet stop:last-child { stop-color: #e2500a; }
.sub {
  background: #0d1533;
}
@media (max-width: 1200px) {
  .menu {
    background: var(--navy-deep);
  }
}

/* ---------- heroes: deep navy with a blue horizon glow ---------- */
.hero,
.page-hero {
  background:
    radial-gradient(70% 55% at 50% 108%, rgba(var(--blue-glow), 0.65), transparent 70%),
    radial-gradient(35% 45% at 82% 28%, rgba(242, 96, 12, 0.14), transparent 70%),
    var(--navy-deep);
}
.hero-note {
  color: var(--orange-light);
}
.hero-note::before {
  background: var(--orange-light);
  box-shadow: 0 0 0 5px rgba(255, 138, 61, 0.2);
}
/* recolour the hero illustration's cyan details to orange */
.hero-art .trace { stroke: var(--orange-light); }
.hero-art [fill="#3FD6E0"] { fill: var(--orange-light); }
.hero-art [fill="#1E8C9A"] { fill: #1d3c8f; }
.wave path {
  fill: var(--paper);
}






/* ---------- buttons ---------- */
.btn-violet {
  background: var(--orange);
  color: #fff;
}
.btn-violet:hover {
  background: #ff7a2e;
}
.btn-soft {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.btn-soft:hover {
  background: rgba(242, 96, 12, 0.18);
}
header.site .btn-soft,
.hero .btn-soft,
.page-hero .btn-soft,
section.block.alt .btn-soft {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
header.site .btn-soft:hover,
.hero .btn-soft:hover,
.page-hero .btn-soft:hover,
section.block.alt .btn-soft:hover {
  background: rgba(255, 255, 255, 0.18);
}
.btn-white {
  background: #fff;
  color: var(--orange-dark);
}
.btn-white:hover {
  background: #fff1e8;
}

/* ---------- chips, links, small accents ---------- */
.chip,
.pill {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.role .more,
.contact-list a,
.prose a,
.form-status {
  color: var(--accent-text);
}
.panel a[style*="--cyan"],
.small-note a[style*="--cyan"] {
  color: var(--accent-text) !important;
}
:focus-visible {
  outline-color: var(--orange);
}

/* ---------- cards ---------- */
.card {
  box-shadow: 0 1px 2px rgba(12, 20, 48, 0.04);
}
section.block.alt .card,
.hero .card,
.page-hero .card {
  box-shadow: none;
}
.role:hover,
.post:hover {
  border-color: rgba(242, 96, 12, 0.45);
}
.practice .ico,
.why-list .dot,
.ico-sm,
.contact-list .ci {
  background: var(--accent-soft);
  color: var(--cyan);
}
.practice.featured {
  background: linear-gradient(160deg, #ff8a3d, #d94f06);
  color: #fff;
  box-shadow: var(--glow);
}
.practice.featured h3 {
  color: #fff;
}
.practice.featured .ticks svg {
  color: #fff;
}

/* ---------- process steps ---------- */
.climb-panel {
  background:
    radial-gradient(60% 60% at 80% 100%, rgba(242, 96, 12, 0.22), transparent 70%),
    var(--navy);
  border-color: transparent;
}
.step .alt {
  background: rgba(255, 138, 61, 0.16);
  color: #ffa366;
}
.step .bar {
  background: linear-gradient(180deg, #4f7bff, rgba(79, 123, 255, 0.12));
}
.step:nth-child(4) .bar {
  background: linear-gradient(180deg, var(--orange-light), rgba(255, 138, 61, 0.12));
  box-shadow: 0 0 40px -10px rgba(255, 138, 61, 0.7);
}
.flow li::before {
  background: rgba(79, 123, 255, 0.12);
  color: #2f5fff;
}
.flow li:last-child::before {
  background: var(--accent-soft);
  color: var(--accent-text);
}
section.block.alt .flow li::before {
  background: rgba(79, 123, 255, 0.2);
  color: #9db4ff;
}
section.block.alt .flow li:last-child::before {
  background: rgba(255, 138, 61, 0.18);
  color: #ffa366;
}
.faq summary::after {
  color: var(--cyan);
}
@media (max-width: 620px) {
  .step .bar {
    background: linear-gradient(90deg, rgba(79, 123, 255, 0.2), #4f7bff);
  }
  .step:nth-child(4) .bar {
    background: linear-gradient(90deg, rgba(255, 138, 61, 0.2), var(--orange-light));
  }
}

/* ---------- illustrations ---------- */
.why-art {
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(242, 96, 12, 0.45), transparent 70%),
    #0a1128;
  border-color: rgba(255, 255, 255, 0.08);
}
.why-rings { stroke: var(--orange-light); }
.m-back { fill: #2f5fff; }
.m-front { fill: #1b2f7a; opacity: 0.85; }
.orbit .o-ring { stroke: var(--orange-light); }
.orbit .o-core { fill: var(--orange); }
.orbit .o-dot { fill: #6f93ff; }
.thumb.t1 { background: linear-gradient(160deg, #13204d, #060a1c); }
.thumb.t2 { background: #0a1128; }
.thumb.t3 { background: linear-gradient(160deg, #ff8a3d, #d94f06); }
.thumb.t4 { background: linear-gradient(160deg, #1b2f7a, #0a1128); }
.t-grid { stroke: rgba(255, 255, 255, 0.12); }
.t-line,
.t-node { stroke: var(--orange-light); }
.t-dot { fill: var(--orange-light); }
.t-link { stroke: #6f93ff; }
.t-face { fill: #c2410c; }
.notfound .big {
  background: linear-gradient(135deg, var(--orange), #2f5fff);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- call to action ---------- */
.cta {
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(var(--blue-glow), 0.45), transparent 60%),
    linear-gradient(135deg, #ff8a3d, #d94f06);
}
.cta h2 {
  color: #fff;
}
.text-link {
  color: #fff;
}

/* ---------- article text ---------- */
.prose p,
.prose li {
  color: var(--ink-soft);
}
.prose strong {
  color: var(--ink);
}
.prose th {
  background: var(--paper-soft);
}
.callout {
  background: var(--paper-soft);
  border-left-color: var(--orange);
  color: var(--ink);
}
section.block.alt .callout {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* ---------- forms on white ---------- */
.field input,
.field select,
.field textarea {
  color: var(--ink);
  background-color: #fff;
  border: 1px solid rgba(12, 20, 48, 0.18);
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(242, 96, 12, 0.18);
}
.field input::placeholder,
.field textarea::placeholder {
  color: #8a93ab;
}
.form-status.error {
  color: #b42318;
}

/* =========================================================
   SECTION EDGES
   Alternate sections: solid midnight blue, straight edges.
   Header (hero) and footer: wave shape.
   ========================================================= */
:root {
  --midnight: #141c4f;  /* alternate section colour */
  --wave-h: 110px;      /* footer wave height, same as the hero wave */
}

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

/* footer: solid navy with the hero's wave (flipped) along its top */
footer {
  position: relative;
  background: var(--navy-deep);
  padding-top: calc(76px + var(--wave-h));
}
footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: var(--wave-h);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,70 C180,20 330,20 520,55 C720,92 860,110 1060,72 C1220,42 1330,40 1440,58 L1440,120 L0,120 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: scale(-1, -1);
  pointer-events: none;
}
footer .brand {
  color: #fff;
}
/* page ends on a blue section: straight edge into the footer, no wave */
main:has(> section.block.alt:last-child) + footer {
  padding-top: 76px;
}
main:has(> section.block.alt:last-child) + footer::before {
  display: none;
}

@media (max-width: 620px) {
  :root {
    --wave-h: 60px;
  }
}

/* =========================================================
   BLUE ECLIPSE PALETTE
   #0F0E47  deep eclipse   header, hero, footer, dark panels
   #272757  eclipse        alternate sections
   #505081  dusk           secondary accents on white, illustrations
   #8686AC  haze           soft accents, borders and glows on dark
   Orange stays as the accent: it is the complement of this
   blue-violet range, so it gives the strongest focal contrast.
   Text pairings meet WCAG AA (most AAA):
     #0F0E47 on white 17.9:1   #45456E on white 9.0:1
     #FFFFFF on #272757 13.9:1 #C6C6DE on #272757 8.3:1
     #FFA366 on #272757 7.1:1  #C2410C on white 5.2:1
     white on #CF4807 4.6:1
   ========================================================= */
:root {
  --eclipse-deep: #0f0e47;
  --eclipse: #272757;
  --dusk: #505081;
  --haze: #8686ac;

  --navy-deep: var(--eclipse-deep);
  --navy: var(--eclipse);
  --midnight: var(--eclipse);
  --bg-hero: var(--eclipse-deep);
  --bg-alt: var(--eclipse);
  --bg-deep: var(--eclipse-deep);

  /* light sections */
  --ink: #0f0e47;
  --ink-soft: #45456e;
  --paper-soft: #f3f3f8;       /* haze at ~10% on white */
  --card-hover: #eaeaf3;
  --line: rgba(39, 39, 87, 0.12);

  /* orange: one deeper step for buttons so white text passes AA */
  --orange: #cf4807;
  --violet: #cf4807;
  --violet-light: #e5560b;
  --violet-dark: #b23c04;
  --blue-glow: 134, 134, 172;  /* haze as rgb */
}

/* dark areas take tints from the palette instead of neutral white */
header.site,
.hero,
.page-hero,
section.block.alt,
.climb-panel,
footer,
.cta {
  --muted: #c6c6de;
  --card: rgba(134, 134, 172, 0.12);
  --card-hover: rgba(134, 134, 172, 0.2);
  --line: rgba(134, 134, 172, 0.28);
}

/* ---------- header ---------- */
header.site {
  background: rgba(15, 14, 71, 0.96);
  border-bottom-color: rgba(134, 134, 172, 0.2);
}
.sub {
  background: #1b1a55;
  border-color: rgba(134, 134, 172, 0.3);
}

/* ---------- heroes: deep eclipse with a dusk-to-haze horizon ---------- */
.hero,
.page-hero {
  background:
    radial-gradient(70% 55% at 50% 108%, rgba(80, 80, 129, 0.95), transparent 70%),
    radial-gradient(50% 35% at 50% 100%, rgba(134, 134, 172, 0.35), transparent 70%),
    radial-gradient(35% 45% at 82% 28%, rgba(242, 96, 12, 0.14), transparent 70%),
    var(--eclipse-deep);
}
/* hero illustration: retint the blue parts to the palette */
.hero-art [stroke="#5B8CFF"] { stroke: var(--haze); }
.hero-art [fill="#24438f"] { fill: var(--dusk); }
.hero-art [fill="#1a3272"] { fill: #3a3a6c; }
.hero-art [fill="#122463"] { fill: var(--eclipse); }
.hero-art [fill="#1E8C9A"] { fill: var(--dusk); }

/* ---------- alternate sections ---------- */
section.block.alt {
  background: var(--eclipse);
}

/* ---------- footer ---------- */
footer {
  background: var(--eclipse-deep);
}

/* ---------- buttons ---------- */
.btn-violet {
  background: var(--orange);
}
.btn-violet:hover {
  background: #b23c04;
}
.btn-soft:hover {
  background: rgba(207, 72, 7, 0.16);
}
header.site .btn-soft,
.hero .btn-soft,
.page-hero .btn-soft,
section.block.alt .btn-soft {
  background: rgba(134, 134, 172, 0.2);
}
header.site .btn-soft:hover,
.hero .btn-soft:hover,
.page-hero .btn-soft:hover,
section.block.alt .btn-soft:hover {
  background: rgba(134, 134, 172, 0.32);
}

/* ---------- cards ---------- */
.card {
  box-shadow: 0 1px 2px rgba(15, 14, 71, 0.05);
}
.practice.featured,
.cta {
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(39, 39, 87, 0.45), transparent 60%),
    linear-gradient(150deg, #e5560b, #b23c04);
}
.practice.featured {
  box-shadow: 0 20px 50px -20px rgba(207, 72, 7, 0.55);
}

/* ---------- process ---------- */
.climb-panel {
  background:
    radial-gradient(60% 60% at 85% 100%, rgba(242, 96, 12, 0.2), transparent 70%),
    var(--eclipse-deep);
}
.step .bar {
  background: linear-gradient(180deg, var(--haze), rgba(134, 134, 172, 0.1));
}
.flow li::before {
  background: rgba(80, 80, 129, 0.12);
  color: var(--dusk);
}
section.block.alt .flow li::before {
  background: rgba(134, 134, 172, 0.22);
  color: #d6d6ea;
}
@media (max-width: 620px) {
  .step .bar {
    background: linear-gradient(90deg, rgba(134, 134, 172, 0.2), var(--haze));
  }
}

/* ---------- illustrations ---------- */
.why-art {
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(242, 96, 12, 0.35), transparent 70%),
    var(--eclipse-deep);
  border-color: rgba(134, 134, 172, 0.2);
}
.m-back { fill: var(--dusk); }
.m-front { fill: var(--eclipse); opacity: 1; }
.orbit .o-dot { fill: var(--haze); }
.thumb.t1 { background: linear-gradient(160deg, var(--eclipse), var(--eclipse-deep)); }
.thumb.t2 { background: var(--eclipse-deep); }
.thumb.t3 { background: linear-gradient(160deg, #e5560b, #b23c04); }
.thumb.t4 { background: linear-gradient(160deg, var(--dusk), var(--eclipse-deep)); }
.t-grid { stroke: rgba(134, 134, 172, 0.25); }
.t-link { stroke: var(--haze); }
.t-face { fill: var(--eclipse-deep); }
.notfound .big {
  background: linear-gradient(135deg, var(--orange), var(--dusk));
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- forms ---------- */
.field input,
.field select,
.field textarea {
  border-color: rgba(39, 39, 87, 0.22);
}
.field input::placeholder,
.field textarea::placeholder {
  color: #7a7aa0;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(207, 72, 7, 0.18);
}

/* =========================================================
   TYPOGRAPHY
   Modular scale, ratio 1.25 (major third), base 14px:
     0.8  ·  0.875  ·  1  ·  1.125  ·  1.25  ·  1.563  ·  1.953  ·  2.441  ·  3.052 rem
   Body copy: 14px / 1.5, lines capped near 65 characters.
   Headings: tighter leading and slight negative tracking,
   which large Poppins needs to look even.
   ========================================================= */
:root {
  --fs-xs: 0.8rem;      /* chips, labels */
  --fs-sm: 0.875rem;    /* nav, buttons, notes, card text */
  --fs-base: 1rem;      /* body */
  --fs-md: 1.125rem;    /* lead paragraphs, card titles */
  --fs-lg: 1.25rem;     /* h3 */
  --fs-xl: 1.563rem;    /* article h2, large card titles */
  --fs-2xl: 1.953rem;   /* section h2 */
  --fs-3xl: 2.441rem;   /* inner-page h1 */
  --fs-4xl: 3.052rem;   /* home hero h1 */
}

/* base size is fixed at 14px so browser text-size settings don't enlarge the
   whole layout; every rem value below scales from it */
html {
  font-size: 14px;
}
body {
  font-size: var(--fs-base);   /* 14px */
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3 {
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

/* headings */
.hero h1 {
  font-size: clamp(2.25rem, 4.2vw, var(--fs-4xl));
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 16ch;
}
.page-hero h1 {
  font-size: clamp(1.9rem, 3.4vw, var(--fs-3xl));
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
h2 {
  font-size: clamp(1.6rem, 2.6vw, var(--fs-2xl));
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.018em;
}
h3 {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.practice h3,
.pillars .practice h3 {
  font-size: var(--fs-xl);
}
.role h3,
.value h3,
.flow h3,
.why-list h3,
.post h3,
.step h3,
.panel h3,
.contact-list h3 {
  font-size: var(--fs-md);
}
.contact-list h3 {
  font-size: var(--fs-base);
}

/* lead and body text */
p.lead {
  font-size: var(--fs-md);
  line-height: 1.6;
  max-width: 56ch;
}
.head.center p.lead {
  max-width: 60ch;
}
.role p,
.value p,
.flow p,
.step p,
.why-list p,
.faq details p,
.post .muted {
  font-size: 0.9375rem; /* 15px for compact card copy */
  line-height: 1.6;
}
.split p,
.practice > p,
.panel .muted {
  max-width: 62ch;
}
.ticks li {
  font-size: 0.9375rem;
}

/* navigation, buttons, labels */
.brand {
  font-size: 1.2rem;
}
.menu a {
  font-size: 0.9375rem;   /* ~13px */
}
.menu .sub a {
  font-size: 0.9375rem;
}
.btn {
  font-size: 0.9375rem;
  padding: 12px 24px;
  letter-spacing: 0.005em;
}
.chip,
.pill {
  font-size: 0.8125rem;   /* ~11.5px */
  letter-spacing: 0.01em;
}
.step .alt {
  font-size: var(--fs-xs);
}
.hero-note,
.sectors li {
  font-size: var(--fs-sm);
}
.small-note,
.prose figcaption,
.article-meta,
.crumbs,
.legal {
  font-size: 0.875rem;    /* ~12px */
}
.faq summary {
  font-size: var(--fs-base);
}
.field label {
  font-size: var(--fs-sm);
}
.field input,
.field select,
.field textarea {
  font-size: 0.9375rem;
}
.stack span {
  font-size: var(--fs-sm);
}

/* articles: slightly larger reading size, ~68 characters per line */
.prose {
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 68ch;
}
.prose h2 {
  font-size: var(--fs-xl);
  margin-top: 2.2em;
}
.prose h3 {
  font-size: var(--fs-lg);
}
.callout {
  font-size: var(--fs-md);
  line-height: 1.55;
}
.legal-doc h2 {
  font-size: var(--fs-lg);
}

/* footer */
footer {
  font-size: 0.9375rem;
}
.foot h4 {
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
}

/* 404 heading is set inline; keep it on the scale */
.notfound h1 {
  font-size: var(--fs-2xl) !important;
}

/* phones */
@media (max-width: 620px) {
  body {
    font-size: 1rem;
  }
  .hero h1 {
    font-size: 2.25rem;
  }
  .page-hero h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.65rem;
  }
  .practice h3,
  .pillars .practice h3 {
    font-size: var(--fs-lg);
  }
  p.lead {
    font-size: 1.0625rem;
  }
  .prose {
    font-size: 1.0625rem;
  }
}

/* =========================================================
   LOGO: ASCEND WORDMARK
   Folded-ribbon "A" mark + bold uppercase wordmark.
   ========================================================= */
.brand {
  gap: 10px;
}
.brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}
header.site .brand-name,
footer .brand-name {
  color: #ffffff;
}

/* =========================================================
   WORDMARK
   Unbounded Bold (Google Fonts), set in lowercase like the
   brand logo, with a small orange "peak" after the d to suggest
   the climb in "ascend". The peak is decorative (CSS only).
   ========================================================= */
.brand-name {
  font-family: "Unbounded", var(--display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: lowercase;
  color: #ffffff;
  display: inline-flex;
  align-items: flex-start;
}
.brand-name::after {
  content: "";
  flex-shrink: 0;
  width: 0;
  height: 0;
  margin: 0.02em 0 0 0.14em;
  border-left: 0.2em solid transparent;
  border-right: 0.2em solid transparent;
  border-bottom: 0.32em solid var(--orange-light, #ff8a3d);
}

/* =========================================================
   HEADING SIZE MULTIPLIERS
   Home hero h1 = 1.5x, every h2 and h3 = 1.5x the typography scale.
   Change the three numbers below to tune them.
   ========================================================= */
:root {
  --h1-x: 1.5;
  --h2-x: 1.5;
  --h3-x: 1.5;
}

/* home hero h1 */
.hero h1 {
  font-size: clamp(calc(2.25rem * var(--h1-x)), calc(4.2vw * var(--h1-x)), calc(var(--fs-4xl) * var(--h1-x)));
  max-width: 14ch;
}

/* h2 */
h2 {
  font-size: clamp(calc(1.6rem * var(--h2-x)), calc(2.6vw * var(--h2-x)), calc(var(--fs-2xl) * var(--h2-x)));
}
.prose h2 {
  font-size: calc(var(--fs-xl) * var(--h2-x));
}
.legal-doc h2 {
  font-size: calc(var(--fs-lg) * var(--h2-x));
}

/* h3 */
h3,
.prose h3 {
  font-size: calc(var(--fs-lg) * var(--h3-x));
}
.practice h3,
.pillars .practice h3 {
  font-size: calc(var(--fs-xl) * var(--h3-x));
}
.role h3,
.value h3,
.flow h3,
.why-list h3,
.post h3,
.step h3,
.panel h3 {
  font-size: calc(var(--fs-md) * var(--h3-x));
}
.contact-list h3 {
  font-size: calc(var(--fs-base) * var(--h3-x));
}

/* phones: same multipliers, applied to the smaller phone sizes */
@media (max-width: 620px) {
  .hero h1 {
    font-size: calc(2.25rem * var(--h1-x));
  }
  h2 {
    font-size: calc(1.65rem * var(--h2-x));
  }
  .practice h3,
  .pillars .practice h3 {
    font-size: calc(var(--fs-lg) * var(--h3-x));
  }
}

/* =========================================================
   SOLID ORANGE BUTTONS AND TICKS ON LIGHT BACKGROUNDS
   Secondary buttons and list ticks on white / light cards use
   white on dark orange (#CF4807, 4.6:1 contrast).
   Dark sections and the orange card keep their own styles.
   ========================================================= */
.btn-soft {
  background: var(--orange);
  color: #ffffff;
}
.btn-soft:hover {
  background: #b23c04;
  color: #ffffff;
}

.ticks {
  --tick-bg: var(--orange);
  --tick-bg-opacity: 1;
  --tick-fg: #ffffff;
}
.ticks svg {
  color: var(--orange);
}

/* keep the previous look where the background is dark or orange */
section.block.alt .ticks,
.hero .ticks,
.page-hero .ticks,
.climb-panel .ticks {
  --tick-bg: currentColor;
  --tick-bg-opacity: 0.18;
  --tick-fg: currentColor;
}
.practice.featured .ticks {
  --tick-bg: #ffffff;
  --tick-bg-opacity: 1;
  --tick-fg: #b23c04;
}

/* =========================================================
   ACCENT TILES (dark orange)
   Icon tiles, tags and step badges: solid dark orange with
   white icons/text (4.6:1 contrast), on white and on blue.
   ========================================================= */
:root {
  --ginger: #cf4807;     /* now dark orange (was ginger yellow #f1b33b) */
  --on-ginger: #ffffff;  /* white on dark orange = 4.6:1 */
}

/* icon tiles */
.practice .ico,
.why-list .dot,
.ico-sm,
.value .ico-sm,
.contact-list .ci {
  background: var(--ginger);
  color: var(--on-ginger);
}

/* tags and labels */
.chip,
.pill {
  background: var(--ginger);
  color: var(--on-ginger);
}

/* stage and step numbers */
.step .alt,
.flow li:last-child::before,
section.block.alt .flow li:last-child::before {
  background: var(--ginger);
  color: var(--on-ginger);
}

/* =========================================================
   INNER PAGE H1 MULTIPLIER
   Headline at the top of every page except home = 2x.
   ========================================================= */
:root {
  --page-h1-x: 2;
}
.page-hero h1 {
  font-size: clamp(calc(1.9rem * var(--page-h1-x)), calc(3.4vw * var(--page-h1-x)), calc(var(--fs-3xl) * var(--page-h1-x)));
  line-height: 1.05;
  max-width: 20ch;
  overflow-wrap: break-word;
}
.notfound h1 {
  font-size: calc(var(--fs-2xl) * var(--page-h1-x)) !important;
  line-height: 1.1;
}
@media (max-width: 620px) {
  .page-hero h1 {
    font-size: calc(1.85rem * var(--page-h1-x));
  }
}

/* =========================================================
   FORM RESULT PAGES (thank-you.html, form-error.html)
   ========================================================= */
.result-page {
  text-align: center;
  padding: 120px 0 150px;
}
.result-page h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin: 26px auto 0;
}
.result-page p.lead {
  margin: 18px auto 0;
}
.result-page .paths {
  justify-content: center;
  margin-top: 34px;
}
.result-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto;
  color: #ffffff;
}
.result-icon svg {
  width: 42px;
  height: 42px;
}
.result-icon.ok { background: var(--orange); }
.result-icon.err { background: var(--eclipse); }
.result-steps {
  list-style: none;
  counter-reset: rs;
  max-width: 560px;
  margin: 36px auto 0;
  display: grid;
  gap: 12px;
  text-align: left;
}
.result-steps li {
  counter-increment: rs;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  color: var(--ink-soft);
}
.result-steps li::before {
  content: counter(rs);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: #ffffff;
  font-family: var(--display);
  font-weight: 600;
}
.result-steps strong {
  color: var(--ink);
}

/* =========================================================
   EMAIL REVEAL BUTTON (contact page)
   ========================================================= */
.email-reveal {
  font: inherit;
  color: var(--accent-text);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.email-reveal:hover {
  color: var(--orange);
}

/* =========================================================
   CLOUDFLARE TURNSTILE WIDGET (contact and careers forms)
   ========================================================= */
.turnstile-wrap {
  min-height: 65px;   /* reserve space so the form doesn't jump when it loads */
}
.turnstile-wrap .cf-turnstile {
  max-width: 100%;
}

/* =========================================================
   BODY TEXT SIZES (whole pixels, common UX sizes)
   15px body      - base body text
   20px lead      - intro paragraphs under headings
   15px articles  - article text
   14px secondary - card descriptions and list items
   13px footer
   16px inputs    - stops iPhone Safari zooming in on focus
   Headings, navigation, buttons and labels keep their own sizes.
   ========================================================= */
body {
  font-size: 15px;
}
p.lead {
  font-size: 20px;
}
.role p,
.value p,
.flow p,
.step p,
.why-list p,
.faq details p,
.post .muted,
.ticks li {
  font-size: 14px;
}
.prose {
  font-size: 15px;
}
.callout {
  font-size: 20px;
}
footer {
  font-size: 13px;
}
.field input,
.field select,
.field textarea {
  font-size: 16px;
}
@media (max-width: 620px) {
  body {
    font-size: 15px;
  }
  p.lead {
    font-size: 18px;
  }
  .prose {
    font-size: 15px;
  }
  .callout {
    font-size: 18px;
  }
}

/* =========================================================
   ANIMATED INSIGHT ILLUSTRATIONS
   t3 = AI robot brain, t2 = database, t4 = DevOps loop.
   Animations stop automatically for visitors who prefer
   reduced motion (see the reduced-motion rule).
   ========================================================= */
.tn { display: block; width: 100%; height: 100%; }

/* AI: gentle float, blinking eyes, pulsing brain nodes, talking bars */
.tn-ai .tn-float { animation: tnFloat 4s ease-in-out infinite; }
.tn-ai .tn-halo { transform-origin: 200px 108px; animation: tnHalo 3s ease-in-out infinite; }
.tn-ai .tn-antenna { animation: tnBlinkGlow 1.6s ease-in-out infinite; }
.tn-ai .tn-eyes { transform-box: fill-box; transform-origin: center; animation: tnEyes 4.5s infinite; }
.tn-ai .tn-node { transform-box: fill-box; transform-origin: center; animation: tnNode 2.4s ease-in-out infinite; }
.tn-ai .n2 { animation-delay: .4s; } .tn-ai .n3 { animation-delay: .8s; } .tn-ai .n4 { animation-delay: 1.2s; } .tn-ai .n5 { animation-delay: 1.6s; }
.tn-ai .tn-signal path { stroke-dasharray: 4 6; animation: tnDash 1.2s linear infinite; }
.tn-ai .tn-bar { transform-box: fill-box; transform-origin: center; animation: tnBar 1s ease-in-out infinite; }
.tn-ai .b2 { animation-delay: .15s; } .tn-ai .b3 { animation-delay: .3s; } .tn-ai .b4 { animation-delay: .45s; }

/* Database: packets stream in, layers light up in turn */
.tn-db .tn-pk { animation: tnPacket 2.4s linear infinite; opacity: 0; }
.tn-db .p2 { animation-delay: .8s; } .tn-db .p3 { animation-delay: 1.6s; }
.tn-db .tn-layer-glow { opacity: 0; animation: tnLayer 2.4s ease-in-out infinite; }
.tn-db .l1 .tn-layer-glow { animation-delay: 1.2s; } .tn-db .l2 .tn-layer-glow { animation-delay: .8s; } .tn-db .l3 .tn-layer-glow { animation-delay: .4s; }
.tn-db .tn-led { animation: tnBlinkGlow 1.2s ease-in-out infinite; }
.tn-db .l2 .tn-led { animation-delay: .3s; } .tn-db .l3 .tn-led { animation-delay: .6s; }

/* DevOps: pulse travels round the loop, stages light up in sequence */
.tn-devops .tn-pulse { animation: tnLoop 3.6s linear infinite; }
.tn-devops .tn-pulse-2 { animation-delay: -1.8s; }
.tn-devops .tn-stages text { animation: tnStage 3.6s ease-in-out infinite; opacity: .45; }
.tn-devops .s2 { animation-delay: .6s; } .tn-devops .s3 { animation-delay: 1.2s; }
.tn-devops .s4 { animation-delay: 1.8s; } .tn-devops .s5 { animation-delay: 2.4s; } .tn-devops .s6 { animation-delay: 3s; }

@keyframes tnFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes tnHalo { 0%, 100% { opacity: .7; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes tnBlinkGlow { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes tnEyes { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.1); } }
@keyframes tnNode { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.35); opacity: 1; } }
@keyframes tnDash { to { stroke-dashoffset: -20; } }
@keyframes tnBar { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1.25); } }
@keyframes tnPacket { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(118px); opacity: 0; } }
@keyframes tnLayer { 0%, 100% { opacity: 0; } 40% { opacity: .55; } }
@keyframes tnLoop { to { stroke-dashoffset: -100; } }
@keyframes tnStage { 0%, 100% { opacity: .45; fill: #c6c6de; } 15% { opacity: 1; fill: #ffd27a; } 30% { opacity: .45; fill: #c6c6de; } }

/* AI chatbot illustration: robot with headphones typing at a laptop.
   Customer bubble appears, the bot "types", then its reply pops in. */
.tn-bot .tn-bot-head { animation: tnFloat 3.5s ease-in-out infinite; }
.tn-bot .tn-bot-eyes { transform-box: fill-box; transform-origin: center; animation: tnEyes 4.5s infinite; }
.tn-bot .tn-bot-mic, .tn-bot .tn-bot-core { animation: tnBlinkGlow 1.4s ease-in-out infinite; }
.tn-bot .tn-bot-hand { animation: tnTap .32s ease-in-out infinite alternate; }
.tn-bot .h2 { animation-delay: .16s; }
.tn-bot .tn-bubble { opacity: 0; transform-box: fill-box; transform-origin: left bottom; animation: 8s ease-out infinite; }
.tn-bot .b1 { animation-name: tnBotB1; }
.tn-bot .b3 { animation-name: tnBotB3; }
.tn-bot .b2 { animation-name: tnBotB2; transform-origin: right bottom; }
.tn-bot .tn-ch-dot { transform-box: fill-box; transform-origin: center; animation: tnChDot 1s ease-in-out infinite; }
.tn-bot .d2 { animation-delay: .15s; } .tn-bot .d3 { animation-delay: .3s; }
@keyframes tnTap { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes tnBotB1 { 0%, 4% { opacity: 0; transform: scale(.85); } 10%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes tnBotB3 { 0%, 18% { opacity: 0; } 22%, 40% { opacity: 1; } 43%, 100% { opacity: 0; } }
@keyframes tnBotB2 { 0%, 42% { opacity: 0; transform: scale(.85); } 48%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes tnChDot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tn-bot .b1, .tn-bot .b2 { opacity: 1 !important; } .tn-bot .b3 { opacity: 0 !important; } }

/* hCaptcha box on the contact form (Web3Forms) */
.captcha-box {
  min-height: 78px;      /* reserve space so the form doesn't jump while it loads */
  margin-bottom: 18px;
}

/* GenAI illustration: a pulsing sparkle "writes" lines of content */
.tn-gen .tn-gen-star { transform-box: fill-box; transform-origin: center; animation: tnGenPulse 3s ease-in-out infinite; }
.tn-gen .tn-gen-halo { transform-box: fill-box; transform-origin: center; animation: tnHalo 3s ease-in-out infinite; }
.tn-gen .tn-gen-mini { transform-box: fill-box; transform-origin: center; animation: tnGenTwinkle 2.4s ease-in-out infinite; }
.tn-gen .s2 { animation-delay: .8s; } .tn-gen .s3 { animation-delay: 1.6s; }
.tn-gen .tn-gen-line { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: 6s ease-out infinite; }
.tn-gen .l1 { animation-name: tnGenL1; } .tn-gen .l2 { animation-name: tnGenL2; }
.tn-gen .l3 { animation-name: tnGenL3; } .tn-gen .l4 { animation-name: tnGenL4; }
.tn-gen .tn-gen-caret { animation: tnBlinkGlow .8s steps(2) infinite; }
@keyframes tnGenPulse { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.08) rotate(8deg); } }
@keyframes tnGenTwinkle { 0%, 100% { transform: scale(.55); opacity: .5; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes tnGenL1 { 0%, 4% { transform: scaleX(0); } 14%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes tnGenL2 { 0%, 16% { transform: scaleX(0); } 28%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes tnGenL3 { 0%, 30% { transform: scaleX(0); } 42%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes tnGenL4 { 0%, 44% { transform: scaleX(0); } 54%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .tn-gen .tn-gen-line { transform: none !important; } }

/* GenAI illustration: a simple speech-bubble bot that floats, blinks and glances */
.tn-bub .tn-bub-float { animation: tnBubFloat 3.6s ease-in-out infinite; }
.tn-bub .tn-bub-shadow { transform-box: fill-box; transform-origin: center; animation: tnBubShadow 3.6s ease-in-out infinite; }
.tn-bub .tn-bub-eyes { transform-box: fill-box; transform-origin: center; animation: tnBubEyes 6s ease-in-out infinite; }
@keyframes tnBubFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes tnBubShadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.82); opacity: .7; } }
@keyframes tnBubEyes {
  0%, 30%, 100% { transform: translateX(0) scaleY(1); }
  33% { transform: translateX(0) scaleY(.1); }
  36%, 55% { transform: translateX(0) scaleY(1); }
  62%, 78% { transform: translateX(7px) scaleY(1); }
  85% { transform: translateX(0) scaleY(1); }
}

/* ---------- footer with four link columns (Ascend Talent) ---------- */
.foot.foot-5 {
  grid-template-columns: 1.3fr repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 1020px) {
  .foot.foot-5 { grid-template-columns: 1fr 1fr; }
  .foot.foot-5 > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .foot.foot-5 { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}

/* =========================================================
   INSIGHT THUMBNAILS
   Simple animated Font Awesome icons on the article cards.
   Sizes use container units, so they scale with the card.
   Animations stop when the visitor prefers reduced motion.
   ========================================================= */
.post .thumb {
  container-type: inline-size;
}
.ti {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6cqw;
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(60% 70% at 50% 115%, rgba(255, 138, 61, 0.32), transparent 70%),
    linear-gradient(160deg, #272757, #0f0e47);
}
.ti .tile {
  position: relative;
  width: 26cqw;
  height: 26cqw;
  border-radius: 6cqw;
  display: grid;
  place-items: center;
  font-size: 11cqw;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  animation: ti-float 4s ease-in-out infinite;
}
.ti .accent {
  color: #ff8a3d;
}

/* 1. hiring a data engineer: a magnifier scans the database */
.ti-hire .scan {
  position: absolute;
  font-size: 9cqw;
  color: #ff8a3d;
  left: 50%;
  top: 50%;
  margin: -1cqw 0 0 -1cqw;
  animation: ti-scan 3.2s ease-in-out infinite;
}

/* 2. contract or permanent: the two options take turns */
.ti-choose .tile {
  width: 22cqw;
  height: 22cqw;
  font-size: 9cqw;
  animation: ti-pick 4s ease-in-out infinite;
}
.ti-choose .tile:last-child {
  animation-delay: -2s;
}
.ti-choose .swap {
  font-size: 7cqw;
  color: #ff8a3d;
  animation: ti-pulse 2s ease-in-out infinite;
}

/* 3. CV tips: the CV earns a tick */
.ti-cv .badge {
  position: absolute;
  top: -3.5cqw;
  right: -3.5cqw;
  font-size: 8cqw;
  color: #ff8a3d;
  background: #0f0e47;
  border-radius: 50%;
  line-height: 1;
  animation: ti-pop 3s ease-in-out infinite;
}

@keyframes ti-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.2cqw); }
}
@keyframes ti-scan {
  0%, 100% { transform: translate(-9cqw, 3cqw) rotate(-8deg); }
  50% { transform: translate(5cqw, -3cqw) rotate(8deg); }
}
@keyframes ti-pick {
  0%, 40%, 100% { transform: scale(1); border-color: rgba(255, 255, 255, 0.16); color: #ffffff; }
  15%, 30% { transform: scale(1.1); border-color: #ff8a3d; color: #ff8a3d; }
}
@keyframes ti-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes ti-pop {
  0%, 15% { transform: scale(0); opacity: 0; }
  25% { transform: scale(1.25); opacity: 1; }
  32%, 85% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ti *, .ti .tile { animation: none !important; }
  .ti-cv .badge { transform: none; opacity: 1; }
}