:root {
  color-scheme: light;
  --paper: #f4ede1;
  --card: #fffbf3;
  --ink: #281d14;
  --muted: #675544;
  --line: #d9cab6;
  --tint: #e6d5bd;
  --accent: #d4a463;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-block-start: 6rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.58 var(--sans); }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, .case h3, .lab h3 { font-family: var(--serif); font-weight: 400; }
h1, h2, .case h3 { line-height: 1.04; letter-spacing: -.045em; }
a { color: inherit; text-underline-offset: .21em; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #996500; outline-offset: 4px; }
.contact-section :focus-visible, .lab-section :focus-visible { outline-color: #e8f4b6; }
.lab :focus-visible { outline-color: #996500; }
.shell { width: min(100% - 3rem, 74rem); margin-inline: auto; }
.eyebrow { font: 650 .72rem/1.4 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.skip-link { position: fixed; z-index: 10; inset-block-start: .65rem; inset-inline-start: 1rem; padding: .8rem 1rem; background: var(--accent); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.site-header { position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.wordmark { display: inline-flex; align-items: center; gap: .68rem; text-decoration: none; font-weight: 750; white-space: nowrap; }
.mark { display: grid; place-items: center; width: 2.24rem; height: 2.24rem; border-radius: .5rem; background: var(--ink); color: var(--accent); font: 750 .77rem/1 var(--mono); letter-spacing: -.03em; }
nav { display: flex; align-items: center; gap: clamp(.65rem, 3vw, 2.5rem); }
nav a, .header-contact { padding-block: .55rem; font-size: .9rem; font-weight: 650; text-decoration: none; }
nav a:hover, .header-contact:hover { text-decoration: underline; }
.header-contact { display: inline-flex; align-items: center; gap: .5rem; }

.hero { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 5vw, 5rem); padding-block: clamp(3.5rem, 8.5vw, 7.5rem) clamp(3.5rem, 7vw, 6.5rem); }
.hero-copy > .eyebrow { display: flex; align-items: center; gap: .55rem; color: var(--muted); }
.location-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #567742; box-shadow: 0 0 0 .23rem #e0e9d2; }
.hero h1 { margin-block: 1.15rem 1.35rem; font-size: clamp(3.5rem, 6.35vw, 6rem); }
.hero h1 em { color: #476c54; }
.hero-intro { max-width: 35rem; font-size: clamp(1.04rem, 1.7vw, 1.27rem); color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: .68rem; margin-block-start: 1.8rem; }
.button { display: inline-flex; justify-content: space-between; align-items: center; gap: .8rem; min-height: 3.05rem; padding: .64rem .98rem; border: 1px solid transparent; border-radius: .45rem; font-size: .91rem; font-weight: 730; text-decoration: none; transition: background .16s, border-color .16s; }
.button-dark { background: var(--ink); color: #f6faeb; }
.button-dark:hover { background: #315347; }
.button-outline { border-color: #a8b3a7; }
.button-outline:hover { background: var(--tint); border-color: var(--muted); }
.hero-figure { overflow: hidden; border: 1px solid #37554a; border-radius: 1rem; background: var(--ink); color: #f5f6e9; box-shadow: 0 22px 55px #1b372b25; }
.figure-head, .hero-figure figcaption { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .9rem 1.05rem; color: #c3d4c5; font: 600 clamp(.56rem, 1vw, .69rem)/1.35 var(--mono); letter-spacing: .075em; }
.figure-head { border-bottom: 1px solid #3b584d; }
.hero-figure figcaption { justify-content: flex-start; border-top: 1px solid #3b584d; letter-spacing: .025em; }
.figure-light { width: .47rem; height: .47rem; border-radius: 50%; background: var(--accent); }
.orbit { position: relative; isolation: isolate; aspect-ratio: 400 / 290; background: radial-gradient(ellipse at center, #2c5347, var(--ink) 73%); }
.orbit-grid { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(#a4bea614 1px, transparent 1px), linear-gradient(90deg, #a4bea614 1px, transparent 1px); background-size: 1.4rem 1.4rem; mask-image: radial-gradient(ellipse at center, #000, transparent 90%); }
.orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit-core, .orbit-node { position: absolute; translate: -50% -50%; text-align: center; }
.orbit-core { inset-inline-start: 50%; inset-block-start: 50%; display: grid; gap: .14rem; }
.orbit-core strong { font: 400 clamp(1rem, 2.45vw, 2.2rem)/1 var(--serif); white-space: nowrap; }
.orbit-core > span { color: var(--accent); font: 600 clamp(.57rem, 1vw, .76rem)/1.25 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.orbit-node { width: max-content; max-width: 38%; padding: .32rem .43rem; border: 1px solid #658476; border-radius: .25rem; background: #203a32; color: #f3f8ec; font: 650 clamp(.52rem, .91vw, .76rem)/1.15 var(--mono); }
.node-top { inset-inline-start: 50%; inset-block-start: 14.2%; }
.node-right { inset-inline-start: 80%; inset-block-start: 50%; }
.node-bottom { inset-inline-start: 50%; inset-block-start: 85.8%; }
.node-left { inset-inline-start: 20%; inset-block-start: 50%; }

.client-strip { border-block: 1px solid var(--line); background: #eeeede; }
.client-inner { display: grid; grid-template-columns: .68fr .7fr 1.32fr .95fr; align-items: center; gap: 1.1rem; padding-block: 1.12rem; }
.client-inner > span:not(.eyebrow) { font: 400 clamp(1rem, 1.55vw, 1.35rem)/1.3 var(--serif); }
.client-inner small { display: block; color: var(--muted); font: .74rem/1.5 var(--sans); }
.client-inner .eyebrow { color: var(--muted); }

.section { padding-block: clamp(3.7rem, 7vw, 6.2rem); }
.section-heading { display: grid; grid-template-columns: 1.16fr 1fr; align-items: end; gap: 1.45rem; margin-block-end: 1.8rem; }
.section-heading p, .creative .eyebrow { color: var(--muted); }
h2 { margin-block-start: .6rem; font-size: clamp(2.6rem, 5vw, 4.5rem); }
.section-heading > p { max-width: 27rem; padding-block-end: .18rem; }
.case { border: 1px solid var(--line); border-radius: .85rem; background: var(--card); }
.case-lead { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(1.5rem, 4vw, 3.4rem); padding: clamp(1.25rem, 3.75vw, 3rem); }
.case-index { display: flex; align-items: center; gap: .62rem; color: #3e594c; font: 680 .73rem/1.35 var(--mono); letter-spacing: .07em; }
.case-index > span { padding-inline-start: .6rem; border-inline-start: 1px solid #bac8b6; }
.case h3 { margin-block: .78rem .95rem; font-size: clamp(1.92rem, 3.2vw, 3.2rem); }
.case p:not(.case-index) { color: var(--muted); }
.case p + p { margin-block-start: .7rem; }
.text-link { display: inline-flex; align-items: center; gap: .5rem; margin-block-start: 1rem; font-weight: 740; }
.text-link:hover { color: #527448; }
.case-visual { padding: .93rem; border: 1px solid #bacbb7; border-radius: .7rem; background: #e8eddd; }
.case-visual-label { display: flex; justify-content: space-between; gap: .5rem; margin: .28rem .13rem .76rem; color: #496252; font: 650 .68rem/1.35 var(--mono); letter-spacing: .065em; }
.case-step { display: flex; align-items: center; gap: .78rem; padding: .72rem .76rem; border: 1px solid #d3dbc9; border-radius: .44rem; background: #fbfbf3; }
.case-step + .case-step { margin-block-start: .46rem; }
.case-step > span { display: grid; place-items: center; flex: 0 0 1.98rem; height: 1.98rem; border-radius: .3rem; background: #d8e6be; color: #304b35; font: 690 .72rem/1 var(--mono); }
.case-step small { display: block; color: var(--muted); }
.case-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-block-start: .85rem; }
.compact-case { padding: clamp(1.25rem, 3.2vw, 2.35rem); }
.compact-case h3 { font-size: clamp(1.85rem, 2.8vw, 2.7rem); }
.case-tint { background: #e8eddd; }
.tags { display: flex; flex-wrap: wrap; gap: .42rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.tags li { padding: .26rem .56rem; border: 1px solid #bac9b6; border-radius: 10rem; color: #324f40; font-size: .77rem; font-weight: 660; }

.lab-section { background: #20382f; color: #f5f6e9; }
.lab-layout { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); gap: clamp(1.6rem, 6vw, 5rem); align-items: start; padding-block: clamp(3rem, 6vw, 5rem); }
.lab-copy .eyebrow, .contact-section .eyebrow { color: var(--accent); }
.lab-copy > p:not(.eyebrow) { margin-block-start: 1.1rem; color: #d2e0d3; }
.sample-note { max-width: 21rem; margin-block-start: 1.35rem; padding: .7rem .9rem; border-inline-start: 2px solid #bbce7d; background: #2d473b; color: #e0ebdc; font-size: .88rem; }
.sample-note strong { display: block; margin-block-end: .12rem; color: #f4f9e7; }
.lab { min-width: 0; padding: clamp(.85rem, 2.2vw, 1.55rem); border: 1px solid #98a997; border-radius: .86rem; background: #fbfaf2; color: var(--ink); box-shadow: 0 16px 34px #10271b65; }
.lab-top { display: flex; align-items: start; justify-content: space-between; gap: .6rem; margin-block-end: .82rem; }
.lab-top .eyebrow { color: var(--muted); }
.lab h3 { margin-block-start: .22rem; font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.05; letter-spacing: -.035em; }
.demo-badge { flex: 0 0 auto; padding: .28rem .52rem; border: 1px solid #c5d3bb; border-radius: 10rem; background: #e8efdb; color: #344f3a; font-size: .73rem; font-weight: 720; }
.filters { display: flex; flex-wrap: wrap; gap: .35rem; margin-block-end: .65rem; }
.filters button { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.2rem; padding: .35rem .63rem; border: 1px solid #bfcabb; border-radius: .35rem; background: transparent; color: var(--ink); cursor: pointer; font-size: .79rem; font-weight: 700; }
.filters button:hover { background: #e5edda; }
.filters button[aria-pressed='true'] { border-color: var(--ink); background: var(--ink); color: #fff; }
.filters span { font: .72rem var(--mono); }
.queue { min-height: 6.05rem; border: 1px solid #d7ddcd; border-radius: .4rem; }
.queue details + details { border-block-start: 1px solid #d7ddcd; }
.queue details:has(+ details[hidden]) { border-block-end: 0; }
.queue summary { display: grid; grid-template-columns: auto 1fr auto .6rem; align-items: center; gap: .55rem; min-height: 2.65rem; padding: .55rem .65rem; list-style: none; cursor: pointer; }
.queue summary::-webkit-details-marker { display: none; }
.queue summary:hover { background: #edf1e2; }
.queue summary::after { content: '+'; font-weight: 730; }
.queue details[open] > summary::after { content: '−'; }
.queue details[open] > summary { background: #e7eddb; }
.ticket { color: var(--muted); font: .72rem var(--mono); }
.issue { min-width: 0; font-size: .85rem; font-weight: 690; line-height: 1.25; }
.state { padding: .17rem .44rem; border-radius: 10rem; font: 680 .69rem/1.35 var(--sans); white-space: nowrap; }
.state-review { background: #f4e9c7; color: #654c17; }
.state-action { background: #e2e7fa; color: #374779; }
.state-closed { background: #deebd5; color: #315332; }
.ticket-detail { display: grid; gap: .27rem; padding: .64rem .78rem .78rem; color: var(--muted); font-size: .81rem; }
.ticket-detail strong { margin-inline-end: .2rem; color: var(--ink); }

.experience { padding-block-end: clamp(2rem, 5vw, 4rem); }
.experience-grid { display: grid; grid-template-columns: 1.4fr .84fr; gap: clamp(1.3rem, 4vw, 3rem); align-items: start; }
.history { border-block-end: 1px solid var(--line); }
.history-row { display: grid; grid-template-columns: 1.65rem minmax(0, 1fr) auto; gap: .75rem; align-items: start; padding-block: 1rem; border-block-start: 1px solid var(--line); }
.history-index, .history-label { color: var(--muted); font: 650 .72rem/1.5 var(--mono); }
.history-index { padding-block-start: .12rem; }
.history-label { padding-block-start: .2rem; text-align: end; }
.history h3, .credentials h3 { font-size: 1.06rem; line-height: 1.35; }
.history p { color: var(--muted); font-size: .89rem; }
.credentials { padding: 1.15rem; border-radius: .65rem; background: #e8eddd; }
.credentials ul { margin: .6rem 0 0; padding-inline-start: 1.1rem; color: #385145; font-size: .89rem; }
.credentials li + li { margin-block-start: .24rem; }
.creative { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; padding-block: 1.65rem clamp(2.9rem, 6vw, 4.7rem); border-block-start: 1px solid var(--line); }
.creative h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.creative-list { display: grid; align-content: center; gap: .6rem; }
.creative-list p { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; padding-block-end: .45rem; border-block-end: 1px solid var(--line); }
.creative-list p > span { color: var(--muted); font-size: .88rem; }

.contact-section { background: #20382f; color: #f5f6e9; }
.contact-layout { display: grid; grid-template-columns: 1.22fr .78fr; align-items: center; gap: clamp(1.3rem, 5vw, 3.7rem); padding-block: clamp(2.8rem, 6vw, 5rem); }
.contact-layout p:not(.eyebrow) { max-width: 31rem; margin-block-start: .85rem; color: #d2e0d3; }
.contact-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.button-accent { background: var(--accent); color: var(--ink); }
.button-accent:hover { background: #eff6ca; }
.button-light-outline { border-color: #92a99a; color: #f5f6e9; }
.button-light-outline:hover { background: #3c5b4d; }
.contact-address { width: 100%; overflow-wrap: anywhere; color: #e1e9da; font-size: .91rem; }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1rem; color: var(--muted); font-size: .8rem; }

.brief { max-width: 51rem; padding-block: 3.5rem; }
.brief h1 { margin-block: .45rem .35rem; font-size: clamp(3.2rem, 7vw, 5rem); }
.brief-intro { color: var(--muted); font-size: 1.11rem; }
.brief-section { margin-block-start: 1.5rem; padding-block-start: .9rem; border-block-start: 1px solid var(--line); }
.brief-section h2 { margin-block: 0 .7rem; font-size: 1.75rem; }
.brief-section article + article { margin-block-start: .8rem; }
.brief-section h3 { font-size: 1rem; }
.brief-section p { color: var(--muted); }

@media (max-width: 58rem) {
  .hero { gap: 1.65rem; }
  .hero h1 { font-size: clamp(2.9rem, 7vw, 4.3rem); }
  .orbit-node { font-size: clamp(.53rem, 1.05vw, .67rem); }
  .wide-break { display: none; }
}
@media (max-width: 45rem) {
  html { scroll-padding-block-start: 7rem; }
  .shell { width: calc(100% - 2rem); }
  .header-inner { flex-wrap: wrap; justify-content: space-between; gap: 0 .6rem; padding-block: .5rem .16rem; }
  nav { order: 2; flex-basis: 100%; gap: 1.2rem; }
  nav a { min-height: 2.3rem; }
  .hero, .section-heading, .case-lead, .case-pair, .lab-layout, .experience-grid, .creative, .contact-layout { grid-template-columns: 1fr; }
  .hero { padding-block: 2.75rem; }
  .hero h1 { font-size: clamp(3rem, 11vw, 4.4rem); }
  .hero-figure { width: min(100%, 32rem); }
  .orbit-core strong { font-size: clamp(1.28rem, 4vw, 2rem); }
  .orbit-node { font-size: clamp(.54rem, 2vw, .73rem); }
  .client-inner { grid-template-columns: 1fr 1fr; gap: .85rem; }
  .section-heading { gap: .65rem; }
  .history-row { grid-template-columns: 1.2rem minmax(0, 1fr); gap: .22rem .55rem; }
  .history-label { grid-column: 2; text-align: start; padding-block-start: 0; }
}
@media (max-width: 24rem) {
  .queue summary { gap: .35rem; padding-inline: .46rem; }
  .ticket { font-size: .65rem; }
  .state { font-size: .64rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}
@media print {
  body { background: white; color: #111; font-size: 10pt; }
  .site-header, .site-footer, .brief .actions, .skip-link { display: none; }
  .brief { width: auto; padding: 0; }
  .brief h1 { font-size: 30pt; }
  .brief-section { break-inside: avoid; }
}