/* Kydosa value-led concept. Shared tokens, components, then responsive layouts. */
:root {
  --paper:#fdfaf1;
  --cream:#fff9ef;
  --ink:#141019;
  --muted:#3f3446;
  --plum:#38233f;
  --teal:#087f73;
  --coral:#d9573d;
  --gold:#d48d1f;
  --line:#ded8cf;
  --font:'Plus Jakarta Sans',Arial,sans-serif;
  --display:'Plus Jakarta Sans',Arial,sans-serif;
}

* {
  box-sizing:border-box;
}

body,h1,h2,h3,p,figure {
  margin:0;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:108px;
}

body {
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

button,input,textarea,select {
  font:inherit;
}

button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:default;
}

img {
  max-width:100%;
  display:block;
}

button,a {
  -webkit-touch-callout:default;
}

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

[hidden] {
  display:none!important;
}

.wrap {
  width:min(1240px,calc(100% - 112px));
  margin-inline:auto;
}

.skip {
  position:fixed;
  left:16px;
  top:-90px;
  background:var(--plum);
  color:white;
  padding:12px 22px;
  z-index:100;
}

.skip:focus {
  top:12px;
}

.eyebrow {
  font-size:10px;
  letter-spacing:.16em;
  font-weight:650;
  line-height:1.6;
}

.accent,em {
  color:var(--teal);
}

em {
  font-style:normal;
}

h1,h2,h3 {
  font-family:var(--display);
  font-weight:800;
  letter-spacing:0;
  line-height:1.13;
}

.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:89px;
  gap:25px;
}

.brand {
  width:120px;
  flex-shrink:0;
  display:block;
}

.brand img {
  width:100%;
  height:auto;
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:12px;
  font-weight:550;
}

.site-header nav a:not(.nav-contact) {
  padding:10px 0;
  position:relative;
}

.site-header nav a:is([aria-current=page],[aria-current=location]):not(.nav-contact):after,.site-header nav a:not(.nav-contact):hover:after {
  content:'';
  position:absolute;
  bottom:4px;
  left:0;
  right:0;
  height:1px;
  background:currentColor;
}

.nav-contact {
  border:1px solid var(--plum);
  border-radius:5px;
  padding:11px 17px;
  display:flex;
  gap:22px;
  align-items:center;
}

.nav-contact:hover {
  background:var(--plum);
  color:var(--paper);
}

.nav-contact span {
  font-size:20px;
  line-height:1;
}

.menu-toggle {
  display:none;
}

.hero {
  padding-top:59px;
}

.hero>.eyebrow {
  text-align:center;
  color:var(--muted);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
}

.tiny-star {
  color:var(--coral);
  font-size:19px;
  line-height:1;
}

.hero h1 {
  font-size:clamp(46px,5.8vw,83px);
  text-align:center;
  line-height:1.09;
  letter-spacing:0;
  margin:21px 0 26px;
}

.equation {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  font-size:14px;
  line-height:1.5;
  flex-wrap:wrap;
}

.equation b {
  font-weight:400;
  font-size:22px;
  color:#988896;
}

.equation-result {
  color:var(--teal);
}

.mesh-stage {
  margin:32px auto 0;
  max-width:1100px;
}

.mesh-svg {
  display:block;
  width:100%;
  overflow:visible;
}

.mesh-svg text {
  font-family:var(--font);
}

.diagram-label {
  font-size:10px;
  letter-spacing:1px;
  font-weight:600;
}

.diagram-node {
  fill:#534656;
  font-size:13px;
}

.diagram-result {
  font-size:20px;
  font-weight:500;
}

.mesh-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 26px;
  min-height:35px;
  font-size:9px;
  letter-spacing:.15em;
  color:var(--muted);
}

.motion-toggle {
  font-size:10px;
  letter-spacing:0;
  background:none;
  color:var(--muted);
  border:0;
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
}

.worker-float {
  animation:bob 5s ease-in-out infinite;
  animation-delay:var(--delay);
}

.flow-dash {
  animation:flow 18s linear infinite;
}

.flow-dash.reverse {
  animation-duration:24s;
}

.results-line {
  display:flex;
  justify-content:space-between;
  gap:40px;
  border-top:1px solid var(--line);
  padding:33px 0 38px;
  margin-top:23px;
  align-items:center;
}

.results-line .eyebrow {
  font-size:9px;
  letter-spacing:.13em;
  color:var(--muted);
}

.results-line h2 {
  font-size:36px;
  margin-top:9px;
  letter-spacing:0;
}

.results-line em {
  color:var(--coral);
}

.results-copy {
  display:flex;
  align-items:center;
  gap:55px;
  font-size:13px;
  color:var(--muted);
}

.text-link {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-size:12px;
  font-weight:600;
  min-height:35px;
  border-bottom:0;
  padding-bottom:3px;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:32px 1px;
  transition:color .25s,background-size .35s ease;
  color:var(--ink);
  width:fit-content;
}

.text-link span {
  font-size:20px;
}

.text-link:is(:hover,:focus-visible) {
  color:var(--teal);
  background-size:100% 1px;
}

.work-section {
  background:#eae7e5;
  padding:91px 0 49px;
  border-top:1px solid #e3dcd5;
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:45px;
}

.section-heading .eyebrow {
  margin-bottom:18px;
  color:#675b6a;
}

.section-heading h2 {
  font-size:clamp(38px,4vw,56px);
}

