/* Genesis. Tokens transcribed from socia.ph (measured 2026-09-06), then the
   page's own markup. Engine classes are not restyled. */

:root {
  --sc-canvas:      #F9F9F9;
  --sc-surface:     #FEFEFE;
  --sc-ink:         #262525;
  --sc-ink-soft:    #6F6F6F;
  --sc-accent:      #3376FF;
  --sc-accent-ink:  #FEFEFE;

  --g-navy:   #051830;
  --g-navy-2: #052146;
  --g-card:   #043F8D;
  --g-blue:   #3376FF;
  --g-blue-l: #82B8FF;
  --g-blue-p: #C7DFFF;
  --g-muted:  #A5A5A5;
  --g-line:   #E3E3E3;
  --g-green:  #3EC259;

  --sc-font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Rethink Sans", "Geist", system-ui, sans-serif;

  --sc-maxw: 80rem;
  --sc-r-sm: 8px; --sc-r-md: 12px; --sc-r-lg: 24px;
  --sc-shadow-color: 218 60% 18%;
  --sc-leading-none: 1.0;
}

/* Navy sections restate colour: `color` is inherited as a computed value. */
.on-navy {
  --sc-canvas:     #051830;
  --sc-surface:    #0B2A5B;
  --sc-ink:        #F5F2F2;
  --sc-ink-soft:   #A7B6D0;
  --sc-accent:     #82B8FF;
  --sc-accent-ink: #051830;
  color: var(--sc-ink);
}

/* Display voice: the reference sets headings at 800 with tight tracking. */
.sc-display { font-weight: 800; letter-spacing: -0.03em; }
.sc-display--md { font-weight: 700; }
h1 em { font-style: normal; color: var(--g-blue); }
b { font-weight: 700; }
.sc-grain { opacity: 0.03; }

