/* Live palette: brand hue is independent of material lighting and readable text. */
:root {
  --theme-primary: #7477f5;
  --theme-secondary: #91d9c7;
  --theme-canvas: #fcfbff;
  --theme-ink: #191a28;
  --theme-muted: #5f6275;
  --theme-dark: #292c43;
  --theme-light: #f5f6ff;
  --accent-a: var(--theme-primary);
  --accent-b: var(--theme-secondary);
  --accent-mix: color-mix(in oklab, var(--accent-a), var(--accent-b));
  --canvas: var(--theme-canvas);
  --ink: var(--theme-ink);
  --muted: var(--theme-muted);
  --line: color-mix(in srgb, var(--accent-a) 13%, var(--canvas));
  --surface: color-mix(in srgb, var(--accent-a) 4%, var(--canvas));
  --blue: var(--accent-a);
  --lavender: var(--a15);
  --peach: var(--b25);
  --mint: var(--b15);
  --a-ink: color-mix(in srgb, var(--accent-a) 48%, var(--ink));
  --b-ink: color-mix(in srgb, var(--accent-b) 35%, var(--ink));
  --gradient-angle: 110deg;
  --gradient-start: 10%;
  --gradient-end: 90%;
  --material-lighting: 0.9;
  --glow-strength: 0.35;
  --texture-strength: 0.08;
  --a5: color-mix(in srgb, var(--accent-a) 5%, var(--canvas));
  --a10: color-mix(in srgb, var(--accent-a) 10%, var(--canvas));
  --a15: color-mix(in srgb, var(--accent-a) 15%, var(--canvas));
  --a20: color-mix(in srgb, var(--accent-a) 20%, var(--canvas));
  --a25: color-mix(in srgb, var(--accent-a) 25%, var(--canvas));
  --a30: color-mix(in srgb, var(--accent-a) 30%, var(--canvas));
  --a35: color-mix(in srgb, var(--accent-a) 35%, var(--canvas));
  --a40: color-mix(in srgb, var(--accent-a) 40%, var(--canvas));
  --a45: color-mix(in srgb, var(--accent-a) 45%, var(--canvas));
  --a50: color-mix(in srgb, var(--accent-a) 50%, var(--canvas));
  --a55: color-mix(in srgb, var(--accent-a) 55%, var(--canvas));
  --a60: color-mix(in srgb, var(--accent-a) 60%, var(--canvas));
  --a65: color-mix(in srgb, var(--accent-a) 65%, var(--canvas));
  --a70: color-mix(in srgb, var(--accent-a) 70%, var(--canvas));
  --a75: color-mix(in srgb, var(--accent-a) 75%, var(--canvas));
  --a80: color-mix(in srgb, var(--accent-a) 80%, var(--canvas));
  --a85: color-mix(in srgb, var(--accent-a) 85%, var(--canvas));
  --a90: color-mix(in srgb, var(--accent-a) 90%, var(--canvas));
  --a95: color-mix(in srgb, var(--accent-a) 95%, var(--canvas));
  --b5: color-mix(in srgb, var(--accent-b) 5%, var(--canvas));
  --b10: color-mix(in srgb, var(--accent-b) 10%, var(--canvas));
  --b15: color-mix(in srgb, var(--accent-b) 15%, var(--canvas));
  --b20: color-mix(in srgb, var(--accent-b) 20%, var(--canvas));
  --b25: color-mix(in srgb, var(--accent-b) 25%, var(--canvas));
  --b30: color-mix(in srgb, var(--accent-b) 30%, var(--canvas));
  --b35: color-mix(in srgb, var(--accent-b) 35%, var(--canvas));
  --b40: color-mix(in srgb, var(--accent-b) 40%, var(--canvas));
  --b45: color-mix(in srgb, var(--accent-b) 45%, var(--canvas));
  --b50: color-mix(in srgb, var(--accent-b) 50%, var(--canvas));
  --b55: color-mix(in srgb, var(--accent-b) 55%, var(--canvas));
  --b60: color-mix(in srgb, var(--accent-b) 60%, var(--canvas));
  --b65: color-mix(in srgb, var(--accent-b) 65%, var(--canvas));
  --b70: color-mix(in srgb, var(--accent-b) 70%, var(--canvas));
  --b75: color-mix(in srgb, var(--accent-b) 75%, var(--canvas));
  --b80: color-mix(in srgb, var(--accent-b) 80%, var(--canvas));
  --b85: color-mix(in srgb, var(--accent-b) 85%, var(--canvas));
  --b90: color-mix(in srgb, var(--accent-b) 90%, var(--canvas));
  --b95: color-mix(in srgb, var(--accent-b) 95%, var(--canvas));
}
.brand-mark {
  display: block;
  width: 26px;
  height: 35px;
  background: var(--ink);
  mask: url("./assets/u-logo.svg") center / contain no-repeat;
  -webkit-mask: url("./assets/u-logo.svg") center / contain no-repeat;
}
.stop-a {
  stop-color: var(--accent-a);
}
.stop-b {
  stop-color: var(--accent-b);
}
.stop-a-light {
  stop-color: var(--a35);
}
.stop-b-light {
  stop-color: var(--b35);
}
.stop-a-deep {
  stop-color: var(--a-ink);
}
.stop-mix {
  stop-color: var(--accent-mix);
}
.material-mark {
  position: relative;
  isolation: isolate;
  flex: none;
  aspect-ratio: 1100 / 1450;
  height: 100%;
  width: auto;
  background: linear-gradient(
    var(--gradient-angle),
    var(--accent-a) var(--gradient-start),
    var(--accent-mix) 52%,
    var(--accent-b) var(--gradient-end)
  );
  mask: url("./assets/u-shape-mask.webp") center / 100% 100% no-repeat;
  -webkit-mask: url("./assets/u-shape-mask.webp") center / 100% 100% no-repeat;
}
.material-mark > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  transform: none !important;
  translate: none !important;
  margin: 0;
  padding: 0;
  transition: none;
  pointer-events: none;
}
.material-mark > .material-shadow {
  opacity: calc(var(--material-lighting) * 0.78);
  z-index: 1;
}
.material-mark > .material-highlight {
  opacity: var(--material-lighting);
  z-index: 2;
}
.hero-art .material-mark {
  height: 515px;
}
.closing-art .material-mark {
  height: 300px;
}
.contact-art .material-mark {
  height: 415px;
}
.closing-art .material-mark,
.contact-art .material-mark {
  transform: translate3d(var(--move-x, 0px), var(--move-y, 0px), 0);
  transition: transform 1s var(--ease);
}
/* The light falls to zero inside its own bounds, even at pointer extremes. */
.hero-art:before {
  inset: -12%;
  background: radial-gradient(
    ellipse at var(--light-x, 50%) var(--light-y, 50%),
    var(--a35),
    transparent 65%
  );
  mask-image: radial-gradient(ellipse closest-side, black 18%, transparent 94%);
  -webkit-mask-image: radial-gradient(
    ellipse closest-side,
    black 18%,
    transparent 94%
  );
  opacity: var(--glow-strength);
}
.hero-atmosphere {
  opacity: calc(var(--glow-strength) * 1.6);
}
.mark-shadow,
.closing-art:after {
  opacity: var(--glow-strength);
}
.hero-art .mark-shadow {
  opacity: var(--glow-strength);
}
.text-spectrum {
  background-image: linear-gradient(
    var(--gradient-angle),
    var(--a-ink) var(--gradient-start),
    var(--b-ink) var(--gradient-end)
  );
}
.why,
.about-belief {
  background:
    radial-gradient(
      ellipse at 95% 90%,
      color-mix(in srgb, var(--accent-b) 14%, transparent),
      transparent 60%
    ),
    radial-gradient(
      ellipse at 0% 0%,
      color-mix(in srgb, var(--accent-a) 18%, transparent),
      transparent 75%
    ),
    var(--theme-dark);
  color: var(--theme-light);
}
.why p,
.about-belief p {
  color: color-mix(in srgb, var(--theme-light) 84%, var(--theme-dark));
}
.why .eyebrow,
.about-belief .eyebrow {
  color: color-mix(in srgb, var(--theme-light) 78%, var(--accent-a));
}
.why .text-link,
.about-belief .statement {
  color: var(--theme-light);
}
.why:before,
.about-belief:before {
  opacity: var(--texture-strength);
}
.button,
.header-cta {
  color: var(--theme-light);
}
.hero-foot,
.eyebrow,
.diagram-caption,
.signal-number,
.outcome > span,
.small-number,
.sheet-row,
.sheet-top {
  color: var(--muted);
}
.about-hero h1 > span {
  color: var(--a-ink);
}
@media (max-width: 1200px) {
  .hero-art .material-mark {
    height: 440px;
  }
}
@media (max-width: 900px) {
  .hero-art .material-mark {
    height: 380px;
  }
  .contact-art .material-mark {
    height: 340px;
  }
}
@media (max-width: 700px) {
  .hero-art .material-mark {
    height: 310px;
  }
  .closing-art .material-mark {
    height: 235px;
  }
  .contact-art .material-mark {
    height: 260px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .material-mark {
    transform: none !important;
    translate: none !important;
  }
}
html[data-theme-motion="off"] {
  scroll-behavior: auto;
}
html[data-theme-motion="off"] *,
html[data-theme-motion="off"] *:before,
html[data-theme-motion="off"] *:after {
  animation: none !important;
  transition: none !important;
}
html[data-theme-motion="off"] .material-mark,
html[data-theme-motion="off"] .reveal {
  transform: none !important;
  translate: none !important;
}
@media (forced-colors: active) {
  .text-spectrum {
    background: none;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
  }
  .material-mark {
    background: CanvasText;
  }
  .brand-mark {
    background: CanvasText;
  }
}

/* The design controls keep a neutral palette while the website is recolored. */
.lab-toggle {
  position: fixed;
  bottom: 22px;
  right: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 17px;
  background: #fff;
  color: #252337;
  border: 1px solid #dedbe8;
  border-radius: 30px;
  box-shadow: 0 6px 24px #28204414;
  font-size: 12px;
  font-weight: 600;
}
.lab-toggle-swatch {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: linear-gradient(
    var(--gradient-angle),
    var(--accent-a),
    var(--accent-b)
  );
  border: 1px solid #00000008;
}
.lab-toggle[hidden],
.theme-lab[hidden],
.lab-export[hidden] {
  display: none;
}
.theme-lab {
  position: fixed;
  z-index: 61;
  right: 0;
  top: 0;
  bottom: 0;
  width: 360px;
  background: #faf9fd;
  color: #252337;
  border-left: 1px solid #ddd9e8;
  box-shadow: -12px 0 45px #2420330b;
  display: flex;
  flex-direction: column;
  font-size: 13px;
}
.theme-lab h2 {
  font-size: 24px;
  letter-spacing: -0.045em;
  color: #252337;
  line-height: 1.1;
}
.theme-lab p {
  font-size: 12px;
  line-height: 1.55;
  color: #696477;
  margin: 0;
}
.theme-lab button,
.theme-lab input,
.theme-lab summary,
.theme-lab textarea {
  font: inherit;
}
.theme-lab button {
  color: #252337;
}
.theme-lab button:focus-visible,
.theme-lab input:focus-visible,
.theme-lab summary:focus-visible,
.lab-toggle:focus-visible {
  outline: 2px solid #6654be;
  outline-offset: 3px;
}
.lab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 23px 22px 18px;
  border-bottom: 1px solid #e6e1ed;
  flex: none;
}
.lab-eyebrow {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #7b738a;
  margin-bottom: 7px;
}
.lab-close {
  width: 36px;
  height: 36px;
  border: 1px solid #e1dcea;
  border-radius: 50%;
  background: transparent;
  font-size: 23px !important;
  line-height: 1;
  display: grid;
  place-items: center;
}
.lab-scroll {
  padding: 19px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
}
.theme-lab .lab-intro {
  margin-bottom: 15px;
}
.lab-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}
.lab-presets button {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  border: 1px solid #e1ddec;
  border-radius: 10px;
  min-height: 49px;
  padding: 9px;
  background: #fff;
  font-size: 10px;
  line-height: 1.35;
}
.lab-presets button[aria-pressed="true"] {
  border-color: #6555ab;
  box-shadow: inset 0 0 0 1px #6555ab;
  background: #f0ecfa;
}
.lab-presets button:hover {
  border-color: #aaa0c2;
}
.lab-preset-swatch {
  width: 24px;
  height: 30px;
  border-radius: 7px;
  flex: none;
  border: 1px solid #0000000a;
}
.lab-details {
  border-top: 1px solid #e2ddea;
}
.lab-details summary {
  padding: 17px 0;
  cursor: pointer;
  font-weight: 600;
  color: #393144;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.lab-details summary:after {
  content: "+";
  color: #81758e;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}
.lab-details[open] summary:after {
  content: "−";
}
.lab-details summary::-webkit-details-marker {
  display: none;
}
.lab-fields {
  padding: 0 0 19px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lab-color-pair {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lab-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #62596e;
  font-size: 11px;
}
.lab-color-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lab-color-controls input[type="color"] {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  width: 27px;
  height: 27px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}
.lab-color-controls input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.lab-color-controls input[type="color"]::-webkit-color-swatch {
  border: 1px solid #00000014;
  border-radius: 6px;
}
.lab-color-controls input[type="text"] {
  width: 78px;
  background: #fff;
  border: 1px solid #e3ddec;
  border-radius: 6px;
  padding: 6px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  color: #40394d;
  text-transform: uppercase;
}
.lab-color-controls input[aria-invalid="true"] {
  border-color: #aa395b;
}
.lab-range {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  color: #62596e;
}
.lab-range > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.lab-range output {
  font-variant-numeric: tabular-nums;
  color: #7b6f8c;
}
.lab-range input {
  width: 100%;
  margin: 0;
  accent-color: #7964b5;
  height: 16px;
  cursor: pointer;
}
.lab-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #62596e;
  min-height: 24px;
}
.lab-check input {
  accent-color: #7964b5;
  margin: 0;
  width: 15px;
  height: 15px;
}
.lab-footer {
  flex: none;
  padding: 15px 22px 20px;
  border-top: 1px solid #e6e1ed;
  background: #faf9fd;
}
.theme-lab .lab-status {
  font-size: 10px;
  margin-bottom: 12px;
  color: #777082;
  min-height: 15px;
}
.lab-actions {
  display: flex;
  gap: 9px;
}
.lab-actions button {
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid #dcd5e8;
  background: white;
  border-radius: 8px;
  font-size: 11px;
}
.lab-actions .lab-copy {
  background: #322c44;
  color: white;
  border-color: #322c44;
  margin-left: auto;
}
.lab-export {
  display: block;
  width: 100%;
  height: 90px;
  margin-top: 12px;
  font-size: 10px;
  background: #fff;
  color: #252337;
  border: 1px solid #dcd5e8;
  border-radius: 6px;
  padding: 8px;
}
.theme-lab-open .lab-toggle {
  display: none;
}
@media (min-width: 1180px) {
  body.theme-lab-open {
    padding-right: 360px;
  }
  .theme-lab-open .hero-grid {
    gap: 15px;
    grid-template-columns: 1.1fr 1fr;
  }
  .theme-lab-open .hero-copy h1 {
    font-size: clamp(48px, 4.3vw, 70px);
  }
  .theme-lab-open .hero-art .material-mark {
    height: 410px;
  }
  .theme-lab-open .main-nav {
    gap: 20px;
    margin-left: 0;
  }
  .theme-lab-open .assessment-panel {
    --panel-padding: 32px;
    gap: 0 20px;
  }
  .theme-lab-open .plan-sheet {
    width: 270px;
  }
  .theme-lab-open .team-card {
    padding: 22px;
  }
  .theme-lab-open .team-card h2 {
    font-size: 28px;
  }
}
@media (max-width: 700px) {
  .lab-toggle {
    bottom: 16px;
    right: 16px;
    font-size: 11px;
    min-height: 43px;
  }
  .theme-lab {
    top: auto;
    width: 100%;
    height: min(620px, 68dvh);
    border: 1px solid #ddd9e8;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px #2420331a;
  }
  .lab-header {
    padding: 15px 20px;
  }
  .lab-scroll {
    padding: 16px 20px;
  }
  .lab-footer {
    padding: 12px 20px;
  }
  .lab-presets button {
    min-height: 45px;
  }
  .theme-lab h2 {
    font-size: 22px;
  }
}
.lab-range > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
html[data-theme-motion="off"]::view-transition-old(root),
html[data-theme-motion="off"]::view-transition-new(root) {
  animation: none !important;
}