.section-aside {
  font-size:15px;
  line-height:1.65;
  max-width:340px;
}

.prototype-note {
  display:block;
  font-size:10px;
  color:#716474;
  margin-top:14px;
}

.work-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.work-card {
  min-width:0;
}

.work-preview {
  border:0;
  width:100%;
  display:block;
  text-align:left;
  background:#d8ddd7;
  padding:27px 18px 13px;
  border-radius:7px;
  color:var(--ink);
  overflow:hidden;
  min-height:286px;
  position:relative;
}

.growth-card .work-preview {
  background:#e0d8e0;
}

.pricing-card .work-preview {
  background:#ebdbc2;
}

.demo-ui {
  background:#f9faf7;
  border:1px solid #c4cdc0;
  border-radius:5px;
  height:221px;
  box-shadow:0 9px 22px #2c24321a;
  transition:transform .5s ease;
  transform-origin:50% 50%;
  pointer-events:none;
}

.growth-ui {
  background:#f7f3f8;
  border-color:#cfc2d0;
}

.pricing-ui {
  background:#fffbf3;
  border-color:#decaad;
}

.work-preview:is(:hover,:focus-visible),.work-preview[aria-expanded=true] {
  box-shadow:inset 0 0 0 1px #38233f44;
}

.work-preview:is(:hover,:focus-visible) .demo-ui,.work-preview[aria-expanded=true] .demo-ui {
  transform:translateY(-5px) scale(1.025);
}

.ui-bar {
  display:flex;
  align-items:center;
  padding:11px 13px;
  gap:9px;
  border-bottom:1px solid #ddd8df;
  font-size:6px;
  font-weight:650;
  letter-spacing:.09em;
}

.ui-bar>i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#7b8f77;
  margin-left:auto;
}

.redacted-block {
  display:block;
  width:38px;
  height:7px;
  background:#a4a1a0;
  border-radius:2px;
}

.ui-heading {
  font-size:10px;
  line-height:1.5;
  font-weight:550;
  padding:12px 13px 8px;
}

.ui-pill {
  font-size:6px;
  color:#4d6d53;
  display:block;
  font-weight:450;
  margin-top:3px;
}

.case-columns {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:13px;
  padding:0 13px;
}

.ui-label {
  font-size:5.5px;
  font-weight:600;
  color:#6b6b69;
  letter-spacing:.09em;
}

.case-row {
  height:30px;
  padding:6px;
  margin-top:6px;
  border:1px solid #d6dbd1;
  border-radius:4px;
  position:relative;
  transition:transform .5s,background .5s;
}

.case-row .redacted-block {
  height:3px;
  width:35px;
  opacity:.65;
}

.case-row b {
  position:absolute;
  right:5px;
  top:6px;
  height:4px;
  width:10px;
  border-radius:2px;
  background:#99b199;
}

.case-row small {
  font-size:5px;
  color:#778177;
  display:block;
  line-height:1.8;
  margin-top:3px;
}

.resolution {
  padding:0 4px;
  text-align:center;
}

.agent-orb {
  display:block;
  color:var(--teal);
  font-size:28px;
  line-height:1.5;
  margin:7px 0;
}

.resolution-word {
  font-size:8px;
  display:block;
  color:#5c705c;
  line-height:1.3;
}

.progress-track {
  background:#e2e7dd;
  border-radius:2px;
  height:3px;
  margin:9px 5px;
}

.progress-track i {
  display:block;
  width:32%;
  height:100%;
  background:#5c8e71;
  transition:width 1.5s;
}

.work-preview:is(:hover,:focus-visible) .progress-track i,.work-preview[aria-expanded=true] .progress-track i {
  width:100%;
}

.work-preview:is(:hover,:focus-visible) .case-row:nth-of-type(2) {
  transform:translateX(4px);
  background:#eaf0e4;
}

.work-preview:is(:hover,:focus-visible) .case-row:nth-of-type(3) {
  transform:translateX(8px);
  background:#eaf0e4;
  transition-delay:.15s;
}

.opportunity-map {
  height:135px;
  position:relative;
  overflow:hidden;
}

