:root {
  color-scheme: light;
  --orbit-page: #fff;
  --orbit-text: #191919;
  --orbit-muted: #626262;
  --orbit-line: #e5e5e5;
  --orbit-tint: #f5f5f5;
  --orbit-section-gap: 3rem;
  --orbit-section-inset: 2rem;
  --orbit-heading-gap: 1.5rem;
  --orbit-copy-gap: 1rem;
  --orbit-small-gap: .75rem;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 100%;
  line-height: 1.65;
  color: var(--orbit-text);
  background: var(--orbit-page);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, p, figure, dl { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--orbit-text);
  outline-offset: 4px;
}

.orbit-page {
  width: min(100%, 64rem);
  margin-inline: auto;
  padding: 2.75rem 2.5rem 5rem;
  overflow-wrap: anywhere;
}

.skip-link { position: absolute; top: .75rem; left: 1rem; transform: translateY(-200%); }
.skip-link:focus { z-index: 1; transform: none; background: var(--orbit-page); padding: .5rem 1rem; }
.context { padding-bottom: 1.25rem; margin-bottom: var(--orbit-section-inset); border-bottom: 1px solid var(--orbit-line); font-size: .875rem; }
.context > p:first-child { font-weight: 500; }
.metadata { color: var(--orbit-muted); font-size: .875rem; }
.context .metadata { margin-top: .125rem; }
.page-heading { max-width: 44rem; margin-bottom: var(--orbit-section-inset); }
h1 { font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -.04em; font-weight: 500; text-wrap: balance; }
h2 { font-size: 1.625rem; line-height: 1.25; letter-spacing: -.025em; font-weight: 500; }
h3 { font-size: 1.125rem; line-height: 1.4; letter-spacing: -.015em; font-weight: 500; }
.lead { font-size: 1.125rem; line-height: 1.65; margin-top: var(--orbit-heading-gap); }
.section { margin-top: var(--orbit-section-gap); padding-top: var(--orbit-section-inset); border-top: 1px solid var(--orbit-line); }
.section > h2 { margin-bottom: var(--orbit-heading-gap); }
.section > p + p { margin-top: var(--orbit-copy-gap); }
.section > p { max-width: 44rem; }
.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--orbit-section-inset); }
.content-grid > * { min-width: 0; }

.facts > div { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--orbit-line); }
.facts > div:first-child { padding-top: 0; }
.facts > div:last-child { border-bottom: 0; }
.facts dt { flex: 1 1 5.5rem; min-width: 0; color: var(--orbit-muted); }
.facts dd { flex: 2.5 1 12rem; min-width: 0; margin: 0; }

.item-list { margin: 0; padding-left: 1.5rem; }
.item-list > li { padding: 1.25rem 0 1.25rem .5rem; border-bottom: 1px solid var(--orbit-line); }
.item-list > li:first-child { padding-top: 0; }
.item-list > li:last-child { padding-bottom: 0; border-bottom: 0; }
.item-list p, .timeline p { margin-top: var(--orbit-small-gap); max-width: 44rem; }
.item-list .metadata { margin-top: .375rem; }
.recommendation { border: 1px solid var(--orbit-line); border-radius: .875rem; padding: 1.5rem; }
.recommendation > * + * { margin-top: var(--orbit-small-gap); }

.feature-image { margin-block: var(--orbit-section-inset); }
.feature-image img { width: 100%; aspect-ratio: 2.8; object-fit: cover; border-radius: .875rem; }
.feature-image figcaption { color: var(--orbit-muted); font-size: .875rem; line-height: 1.5; margin-top: .625rem; }
.product-image, .feature-image .product-image { width: 100%; max-height: 18rem; object-fit: contain; }

.table-scroll { overflow-x: auto; border: 1px solid var(--orbit-line); border-radius: .75rem; }
.comparison { width: 100%; border-collapse: collapse; text-align: left; font-size: .875rem; }
.comparison caption { text-align: left; font-size: 1rem; font-weight: 500; padding: 1rem 1.25rem; }
.comparison th, .comparison td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--orbit-line); vertical-align: top; min-width: 9rem; }
.comparison th { font-weight: 500; }
.comparison thead, .comparison .recommended { background: var(--orbit-tint); }
.comparison tbody tr:last-child > * { border-bottom: 0; }

.timeline { margin: 0; padding: 0; list-style: none; }
.timeline > li { display: grid; grid-template-columns: minmax(3.5rem, 1fr) minmax(0, 7fr); gap: 1.25rem; }
.timeline > li > :first-child { font-size: .875rem; color: var(--orbit-muted); font-variant-numeric: tabular-nums; }
.timeline > li > div { padding: 0 0 var(--orbit-section-inset) 1.25rem; border-left: 1px solid var(--orbit-line); }
.timeline > li:last-child > div { padding-bottom: 0; }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li + li { border-top: 1px solid var(--orbit-line); }
.checklist label { display: flex; align-items: flex-start; gap: .75rem; padding: .875rem 0; cursor: pointer; }
.checklist input { width: 1.125rem; height: 1.125rem; flex: none; margin: .25rem 0 0; accent-color: var(--orbit-text); }
.checklist input:checked + span { color: var(--orbit-muted); text-decoration: line-through; }

