/* Portfolio pages share the existing VoiceIP tokens and base controls. */
.portfolio-heading { padding-block: var(--space-16) var(--space-12); }
.portfolio-heading h1 { font-size: var(--text-page); max-width: 19ch; }
.portfolio-lead { font-size: var(--text-md); max-width: 58ch; margin-top: var(--space-6); }
.portfolio-hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: var(--space-12); padding-block: var(--space-16) var(--space-20); }
.portfolio-hero-copy .project-signature { display: inline-block; font-size: var(--text-xs); }
.portfolio-hero h1 { font-size: clamp(2.65rem,5.1vw,4.8rem); max-width: 13ch; }
.portfolio-hero h1 span { color: var(--accent); }
.portfolio-hero .actions { justify-content: start; margin-top: var(--space-8); }
.hero-caption { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--text-dim); }
.voice-architecture { border: var(--stroke) solid var(--border); padding: var(--space-8); border-radius: var(--radius-lg); background: radial-gradient(ellipse at center,var(--accent-soft),var(--surface-raised) 75%); }
.architecture-label { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-dim); letter-spacing: .08em; margin-bottom: var(--space-8); }
.architecture-input { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-2); text-align: center; }
.architecture-input span { padding: var(--space-3) var(--space-1); background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.architecture-connector { width: var(--stroke); height: var(--space-8); background: var(--accent); opacity: .6; margin-inline: auto; }
.architecture-core { text-align: center; padding: var(--space-6); border: var(--stroke) solid var(--accent); border-radius: var(--radius-md); background: var(--surface); }
.architecture-core strong { font-size: 2.8rem; letter-spacing: -.06em; font-weight: 600; }
.architecture-core strong span { color: var(--accent); }.architecture-core p { font-size: var(--text-sm); }
.architecture-wave { display: flex; justify-content: center; align-items: center; gap: var(--space-1); height: var(--space-8); margin-bottom: var(--space-3); }
.architecture-wave i { width: .2rem; height: 30%; border-radius: var(--radius-pill); background: var(--accent); }
.architecture-wave i:nth-child(3n) { height: 70%; }.architecture-wave i:nth-child(4n) { height: 100%; }.architecture-wave i:nth-child(5n) { height: 50%; }
.architecture-output { display: flex; flex-direction: column; text-align: center; border: var(--stroke) solid var(--border); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--text-sm); }
.architecture-output span { color: var(--text-dim); font-size: var(--text-xs); }.architecture-options { display: flex; justify-content: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-6); }.architecture-options b { color: var(--accent); }
.scope-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-6); border-block: var(--stroke) solid var(--border); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); }.scope-strip > :first-child { font-family: var(--font-sans); color: var(--text-dim); }
.home-service-grid,.service-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-6); }.home-service-grid,.service-grid--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.service-card { position: relative; padding: var(--space-6) 0; border-top: var(--stroke) solid var(--border); display: flex; flex-direction: column; align-items: start; }
.service-card h3 { width: 100%; font-size: var(--text-lg); letter-spacing: -.025em; line-height: 1.3; margin-block: var(--space-4); }.service-card h3 a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }.service-card h3 a span { font-size: var(--text-base); color: var(--accent); }.service-card h3 a::after { content: ''; position: absolute; inset: 0; }.service-card:focus-within { outline: var(--focus-stroke) solid var(--accent); outline-offset: var(--focus-offset); }.service-card p { font-size: var(--text-sm); max-width: 47ch; }.service-number { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim); }.service-modes { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-5); margin-top: auto; }.service-modes span { background: var(--surface-high); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); color: var(--text-muted); font-size: var(--text-xs); }.service-card:hover h3 { color: var(--accent); }.all-services-link { margin-top: var(--space-6); color: var(--accent); }
.deployment-section { background: var(--surface-raised); border-block: var(--stroke) solid var(--border); }.deployment-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-8); }.deployment-choice-grid article { padding: var(--space-8); background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--radius-md); }.deployment-choice-grid h3 { margin-bottom: var(--space-5); }.deployment-choice-grid p { font-size: var(--text-sm); }.deployment-choice-grid ul { padding-left: var(--space-5); margin-block: var(--space-5); color: var(--text-muted); font-size: var(--text-sm); }.deployment-choice-grid li + li { margin-top: var(--space-2); }.deployment-choice-grid article:nth-child(2) { border-color: var(--accent); }.deployment-choice-grid .text-link { color: var(--accent); }
.technical-note { font-size: var(--text-sm); margin-block: var(--space-6); max-width: 100ch; }
.group-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); }.group-section > div > p { margin-block: var(--space-6); max-width: 48ch; }.competency-list > div { display: grid; grid-template-columns: var(--space-8) 1fr; gap: var(--space-2) var(--space-4); border-bottom: var(--stroke) solid var(--border); padding-block: var(--space-5); }.competency-list > div:first-child { padding-top: 0; }.competency-list span { font-size: var(--text-xs); color: var(--accent); }.competency-list h3 { font-size: var(--text-lg); letter-spacing: -.02em; }.competency-list p { grid-column: 2; font-size: var(--text-sm); }
.demo-section { padding-block: var(--space-8); }.demo-section .conversation-shell { margin-top: var(--space-8); }
.industry-tags { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-4); }.industry-tags a { border-bottom: var(--stroke) solid var(--border); padding-block: var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }.industry-tags span { color: var(--accent); }
.integration-preview { padding: var(--space-10); border: var(--stroke) solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); }.integration-preview > div { display: flex; align-items: end; justify-content: space-between; gap: var(--space-8); }.integration-preview h2 { max-width: 20ch; font-size: var(--text-h3); }.integration-preview ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-6); list-style: none; margin: var(--space-8) 0 0; padding: 0; }.integration-preview li { border-top: var(--stroke) solid var(--border); padding-top: var(--space-5); font-size: var(--text-sm); }.integration-preview li span { display: block; color: var(--accent); font-family: var(--font-mono); font-size: var(--text-xs); margin-bottom: var(--space-2); }
.portfolio-cta { border-top: var(--stroke) solid var(--border); padding-block: var(--space-16); margin-bottom: var(--space-10); }.portfolio-cta h2 { max-width: 24ch; }.portfolio-cta p { max-width: 60ch; margin-block: var(--space-6); }
.catalog-intro { border-block: var(--stroke) solid var(--border); padding-block: var(--space-4); margin-top: var(--space-10); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); color: var(--text-muted); font-size: var(--text-sm); }.catalog-intro a { color: var(--accent); }
.catalog-layout { display: grid; grid-template-columns: 12rem minmax(0,1fr); gap: var(--space-12); }.catalog-nav { position: sticky; top: var(--space-8); align-self: start; display: flex; flex-direction: column; gap: var(--space-2); }.catalog-nav a { padding-block: var(--space-3); border-bottom: var(--stroke) solid var(--border); font-size: var(--text-sm); }.catalog-group { padding-bottom: var(--space-12); scroll-margin-top: var(--space-8); }.catalog-group-heading { margin-bottom: var(--space-8); }.catalog-group-heading h2 { font-size: var(--text-h3); margin-bottom: var(--space-4); }.catalog-group-heading .eyebrow { color: var(--accent); margin-bottom: var(--space-3); }.catalog-group-heading p { font-size: var(--text-sm); }
.example-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-8); }.example-grid h3 { font-size: var(--text-lg); margin-bottom: var(--space-4); }.example-grid p { font-size: var(--text-sm); }
.use-cases { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; margin: var(--space-8) 0 0; }.use-cases li { font-size: var(--text-sm); border-left: var(--stroke) solid var(--accent); padding-inline: var(--space-3); color: var(--text-muted); }
.deployment-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-6); align-items: start; }.deployment-card { border: var(--stroke) solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); overflow: hidden; }.deployment-top { padding: var(--space-8); background: var(--surface-high); }.deployment-top .eyebrow { color: var(--accent); }.deployment-top p { font-size: var(--text-sm); margin-top: var(--space-5); }.deployment-body { padding: var(--space-8); }.deployment-body h4 { font-size: var(--text-base); margin: 0 0 var(--space-4); font-weight: 600; }.implementation-steps { padding-left: var(--space-5); margin: 0 0 var(--space-6); color: var(--text-muted); font-size: var(--text-sm); }.implementation-steps li + li { margin-top: var(--space-3); }.implementation-steps li::marker { color: var(--accent); }.deployment-facts { margin: 0; }.deployment-facts > div { border-top: var(--stroke) solid var(--border); padding-block: var(--space-5); }.deployment-facts dt { font-size: var(--text-xs); color: var(--text); font-weight: 650; letter-spacing: .04em; }.deployment-facts dd { color: var(--text-muted); font-size: var(--text-sm); margin: var(--space-2) 0 0; overflow-wrap: anywhere; }.deployment-body .button { margin-top: var(--space-4); }
.acceptance-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }.acceptance-list { list-style: none; padding: 0; margin: 0; }.acceptance-list li { display: grid; grid-template-columns: var(--space-8) 1fr; gap: var(--space-5); padding-block: var(--space-5); border-bottom: var(--stroke) solid var(--border); }.acceptance-list li:first-child { padding-top: 0; }.acceptance-list span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); }.acceptance-list p { font-size: var(--text-sm); }
.decision-band { display: flex; gap: var(--space-8); align-items: center; justify-content: space-between; padding: var(--space-8); background: var(--accent-soft); border-radius: var(--radius-md); }.decision-band h2 { font-size: var(--text-h3); }.decision-band p { max-width: 60ch; margin-top: var(--space-4); font-size: var(--text-sm); }.decision-band .button { flex-shrink: 0; }
.comparison { border: var(--stroke) solid var(--border); border-radius: var(--radius-md); overflow: hidden; }.comparison-row { display: grid; grid-template-columns: .65fr 1fr 1fr; border-bottom: var(--stroke) solid var(--border); }.comparison-row:last-child { border-bottom: 0; }.comparison-row > * { padding: var(--space-6); margin: 0; font-size: var(--text-sm); }.comparison-row > :not(:first-child) { border-left: var(--stroke) solid var(--border); }.comparison-row h3 { font-size: var(--text-base); line-height: 1.5; letter-spacing: 0; }.comparison-header { background: var(--surface-high); }.comparison-header > * { font-weight: 600; color: var(--text); }.comparison-mobile-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }.comparison-row:nth-child(even) { background: var(--surface-raised); }
.guide-section { padding-bottom: var(--space-16); }.guide-section > h2 { margin-bottom: var(--space-8); }.guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-8); }.guide-panel { padding: var(--space-8); border: var(--stroke) solid var(--border); border-radius: var(--radius-md); }.guide-panel h3 { font-size: var(--text-lg); margin-bottom: var(--space-4); }.guide-panel p,.guide-panel li { font-size: var(--text-sm); color: var(--text-muted); }.guide-panel ul { padding-left: var(--space-5); margin-bottom: 0; }.guide-panel li + li { margin-top: var(--space-3); }.guide-callout { padding: var(--space-6); border-left: var(--focus-stroke) solid var(--accent); background: var(--surface-raised); margin-top: var(--space-6); font-size: var(--text-sm); }
.deployment-choice-grid h2 { font-size: var(--text-h3); margin-bottom: var(--space-5); }
.guide-section .sources-title { font-size: var(--text-lg); }
.source-links { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); list-style: none; padding: 0; margin: 0; font-size: var(--text-sm); color: var(--accent); }
.industry-row { display: grid; grid-template-columns: .65fr 1fr 1fr; gap: var(--space-8); padding-block: var(--space-10); border-top: var(--stroke) solid var(--border); }.industry-row h2 { font-size: var(--text-h3); }.industry-row h3 { font-size: var(--text-base); letter-spacing: 0; margin-bottom: var(--space-3); }.industry-row p { font-size: var(--text-sm); }.industry-row a { margin-top: var(--space-4); color: var(--accent); }
@media (max-width:64rem) { .portfolio-hero { gap: var(--space-8); }.voice-architecture { padding: var(--space-6); }.home-service-grid,.service-grid--three { grid-template-columns: repeat(2,minmax(0,1fr)); }.group-section { gap: var(--space-10); }.catalog-layout { grid-template-columns: 10rem minmax(0,1fr); gap: var(--space-8); }.catalog-layout .service-grid { gap: var(--space-5); }.deployment-top,.deployment-body { padding: var(--space-6); }.comparison-row > * { padding: var(--space-5); } }
@media (max-width:48rem) { .portfolio-heading { padding-top: var(--space-10); }.portfolio-hero { grid-template-columns: 1fr; padding-block: var(--space-10) var(--space-12); gap: var(--space-10); }.portfolio-hero h1 { font-size: clamp(2.65rem,10vw,4.3rem); max-width: 16ch; }.portfolio-lead { font-size: var(--text-base); }.architecture-label { margin-bottom: var(--space-5); }.voice-architecture { padding: var(--space-5); }.scope-strip { gap: var(--space-4); justify-content: start; }.scope-strip > :first-child { width: 100%; }.home-service-grid,.service-grid,.service-grid--three,.deployment-choice-grid,.group-section,.deployment-grid,.acceptance-section,.guide-grid { grid-template-columns: 1fr; }.home-service-grid,.service-grid { gap: 0; }.service-card { padding-block: var(--space-5); }.service-card h3 { margin-block: var(--space-3); }.service-modes { padding-top: var(--space-4); }.deployment-choice-grid article { padding: var(--space-6); }.industry-tags { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); font-size: var(--text-sm); }.integration-preview { padding: var(--space-6); }.integration-preview > div { display: block; }.integration-preview .text-link { margin-top: var(--space-4); }.integration-preview ol { grid-template-columns: 1fr 1fr; }.catalog-intro { align-items: start; flex-direction: column; }.catalog-layout { display: block; }.catalog-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-10); }.catalog-nav a { padding-block: var(--space-3); }.catalog-group-heading { margin-bottom: var(--space-5); }.example-grid { grid-template-columns: 1fr; gap: var(--space-8); }.example-grid article { border-top: var(--stroke) solid var(--border); padding-top: var(--space-5); }.use-cases { gap: var(--space-4); }.acceptance-section { gap: var(--space-8); }.decision-band { flex-direction: column; align-items: start; padding: var(--space-6); }.comparison-header { display: none; }.comparison-row { grid-template-columns: 1fr; }.comparison-row > :not(:first-child) { border-left: 0; }.comparison-row h3 { padding-bottom: 0; }.comparison-mobile-label { display: block; position: static; width: auto; height: auto; overflow: visible; clip: auto; color: var(--accent); font-size: var(--text-xs); font-weight: 600; margin-bottom: var(--space-2); }.comparison-row > p { padding-block: var(--space-4); }.comparison-row > p:last-child { padding-top: 0; padding-bottom: var(--space-6); }.guide-panel { padding: var(--space-6); }.industry-row { grid-template-columns: 1fr; gap: var(--space-5); }.portfolio-cta { padding-block: var(--space-10); } }

@supports (grid-template-rows: subgrid) {
  @media (min-width: 49rem) {
    .deployment-grid { row-gap: 0; }
    .deployment-card { display: grid; grid-row: span 7; grid-template-rows: subgrid; align-self: stretch; }
    .deployment-body, .deployment-facts { display: contents; }
    .implementation { margin: var(--space-8) var(--space-8) 0; }
    .deployment-facts > div { margin-inline: var(--space-8); }
    .deployment-body > .button { justify-self: start; align-self: start; margin: var(--space-4) var(--space-8) var(--space-8); }
  }
}