.map-ring {
  border:1px solid #c9b7cf;
  border-radius:50%;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.map-ring.one {
  width:66px;
  height:66px;
}

.map-ring.two {
  width:122px;
  height:122px;
  opacity:.7;
}

.map-ring.three {
  width:190px;
  height:190px;
  opacity:.4;
}

.map-core {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:var(--plum);
  font-size:30px;
  transition:transform 1s;
}

.map-dot {
  position:absolute;
  width:8px;
  height:8px;
  background:var(--coral);
  border:2px solid #f7f3f8;
  border-radius:50%;
}

.d1 {
  left:30%;
  top:27%;
}

.d2 {
  right:24%;
  top:67%;
  background:var(--teal);
}

.d3 {
  left:45%;
  top:79%;
  background:var(--gold);
}

.map-label {
  position:absolute;
  padding:4px 7px;
  border:1px solid #ded3e0;
  border-radius:3px;
  background:#fbf8fa;
  font-size:6px;
  box-shadow:0 3px 9px #38233f0a;
  transition:transform .7s;
}

.l1 {
  left:5%;
  top:15%;
}

.l2 {
  right:6%;
  top:35%;
}

.l3 {
  left:28%;
  bottom:5%;
}

.work-preview:is(:hover,:focus-visible) .map-core,.work-preview[aria-expanded=true] .map-core {
  transform:translate(-50%,-50%) rotate(90deg);
}

.work-preview:is(:hover,:focus-visible) .map-label {
  transform:translateY(-5px);
}

.price-chart {
  height:105px;
  margin:5px 18px 0;
  position:relative;
  border-bottom:1px solid #d7c8b4;
}

.chart-grid {
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(to top,transparent 0 25px,#decfb852 25px 26px);
}

.bar-set {
  position:absolute;
  inset:15px 7px 0;
  display:flex;
  align-items:flex-end;
  gap:12px;
}

.bar-set i {
  width:20%;
  height:var(--bar);
  background:#d2ac73;
  border-radius:3px 3px 0 0;
  transform-origin:bottom;
  transition:transform .7s;
}

.bar-set i:nth-child(even) {
  background:#957144;
}

.chart-note {
  position:absolute;
  top:0;
  left:5px;
  font-size:6px;
  border:1px solid #dfccb1;
  background:#fffcf6;
  padding:4px 7px;
  border-radius:4px;
}

.chart-footer {
  display:flex;
  justify-content:space-between;
  padding:9px 18px;
  font-size:5.5px;
  color:#82643d;
}

.work-preview:is(:hover,:focus-visible) .bar-set i {
  transform:scaleY(.82);
}

.work-preview:is(:hover,:focus-visible) .bar-set i:nth-child(2n) {
  transform:scaleY(1.08);
}

.preview-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:15px;
  font-size:7px;
  letter-spacing:.09em;
  color:#645968;
}

.preview-action {
  font-size:10px;
  letter-spacing:0;
  display:flex;
  gap:12px;
  align-items:center;
}

.preview-action>span {
  font-size:16px;
}

.work-copy {
  padding-top:23px;
}

.work-copy>.eyebrow {
  font-size:8px;
  letter-spacing:.13em;
  color:#736675;
}

.work-copy h3 {
  font-size:21px;
  letter-spacing:0;
  margin:10px 0 12px;
  line-height:1.3;
}

.work-copy p {
  font-size:13px;
  color:var(--muted);
  line-height:1.75;
}

.work-detail {
  border-top:1px solid #d0c7d2;
  margin-top:15px;
  padding-top:15px;
}

.work-detail .text-link {
  margin-top:10px;
}

.work-note {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:10px;
  color:#776b79;
  margin-top:43px;
}

.work-note>span {
  font-size:17px;
}

.start-section {
  padding-top:98px;
  padding-bottom:100px;
}

.start-section .section-heading {
  margin-bottom:43px;
}

.start-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:20px;
}

.start-card {
  grid-column:span 2;
  display:flex;
  flex-direction:column;
  border-radius:7px;
  padding:24px 27px 27px;
  position:relative;
  min-height:360px;
  transition:transform .3s;
}

.start-card:hover {
  transform:translateY(-5px);
}

.start-card:nth-child(n+4) {
  grid-column:span 3;
  min-height:320px;
}

.start-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.card-number {
  font-size:11px;
  letter-spacing:.08em;
}

.card-arrow {
  font-size:24px;
  font-weight:400;
}