.sources { max-width: 44rem; }
.sources summary { width: fit-content; padding-block: .375rem; font-weight: 500; }
.sources > :not(summary) { margin-top: var(--orbit-copy-gap); }
.sources ul { padding-left: 1.25rem; }
.sources li + li { margin-top: .5rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: var(--orbit-heading-gap); }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 2.75rem; padding: .625rem 1.125rem; border: 1px solid var(--orbit-text); border-radius: .625rem; background: var(--orbit-text); color: var(--orbit-page); font-weight: 500; line-height: 1.4; text-align: center; text-decoration: none; }
.button:hover { background: #333; text-decoration: none; }
.button-secondary { background: var(--orbit-page); color: var(--orbit-text); border-color: var(--orbit-line); }
.button-secondary:hover { background: var(--orbit-tint); }
.button-soft { background: var(--orbit-tint); color: var(--orbit-text); border-color: transparent; }
.button-soft:hover { background: var(--orbit-line); }
.button:disabled { cursor: default; opacity: .5; }

.field { display: grid; gap: .5rem; max-width: 36rem; }
.field + .field { margin-top: 1.25rem; }
.field > label, .choice-group legend { font-weight: 500; }
.control { display: block; width: 100%; min-width: 0; min-height: 2.75rem; padding: .625rem .875rem; border: 1px solid #8c8c8c; border-radius: .625rem; background: var(--orbit-page); color: var(--orbit-text); }
.control::placeholder { color: var(--orbit-muted); opacity: 1; }
textarea.control { resize: vertical; min-height: 7rem; }
.choice-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-group + .choice-group { margin-top: 1.5rem; }
.choice-group legend { padding: 0; margin-bottom: .5rem; }
.choice { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: .5rem 0; cursor: pointer; }
.choice input { flex: none; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--orbit-text); }
.switch input { appearance: none; position: relative; width: 2.5rem; height: 1.5rem; border: 1px solid var(--orbit-muted); border-radius: 2rem; background: var(--orbit-muted); cursor: pointer; }
.switch input::before { content: ""; position: absolute; width: 1rem; height: 1rem; left: .1875rem; top: .1875rem; border-radius: 50%; background: var(--orbit-page); }
.switch input:checked { background: var(--orbit-text); border-color: var(--orbit-text); }
.switch input:checked::before { transform: translateX(1rem); }
.badge { display: inline-block; padding: .125rem .625rem; border-radius: .375rem; background: var(--orbit-tint); font-size: .875rem; font-weight: 500; }
.notice { margin-top: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--orbit-line); border-radius: .75rem; }
.notice > p { margin-top: .5rem; }

@media (forced-colors: active) {
  .switch input { appearance: auto; }
  .switch input::before { display: none; }
}

@media (max-width: 680px) {
  :root { --orbit-section-gap: 2rem; --orbit-section-inset: 1.5rem; --orbit-heading-gap: 1.25rem; }
  .orbit-page { padding: 1.5rem 1.25rem 4rem; }
  .context { padding-bottom: .75rem; }
  .lead { font-size: 1.0625rem; }
  .content-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-image img { aspect-ratio: 1.65; border-radius: .75rem; }
  .recommendation { padding: 1.25rem; }
  .timeline > li { grid-template-columns: minmax(2.75rem, 1fr) minmax(0, 5fr); gap: .75rem; }
  .timeline > li > div { padding-left: 1rem; }
}

