/*
  Product-story layout for Dhruv.
  The system is intentionally original: it uses a warm editorial canvas,
  coral action color, and bespoke data/interface illustrations.
*/
:root {
  --ref-paper: #f3f3ef;
  --ref-white: #ffffff;
  --ref-ink: #121212;
  --ref-muted: #6e6d67;
  --ref-line: #d8d8d2;
  --ref-coral: #fe4a23;
  --ref-peach: #ffc184;
  --ref-blush: #f5b295;
  --ref-charcoal: #181818;
  --ref-shell: min(88vw, 1440px);
}

body.ref-page {
  background: var(--ref-paper);
  color: var(--ref-ink);
}

body.ref-page .intro {
  background: var(--ref-ink);
  color: #fff;
}

body.ref-page .page-wipe { background: var(--ref-coral); }
body.ref-page .cursor { border-color: var(--ref-coral); }
body.ref-page .cursor.is-hover { background: var(--ref-coral); }

body.ref-page .nav {
  height: 88px;
  padding: 0 6vw;
  color: #f7f7f3;
  background: rgba(18, 18, 18, .98);
  border-bottom-color: rgba(255,255,255,.14);
  backdrop-filter: none;
}

body.ref-page .nav.is-compact { height: 72px; }
body.ref-page .nav-links { gap: 34px; }
body.ref-page .nav-links a { color: #a9a9a4; }
body.ref-page .nav-links a.active,
body.ref-page .nav-links a:hover { color: #fff; }
body.ref-page .nav-links a:after { background: var(--ref-coral); }
body.ref-page .nav-cta {
  border-color: #555550;
  color: #fff;
  padding: 12px 18px;
}
body.ref-page .nav-cta span { color: var(--ref-coral); }
body.ref-page .nav-cta:hover { background: var(--ref-coral); border-color: var(--ref-coral); color: #171717; }
body.ref-page .nav-cta:hover span { color: #171717; }

.ref-main { overflow: clip; }
.ref-shell { width: var(--ref-shell); margin: 0 auto; }
.ref-section { padding: 150px 0; }
.ref-label,
.ref-overline,
.ref-kicker,
.ref-meta,
.ref-band-index,
.ref-case-eyebrow,
.ref-process-index,
.ref-faq-index {
  font: 500 10px/1.2 var(--mono);
  letter-spacing: .115em;
  text-transform: uppercase;
}
.ref-label { color: var(--ref-muted); }
.ref-label--light { color: rgba(255,255,255,.68); }
.ref-rule { border: 0; border-top: 1px solid var(--ref-line); margin: 0; }

.ref-hero {
  min-height: 980px;
  padding-top: 147px;
  background: var(--ref-paper);
}
.ref-hero__topline,
.ref-page-hero__topline,
.ref-contact__topline {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 28px 0 0;
}
.ref-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--ref-coral);
}
.ref-hero h1,
.ref-page-hero h1,
.ref-contact h2 {
  max-width: 1240px;
  margin: 74px 0 0;
  font-size: clamp(76px, 11.35vw, 172px);
  font-weight: 600;
  line-height: .79;
  letter-spacing: -.095em;
}
.ref-hero h1 span,
.ref-page-hero h1 em,
.ref-contact h2 em { color: var(--ref-coral); font-style: normal; }
.ref-hero__subline {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 30px;
  align-items: end;
  padding: 40px 0 0;
}
.ref-hero__subline p,
.ref-page-hero__bottom p,
.ref-contact__body p {
  max-width: 355px;
  margin: 0;
  color: var(--ref-muted);
  font-size: 15px;
  line-height: 1.55;
}
.ref-hero__subline .ref-caption { justify-self: end; }
.ref-caption { color: var(--ref-muted); }

/* Home product frame */
.ref-device-wrap { position: relative; margin: 42px auto 0; width: min(100%, 1120px); }
.ref-device {
  position: relative;
  min-height: 435px;
  overflow: hidden;
  border: 1px solid #dddcd6;
  border-radius: 13px;
  background: var(--ref-white);
  box-shadow: 0 32px 80px rgba(31,27,22,.15), 0 7px 22px rgba(31,27,22,.08);
  transform: perspective(1500px) rotateX(3deg) rotateZ(-.55deg);
  transform-origin: center top;
}
.ref-device__bar {
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 24px;
  border-bottom: 1px solid #ecece8;
  color: #75756f;
}
.ref-device__mark { margin-right: 13px; color: var(--ref-coral); font: 700 25px var(--font); letter-spacing: -.12em; }
.ref-device__bar span { font: 9px var(--mono); letter-spacing: .1em; }
.ref-device__bar b { margin-left: auto; color: #4d965d; font: 9px var(--mono); letter-spacing: .08em; font-weight: 500; }
.ref-device__content { padding: 26px 28px 30px; }
.ref-device__heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.ref-device__heading small { display: block; color: #77776f; font: 9px var(--mono); letter-spacing: .09em; }
.ref-device__heading h2 { margin: 7px 0 0; font-size: clamp(28px,4vw,52px); line-height: .88; letter-spacing: -.08em; font-weight: 500; }
.ref-device__heading a { padding-bottom: 6px; color: var(--ref-coral); font: 10px var(--mono); letter-spacing: .06em; }
.ref-device__grid { display: grid; grid-template-columns: 1.62fr .78fr; gap: 14px; height: 238px; margin-top: 24px; }
.ref-chart-panel,
.ref-sprint-panel { position: relative; overflow: hidden; border-radius: 7px; }
.ref-chart-panel { border: 1px solid #e5e5e0; padding: 18px 20px; }
.ref-panel-top { display: flex; justify-content: space-between; color: #707069; font: 8px var(--mono); letter-spacing: .09em; }
.ref-chart-panel strong { display: block; margin-top: 14px; font-size: 36px; font-weight: 500; letter-spacing: -.08em; }
.ref-chart-panel strong small { color: #85857e; font: 9px var(--mono); letter-spacing: 0; }
.ref-graph { position: absolute; right: 20px; bottom: 34px; left: 20px; display: flex; align-items: end; gap: 6px; height: 95px; border-bottom: 1px solid #deded8; background: repeating-linear-gradient(to bottom, transparent 0 30px, #eee 30px 31px); }
.ref-graph i { flex: 1; height: 35%; border-radius: 3px 3px 0 0; background: #f7ab8d; transform-origin: bottom; }
.ref-graph i:nth-child(2n) { height: 58%; }
.ref-graph i:nth-child(3n) { height: 76%; background: #fe835e; }
.ref-graph i:nth-child(5n) { height: 94%; background: var(--ref-coral); }
.ref-graph-labels { position: absolute; right: 20px; bottom: 14px; left: 20px; display: flex; justify-content: space-between; color: #9a9a93; font: 7px var(--mono); }
.ref-sprint-panel { display: flex; flex-direction: column; padding: 18px; color: #f5f5f1; background: var(--ref-charcoal); }
.ref-sprint-panel > span { color: #aaa9a4; font: 8px var(--mono); letter-spacing: .1em; }
.ref-sprint-panel b { margin-top: 13px; font-size: 45px; font-weight: 500; letter-spacing: -.1em; line-height: .9; }
.ref-sprint-panel > small { margin-top: 4px; color: #a6a5a0; font: 9px/1.35 var(--mono); }
.ref-mini-avatars { display: flex; margin-top: auto; }
.ref-mini-avatars i { display: grid; width: 27px; height: 27px; margin-right: -6px; border: 2px solid var(--ref-charcoal); border-radius: 50%; place-items: center; color: #2c1d14; background: var(--ref-peach); font: 7px var(--mono); font-style: normal; }
.ref-mini-avatars i:nth-child(2) { background: #f0b495; }
.ref-mini-avatars i:nth-child(3) { color: #fff; background: var(--ref-coral); }
.ref-sprint-progress { height: 4px; margin-top: 14px; border-radius: 4px; background: #464641; }
.ref-sprint-progress i { display: block; width: 73%; height: 100%; border-radius: inherit; background: var(--ref-coral); }
.ref-device-note {
  position: absolute;
  top: 46%;
  right: -52px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 126px;
  height: 103px;
  padding: 16px;
  border: 1px solid #deded8;
  border-radius: 7px;
  color: var(--ref-ink);
  background: #fff;
  box-shadow: 0 18px 43px rgba(35,29,24,.17);
  transform: rotate(5deg);
}
.ref-device-note b { color: var(--ref-coral); font-size: 24px; font-weight: 400; }
.ref-device-note span { font: 7px/1.45 var(--mono); letter-spacing: .1em; }

/* Home story blocks */
.ref-feature-pair { padding: 165px 0; background: #e8e8e3; }
.ref-feature-pair__intro { display: grid; grid-template-columns: .75fr 1.25fr; gap: 7vw; align-items: end; padding-bottom: 48px; }
.ref-feature-pair h2,
.ref-statement h2,
.ref-control h2,
.ref-insights h2,
.ref-service-intro h2,
.ref-story h2,
.ref-mission h2,
.ref-values-heading h2,
.ref-timeline h2 {
  margin: 0;
  font-size: clamp(54px, 7.2vw, 112px);
  font-weight: 500;
  line-height: .84;
  letter-spacing: -.09em;
}
.ref-feature-pair__intro p { max-width: 420px; margin: 0 0 5px; color: var(--ref-muted); font-size: 17px; line-height: 1.5; letter-spacing: -.025em; }
.ref-feature-cards { display: grid; grid-template-columns: 1.16fr .84fr; gap: 14px; }
.ref-feature-card { min-height: 470px; padding: 32px; overflow: hidden; border-radius: 9px; position: relative; }
.ref-feature-card--light { color: var(--ref-ink); background: #f9f9f6; }
.ref-feature-card--dark { color: #f5f5f1; background: #181818; }
.ref-feature-card__top { display: flex; justify-content: space-between; align-items: start; }
.ref-feature-card__top span { font: 9px var(--mono); letter-spacing: .1em; }
.ref-feature-card__top b { font-size: 22px; font-weight: 400; }
.ref-feature-card h3 { max-width: 420px; margin: 65px 0 0; font-size: clamp(30px, 4vw, 58px); font-weight: 500; line-height: .88; letter-spacing: -.08em; }
.ref-feature-card p { max-width: 305px; margin: 18px 0 0; color: inherit; opacity: .62; font-size: 13px; line-height: 1.55; }
.ref-feature-card--light h3 span { color: var(--ref-coral); }
.ref-radar { position: absolute; right: 5%; bottom: -13%; width: 340px; height: 340px; border: 1px solid #d7d7d1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 43px, #e3e3de 44px 45px); }
.ref-radar:before,.ref-radar:after { content: ""; position: absolute; top: 50%; left: 50%; background: #dfdfd9; transform: translate(-50%,-50%); }
.ref-radar:before { width: 1px; height: 100%; }
.ref-radar:after { width: 100%; height: 1px; }
.ref-radar b { position: absolute; top: 16%; left: 24%; width: 78px; height: 78px; border-radius: 50%; background: var(--ref-coral); box-shadow: 0 0 0 16px rgba(254,74,35,.12); }
.ref-float-tag { position: absolute; right: 12%; bottom: 19%; padding: 13px 14px; border-radius: 5px; color: #fff; background: var(--ref-coral); box-shadow: 0 12px 25px rgba(254,74,35,.25); font: 8px var(--mono); letter-spacing: .09em; }
.ref-orbit-visual { position: absolute; right: -43px; bottom: -53px; width: 386px; height: 386px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }
.ref-orbit-visual:before,.ref-orbit-visual:after { content: ""; position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,255,255,.23); border-radius: 50%; transform: translate(-50%,-50%) rotate(44deg); }
.ref-orbit-visual:before { width: 100%; height: 39%; }.ref-orbit-visual:after { width: 42%; height: 100%; }
.ref-orbit-core { position: absolute; right: 89px; bottom: 83px; width: 126px; height: 126px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #ffe6bc, #fe875c 36%, #9e3726 77%); box-shadow: inset -18px -20px 35px #4c1f1a,0 0 50px rgba(254,74,35,.4); }
.ref-orbit-caption { position: absolute; right: 32px; top: 43%; color: #aaa9a4; font: 8px var(--mono); letter-spacing: .1em; }

.ref-statement { padding: 150px 0 128px; color: #fff; background: var(--ref-coral); }
.ref-statement__row { display: flex; justify-content: space-between; align-items: end; gap: 45px; }
.ref-statement h2 { max-width: 1050px; font-size: clamp(65px, 9.3vw, 143px); }.ref-statement h2 em { color: #1b1614; font-style: normal; }
.ref-statement p { width: 200px; margin: 0; color: #492116; font-size: 13px; line-height: 1.5; }
.ref-word-strip { overflow: hidden; padding: 20px 0; border-top: 1px solid rgba(37,19,13,.26); border-bottom: 1px solid rgba(37,19,13,.26); background: var(--ref-coral); }
.ref-word-strip__track { display: flex; gap: 30px; width: max-content; color: #1d1511; font-size: 14px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; animation: ref-marquee 20s linear infinite; }
.ref-word-strip__track i { color: #fff4e7; font-style: normal; }

.ref-control { padding: 155px 0; color: #f5f5f0; background: #171717; }
.ref-control__heading { display: grid; grid-template-columns: 1fr .52fr; gap: 9vw; align-items: end; margin-bottom: 55px; }.ref-control h2 { font-size: clamp(55px, 7.4vw, 112px); }.ref-control h2 span { color: var(--ref-coral); }.ref-control__heading p { margin: 0; color: #a7a6a0; font-size: 14px; line-height: 1.55; }
.ref-control-board { display: grid; grid-template-columns: 178px 1fr; min-height: 420px; overflow: hidden; border: 1px solid #393936; border-radius: 8px; background: #20201f; }
.ref-control-side { padding: 25px 19px; border-right: 1px solid #393936; }.ref-control-side b { display: block; color: var(--ref-coral); font: 600 23px var(--font); letter-spacing: -.1em; }.ref-control-side ul { padding: 36px 0 0; margin: 0; list-style: none; }.ref-control-side li { padding: 12px 0; color: #898883; font: 9px var(--mono); letter-spacing: .07em; }.ref-control-side li:first-child { color: #fff; }.ref-control-side li:first-child:before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 9px 1px 0; border-radius: 50%; background: var(--ref-coral); }
.ref-control-screen { padding: 28px; }.ref-control-screen__top { display: flex; justify-content: space-between; align-items: center; }.ref-control-screen__top small { color: #9b9a94; font: 9px var(--mono); letter-spacing: .1em; }.ref-control-screen__top b { font-size: 15px; font-weight: 400; }.ref-control-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 30px; }.ref-control-metric { padding: 17px; border: 1px solid #393936; border-radius: 5px; }.ref-control-metric span { color: #aaa9a3; font: 8px var(--mono); letter-spacing: .08em; }.ref-control-metric b { display: block; margin-top: 10px; font-size: 28px; letter-spacing: -.07em; font-weight: 500; }.ref-control-metric em { color: var(--ref-coral); font: 8px var(--mono); font-style: normal; }.ref-control-plot { position: relative; height: 175px; margin-top: 12px; padding: 17px; border: 1px solid #393936; border-radius: 5px; }.ref-control-plot span { color: #aaa9a3; font: 8px var(--mono); letter-spacing: .08em; }.ref-control-line { position: absolute; right: 22px; bottom: 28px; left: 22px; height: 85px; border-bottom: 1px solid #4a4945; background: repeating-linear-gradient(to bottom, transparent 0 28px, #343431 29px 30px); }.ref-control-line svg { width: 100%; height: 100%; overflow: visible; }.ref-control-line path { fill: none; stroke: var(--ref-coral); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 500; stroke-dashoffset: 500; }.ref-control-line circle { fill: var(--ref-peach); }

.ref-insights { padding: 155px 0; background: var(--ref-paper); }.ref-insights__heading { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 55px; }.ref-insights h2 { font-size: clamp(55px, 7vw, 108px); }.ref-insights__heading p { max-width: 250px; margin: 0; color: var(--ref-muted); font-size: 13px; line-height: 1.55; }.ref-insight-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.ref-insight { min-height: 325px; padding: 25px; border: 1px solid var(--ref-line); border-radius: 8px; background: #fafaf7; transition: transform .35s ease, box-shadow .35s ease; }.ref-insight:hover { box-shadow: 0 18px 45px rgba(30,25,20,.1); transform: translateY(-7px); }.ref-insight > span { color: var(--ref-muted); font: 9px var(--mono); letter-spacing: .1em; }.ref-insight__symbol { display: grid; width: 72px; height: 72px; margin: 52px 0 29px; border-radius: 50%; place-items: center; color: #fff; background: var(--ref-coral); font-size: 29px; }.ref-insight:nth-child(2) .ref-insight__symbol { color: #312115; background: var(--ref-peach); }.ref-insight:nth-child(3) .ref-insight__symbol { background: var(--ref-charcoal); }.ref-insight h3 { margin: 0; font-size: 27px; font-weight: 500; letter-spacing: -.065em; }.ref-insight p { max-width: 260px; margin: 12px 0 0; color: var(--ref-muted); font-size: 12px; line-height: 1.55; }

/* Shared contact + footer */
.ref-contact { padding: 80px 0 64px; color: #f7f7f3; background: var(--ref-charcoal); }.ref-contact__topline { padding: 0; }.ref-contact h2 { max-width: 1040px; margin-top: 110px; color: #f7f7f3; font-size: clamp(72px, 10.7vw, 164px); }.ref-contact h2 em { color: var(--ref-coral); }.ref-contact__body { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-top: 70px; }.ref-contact__email { display: inline-flex; gap: 23px; padding-bottom: 8px; border-bottom: 1px solid #787873; font-size: clamp(18px,2.2vw,28px); letter-spacing: -.04em; }.ref-contact__email span { color: var(--ref-coral); }.ref-contact__body p { color: #aaa9a3; }
body.ref-page .footer { min-height: 98px; padding: 24px 6vw; color: #f7f7f3; background: #111; }.ref-page .footer-copy { color: #8d8d87; }.ref-page .footer-social a { color: #c4c3bd; }.ref-page .back-top { border-color: #555550; color: var(--ref-coral); }

/* Services */
.ref-page-hero { padding: 146px 0 75px; background: var(--ref-paper); }.ref-page-hero h1 { margin-top: 85px; font-size: clamp(112px, 17.5vw, 248px); }.ref-page-hero__bottom { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-top: 69px; padding-top: 22px; border-top: 1px solid var(--ref-line); }.ref-page-hero__bottom span { color: var(--ref-muted); font: 9px var(--mono); letter-spacing: .1em; }
.ref-service-stack { background: var(--ref-paper); }.ref-service-band { display: grid; grid-template-columns: 86px 1fr .95fr; gap: 40px; align-items: center; min-height: 570px; padding: 64px max(6vw, calc((100vw - var(--ref-shell))/2)); border-top: 1px solid var(--ref-line); }.ref-band-index { align-self: start; padding-top: 8px; color: var(--ref-muted); }.ref-service-copy h2 { margin: 0; font-size: clamp(36px, 5vw, 78px); line-height: .88; letter-spacing: -.09em; font-weight: 500; }.ref-service-copy h2 span { color: var(--ref-coral); }.ref-service-copy p { max-width: 410px; margin: 22px 0 0; color: var(--ref-muted); font-size: 14px; line-height: 1.6; }.ref-service-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }.ref-service-tags span { padding: 8px 10px; border: 1px solid #cbcbc5; border-radius: 3px; color: #5e5e58; background: #f9f9f6; font: 8px var(--mono); letter-spacing: .055em; }.ref-service-art { position: relative; min-height: 310px; overflow: hidden; border-radius: 8px; }.ref-service-band:nth-child(odd) .ref-service-art { background: #ecece7; }.ref-service-band:nth-child(even) .ref-service-art { background: #181818; }.ref-service-art--site .ref-wireframe { position: absolute; inset: 11% 11%; padding: 13px; border: 1px solid #d5d5cf; background: #fbfbf8; box-shadow: 0 16px 40px rgba(31,27,22,.15); transform: rotate(-4deg); }.ref-wireframe small { color: #777; font: 7px var(--mono); letter-spacing: .09em; }.ref-wireframe h3 { margin: 28px 0 0; font-size: clamp(24px,3.5vw,42px); line-height: .87; letter-spacing: -.08em; font-weight: 500; }.ref-wireframe b { color: var(--ref-coral); font-weight: 400; }.ref-wireframe .ref-wire-lines { position: absolute; right: 14px; bottom: 14px; left: 14px; height: 29%; display: flex; align-items: end; gap: 5px; border-bottom: 1px solid #d8d8d3; }.ref-wire-lines i { flex: 1; height: 35%; background: #f3b191; }.ref-wire-lines i:nth-child(2n) { height: 73%; }.ref-wire-lines i:nth-child(3n) { height: 94%; background: var(--ref-coral); }
.ref-service-art--backend .ref-code-card { position: absolute; top: 14%; right: 11%; bottom: 13%; left: 11%; padding: 22px; border: 1px solid #4a4945; border-radius: 5px; color: #deddda; background: #20201f; box-shadow: 0 20px 40px rgba(0,0,0,.28); transform: rotate(3deg); }.ref-code-card small { color: #9d9c96; font: 7px var(--mono); letter-spacing: .1em; }.ref-code-card code { display: block; margin-top: 23px; color: #d5d4cf; font: 11px/1.72 var(--mono); }.ref-code-card code i { color: var(--ref-peach); font-style: normal; }.ref-code-card code b { color: var(--ref-coral); font-weight: 400; }.ref-code-glow { position: absolute; right: -34px; bottom: -45px; width: 150px; height: 150px; border-radius: 50%; background: rgba(254,74,35,.36); filter: blur(28px); }
.ref-service-art--admin .ref-admin-window { position: absolute; inset: 14% 10%; display: grid; grid-template-columns: 42px 1fr; overflow: hidden; background: #fff; box-shadow: 0 18px 42px rgba(31,27,22,.14); }.ref-admin-window__rail { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 17px; color: #a2a19b; background: #222; }.ref-admin-window__rail b { color: var(--ref-coral); }.ref-admin-window__body { padding: 16px; }.ref-admin-window__body small { color: #777; font: 7px var(--mono); letter-spacing: .1em; }.ref-admin-window__body h3 { margin: 7px 0 18px; font-size: 18px; letter-spacing: -.06em; }.ref-admin-window__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.ref-admin-window__stats span { padding: 8px; background: #f1f1ed; color: #7d7d76; font: 6px var(--mono); }.ref-admin-window__stats b { display: block; margin-top: 5px; color: #222; font: 17px var(--font); }.ref-admin-bars { display: flex; align-items: end; gap: 4px; height: 75px; margin-top: 16px; border-bottom: 1px solid #ddd; }.ref-admin-bars i { flex: 1; height: 35%; background: #f6aa89; }.ref-admin-bars i:nth-child(2n) { height: 72%; }.ref-admin-bars i:nth-child(3n) { height: 92%; background: var(--ref-coral); }
.ref-service-art--data .ref-data-ring { position: absolute; top: 50%; left: 50%; display: grid; width: 190px; height: 190px; border-radius: 50%; place-items: center; background: conic-gradient(var(--ref-coral) 0 244deg, #4a4845 244deg 360deg); transform: translate(-50%,-50%); }.ref-data-ring:before { content:""; position: absolute; inset: 10px; border-radius: 50%; background: #1d1d1c; }.ref-data-ring div { position: relative; text-align: center; }.ref-data-ring small { color: #aaa9a2; font: 7px var(--mono); }.ref-data-ring b { display: block; margin: 7px 0; color: #fff; font-size: 30px; letter-spacing: -.08em; }.ref-data-ring span { color: var(--ref-coral); font: 8px var(--mono); }.ref-data-dots { position: absolute; right: 16%; bottom: 16%; display: flex; align-items: end; gap: 5px; height: 55px; }.ref-data-dots i { width: 9px; height: 31%; background: var(--ref-peach); }.ref-data-dots i:nth-child(2n) { height: 72%; }.ref-data-dots i:nth-child(3n) { height: 95%; background: var(--ref-coral); }
.ref-service-art--ux .ref-ux-shape { position: absolute; border-radius: 50%; }.ref-ux-shape--one { top: 15%; left: 11%; width: 125px; height: 125px; background: var(--ref-peach); }.ref-ux-shape--two { top: 30%; right: 12%; width: 155px; height: 155px; background: var(--ref-coral); border-radius: 42% 58% 54% 46%; }.ref-ux-shape--three { right: 30%; bottom: 11%; display: grid; width: 86px; height: 86px; place-items: center; color: #fff; background: #242322; font-size: 38px; }.ref-ux-copy { position: absolute; bottom: 18px; left: 18px; color: #fff5e9; font: 8px var(--mono); letter-spacing: .1em; }
.ref-process { padding: 150px 0; background: #e9e9e4; }.ref-process__heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; }.ref-process__heading h2 { margin: 0; font-size: clamp(58px,8vw,120px); font-weight: 500; line-height: .84; letter-spacing: -.09em; }.ref-process__heading h2 span { color: var(--ref-coral); }.ref-process__heading p { width: 260px; margin: 0; color: var(--ref-muted); font-size: 13px; line-height: 1.5; }.ref-process-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 65px; border-top: 1px solid var(--ref-line); }.ref-process-step { min-height: 294px; padding: 19px 19px 25px; border-right: 1px solid var(--ref-line); }.ref-process-step:first-child { border-left: 1px solid var(--ref-line); }.ref-process-step span { color: var(--ref-muted); font: 8px var(--mono); letter-spacing: .1em; }.ref-process-step i { display: grid; height: 126px; color: var(--ref-coral); place-items: center; font-size: 34px; font-style: normal; }.ref-process-step h3 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.06em; }.ref-process-step p { margin: 11px 0 0; color: var(--ref-muted); font-size: 11px; line-height: 1.55; }
.ref-faq { padding: 130px 0; background: var(--ref-paper); }.ref-faq__title { margin: 0 0 45px; font-size: clamp(50px,7vw,100px); line-height:.85; letter-spacing: -.09em; font-weight: 500; }.ref-faq-list { border-top: 1px solid var(--ref-line); }.ref-faq-row { display: grid; grid-template-columns: 80px 1fr 1.1fr 25px; gap: 20px; padding: 23px 0; border-bottom: 1px solid var(--ref-line); }.ref-faq-row span { color: var(--ref-muted); font: 9px var(--mono); }.ref-faq-row h3 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -.04em; }.ref-faq-row p { margin: 0; color: var(--ref-muted); font-size: 12px; line-height: 1.5; }.ref-faq-row b { color: var(--ref-coral); }

/* About */
.ref-about-hero { padding: 147px 0 70px; background: var(--ref-paper); }.ref-about-hero h1 { max-width: 1180px; margin: 82px 0 0; font-size: clamp(78px, 11.7vw, 177px); line-height: .8; letter-spacing: -.095em; font-weight: 600; }.ref-about-hero h1 span { color: var(--ref-coral); }.ref-about-hero__bottom { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-top: 61px; padding-top: 23px; border-top: 1px solid var(--ref-line); }.ref-about-hero__bottom p { max-width: 400px; margin: 0; color: var(--ref-muted); font-size: 16px; line-height: 1.55; }
.ref-mosaic-section { padding: 28px 0 150px; background: var(--ref-paper); }.ref-mosaic { display: grid; grid-template-columns: 1fr 1.2fr .88fr 1fr; grid-template-rows: 230px 245px; gap: 10px; }.ref-mosaic-tile { position: relative; overflow: hidden; padding: 19px; }.ref-mosaic-tile small { font: 8px/1.45 var(--mono); letter-spacing: .1em; }.ref-mosaic-tile--coral { color: #fff5ea; background: var(--ref-coral); }.ref-mosaic-tile--coral b { position: absolute; bottom: 19px; left: 19px; font-size: clamp(26px,3vw,42px); font-weight: 500; line-height: .86; letter-spacing: -.08em; }.ref-mosaic-tile--coral i { position: absolute; top: 18px; right: 20px; font-size: 34px; font-style: normal; }.ref-mosaic-tile--screen { grid-column: 2 / 4; background: #fdfdfb; border: 1px solid #dfdfda; }.ref-mosaic-tile--screen h3 { margin: 32px 0 0; font-size: clamp(27px,4vw,54px); font-weight: 500; line-height: .86; letter-spacing: -.085em; }.ref-mosaic-tile--screen h3 span { color: var(--ref-coral); }.ref-mosaic-mini-bars { position: absolute; right: 17px; bottom: 17px; left: 17px; display: flex; align-items: end; gap: 6px; height: 65px; border-bottom: 1px solid #dcdcd6; }.ref-mosaic-mini-bars i { flex: 1; height: 33%; background: #f4ab8e; }.ref-mosaic-mini-bars i:nth-child(2n) { height: 63%; }.ref-mosaic-mini-bars i:nth-child(3n) { height: 90%; background: var(--ref-coral); }.ref-mosaic-tile--peach { color: #3d2219; background: var(--ref-peach); }.ref-mosaic-tile--peach b { display: block; margin-top: 45px; font-size: 45px; font-weight: 400; }.ref-mosaic-tile--type { grid-column: 1 / 3; background: #222; color: #f8f8f3; }.ref-mosaic-tile--type h3 { margin: 0; font-size: clamp(30px,4vw,54px); line-height: .86; letter-spacing: -.08em; font-weight: 500; }.ref-mosaic-tile--type small { position: absolute; bottom: 17px; left: 19px; color: #a6a59f; }.ref-mosaic-tile--portrait { color: #fff5e9; background: linear-gradient(135deg,#efae8c,#c5482b); }.ref-mosaic-tile--portrait b { position: absolute; right: 17px; bottom: 15px; font-size: clamp(31px,4vw,58px); line-height: .72; letter-spacing: -.1em; }.ref-mosaic-tile--portrait i { position: absolute; top: 18px; left: 19px; font-size: 30px; font-style: normal; }.ref-mosaic-tile--note { color: #171716; background: #e5e5df; }.ref-mosaic-tile--note b { position: absolute; right: 18px; bottom: 17px; font-size: 24px; line-height: .88; letter-spacing: -.07em; font-weight: 500; }
.ref-story { padding: 150px 0; background: #e9e9e4; }.ref-story__grid { display: grid; grid-template-columns: 1.02fr .86fr; gap: 11vw; align-items: start; }.ref-story h2 { font-size: clamp(63px,8vw,120px); }.ref-story h2 span { color: var(--ref-coral); }.ref-story__copy .ref-lead { margin: 0 0 23px; color: var(--ref-ink); font-size: clamp(19px,2vw,27px); line-height: 1.27; letter-spacing: -.05em; }.ref-story__copy p:not(.ref-lead) { margin: 0 0 18px; color: var(--ref-muted); font-size: 14px; line-height: 1.64; }
.ref-number-row { padding: 145px 0; background: var(--ref-paper); }.ref-number-row__grid { display: grid; grid-template-columns: repeat(3,1fr); }.ref-number { display: flex; align-items: end; justify-content: space-between; min-height: 178px; padding: 0 25px; border-left: 1px solid var(--ref-line); }.ref-number:last-child { border-right: 1px solid var(--ref-line); }.ref-number strong { font-size: clamp(64px,9vw,136px); font-weight: 500; line-height: .75; letter-spacing: -.1em; }.ref-number strong span { color: var(--ref-coral); font-size: .45em; vertical-align: top; }.ref-number p { margin: 0 0 6px; color: var(--ref-muted); font: 8px/1.55 var(--mono); letter-spacing: .1em; }
.ref-mission { padding: 150px 0; color: #f7f7f2; background: #1a1a19; }.ref-mission__grid { display: grid; grid-template-columns: 1.15fr .7fr; gap: 10vw; align-items: end; }.ref-mission h2 { font-size: clamp(58px,8vw,120px); }.ref-mission h2 span { color: var(--ref-coral); }.ref-mission p { max-width: 420px; margin: 0; color: #aaa9a3; font-size: 16px; line-height: 1.52; }
.ref-values { padding: 150px 0; background: var(--ref-paper); }.ref-values__heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 61px; }.ref-values__heading h2 { font-size: clamp(55px,7vw,105px); }.ref-values__heading p { width: 240px; margin: 0; color: var(--ref-muted); font-size: 13px; line-height:1.55; }.ref-value-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top:1px solid var(--ref-line); }.ref-value { min-height: 290px; padding: 20px; border-right: 1px solid var(--ref-line); }.ref-value:first-child { border-left: 1px solid var(--ref-line); }.ref-value span { color: var(--ref-muted); font: 8px var(--mono); letter-spacing:.1em; }.ref-value i { display: grid; height: 115px; color: var(--ref-coral); place-items:center; font-size:32px; font-style:normal; }.ref-value h3 { margin: 0; font-size:21px; letter-spacing:-.055em; font-weight:500; }.ref-value p { margin:10px 0 0; color: var(--ref-muted); font-size:11px; line-height:1.55; }
.ref-timeline { padding: 145px 0; background: #e9e9e4; }.ref-timeline h2 { margin-bottom: 62px; font-size:clamp(58px,8vw,120px); }.ref-timeline h2 span { color:var(--ref-coral); }.ref-timeline-list { border-top:1px solid var(--ref-line); }.ref-timeline-row { display:grid; grid-template-columns: 150px 1fr 80px; gap:30px; padding:26px 0; border-bottom:1px solid var(--ref-line); }.ref-timeline-row span { color:var(--ref-muted); font:9px var(--mono); }.ref-timeline-row h3 { margin:0; font-size:24px; font-weight:500; letter-spacing:-.06em; }.ref-timeline-row p { max-width:590px; margin:8px 0 0; color:var(--ref-muted); font-size:12px; line-height:1.55; }.ref-timeline-row b { color:var(--ref-coral); text-align:right; font:10px var(--mono); }

/* Work */
.ref-work-hero { padding: 147px 0 85px; background:var(--ref-paper); }.ref-work-hero h1 { margin:76px 0 0; font-size:clamp(82px,12vw,185px); line-height:.8; letter-spacing:-.095em; font-weight:600; }.ref-work-hero h1 span { color:var(--ref-coral); }.ref-work-hero__bottom { display:flex; justify-content:space-between; margin-top:72px; padding-top:22px; border-top:1px solid var(--ref-line); }.ref-work-hero__bottom p { max-width:390px; margin:0; color:var(--ref-muted); font-size:15px; line-height:1.55; }.ref-cases { padding:0 0 150px; background:var(--ref-paper); }.ref-case { display:grid; grid-template-columns: 1.1fr .9fr; gap:0; overflow:hidden; border-top:1px solid var(--ref-line); }.ref-case:last-child { border-bottom:1px solid var(--ref-line); }.ref-case:nth-child(even) { direction:rtl; }.ref-case:nth-child(even)>* { direction:ltr; }.ref-case-visual { position:relative; min-height:455px; overflow:hidden; }.ref-case-visual--north { background:linear-gradient(135deg,#e9e8da,#bdc8ad); }.ref-case-visual--flora { background:radial-gradient(circle at 54% 43%,#fff1c5,#e89b73 30%,#ad4a36 68%,#5c332b); }.ref-case-visual--orbit { background:linear-gradient(135deg,#ffd1ab,#ef6e51); }.ref-case-visual--field { background:linear-gradient(135deg,#f2ede4,#d7c5b9); }.ref-case-info { display:flex; flex-direction:column; justify-content:space-between; padding:43px; background:#f9f9f6; }.ref-case-info .ref-case-eyebrow { color:var(--ref-muted); }.ref-case-info h2 { margin:46px 0 0; font-size:clamp(36px,4.7vw,72px); font-weight:500; line-height:.88; letter-spacing:-.085em; }.ref-case-info h2 span { color:var(--ref-coral); }.ref-case-info p { max-width:340px; margin:18px 0 0; color:var(--ref-muted); font-size:14px; line-height:1.55; }.ref-case-meta { display:flex; justify-content:space-between; align-items:end; margin-top:50px; }.ref-case-meta span { color:var(--ref-muted); font:9px var(--mono); letter-spacing:.1em; }.ref-case-meta b { display:grid; width:42px; height:42px; border:1px solid #bbb; border-radius:50%; color:var(--ref-coral); place-items:center; transition:transform .25s,background .25s; }.ref-case:hover .ref-case-meta b { color:#fff; background:var(--ref-coral); border-color:var(--ref-coral); transform:rotate(45deg); }
.ref-north-ui { position:absolute; top:13%; right:10%; bottom:13%; left:10%; padding:21px; background:#fbfbf7; box-shadow:0 21px 55px rgba(46,55,40,.22); }.ref-north-ui__top { display:flex; justify-content:space-between; font-size:15px; font-weight:600; }.ref-north-ui strong { display:block; margin-top:45px; font-size:42px; letter-spacing:-.09em; }.ref-north-ui small { color:#82867b; font:8px var(--mono); }.ref-north-bars { position:absolute; right:21px; bottom:28px; left:21px; height:37%; display:flex; align-items:end; gap:7px; border-bottom:1px solid #ddd; }.ref-north-bars i { flex:1; height:34%; background:#b4cc83; }.ref-north-bars i:nth-child(2n){height:67%}.ref-north-bars i:nth-child(3n){height:89%;background:#fe4a23}.ref-orbit-ui { position:absolute; top:22%; left:20%; width:60%; padding:26px; color:#f8f7f1; background:#202020; box-shadow:0 23px 44px rgba(83,33,25,.28); transform:rotate(-4deg); }.ref-orbit-ui small { color:#aaa; font:8px var(--mono); }.ref-orbit-ui b { display:block; margin:30px 0 14px; font-size:24px; font-weight:500; }.ref-orbit-ui i { display:block; width:78%; height:4px; background:var(--ref-coral); }.ref-orbit-spark { position:absolute; top:20%; right:18%; color:#fff3e2; font-size:52px; }.ref-field-ui { position:absolute; top:17%; right:16%; bottom:17%; left:16%; padding:24px; color:#fff; background:#232721; }.ref-field-ui small { color:#b5b5aa; font:8px var(--mono); }.ref-field-ui b { display:block; margin-top:26px; font-size:clamp(25px,3.3vw,47px); line-height:.88; font-weight:500; letter-spacing:-.08em; }.ref-field-ui span { position:absolute; bottom:20px; left:24px; color:var(--ref-peach); font:16px var(--mono); }

/* Motion states */
.ref-animate { opacity: 0; transform: translateY(36px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.ref-animate.is-visible { opacity: 1; transform: translateY(0); }
.ref-device.is-visible .ref-graph i,
.ref-animate.is-visible .ref-graph i,
.ref-animate.is-visible .ref-mosaic-mini-bars i,
.ref-animate.is-visible .ref-admin-bars i,
.ref-animate.is-visible .ref-wire-lines i,
.ref-animate.is-visible .ref-data-dots i,
.ref-animate.is-visible .ref-north-bars i { animation: ref-bar-in .75s cubic-bezier(.2,.7,.2,1) both; }
.ref-graph i:nth-child(2n),.ref-mosaic-mini-bars i:nth-child(2n),.ref-admin-bars i:nth-child(2n),.ref-wire-lines i:nth-child(2n),.ref-data-dots i:nth-child(2n),.ref-north-bars i:nth-child(2n){animation-delay:.08s}.ref-graph i:nth-child(3n),.ref-mosaic-mini-bars i:nth-child(3n),.ref-admin-bars i:nth-child(3n),.ref-wire-lines i:nth-child(3n),.ref-data-dots i:nth-child(3n),.ref-north-bars i:nth-child(3n){animation-delay:.16s}.ref-device-note { animation: ref-float 5s ease-in-out infinite; }.ref-orbit-core,.ref-radar b { animation: ref-pulse 4.5s ease-in-out infinite; }.ref-service-art--data .ref-data-ring { animation: ref-spin-in 1.2s cubic-bezier(.2,.7,.2,1) both; }.ref-control-line.is-visible path { animation: ref-line .95s ease-out forwards; }
@keyframes ref-marquee { to { transform:translateX(-50%); } }
@keyframes ref-bar-in { from { transform:scaleY(.04); } to { transform:scaleY(1); } }
@keyframes ref-float { 0%,100%{ transform:rotate(5deg) translateY(0); }50%{transform:rotate(2deg) translateY(-10px);} }
@keyframes ref-pulse { 50%{ transform:scale(1.1); filter:saturate(1.16); } }
@keyframes ref-spin-in { from { transform:translate(-50%,-50%) rotate(-120deg) scale(.65); opacity:0; } to { transform:translate(-50%,-50%) rotate(0) scale(1); opacity:1; } }
@keyframes ref-line { to { stroke-dashoffset:0; } }

@media (max-width: 900px) {
  :root { --ref-shell: min(90vw, 760px); }
  .ref-hero { min-height: 850px; }.ref-device { min-height: 390px; }.ref-device__grid { height: 210px; }.ref-device-note { right:-22px; }
  .ref-feature-pair__intro,.ref-control__heading,.ref-story__grid,.ref-mission__grid { grid-template-columns: 1fr; gap: 35px; }.ref-feature-pair__intro p { max-width: 390px; }.ref-feature-cards { grid-template-columns: 1fr 1fr; }.ref-feature-card { min-height: 420px; padding:25px; }.ref-control-board { grid-template-columns: 130px 1fr; }.ref-service-band { grid-template-columns: 52px 1fr .85fr; gap: 24px; padding-right:5vw; padding-left:5vw; }.ref-service-art { min-height:270px; }.ref-value-grid { grid-template-columns:1fr 1fr; }.ref-value:nth-child(3) { border-left:1px solid var(--ref-line); }.ref-mosaic { grid-template-rows:190px 205px; }.ref-case-info { padding:30px; }.ref-case-visual { min-height:390px; }
}

@media (max-width: 650px) {
  :root { --ref-shell: calc(100vw - 42px); }
  body.ref-page .nav { height:70px; padding:0 22px; }.ref-page .nav.is-compact { height:64px; }
  .ref-section { padding:85px 0; }.ref-label,.ref-overline,.ref-kicker,.ref-meta { font-size:7px; }
  .ref-hero { min-height:750px; padding-top:105px; }.ref-hero__topline,.ref-page-hero__topline,.ref-contact__topline { padding-top:18px; }.ref-hero__topline span:last-child,.ref-page-hero__topline span:last-child { display:none; }.ref-hero h1,.ref-page-hero h1 { margin-top:54px; font-size:clamp(61px,17.3vw,105px); line-height:.81; }.ref-hero__subline { grid-template-columns: 1fr; gap:13px; padding-top:28px; }.ref-hero__subline p,.ref-page-hero__bottom p,.ref-contact__body p { font-size:12px; }.ref-hero__subline .ref-caption { justify-self:start; font-size:7px; }
  .ref-device-wrap { margin-top:24px; width:100%; }.ref-device { min-height:282px; border-radius:6px; transform:none; }.ref-device__bar { height:34px; padding:0 12px; }.ref-device__mark { margin-right:8px; font-size:15px; }.ref-device__bar span,.ref-device__bar b { font-size:5px; }.ref-device__content { padding:14px; }.ref-device__heading small{font-size:6px}.ref-device__heading h2{font-size:22px}.ref-device__heading a{font-size:7px}.ref-device__grid{height:160px;gap:7px;margin-top:13px}.ref-chart-panel,.ref-sprint-panel{padding:9px}.ref-panel-top{font-size:5px}.ref-chart-panel strong{margin-top:8px;font-size:22px}.ref-chart-panel strong small{font-size:6px}.ref-graph{right:9px;bottom:23px;left:9px;height:57px;gap:3px}.ref-graph-labels{right:9px;bottom:7px;left:9px;font-size:5px}.ref-sprint-panel>span,.ref-sprint-panel>small{font-size:5px}.ref-sprint-panel b{font-size:28px;margin-top:8px}.ref-mini-avatars i{width:18px;height:18px;font-size:5px}.ref-sprint-progress{margin-top:8px;height:3px}.ref-device-note{top:41%;right:-11px;width:73px;height:65px;padding:8px;border-radius:4px}.ref-device-note b{font-size:15px}.ref-device-note span{font-size:4px}
  .ref-feature-pair { padding:83px 0; }.ref-feature-pair__intro { padding-bottom:28px; }.ref-feature-pair h2,.ref-statement h2,.ref-control h2,.ref-insights h2,.ref-service-intro h2,.ref-story h2,.ref-mission h2,.ref-values-heading h2,.ref-timeline h2 { font-size:clamp(47px,13vw,77px); }.ref-feature-pair__intro p { font-size:13px; }.ref-feature-cards { grid-template-columns:1fr; }.ref-feature-card { min-height:350px; padding:20px; }.ref-feature-card h3 { margin-top:45px; font-size:37px; }.ref-feature-card p { font-size:11px; }.ref-radar { right:-50px; bottom:-24%; width:260px; height:260px; }.ref-orbit-visual { right:-54px; bottom:-59px; width:294px; height:294px; }.ref-orbit-core{right:62px;bottom:53px;width:95px;height:95px}
  .ref-statement { padding:85px 0 72px; }.ref-statement__row { display:block; }.ref-statement h2 { font-size:clamp(55px,14.5vw,90px); }.ref-statement p { width:auto; max-width:260px; margin-top:26px; font-size:12px; }.ref-word-strip__track { font-size:10px; gap:18px; }
  .ref-control { padding:85px 0; }.ref-control__heading { margin-bottom:34px; }.ref-control__heading p { font-size:12px; }.ref-control-board { grid-template-columns:1fr; }.ref-control-side { display:flex; align-items:center; height:55px; padding:0 15px; border-right:0; border-bottom:1px solid #393936; }.ref-control-side ul { display:flex; gap:16px; margin-left:auto; padding:0; }.ref-control-side li { display:none; padding:0; }.ref-control-side li:first-child { display:block; }.ref-control-screen{padding:15px}.ref-control-screen__top small{font-size:6px}.ref-control-screen__top b{font-size:12px}.ref-control-metrics{gap:6px;margin-top:18px}.ref-control-metric{padding:9px}.ref-control-metric span{font-size:5px}.ref-control-metric b{font-size:18px;margin-top:7px}.ref-control-metric em{font-size:6px}.ref-control-plot{height:130px;padding:10px}.ref-control-plot span{font-size:6px}.ref-control-line{right:12px;bottom:17px;left:12px;height:62px}
  .ref-insights { padding:85px 0; }.ref-insights__heading { display:block; margin-bottom:30px; }.ref-insights__heading p { margin-top:22px; font-size:12px; }.ref-insight-grid { grid-template-columns:1fr; gap:8px; }.ref-insight { min-height:240px; padding:18px; }.ref-insight__symbol { width:55px; height:55px; margin:34px 0 22px; font-size:23px; }.ref-insight h3 { font-size:23px; }.ref-insight p { font-size:11px; }
  .ref-contact { padding:48px 0 40px; }.ref-contact h2 { margin-top:75px; font-size:clamp(62px,16vw,97px); }.ref-contact__body { display:block; margin-top:49px; }.ref-contact__body p { margin-top:15px; }.ref-contact__email { font-size:19px; }.ref-page .footer { padding:22px 23px; }
  .ref-page-hero { padding:106px 0 51px; }.ref-page-hero h1 { margin-top:57px; font-size:clamp(87px,21vw,135px); }.ref-page-hero__bottom { align-items:start; gap:15px; margin-top:39px; }.ref-page-hero__bottom span { font-size:6px; white-space:nowrap; }
  .ref-service-band { grid-template-columns: 33px 1fr; gap:11px; min-height:0; padding:43px 21px; }.ref-band-index{font-size:7px}.ref-service-copy h2{font-size:clamp(30px,9vw,46px)}.ref-service-copy p{font-size:11px;margin-top:16px}.ref-service-tags{margin-top:19px;gap:5px}.ref-service-tags span{font-size:6px;padding:6px}.ref-service-art{grid-column:2;min-height:210px;margin-top:18px}.ref-wireframe h3{font-size:28px}.ref-code-card{padding:13px}.ref-code-card code{margin-top:14px;font-size:8px}.ref-admin-window{inset:12% 8%}.ref-data-ring{width:140px;height:140px}.ref-data-ring b{font-size:22px}.ref-process{padding:85px 0}.ref-process__heading{display:block}.ref-process__heading h2{font-size:clamp(50px,13vw,78px)}.ref-process__heading p{width:auto;margin-top:22px;font-size:12px}.ref-process-grid{grid-template-columns:1fr 1fr;margin-top:35px}.ref-process-step{min-height:210px;padding:14px;border-bottom:1px solid var(--ref-line)}.ref-process-step:nth-child(3){border-left:1px solid var(--ref-line)}.ref-process-step i{height:72px;font-size:26px}.ref-process-step h3{font-size:18px}.ref-process-step p{font-size:9px}.ref-faq{padding:80px 0}.ref-faq__title{font-size:clamp(48px,13vw,76px);margin-bottom:28px}.ref-faq-row{grid-template-columns:28px 1fr 18px;gap:9px;padding:17px 0}.ref-faq-row span{font-size:7px}.ref-faq-row h3{font-size:14px}.ref-faq-row p{display:none}
  .ref-about-hero{padding:106px 0 43px}.ref-about-hero h1{margin-top:55px;font-size:clamp(65px,17vw,105px)}.ref-about-hero__bottom{display:block;margin-top:42px}.ref-about-hero__bottom p{font-size:13px}.ref-mosaic-section{padding:18px 0 84px}.ref-mosaic{grid-template-columns:1fr 1.2fr .88fr;grid-template-rows:139px 150px;gap:5px}.ref-mosaic-tile{padding:10px}.ref-mosaic-tile small{font-size:5px}.ref-mosaic-tile--coral b{bottom:10px;left:10px;font-size:22px}.ref-mosaic-tile--coral i{top:9px;right:10px;font-size:25px}.ref-mosaic-tile--screen{grid-column:2 / 4}.ref-mosaic-tile--screen h3{margin-top:18px;font-size:28px}.ref-mosaic-mini-bars{right:10px;bottom:10px;left:10px;height:38px;gap:3px}.ref-mosaic-tile--peach{display:none}.ref-mosaic-tile--type{grid-column:1 / 3}.ref-mosaic-tile--type h3{font-size:29px}.ref-mosaic-tile--type small{bottom:10px;left:10px}.ref-mosaic-tile--portrait b{right:9px;bottom:9px;font-size:34px}.ref-mosaic-tile--portrait i{top:9px;left:10px;font-size:22px}.ref-mosaic-tile--note{display:none}.ref-story{padding:83px 0}.ref-story__grid{gap:31px}.ref-story__copy .ref-lead{font-size:18px}.ref-story__copy p:not(.ref-lead){font-size:12px}.ref-number-row{padding:82px 0}.ref-number{min-height:110px;padding:0 8px}.ref-number strong{font-size:clamp(42px,12vw,62px)}.ref-number p{font-size:5px;margin-left:4px}.ref-mission{padding:84px 0}.ref-mission p{font-size:13px}.ref-values{padding:80px 0}.ref-values__heading{display:block;margin-bottom:30px}.ref-values__heading p{width:auto;margin-top:21px;font-size:12px}.ref-value-grid{grid-template-columns:1fr 1fr}.ref-value{min-height:215px;padding:14px;border-bottom:1px solid var(--ref-line)}.ref-value:nth-child(3){border-left:1px solid var(--ref-line)}.ref-value span{font-size:6px}.ref-value i{height:77px;font-size:25px}.ref-value h3{font-size:17px}.ref-value p{font-size:9px}.ref-timeline{padding:80px 0}.ref-timeline h2{margin-bottom:35px}.ref-timeline-row{grid-template-columns:72px 1fr 20px;gap:8px;padding:17px 0}.ref-timeline-row span,.ref-timeline-row b{font-size:7px}.ref-timeline-row h3{font-size:16px}.ref-timeline-row p{font-size:9px}
  .ref-work-hero{padding:106px 0 48px}.ref-work-hero h1{margin-top:55px;font-size:clamp(69px,17vw,108px)}.ref-work-hero__bottom{display:block;margin-top:40px}.ref-work-hero__bottom p{font-size:13px}.ref-cases{padding-bottom:80px}.ref-case,.ref-case:nth-child(even){grid-template-columns:1fr;direction:ltr}.ref-case-visual{min-height:300px}.ref-case-info{padding:23px;min-height:295px}.ref-case-info h2{margin-top:37px;font-size:42px}.ref-case-info p{font-size:12px}.ref-case-meta{margin-top:34px}
}

@media (prefers-reduced-motion: reduce) {
  .ref-animate,.ref-animate.is-visible { opacity:1; transform:none; transition:none; }
  .ref-device-note,.ref-orbit-core,.ref-radar b,.ref-service-art--data .ref-data-ring,.ref-word-strip__track { animation:none; }
  .ref-control-line path { stroke-dashoffset:0; }
}

/* Final composition pass: a product-first rhythm with original interface art. */
:root { --ref-display: "Manrope", "Helvetica Neue", Arial, sans-serif; }
body.ref-page { --font: var(--ref-display); font-family: var(--ref-display); }
html:not(.js) .ref-animate { opacity: 1; transform: none; }

/* Home: keep the opening as one large product moment rather than a stack of cards. */
.ref-home .ref-hero { min-height: clamp(820px, 91vh, 1030px); padding-top: 118px; }
.ref-home .ref-hero h1 { max-width: 1280px; margin-top: 48px; font-family: var(--ref-display); font-size: clamp(80px, 11.8vw, 180px); font-weight: 600; line-height: .77; letter-spacing: -.105em; }
.ref-home .ref-hero__subline { position: relative; z-index: 3; padding-top: 28px; }
.ref-home .ref-hero__subline p { max-width: 385px; font-size: 14px; }
.ref-home .ref-device-wrap { width: min(96vw, 1300px); margin: -20px auto 0; }
.ref-home .ref-device { min-height: 410px; border-radius: 3px; box-shadow: 0 38px 90px rgba(31,27,22,.19), 0 7px 20px rgba(31,27,22,.1); transform: perspective(1500px) rotateX(calc(3deg + var(--ref-tilt-x, 0deg))) rotateY(var(--ref-tilt-y, 0deg)) rotateZ(-.55deg); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.ref-home .ref-device:hover { box-shadow: 0 48px 100px rgba(31,27,22,.23), 0 7px 20px rgba(31,27,22,.1); }
.ref-home .ref-device__bar { height: 48px; padding: 0 22px; }
.ref-home .ref-device__content { padding: 23px 26px 27px; }
.ref-home .ref-device__grid { height: 245px; margin-top: 20px; }
.ref-home .ref-device-note { right: 2.5%; top: auto; bottom: -34px; border-radius: 3px; transform: rotate(4deg); }
.ref-signal { position: absolute; z-index: 4; display: grid; min-width: 74px; min-height: 42px; padding: 10px 12px; border: 1px solid rgba(18,18,18,.15); border-radius: 2px; box-shadow: 0 16px 32px rgba(28,24,20,.14); place-items: center; font: 500 7px/1.4 var(--mono); letter-spacing: .1em; text-align: center; }
.ref-signal--coral { top: 18%; left: -14px; color: #fff; background: var(--ref-coral); transform: rotate(-7deg); }
.ref-signal--peach { top: 9%; right: 8%; width: 45px; min-width: 45px; min-height: 45px; padding: 0; color: var(--ref-ink); background: var(--ref-peach); font-size: 17px; transform: rotate(9deg); }
.ref-signal--ink { bottom: 11%; left: 4.5%; color: #fff; background: var(--ref-charcoal); transform: rotate(3deg); }

/* The oversized bridge makes the purpose of the work explicit before the feature chapters. */
.ref-promise { padding: 174px 0 154px; color: var(--ref-ink); background: var(--ref-paper); }
.ref-promise .ref-shell { display: grid; grid-template-columns: 1.25fr .45fr; gap: 10vw; align-items: end; }
.ref-promise__lead .ref-kicker { color: var(--ref-muted); }
.ref-promise h2 { margin: 35px 0 0; font-size: clamp(70px, 9.25vw, 142px); font-weight: 500; line-height: .79; letter-spacing: -.105em; }
.ref-promise h2 span { color: var(--ref-coral); }
.ref-promise__aside { max-width: 285px; padding-bottom: 7px; }
.ref-promise__disc { display: grid; width: 73px; height: 73px; margin: 0 0 28px; border-radius: 50%; place-items: center; color: #fff; background: var(--ref-coral); font-size: 29px; transform: rotate(-33deg); }
.ref-promise__aside p { margin: 0; color: var(--ref-muted); font-size: 14px; line-height: 1.55; }
.ref-promise__aside a { display: inline-flex; gap: 12px; margin-top: 27px; padding-bottom: 8px; border-bottom: 1px solid var(--ref-ink); color: var(--ref-ink); font: 500 9px var(--mono); letter-spacing: .09em; }
.ref-promise__aside a b { color: var(--ref-coral); font-size: 13px; line-height: .7; }

/* Make the light/dark feature pair feel like broad interface chapters. */
.ref-home .ref-feature-pair { padding: 140px 0 150px; }
.ref-home .ref-feature-card { min-height: min(63vw, 660px); border-radius: 3px; }
.ref-home .ref-feature-card--light { border: 1px solid #ddddD6; }
.ref-home .ref-feature-card--dark { border: 1px solid #242422; }
.ref-home .ref-feature-card h3 { margin-top: 74px; font-size: clamp(39px, 4.7vw, 71px); }
.ref-home .ref-radar { right: -2%; bottom: -21%; width: 430px; height: 430px; }
.ref-home .ref-orbit-visual { right: -9%; bottom: -22%; width: 430px; height: 430px; }

/* A custom orange product chapter replaces the generic statement band. */
.ref-proof { padding: 139px 0 126px; color: #22140e; background: var(--ref-coral); }
.ref-proof__top { display: flex; justify-content: space-between; gap: 45px; padding-bottom: 55px; border-bottom: 1px solid rgba(40,19,11,.32); }
.ref-proof__top .ref-kicker { color: #4d2117; }
.ref-proof__top p { width: 290px; margin: 0; color: #552518; font-size: 14px; line-height: 1.55; }
.ref-proof__headline { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 64px 0 58px; }
.ref-proof h2 { margin: 0; font-size: clamp(69px, 9.6vw, 147px); font-weight: 500; line-height: .78; letter-spacing: -.11em; }
.ref-proof h2 em { color: #fef2e7; font-style: normal; }
.ref-proof__headline > span { padding-bottom: 8px; color: #4e2117; font: 9px var(--mono); letter-spacing: .1em; }
.ref-proof-board { display: grid; grid-template-columns: 138px 1fr; min-height: 347px; overflow: hidden; border: 1px solid rgba(31,19,13,.38); border-radius: 3px; color: var(--ref-ink); background: #fff8f0; box-shadow: 0 25px 50px rgba(84,27,12,.18); }
.ref-proof-board__rail { display: flex; flex-direction: column; gap: 20px; padding: 24px 18px; border-right: 1px solid #e3d7ca; background: #f4e8db; }
.ref-proof-board__rail b { margin-bottom: 23px; color: var(--ref-coral); font-size: 25px; letter-spacing: -.12em; }
.ref-proof-board__rail span { color: #776d64; font: 8px var(--mono); letter-spacing: .1em; }
.ref-proof-board__rail span:nth-of-type(3) { color: var(--ref-ink); }
.ref-proof-board__body { padding: 27px; }
.ref-proof-board__bar { display: flex; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid #e7ddd3; color: #68625c; font: 8px var(--mono); letter-spacing: .1em; }
.ref-proof-board__bar i { color: #3f864b; font-style: normal; }
.ref-proof-board__layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 20px; height: calc(100% - 43px); }
.ref-proof-board__copy { padding: 40px 0 0 7px; }
.ref-proof-board__copy small { color: #817a73; font: 8px var(--mono); letter-spacing: .1em; }
.ref-proof-board__copy strong { display: block; margin-top: 12px; font-size: clamp(24px,2.8vw,42px); font-weight: 500; line-height: .87; letter-spacing: -.08em; }
.ref-proof-board__copy p { margin: 15px 0 0; color: #777069; font-size: 11px; }
.ref-proof-board__map { position: relative; align-self: center; height: 190px; border: 1px solid #e3d8ce; background: repeating-linear-gradient(to bottom, transparent 0 47px, #eee4da 47px 48px); }
.ref-proof-board__map:before { content: ""; position: absolute; top: 51%; right: 13%; left: 13%; height: 2px; background: var(--ref-coral); transform: rotate(-8deg); transform-origin: left; }
.ref-proof-board__map i { position: absolute; z-index: 2; width: 13px; height: 13px; border: 3px solid #fff8f0; border-radius: 50%; background: var(--ref-coral); box-shadow: 0 0 0 1px var(--ref-coral); }
.ref-proof-board__map i:nth-child(1) { top: 59%; left: 15%; }.ref-proof-board__map i:nth-child(2) { top: 48%; left: 32%; }.ref-proof-board__map i:nth-child(3) { top: 52%; left: 50%; }.ref-proof-board__map i:nth-child(4) { top: 38%; left: 68%; }.ref-proof-board__map i:nth-child(5) { top: 28%; left: 84%; }
.ref-proof-board__map b { position: absolute; top: 17%; right: 23%; display: grid; width: 54px; height: 54px; border-radius: 50%; place-items: center; color: #fff; background: var(--ref-ink); font-size: 20px; }

/* Sharper edges and a longer dark control chapter reinforce the product feel. */
.ref-home .ref-control { padding: 172px 0; }
.ref-home .ref-control-board { min-height: 520px; border-radius: 3px; }
.ref-home .ref-control-screen { padding: 33px; }
.ref-home .ref-control-metric,.ref-home .ref-control-plot { border-radius: 2px; }
.ref-home .ref-control-plot { height: 232px; }
.ref-home .ref-insight { border-radius: 3px; }
.ref-home .ref-insight__symbol { border-radius: 3px; }

@media (max-width: 900px) {
  .ref-home .ref-hero { min-height: 815px; }
  .ref-home .ref-device-wrap { width: min(92vw, 760px); margin-top: -4px; }
  .ref-signal--coral { left: -5px; }.ref-signal--ink { left: 3%; }
  .ref-promise { padding: 122px 0; }.ref-promise .ref-shell { grid-template-columns: 1fr .55fr; gap: 7vw; }
  .ref-home .ref-feature-card { min-height: 520px; }
  .ref-proof-board { grid-template-columns: 105px 1fr; }.ref-proof-board__rail { padding: 20px 13px; }
}

@media (max-width: 650px) {
  .ref-home .ref-hero { min-height: 705px; padding-top: 99px; }.ref-home .ref-hero h1 { margin-top: 42px; font-size: clamp(61px,17.3vw,105px); }.ref-home .ref-hero__subline { padding-top: 22px; }.ref-home .ref-device-wrap { width: 100%; margin-top: 20px; }.ref-home .ref-device { min-height: 276px; transform: none; }.ref-home .ref-device:hover { transform: none; }.ref-home .ref-device-note { right: -7px; bottom: -23px; }.ref-signal { display: none; }
  .ref-promise { padding: 93px 0 87px; }.ref-promise .ref-shell { display: block; }.ref-promise h2 { margin-top: 25px; font-size: clamp(55px,14.5vw,89px); }.ref-promise__aside { margin-top: 40px; }.ref-promise__disc { width: 54px; height: 54px; margin-bottom: 21px; font-size: 23px; }.ref-promise__aside p { font-size: 12px; }
  .ref-home .ref-feature-pair { padding: 82px 0; }.ref-home .ref-feature-card { min-height: 375px; border-radius: 2px; }.ref-home .ref-feature-card h3 { margin-top: 44px; font-size: 39px; }.ref-home .ref-radar { width: 270px; height: 270px; }.ref-home .ref-orbit-visual { width: 275px; height: 275px; }
  .ref-proof { padding: 75px 0 66px; }.ref-proof__top { display: block; padding-bottom: 31px; }.ref-proof__top p { width: auto; margin-top: 17px; font-size: 12px; }.ref-proof__headline { display: block; padding: 41px 0 33px; }.ref-proof h2 { font-size: clamp(54px,14.4vw,88px); }.ref-proof__headline > span { display: block; margin-top: 17px; }.ref-proof-board { grid-template-columns: 1fr; min-height: 326px; }.ref-proof-board__rail { flex-direction: row; align-items: center; gap: 10px; min-height: 45px; padding: 0 13px; border-right: 0; border-bottom: 1px solid #e3d7ca; }.ref-proof-board__rail b { margin: 0 auto 0 0; font-size: 19px; }.ref-proof-board__rail span { display: none; }.ref-proof-board__rail span:nth-of-type(3) { display: block; }.ref-proof-board__body { padding: 15px; }.ref-proof-board__bar { font-size: 6px; }.ref-proof-board__layout { gap: 8px; }.ref-proof-board__copy { padding: 20px 0 0; }.ref-proof-board__copy small { font-size: 6px; }.ref-proof-board__copy strong { margin-top: 9px; font-size: 23px; }.ref-proof-board__copy p { font-size: 9px; }.ref-proof-board__map { height: 151px; }.ref-proof-board__map b { width: 38px; height: 38px; font-size: 14px; }
  .ref-home .ref-control { padding: 86px 0; }.ref-home .ref-control-board { min-height: 0; border-radius: 2px; }.ref-home .ref-control-screen { padding: 15px; }.ref-home .ref-control-plot { height: 135px; }
}