.start-art {
  height:146px;
  position:relative;
  width:100%;
  max-width:240px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.start-copy {
  margin-top:auto;
}

.start-copy h3 {
  font-size:23px;
  letter-spacing:0;
  line-height:1.25;
  max-width:360px;
  margin-bottom:12px;
}

.start-copy p {
  font-size:13px;
  line-height:1.7;
  max-width:380px;
}

.backlog {
  background:#e6deda;
  color:#523c50;
}

.growth-boost {
  background:#dce6dd;
  color:#234f48;
}

.pricing-advantage {
  background:#eee0c7;
  color:#634b2b;
}

.modernization {
  background:#38233f;
  color:#f2eaf3;
}

.unique-outcome {
  background:#d6e8e4;
  color:#1d5d52;
}

.ticket {
  position:absolute;
  width:110px;
  height:70px;
  left:calc(50% - 55px);
  top:29px;
  border:1px solid #977c90;
  border-radius:6px;
  background:#f3ece7;
  transform:rotate(-9deg);
  transition:transform .5s;
}

.ticket i {
  display:block;
  width:60%;
  height:3px;
  background:#bfb0b9;
  border-radius:2px;
  margin:17px 14px 0;
}

.ticket i+i {
  width:40%;
  margin-top:8px;
}

.ticket.t2 {
  transform:translate(9px,9px) rotate(-1deg);
  background:#eadfe4;
}

.ticket.t3 {
  transform:translate(20px,20px) rotate(7deg);
  background:#faf5ef;
}

.ticket b {
  display:block;
  position:absolute;
  right:10px;
  bottom:7px;
  width:21px;
  height:21px;
  border-radius:50%;
  background:#78977c;
  color:white;
  text-align:center;
  font-size:12px;
}

.backlog:hover .t1 {
  transform:translate(-8px,-8px) rotate(-15deg);
}

.backlog:hover .t3 {
  transform:translate(27px,22px) rotate(12deg);
}

.target-ring {
  position:absolute;
  border:1px solid #84a195;
  border-radius:50%;
  width:110px;
  height:110px;
}

.target-ring.r2 {
  width:76px;
  height:76px;
}

.target-ring.r3 {
  width:40px;
  height:40px;
  background:#b4c9b8;
}

.target-arrow {
  font-size:70px;
  font-weight:400;
  color:#3b7667;
  line-height:1;
  transform:translate(22px,-22px);
  transition:transform .5s;
}

.growth-boost:hover .target-arrow {
  transform:translate(28px,-28px);
}

.coin {
  position:absolute;
  width:68px;
  height:68px;
  border:1px solid #b38c52;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:30px;
  color:#9b753f;
  background:#f4e7ce;
  box-shadow:4px 3px 0 #d2b785;
  transition:transform .5s;
}

.c1 {
  transform:translate(-47px,19px);
}

.c2 {
  transform:translate(0,0);
}

.c3 {
  transform:translate(47px,-19px);
  background:#dfc294;
}

.pricing-advantage:hover .c3 {
  transform:translate(53px,-27px);
}

.code-fragment {
  width:66px;
  height:66px;
  border:1px solid #9c85a3;
  border-radius:9px;
  display:grid;
  place-items:center;
  font-family:monospace;
  font-size:20px;
  color:#bba9c1;
  position:relative;
}

.code-fragment.new {
  color:#e7c896;
  font-size:43px;
  line-height:1;
  border-color:#b49c8c;
}

.code-fragment small {
  position:absolute;
  bottom:-7px;
  right:-8px;
  border-radius:50%;
  background:#9eb9a2;
  border:3px solid var(--plum);
  width:25px;
  height:25px;
  font-size:12px;
  display:grid;
  place-items:center;
  color:#233b2f;
}

.refactor-arrow {
  font-size:25px;
  padding:0 21px;
  color:#a78daf;
  transition:transform .5s;
}

.modernization:hover .refactor-arrow {
  transform:translateX(5px);
}

.unique-star {
  width:113px;
  height:113px;
  fill:#588c7a;
  transition:transform .7s;
  z-index:1;
}

.unique-line {
  position:absolute;
  width:173px;
  height:93px;
  border:1px solid #8cb4a7;
  border-radius:50%;
  transform:rotate(-24deg);
}

.unique-dot {
  position:absolute;
  width:13px;
  height:13px;
  background:var(--coral);
  border:3px solid #d6e8e4;
  border-radius:50%;
  transform:translate(77px,-34px);
}

.unique-outcome:hover .unique-star {
  transform:rotate(45deg);
}

.closing {
  text-align:center;
  border-top:0;
  padding-top:69px;
  padding-bottom:90px;
}

.closing-mark {
  font-size:41px;
  color:var(--coral);
  line-height:1;
  margin-bottom:21px;
}

.closing .eyebrow {
  font-size:9px;
  color:var(--muted);
}

.closing h2 {
  font-size:clamp(39px,4.6vw,65px);
  margin:20px 0 30px;
}

.button {
  background:var(--plum);
  border:1px solid var(--plum);
  color:var(--paper);
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:34px;
  padding:16px 24px;
  border-radius:5px;
  font-size:13px;
  font-weight:500;
  transition:background .25s,border-color .25s,box-shadow .25s;
}

.button:is(:hover,:focus-visible) {
  background:var(--teal);
  border-color:var(--teal);
  box-shadow:0 0 0 5px #47745e18;
}

.button span {
  font-size:22px;
  line-height:1;
}

.footer {
  background:#2c1b33;
  color:#f2e9f2;
  padding:38px 0 23px;
}

.footer .brand {
  width:120px;
}

.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding-bottom:0;
}

.footer-top p {
  font-family:var(--display);
  font-size:24px;
  letter-spacing:0;
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:24px;
  margin-top:23px;
  font-size:10px;
  color:#c4b6c9;
}

.footer-bottom nav {
  display:flex;
  gap:23px;
}

.page-intro {
  padding-top:78px;
  padding-bottom:68px;
}

.page-intro .eyebrow {
  color:var(--muted);
  margin-bottom:24px;
}

.page-intro h1 {
  font-size:clamp(42px,5vw,72px);
}

.page-lead {
  font-size:19px;
  max-width:640px;
  margin-top:30px;
  color:var(--muted);
  line-height:1.65;
}

.about-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:80px;
  align-items:start;
  padding-bottom:60px;
}

.about-grid figure img {
  border-radius:7px;
  width:100%;
  height:auto;
}

.about-grid figcaption {
  font-size:10px;
  color:var(--muted);
  margin-top:13px;
}

.editorial h2 {
  font-size:32px;
  margin:17px 0 25px;
}

.editorial>p:not(.eyebrow) {
  font-size:15px;
  color:var(--muted);
  margin-bottom:21px;
}

.founders {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px;
  margin-bottom:80px;
}

.founders article {
  display:flex;
  align-items:center;
  gap:25px;
  border-top:1px solid var(--line);
  padding-top:26px;
}

.founders img {
  width:87px;
  height:87px;
  object-fit:cover;
  border-radius:50%;
}

.founders h2 {
  font-size:25px;
  margin:5px 0 7px;
}

.founders .eyebrow {
  font-size:8px;
}

.founders .text-link {
  font-size:11px;
}

.principles {
  padding-bottom:90px;
  max-width:1000px;
}

.principles article {
  display:grid;
  grid-template-columns:90px 1fr;
  gap:30px;
  padding:44px 0;
  border-top:1px solid var(--line);
}

.principles article>span {
  font-size:15px;
  color:var(--coral);
}

.principles h2 {
  font-size:34px;
  margin:13px 0 20px;
}

.principles article p:last-child {
  max-width:690px;
  color:var(--muted);
}

