:root {
  --ink: #18212b;
  --muted: #596776;
  --paper: #ffffff;
  --soft: #f6f5fb;
  --soft-teal: #edf8f7;

  --primary: #4b3fa7;
  --primary-dark: #332879;

  --secondary: #0b6f73;
  --secondary-dark: #075458;

  --accent: #f1c75b;
  --accent-ink: #4b3900;

  --line: #d8dce5;
  --success: #1c7d52;

  --shadow: 0 16px 42px rgba(24,33,43,.12);

  --max: 1160px;
  --radius: 20px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}

a {
  color: inherit;
}

.container {
  width: min(calc(100% - 38px), var(--max));
  margin: auto;
}

/* ACCESSIBILITY */

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 12px;
  top: 12px;
  background: white;
  padding: 10px;
  z-index: 9999;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* =========================================
   HEADER
   Match PureAlign Life Service Menu
   ========================================= */

.header {
  position: sticky;
  top: 0;
  z-index: 20;

  background: rgba(255,255,255,.94);
  color: var(--ink);

  backdrop-filter: blur(14px);

  border-bottom:
    1px solid rgba(216,220,229,.9);
}

.headerin {
  min-height: 76px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;

  text-decoration: none;
}

.brand-logo {
  display: block;

  width: 58px;
  height: 58px;

  object-fit: contain;

  flex: 0 0 58px;

  border-radius: 50%;
}



.brandtext {
  display: flex;
  flex-direction: column;

  line-height: 1.05;
}

.brandtext strong {
  color: var(--ink);

  letter-spacing: .08em;
}

.brandtext small {
  margin-top: 5px;

  color: var(--primary);

  font-weight: 700;
}

.nav {
  display: flex;

  gap: 18px;
}

.nav a {
  text-decoration: none;

  color: var(--ink);

  font-weight: 700;
  font-size: .92rem;
}

.nav a:hover {
  color: var(--primary);
}

.navtoggle {
  display: none;

  background: transparent;

  border: 1px solid var(--line);

  color: var(--ink);

  border-radius: 10px;

  font-size: 1.3rem;

  padding: 6px 10px;
}

/* =========================================
   HERO
   Match Service Menu background
   ========================================= */

.hero {
  position: relative;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 90% 15%,
      rgba(241,199,91,.28),
      transparent 30%
    ),

    radial-gradient(
      circle at 75% 75%,
      rgba(11,111,115,.12),
      transparent 36%
    ),

    linear-gradient(
      160deg,
      #ffffff 35%,
      #f5f2ff 100%
    );

  color: var(--ink);

  padding: 92px 0 78px;
}

.herogrid {
  display: grid;

  grid-template-columns:
    1.2fr .8fr;

  gap: 50px;

  align-items: center;
}

.eyebrow {
  margin: 0 0 10px;

  color: var(--secondary);

  font-size: .78rem;
  font-weight: 900;

  letter-spacing: .13em;

  text-transform: uppercase;
}

.hero .eyebrow {
  color: var(--secondary);
}

h1,
h2,
h3 {
  line-height: 1.08;

  letter-spacing: -.035em;

  margin-top: 0;
}

h1 {
  font-size:
    clamp(3rem,7vw,6rem);

  margin-bottom: 20px;
}

h2 {
  font-size:
    clamp(2rem,4vw,3.5rem);
}

h3 {
  font-size: 1.25rem;
}

.hero h1 {
  color: var(--ink);
}

.lead {
  font-size:
    clamp(1.05rem,2vw,1.28rem);

  color: var(--muted);

  max-width: 760px;
}

/* =========================================
   BUTTONS
   Purple matches Book a Conversation
   ========================================= */

.actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 28px;
}

.btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 46px;

  padding: 12px 20px;

  border-radius: 999px;

  text-decoration: none;

  font-weight: 800;

  transition:
    transform .15s ease,
    background .15s ease;
}

.primary {
  background: var(--primary);

  color: white;

  box-shadow:
    0 8px 22px
    rgba(75,63,167,.20);
}

.primary:hover {
  background: var(--primary-dark);

  color: white;

  transform: translateY(-1px);
}

.secondary {
  background: var(--secondary);

  color: white;

  border: 0;

  box-shadow:
    0 8px 22px
    rgba(11,111,115,.20);
}

.secondary:hover {
  background: var(--secondary-dark);

  color: white;

  transform: translateY(-1px);
}

/* =========================================
   PUREALIGN FRAMEWORK
   ========================================= */

.panel {
  background:
    rgba(255,255,255,.90);

  color: var(--ink);

  border:
    1px solid var(--line);

  border-radius: 24px;

  padding: 26px;

  box-shadow: var(--shadow);
}

.panel ol {
  list-style: none;

  padding: 0;

  margin: 0;
}

.panel li {
  display: grid;

  grid-template-columns:
    100px 1fr;

  gap: 10px;

  padding: 18px 0;

  border-top:
    1px solid var(--line);
}

.panel li:first-child {
  border-top: 0;
}

.panel strong {
  color: var(--secondary);
}

.panel span {
  color: var(--muted);
}

/* =========================================
   GENERAL SECTIONS
   ========================================= */

.section {
  padding: 82px 0;
}

