/* The second layer of the design system: content pages and the conversation. */
.about { padding-block: clamp(72px,8vw,130px); display: grid; gap: 28px; align-items: start; }
.about > p { max-width: 780px; font-size: clamp(20px,1.75vw,26px); line-height: 1.5; letter-spacing: -.01em; }
.services { padding-block: 30px clamp(75px,7vw,110px); scroll-margin-top: 40px; }
.practice-atlas { position: relative; display: grid; grid-template-columns: 1fr .9fr 1fr; column-gap: clamp(32px,4vw,65px); row-gap: clamp(35px,4vw,60px); align-items: start; margin-top: 45px; }
.practice-domain { min-width: 0; max-width: 340px; color: #000; }
.practice-domain h3 { font-size: clamp(26px,2.45vw,38px); line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; }
.practice-domain p { font-size: clamp(15px,1.15vw,17px); line-height: 1.55; letter-spacing: -.005em; margin-top: 15px; max-width: 285px; color: var(--ink); }
.practice-domain-1 { grid-column: 1; grid-row: 1; }
.practice-domain-2 { grid-column: 3; grid-row: 1; justify-self: end; }
.practice-domain-3 { grid-column: 1; grid-row: 2; align-self: end; }
.practice-domain-4 { grid-column: 3; grid-row: 2; align-self: end; justify-self: end; }
.practice-domain-5 { grid-column: 2; grid-row: 3; text-align: left; justify-self: center; width: 100%; max-width: 285px; }
.practice-domain-5 p { max-width: 100%; }
.practice-cta { grid-column: 2; grid-row: 4; justify-self: center; }
.practice-mark { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: center; width: 100%; max-width: 330px; aspect-ratio: var(--mark-ratio); pointer-events: none; }
.practice-mark svg { width: 100%; height: 100%; }
.practice-ink { fill: var(--ink); }
.practice-paper { fill: var(--paper); }
.practice-drafting { fill: none; stroke: #7f896e; stroke-width: 3; }
.practice-contour { fill: none; stroke: var(--ink); stroke-width: 5; }
@media (max-width:900px) {
  .services h2 { max-width: calc(100% - 115px); }
  .practice-atlas { grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 22px; row-gap: 34px; margin-top: 40px; }
  .practice-mark { position: absolute; right: 0; top: -105px; width: 85px; max-width: none; }
  .practice-drafting { stroke-width: 10; }
  .practice-contour { stroke-width: 12; }
  .practice-domain h3 { font-size: clamp(21px,2.9vw,26px); }
  .practice-domain p { font-size: 14px; margin-top: 12px; }
  .practice-domain-1 { grid-column: 1; grid-row: 1; }
  .practice-domain-2 { grid-column: 2; grid-row: 1; }
  .practice-domain-3 { grid-column: 1; grid-row: 2; align-self: start; }
  .practice-domain-4 { grid-column: 2; grid-row: 2; align-self: start; }
  .practice-domain-5 { grid-column: 1 / -1; grid-row: 3; max-width: 270px; }
  .practice-cta { grid-column: 1 / -1; grid-row: 4; }
}
.contact-start { margin-top: 44px; }
.contact-start[aria-expanded="true"] { display: none; }
.contact-start[hidden],.contact-conversation[hidden],.conversation-complete[hidden],.conversation-back[hidden] { display: none; }
.contact-conversation { --secondary: #6b6d63; --soft: #e9e7de; max-width: 780px; margin-top: 45px; background: var(--paper); color: var(--ink); padding: clamp(22px,4vw,48px); border-radius: 10px; }
.conversation-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 32px; }
.conversation-header > span { font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.conversation-header button,.conversation-back { border: 0; padding: 10px 0; min-height: 44px; background: none; font: inherit; font-size: 12px; color: var(--secondary); cursor: pointer; }
.conversation-header button { min-width: 4cm; margin-left: auto; }
.conversation-header button:hover,.conversation-back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.conversation-history { padding: 0; margin: 0; list-style: none; display: grid; gap: 18px; }
.conversation-history li { max-width: 90%; width: fit-content; font-size: 17px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.conversation-history .visitor-answer { justify-self: end; background: #e4e7dc; border-radius: 8px; padding: 12px 18px; }
.conversation-history .studio-question { padding-block: 6px; }
#conversation-form { margin-top: 28px; }
#conversation-answer { display: block; width: 100%; resize: vertical; min-height: 56px; background: transparent; border: 1px solid #7b8272; color: var(--ink); padding: 16px; border-radius: 8px; font: inherit; font-size: 17px; line-height: 1.5; }
#conversation-answer:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#conversation-answer::placeholder { color: var(--secondary); }
.conversation-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center; margin-top: 16px; }
.conversation-actions .action-label { margin-left: auto; }
.conversation-error { min-height: 24px; font-size: 13px; color: #923c2c; padding-top: 7px; }
.conversation-complete { padding-top: 24px; }
.conversation-complete > p { font-size: 22px; }
.conversation-complete .action-label { margin-top: 24px; }
.contact-conversation .action-label:hover { background: var(--ink); color: var(--paper); }
.contact-conversation :focus-visible { outline-color: var(--ink); }
.tone-ready .contact-conversation :focus-visible { outline-color: var(--ink); }
.contact-start:hover { color: var(--page-background,var(--paper)); background: var(--page-foreground,var(--ink)); }
button:disabled { opacity: .55; cursor: wait; }

/* Project pages share the typography and small-radius image treatment. */
.case-page .navigation { position: relative; top: auto; padding-top: 27px; }
.case-main { padding-top: 96px; }
.case-heading { padding-bottom: 64px; }
.case-heading-empty { padding-bottom: 0; }
.case-project-logo { width: min(100%,560px); margin-inline: auto; overflow: hidden; border-radius: 8px; background: white; }
.case-project-logo img { display: block; width: 100%; height: auto; }
.case-cover,.case-image { overflow: hidden; border-radius: 8px; background: white; }
.case-cover img,.case-image img { display: block; width: 100%; height: auto; }
.case-description { display: grid; grid-template-columns: 1fr 1.1fr; gap: 10%; padding-block: clamp(60px,8vw,110px); }
.case-description h2 { max-width: 430px; }
.case-description p { font-size: 16px; line-height: 1.7; max-width: 600px; }
.case-description p + p { margin-top: 22px; }
.case-gallery { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 32px; align-items: center; }
.case-cover + .case-gallery { margin-top: 32px; }
.case-image-compact { grid-column: span 5; }
.case-image-companion { grid-column: 1 / -1; max-width: 800px; width: 100%; justify-self: center; }
.case-image-wide { grid-column: 1/-1; }
.case-return { text-align: center; padding-block: 75px; }
.case-year { margin-left: auto; }
@media (min-width:761px) { .contact.is-conversing h2 { font-size: clamp(44px,6vw,88px); } }
@media (min-width:761px) and (max-width:1000px) { .design-collection { gap: 24px; } .project-caption h3 { font-size: 22px; } .project-caption p { font-size: 14px; } }
@media (max-width:760px) {
  .about { grid-template-columns: 1fr; gap: 25px; padding-block: 70px; }
  .about > p { font-size: 20px; }
  .contact { padding-top: 90px; background: linear-gradient(to bottom,var(--ink),var(--paper) 90px,var(--paper)); }
  .contact-conversation { padding: 22px; }
  .conversation-history li { font-size: 15px; max-width: 95%; }
  .conversation-actions { gap: 14px; }
  .conversation-back { font-size: 11px; }
  .case-page .navigation { padding-top: 16px; }
  .case-main { padding-top: 65px; }
  .case-heading { padding-bottom: 35px; }
  .case-heading-empty { padding-bottom: 0; }
  .case-description { grid-template-columns: 1fr; gap: 26px; padding-block: 45px; }
  .case-description p { font-size: 15px; }
  .case-gallery { grid-template-columns: 1fr; gap: 20px; }
  .case-cover + .case-gallery { margin-top: 20px; }
  .case-image { grid-column: 1; }
  .case-return { padding-block: 50px; }
}

/* Engineering cases: actual workflow, native text, and project-specific detail. */
.system-intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10%; align-items: end; padding-block: 96px 76px; }
.system-category { color: var(--secondary); font-size: 12px; line-height: 1.5; margin-bottom: 20px; }
.system-intro h1 { font-size: clamp(58px,7.4vw,112px); line-height: 1.04; letter-spacing: var(--heading-tracking); }
.system-opening { max-width: 410px; }
.system-opening > p { font-size: 16px; line-height: 1.65; }
.system-opening .system-statement { font-size: clamp(22px,2.25vw,32px); line-height: 1.2; letter-spacing: -.025em; margin-bottom: 20px; }
.system-drawing { background: var(--ink); color: var(--paper); padding-block: clamp(48px,5vw,78px); }
.system-drawing h2 { color: inherit; }
.system-flow { margin-top: 24px; }
.system-graph { position: relative; padding: 24px 32px; }
.system-nodes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(106px,auto)); gap: 46px 35px; align-items: center; }
.system-node { grid-column: var(--node-column); grid-row: var(--node-row); position: relative; min-width: 0; min-height: 100px; padding: 17px 12px; display: flex; flex-direction: column; justify-content: center; gap: 10px; background: var(--ink); border: 1px solid #79856b; border-radius: 8px; }
.system-node > span { font-size: clamp(15px,1.27vw,19px); letter-spacing: -.025em; line-height: 1.18; }
.system-node > small { font-size: 11px; line-height: 1.45; color: #b8c0ab; }
.system-node.is-core { background: var(--sage); color: var(--ink); border-color: var(--sage); }
.system-node.is-core > small { color: #444d38; }
.system-node.is-support { border-style: dashed; }
.system-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.system-connections > path { fill: none; stroke: #aab59a; stroke-width: 1.15; vector-effect: non-scaling-stroke; }
.system-connections > .is-feedback { stroke-dasharray: 3 5; }
#system-arrow path { fill: none; stroke: #aab59a; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.system-flow > figcaption { max-width: 680px; color: #b8c0ab; font-size: 13px; line-height: 1.65; padding-top: 20px; }
.system-pulse { offset-distance: 0%; offset-rotate: 0deg; offset-anchor: 0px 0px; opacity: 0; animation: system-pulse 5s linear infinite; animation-delay: var(--edge-delay); animation-play-state: paused; }
.system-point { fill: #e3ead8; }
.system-halo { fill: #dce6cd; opacity: .2; filter: blur(1.3px); }
.system-moving .system-flow.is-live .system-pulse { animation-play-state: running; }
@keyframes system-pulse { 0% { offset-distance: 0%; opacity: 0; } 2% { opacity: .9; } 25% { offset-distance: 100%; opacity: .9; } 27%,100% { offset-distance: 100%; opacity: 0; } }
.system-description { display: grid; grid-template-columns: 1fr 1.1fr; gap: 10%; padding-block: clamp(60px,8vw,110px) 60px; }
.system-description h2 { max-width: 420px; }
.system-description p { max-width: 600px; font-size: 16px; line-height: 1.7; }
.system-description p + p { margin-top: 22px; }
.system-features { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7%; padding-bottom: 100px; }
.system-features article { padding-top: 22px; border-top: 1px solid #b9bdb0; }
.system-index { display: block; font-size: 11px; color: var(--secondary); margin-bottom: 25px; }
.system-features h3 { font-size: clamp(22px,2vw,28px); line-height: 1.2; letter-spacing: -.025em; margin-bottom: 17px; }
.system-features p { font-size: 15px; line-height: 1.65; }
.system-detail { display: grid; grid-template-columns: 1fr 1.1fr; gap: 10%; padding-block: 70px; border-top: 1px solid #b9bdb0; }
.system-detail > div > p { font-size: 16px; line-height: 1.7; max-width: 430px; margin-top: 26px; }
.system-boundaries { list-style: none; padding: 0; }
.system-boundaries li { position: relative; padding: 18px 0 18px 45px; border-bottom: 1px solid #c5c8bd; }
.system-boundaries .system-index { position: absolute; left: 0; top: 22px; margin: 0; }
.system-boundaries h3 { font-size: 23px; letter-spacing: -.02em; margin-bottom: 8px; }
.system-boundaries p { font-size: 14px; line-height: 1.5; color: var(--secondary); }
.system-chart-label { font-size: 12px; line-height: 1.5; color: var(--secondary); margin-bottom: 20px; }
.system-detail .system-access > .system-chart-label { font-size: 12px; margin-top: 0; }
.system-access table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.45; }
.system-access th,.system-access td { text-align: left; padding: 18px 12px 18px 0; border-bottom: 1px solid #c5c8bd; font-weight: 400; vertical-align: top; }
.system-access thead th { color: var(--secondary); font-size: 12px; }
.system-access tbody th { width: 45%; }
.system-access .access-excluded { color: #6b6d63; }
.system-decay svg { display: block; width: 100%; height: auto; overflow: visible; }
.decay-grid path { fill: none; stroke: #c5c8bd; stroke-width: 1; vector-effect: non-scaling-stroke; }
.decay-line { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.decay-points { fill: var(--ink); }
.decay-labels { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 1.5; }
.decay-labels > span { flex: 1; }
.decay-labels > span:nth-child(2) { text-align: center; }
.decay-labels > span:last-child { text-align: right; }
.decay-labels strong { display: block; font-weight: 400; font-size: 19px; margin-top: 6px; }
.system-formula { font-size: 13px; line-height: 1.5; margin-top: 30px; color: var(--secondary); }
.system-reference { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-block: 55px; border-top: 1px solid #b9bdb0; }
.system-reference h2 { font-size: 26px; line-height: 1.2; letter-spacing: -.025em; }
.system-reference p { font-size: 14px; line-height: 1.5; margin-top: 13px; color: var(--secondary); }
.system-case-links { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding-block: 30px 70px; }
.system-case-links > div { display: flex; align-items: center; gap: 26px; }
.system-case-links span { font-size: 14px; }
.system-case .system-motion { margin-left: auto; border: 0; background: none; font: inherit; color: inherit; padding: 0; min-height: 44px; cursor: pointer; }
.system-case .system-motion[hidden] { display: none; }
.system-case .case-year { margin-left: 0; }
.system-motion:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
@media (max-width:1000px) {
  .system-nodes { grid-template-columns: 1fr; grid-template-rows: none; gap: 26px; }
  .system-node { grid-column: 1; grid-row: auto; min-height: 92px; padding: 17px 20px; }
  .system-node > span { font-size: 20px; }
  .system-node > small { font-size: 12px; }
  .system-graph { padding-inline: 32px 0; }
  .system-flow { max-width: 680px; margin-inline: auto; }
}
@media (max-width:760px) {
  .system-intro { grid-template-columns: 1fr; gap: 35px; padding-block: 65px 50px; }
  .system-intro h1 { font-size: clamp(40px,11.5vw,80px); }
  .system-category { font-size: 11px; margin-bottom: 18px; }
  .system-opening > p { font-size: 15px; }
  .system-opening .system-statement { font-size: 23px; }
  .system-description,.system-detail { grid-template-columns: 1fr; gap: 30px; }
  .system-description { padding-block: 60px 48px; }
  .system-description p,.system-detail > div > p { font-size: 15px; }
  .system-features { grid-template-columns: 1fr; gap: 30px; padding-bottom: 55px; }
  .system-index { margin-bottom: 15px; }
  .system-detail { padding-block: 50px; }
  .system-access table { font-size: 12px; }
  .system-access th,.system-access td { padding-right: 8px; }
  .system-access tbody th { width: 42%; }
  .system-reference { flex-direction: column; align-items: start; gap: 25px; padding-block: 40px; }
  .system-case-links { align-items: start; padding-block: 20px 40px; }
  .system-case-links > div { flex-direction: column; align-items: end; gap: 18px; }
  .system-case-links span { max-width: 151px; text-align: right; font-size: 12px; }
  .system-case-links { flex-wrap: wrap; }
  .system-case-links > div { margin-left: auto; }
}
@media (prefers-reduced-motion:reduce) { .system-pulse { display: none; } }