.contact-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  padding-top:90px;
  padding-bottom:100px;
}

.contact-intro h1 {
  font-size:65px;
  margin:24px 0 30px;
}

.contact-intro>p:not(.eyebrow) {
  color:var(--muted);
  max-width:420px;
}

.contact-model {
  border-top:1px solid var(--line);
  padding-top:26px;
  margin-top:42px;
  display:flex;
  gap:19px;
  align-items:center;
  font-size:14px;
}

.contact-model>span {
  font-size:36px;
  color:var(--coral);
}

.contact-model strong {
  font-weight:500;
}

.contact-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:23px 19px;
  align-content:start;
}

.contact-form label {
  font-size:12px;
  display:flex;
  flex-direction:column;
  gap:7px;
  font-weight:550;
}

.contact-form input,.contact-form select,.contact-form textarea {
  width:100%;
  min-width:0;
  border:1px solid #cfc5ce;
  border-radius:4px;
  padding:12px;
  background:#fcf9f3;
  color:var(--ink);
  font-weight:400;
  font-size:14px;
}

.contact-form select {
  font-size:12px;
}

.contact-form textarea {
  resize:vertical;
  min-height:135px;
}

.contact-form textarea::placeholder {
  color:#8f828f;
  font-style:italic;
  font-size:12px;
}

.full {
  grid-column:1/-1;
}

.form-note {
  font-size:11px;
  color:#736674;
}

.motion-paused *,.motion-paused *:before,.motion-paused *:after,.page-inactive *,.mesh-stage:not(.in-view) * {
  animation-play-state:paused!important;
}

.motion-paused * {
  transition:none!important;
}

@keyframes flow {
  to {
    stroke-dashoffset:-468;
  }
}

@keyframes bob {
  0%,100% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-7px);
  }
}

@media(min-width:1600px) {
  .hero {
    padding-top:72px;
  }
  .hero h1 {
    font-size:88px;
  }
  .mesh-stage {
    margin-top:42px;
  }
}

@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 72px);
  }
  .site-header nav {
    gap:20px;
  }
  .hero h1 {
    font-size:65px;
  }
  .equation {
    font-size:12px;
    gap:12px;
  }
  .results-copy {
    gap:24px;
  }
  .results-line h2 {
    font-size:31px;
  }
  .work-grid {
    gap:16px;
  }
  .work-preview {
    padding:20px 12px 12px;
    min-height:270px;
  }
  .work-copy h3 {
    font-size:19px;
  }
  .start-card {
    padding:20px;
  }
  .start-copy h3 {
    font-size:21px;
  }
  .about-grid {
    gap:45px;
  }
  .contact-layout {
    gap:50px;
  }
  .contact-intro h1 {
    font-size:55px;
  }
}

@media(max-width:800px) {
  .wrap {
    width:calc(100% - 44px);
  }
  .header-inner {
    min-height:76px;
  }
  .brand {
    width:106px;
  }
  .site-header nav {
    gap:13px;
    font-size:11px;
  }
  .nav-contact {
    padding:9px 12px;
    gap:10px;
  }
  .hero {
    padding-top:48px;
  }
  .hero h1 {
    font-size:56px;
  }
  .equation {
    font-size:11px;
    gap:9px;
  }
  .results-line {
    gap:22px;
  }
  .results-copy {
    display:block;
    min-width:220px;
  }
  .results-copy .text-link {
    margin-top:9px;
  }
  .results-line h2 {
    font-size:30px;
  }
  .section-heading h2 {
    font-size:43px;
  }
  .section-aside {
    max-width:250px;
    font-size:13px;
  }
  .work-section {
    padding-top:65px;
  }
  .work-grid {
    grid-template-columns:1fr 1fr;
    gap:35px 20px;
  }
  .work-card:last-child {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    align-items:center;
  }
  .work-card:last-child .work-copy {
    padding-top:0;
  }
  .start-section {
    padding-block:68px;
  }
  .start-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .start-card,.start-card:nth-child(n+4) {
    grid-column:span 1;
    min-height:340px;
  }
  .start-card:last-child {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:240px;
  }
  .start-card:last-child .start-top {
    grid-column:1/-1;
  }
  .start-card:last-child .start-copy {
    margin:auto 0;
  }
  .footer-top p {
    font-size:21px;
  }
  .about-grid {
    grid-template-columns:1fr 1.2fr;
    gap:30px;
  }
  .editorial h2 {
    font-size:25px;
  }
  .founders {
    gap:25px;
  }
  .founders article {
    gap:16px;
  }
  .founders img {
    width:65px;
    height:65px;
  }
  .founders h2 {
    font-size:21px;
  }
  .contact-layout {
    gap:35px;
  }
  .contact-intro h1 {
    font-size:45px;
  }
  .contact-form {
    grid-template-columns:1fr;
  }
  .contact-layout {
    padding-block:64px;
  }
}

