/* =========================================================
   AscendTech – 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
   Karla ExtraBold (Google Fonts), set straight in capitals.
   ========================================================= */
.brand-name {
  font-family: "Karla", var(--display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
  /* 1.2x wider letterforms: Karla has no wide cut, so stretch it
     horizontally and add the extra width back as space after it */
  display: inline-block;
  transform: scaleX(1.2);
  transform-origin: left center;
  margin-right: 0.95em;
}

/* =========================================================
   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));
  }
}