@font-face {
  font-family:Manrope;
  src:url('/assets/manrope-variable.ttf') format('truetype');
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
}

:root {
  --paper:#f8f7f2;
  --ink:#272a26;
  --muted:#64685e;
  --line:#dedfd5;
  --accent:#ba4527;
  --orange:#e26443;
  --blue:#edf1fa;
  --peach:#fae9df;
  --green:#e8eee2;
  --max:1200px;
  --radius:18px;
  --font:Manrope,Arial,sans-serif;
}

* {
  box-sizing:border-box;
}

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

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

::selection {
  background:var(--selection);
  color:var(--ink);
}

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

button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}

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

button:focus-visible,a:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px;
}

svg {
  display:block;
}

a svg,button svg {
  width:21px;
  height:21px;
  flex-shrink:0;
}

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

h1,h2,h3 {
  font-weight:600;
}

h1,h2 {
  letter-spacing:-.065em;
  line-height:1.13;
}

ul,ol {
  padding:0;
  margin:0;
}

button {
  border:0;
  background:none;
}

.container {
  width:min(calc(100% - 96px),var(--max));
  margin-inline:auto;
}

.orange {
  color:var(--accent);
}

.serif {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-style:italic;
  letter-spacing:-.055em;
}

.tiny,.section-kicker,.eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:.13em;
  line-height:1.6;
}

.section-kicker {
  margin-bottom:22px;
  color:var(--muted);
}

.orange-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
  margin-right:10px;
  flex-shrink:0;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link {
  position:fixed;
  top:10px;
  left:20px;
  background:var(--ink);
  color:var(--paper);
  padding:12px;
  z-index:20;
  transform:translateY(-150%);
}

.skip-link:focus {
  transform:none;
}

.site-header {
  position:sticky;
  top:0;
  z-index:10;
  background:var(--header-bg);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}

.header-inner {
  height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.wordmark {
  display:flex;
  align-items:center;
  gap:0;
  font-size:21px;
  font-weight:700;
  letter-spacing:-.06em;
}

.site-header nav {
  display:flex;
  gap:32px;
  font-size:12px;
  font-weight:600;
}

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

.site-header nav a::after {
  position:absolute;
  content:'';
  bottom:3px;
  left:0;
  height:2px;
  width:100%;
  transform:scaleX(0);
  background:var(--accent);
  transition:transform .2s;
}

.site-header nav a:hover::after,.site-header nav a[aria-current]::after {
  transform:scaleX(1);
}

.nav-contact {
  border:1px solid var(--line);
  padding:10px 18px;
  border-radius:100px;
  font-size:12px;
  font-weight:600;
  display:flex;
  gap:24px;
  transition:background .2s;
}

.nav-contact:hover {
  background:var(--surface);
}

.hero {
  position:relative;
  display:grid;
  grid-template-columns:1.7fr 1fr;
  align-items:center;
  gap:10px;
  padding-top:85px;
  padding-bottom:93px;
  min-height:630px;
}

.hero-copy {
  z-index:1;
}

.eyebrow {
  margin-bottom:24px;
}

.hero h1 {
  font-size:clamp(48px,6.15vw,82px);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.07em;
}

.building {
  position:relative;
  display:inline-block;
}

.building svg {
  position:absolute;
  left:0;
  bottom:-9px;
  width:100%;
  height:15px;
  fill:none;
  stroke:var(--orange);
  stroke-width:3;
  stroke-linecap:round;
}

.hero-description {
  max-width:440px;
  font-size:16px;
  line-height:1.75;
  color:var(--muted);
  margin-top:33px;
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:30px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:27px;
  background:var(--ink);
  color:var(--paper);
  border-radius:100px;
  padding:15px 24px;
  font-size:12px;
  font-weight:600;
  transition:background .2s,transform .2s;
}

.button:hover {
  background:var(--button-hover);
  transform:translateY(-2px);
}

.quiet-link {
  font-size:12px;
  font-weight:600;
  padding-block:10px;
  display:inline-flex;
  gap:16px;
  align-items:center;
}

.quiet-link:hover,.text-link:hover {
  color:var(--accent);
}

.hero-baseline {
  position:absolute;
  bottom:22px;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  font-size:9px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--muted);
}

.hero-baseline a {
  font-size:11px;
  letter-spacing:0;
  display:flex;
  gap:14px;
}

.hero-art {
  position:relative;
  width:100%;
  aspect-ratio:1;
  max-width:430px;
  justify-self:end;
}

.orbit {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.art-coordinate {
  position:absolute;
  top:0;
  right:25px;
  font-size:8px;
  letter-spacing:.13em;
  color:var(--muted);
}

.idea-card {
  position:absolute;
  top:20%;
  left:6%;
  width:51%;
  background:var(--raised);
  padding:22px;
  border:1px solid var(--line);
  border-radius:10px;
  transform:rotate(-10deg);
  box-shadow:0 7px 20px var(--shadow);
}

.idea-card .tiny {
  font-size:7px;
  color:var(--muted);
}

.idea-title {
  display:block;
  font-size:37px;
  letter-spacing:-.07em;
  margin-top:6px;
  font-weight:600;
}

.idea-line {
  display:block;
  width:85%;
  height:4px;
  background:var(--line);
  margin-top:15px;
  border-radius:5px;
}

.idea-line.short {
  width:50%;
  margin-top:6px;
}

.make-card {
  position:absolute;
  right:3%;
  top:40%;
  width:57%;
  padding:24px;
  background:var(--green);
  border:1px solid var(--green-line);
  border-radius:12px;
  transform:rotate(7deg);
  box-shadow:0 16px 26px var(--shadow);
}

.make-card .tiny {
  font-size:7px;
  color:var(--green-ink);
}

.build-symbol {
  display:grid;
  grid-template-columns:repeat(2,27px);
  gap:5px;
  margin-block:18px;
}

.build-symbol i {
  width:27px;
  height:27px;
  background:var(--green-solid);
  border-radius:5px;
}

.build-symbol i:nth-child(2) {
  background:var(--green-mid);
}

.build-symbol i:nth-child(3) {
  background:var(--green-node);
}

.build-symbol i:nth-child(4) {
  background:var(--peach-detail);
  border-radius:50%;
}

.make-title {
  font-weight:600;
  font-size:23px;
  letter-spacing:-.05em;
}

.make-footer {
  border-top:1px solid var(--green-line);
  margin-top:12px;
  padding-top:9px;
  display:flex;
  justify-content:space-between;
  font-size:8px;
  color:var(--green-ink);
}

.art-note {
  position:absolute;
  bottom:8%;
  left:13%;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:15px;
  transform:rotate(-6deg);
  color:var(--muted);
}

.background-section {
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:30px 0;
  gap:35px;
}

.background-item+.background-item {
  border-left:1px solid var(--line);
  padding-left:35px;
}

.background-item .tiny {
  font-size:8px;
  color:var(--muted);
}

.background-item h3 {
  font-size:16px;
  letter-spacing:-.04em;
  margin-top:10px;
}

.background-item p {
  font-size:11px;
  line-height:1.7;
  color:var(--muted);
  margin-top:7px;
  max-width:290px;
}

.work-section {
  padding-top:100px;
  padding-bottom:86px;
}

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

.section-heading h2 {
  font-size:50px;
}

.section-heading>p {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  margin-bottom:5px;
}

.project-scene {
  display:grid;
  grid-template-columns:1fr 1.28fr;
  gap:70px;
  align-items:center;
  margin-bottom:55px;
  padding-bottom:55px;
  border-bottom:1px solid var(--line);
}

.project-scene:nth-child(2) {
  grid-template-columns:1.28fr 1fr;
}

.project-scene:nth-child(2) .project-copy {
  order:2;
}

.project-copy {
  min-width:0;
}

.project-index {
  display:flex;
  align-items:center;
  gap:16px;
  color:var(--muted);
  font-size:9px;
  letter-spacing:.05em;
}

.project-index>span:first-child {
  font-size:10px;
  border:1px solid var(--line);
  border-radius:50%;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
}

.status {
  display:flex;
  gap:7px;
  align-items:center;
  font-size:9px;
  font-weight:600;
  color:var(--status-ink);
  margin-top:27px;
}

.status>span {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--status-dot);
  flex-shrink:0;
}