@media(max-width:650px) {
  html {
    scroll-padding-top:93px;
  }
  .wrap {
    width:calc(100% - 40px);
  }
  .header-inner {
    min-height:72px;
  }
  .site-header nav {
    display:flex;
    flex-wrap:wrap;
    padding-bottom:17px;
    gap:12px 22px;
  }
  .header-inner {
    flex-wrap:wrap;
  }
  .site-header nav a {
    font-size:12px;
  }
  .js .site-header nav {
    display:none;
  }
  .js .site-header.menu-open nav {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    gap:4px;
    padding-bottom:18px;
  }
  .js .site-header.menu-open nav a {
    padding:13px 5px;
  }
  .js .site-header.menu-open .nav-contact {
    padding:13px 15px;
    margin-top:6px;
    justify-content:space-between;
  }
  .js .menu-toggle {
    display:flex;
    align-items:center;
    gap:12px;
    background:transparent;
    border:1px solid #d5cbd4;
    border-radius:4px;
    color:var(--ink);
    padding:9px 13px;
    font-size:11px;
  }
  .menu-toggle span {
    font-size:16px;
    line-height:1;
  }
  .hero {
    padding-top:38px;
  }
  .hero>.eyebrow {
    font-size:8px;
    letter-spacing:.13em;
  }
  .hero h1 {
    font-size:clamp(36px,8.4vw,53px);
    margin:19px 0 24px;
    line-height:1.12;
  }
  .equation {
    display:grid;
    grid-template-columns:max-content 12px max-content;
    justify-content:center;
    gap:6px 9px;
    font-size:10px;
  }
  .equation b {
    font-size:18px;
  }
  .equation b:nth-of-type(2) {
    grid-column:1/-1;
    font-size:20px;
    line-height:1;
    text-align:center;
  }
  .equation-result {
    grid-column:1/-1;
    text-align:center;
    font-size:12px;
  }
  .mesh-stage {
    margin-top:25px;
  }
  .mesh-svg {
    width:100%;
    height:auto;
  }
  .mesh-caption {
    padding-inline:0;
    font-size:6px;
    letter-spacing:.08em;
  }
  .motion-toggle {
    font-size:9px;
    padding:9px 0 9px 8px;
    gap:6px;
  }
  .results-line {
    flex-direction:column;
    align-items:flex-start;
    gap:17px;
    margin-top:15px;
    padding:24px 0 32px;
  }
  .results-line h2 {
    font-size:31px;
  }
  .results-copy {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    width:100%;
    min-width:0;
  }
  .results-copy p {
    font-size:11px;
  }
  .results-copy .text-link {
    font-size:10px;
    gap:9px;
    min-width:113px;
    line-height:1.4;
    margin-top:0;
  }
  .results-copy .text-link span {
    font-size:17px;
  }
  .results-line .eyebrow {
    font-size:8px;
  }
  .work-section {
    padding:53px 0 30px;
  }
  .section-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:20px;
    margin-bottom:29px;
  }
  .section-heading h2 {
    font-size:41px;
  }
  .section-heading .eyebrow {
    font-size:8px;
    margin-bottom:14px;
  }
  .section-aside {
    font-size:13px;
    max-width:none;
  }
  .prototype-note {
    margin-top:9px;
  }
  .work-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:35px;
  }
  .work-card:last-child {
    grid-column:auto;
    display:block;
  }
  .work-preview {
    padding:26px 25px 14px;
  }
  .demo-ui {
    height:235px;
  }
  .ui-bar {
    font-size:7px;
    padding:12px 14px;
  }
  .ui-heading {
    font-size:11px;
    padding:13px 14px 9px;
  }
  .ui-pill {
    font-size:7px;
  }
  .case-columns {
    gap:18px;
  }
  .ui-label {
    font-size:6px;
  }
  .case-row {
    height:32px;
  }
  .case-row small {
    font-size:6px;
  }
  .resolution-word {
    font-size:9px;
  }
  .opportunity-map {
    height:144px;
  }
  .map-label {
    font-size:7px;
  }
  .price-chart {
    height:113px;
  }
  .chart-footer {
    font-size:6px;
  }
  .preview-foot {
    font-size:8px;
  }
  .work-copy,.work-card:last-child .work-copy {
    padding-top:18px;
  }
  .work-copy h3 {
    font-size:22px;
    margin:8px 0 9px;
  }
  .work-copy p {
    font-size:13px;
  }
  .work-note {
    text-align:left;
    align-items:flex-start;
    margin-top:30px;
    font-size:9px;
    line-height:1.6;
  }
  .work-note span {
    line-height:1;
  }
  .start-section {
    padding:56px 0;
  }
  .start-grid {
    gap:15px;
  }
  .start-card,.start-card:nth-child(n+4) {
    grid-column:1/-1;
    min-height:275px;
    padding:22px 25px;
    display:grid;
    grid-template-columns:1fr;
  }
  .start-art {
    height:122px;
    max-width:220px;
  }
  .start-copy h3 {
    font-size:23px;
  }
  .start-copy p {
    font-size:13px;
  }
  .start-card:last-child {
    display:grid;
    grid-template-columns:1fr;
    min-height:275px;
  }
  .start-card:last-child .start-copy {
    margin-top:auto;
  }
  .start-card:nth-child(4) .start-art {
    height:110px;
  }
  .closing {
    padding:51px 0 62px;
  }
  .closing h2 {
    font-size:39px;
  }
  .closing .eyebrow {
    font-size:8px;
  }
  .closing-mark {
    font-size:34px;
  }
  .footer {
    padding-top:28px;
  }
  .footer-top {
    flex-wrap:wrap;
    gap:20px;
  }
  .footer .brand {
    width:100px;
  }
  .footer-top p {
    font-size:21px;
  }
  .footer-bottom {
    flex-direction:column;
    gap:14px;
    font-size:9px;
  }
  .page-intro {
    padding:46px 0 37px;
  }
  .page-intro .eyebrow {
    font-size:9px;
    margin-bottom:20px;
  }
  .page-intro h1 {
    font-size:38px;
    line-height:1.16;
  }
  .page-lead {
    font-size:16px;
    margin-top:24px;
  }
  .about-grid {
    display:flex;
    flex-direction:column;
    gap:30px;
    padding-bottom:34px;
  }
  .about-grid figure {
    max-width:420px;
  }
  .editorial h2 {
    font-size:28px;
  }
  .editorial>p:not(.eyebrow) {
    font-size:14px;
  }
  .founders {
    grid-template-columns:1fr;
    gap:25px;
    margin-bottom:50px;
  }
  .founders img {
    width:80px;
    height:80px;
  }
  .founders h2 {
    font-size:24px;
  }
  .principles {
    padding-bottom:42px;
  }
  .principles article {
    grid-template-columns:30px 1fr;
    gap:15px;
    padding:29px 0;
  }
  .principles h2 {
    font-size:27px;
  }
  .principles .eyebrow {
    font-size:8px;
  }
  .principles p:last-child {
    font-size:14px;
  }
  .contact-layout {
    grid-template-columns:1fr;
    gap:39px;
    padding:46px 0 55px;
  }
  .contact-intro h1 {
    font-size:48px;
    margin-top:19px;
  }
  .contact-intro>p:not(.eyebrow) {
    font-size:15px;
  }
  .contact-model {
    margin-top:28px;
  }
  .contact-form {
    grid-template-columns:1fr;
    gap:20px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

.mobile-mesh-svg {
  display:none;
  font-family:var(--font);
}

@media(max-width:650px) {
  .mesh-svg {
    display:none;
  }
  .mobile-mesh-svg {
    display:block;
    width:100%;
    height:auto;
  }
  .mesh-caption {
    font-size:7px;
  }
}

/* Five selected work examples: three across, then two wider previews. */
@media (min-width:801px) {
  .work-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:38px 24px; }
  .work-card { grid-column:span 2; }
  .work-card:nth-child(n+4) { grid-column:span 3; }
}
.work-preview .demo-ui { width:100%; max-width:390px; margin-inline:auto; }
.category-card .work-preview { background:#ebdbc2; }
.retail-card .work-preview { background:#d8e2df; }
.marketplace-card .work-preview { background:#e1d9e5; }
.retail-ui { background:#f6f9f4; }
.market-ui { background:#f8f4f8; border-color:#cfc2d0; }
.retail-scene { display:flex; gap:18px; padding:5px 20px 14px; height:133px; }
.aisle-map { flex:1; position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:15px 12px; padding:7px; border:1px solid #dde3da; }
.aisle-map>i { background:#cad6c5; border:1px solid #b8cbb3; border-radius:2px; }
.aisle-marker { position:absolute; left:43%; top:38%; color:#087f73; font-size:20px; transition:transform .8s; }
.retail-worker { width:92px; border:1px solid #d5e0d0; background:#eaf0e4; border-radius:5px; text-align:center; padding:6px; }
.retail-face { display:block; background:#679380; color:#fffaf1; font-size:33px; width:40px; height:43px; border-radius:17px; line-height:1; margin:1px auto 8px; }
.retail-worker b { font-size:7px; font-weight:500; display:block; }
.answer-line { display:block; margin:8px auto 0; width:85%; height:3px; border-radius:2px; background:#c5d3bd; }
.answer-line.short { width:60%; margin-top:5px; }
.outcome-map { padding:0 20px; }
.outcome-map svg { width:100%; height:125px; display:block; }
.outcome-core { transition:fill .5s; }
.work-preview:is(:hover,:focus-visible) .aisle-marker { transform:translate(15px,-8px); }
.work-preview:is(:hover,:focus-visible) .outcome-core { fill:#087f73; }

/* Enterprise twin with four staggered video portraits and a clear results promise. */
.hero { padding-top:40px; }
.hero h1 { font-weight:800; letter-spacing:0; font-size:clamp(44px,5.45vw,78px); line-height:1.08; margin:0 auto 26px; text-wrap:balance; }
.equation { color:var(--muted); }
.value-illustration { max-width:1140px; margin:30px auto 0; padding-bottom:28px; }
.value-stage { display:grid; grid-template-columns:minmax(0,1.95fr) minmax(0,1fr); align-items:center; gap:40px; }
.twin-ensemble { position:relative; min-width:0; aspect-ratio:1.36; isolation:isolate; }
.twin-canvas-wrap { position:absolute; inset:0 10% 4%; z-index:2; pointer-events:none; }
.outcome-twin,.twin-fallback { position:absolute; inset:0; display:block; width:100%; height:100%; }
.outcome-twin { opacity:0; }
.canvas-ready .outcome-twin { opacity:1; }
.canvas-ready .twin-fallback { display:none; }
.worker-orbit { position:absolute; inset:0; pointer-events:none; }
.worker-portrait { position:absolute; width:15%; max-width:108px; aspect-ratio:9/16; overflow:hidden; border-radius:14px; background:var(--cream); border:3px solid var(--paper); box-shadow:0 7px 22px #38233f15,0 0 0 1px #38233f12; pointer-events:auto; }
.worker-one { left:1%; top:10%; width:15.5%; z-index:3; }
.worker-two { right:16%; top:1%; width:12.5%; max-width:90px; z-index:1; box-shadow:0 3px 14px #38233f10,0 0 0 1px #38233f12; }
.worker-three { left:10%; top:43%; width:16%; z-index:4; }
.worker-four { right:8%; bottom:3%; width:15%; z-index:3; }
.worker-video { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.ensemble-caption { position:absolute; bottom:0; left:16%; right:16%; display:flex; justify-content:center; align-items:center; gap:8px; font-size:10px; color:var(--muted); white-space:nowrap; }
.ensemble-caption span { color:var(--teal); font-size:16px; }
.results-promise { padding-bottom:22px; text-align:left; }
.results-promise h2 { font-size:clamp(34px,4.15vw,58px); font-weight:800; line-height:1.18; letter-spacing:0; }
.results-promise h2 em { color:var(--coral); }
.value-motion { display:flex; justify-content:flex-end; width:calc((100% - 40px)*.661); margin-top:5px; }
.value-motion .motion-toggle { color:var(--muted); font-size:10px; min-height:40px; padding:10px 0 10px 12px; }
@media(max-width:1100px) {
 .value-stage { gap:25px; }
 .value-motion { width:calc((100% - 25px)*.661); }
 .hero h1 { font-size:clamp(44px,5.8vw,68px); }
 .ensemble-caption { font-size:9px; gap:5px; }
 .worker-portrait { border-width:2px; border-radius:11px; }
}
@media(max-width:800px) and (min-width:701px) {
 .value-stage { grid-template-columns:minmax(0,2.1fr) minmax(0,1fr); gap:18px; }
 .results-promise h2 { font-size:31px; }
 .ensemble-caption { font-size:8px; }
}
@media(max-width:700px) {
 .value-stage { grid-template-columns:1fr; gap:12px; }
 .twin-ensemble { width:100%; max-width:540px; margin-inline:auto; aspect-ratio:1.18; }
 .twin-canvas-wrap { inset:1% 9% 7%; }
 .worker-portrait { width:16%; border-radius:11px; }
 .worker-one { left:0; top:10%; width:16%; }
 .worker-two { right:15%; top:0; width:13%; }
 .worker-three { left:10%; top:40%; width:16.5%; }
 .worker-four { right:2%; bottom:10%; width:16.5%; }
 .ensemble-caption { bottom:1%; font-size:9px; }
 .results-promise { text-align:center; padding:10px 0 0; }
 .results-promise h2 { font-size:clamp(28px,6.5vw,39px); line-height:1.2; }
 .results-promise h2 br { display:none; }
 .value-motion { width:100%; justify-content:center; margin-top:10px; }
}
@media(max-width:650px) {
 .hero { padding-top:35px; }
 .hero h1 { font-size:clamp(32px,7.5vw,45px); line-height:1.12; margin-bottom:23px; }
 .equation { font-size:9px; }
 .equation-result { font-size:11px; }
 .value-illustration { margin-top:22px; padding-bottom:26px; }
 .value-motion .motion-toggle { font-size:9px; }
}
@media(max-width:360px) {
 .hero h1 { font-size:29px; }
 .ensemble-caption { font-size:7px; gap:4px; }
 .worker-portrait { border-radius:8px; }
}

/* Dark opening uses the brand's ink, with luminous accents for the outcome twin. */
.dark-opening .site-header { background:#141019; color:#fff9ef; border-bottom-color:#fff9ef21; }
.dark-opening .site-header .nav-contact { border-color:#fff9ef66; }
.dark-opening .site-header .nav-contact:hover { background:#fff9ef; color:#141019; }
.dark-opening .site-header .menu-toggle { color:#fff9ef; border-color:#fff9ef66; }
.hero-shell {
 --paper:#141019;
 --ink:#fff9ef;
 --muted:#c7c0cf;
 --teal:#7cd9c4;
 --coral:#f29478;
 background:var(--paper);
 color:var(--ink);
}
.hero-shell .equation b { color:#aca4b8; }
.hero-shell .worker-portrait { border-color:#2c2733; box-shadow:0 9px 26px #0006,0 0 0 1px #fff9ef24; }
.hero-shell .worker-two { box-shadow:0 4px 16px #0004,0 0 0 1px #fff9ef18; }
.hero-shell :focus-visible,.dark-opening .site-header :focus-visible { outline-color:#7cd9c4; }

/* Keep the longer review navigation usable on tablets as well as phones. */
@media(max-width:800px) {
 .header-inner { flex-wrap:wrap; }
 .js .site-header nav { display:none; }
 .js .site-header.menu-open nav { display:flex; flex-direction:column; align-items:stretch; width:100%; gap:4px; padding-bottom:18px; }
 .js .site-header.menu-open nav a { padding:13px 5px; }
 .js .site-header.menu-open .nav-contact { padding:13px 15px; margin-top:6px; justify-content:space-between; }
 .js .menu-toggle { display:flex; align-items:center; gap:12px; background:transparent; border:1px solid #d5cbd4; border-radius:4px; color:var(--ink); padding:9px 13px; font-size:11px; }
 .menu-toggle span { font-size:16px; line-height:1; }
}

/* Quiet link cues replace diagonal arrows across the concept pages. */
.nav-contact { transition:background .25s,color .25s,box-shadow .25s; }
.nav-contact:is(:hover,:focus-visible) { box-shadow:0 0 0 4px #47745e18; }
.footer-bottom nav a:is(:hover,:focus-visible) { text-decoration:underline; text-underline-offset:4px; }
@media(prefers-reduced-motion:reduce) {
 .text-link,.button,.nav-contact { transition:none; }
}