.muted {
  background: var(--soft);
}

.dark {
  background: var(--ink);

  color: white;
}

.twocol {
  display: grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap: 58px;
}

.prose {
  color: #3f555d;

  font-size: 1.05rem;
}

.dark .prose,
.dark .sectionhead p {
  color: #c7d2d5;
}

.dark .eyebrow {
  color: #fff4c7;
}

.sectionhead {
  max-width: 820px;

  margin-bottom: 34px;
}

.sectionhead > p:last-child {
  color: var(--muted);
}

/* =========================================
   FOUNDER
   ========================================= */

.founder {
  display: grid;

  grid-template-columns:
    .82fr 1.18fr;

  gap: 54px;

  align-items: center;
}

.foundercard {
  background: white;

  border:
    1px solid var(--line);

  border-radius:
    var(--radius);

  padding: 24px;

  box-shadow:
    0 8px 22px
    rgba(24,33,43,.05);
}

/* Actual founder photograph */

.portrait {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 16 / 9;

  object-fit: cover;
  object-position: center;

  border-radius: 16px;
}

.credential {
  margin-top: 24px;

  padding: 16px 18px;

  border:
    1px solid var(--line);

  border-left:
    5px solid var(--secondary);

  border-radius: 14px;

  background:
    var(--soft-teal);

  display: flex;

  justify-content:
    space-between;

  gap: 18px;

  align-items: center;
}

.credential div {
  display: flex;

  flex-direction: column;
}

.credential span {
  font-size: .9rem;

  color: var(--muted);
}

.credential a {
  font-weight: 800;

  color: var(--primary);
}

/* =========================================
   CARDS
   ========================================= */

.grid3 {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 18px;
}

.card {
  background: white;

  border:
    1px solid var(--line);

  border-radius: 18px;

  padding: 22px;

  box-shadow:
    0 8px 22px
    rgba(24,33,43,.05);
}

.card p {
  color: var(--muted);

  margin-bottom: 0;
}

.card:nth-child(3n+1) {
  border-top:
    5px solid var(--primary);
}

.card:nth-child(3n+2) {
  border-top:
    5px solid var(--secondary);
}

.card:nth-child(3n+3) {
  border-top:
    5px solid var(--accent);
}

/* =========================================
   PORTFOLIO
   ========================================= */

.portfolio {
  min-height: 230px;

  background: #263646;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius: 18px;

  padding: 22px;
}

.portfolio p {
  color: #c3d0d3;
}

.tag {
  display: inline-block;

  margin-bottom: 24px;

  background: #f0edff;

  color: var(--primary-dark);

  padding:
    .32rem .55rem;

  border-radius: 999px;

  font-size: .75rem;

  font-weight: 900;

  text-transform: none;
}

/* =========================================
   SERVICES
   ========================================= */

.pillars {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 16px;
}

.pillar {
  background: white;

  border:
    1px solid var(--line);

  border-radius: 18px;

  padding: 22px;
}

.pillar span {
  font-size: .75rem;

  font-weight: 900;

  color: var(--primary);
}

.pillar p {
  color: var(--muted);
}

.center {
  text-align: center;

  margin-top: 32px;
}

.micro {
  color: var(--muted);

  font-size: .86rem;
}

/* =========================================
   CONNECT
   ========================================= */

.connect {
  display: grid;

  grid-template-columns:
    1fr .9fr;

  gap: 48px;
}

.connectcard {
  background: white;

  border:
    1px solid var(--line);

  border-radius: 18px;

  padding: 24px;
}

.connectcard a {
  font-weight: 750;

  color: var(--primary);
}

/* =========================================
   FOOTER
   ========================================= */

.footer {
  background: #111820;

  color: #dbe5e8;

  padding: 34px 0;
}

.footerin {
  display: flex;

  justify-content:
    space-between;

  gap: 20px;

  align-items: end;
}

.footer p {
  color: #98a9ae;

  font-size: .86rem;

  margin: 6px 0 0;
}

/* IP / CONFIDENTIALITY NOTE */

.note {
  border-left:
    4px solid var(--accent);

  padding: 14px 16px;

  background:
    #fff9df;

  color:
    var(--accent-ink);

  border-radius: 10px;

  margin-top: 26px;
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media(max-width:900px) {

  .herogrid,
  .twocol,
  .founder,
  .connect {
    grid-template-columns: 1fr;
  }

  .grid3 {
    grid-template-columns:
      repeat(2,1fr);
  }

  .pillars {
    grid-template-columns:
      repeat(2,1fr);
  }

  .navtoggle {
    display: block;
  }

  .nav {
    display: none;

    position: absolute;

    top: 76px;
    left: 1rem;
    right: 1rem;

    background: white;

    border:
      1px solid var(--line);

    box-shadow:
      var(--shadow);

    border-radius: 16px;

    padding: 14px 20px;

    flex-direction: column;
  }

  .nav.open {
    display: flex;
  }

}

@media(max-width:620px) {

  .grid3,
  .pillars {
    grid-template-columns: 1fr;
  }

  .footerin,
  .credential {
    flex-direction: column;

    align-items: flex-start;
  }

  .brandtext small {
    display: none;
  }

  .section {
    padding: 62px 0;
  }

}