/* ----------------------------------------------------------------- bar -- */
.bar {
  position: fixed; z-index: var(--sc-z-chrome);
  top: clamp(0.75rem, 2vw, 1.25rem); left: 50%; translate: -50% 0;
  width: min(calc(100% - 2 * var(--sc-gutter)), var(--sc-maxw));
  display: flex; align-items: center; gap: var(--sc-6);
  padding: 0.55rem 0.6rem 0.55rem 1.1rem;
  border-radius: var(--sc-r-pill);
  background: color-mix(in oklab, #FEFEFE 84%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / 0.06), 0 10px 30px -12px hsl(var(--sc-shadow-color) / 0.18);
  color: #262525;
}
.bar__mark { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-family: var(--sc-font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.035em; }
.bar__mark svg { flex: 0 0 auto; }
.bar__links { display: flex; gap: var(--sc-5); margin-inline-start: var(--sc-2); }
.bar__links a { text-decoration: none; font-weight: 600; color: #262525; padding: 0.4rem 0.2rem; border-bottom: 2px solid transparent; transition: border-color var(--sc-d-fast) var(--sc-ease-out); }
.bar__links a:hover { border-bottom-color: var(--g-blue); }
.bar__cta { margin-inline-start: auto; }

/* --------------------------------------------------------------- buttons --
   White on #3376FF measures 4.2:1. Below AA for 16px body, above the 3:1
   large-text floor at 19px/700. That is the one deviation from the reference
   (its label is 16px): the brand blue stays, the label grows. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--sc-font-text); font-weight: 700; font-size: 1.1875rem; line-height: 1;
  padding: 0.85rem 1.35rem; border-radius: var(--sc-r-pill); text-decoration: none; white-space: nowrap;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
.btn--solid { background: var(--g-blue); color: #FEFEFE; box-shadow: 0 1px 2px hsl(218 60% 18% / 0.12), 0 8px 20px -8px hsl(218 100% 50% / 0.45); }
.btn--solid::after { content: ""; width: 0.9em; height: 0.9em; background: currentColor; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / contain no-repeat; }
.btn--solid:hover { background: #2a68e6; box-shadow: 0 2px 4px hsl(218 60% 18% / 0.14), 0 12px 26px -8px hsl(218 100% 50% / 0.5); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--text { color: #262525; padding-inline: 1.1rem; }
.btn--text:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.btn--big { font-size: 1.3rem; padding: 1.05rem 1.7rem; }

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative; min-height: 100svh; overflow: clip;
  display: grid; place-items: center;
  padding-block: clamp(7rem, 15vh, 10rem) clamp(13rem, 26vh, 17rem);
  isolation: isolate;
}
.hero[data-sc-spotlight]::after { display: none; }
.hero__plane { position: absolute; inset: -12% 0; pointer-events: none; z-index: 0; }
.hero__plane--grid {
  background-image: radial-gradient(circle, color-mix(in oklab, var(--g-blue) 20%, transparent) 1.2px, transparent 1.6px);
  background-size: 28px 28px;
  mask-image: radial-gradient(70% 60% at 50% 45%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, black 20%, transparent 100%);
}
.hero__plane--shapes, .hero__plane--cards { inset: 0; }
.hero__plane--shapes > svg, .hero__plane--cards > .ui { position: absolute; }
.hero__stairs { left: clamp(14rem, 20vw, 20rem); bottom: 20%; width: clamp(6rem, 9vw, 9rem); }
.hero__moon { right: 0; top: 52%; width: clamp(3rem, 5vw, 5rem); }
.hero__spark--a { left: 12%; top: 28%; width: 1.1rem; }
.hero__spark--b { left: 14.5%; top: 31%; width: 1.7rem; }
/* The cards ride a parallax plane; the pointer shift lives on the card itself. */
.ui {
  background: #FEFEFE; border: 1px solid var(--g-line); border-radius: 22px; padding: 1rem;
  box-shadow: 0 1px 2px hsl(218 60% 18% / 0.05), 0 18px 40px -20px hsl(218 60% 18% / 0.25);
  display: grid; gap: 0.7rem; align-content: start;
  transform: translate3d(calc((var(--sc-mx, 0.5) - 0.5) * -22px), calc((var(--sc-my, 0.5) - 0.5) * -14px), 0);
  transition: transform 700ms var(--sc-ease-out);
}
.ui--site { left: var(--sc-gutter); top: 6.4rem; width: clamp(13rem, 17vw, 15rem); padding: 0.8rem; gap: 0.55rem; }
.ui--app  { left: 50%; bottom: clamp(1rem, 3vh, 2rem); translate: -50% 0; width: clamp(7.5rem, 9vw, 9rem); border-radius: 26px; padding: 1.1rem 0.8rem; }
.ui__bar { display: flex; gap: 0.35rem; }
.ui__bar i { width: 9px; height: 9px; border-radius: 50%; background: #E76F5C; }
.ui__bar i:nth-child(2) { background: #FFD41D; } .ui__bar i:nth-child(3) { background: var(--g-green); }
.ui__row { display: flex; gap: 0.6rem; align-items: stretch; }
.ui__blk { display: block; flex: 1 1 0; height: 0.9rem; border-radius: 7px; background: #EEEEEE; min-width: 0; }
.ui__blk--tall { height: 2.9rem; border-radius: 12px; }
.ui__blk--w40 { flex: 0 0 40%; } .ui__blk--w20 { flex: 0 0 22%; }
.ui__blk--blue { background: #C7DFFF; }
.ui__logo { display: inline-flex; align-items: center; gap: 0.4rem; flex: 0 0 40%; }
.ui__logo i { flex: 1; height: 0.7rem; border-radius: 6px; background: #EEEEEE; }
.ui__notch { display: block; width: 44%; height: 8px; border-radius: 4px; background: #262525; margin: 0 auto 0.2rem; }
.ui__pill { position: absolute; left: 0.8rem; bottom: 1.2rem; background: var(--g-blue); color: #FEFEFE; font-weight: 700; font-size: 0.85rem; padding: 0.5rem 0.9rem; border-radius: 999px; box-shadow: 0 8px 18px -8px hsl(218 100% 50% / 0.6); }
.ui__pill--coral { left: auto; right: -1.4rem; bottom: 2.2rem; background: #E76F5C; box-shadow: 0 8px 18px -8px hsl(10 70% 50% / 0.6); }
.ui__cursor { position: absolute; left: 4.4rem; bottom: 0.8rem; width: 1.4rem; }
.hero__copy { position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; gap: var(--sc-5); }
.hero__copy h1 { max-width: none; font-size: clamp(2.4rem, 1rem + 4vw, 4.5rem); line-height: 1.05; letter-spacing: -0.035em; margin-top: -0.35rem; }
.chip {
  display: inline-block; vertical-align: -0.08em; width: 2.1em; height: 0.92em; border-radius: 999px;
  background: linear-gradient(135deg, #0B2A5B 0%, #051830 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 6px 16px -8px hsl(218 60% 18% / 0.6);
  margin: 0 0.06em; overflow: hidden;
}
.chip svg { width: 100%; height: 100%; display: block; padding: 0.1em 0.16em; }
.hero__lede { max-width: 54ch; color: var(--sc-ink-soft); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); }
.eyebrow { margin: 0; font-size: var(--sc-t-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.hero__pain { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.7rem); letter-spacing: -0.015em; color: var(--g-muted); max-width: 48ch; }
.capsule {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem;
  border: 1px solid var(--g-line); border-radius: var(--sc-r-pill); background: color-mix(in oklab, #FEFEFE 70%, transparent);
}
.hero__blurbs { position: absolute; z-index: 2; left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(2.5rem, 7vh, 4.5rem); display: flex; justify-content: space-between; pointer-events: none; }
.blurb { margin: 0; max-width: 13rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.4; }
.blurb b { display: block; color: var(--sc-ink); font-size: var(--sc-t-base); margin-bottom: 0.2rem; }
.blurb--r { text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { animation: hero-rise 720ms var(--sc-ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
  @keyframes hero-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
  .chip svg rect { transform-origin: 50% 100%; animation: chip-grow 900ms var(--sc-ease-out) both; }
  .chip svg rect:nth-child(2) { animation-delay: 120ms; } .chip svg rect:nth-child(3) { animation-delay: 240ms; }
  @keyframes chip-grow { from { transform: scaleY(0.2); } to { transform: none; } }
}
@media (hover: none), (pointer: coarse) { .ui { transform: none; } }

/* ------------------------------------------------------------ elevate -- */
.elev__stage { background: #F2F2F2; }
.elev__track { position: absolute; left: var(--sc-gutter); bottom: clamp(3.4rem, 16.4vh, 12.4rem); z-index: 3; display: grid; gap: 1.05rem; }
.elev__track::before { content: ""; position: absolute; left: 5.5px; translate: -50% 0; top: -0.5rem; bottom: -0.5rem; width: 2px; border-radius: 2px; background: color-mix(in oklab, var(--g-blue) 20%, transparent); }
.elev__dot {
  --t: clamp(0, calc((var(--sc-p, 0) - var(--a)) * 26), 1);
  --cur: calc(var(--t) * (1 - clamp(0, calc((var(--sc-p, 0) - var(--b)) * 26), 1)));
  position: relative; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--g-blue) 30%, transparent);
  background: var(--sc-canvas);
  box-shadow: 0 0 0 calc(var(--cur) * 4px) color-mix(in oklab, var(--g-blue) 18%, transparent);
}
.elev__dot::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--g-blue);
  opacity: var(--t); transform: scale(calc(0.4 + 0.6 * var(--t)));
}
.elev__line {
  position: absolute; left: calc(var(--sc-gutter) + 1.5rem); right: var(--sc-gutter);
  bottom: clamp(3rem, 16vh, 12rem); max-width: 22ch;
  font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem); letter-spacing: -0.025em; line-height: 1.05;
  text-wrap: balance; margin: 0; will-change: opacity, transform;
}
.elev__line--turn { color: var(--g-blue); }

/* --------------------------------------------------------------- sheet -- */
.sheet {
  min-height: 52vh; display: grid; place-items: center; padding: var(--sc-8) var(--sc-gutter);
  background: linear-gradient(to bottom, #F2F2F2 0%, #0B2A52 30%, #051830 48%);
}
.sheet__line { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg); letter-spacing: -0.01em; color: var(--sc-ink); text-align: center; }

/* ---------------------------------------------------------------- rise --
   The signature move. --sc-p is published on the act by the engine; every
   shape computes its own draw progress from a start and end fraction. */
.rise { --sc-p: 0; }
.rise__stage {
  --fill: clamp(0, calc((var(--sc-p) - 0.74) / 0.12), 1);
  overflow: clip;
  background: color-mix(in oklab, #F9F9F9 calc(var(--fill) * 100%), #051830);
  color: #F5F2F2; transition: color 220ms var(--sc-ease-out);
}
.rise__stage.is-built { color: #262525; }
.rise__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: calc(0.9 - var(--fill));
  background-image:
    linear-gradient(color-mix(in oklab, #82B8FF 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, #82B8FF 14%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in oklab, #82B8FF 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, #82B8FF 7%, transparent) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
.rise__title {
  position: absolute; z-index: 3; left: var(--sc-gutter); top: clamp(5.5rem, 12vh, 8rem); margin: 0;
  color: inherit;
}
.rise__fig {
  position: absolute; inset: 0; margin: 0; z-index: 2;
  display: grid; place-items: center; padding: clamp(7rem, 15vh, 10rem) var(--sc-gutter) clamp(4rem, 9vh, 6rem);
}
.rise__sheet { position: relative; width: min(100%, 60rem, 105vh); }
.bp--main { width: 100%; height: auto; }
.bp__strokes { stroke: #82B8FF; stroke-width: 2; }
.bp--main .bp__strokes > .s { opacity: calc(1 - var(--fill)); }
.bp--main .bp__dims { stroke: color-mix(in oklab, #82B8FF calc((1 - var(--fill)) * 100%), #3376FF); stroke-width: 1.5; }
.bp .s {
  --t: clamp(0, calc((var(--sc-p, 0) - var(--d0)) * var(--k)), 1);
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t));
}
.bp__fill { opacity: var(--fill); font-family: var(--sc-font-text); }
.bp .bp-grid { stroke-width: 1; opacity: 0.5; }
.rise__callouts { position: absolute; inset: 0; pointer-events: none; margin: 0; }
.callout {
  position: absolute; margin: 0; max-width: 15rem;
  font-size: var(--sc-t-sm); line-height: 1.3;
  color: inherit;
}
.callout b { display: block; font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-lg); letter-spacing: -0.02em; margin-bottom: 0.15rem; }
.callout span { color: #A7B6D0; transition: color 220ms var(--sc-ease-out); }
.is-built .callout span { color: #6F6F6F; }
.callout--1 { left: 38.5%; bottom: 87.5%; }
.callout--2 { left: 25%; top: 86.5%; }
.callout--3 { left: 76.5%; bottom: 82.5%; max-width: 17rem; }
.callout--4 { left: 76%; top: 81%; }
.rise__built { position: absolute; z-index: 3; left: 50%; bottom: clamp(2rem, 6vh, 4rem); translate: -50% 0; margin: 0; text-align: center; font-weight: 600; color: inherit; }

/* ------------------------------------------------------------ services -- */
.svc { padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.svc__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--sc-5); row-gap: var(--sc-7); align-items: start; }
.svc__head { grid-column: 1 / 6; }
.svc__head .sc-body { margin-top: var(--sc-4); }
.svc__from { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--sc-5); align-items: baseline; margin: var(--sc-5) 0 0; padding-top: var(--sc-5); border-top: 2px solid var(--sc-ink); }
.svc__from b { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem); letter-spacing: -0.03em; color: var(--g-blue); white-space: nowrap; font-variant-numeric: tabular-nums; }
.svc__from span { display: block; grid-column: 1 / -1; margin-top: 0.5rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 46ch; line-height: 1.55; }
.svc__ledger { grid-column: 1 / 8; grid-row: 2; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--g-line); }
.svc__ledger li { display: grid; grid-template-columns: 4rem 1fr; column-gap: var(--sc-4); padding: var(--sc-4) 0; border-bottom: 1px solid var(--g-line); }
.svc__ledger h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-xl); letter-spacing: -0.02em; line-height: 1.05; }
.svc__ledger li > p:not(.svc__price) { grid-column: 2 / -1; margin: 0.35rem 0 0; color: var(--sc-ink-soft); max-width: 52ch; }
.svc__n { grid-row: 1 / span 2; font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-xl); color: var(--g-blue); font-variant-numeric: tabular-nums; line-height: 1.05; }
.svc__steps { grid-column: 9 / 13; grid-row: 1 / span 2; background: var(--g-navy); color: #F5F2F2; border-radius: var(--sc-r-lg); padding: var(--sc-6); box-shadow: var(--sc-e2); }
.svc__steps-title { margin: 0 0 var(--sc-5); font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-lg); letter-spacing: -0.02em; }
.svc__steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-4); }
.svc__steps li { display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--sc-3); align-items: start; padding-top: var(--sc-4); border-top: 1px solid color-mix(in oklab, #FEFEFE 14%, transparent); }
.svc__steps li:first-child { border-top: 0; padding-top: 0; }
.svc__steps li span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--g-blue); color: #FEFEFE; font-family: var(--sc-font-display); font-weight: 800; font-size: 1rem; }
.svc__steps li div { color: #C9D4E8; }
.svc__steps li b { color: #F5F2F2; }


/* ---------------------------------------------------------------- demos --
   Two looping CSS mockups: the public site, and the system behind it. No video
   files, so they stay sharp at any size and cost nothing to load. */
.demo { background: #F2F2F2; }
.demo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.demo__item { margin: 0; display: grid; gap: var(--sc-5); }
.demo__item figcaption { display: grid; gap: var(--sc-3); }
.demo__item h3 { margin: 0; }
.demo__note { margin: var(--sc-6) auto 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.demo__screen { position: relative; aspect-ratio: 16 / 11; border-radius: var(--sc-r-lg); background: #FEFEFE; border: 1px solid var(--g-line); box-shadow: var(--sc-e2); overflow: hidden; }
.demo__bar { height: 8.5%; min-height: 22px; background: #F9F9F9; border-bottom: 1px solid var(--g-line); display: flex; align-items: center; gap: 5px; padding: 0 3.5%; }
.demo__bar i { width: 7px; height: 7px; border-radius: 50%; background: #E3E3E3; flex: 0 0 auto; }
.demo__url { margin-left: 6px; font-size: 0.62rem; color: var(--g-muted); background: #FEFEFE; border: 1px solid var(--g-line); border-radius: 999px; padding: 0.12rem 0.6rem; overflow: hidden; white-space: nowrap; }
.demo__body { position: absolute; inset: 8.5% 0 0; padding: 5% 6%; }

/* --- the public site --- */
.site__h, .site__p, .site__btn, .site__field, .site__go { display: block; }
.site__h { width: 62%; height: 9%; border-radius: 4px; background: #262525; }
.site__h--2 { width: 44%; margin-top: 4%; background: var(--g-blue); }
.site__p { width: 70%; height: 4.5%; border-radius: 3px; background: #E3E3E3; margin-top: 7%; }
.site__p--s { width: 52%; margin-top: 3%; }
.site__btn { position: absolute; left: 6%; bottom: 16%; padding: 0.34rem 0.85rem; border-radius: 999px; background: var(--g-blue); color: #FEFEFE; font-size: 0.66rem; font-weight: 700; width: max-content; }
.site__cursor { position: absolute; width: 13px; height: 13px; left: 70%; top: 72%; opacity: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 2l16 9-7 2-3 7z' fill='%23262525' stroke='white' stroke-width='1.5' stroke-linejoin='round'/></svg>") center / contain no-repeat; }
.site__panel { position: absolute; inset: auto 6% 6%; background: #FEFEFE; border: 1px solid var(--g-line); border-radius: 12px; padding: 5%; display: grid; gap: 6%; box-shadow: var(--sc-e2); opacity: 0; transform: translateY(12%); }
.site__field { height: 0.8rem; border-radius: 5px; background: #F2F2F2; border: 1px solid var(--g-line); overflow: hidden; }
.site__field i { display: block; height: 100%; width: 0; background: #C7DFFF; }
.site__go { justify-self: start; padding: 0.28rem 0.8rem; border-radius: 999px; background: var(--g-blue); color: #FEFEFE; font-size: 0.62rem; font-weight: 700; }
.site__done { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.5rem; background: #FEFEFE; opacity: 0; }
.site__done svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: var(--g-green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.site__done b { font-family: var(--sc-font-display); font-size: 1rem; }

/* --- the internal system --- */
.dash { display: grid; grid-template-columns: 20% 1fr; gap: 5%; padding: 4.5% 5%; }
.dash__side { display: grid; align-content: start; gap: 11%; }
.dash__side b { height: 0.5rem; border-radius: 3px; background: var(--g-blue); }
.dash__side i { height: 0.36rem; border-radius: 3px; background: #EEEEEE; }
.dash__side i.is-on { background: #C7DFFF; }
.dash__main { display: grid; grid-template-rows: auto 1fr auto; gap: 7%; min-width: 0; }
.dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; }
.dash__kpi { display: grid; gap: 0.18rem; min-width: 0; }
.dash__kpi em { font-style: normal; font-size: 0.5rem; color: var(--g-muted); white-space: nowrap; overflow: hidden; }
.dash__num { height: 1.05em; overflow: hidden; font-family: var(--sc-font-display); font-weight: 800; font-size: 0.82rem; line-height: 1.05; color: #262525; }
.dash__num i { display: block; font-style: normal; }
.dash__chart { width: 100%; height: 100%; }
.dash__chart line { stroke: #F2F2F2; stroke-width: 1; }
.dash__line { fill: none; stroke: var(--g-blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.dash__rows { display: grid; gap: 0.3rem; }
.dash__row { display: grid; grid-template-columns: 1.6fr 1fr auto; gap: 6%; align-items: center; padding: 0.22rem 0.35rem; border-radius: 5px; background: #F9F9F9; }
.dash__row i { height: 0.3rem; border-radius: 3px; background: #E3E3E3; }
.dash__row b { width: 1.5rem; height: 0.42rem; border-radius: 999px; background: #EBF8ED; }
.dash__row--new b { background: var(--g-green); }

@media (prefers-reduced-motion: no-preference) {
  .site__cursor { animation: dm-cursor 10s var(--sc-ease-out) infinite; }
  .site__panel  { animation: dm-panel 10s var(--sc-ease-out) infinite; }
  .site__field i { animation: dm-fill 10s linear infinite; animation-delay: var(--d); }
  .site__btn    { animation: dm-press 10s ease-out infinite; }
  .site__done   { animation: dm-done 10s var(--sc-ease-out) infinite; }
  .dash__num span { display: block; animation: dm-tick 10s cubic-bezier(0.23,1,0.32,1) infinite; }
  .dash__line   { animation: dm-draw 10s ease-out infinite; }
  .dash__row--new { animation: dm-row 10s var(--sc-ease-out) infinite; }

  @keyframes dm-cursor {
    0%,12% { opacity: 0; left: 72%; top: 74%; }
    18%    { opacity: 1; }
    30%    { opacity: 1; left: 13%; top: 78%; }
    33%    { transform: scale(0.82); }
    36%    { transform: scale(1); }
    46%    { opacity: 1; left: 13%; top: 78%; }
    52%,100% { opacity: 0; }
  }
  @keyframes dm-press { 0%,32% { transform: none; } 34% { transform: scale(0.94); } 37%,100% { transform: none; } }
  @keyframes dm-panel {
    0%,34%  { opacity: 0; transform: translateY(12%); }
    41%,72% { opacity: 1; transform: none; }
    78%,100%{ opacity: 0; transform: translateY(6%); }
  }
  @keyframes dm-fill { 0%,42% { width: 0; } 56%,72% { width: 100%; } 78%,100% { width: 100%; opacity: 0; } }
  @keyframes dm-done { 0%,74% { opacity: 0; } 80%,94% { opacity: 1; } 99%,100% { opacity: 0; } }
  @keyframes dm-tick { 0%,30% { transform: none; } 33%,63% { transform: translateY(-1.05em); } 66%,100% { transform: translateY(-2.1em); } }
  @keyframes dm-draw { 0% { stroke-dashoffset: 1; } 45%,100% { stroke-dashoffset: 0; } }
  @keyframes dm-row {
    0%,30%  { opacity: 0; transform: translateY(-110%); background: #C7DFFF; }
    38%     { opacity: 1; transform: none; background: #C7DFFF; }
    52%,100%{ opacity: 1; transform: none; background: #F9F9F9; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .site__panel { opacity: 1; transform: none; }
  .site__field i { width: 100%; }
  .site__cursor, .site__done { opacity: 0; }
}

/* the useful passage: advice that holds whoever they hire */
.svc__ask { grid-column: 1 / -1; margin-top: var(--sc-5); padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--g-line); border-radius: var(--sc-r-lg); background: #FEFEFE; }
.svc__ask-title { margin: 0 0 var(--sc-5); font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-lg); letter-spacing: -0.02em; }
.svc__ask ol { margin: 0; padding: 0; list-style: none; counter-reset: ask; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sc-5); }
.svc__ask li { counter-increment: ask; position: relative; padding-top: 2.1rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
.svc__ask li::before { content: counter(ask); position: absolute; top: 0; left: 0; font-family: var(--sc-font-display); font-weight: 800; font-size: 1.35rem; color: var(--g-blue); line-height: 1; }
.svc__ask b { display: block; color: var(--sc-ink); font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-base); letter-spacing: -0.01em; margin-bottom: 0.3rem; line-height: 1.25; }
.svc__ask em { display: block; margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--g-line); font-style: normal; font-weight: 600; color: var(--g-blue); }

/* ------------------------------------------------------------ leverage -- */
.lev__stage { display: flex; align-items: center; }
.lev__rail { gap: clamp(1.5rem, 4vw, 4rem); padding-inline: var(--sc-gutter); align-items: stretch; }
.lev__item { flex: 0 0 auto; width: clamp(19rem, 30vw, 27rem); padding: var(--sc-6); border-radius: var(--sc-r-lg); background: #FEFEFE; border: 1px solid var(--g-line); box-shadow: var(--sc-e1); display: flex; flex-direction: column; gap: var(--sc-3); }
.lev__item--lead { width: clamp(20rem, 36vw, 34rem); background: transparent; border: 0; box-shadow: none; justify-content: center; }
.lev__big { margin: 0; font-size: clamp(7rem, 4rem + 14vw, 17rem); line-height: 0.85; color: var(--g-blue); letter-spacing: -0.06em; }
.lev__big span { font-size: 0.5em; vertical-align: top; color: var(--g-blue-l); margin-left: 0.05em; }
.lev__item h3 { margin: 0; }
.lev__fact { margin: 0; font-weight: 700; color: var(--g-blue); }
.lev__item .sc-body { max-width: none; }
.lev__item--tbd { border: 2px dashed var(--g-muted); background: transparent; box-shadow: none; }
.lev__item--tbd .lev__fact { color: var(--g-muted); }
@media (prefers-reduced-motion: no-preference) {
  .lev__item:not(:first-child) {
    --t: clamp(0, calc((var(--sc-p, 0) * 1.7 - var(--i) * 0.22) / 0.34), 1);
    opacity: calc(0.55 + 0.45 * var(--t));
    transform: translate3d(0, calc((1 - var(--t)) * 22px), 0);
  }
}


/* ------------------------------------------------------------- clients --
   Two monochrome wordmark rows travelling opposite ways, like the reference's
   partner marquee. Placeholders until real logos are cleared. */
.cli { padding-block: 1.5rem clamp(4rem, 8vw, 7rem); overflow: clip; }
.cli__rail { display: grid; gap: 1.25rem; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.cli__row { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(2rem, 5vw, 5rem); width: max-content; will-change: transform; }
.wm { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--c, #262525); white-space: nowrap; opacity: 0.9; padding: 0.4rem 0; }
.wm__mark { width: 1.6rem; height: 1.6rem; display: inline-block; }
.wm__mark svg { width: 100%; height: 100%; fill: currentColor; }
.wm__name { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1; color: #262525; }
.wm--caps .wm__name { text-transform: uppercase; font-weight: 800; letter-spacing: 0.08em; font-size: 1.1rem; }
.wm--serif .wm__name { font-weight: 500; font-style: italic; font-size: 1.55rem; }
.wm--script .wm__name { font-family: var(--sc-font-text); font-weight: 700; letter-spacing: -0.03em; }
.wm--round .wm__name { font-weight: 700; padding: 0.2rem 0.7rem; border: 2px solid currentColor; border-radius: 999px; font-size: 1.05rem; }
.wm--mono .wm__name { font-family: var(--sc-font-mono); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; }
.wm__cc { font-family: var(--sc-font-text); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: #FEFEFE; background: #A5A5A5; padding: 0.15rem 0.4rem; border-radius: 4px; }
.cli__cap { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: var(--sc-4); }
.cli__cap h2 { max-width: 24ch; }
.cli__note { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
@media (prefers-reduced-motion: no-preference) {
  .cli__row--a { animation: cli-a 48s linear infinite; }
  .cli__row--b { animation: cli-b 56s linear infinite; }
  @keyframes cli-a { to { transform: translate3d(-50%, 0, 0); } }
  @keyframes cli-b { from { transform: translate3d(-50%, 0, 0); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .cli__rail { mask-image: none; -webkit-mask-image: none; }
  .cli__row { width: auto; flex-wrap: wrap; gap: 1rem 2.5rem; padding-inline: var(--sc-gutter); }
  .cli__row > li:nth-child(n+7) { display: none; }
}

/* --------------------------------------------------------------- close -- */
.close__stage { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; background: #051830; overflow: clip; isolation: isolate; }
.close__mark { position: absolute; inset: auto -12% -22% auto; width: 62%; opacity: 0.16; pointer-events: none; }
.close__mark .bp__strokes { stroke: #3376FF; stroke-width: 2; }
.close__mark .s { stroke-dasharray: none; stroke-dashoffset: 0; }
.close__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: clamp(7rem, 15vh, 10rem) var(--sc-gutter) var(--sc-8); max-width: var(--sc-maxw); margin-inline: auto; width: 100%; }
.close__inner { display: grid; gap: var(--sc-5); }
.close__inner .sc-display { max-width: 14ch; }
.close__alt { margin: 0; color: var(--sc-ink-soft); }
.close__alt a { color: #F5F2F2; text-decoration-color: #82B8FF; }
.book { display: grid; gap: var(--sc-4); background: color-mix(in oklab, #FEFEFE 6%, transparent); border: 1px solid color-mix(in oklab, #FEFEFE 14%, transparent); border-radius: var(--sc-r-lg); padding: clamp(1.25rem, 3vw, 2rem); backdrop-filter: blur(6px); }
.book__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
.book__field { display: grid; gap: 0.4rem; font-size: var(--sc-t-sm); font-weight: 600; color: #C9D4E8; }
.book__field em { font-style: normal; font-weight: 400; color: var(--sc-ink-soft); }
.book__field :is(input, select, textarea) { width: 100%; font: inherit; font-weight: 500; font-size: var(--sc-t-base); color: #F5F2F2; background: color-mix(in oklab, #FEFEFE 8%, transparent); border: 1px solid color-mix(in oklab, #FEFEFE 18%, transparent); border-radius: var(--sc-r-md); padding: 0.7rem 0.85rem; transition: border-color var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out); }
.book__field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2382B8FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 1rem; padding-right: 2.4rem; }
.book__field select option { color: #262525; }
.book__field :is(input, select, textarea):hover { border-color: color-mix(in oklab, #FEFEFE 32%, transparent); }
.book__field :is(input, select, textarea):focus-visible { outline: 2px solid #82B8FF; outline-offset: 2px; border-color: #82B8FF; background: color-mix(in oklab, #FEFEFE 11%, transparent); }
.book__field textarea { resize: vertical; min-height: 4.5rem; }
.book__field.is-invalid :is(input, select) { border-color: #E76F5C; }
.book__honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.book__actions { display: flex; align-items: center; gap: var(--sc-4); flex-wrap: wrap; }
.book__actions .btn { cursor: pointer; border: 0; }
.book__actions .btn[disabled] { opacity: 0.6; cursor: wait; }
.book__status { margin: 0; color: #C9D4E8; font-size: var(--sc-t-sm); }
.book__note { flex-basis: 100%; margin: 0.2rem 0 0; color: #C9D4E8; font-size: var(--sc-t-sm); line-height: 1.5; }
.book__status.is-error { color: #FFB3A3; }
.book.is-sent .book__row, .book.is-sent > .book__field, .book.is-sent .btn { display: none; }
.book.is-sent .book__status { font-size: var(--sc-t-lg); color: #F5F2F2; font-weight: 600; line-height: 1.4; }
.foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); padding: var(--sc-5) var(--sc-gutter); border-top: 1px solid color-mix(in oklab, #FEFEFE 14%, transparent); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.foot p { margin: 0; }
.foot b { color: #F5F2F2; font-family: var(--sc-font-display); font-weight: 800; font-size: 1rem; letter-spacing: -0.03em; }
.foot__brand { display: inline-flex; align-items: center; gap: 0.5rem; }

/* -------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .bar { gap: var(--sc-3); padding: 0.45rem 0.45rem 0.45rem 0.9rem; }
  .bar__links { display: none; }
  .wm__name { font-size: 1.2rem; }
  .btn { font-size: 1.0625rem; padding: 0.75rem 1.1rem; }
  .hero { padding-bottom: 12rem; }
  .hero__copy h1 { font-size: clamp(2.1rem, 1.2rem + 5.2vw, 3rem); max-width: 15ch; }
  .ui--site, .hero__stairs, .hero__spark { display: none; }
  .hero { padding-bottom: 14rem; }
  .ui--app { bottom: 1.5rem; }
  .hero__moon { top: 30%; }
  .hero__blurbs { display: none; }
  .capsule { flex-direction: column; align-items: stretch; border-radius: var(--sc-r-lg); }
  .capsule .btn { justify-content: center; }
  .elev__line { max-width: none; font-size: clamp(1.6rem, 1rem + 4.2vw, 2.4rem); }
  .rise__title { top: 5.5rem; }
  .rise__fig { padding: 9rem var(--sc-4) 11rem; align-items: start; }
  .rise__callouts { position: static; display: grid; gap: 0.6rem; padding: 0 var(--sc-4); }
  .callout { position: static; max-width: none; }
  .callout b { display: inline; font-size: var(--sc-t-base); margin-right: 0.4rem; }
  .rise__fig { display: block; }
  .rise__sheet { width: 100%; }
  .rise__built { bottom: 1.5rem; width: calc(100% - 2rem); }
  .svc__head, .svc__ledger, .svc__steps { grid-column: 1 / -1; }
  .svc__ledger li { grid-template-columns: 3rem 1fr; }
      .svc__ledger li > p:not(.svc__price) { grid-column: 2; grid-row: 3; }
  .svc__steps { grid-row: auto; }
  .svc__ledger { grid-row: auto; }
  .demo { padding-block: clamp(3rem, 8vw, 4.5rem); }
  .demo__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .demo__item { gap: var(--sc-4); }
  .lev__item { width: min(78vw, 22rem); padding: var(--sc-5); }
  .lev__item--lead { width: min(84vw, 24rem); }
  .close__grid { grid-template-columns: 1fr; padding-top: 6.5rem; }
  .book__row { grid-template-columns: 1fr; }
}

/* CRO refinements: retain the original Genesis visual language. */
.svc__quote { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--g-line); font-size: 1rem; line-height: 1.6; }
.demo__intro { margin-bottom: 2.5rem; }
.demo__intro .sc-body { max-width: 60ch; margin-top: 1rem; }
.demo__comparison { display: grid; gap: 1.25rem; margin: 1.5rem 0 0; font-size: 1rem; line-height: 1.6; }
.demo__comparison div { border-top: 1px solid var(--g-line); padding-top: 1rem; }
.demo__comparison dt { font-weight: 700; color: var(--g-navy); }
.demo__comparison dd { margin: .4rem 0 0; color: var(--sc-ink-soft); }
.hero__copy h1 { max-width: 23ch; text-wrap: balance; }
.hero__note { margin: 0; font-size: .9rem; color: #525b69; }
.sheet .sc-wrap { padding-block: 4rem; }
.sheet .sc-lede { margin-top: 1.25rem; max-width: 58ch; }
.svc__ledger h3 { line-height: 1.2; }
@media (max-width: 640px) {
 .hero__copy h1 { max-width: 20ch; font-size: clamp(2rem, 8.4vw, 2.8rem); }
 .bar__cta { font-size: .875rem; padding-inline: .85rem; }
 .hero__copy .capsule { max-width: 100%; }
 .hero__copy .btn { white-space: normal; text-align: center; }
}

/* Original-design polish: preserve the composition and visual identity. */
html{scroll-padding-top:6.5rem}
.hero__copy{padding-inline:1rem}
.hero__lede{text-wrap:pretty;line-height:1.6}
.btn:focus-visible,.bar a:focus-visible{outline:3px solid #1c54c7;outline-offset:5px}
.on-navy .btn:focus-visible{outline-color:#a5c8ff}
.book__honey{display:none}
.book__field :is(input,select,textarea){scroll-margin-top:7rem}
.demo__comparison dd{max-width:58ch}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .btn{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,background-color .3s}
 .btn--solid::after{transition:translate .3s cubic-bezier(.22,1,.36,1)}
 .btn--solid:hover::after{translate:3px 0}
}
@media(max-width:640px){
 .book__field :is(input,select,textarea){font-size:16px}
 .bar__cta{min-height:44px;background:#2463df}
 .hero__copy{padding-inline:1.25rem}
 .hero__lede{font-size:1.0625rem;line-height:1.6}
 .hero__note{font-size:.8125rem}
 .book__actions .btn{width:100%;white-space:normal;line-height:1.3}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* AI assistant demo: nightly owner report */
.demo__item--wide { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.chat { display: flex; flex-direction: column; gap: 3.5%; background: #F4F7FC; font-size: clamp(0.62rem, 1.05vw, 0.86rem); line-height: 1.35; }
.chat__msg { margin: 0; max-width: 78%; padding: 2.4% 3.6%; border-radius: 12px; background: #FEFEFE; border: 1px solid var(--g-line); color: var(--sc-ink); }
.chat__msg b { display: block; font-size: 0.82em; color: var(--g-muted); font-weight: 600; margin-bottom: 0.15em; }
.chat__msg--report { align-self: flex-end; background: var(--g-navy, #051830); border-color: transparent; color: #FEFEFE; display: grid; gap: 0.3em; }
.chat__msg--report b { color: #82B8FF; font-size: 0.9em; }
.chat__line { display: flex; justify-content: space-between; gap: 1.5em; }
.chat__line em { font-style: normal; opacity: 0.8; }
.chat__flag { margin-top: 0.3em; padding-top: 0.45em; border-top: 1px solid rgba(254,254,254,0.18); color: #FFD9A8; }
@media (max-width: 860px) {
  .demo__item--wide { grid-template-columns: 1fr; }
  .chat { font-size: 0.72rem; }
}