.project-copy h3 {
  font-size:24px;
  letter-spacing:-.05em;
  margin-top:12px;
}

.project-headline {
  font-size:30px;
  line-height:1.28;
  letter-spacing:-.045em;
  font-weight:500;
  margin-top:18px;
}

.project-summary {
  font-size:12px;
  color:var(--muted);
  line-height:1.85;
  margin-top:15px;
  max-width:345px;
}

.capabilities {
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  list-style:none;
  margin-top:20px;
  max-width:380px;
}

.capabilities li {
  font-size:8px;
  color:var(--muted);
}

.capabilities li+li::before {
  content:'·';
  margin-right:12px;
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  font-weight:700;
  margin-top:26px;
  transition:color .2s;
}

.text-link svg {
  margin-left:6px;
  transition:transform .2s;
}

.text-link:hover svg {
  transform:translateX(3px);
}

.draft-label {
  display:inline-block;
  background:var(--badge-bg);
  border:1px solid var(--badge-line);
  color:var(--badge-ink);
  padding:1px 7px;
  border-radius:4px;
  font-size:8px;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.7;
}

.project-visual {
  border-radius:var(--radius);
  position:relative;
  min-width:0;
  overflow:hidden;
  min-height:440px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

.theme-blue {
  background:var(--blue);
  color:var(--blue-ink);
}

.theme-peach {
  background:var(--peach);
  color:var(--peach-ink);
}

.theme-green {
  background:var(--green);
  color:var(--green-ink);
}

.project-visual figcaption {
  margin-top:auto;
  text-align:center;
  padding:15px 10px;
  font-size:8px;
  color:var(--muted);
  background:var(--caption-bg);
  letter-spacing:.02em;
}

.concept-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:7px;
  font-weight:700;
  letter-spacing:.12em;
}

.breez-concept {
  padding:29px 35px 0;
  flex:1;
}

.calendar-art {
  position:relative;
  height:223px;
  margin-top:15px;
}

.source-calendar {
  position:absolute;
  background:var(--peach-node);
  border:1px solid var(--peach-line);
  border-radius:7px;
  width:109px;
  height:111px;
  padding:12px;
  font-size:8px;
  box-shadow:0 5px 15px var(--shadow);
}

.source-calendar.one {
  left:4%;
  top:21px;
  transform:rotate(-11deg);
}

.source-calendar.two {
  right:4%;
  top:21px;
  transform:rotate(9deg);
}

.source-calendar span {
  display:block;
  height:9px;
  width:60%;
  background:var(--green-node);
  margin-top:12px;
  border-radius:3px;
}

.source-calendar span:nth-child(2) {
  width:85%;
}

.source-calendar.two span {
  background:var(--peach-detail);
}

.shared-calendar {
  position:absolute;
  left:50%;
  top:55px;
  transform:translateX(-50%) rotate(-2deg);
  width:270px;
  max-width:90%;
  border:1px solid var(--peach-line);
  border-radius:10px;
  background:var(--peach-node);
  box-shadow:0 15px 20px var(--shadow);
  overflow:hidden;
}

.calendar-heading {
  padding:12px 15px;
  border-bottom:1px solid var(--peach-line);
  font-size:10px;
  font-weight:600;
  display:flex;
  justify-content:space-between;
}

.calendar-heading i {
  font-style:normal;
}

.calendar-days {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  text-align:center;
  font-size:7px;
  padding:8px 0;
}

.calendar-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(3,25px);
  padding-bottom:8px;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),var(--peach-grid) calc(20% - 1px),var(--peach-grid) 20%);
}

.sample-event {
  font-size:6px;
  margin:1px 3px;
  padding:4px 5px;
  border-radius:3px;
  background:var(--green-node);
  grid-column:2/4;
  grid-row:1;
}

.sample-event.work {
  grid-column:3/5;
  grid-row:2;
  background:var(--peach-detail);
}

.sample-event.last {
  grid-column:4/6;
  grid-row:3;
}

.privacy-controls {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:4px;
}

.privacy-controls>span {
  font-size:8px;
  max-width:85px;
  line-height:1.5;
}

.segmented {
  display:flex;
  border:1px solid var(--peach-line);
  border-radius:100px;
  padding:3px;
  gap:3px;
  background:var(--peach-node);
}

.segmented button {
  font-size:8px;
  font-weight:600;
  padding:8px 11px;
  border-radius:100px;
  min-height:36px;
  transition:background .2s;
}

.segmented button[aria-pressed=true] {
  background:var(--peach-solid);
  color:#fff;
}

.demo-message {
  font-size:8px;
  margin-top:9px;
  text-align:center;
  min-height:30px;
  line-height:1.6;
}

.availability-mode .sample-event {
  background:var(--peach-detail);
  color:var(--peach-ink);
}

.more-work {
  padding-top:8px;
}

.more-work-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}

.more-work-heading h2 {
  font-size:21px;
  letter-spacing:-.035em;
}

.more-work-heading>span {
  font-size:10px;
  color:var(--muted);
}

.secondary-list {
  border-top:1px solid var(--line);
}

.secondary-project {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 4px;
  border-bottom:1px solid var(--line);
  transition:background .2s;
}

.secondary-project:hover {
  background:var(--surface);
}

.secondary-project .tiny {
  font-size:8px;
  color:var(--muted);
}

.secondary-project h3 {
  font-size:16px;
  letter-spacing:-.035em;
  margin-top:3px;
}

.secondary-project p {
  font-size:9px;
  color:var(--muted);
  margin-top:3px;
}

.secondary-end {
  display:flex;
  align-items:center;
  gap:20px;
}

.secondary-end svg {
  width:22px;
  height:22px;
}

.secondary-project.has-case-study {
  align-items:flex-start;
  gap:24px;
  padding-block:28px;
}

.secondary-project.has-case-study>div {
  min-width:0;
}

.secondary-project .secondary-headline {
  margin-top:12px;
  font-size:18px;
  color:var(--ink);
}

.secondary-project .secondary-summary {
  max-width:70ch;
  margin-top:8px;
  font-size:14px;
}

.secondary-project .secondary-role {
  margin-top:10px;
  font-size:12px;
}

.has-case-study .secondary-end {
  flex-shrink:0;
  gap:10px;
  font-size:13px;
  white-space:nowrap;
}

@media (max-width:600px) {
  .secondary-project.has-case-study {
    flex-direction:column;
    gap:16px;
  }
}

.approach-section {
  background:var(--surface);
  padding-block:78px;
}

.approach-intro h2 {
  font-size:48px;
  max-width:800px;
}

.approach-intro>p:last-child {
  color:var(--muted);
  font-size:12px;
  margin-top:20px;
}

.decision-path {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:55px;
  list-style:none;
  margin-top:46px;
}

