/* Sage Six composition. This sheet stays deliberately achromatic. Debono's
   bounded product colour lives in debono.css. */

.page {
  position: relative;
  z-index: 1;
  min-height: 100svh;
}

.top {
  position: sticky;
  z-index: 100;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--gutter);
  background: rgba(10, 10, 10, 0.94);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(16px) saturate(0%);
}

#company,
#ai-squared,
#debono { scroll-margin-top: 2.75rem; }

.top__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.25rem);
  font-family: var(--mono);
  font-size: clamp(0.625rem, 0.59rem + 0.08vw, 0.7rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.top__nav a {
  position: relative;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  color: var(--grey);
  text-decoration: none;
  transition: color 180ms ease;
}

.top__nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0.55rem;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 240ms var(--ease-out);
}

.top__nav a:hover,
.top__nav a:focus-visible { color: var(--ink); }
.top__nav a:hover::after,
.top__nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.hero {
  --soul-cycle: 28s;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(2rem, 5vw, 8rem);
  min-height: clamp(34rem, 66svh, 46rem);
  padding: clamp(3.5rem, 6vw, 7rem) var(--gutter) 0;
  overflow: clip;
}

.hero__runner {
  position: absolute;
  z-index: 4;
  right: 0;
  left: 0;
  height: 0.75rem;
  overflow: hidden;
  pointer-events: none;
}

.hero__runner-light {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__runner-light::before {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: clamp(28rem, 72vw, 78rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.11) 0,
    rgba(255, 255, 255, 0.055) 30%,
    rgba(255, 255, 255, 0.02) 52%,
    transparent 75%
  );
  opacity: 0.5;
  transform: translate3d(calc(100vw - 50%), -50%, 0);
  will-change: transform, opacity;
}

.hero__runner--top { top: 0; }
.hero__runner--bottom { bottom: 0; }

.hero__runner::before,
.hero__runner::after {
  content: "";
  position: absolute;
  top: 50%;
}

.hero__runner::before {
  right: 0;
  left: 0;
  height: 1px;
  background: var(--hair-soft);
  transform: translateY(-50%);
}

.hero__runner::after {
  left: 0;
  width: 0.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  will-change: transform;
}

.hero__runner--top::after {
  background: radial-gradient(circle at 35% 28%, var(--hair) 0, var(--ground) 32%, var(--ground-deep) 72%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.42),
    0 0 0 0.22rem rgba(255, 255, 255, 0.035),
    0 0.18rem 0.55rem 0.08rem rgba(0, 0, 0, 0.95);
  opacity: 0.9;
  transform: translate3d(0.75rem, -50%, 0) scale(0.92);
}

.hero__runner--bottom::after {
  background: var(--white);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.72),
    0 0 1.25rem 0.28rem rgba(255, 255, 255, 0.22);
  opacity: 1;
  transform: translate3d(calc(100vw - 1.5rem), -50%, 0) scale(1.5);
}

.hero__copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding-bottom: clamp(2.5rem, 4vw, 4.5rem);
  container-type: inline-size;
}

.hero__kicker { margin-bottom: clamp(1rem, 1.8vw, 1.75rem); }