/* Portfolio layer: retains the neutral dot brief, with three distinct identities. */
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
.orbit-page { width: min(100%, 76rem); }
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.wordmark { font-weight: 650; font-size: 1.4rem; letter-spacing: -.09em; line-height: 1.2; }
.small-cross { font-size: 1rem; margin-left: .2rem; }
.review-label { font-size: .75rem; color: var(--orbit-muted); border: 1px solid var(--orbit-line); border-radius: .375rem; padding: .3rem .6rem; }
.section-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; font-size: .8rem; margin-bottom: 3.5rem; }
.section-nav a { text-decoration: none; }
.section-nav a:last-child { margin-left: auto; color: var(--orbit-muted); }
.hero { max-width: 52rem; margin-bottom: 3rem; }
.hero h1 { margin-top: 1rem; max-width: 48rem; }
.hero .lead { max-width: 44rem; color: #4c4c4c; }
.hero .button span { margin-left: 1rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; line-height: 1.5; color: #626262; font-weight: 600; }
.opening-pair { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--orbit-line); border-bottom: 1px solid var(--orbit-line); }
.opening-tile { padding: 1.5rem; text-decoration: none; border-right: 1px solid var(--orbit-line); transition: background-color .15s; min-width: 0; }
.opening-tile:first-child { padding-left: 0; }
.opening-tile:last-child { border-right: none; padding-right: 0; }
.opening-tile:hover { background: #fafafa; }
.opening-tile .metadata { font-size: .64rem; letter-spacing: .1em; }
.tile-caption { display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between; }
.tile-caption h2 { font-size: 1.32rem; line-height: 1.3; }
.tile-caption > span { font-size: 1.4rem; line-height: 1.2; }
.opening-tile p { font-size: .8rem; color: var(--orbit-muted); margin-top: .65rem; }
.visual-eye, .visual-system, .visual-evaluation { height: 11.5rem; margin: 1rem 0 1.4rem; position: relative; overflow: hidden; background: #f4f4f2; border-radius: .2rem; }
.visual-eye { background: #242421; }
.eye-outer { position: absolute; left: 50%; top: 50%; width: 7rem; height: 7rem; border: 1px solid #bcbcaf; border-radius: 80% 0 80% 0; transform: translate(-50%,-50%) rotate(45deg); }
.eye-inner { position: absolute; inset: 1.5rem; border: 1px solid #bcbcaf; border-radius: 50%; box-shadow: 0 0 0 .55rem #242421, 0 0 0 .6rem #55554c; background: #cecec0; }
.frame-corner { position: absolute; width: 1rem; height: 1rem; border-color: #55554c; border-style: solid; }
.c1 { top: 1rem; left: 1rem; border-width: 1px 0 0 1px; }.c2 { top: 1rem; right: 1rem; border-width: 1px 1px 0 0; }.c3 { bottom: 1rem; left: 1rem; border-width: 0 0 1px 1px; }.c4 { bottom: 1rem; right: 1rem; border-width: 0 1px 1px 0; }
.visual-system { background: #edf0f2; background-image: radial-gradient(#c3ccd1 .7px, transparent .7px); background-size: 10px 10px; }
.system-center { position: absolute; inset: calc(50% - 1.4rem) auto auto calc(50% - 1.4rem); width: 2.8rem; height: 2.8rem; display: grid; place-items: center; background: #26343d; color: white; border-radius: .3rem; font-size: .7rem; z-index: 2; }
.system-node { position: absolute; height: 1.3rem; width: 2.3rem; border: 1px solid #81929e; background: #f9fafb; border-radius: .2rem; z-index: 2; }
.n1 { left: 12%; top: 22%; }.n2 { right: 12%; top: 22%; }.n3 { left: 12%; bottom: 22%; }.n4 { right: 12%; bottom: 22%; }
.system-line { position: absolute; left: 25%; right: 25%; top: 50%; border-top: 1px solid #81929e; }
.l1 { transform: rotate(26deg); }.l2 { transform: rotate(-26deg); }.l3 { left: 50%; right: auto; top: 29%; bottom: 29%; border-left: 1px solid #81929e; border-top: 0; }
.visual-evaluation { display: flex; flex-direction: column; justify-content: center; padding: 1.7rem; background: #fbfbfb; border: 1px solid #e8e8e8; }
.visual-evaluation span { font-size: .55rem; letter-spacing: .12em; display: flex; justify-content: space-between; align-items: center; }
.visual-evaluation i { height: .2rem; width: 74%; background: #d7d7d7; margin: .35rem 0 .8rem; }
.visual-evaluation i:nth-of-type(2) { width: 58%; }
.visual-evaluation b { font-size: 1rem; font-weight: 400; border: 1px solid #c8c8c8; width: 1.6rem; height: 1.6rem; text-align: center; border-radius: 50%; }
.editor-note { color: var(--orbit-muted); font-size: .72rem; line-height: 1.55; margin-top: .8rem; max-width: 56rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.8rem; }
.section-heading h2 { margin-top: .7rem; max-width: 28rem; }
.section-heading > p { font-size: .9rem; max-width: 22rem; color: #626262; }
.creative-board { background: #252622; color: #e8e8de; padding: 1.4rem 1.8rem; border-radius: .4rem; overflow: hidden; }
.board-top, .board-bottom { display: flex; justify-content: space-between; gap: 1rem; font-size: .56rem; letter-spacing: .12em; }
.board-top { border-bottom: 1px solid #53544b; padding-bottom: 1rem; }
.board-bottom { border-top: 1px solid #53544b; padding-top: 1rem; color: #b4b5a9; }
.board-scene { display: grid; grid-template-columns: 1fr 1fr; min-height: 21rem; }
.board-copy { display: flex; flex-direction: column; justify-content: center; padding: 1rem 0; }
.board-kicker { font-size: .65rem; letter-spacing: .2em; margin-bottom: 1.5rem; }
.board-copy strong { font-weight: 400; font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.045em; line-height: 1.1; }
.board-subtitle { margin-top: 1.7rem; font-size: .7rem; color: #b4b5a9; }
.sculpture { position: relative; min-width: 0; }
.sculpture-disc { position: absolute; width: 10rem; height: 10rem; border-radius: 50%; background: #a8a99a; left: calc(50% - 3rem); top: calc(50% - 7rem); }
.sculpture-arch { position: absolute; width: 8rem; height: 11rem; background: #d7d8c8; border-radius: 4rem 4rem 0 0; left: calc(50% - 6rem); top: calc(50% - 4rem); box-shadow: inset -1.1rem 0 0 #c2c3b1; }
.sculpture-arch::after { content: ''; position: absolute; left: 2.4rem; right: 2.4rem; bottom: 0; height: 6rem; border-radius: 2rem 2rem 0 0; background: #383a32; }
.sculpture-base { position: absolute; width: 13rem; height: 1rem; background: #737668; left: calc(50% - 7.5rem); top: calc(50% + 7rem); transform: skewX(-20deg); }
.sculpture-shadow { position: absolute; width: 14rem; height: 3rem; border-radius: 50%; background: #171813; left: calc(50% - 7rem); top: calc(50% + 6rem); transform: skewX(-25deg); }
.creative-details { margin-top: 2.5rem; gap: 3rem; }
.creative-details h3 { margin-top: .75rem; font-size: 1.3rem; }
.body-copy { color: #626262; margin-top: 1rem; font-size: .92rem; }
.compact-timeline h3 { margin: 0; font-size: 1rem; }
.compact-timeline p { font-size: .86rem; color: #626262; margin-top: .35rem; }
.compact-timeline > li > div { padding-bottom: 1.25rem; }
.service-row { display: flex; gap: .7rem 1.3rem; align-items: center; flex-wrap: wrap; margin: 2rem 0 1.2rem; border-top: 1px solid var(--orbit-line); padding-top: 1.4rem; font-size: .77rem; }
.service-row > span { color: var(--orbit-muted); font-size: .7rem; }
.text-button { color: #191919; background: transparent; border: 0; padding: .5rem 0; font-size: .88rem; text-align: left; text-decoration: underline; text-underline-offset: .25rem; }
.text-button span { margin-left: .5rem; }
.section-intro { font-size: .86rem; color: #626262; margin-bottom: 1.5rem; }
.project-list { border-top: 1px solid #cdd4d8; }
.project-row { display: grid; grid-template-columns: 1.5rem 4rem 1fr auto 1.5rem; align-items: center; gap: 1.2rem; width: 100%; border: 0; border-bottom: 1px solid #cdd4d8; background: white; text-align: left; padding: 1.5rem .6rem; }
.project-row:hover { background: #f7f9fa; }
.project-index { font-size: .7rem; color: #626262; }
.project-info { display: flex; flex-direction: column; min-width: 0; }
.project-info strong { font-size: 1.2rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.project-info > span { color: #626262; font-size: .78rem; margin-top: .25rem; }
.status-label { color: #55636c; background: #f0f3f5; border: 1px solid #dbe1e4; border-radius: .25rem; padding: .25rem .5rem; font-size: .62rem; white-space: nowrap; }
.project-glyph { width: 4rem; height: 4rem; border: 1px solid #cdd4d8; border-radius: .3rem; display: flex; justify-content: center; align-items: center; background: #f7f9fa; color: #334651; }
.central-glyph { font-size: 2rem; letter-spacing: -.08em; }.central-glyph span { font-size: .9rem; margin-top: -1rem; }
.organize-glyph { gap: .25rem; }.organize-glyph i { width: .6rem; height: 1.6rem; border: 1px solid #637782; }.organize-glyph i:nth-child(2) { height: 2rem; }.organize-glyph i:nth-child(3) { height: 1.2rem; }
.facial-glyph i { width: 1.8rem; height: 1.8rem; border: 1px solid #637782; border-radius: .2rem; position: relative; }
.facial-glyph i::before { content: ''; position: absolute; inset: .3rem .5rem .6rem; border: 1px solid #637782; border-radius: 50%; }
.facial-glyph i::after { content: ''; position: absolute; width: 2.3rem; border-top: 1px solid #637782; left: -.3rem; top: .8rem; }
.project-arrow { font-size: 1.3rem; }
.flow-demo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.8rem; margin-top: 2rem; background: #f7f9fa; border: 1px solid #dde3e6; border-radius: .3rem; }
.flow-demo > span { font-size: .65rem; color: #626262; background: #fff; border: 1px solid #cdd4d8; padding: .6rem 1rem; min-width: 7rem; }
.flow-demo strong { font-size: .8rem; font-weight: 500; color: #26343d; }
.flow-demo i { font-style: normal; color: #637782; }
.flow-demo small { margin-left: auto; font-size: .55rem; letter-spacing: .12em; color: #637782; }
.proof-note { margin-top: 1rem; border: 0; padding: 1rem 0; }
.proof-note h3 { font-size: .95rem; }.proof-note p { font-size: .85rem; }
.evaluation-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin: 2rem 0; }
.evaluation-grid > div { border-top: 2px solid #222; padding-top: 1rem; }
.evaluation-number { color: #7d7d7d; font-size: .7rem; display: block; margin-bottom: 1.5rem; }
.evaluation-grid h3 { font-size: 1.1rem; }.evaluation-grid p { color: #626262; font-size: .87rem; margin-top: .6rem; }
.evaluation-example { max-width: none; border: 1px solid var(--orbit-line); border-radius: .3rem; padding: .8rem 1.2rem; }
.evaluation-example summary { font-size: .85rem; }
.evaluation-sample { font-size: .85rem; border-top: 1px solid var(--orbit-line); padding-top: 1rem; }
.about-section h2 { margin-top: .8rem; }.about-section > div > p + p { margin-top: 1rem; }.about-section > div:nth-child(2) { font-size: .9rem; }
.format-section .content-grid { margin-top: 1.2rem; gap: 3rem; }.format-section h2 { font-size: 1.2rem; }.format-section .content-grid p { font-size: .86rem; color: #626262; margin-top: .7rem; }
.checklist { font-size: .89rem; }
.footer { border-top: 1px solid #191919; display: flex; justify-content: space-between; gap: 2rem; margin-top: 3.5rem; padding-top: 1.6rem; font-size: .75rem; }
.footer strong { font-size: .9rem; font-weight: 500; }.footer .metadata { font-size: .68rem; }.footer a { align-self: flex-start; }
dialog { width: min(42rem, calc(100% - 2rem)); max-height: 88dvh; border: 1px solid #e5e5e5; border-radius: .75rem; color: #191919; padding: 0; }
dialog::backdrop { background: rgba(0,0,0,.45); }
.dialog-inner { padding: 2rem; }
.dialog-top { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1.5rem; }
.close-button { background: white; border: 1px solid #e5e5e5; border-radius: .3rem; font-size: 1.4rem; line-height: 1; width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
.dialog-inner .lead { font-size: .95rem; margin-top: 1rem; color: #626262; }
.dialog-section { display: grid; grid-template-columns: 1.4rem 1fr; gap: 1rem; margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid #e5e5e5; }
.dialog-section h3 { font-size: 1rem; }.dialog-section p { color: #626262; font-size: .86rem; margin-top: .5rem; }
.dialog-inner > .button { margin-top: 2rem; }.dialog-open { overflow: hidden; }
@media (max-width: 900px) {
  .opening-tile { padding: 1.2rem .9rem; }.tile-caption h2 { font-size: 1.1rem; }.visual-evaluation { padding: 1rem; }
  .section-heading { gap: 1.5rem; }.section-heading > p { max-width: 18rem; }
}
@media (max-width: 680px) {
  .masthead { gap: .8rem; }.review-label { font-size: .6rem; }.masthead .metadata { font-size: .7rem; }
  .section-nav { gap: .7rem 1.2rem; font-size: .68rem; margin-bottom: 2.25rem; }.section-nav a:last-child { margin-left: 0; }
  .hero h1 { font-size: 2.25rem; }.hero .lead { font-size: 1rem; }.hero { margin-bottom: 2rem; }
  .actions { gap: .6rem; }.button { font-size: .85rem; }
  .opening-pair { grid-template-columns: 1fr; }
  .opening-tile, .opening-tile:first-child, .opening-tile:last-child { padding: 1.2rem 0; border-right: 0; border-bottom: 1px solid var(--orbit-line); display: grid; grid-template-columns: 1fr 7rem; column-gap: 1rem; }
  .opening-tile:last-child { border-bottom: 0; }.opening-tile > .metadata { grid-column: 1; align-self: end; }.opening-tile p { grid-column: 1; margin-top: .4rem; }
  .visual-eye, .visual-system, .visual-evaluation { grid-column: 2; grid-row: 1 / span 3; height: 7rem; margin: 0; width: 7rem; }
  .tile-caption { grid-row: 2; grid-column: 1; margin-top: .6rem; justify-content: start; gap: .6rem; }.tile-caption h2 { font-size: 1.15rem; }.tile-caption > span { font-size: 1rem; }
  .opening-tile p { font-size: .72rem; }.eye-outer { width: 4rem; height: 4rem; }.eye-inner { inset: .9rem; box-shadow: 0 0 0 .25rem #242421,0 0 0 .3rem #55554c; }
  .frame-corner { width: .6rem; height: .6rem; }.c1,.c2 { top: .6rem; }.c3,.c4 { bottom: .6rem; }.c1,.c3 { left: .6rem; }.c2,.c4 { right: .6rem; }
  .system-center { width: 1.6rem; height: 1.6rem; inset: calc(50% - .8rem) auto auto calc(50% - .8rem); font-size: .5rem; }.system-node { width: 1.3rem; height: .7rem; }.system-line { left: 20%; right: 20%; }.l3 { left: 50%; right: auto; }
  .visual-evaluation { padding: .7rem; }.visual-evaluation span { font-size: .36rem; letter-spacing: .02em; }.visual-evaluation i { margin: .25rem 0 .6rem; height: .15rem; }.visual-evaluation b { font-size: .7rem; width: 1.1rem; height: 1.1rem; }
  .section-heading { flex-direction: column; align-items: start; gap: .9rem; }.section-heading > p { max-width: none; font-size: .86rem; }.section-heading h2 { font-size: 1.5rem; }
  .creative-board { padding: 1rem; }.board-top,.board-bottom { font-size: .42rem; gap: .6rem; letter-spacing: .06em; }
  .board-scene { min-height: 18rem; grid-template-columns: 1fr 1fr; }.board-copy strong { font-size: 1.8rem; }.board-kicker { margin-bottom: 1rem; font-size: .5rem; }.board-subtitle { font-size: .5rem; max-width: 6rem; }
  .sculpture { transform: scale(.65); transform-origin: center; }.sculpture-disc { left: calc(50% - 4rem); }.sculpture-arch { left: calc(50% - 6.5rem); }
  .creative-details { gap: 2rem; }.creative-details h3 { font-size: 1.15rem; }.compact-timeline h3 { font-size: 1rem; }
  .service-row { gap: .5rem 1rem; font-size: .7rem; }.service-row > span { width: 100%; }
  .project-row { grid-template-columns: 2.8rem 1fr 1.2rem; gap: .75rem; padding: 1.2rem 0; }.project-index { display: none; }.project-glyph { width: 2.8rem; height: 2.8rem; grid-row: 1 / span 2; }.central-glyph { font-size: 1.6rem; }.organize-glyph i { width: .45rem; }.project-info { grid-column: 2; grid-row: 1; }.project-info strong { font-size: 1rem; }.project-info > span { font-size: .7rem; }.project-arrow { grid-column: 3; grid-row: 1 / span 2; }.status-label { grid-column: 2; grid-row: 2; justify-self: start; font-size: .55rem; }
  .flow-demo { padding: 1rem; gap: .5rem; justify-content: center; }.flow-demo > span { min-width: 0; padding: .5rem; flex: 1; font-size: .5rem; }.flow-demo strong { font-size: .6rem; }.flow-demo small { width: 100%; text-align: center; margin-top: .5rem; }
  .evaluation-grid { gap: 1rem; }.evaluation-grid h3 { font-size: .95rem; }.evaluation-grid p { font-size: .73rem; }.evaluation-number { margin-bottom: 1rem; }
  .format-section .content-grid { gap: 1.5rem; }.footer { flex-wrap: wrap; gap: 1rem 2rem; }.footer a { width: 100%; margin-top: .5rem; }
  .dialog-inner { padding: 1.3rem; }.dialog-inner h2 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Real project evidence, version 02. */
.avatalk-hero { background: #11121b; border-radius: .4rem; overflow: hidden; }
.avatalk-hero img { width: 100%; height: auto; }
.avatalk-hero figcaption { color: #dadde9; padding: .8rem 1.2rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .58rem; letter-spacing: .1em; }
.case-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.case-tags span { font-size: .67rem; border: 1px solid #daddea; color: #51566b; border-radius: .2rem; padding: .25rem .5rem; }
.avatalk-formats { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 2.5rem; margin-top: 2.5rem; align-items: start; }
.motion-column video { width: 100%; aspect-ratio: 16/9; display: block; background: #000; border-radius: .3rem; margin-top: .8rem; }
.motion-column h3 { margin: 1.7rem 0 .6rem; }.motion-column > p:not(.eyebrow):not(.editor-note) { font-size: .86rem; color: #626262; }.motion-column .metadata { margin-top: .7rem; }
.vertical-frame { max-width: 20rem; justify-self: center; }.vertical-frame img { width: 100%; height: auto; border-radius: .3rem; }.vertical-frame figcaption { font-size: .75rem; margin-top: .7rem; }.vertical-frame figcaption span { font-size: .67rem; color: #626262; }
.system-evidence-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2rem; }.system-evidence-grid article { border-top: 2px solid #607583; padding-top: 1rem; }.system-evidence-grid .eyebrow { font-size: .56rem; letter-spacing: .06em; }.system-evidence-grid h3 { font-size: 1.04rem; margin-top: 1rem; }.system-evidence-grid article > p:not(.eyebrow) { font-size: .81rem; margin-top: .8rem; }.system-evidence-grid article > p.metadata { font-size: .72rem; color: #626262; }
.exercise-label { font-size: .6rem; font-weight: 600; letter-spacing: .1em; border-top: 1px solid #bbb; padding-top: 1.5rem; margin-top: 2rem; }
.evaluation-exercise { margin-top: 1.2rem; }.evaluation-exercise h3 { margin-top: .65rem; font-size: 1.2rem; }.exercise-brief { background: #f6f6f6; font-size: .85rem; margin-top: 1.2rem; padding: 1rem 1.2rem; border-radius: .3rem; }.response-pair { margin: 1.5rem 0; gap: 1.5rem; }.response-pair > div { border-left: 2px solid #d5d5d5; padding-left: 1rem; }.response-label { color: #626262; font-size: .57rem; letter-spacing: .05em; }.response-pair p { font-size: .85rem; margin-top: .75rem; }.second-exercise { margin-top: 1rem; }
@media (max-width:680px) {
 .avatalk-hero figcaption { padding: .6rem .8rem; font-size: .44rem; letter-spacing: .05em; flex-wrap: wrap; gap: .4rem; }
 .avatalk-formats { grid-template-columns: 1fr; gap: 1.7rem; }.vertical-frame { width: min(100%,17rem); }.system-evidence-grid { grid-template-columns: 1fr; gap: 1.5rem; }.system-evidence-grid h3 { margin-top: .6rem; }.system-evidence-grid article > p:not(.eyebrow) { margin-top: .6rem; }.system-evidence-grid .eyebrow { font-size: .6rem; }.exercise-label { font-size: .53rem; }.response-pair { gap: 1.3rem; }.evaluation-exercise h3 { font-size: 1.1rem; }.exercise-brief { padding: .9rem; }
}

/* Color direction requested by Léo: three accents under the same identity. */
:root { --creative-accent: #5a39bd; --system-accent: #096b78; --evaluation-accent: #935700; }
.small-cross { color: #5a39bd; }
.hero { position: relative; padding-left: 1.2rem; border-left: 3px solid #6b44d8; }
.hero .eyebrow { color: #5a39bd; }
.hero .button:not(.button-secondary) { background: #5634b2; border-color: #5634b2; }
.hero .button:not(.button-secondary):hover { background: #42268d; }
.section-nav a:nth-child(1) { color: #5a39bd; }.section-nav a:nth-child(2) { color: #096b78; }.section-nav a:nth-child(3) { color: #935700; }
.opening-tile:first-child .tile-caption h2 { color: #5a39bd; }.opening-tile:nth-child(2) .tile-caption h2 { color: #096b78; }.opening-tile:nth-child(3) .tile-caption h2 { color: #935700; }
.visual-eye { background: #211845; }.eye-outer { border-color: #a89be2; }.eye-inner { background: #9e8ae5; border-color: #b5a5ee; box-shadow: 0 0 0 .55rem #211845,0 0 0 .6rem #65548d; }.frame-corner { border-color: #65548d; }
.visual-system { background-color: #e6f2f4; background-image: radial-gradient(#90bec5 .7px,transparent .7px); }.system-center { background: #096b78; }.system-node { border-color: #75a8b0; }.system-line { border-color: #75a8b0; }
.visual-evaluation { background: #fff5e5; border-color: #e8c995; }.visual-evaluation i { background: #d7ae6b; }.visual-evaluation b { color: #935700; border-color: #d7ae6b; }
#ia-criativa { border-top: 3px solid #7655d0; }#ia-criativa > .section-heading .eyebrow, #ia-criativa .creative-details .eyebrow { color: #5a39bd; }
.case-tags span { background: #f2edff; border-color: #ddd2f9; color: #523a9a; }
#sistemas { border-top: 3px solid #228392; }#sistemas > .section-heading .eyebrow, .system-evidence-grid .eyebrow { color: #096b78; }
.project-glyph { background: #eaf5f6; border-color: #c6e0e3; color: #096b78; }.status-label { color: #075e69; background: #e7f4f4; border-color: #c6dfe2; }.project-row:hover { background: #f1f9fa; }.flow-demo { background: #eaf5f6; border-color: #c6e0e3; }.flow-demo strong { color: #075e69; }.system-evidence-grid article { border-top-color: #228392; }
#avaliacao { border-top: 3px solid #c58d32; }#avaliacao > .section-heading .eyebrow { color: #935700; }.evaluation-grid > div { border-top-color: #b7791e; }.evaluation-number { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: .25rem; background: #fff0d9; color: #935700; }.exercise-label { color: #80500b; border-color: #e6c797; }.exercise-brief { background: #fff7eb; }.response-pair > div { border-left-color: #d4aa66; }.evaluation-example { border-color: #e5d4b7; }.evaluation-example summary { color: #80500b; }
.footer { border-top-color: #7151c8; }
@media (max-width:680px) { .hero { padding-left: .8rem; }.eye-inner { box-shadow: 0 0 0 .25rem #211845,0 0 0 .3rem #65548d; } }

.dna-case { margin-top: 3rem; border-top: 1px solid #bfd9e6; padding-top: 2rem; }
.dna-heading { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; }
.dna-heading .eyebrow { color: #156782; }.dna-heading h3 { font-size: 1.8rem; margin: .6rem 0; letter-spacing: -.03em; }.dna-heading p:not(.eyebrow) { font-size: .92rem; color: #626262; }.dna-status { white-space: nowrap; color: #15556b; background: #eaf6fa; border: 1px solid #c0dfe9; padding: .3rem .7rem; font-size: .65rem; border-radius: .3rem; }
.dna-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; margin-top: 1.5rem; align-items: start; }.dna-body video { display: block; width: 100%; aspect-ratio: 16/9; background: #061b2c; border-radius: .3rem; object-fit: contain; }.dna-body figcaption { font-size: .68rem; color: #626262; margin-top: .6rem; }.dna-story .eyebrow { color: #156782; }.dna-story h4 { margin: .6rem 0 .8rem; font-size: 1.1rem; font-weight: 500; line-height: 1.4; }.dna-story > p:not(.eyebrow) { font-size: .82rem; color: #626262; }.dna-story > p + p { margin-top: .75rem; }.dna-button { background: #0b5b78; border-color: #0b5b78; margin-top: 1.2rem; font-size: .8rem; }.dna-button:hover { background: #08455b; }.dna-story .dna-private-note { margin-top: .7rem; font-size: .68rem; color: #455f6b; }
.dna-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; background: #eef7fa; border-top: 2px solid #2884a0; padding: 1.2rem; margin-top: 1.5rem; }.dna-facts span { font-size: .56rem; letter-spacing: .07em; color: #156782; }.dna-facts p { font-size: .8rem; margin-top: .5rem; }.dna-bottom { display: flex; justify-content: space-between; align-items: start; gap: 1.5rem; padding-top: 1rem; }.dna-bottom > p { max-width: 26rem; font-size: .68rem; color: #626262; }.dna-bottom .text-button { color: #0b5b78; font-size: .82rem; }
@media (max-width:680px) { .dna-heading { flex-direction: column; gap: .9rem; }.dna-heading h3 { font-size: 1.5rem; }.dna-body { grid-template-columns: 1fr; gap: 1.3rem; }.dna-facts { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; }.dna-facts p { margin-top: .25rem; }.dna-bottom { flex-direction: column; gap: .6rem; }.dna-bottom > p { max-width: none; }.dna-case { margin-top: 2rem; padding-top: 1.5rem; } }

.dna-cover { min-height: 21rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.4rem; background: #072536; color: #f2f7fa; border-radius: .3rem; }
.dna-cover-top,.dna-cover-bottom { display: flex; justify-content: space-between; gap: .75rem; font-size: .5rem; letter-spacing: .12em; color: #9bc9dc; }.dna-cover-top { border-bottom: 1px solid #315b6d; padding-bottom: .8rem; }.dna-cover-bottom { border-top: 1px solid #315b6d; padding-top: .8rem; }.dna-cover-center { padding: 1.3rem 0; }.dna-cover-label { display: block; font-size: .65rem; letter-spacing: .16em; color: #83ceeb; }.dna-cover strong { display: block; font-size: clamp(1.8rem,3.5vw,3rem); line-height: 1.1; letter-spacing: -.03em; margin-top: .45rem; font-weight: 500; }.dna-cover-line { display: block; width: 4rem; height: 3px; background: #e7b75d; margin: 1.1rem 0; }.dna-cover-center p { font-size: .8rem; color: #c1d7e0; line-height: 1.55; }
@media (max-width:680px) { .dna-cover { min-height: 19rem; padding: 1rem; }.dna-cover strong { font-size: 2rem; }.dna-cover-top,.dna-cover-bottom { font-size: .43rem; } }

/* Readability review: meaningful labels >=12px, notices >=13px. */
.review-label, .eyebrow, .opening-tile .metadata, .case-tags span,
.project-index, .status-label, .evaluation-number, .response-label,
.system-evidence-grid .eyebrow, .exercise-label, .dna-status,
.dna-facts span, .dna-cover-label, .dna-cover-top, .dna-cover-bottom {
  font-size: .75rem;
  line-height: 1.5;
}
.editor-note, .footer .metadata, .masthead .metadata,
.vertical-frame figcaption, .vertical-frame figcaption span,
.system-evidence-grid article > p.metadata, .dna-body figcaption,
.dna-story .dna-private-note, .dna-bottom > p {
  font-size: .8125rem;
  line-height: 1.6;
}
.section-nav { font-size: .8125rem; }
.opening-tile p, .project-info > span, .evaluation-grid p { font-size: .8125rem; }
.status-label, .dna-status { white-space: normal; }
.avatalk-hero figcaption { font-size: .8125rem; line-height: 1.5; flex-wrap: wrap; }
.flow-demo > span { font-size: .8125rem; }
.flow-demo strong { font-size: .875rem; }
.flow-demo small { font-size: .75rem; line-height: 1.5; color: #455f6b; }
.flow-demo i { color: #455f6b; }
.dna-cover-top, .dna-cover-bottom { flex-wrap: wrap; letter-spacing: .05em; }
.response-label, .exercise-label, .system-evidence-grid .eyebrow { letter-spacing: .05em; }
.asset-links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: .75rem; font-size: .8125rem; color: #5a39bd; }
.evaluation-status { margin-top: .75rem; font-size: .8125rem; line-height: 1.6; color: #80500b; }
.exercise-label { font-size: .8125rem; }
@media (max-width:680px) {
  .masthead { align-items: start; flex-wrap: wrap; }
  .review-label { max-width: 100%; }
  .opening-tile .tile-caption h2 { font-size: 1.05rem; }
  .flow-demo { display: grid; grid-template-columns: 1fr; gap: .45rem; text-align: center; }
  .flow-demo > span { width: 100%; padding: .65rem .8rem; }
  .flow-demo i { transform: rotate(90deg); justify-self: center; line-height: 1; }
  .flow-demo small { width: 100%; margin: .45rem 0 0; }
  .avatalk-hero figcaption { gap: .5rem; }
}


/* Final presentation: official DNA portrait and manual-load episode. */
.dna-body { grid-template-columns: minmax(0,.85fr) minmax(0,1.25fr); gap: 2.5rem; }
.dna-portrait { width: 100%; max-width: 360px; justify-self: center; }
.dna-portrait img { display: block; width: 100%; height: auto; border-radius: .4rem; }
.asset-original { display: inline-block; margin-top: .6rem; font-size: .8125rem; color: #0b5b78; }
.dna-story h4 { font-size: 1.35rem; }
.dna-story > p:not(.eyebrow) { font-size: .9rem; }
.dna-video-block { margin-top: 1.5rem; }
.dna-player { width: 100%; aspect-ratio: 16/9; background: #072536; border-radius: .4rem; overflow: hidden; margin-top: .75rem; }
.dna-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-load { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; width: 100%; height: 100%; border: 1px solid #225c74; border-radius: .4rem; background: radial-gradient(ellipse at 75% 20%,#14516b,#071d2a 75%); color: #fff; padding: .8rem; text-align: center; }
.video-load:hover { background: #0c3e54; }
.video-load strong { font-size: clamp(.9rem,1.5vw,1.15rem); font-weight: 500; line-height: 1.3; }
.video-load > span:last-child { font-size: .8125rem; color: #c1e3ee; }
.play-disc { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid #9bc9dc; border-radius: 50%; font-size: .9rem; padding-left: .15rem; }
.dna-video-block .dna-private-note { font-size: .8125rem; color: #455f6b; margin-top: .7rem; line-height: 1.6; }
.dna-video-block > .text-button { display: inline-block; margin-top: .4rem; color: #0b5b78; font-size: .8125rem; }
.contact-section { border-top: 3px solid #7655d0; }
.contact-section .content-grid { gap: 2.5rem; }
.contact-section h2 { margin-top: .65rem; }
.contact-section p { font-size: .9rem; }
.contact-section .eyebrow { color: #5a39bd; font-size: .75rem; }
.contact-button { background: #5634b2; border-color: #5634b2; margin: 1.25rem 0 1rem; overflow-wrap: anywhere; max-width: 100%; }
.contact-site { font-size: .8125rem !important; margin-bottom: .8rem; color: #5a39bd; }
.contact-section .metadata { font-size: .8125rem; }
@media (max-width:680px) {
 .dna-body { grid-template-columns: 1fr; gap: 1.5rem; }
 .dna-story h4 { font-size: 1.15rem; }
 .video-load { gap: .45rem; }
 .play-disc { width: 2rem; height: 2rem; }
 .contact-section .content-grid { gap: 1.2rem; }
 .contact-button { padding: .65rem .75rem; font-size: .8125rem; }
}

/* Approved editorial direction B: illustrative navigation art, not case evidence. */
.opening-tile, .opening-tile:first-child, .opening-tile:last-child { padding: 1.5rem 1.2rem; }
.opening-tile-art { width: 100%; aspect-ratio: 1; overflow: hidden; margin: 1rem 0 1.4rem; border-radius: .3rem; background: #f2eef6; }
.opening-tile-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.art-systems { background: #e2eff0; }.art-evaluation { background: #f8eddc; }
.opening-tile:focus-visible { outline: 3px solid #5634b2; outline-offset: 3px; }
@media (max-width:680px) {
 .opening-tile, .opening-tile:first-child, .opening-tile:last-child { padding: 1.2rem 0; }
 .opening-tile-art { grid-column: 2; grid-row: 1 / span 3; width: 7rem; height: 7rem; aspect-ratio: 1; margin: 0; align-self: center; }
}

/* Genuine product captures: preserve every pixel; enlargements show safe originals. */
.interface-gallery { margin: 2.5rem 0; }
.interface-gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.2rem; }
.interface-gallery-heading h3 { font-size: 1.45rem; font-weight: 500; margin-top: .45rem; letter-spacing: -.03em; }
.interface-gallery-heading > p { max-width: 21rem; font-size: .875rem; color: #455f6b; }
.interface-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; align-items: start; }
.interface-card { border: 1px solid #c8dadd; border-radius: .4rem; overflow: hidden; background: #fff; }
.interface-card-title { padding: 1rem 1.1rem; background: #eff6f6; min-height: 6.2rem; }
.interface-card-title h4 { margin: 0 0 .25rem; font-size: 1.05rem; font-weight: 600; }
.interface-card-title span { display: block; font-size: .8125rem; color: #455f6b; line-height: 1.5; }
.interface-preview { display: block; background: #edf2f4; border-block: 1px solid #c8dadd; }
.interface-preview img { display: block; width: 100%; height: auto; }
.interface-preview:focus-visible { outline: 3px solid #146375; outline-offset: -3px; }
.interface-card figcaption { padding: 1rem 1.1rem 1.15rem; font-size: .8125rem; line-height: 1.65; color: #455f6b; }
.interface-card figcaption a { display: inline-block; margin-top: .7rem; padding-block: .4rem; color: #09576b; font-weight: 500; }
@media (max-width:680px) {
 .interface-gallery-heading { display: block; }
 .interface-gallery-heading > p { margin-top: .65rem; max-width: none; }
 .interface-grid { grid-template-columns: 1fr; gap: 1.25rem; }
 .interface-card-title { min-height: 0; padding: .9rem 1rem; }
 .interface-card figcaption { padding: .9rem 1rem; }
}
.interface-featured { grid-column: 1 / -1; }
.interface-featured .interface-card-title { min-height: 0; }
@media (min-width:681px) {
 .interface-featured .interface-card-title { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
 .interface-featured .interface-card-title h4 { margin-bottom: 0; }
 .interface-featured figcaption { display: flex; justify-content: space-between; align-items: start; gap: 2rem; }
 .interface-featured figcaption p { max-width: 40rem; }
 .interface-featured figcaption a { margin-top: 0; white-space: nowrap; }
}

/* Approved panoramic masthead: full width, intrinsic ratio, no crop or overlay. */
.panoramic-masthead { width: 100%; margin: 0; padding: 0; background: #03091f; }
.panoramic-masthead img { display: block; width: 100%; height: auto; max-width: none; }