.decision-path li {
  border-top:1px solid var(--line);
  padding-top:18px;
  position:relative;
}

.decision-path li:not(:last-child)::after {
  content:'→';
  position:absolute;
  right:-32px;
  top:18px;
  color:var(--muted);
}

.step-number {
  font-size:10px;
  color:var(--accent);
}

.decision-path h3 {
  font-size:17px;
  letter-spacing:-.04em;
  margin-block:13px 10px;
}

.decision-path p {
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
  max-width:290px;
}

.approach-footnote {
  margin-top:35px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
  color:var(--muted);
}

.approach-footnote .text-link {
  margin:0;
  color:var(--ink);
}

.about-section {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:100px;
  align-items:center;
  padding-block:95px;
}

.about-copy h2 {
  font-size:43px;
}

.about-copy>p {
  font-size:13px;
  line-height:1.85;
  color:var(--muted);
  max-width:395px;
  margin-top:22px;
}

.connect-section {
  background:var(--surface);
  color:var(--ink);
  padding-block:70px;
}

.connect-section .section-kicker {
  color:var(--muted);
  font-size:9px;
  display:flex;
  align-items:center;
}

.connect-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:80px;
  align-items:center;
}

.connect-grid h2 {
  font-size:59px;
}

.connect-grid h2 span {
  font-family:Georgia,serif;
  font-style:italic;
  font-weight:400;
  color:var(--ink);
}

.connect-grid p {
  font-size:12px;
  color:var(--muted);
  line-height:1.9;
  margin-top:23px;
}

.contact-actions {
  justify-self:end;
  min-width:250px;
}

.button-light {
  background:var(--raised);
  color:var(--surface);
  min-width:180px;
}

.button-light:hover {
  background:var(--surface);
}

.email-link {
  display:block;
  color:var(--muted);
  margin-top:20px;
  font-size:12px;
  text-underline-offset:5px;
}

.email-link:hover {
  text-decoration:underline;
}

.social-links {
  display:flex;
  gap:25px;
  margin-top:22px;
}

.social-links a {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  color:var(--muted);
  padding-block:8px;
}

.social-links a:hover {
  color:white;
}

.social-links svg {
  width:13px;
  height:13px;
}

.connect-section a:focus-visible {
  outline-color:var(--accent);
}

.site-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:26px;
  font-size:9px;
  color:var(--muted);
}

.footer-name {
  font-size:17px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.05em;
}

.site-footer>a:last-child {
  padding:8px 0;
}