.motto {
  max-width: 100%;
  font-family: var(--serif);
  font-size: clamp(2.05rem, 4.8vw, 7.5rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-inline-start: -0.045em;
  white-space: nowrap;
}

.motto span { display: inline; }
.motto__soul {
  position: relative;
  display: inline-block !important;
  margin-inline-start: 0.12em;
  color: inherit;
  text-decoration: none;
}

.motto em {
  /* The one deliberate bridge into the product identity: these are the exact
     green, red, blue and purple stops used by the canonical Debono mark. */
  color: #d685ff;
  display: inline-block;
  font-weight: 400;
  letter-spacing: -0.025em;
  background:
    radial-gradient(circle at 50% -12%, rgba(34, 197, 94, 0.92) 0, rgba(34, 197, 94, 0) 56%),
    radial-gradient(circle at 2% 108%, rgba(239, 68, 68, 0.76) 0, rgba(239, 68, 68, 0) 58%),
    radial-gradient(circle at 98% 108%, rgba(59, 130, 246, 0.9) 0, rgba(59, 130, 246, 0) 58%),
    linear-gradient(120deg, #d685ff 0%, #c85aff 40%, #bf40ff 72%, #a939e2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: saturate(1.06) brightness(1.04) drop-shadow(0 0 0.24em rgba(139, 92, 246, 0.34));
}

@supports (font-size: 1cqi) {
  .motto { font-size: clamp(2.05rem, 10.15cqi, 7.5rem); }
}

.hero__statement {
  max-width: 34rem;
  margin-top: clamp(1.75rem, 3vw, 3rem);
  padding-left: clamp(1rem, 1.8vw, 1.75rem);
  border-left: 1px solid var(--hair);
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.35rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.soul {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: center;
  width: min(100%, 34rem);
  padding-bottom: clamp(2.5rem, 4vw, 4.5rem);
}

.soul__field {
  --soul-size: min(30vw, 27rem);
  position: relative;
  width: var(--soul-size);
  min-width: 19rem;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  isolation: isolate;
  transform: perspective(900px) rotateX(calc(var(--tilt-y, 0) * 1deg)) rotateY(calc(var(--tilt-x, 0) * 1deg));
  transition: transform 700ms var(--ease-out);
}

.soul__aura,
.soul__disc {
  position: absolute;
  border-radius: 50%;
}

.soul__aura {
  inset: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018) 38%, transparent 69%);
  filter: blur(0.25rem);
  opacity: 0.78;
}

.soul__disc {
  inset: 23%;
  overflow: hidden;
  border: 1px solid var(--grey-2);
  background: var(--ground);
  box-shadow:
    0 0 0 0.55rem rgba(10, 10, 10, 0.72),
    0 0 0 0.625rem var(--hair-soft),
    0 1.5rem 5rem rgba(255, 255, 255, 0.07);
}

.soul__yin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

.soul__meridian {
  position: absolute;
  inset: 4%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  mix-blend-mode: difference;
}

.soul__mark {
  position: absolute;
  z-index: 2;
  left: 51%;
  top: 50%;
  width: 34%;
  height: auto;
  color: var(--white);
  filter: drop-shadow(0 0 0.45rem rgba(255, 255, 255, 0.32));
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.soul__caption {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.25rem;
  color: var(--grey);
  font-family: var(--mono);
  font-size: clamp(0.6rem, 0.56rem + 0.08vw, 0.7rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.soul__caption span:nth-child(2) { text-align: center; color: var(--ink-soft); }
.soul__caption span:last-child { text-align: right; }

.hero__rail {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair-soft);
}

.hero__rail p {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  min-height: 4.25rem;
  padding: 1.25rem clamp(0.5rem, 1.6vw, 1.5rem);
  border-right: 1px solid var(--hair-soft);
  color: var(--grey);
}
.hero__rail p:first-child { padding-left: 0; }
.hero__rail p:last-child { border-right: 0; }
.hero__rail span { font-family: var(--mono); font-size: 0.65rem; color: var(--grey-2); }
.hero__rail b { color: var(--ink-soft); font-size: clamp(0.85rem, 0.8rem + 0.18vw, 1rem); font-weight: 400; }

.accountability,
.method {
  padding: clamp(4rem, 8vw, 9rem) var(--gutter);
}

.method {
  border-bottom: 1px solid var(--hair-soft);
}

.accountability__body h2,
.method__intro h2 {
  max-width: 12em;
  color: var(--ink);
  font-size: clamp(2.4rem, 1.6rem + 3vw, 5.75rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.accountability {
  display: grid;
  grid-template-columns: minmax(9rem, 3fr) minmax(0, 9fr);
  gap: var(--gap);
}

.accountability__body {
  display: grid;
  gap: clamp(2.5rem, 5vw, 6rem);
}

.accountability__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hair-soft);
}

.accountability__facts article {
  min-width: 0;
  padding: clamp(1.25rem, 2vw, 2rem) clamp(1rem, 2vw, 2.25rem) 0;
  border-left: 1px solid var(--hair-soft);
}

.accountability__facts article:first-child {
  padding-left: 0;
  border-left: 0;
}

.accountability__facts .label {
  margin-bottom: 0.85rem;
  color: var(--grey-2);
}

.accountability__facts article > p:last-child {
  max-width: 28em;
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 0.88rem + 0.18vw, 1.12rem);
  line-height: 1.48;
}

.method {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(3rem, 7vw, 10rem);
}

.method__intro .label { margin-bottom: clamp(1.25rem, 2vw, 2rem); }
.method__intro h2 { font-size: clamp(2.6rem, 1.8rem + 2.5vw, 5rem); }

.principles { list-style: none; padding: 0; }
.principle {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(1.5rem, 2vw, 2.25rem) 0;
  border-top: 1px solid var(--hair-soft);
  transition: padding-left 320ms var(--ease-out), border-color 320ms ease;
}
.principle:last-child { border-bottom: 1px solid var(--hair-soft); }
.principle:hover { padding-left: 0.65rem; border-color: var(--hair); }
.principle__n {
  padding-top: 0.35rem;
  color: var(--grey-2);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}
.principle h3 {
  color: var(--ink);
  font-size: clamp(1.35rem, 1.1rem + 0.6vw, 2rem);
  font-weight: 400;
  line-height: 1.18;
}
.principle p { margin-top: 0.45rem; color: var(--grey); }

.foot {
  padding: clamp(1.5rem, 2.5vw, 2.5rem) var(--gutter) clamp(2rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 1rem clamp(2rem, 4vw, 5rem);
  font-family: var(--mono);
  font-size: clamp(0.6875rem, 0.625rem + 0.12vw, 0.8125rem);
  letter-spacing: 0.06em;
  color: var(--grey);
}
.foot b { color: var(--ink); font-weight: 500; }
.foot__identity { display: grid; gap: 0.3rem; }
.foot__identity p:last-child { color: var(--grey-2); }
.foot__links { display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; }
.foot__links a {
  color: var(--grey);
  text-decoration: none;
  transition: color 180ms ease;
}
.foot__links a:hover,
.foot__links a:focus-visible { color: var(--ink); }
.foot__copy { color: var(--grey-2); }

.js .settle > * {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.js .settle > :nth-child(2) { transition-delay: 90ms; }
.js .settle > :nth-child(3) { transition-delay: 160ms; }
.js .settle.is-in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  /* The statement arrives first; the final word follows as a quiet second beat. */
  .motto > span {
    display: inline-block;
    transform-origin: left center;
    animation: sage-motto-arrive 1.28s cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
  }
  .motto em {
    animation: sage-soul-arrive 820ms var(--ease-out) 1.58s both;
  }

  @keyframes sage-motto-arrive {
    0% { opacity: 0; clip-path: inset(-14% 100% -20% 0); filter: blur(0.07em); transform: translateX(-0.12em); }
    72% { opacity: 1; clip-path: inset(-14% -2% -20% 0); filter: blur(0); transform: translateX(0.018em); }
    100% { opacity: 1; clip-path: inset(-14% -2% -20% 0); filter: blur(0); transform: translateX(0); }
  }

  @keyframes sage-soul-arrive {
    from { opacity: 0; transform: translateY(0.08em); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* One edge crossing equals a 180-degree turn of the yin-yang. At that point
     its black and white halves trade places, and the two runners do the same. */
  .hero__runner--top::after { animation: hero-runner-top var(--soul-cycle) linear infinite; }
  .hero__runner--bottom::after { animation: hero-runner-bottom var(--soul-cycle) linear infinite; }
  .hero__runner-light::before { animation: hero-light-source var(--soul-cycle) linear infinite; }

  @keyframes hero-runner-top {
    0% { background: radial-gradient(circle at 35% 28%, var(--hair) 0, var(--ground) 32%, var(--ground-deep) 72%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42), 0 0 0 0.22rem rgba(255, 255, 255, 0.035), 0 0.18rem 0.55rem 0.08rem rgba(0, 0, 0, 0.95); opacity: 0.9; transform: translate3d(-100%, -50%, 0) scale(0.92); }
    49.6% { background: radial-gradient(circle at 35% 28%, var(--hair) 0, var(--ground) 32%, var(--ground-deep) 72%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42), 0 0 0 0.22rem rgba(255, 255, 255, 0.035), 0 0.18rem 0.55rem 0.08rem rgba(0, 0, 0, 0.95); opacity: 0.9; transform: translate3d(calc(100vw + 100%), -50%, 0) scale(0.92); }
    49.61% { background: var(--white); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72), 0 0 1.25rem 0.28rem rgba(255, 255, 255, 0.22); opacity: 1; transform: translate3d(-100%, -50%, 0) scale(1.5); }
    100% { background: var(--white); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72), 0 0 1.25rem 0.28rem rgba(255, 255, 255, 0.22); opacity: 1; transform: translate3d(calc(100vw + 100%), -50%, 0) scale(1.5); }
  }

  @keyframes hero-runner-bottom {
    0% { background: var(--white); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72), 0 0 1.25rem 0.28rem rgba(255, 255, 255, 0.22); opacity: 1; transform: translate3d(calc(100vw + 100%), -50%, 0) scale(1.5); }
    49.6% { background: var(--white); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72), 0 0 1.25rem 0.28rem rgba(255, 255, 255, 0.22); opacity: 1; transform: translate3d(-100%, -50%, 0) scale(1.5); }
    49.61% { background: radial-gradient(circle at 35% 28%, var(--hair) 0, var(--ground) 32%, var(--ground-deep) 72%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42), 0 0 0 0.22rem rgba(255, 255, 255, 0.035), 0 0.18rem 0.55rem 0.08rem rgba(0, 0, 0, 0.95); opacity: 0.9; transform: translate3d(calc(100vw + 100%), -50%, 0) scale(0.92); }
    100% { background: radial-gradient(circle at 35% 28%, var(--hair) 0, var(--ground) 32%, var(--ground-deep) 72%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42), 0 0 0 0.22rem rgba(255, 255, 255, 0.035), 0 0.18rem 0.55rem 0.08rem rgba(0, 0, 0, 0.95); opacity: 0.9; transform: translate3d(-100%, -50%, 0) scale(0.92); }
  }

  @keyframes hero-light-source {
    0% { top: 100%; opacity: 0; transform: translate3d(calc(100vw - 50%), -50%, 0); }
    2.5% { top: 100%; opacity: 0.68; transform: translate3d(calc(95vw - 50%), -50%, 0); }
    47% { top: 100%; opacity: 0.68; transform: translate3d(calc(5vw - 50%), -50%, 0); }
    49.6% { top: 100%; opacity: 0; transform: translate3d(-50%, -50%, 0); }
    49.61% { top: 0; opacity: 0; transform: translate3d(-50%, -50%, 0); }
    52.1% { top: 0; opacity: 0.68; transform: translate3d(calc(5vw - 50%), -50%, 0); }
    97.5% { top: 0; opacity: 0.68; transform: translate3d(calc(95vw - 50%), -50%, 0); }
    100% { top: 0; opacity: 0; transform: translate3d(calc(100vw - 50%), -50%, 0); }
  }

  .soul__yin { animation: soul-yin-turn var(--soul-cycle) linear infinite; }
  .soul__disc { animation: soul-disc-arrive 1200ms var(--ease-out) both; }
  .soul__aura { animation: soul-aura-breathe 7s ease-in-out infinite; }
  .soul__mark { animation: soul-six-presence 7s ease-in-out infinite; }

  @keyframes soul-yin-turn { to { transform: rotate(360deg); } }
  @keyframes soul-disc-arrive {
    from { opacity: 0; transform: scale(0.86) rotate(-8deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
  }
  @keyframes soul-aura-breathe { 50% { opacity: 1; transform: scale(1.04); } }
  @keyframes soul-six-presence {
    0%, 100% { filter: drop-shadow(0 0 0.35rem rgba(255, 255, 255, 0.24)); transform: translate(-50%, -50%) scale(1); }
    50% { filter: drop-shadow(0 0 0.7rem rgba(255, 255, 255, 0.42)); transform: translate(-50%, -50%) scale(1.035); }
  }
}

@media (max-width: 56rem) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: 0;
    padding-top: 3.5rem;
  }
  .hero__copy { padding-bottom: 1.5rem; }
  .soul { width: min(100%, 23rem); padding-bottom: 2.5rem; }
  .soul__field { --soul-size: min(58vw, 14rem); min-width: 0; width: var(--soul-size); }
  .soul__caption { margin-top: 0.75rem; }
  .hero__rail { grid-template-columns: 1fr; }
  .hero__rail p { min-height: 0; padding: 0.75rem 0; border-right: 0; border-bottom: 1px solid var(--hair-soft); }
  .hero__rail p:last-child { border-bottom: 0; }
  .accountability,
  .method { grid-template-columns: 1fr; }

  .accountability__facts { grid-template-columns: 1fr; }
  .accountability__facts article,
  .accountability__facts article:first-child {
    padding: 1.25rem 0;
    border-left: 0;
    border-bottom: 1px solid var(--hair-soft);
  }
}

@media (max-width: 34rem) {
  .brand__suffix { display: none; }
  .top__nav { gap: 0.875rem; }
  .hero__statement { margin-top: 1.5rem; }
  .foot { grid-template-columns: 1fr; align-items: start; }
}

@media print {
  .top { background: #ffffff; backdrop-filter: none; }
  .hero { min-height: 0; padding-block: 3rem 0; }
  .motto { font-size: 5rem; }
  .motto em {
    color: #111111;
    background: none;
    -webkit-text-fill-color: currentColor;
    filter: none;
  }
  .soul__yin,
  .soul__disc,
  .soul__aura,
  .soul__mark { animation: none; }
  .js .settle > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .accountability, .method { padding-block: 3rem; break-inside: avoid; }
}