.is-revealed {
  animation:reveal .65s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes reveal {
  from {
    opacity:.65;
    transform:translateY(16px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

.project-page {
  max-width:1050px;
  padding-block:40px 70px;
}

.back-link {
  font-size:11px;
  padding-block:10px;
  display:inline-block;
}

.draft-banner {
  display:flex;
  align-items:center;
  gap:16px;
  border:1px solid var(--line);
  padding:13px 17px;
  border-radius:8px;
  margin-top:23px;
}

.draft-banner p {
  font-size:10px;
  color:var(--muted);
}

.draft-banner .draft-label {
  white-space:nowrap;
}

.detail-heading {
  padding-block:55px 40px;
}

.detail-heading .section-kicker {
  margin-bottom:15px;
}

.detail-heading h1 {
  font-size:60px;
  max-width:850px;
}

.detail-summary {
  font-size:18px;
  line-height:1.75;
  color:var(--muted);
  max-width:650px;
  margin-top:22px;
}

.detail-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:15px 30px;
  margin-top:24px;
  font-size:10px;
  color:var(--muted);
}

.detail-meta .status {
  margin:0;
}

.project-page>.project-visual {
  max-width:800px;
  margin-inline:auto;
  min-height:470px;
}

.project-page>.project-visual>div {
  width:100%;
  max-width:550px;
  margin-inline:auto;
}

.detail-body {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:70px;
  padding-top:50px;
}

.project-role {
  margin-top:14px;
  color:var(--muted);
  font-size:11px;
  line-height:1.7;
}

.case-study-introduction p+p {
  margin-top:16px;
}

.case-study-body {
  max-width:720px;
  margin-inline:auto;
  padding-top:50px;
}

.case-study-body section+section {
  margin-top:40px;
}

.case-study-body h2 {
  font-size:25px;
  letter-spacing:-.045em;
  margin-bottom:18px;
}

.case-study-body p {
  font-size:16px;
  line-height:1.85;
}

.case-study-body p+p {
  margin-top:16px;
}

.detail-body h2 {
  font-size:25px;
  letter-spacing:-.045em;
  margin-bottom:23px;
}

.fact-list {
  list-style:none;
}

.fact-list li {
  padding-left:18px;
  position:relative;
  font-size:13px;
  line-height:1.9;
  margin-bottom:16px;
}

.fact-list li::before {
  content:'↗';
  position:absolute;
  left:0;
  color:var(--accent);
}

.boundary-note {
  font-size:11px;
  color:var(--muted);
  line-height:1.8;
  padding-top:20px;
  margin-top:22px;
  border-top:1px solid var(--line);
}

.detail-pending {
  border:1px dashed var(--line);
  border-radius:12px;
  padding:25px;
  height:fit-content;
}

.detail-pending .tiny {
  font-size:8px;
  color:var(--muted);
}

.detail-pending h2 {
  font-size:23px;
  margin-top:15px;
}

.detail-pending ul {
  padding-left:15px;
  font-size:11px;
  color:var(--muted);
  line-height:1.9;
}

.detail-pending>p {
  font-size:10px;
  color:var(--muted);
  margin-top:20px;
  line-height:1.8;
}

.detail-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:50px;
  border-top:1px solid var(--line);
  padding-top:25px;
}

.detail-bottom .text-link {
  margin-top:0;
}

.simple-concept {
  padding:40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1;
}

.concept-flow {
  display:flex;
  gap:12px;
  margin-block:55px;
  justify-content:center;
  flex-wrap:wrap;
}

.concept-flow span {
  background:var(--raised);
  border:1px solid var(--green-line);
  padding:22px 18px;
  border-radius:8px;
  font-size:11px;
}

.concept-flow b {
  display:block;
  font-size:9px;
  color:var(--green-ink);
  margin-bottom:10px;
}

.simple-concept>p {
  text-align:center;
  font-size:20px;
  letter-spacing:-.04em;
}

.not-found {
  padding-block:100px;
  min-height:75vh;
}

.not-found h1 {
  font-size:65px;
  margin-bottom:35px;
}

/* Reading copy stays comfortably legible;
small type is reserved for annotations. */ .site-header nav,.nav-contact {
  font-size:13px;
}

.section-heading>p {
  font-size:14px;
}

.background-item p {
  font-size:12px;
}

.project-summary {
  font-size:14px;
}

.capabilities li {
  font-size:10px;
}

.project-index {
  font-size:10px;
}

.status {
  font-size:10px;
}

.text-link {
  font-size:13px;
}

.decision-path p {
  font-size:13px;
}

.approach-intro>p:last-child {
  font-size:14px;
}

.about-copy>p {
  font-size:14px;
}

.connect-grid p {
  font-size:14px;
}

.secondary-project p {
  font-size:11px;
}

.social-links a,.email-link {
  font-size:13px;
}

.draft-label {
  font-size:9px;
}

@media(min-width:1500px) {
  .hero {
    min-height:670px;
  }
  .hero h1 {
    font-size:86px;
  }
}

@media(max-width:1100px) {
  .container {
    width:calc(100% - 64px);
  }
  .hero {
    grid-template-columns:1.6fr 1fr;
    min-height:580px;
    padding-top:60px;
  }
  .hero h1 {
    font-size:clamp(52px,6.4vw,72px);
  }
  .hero-art {
    max-width:370px;
  }
  .idea-card {
    padding:17px;
  }
  .idea-title {
    font-size:31px;
  }
  .make-card {
    padding:19px;
  }
  .make-title {
    font-size:20px;
  }
  .project-scene,.project-scene:nth-child(2) {
    gap:40px;
    grid-template-columns:1fr 1.1fr;
  }
  .project-headline {
    font-size:26px;
  }
  .project-visual {
    min-height:420px;
  }
  .concept-header {
    font-size:6px;
  }
  .breez-concept {
    padding-inline:25px;
  }
  .about-section {
    gap:60px;
  }
  .about-copy h2 {
    font-size:38px;
  }
  .connect-grid h2 {
    font-size:52px;
  }
}

@media(max-width:800px) {
  .container {
    width:calc(100% - 48px);
  }
  .header-inner {
    height:72px;
  }
  .site-header nav {
    gap:20px;
    font-size:11px;
  }
  .nav-contact {
    padding:8px 13px;
    gap:14px;
    font-size:11px;
  }
  .hero {
    grid-template-columns:1fr 1fr;
    min-height:510px;
    padding-top:50px;
    padding-bottom:80px;
  }
  .hero h1 {
    font-size:52px;
  }
  .hero-description {
    font-size:13px;
    max-width:320px;
  }
  .hero-actions {
    gap:15px;
    flex-wrap:wrap;
  }
  .button {
    padding:13px 18px;
    gap:17px;
  }
  .hero-art {
    margin-left:-20px;
    width:calc(100% + 20px);
  }
  .art-coordinate {
    font-size:6px;
  }
  .make-card .tiny,.idea-card .tiny {
    font-size:6px;
  }
  .build-symbol {
    grid-template-columns:repeat(2,21px);
    gap:4px;
    margin-block:12px;
  }
  .build-symbol i {
    width:21px;
    height:21px;
  }
  .idea-title {
    font-size:26px;
  }
  .make-title {
    font-size:18px;
  }
  .make-footer {
    font-size:6px;
  }
  .background-section {
    gap:20px;
    padding-block:25px;
  }
  .background-item+.background-item {
    padding-left:20px;
  }
  .background-item h3 {
    font-size:13px;
  }
  .background-item p {
    font-size:10px;
  }
  .background-item .tiny {
    font-size:7px;
  }
  .work-section {
    padding-top:75px;
  }
  .section-heading h2 {
    font-size:40px;
  }
  .section-heading>p {
    font-size:10px;
  }
  .project-scene,.project-scene:nth-child(2) {
    grid-template-columns:1fr;
    gap:28px;
  }
  .project-scene:nth-child(2) .project-copy {
    order:0;
  }
  .project-copy {
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:25px;
  }
  .project-index,.project-copy .status,.project-copy h3,.project-headline {
    grid-column:1;
  }
  .project-copy .status {
    margin-top:18px;
  }
  .project-headline {
    font-size:28px;
    margin-top:12px;
  }
  .project-summary {
    grid-column:2;
    grid-row:2/5;
    margin-top:18px;
    align-self:center;
    font-size:12px;
  }
  .capabilities {
    grid-column:2;
    grid-row:5;
    margin-top:10px;
  }
  .project-copy .text-link {
    grid-column:1;
    grid-row:5;
    margin-top:20px;
  }
  .project-visual {
    min-height:415px;
  }
  .project-visual>div {
    width:100%;
    max-width:500px;
    margin-inline:auto;
  }
  .approach-intro h2 {
    font-size:41px;
  }
  .decision-path {
    gap:30px;
  }
  .decision-path li:not(:last-child)::after {
    right:-23px;
  }
  .decision-path h3 {
    font-size:15px;
  }
  .decision-path p {
    font-size:10px;
  }
  .about-section {
    gap:35px;
    padding-block:75px;
  }
  .about-copy h2 {
    font-size:31px;
  }
  .about-copy>p {
    font-size:12px;
  }
  .connect-grid {
    gap:35px;
    grid-template-columns:1.3fr 1fr;
  }
  .connect-grid h2 {
    font-size:43px;
  }
  .contact-actions {
    min-width:210px;
  }
  .detail-heading h1 {
    font-size:48px;
  }
  .detail-body {
    gap:40px;
  }
  .detail-summary {
    font-size:16px;
  }
}

@media(max-width:600px) {
  html {
    scroll-padding-top:80px;
  }
  .container {
    width:calc(100% - 40px);
  }
  .header-inner {
    height:68px;
  }
  .wordmark {
    font-size:18px;
  }
  .site-header nav {
    gap:16px;
    font-size:10px;
  }
  .nav-contact {
    border:0;
    padding:10px 0;
    font-size:10px;
    gap:6px;
  }
  .site-header nav a[data-nav=approach] {
    display:none;
  }
  .hero {
    display:block;
    min-height:0;
    padding-top:53px;
    padding-bottom:63px;
  }
  .hero h1 {
    font-size:clamp(40px,10.2vw,60px);
    letter-spacing:-.065em;
  }
  .eyebrow {
    font-size:9px;
    margin-bottom:20px;
  }
  .hero-description {
    font-size:14px;
    margin-top:25px;
    max-width:340px;
  }
  .hero-actions {
    gap:22px;
    margin-top:26px;
  }
  .hero-art {
    width:260px;
    height:260px;
    margin:38px auto 15px;
    max-width:100%;
  }
  .art-coordinate {
    right:5px;
    top:2px;
    font-size:6px;
  }
  .hero-art .idea-card {
    padding:15px;
  }
  .hero-art .make-card {
    padding:15px;
  }
  .idea-title {
    font-size:25px;
  }
  .idea-line {
    margin-top:10px;
    height:3px;
  }
  .make-title {
    font-size:17px;
  }
  .art-note {
    font-size:12px;
    bottom:3%;
    left:7%;
  }
  .hero-baseline {
    bottom:19px;
    font-size:7px;
  }
  .hero-baseline a {
    font-size:9px;
  }
  .background-section {
    grid-template-columns:1fr;
    gap:20px;
    padding-block:25px;
  }
  .background-item+.background-item {
    padding-left:0;
    border-left:0;
    border-top:1px solid var(--line);
    padding-top:19px;
  }
  .background-item .tiny {
    font-size:7px;
  }
  .background-item h3 {
    font-size:15px;
    margin-top:6px;
  }
  .background-item p {
    font-size:10px;
    max-width:none;
    margin-top:4px;
  }
  .work-section {
    padding-top:58px;
    padding-bottom:55px;
  }
  .section-heading {
    display:block;
    margin-bottom:35px;
  }
  .section-kicker {
    font-size:9px;
    margin-bottom:16px;
  }
  .section-heading h2 {
    font-size:35px;
  }
  .section-heading>p {
    margin-top:17px;
    font-size:11px;
    line-height:1.8;
  }
  .project-scene,.project-scene:nth-child(2) {
    gap:25px;
    padding-bottom:35px;
    margin-bottom:35px;
  }
  .project-copy {
    display:block;
  }
  .project-index {
    font-size:8px;
  }
  .project-copy h3 {
    font-size:22px;
  }
  .project-headline {
    font-size:28px;
    margin-top:14px;
  }
  .project-summary {
    font-size:12px;
    max-width:350px;
    margin-top:12px;
  }
  .capabilities {
    margin-top:16px;
    max-width:100%;
  }
  .project-copy .text-link {
    margin-top:20px;
  }
  .project-visual {
    min-height:365px;
    border-radius:13px;
  }
  .breez-concept {
    padding:23px 23px 5px;
  }
  .concept-header {
    font-size:6px;
    gap:10px;
  }
  .calendar-art {
    height:213px;
    margin-top:10px;
  }
  .shared-calendar {
    width:245px;
    top:55px;
  }
  .source-calendar {
    width:90px;
    height:95px;
    font-size:7px;
  }
  .source-calendar.one {
    left:0;
  }
  .source-calendar.two {
    right:0;
  }
  .privacy-controls>span {
    font-size:7px;
  }
  .segmented button {
    padding:8px 9px;
    min-height:40px;
  }
  .project-visual figcaption {
    font-size:7px;
    padding:10px;
  }
  .more-work-heading {
    display:block;
  }
  .more-work-heading h2 {
    font-size:20px;
  }
  .more-work-heading>span {
    display:block;
    margin-top:7px;
    font-size:10px;
  }
  .secondary-project {
    padding-block:18px;
  }
  .secondary-project h3 {
    font-size:14px;
  }
  .secondary-project .tiny {
    font-size:7px;
  }
  .secondary-project p {
    font-size:8px;
  }
  .secondary-end {
    gap:10px;
  }
  .secondary-end .draft-label {
    font-size:7px;
  }
  .approach-section {
    padding-block:55px;
  }
  .approach-intro h2 {
    font-size:34px;
  }
  .approach-intro>p:last-child {
    font-size:11px;
  }
  .decision-path {
    display:block;
    margin-top:30px;
  }
  .decision-path li {
    padding-top:15px;
    margin-top:24px;
    padding-left:38px;
  }
  .decision-path li .step-number {
    position:absolute;
    left:0;
    top:17px;
  }
  .decision-path li:not(:last-child)::after {
    display:none;
  }
  .decision-path h3 {
    margin-top:0;
    font-size:16px;
  }
  .decision-path p {
    font-size:11px;
    max-width:100%;
  }
  .approach-footnote {
    display:block;
    margin-top:30px;
  }
  .approach-footnote .text-link {
    display:flex;
    width:fit-content;
    margin-top:16px;
  }
  .about-section {
    display:block;
    padding-block:58px;
  }
  .about-copy h2 {
    font-size:35px;
  }
  .about-copy>p {
    font-size:12px;
    max-width:330px;
  }
  .connect-section {
    padding-block:52px;
  }
  .connect-section .section-kicker {
    font-size:7px;
    letter-spacing:.08em;
  }
  .connect-grid {
    display:block;
  }
  .connect-grid h2 {
    font-size:46px;
  }
  .connect-grid p {
    font-size:11px;
    margin-top:20px;
  }
  .contact-actions {
    margin-top:30px;
  }
  .email-link {
    font-size:11px;
    margin-top:16px;
  }
  .social-links {
    margin-top:14px;
  }
  .site-footer {
    gap:15px;
    flex-wrap:wrap;
    font-size:8px;
    padding-block:20px;
  }
  .site-footer>span {
    order:3;
    width:100%;
    font-size:8px;
  }
  .footer-name {
    font-size:16px;
  }
  .site-footer>a:last-child {
    margin-left:auto;
  }
  .desktop-break {
    display:none;
  }
  .project-page {
    padding-top:23px;
    padding-bottom:40px;
  }
  .draft-banner {
    display:block;
    padding:12px;
  }
  .draft-banner p {
    margin-top:8px;
    line-height:1.8;
  }
  .detail-heading {
    padding-block:34px 28px;
  }
  .detail-heading h1 {
    font-size:40px;
    overflow-wrap:anywhere;
  }
  .detail-summary {
    font-size:14px;
    margin-top:18px;
  }
  .detail-meta {
    font-size:9px;
    gap:12px;
    line-height:1.8;
  }
  .detail-meta .status {
    font-size:8px;
  }
  .project-page>.project-visual {
    min-height:365px;
  }
  .detail-body {
    display:block;
    padding-top:32px;
  }
  .detail-body h2 {
    font-size:24px;
  }
  .fact-list li {
    font-size:12px;
  }
  .detail-pending {
    margin-top:30px;
  }
  .detail-bottom {
    gap:15px;
  }
  .detail-bottom a {
    font-size:10px;
  }
  .simple-concept {
    padding:25px;
  }
  .concept-flow {
    gap:7px;
    margin-block:40px;
  }
  .concept-flow span {
    padding:16px 12px;
    font-size:9px;
  }
  .simple-concept>p {
    font-size:18px;
  }
  .not-found {
    padding-block:60px;
  }
  .not-found h1 {
    font-size:43px;
  }
}

.project-visual figcaption {
  font-size:10px;
}

.demo-message {
  font-size:10px;
}

.segmented button {
  min-height:44px;
}

.privacy-controls>span {
  font-size:10px;
}

.draft-banner p {
  font-size:12px;
}

.detail-pending>p {
  font-size:12px;
}

.detail-pending ul {
  font-size:12px;
}

@media(max-width:600px) {
  .site-header nav,.nav-contact {
    font-size:12px;
  }
  .site-header nav {
    gap:14px;
  }
  .site-header nav a {
    min-height:44px;
    min-width:35px;
    display:flex;
    align-items:center;
  }
  .nav-contact {
    min-height:44px;
  }
  .project-summary,.about-copy>p,.connect-grid p,.detail-summary {
    font-size:14px;
  }
  .decision-path p {
    font-size:13px;
  }
  .background-item p {
    font-size:12px;
  }
  .section-heading>p {
    font-size:13px;
  }
  .project-visual figcaption {
    font-size:9px;
  }
  .privacy-controls>span {
    font-size:9px;
  }
  .segmented button {
    font-size:10px;
  }
  .demo-message {
    font-size:9px;
  }
  .secondary-project p {
    font-size:10px;
  }
  .text-link {
    font-size:12px;
  }
  .fact-list li {
    font-size:14px;
  }
  .boundary-note {
    font-size:12px;
  }
  .social-links a,.email-link {
    font-size:12px;
  }
}

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

/* Shared optical weights; longer rests leave the original concepts time to read. */
.concept-visual {
  --project-loop:4.5s;
  --concept-outline:1.5;
  --concept-detail:1.2;
  --concept-rest:.68;
  --concept-active:.96;
  --concept-green-outline:color-mix(in srgb,var(--green-line) 55%,var(--green-ink));
}
.project-concept { display:flex; flex:1; flex-direction:column; justify-content:center; gap:12px; min-width:0; padding:28px 28px 16px; }
.project-page>.concept-visual { min-height:420px; }
.project-page>.concept-visual>div { max-width:720px; }
.ac-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ac-heading>p { min-width:0; font-size:16px; font-weight:600; letter-spacing:-.035em; line-height:1.4; }
.ac-motion-toggle { display:grid; place-items:center; flex-shrink:0; width:40px; height:40px; border:0; border-radius:50%; padding:11px; background:transparent; color:currentColor; }
.ac-motion-toggle[hidden] { display:none; }
.ac-motion-toggle:hover { background:var(--caption-bg); }
.ac-motion-toggle svg { width:18px; height:18px; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ac-play-icon { display:none; }
.ac-motion-toggle[aria-pressed="true"] .ac-pause-icon { display:none; }
.ac-motion-toggle[aria-pressed="true"] .ac-play-icon { display:block; }
.concept-scene { display:block; width:100%; height:auto; overflow:visible; }
.concept-visual figcaption { flex-shrink:0; font-size:10px; }
.concept-visual.is-animated .concept-scene * {
  animation-duration:var(--project-loop);
  animation-timing-function:cubic-bezier(.45,0,.25,1);
  animation-iteration-count:infinite;
  animation-delay:var(--wait,0s);
  animation-fill-mode:both;
  animation-play-state:paused;
}
.concept-visual.is-running .concept-scene * { animation-play-state:running; }

/* Larger editorial illustrations use recognizable objects and more of the canvas. */
.editorial-visual .project-concept { padding:14px 22px 4px; gap:6px; }
.work-canvas .editorial-visual.work-layer>div { max-width:100%; }
.editorial-visual .concept-scene { flex:1; min-height:0; max-height:none; }

/* Relka: job-search actions stay connected along one application history. */
.relka-product-flow { background:var(--relka-bg); color:var(--relka-ink); }
.relka-product-flow figcaption { color:var(--relka-muted); }
.rk-timeline { stroke:var(--relka-line); stroke-width:var(--concept-outline); }
.rk-thread { stroke:var(--relka-green); stroke-width:var(--concept-outline); opacity:.8; stroke-dasharray:100; }
.rk-link { stroke:var(--relka-green); stroke-width:var(--concept-detail); opacity:.65; }
.rk-event-ring { fill:var(--relka-card); stroke:var(--relka-green); stroke-width:var(--concept-outline); opacity:.85; }
.rk-event-dot { fill:var(--relka-green); }
.rk-emphasis { --rk-active:var(--concept-active); opacity:var(--rk-active); }
.rk-action { stroke:var(--relka-green); stroke-width:var(--concept-outline); stroke-linecap:round; stroke-linejoin:round; }
.rk-action-paper { fill:var(--relka-card); stroke:var(--relka-green); stroke-opacity:.85; }
.rk-action-tint { fill:var(--relka-tint); }
.rk-action-person { fill:var(--relka-card); }
.rk-action-detail { stroke:var(--relka-muted); stroke-width:var(--concept-detail); opacity:.85; }
/* One clock: trace, cumulative milestones, shared hold and fade. */
.rk-check { --rk-rest:0; --rk-active:.85; opacity:var(--rk-active); stroke:var(--relka-green); stroke-width:var(--concept-outline); stroke-linecap:round; stroke-linejoin:round; }
.relka-product-flow.is-animated .rk-thread { animation-name:rk-thread; animation-timing-function:linear; }
.relka-product-flow.is-animated .rk-emphasis,
.relka-product-flow.is-animated .rk-check { animation-timing-function:linear; }
.relka-product-flow.is-animated .rk-step-1 :is(.rk-emphasis,.rk-check) { animation-name:rk-step-one; }
.relka-product-flow.is-animated .rk-step-2 :is(.rk-emphasis,.rk-check) { animation-name:rk-step-two; }
.relka-product-flow.is-animated .rk-step-3 :is(.rk-emphasis,.rk-check) { animation-name:rk-step-three; }
@keyframes rk-thread {
  0%,8% { stroke-dashoffset:100; opacity:0; }
  11% { opacity:.8; }
  44%,82% { stroke-dashoffset:0; opacity:.8; }
  96%,100% { stroke-dashoffset:0; opacity:0; }
}
/* Arrival = 8% + 36% × distance along the timeline (y=39…321). */
@keyframes rk-step-one {
  0%,12.6%,96%,100% { opacity:var(--rk-rest,var(--concept-rest)); }
  16.6%,82% { opacity:var(--rk-active); }
}
@keyframes rk-step-two {
  0%,26%,96%,100% { opacity:var(--rk-rest,var(--concept-rest)); }
  30%,82% { opacity:var(--rk-active); }
}
@keyframes rk-step-three {
  0%,39.4%,96%,100% { opacity:var(--rk-rest,var(--concept-rest)); }
  43.4%,82% { opacity:var(--rk-active); }
}

/* Breez: source calendar sheets fade into the combined Shared View. */
.breez-product-flow { background:var(--breez-bg); color:var(--breez-ink); }
.breez-product-flow figcaption { color:var(--breez-muted); }
.bz-tone-0 { color:var(--breez-blue); }
.bz-tone-1 { color:var(--breez-muted); }
.bz-tone-2 { color:var(--green-ink); }
.bz-plane { opacity:0; transform-origin:320px 180px; transform:translate(var(--stack-x),var(--stack-y)) rotate(var(--stack-angle)); }
.bz-paper { fill:var(--breez-card); stroke:var(--breez-line); stroke-width:var(--concept-outline); }
.bz-fold { fill:var(--breez-tint); stroke:var(--breez-line); stroke-width:var(--concept-detail); }
.bz-binding { stroke:currentColor; stroke-width:3; stroke-linecap:round; opacity:.75; }
.bz-sheet-title { fill:currentColor; font-size:20px; font-weight:500; letter-spacing:-.025em; }
.bz-calendar-rule { stroke:var(--breez-line); stroke-width:var(--concept-detail); opacity:.7; }
.bz-day { fill:var(--breez-muted); font-size:14px; }
.bz-event { fill:currentColor; opacity:.72; }
.bz-private-detail { stroke:currentColor; stroke-width:2; stroke-linecap:round; opacity:.12; }
.bz-shared-week { color:var(--breez-ink); opacity:1; }
.bz-busy { fill:var(--breez-muted); font-size:14px; }
.breez-product-flow.is-animated .bz-plane { animation-name:bz-layer; }
.breez-product-flow.is-animated .bz-private-detail { animation-name:bz-detail; }
.breez-product-flow.is-animated .bz-shared-week { animation-name:bz-shared; }
@keyframes bz-layer {
  0%,8%,100% { opacity:1; transform:translate(var(--fan-x),var(--fan-y)) rotate(var(--fan-angle)); }
  32%,78% { opacity:0; transform:translate(var(--stack-x),var(--stack-y)) rotate(var(--stack-angle)); }
}
@keyframes bz-detail {
  0%,8%,100% { opacity:.55; }
  32%,78% { opacity:.08; }
}
@keyframes bz-shared {
  0%,12%,100% { opacity:0; }
  34%,78% { opacity:1; }
}

/* Factory Coordination: two sources, traced links, and machinery responding on arrival. */
.factory-product-flow { --project-loop:5s; background:var(--factory-bg); color:var(--factory-ink); }
.factory-product-flow figcaption { color:var(--factory-muted); }
.fc-station { opacity:var(--concept-active); }
.fc-equipment,.fc-cell-bed { fill:var(--factory-card); stroke:var(--factory-muted); stroke-opacity:.92; stroke-width:var(--concept-outline); }
.fc-cell-bed { fill:var(--factory-tint); fill-opacity:.22; }
.fc-equipment-detail,.fc-rollers { fill:none; stroke:var(--factory-muted); stroke-opacity:.7; stroke-width:var(--concept-detail); stroke-linecap:round; }
.fc-workpiece { fill:var(--factory-tint); stroke:var(--factory-muted); stroke-width:var(--concept-outline); stroke-linejoin:round; }
.fc-machine-arm { stroke:var(--factory-muted); stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round; }
.fc-machine-joint { fill:var(--factory-card); stroke:var(--factory-muted); stroke-width:var(--concept-outline); }
.fc-machine-tool { stroke:var(--factory-muted); stroke-width:2; stroke-linecap:round; }
.fc-context-guide { stroke:var(--factory-line); stroke-width:var(--concept-detail); stroke-linecap:round; stroke-linejoin:round; }
.fc-link { fill:none; stroke:var(--factory-accent); stroke-width:var(--concept-outline); stroke-dasharray:100; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
.fc-gear-body { fill:var(--factory-tint); stroke:var(--factory-muted); stroke-width:var(--concept-detail); stroke-linejoin:round; }
.fc-gear-hub { fill:var(--factory-card); stroke:var(--factory-muted); stroke-width:var(--concept-detail); }
.factory-product-flow.is-animated .fc-link,
.factory-product-flow.is-animated .fc-station { animation-timing-function:linear; }
.factory-product-flow.is-animated .fc-link-source,
.factory-product-flow.is-animated .fc-link-rack { animation-name:fc-trace-source; }
.factory-product-flow.is-animated .fc-link-main { animation-name:fc-trace-main; }
.factory-product-flow.is-animated .fc-link-cell { animation-name:fc-trace-cell; }
.factory-product-flow.is-animated .fc-link-assembly { animation-name:fc-trace-assembly; }
.factory-product-flow.is-animated .fc-parts-table,
.factory-product-flow.is-animated .fc-staging-station { animation-name:fc-activate-source; }
.factory-product-flow.is-animated .fc-round-cell { animation-name:fc-activate-cell; }
.factory-product-flow.is-animated .fc-assembly-table { animation-name:fc-activate-assembly; }
.factory-product-flow.is-animated .fc-fixture { animation-name:fc-activate-fixture; }
@keyframes fc-trace-source {
  0%,6.4% { stroke-dashoffset:100; opacity:0; }
  7.2% { opacity:.8; }
  17.6%,88% { stroke-dashoffset:0; opacity:.8; }
  96%,100% { stroke-dashoffset:0; opacity:0; }
}
@keyframes fc-trace-main {
  0%,17.6% { stroke-dashoffset:100; opacity:0; }
  18.4% { opacity:.8; }
  40%,88% { stroke-dashoffset:0; opacity:.8; }
  96%,100% { stroke-dashoffset:0; opacity:0; }
}
@keyframes fc-trace-cell {
  0%,24.938% { stroke-dashoffset:100; opacity:0; }
  25.738% { opacity:.8; }
  28%,88% { stroke-dashoffset:0; opacity:.8; }
  96%,100% { stroke-dashoffset:0; opacity:0; }
}
@keyframes fc-trace-assembly {
  0%,34.979% { stroke-dashoffset:100; opacity:0; }
  35.779% { opacity:.8; }
  39.2%,88% { stroke-dashoffset:0; opacity:.8; }
  96%,100% { stroke-dashoffset:0; opacity:0; }
}
@keyframes fc-activate-source {
  0%,6.4%,96%,100% { opacity:var(--concept-rest); }
  11.2%,88% { opacity:var(--concept-active); }
}
@keyframes fc-activate-cell {
  0%,28%,96%,100% { opacity:var(--concept-rest); }
  32.8%,88% { opacity:var(--concept-active); }
}
@keyframes fc-activate-assembly {
  0%,39.2%,96%,100% { opacity:var(--concept-rest); }
  44%,88% { opacity:var(--concept-active); }
}
@keyframes fc-activate-fixture {
  0%,40%,96%,100% { opacity:var(--concept-rest); }
  44.8%,88% { opacity:var(--concept-active); }
}
/* Local actions follow the connection/hold/reset clock. */
.fc-bench-part { transform-origin:133px 102px; }
.fc-robot-arm { transform-origin:370px 124px; }
.factory-product-flow.is-animated .fc-bench-part { animation-name:fc-align-part; }
.factory-product-flow.is-animated .fc-robot-arm { animation-name:fc-robot-work; animation-timing-function:ease-in-out; }
.factory-product-flow.is-animated .fc-staging-station .fc-part-insert { animation-name:fc-insert-part; animation-timing-function:ease-in-out; }
/* Restored forward-only belt travel and the load's faded reset. */
.factory-product-flow.is-animated .fc-belt-treads,
.factory-product-flow.is-animated .fc-conveyor-part { animation-name:fc-conveyor-travel; animation-timing-function:linear; }
.factory-product-flow.is-animated .fc-conveyor-cargo { animation-name:fc-conveyor-reset; animation-timing-function:ease-in-out; }
@keyframes fc-align-part {
  0%,6.4%,100% { transform:rotate(-16deg); }
  17.6%,88% { transform:rotate(0deg); }
}
/* One broad sweep replaces the short repeated direction changes. */
@keyframes fc-robot-work {
  0%,28%,100% { transform:rotate(0deg); }
  44.8% { transform:rotate(-24deg); }
  84% { transform:rotate(18deg); }
}
/* A single insert slides into its stationary receiver, then holds. */
@keyframes fc-insert-part {
  0%,6.4%,100% { transform:translateX(18px); }
  19.2%,88% { transform:translateX(0); }
}
/* Ease into work on arrival, then coast gently to idle during the common fade. */
@keyframes fc-conveyor-travel {
  0%,39.2% { transform:translateX(0); animation-timing-function:cubic-bezier(.333,0,.667,.333); }
  44% { transform:translateX(3.735px); animation-timing-function:linear; }
  88% { transform:translateX(72.218px); animation-timing-function:cubic-bezier(.333,.667,.667,1); }
  98%,100% { transform:translateX(80px); }
}
/* The load resets only while invisible. Its final and initial composed positions match. */
@keyframes fc-conveyor-reset {
  0% { transform:translateX(-36px); opacity:.1; }
  6.4%,88% { transform:translateX(-36px); opacity:1; }
  96%,98% { transform:translateX(-36px); opacity:0; }
  99% { transform:translateX(-116px); opacity:0; }
  100% { transform:translateX(-116px); opacity:.1; }
}
/* Stationary until arrival; ease into work, then stop fully by reset (96%). */
.factory-product-flow.is-animated .fc-fixture .fc-gear {
  animation-name:fc-gear-fixture;
  animation-timing-function:linear(0 0%, 0 40%, .00302 41.2%, .01210 42.4%, .02722 43.6%, .04839 44.8%, .91935 88%, .95464 90%, .97984 92%, .99496 94%, 1 96%, 1 100%);
}
@keyframes fc-gear-fixture { from { transform:rotate(0deg); } to { transform:rotate(108deg); } }

/* Analytics: the spending grid gains clarity through a few grounded cost priorities. */
.ac-map-region { stroke:var(--blue-line); stroke-width:var(--concept-detail); }
.ac-map-tone-0 { fill:var(--blue-node); }
.ac-map-tone-1 { fill:var(--blue-detail); }
.ac-map-tone-2 { fill:var(--blue-line); }
.ac-map-tone-3 { fill:var(--blue-solid); fill-opacity:.3; }
.ac-map-context { opacity:.22; }
.ac-map-priority>.ac-map-region { fill-opacity:.48; }
.ac-map-detail { stroke:var(--blue-ink); stroke-width:var(--concept-outline); stroke-linecap:round; stroke-linejoin:round; }
.ac-map-resource { fill:var(--blue-node); }
.ac-map-resource-seam { stroke:var(--blue-ink); opacity:.6; }
.ac-map-server-slots { stroke-width:1.6; opacity:.6; }
.ac-map-server-light { fill:var(--blue-ink); stroke:none; opacity:.65; }
.ac-map-focus { fill:var(--accent); fill-opacity:.025; stroke:var(--accent); stroke-width:var(--concept-outline); }
.ac-map-priority-link { stroke:var(--accent); stroke-width:var(--concept-detail); stroke-linecap:round; stroke-dasharray:100; opacity:.8; }
.ac-map-priority-disc { fill:var(--blue-node); stroke:var(--accent); stroke-width:var(--concept-outline); }
.ac-map-priority-number { fill:var(--blue-ink); font-size:14px; font-weight:500; }
.analytics-product-flow.is-animated .ac-map-context { animation-name:ac-map-clarity; }
.analytics-product-flow.is-animated .ac-map-detail { animation-name:ac-map-details; }
.analytics-product-flow.is-animated .ac-map-emphasis { animation-name:ac-map-priorities; }
.analytics-product-flow.is-animated .ac-map-priority-link { animation-name:ac-map-connect-priorities; }
@keyframes ac-map-clarity {
  0%,8%,100% { opacity:.65; }
  32%,80% { opacity:.22; }
}
@keyframes ac-map-details {
  0%,8%,100% { opacity:.55; }
  32%,80% { opacity:1; }
}
@keyframes ac-map-priorities {
  0%,15%,100% { opacity:0; }
  34%,80% { opacity:1; }
}

@keyframes ac-map-connect-priorities {
  0%,15%,100% { stroke-dashoffset:100; opacity:0; }
  20% { opacity:.8; }
  40%,80% { stroke-dashoffset:0; opacity:.8; }
  94% { stroke-dashoffset:0; opacity:0; }
}

/* Pathframe: one continuous downward handoff, with balanced work spacing. */
.pf-shared-blueprint { fill:var(--green-node); stroke:var(--accent); stroke-width:var(--concept-outline); stroke-dasharray:4 5; }
.pf-context-link { stroke:var(--accent); stroke-width:var(--concept-detail); opacity:.65; stroke-linecap:round; }
.pf-model-rule { stroke:var(--accent); stroke-width:var(--concept-outline); stroke-linecap:round; opacity:.75; }
.pf-model-region { stroke:var(--accent); stroke-width:var(--concept-detail); stroke-opacity:.75; }
.pf-model-item { fill:var(--accent); fill-opacity:.1; stroke:var(--accent); stroke-width:var(--concept-detail); stroke-opacity:.75; }
.pf-model-action { fill:var(--accent); fill-opacity:.06; }
.pf-model-mark { stroke:var(--accent); stroke-width:var(--concept-outline); fill:var(--green-node); }
.pf-work-component { fill:var(--green-node); stroke:var(--concept-green-outline); stroke-width:var(--concept-outline); }
.pf-work-item { fill:var(--green-line); fill-opacity:.25; stroke:var(--green-ink); stroke-opacity:.65; stroke-width:var(--concept-detail); }
.pf-work-copy { stroke:var(--green-ink); stroke-width:var(--concept-outline); stroke-linecap:round; opacity:.65; }
.pf-work-feature { fill:var(--green-line); fill-opacity:.1; stroke:var(--concept-green-outline); stroke-width:var(--concept-detail); }
.pf-work-mark { stroke:var(--green-ink); stroke-width:var(--concept-outline); fill:var(--green-node); }
.pf-harness-boundary { fill:var(--green-line); fill-opacity:.04; stroke:var(--concept-green-outline); stroke-width:var(--concept-outline); }
.pf-coordinator-body { fill:var(--green-node); stroke:var(--accent); stroke-width:var(--concept-outline); stroke-opacity:.75; }
.pf-coordinator-symbol { fill:none; stroke:var(--accent); stroke-width:var(--concept-detail); stroke-linejoin:round; stroke-linecap:round; opacity:.75; }
.pf-coordinator-node { fill:var(--accent); stroke:none; }
.pf-intent-energy { stroke:var(--accent); stroke-width:1.9; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:0; opacity:0; }
.pf-output-route { stroke:var(--accent); stroke-width:var(--concept-outline); stroke-linecap:round; opacity:.65; transform-origin:320px 245px; }
.pf-execution-base { stroke:var(--green-ink); stroke-width:1.4; stroke-linecap:round; opacity:.12; }
.pf-execution { stroke:var(--green-ink); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:18 82; opacity:0; }
.pf-model-next { opacity:1; }
.pathframe-product-flow.is-animated .pf-model-next { animation-name:pf-model-after; }
.pathframe-product-flow.is-animated .pf-harness-boundary { animation-name:pf-harness-makes-room; animation-timing-function:cubic-bezier(.2,.6,.3,1); }
.pathframe-product-flow.is-animated .pf-collection-work { animation-name:pf-make-room-left; animation-timing-function:cubic-bezier(.2,.6,.3,1); }
.pathframe-product-flow.is-animated .pf-settings-work { animation-name:pf-make-room-right; animation-timing-function:cubic-bezier(.2,.6,.3,1); }
.pathframe-product-flow.is-animated .pf-intent-energy { animation-name:pf-intent-received; animation-timing-function:linear; }
.pathframe-product-flow.is-animated .pf-coordinator-body { animation-name:pf-coordinate; }
.pathframe-product-flow.is-animated .pf-new-work { animation-name:pf-work-arrives; animation-timing-function:cubic-bezier(.25,.1,.25,1); }
.pathframe-product-flow.is-animated .pf-output-route { animation-name:pf-handoff-connects; animation-timing-function:cubic-bezier(.25,.1,.25,1); }
.pathframe-product-flow.is-animated .pf-execution { animation-name:pf-execution-continues; animation-duration:3s; animation-timing-function:linear; opacity:.3; }
@keyframes pf-model-after {
  0%,7%,100% { opacity:0; }
  19%,88% { opacity:1; }
}
@keyframes pf-harness-makes-room {
  0%,18%,100% { x:161px; width:318px; }
  38%,92% { x:86px; width:468px; }
}
@keyframes pf-make-room-left {
  0%,18%,100% { transform:translateX(75px); }
  38%,92% { transform:translateX(0); }
}
@keyframes pf-make-room-right {
  0%,18%,100% { transform:translateX(-75px); }
  38%,92% { transform:translateX(0); }
}
@keyframes pf-intent-received {
  0%,11%,100% { stroke-dashoffset:100; opacity:0; }
  12% { stroke-dashoffset:100; opacity:.8; }
  20%,22% { stroke-dashoffset:0; opacity:.8; }
  26%,96% { stroke-dashoffset:0; opacity:0; }
}
@keyframes pf-coordinate {
  0%,16%,100% { stroke-opacity:.75; }
  23% { stroke-opacity:1; }
  39%,96% { stroke-opacity:.75; }
}
@keyframes pf-work-arrives {
  0%,26%,100% { opacity:0; transform:translateY(-8px); }
  43%,80% { opacity:1; transform:translateY(0); }
  88%,96% { opacity:0; transform:translateY(0); }
}
@keyframes pf-handoff-connects {
  0%,26%,100% { opacity:0; transform:scaleY(.111111); }
  43%,80% { opacity:.65; transform:scaleY(1); }
  88%,96% { opacity:0; transform:scaleY(1); }
}
@keyframes pf-execution-continues {
  from { stroke-dashoffset:0; }
  to { stroke-dashoffset:-100; }
}
@media (max-width:600px) {
  .concept-visual { --concept-outline:2; --concept-detail:1.5; }
  .project-page>.concept-visual { min-height:300px; }
  .project-concept { padding:20px 16px 14px; gap:14px; }
  .ac-heading>p { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .concept-visual .ac-motion-toggle { display:none; }
}