/* iRoll — editorial design, readable content, progressive motion. */
:root {
  --paper: #eeeae2;
  --ink: #22251f;
  --muted: #54594e;
  --green: #c6f56b;
  --sage: #dce2d1;
  --line: #b8beae;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Arial, Helvetica, sans-serif;
  --page-gutter: clamp(1.25rem, 5vw, 5rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1,h2,h3,h4,p { margin: 0; }
h1,h2,h3,h4 { text-wrap: balance; }
p { text-wrap: pretty; }
h1,h2 { font-weight: 400; line-height: 1.07; letter-spacing: -.055em; }
h2 { font-size: clamp(2.4rem, 4.4vw, 4.5rem); }
h3,h4 { font-weight: 500; line-height: 1.25; letter-spacing: -.035em; }
em { font-family: var(--serif); font-weight: 400; letter-spacing: -.055em; }
strong { font-weight: 600; }
[hidden] { display: none !important; }
::selection { background: var(--green); color: var(--ink); }
:focus-visible { outline: 3px solid #4a682d; outline-offset: 5px; }
.contact :focus-visible,.flow-section :focus-visible { outline-color: var(--green); }
a,button,summary { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 15px 20px; background: var(--green); z-index: 100; }
.skip-link:focus { top: 15px; }
.section-shell { padding: clamp(4rem, 7vw, 7rem) max(var(--page-gutter), calc((100vw - 1280px) / 2)); }
.content-shell { padding-inline: max(var(--page-gutter), calc((100vw - 1280px) / 2)); }
.section-meta { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: 3rem; font-size: .75rem; letter-spacing: .09em; line-height: 1.6; }
.eyebrow { display: inline-block; font-size: .75rem; font-weight: 500; letter-spacing: .09em; line-height: 1.6; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; margin-bottom: 3.5rem; }
.section-heading > p,.heading-copy { max-width: 360px; flex: 0 1 360px; color: var(--muted); }
.heading-copy p { line-height: 1.7; }
.section-heading h2 { flex: 1 1 650px; }
.text-link { display: inline-flex; align-items: center; gap: 1.5rem; min-height: 44px; border-bottom: 1px solid #727e61; font-size: .9375rem; font-weight: 500; line-height: 1.4; padding: .45rem 0; }
.text-link:hover { color: #3e5924; border-color: currentColor; }
.text-link span { transition: transform .25s; }
.text-link:hover span { transform: translate(3px, -3px); }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1rem 1.5rem; min-height: 56px; border-radius: 40px; background: var(--green); color: var(--ink); font-size: 1rem; font-weight: 500; line-height: 1.4; transition: transform .25s, background .25s; }
.button span { font-size: 1.5rem; }
.button:hover { transform: translateY(-3px); background: #d6ff8d; }
.dark-button { color: var(--paper); background: var(--ink); }
.dark-button:hover { background: #414c34; }

/* Navigation: large targets, mobile disclosure, no hidden content without JS. */
.scroll-progress { position: fixed; inset: 0 auto auto 0; width: 100%; height: 3px; z-index: 70; background: #536d34; transform: scaleX(0); transform-origin: left; }
.nav { height: 88px; padding-inline: var(--page-gutter); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; }
.logo { font-size: 2.5rem; font-weight: 700; letter-spacing: -.065em; line-height: 1; display: inline-block; position: relative; padding-bottom: 15px; flex-shrink: 0; }
.logo-star { color: #526c35; font-weight: 400; margin-left: 3px; display: inline-block; }
.logo-star { width: .82em; height: .82em; fill: none; stroke: currentColor; stroke-width: 1.6; vertical-align: .015em; }
.logo small { position: absolute; bottom: 0; left: 2px; font: .5625rem/1 var(--sans); letter-spacing: .2em; }
.nav-links { display: flex; gap: clamp(.75rem, 2vw, 2rem); }
.nav-links a { display: flex; align-items: center; min-height: 44px; font-size: .9375rem; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: 4px; left: 0; width: 0; height: 1px; background: currentColor; transition: width .25s; }
.nav-links a:hover::after,.nav-links a[aria-current]::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 1.75rem; padding: .65rem 1.15rem; min-height: 44px; border: 1px solid #7b836f; border-radius: 30px; font-size: .9375rem; white-space: nowrap; }
.nav-cta:hover { background: var(--green); }
.menu-toggle { display: none; }

/* Hero */
.hero { padding: 2.4rem var(--page-gutter) 0; overflow: hidden; }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.availability { font-size: .8125rem; display: flex; align-items: center; gap: 9px; }
.availability i,.art-label i,.status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #526c35; flex-shrink: 0; }
.hero h1 { font-size: clamp(3rem, 8.4vw, 8.7rem); letter-spacing: -.075em; line-height: 1.02; margin: 2.8rem 0 2rem; }
.title-line { display: block; }
.title-line:nth-child(2) { padding-left: 11%; }
.title-spark { display: inline-block; vertical-align: middle; font-size: .65em; margin-left: 3%; color: #526c35; }
.hero-bottom { padding-left: 11%; display: flex; align-items: center; justify-content: space-between; gap: 3rem; position: relative; z-index: 2; }
.hero-copy { max-width: 570px; }
.hero-copy p { font-size: 1.125rem; line-height: 1.65; color: var(--muted); }
.hero-copy strong { color: var(--ink); font-weight: 400; }
.hero-byline { display: inline-block; margin-top: .8rem; font-size: .8125rem; color: var(--muted); }
.hero-actions { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.hero-actions .text-link { border: 0; }
.hero-art { height: 290px; margin: 0 calc(-1 * var(--page-gutter)); position: relative; isolation: isolate; }
#ribbon { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
.ribbon-fallback { position: absolute; inset: 0; background: url('/assets/ribbon.svg') center / cover no-repeat; }
.js .ribbon-fallback { background-image: none; }
.canvas-ready .ribbon-fallback { display: none; }
.art-label { position: absolute; font-size: .6875rem; letter-spacing: .1em; line-height: 1.5; display: flex; align-items: center; gap: 8px; z-index: 2; pointer-events: none; }
.label-left { left: var(--page-gutter); bottom: 30px; }
.label-right { top: 30px; right: var(--page-gutter); }
.motion-toggle { display: inline-flex; gap: 8px; align-items: center; background: transparent; border: 1px solid #87917a; border-radius: 30px; font-size: .8125rem; min-height: 44px; padding: .5rem .9rem; width: fit-content; }
.motion-toggle::before { content: 'Ⅱ'; font-size: .75rem; }
.motion-toggle[aria-pressed='true']::before { content: '▷'; }
.motion-toggle:hover { background: var(--sage); }
.art-motion { position: absolute; right: var(--page-gutter); bottom: 20px; z-index: 3; background: var(--paper); }
.hero-foot { border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 2rem; padding: 1.5rem 0; font-size: .875rem; color: var(--muted); }
.hero-foot b { color: var(--ink); font-weight: 500; }

/* The statement remains readable; scroll adds a highlight, never faint text. */
.manifesto { padding-bottom: 3rem; }
.manifesto h2 { max-width: 1120px; font-size: clamp(2.6rem, 5.6vw, 5.3rem); line-height: 1.15; }
.word-reveal span { color: var(--ink); background: linear-gradient(var(--green),var(--green)) left 90% / 0% .14em no-repeat; transition: background-size .5s; }
.word-reveal span.lit { background-size: 100% .14em; }
.manifesto-bottom { display: flex; align-items: center; justify-content: space-between; gap: 3rem; margin-top: 2.8rem; }
.large-asterisk { color: #526c35; font-size: 6rem; line-height: 1; }
.manifesto-bottom p { color: var(--muted); max-width: 520px; font-size: 1.125rem; line-height: 1.7; }

/* Clear service names with outcomes, examples, and deeper pages. */
.service-row { display: grid; grid-template-columns: 35px minmax(0,1fr) 31%; align-items: center; gap: 2rem; padding: 3rem 0; border-top: 1px solid var(--line); }
.service-row:last-child { border-bottom: 1px solid var(--line); }
.service-number { font-size: .8125rem; color: var(--muted); align-self: start; padding-top: 7px; }
.service-copy h3 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); }
.service-copy p { color: var(--muted); margin-top: 1rem; max-width: 590px; line-height: 1.75; }
.service-copy .service-example { font-size: .9375rem; color: #474f3d; padding-left: 1rem; border-left: 2px solid #8a9d6d; }
.service-example strong { display: block; margin-bottom: .25rem; font-weight: 500; color: var(--ink); }
.service-copy .text-link { margin-top: 1rem; }
.service-art { height: 215px; background: #dfe4d5; border-radius: 4px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; font-size: .875rem; }
.mini-mail { width: 235px; padding: 20px; background: #f8f5ee; border: 1px solid #c2cab6; transform: rotate(-6deg); box-shadow: 9px 11px 0 #c9d2bc; transition: transform .6s; }
.service-row:hover .mini-mail { transform: rotate(0); }
.mini-mail span { font-size: .75rem; color: #535f46; }
.mini-mail b { display: block; font-size: 1rem; font-weight: 500; margin: 12px 0; }
.mini-mail small { font-size: .75rem; color: #465b32; }
.floating-badge { position: absolute; bottom: 33px; right: 12%; padding: 12px 18px; border-radius: 50%; background: var(--green); font-size: 1.5rem; }
.steps-art { flex-direction: column; gap: 9px; }
.steps-art > span { display: flex; justify-content: space-between; gap: 15px; width: 245px; padding: 12px 15px; background: #f8f5ee; }
.steps-art > span:nth-child(2) { transform: translateX(10px); background: var(--green); }
.steps-art b { font-weight: 400; }
.chat-art { flex-direction: column; gap: 15px; padding: 20px; }
.chat-art > span { background: #f8f5ee; border-radius: 15px 15px 0 15px; padding: 13px 15px; align-self: flex-end; }
.chat-art > span + span { align-self: flex-start; background: var(--green); border-radius: 15px 15px 15px 0; }
.chat-art b { margin-right: 7px; }
.code-art { gap: 7px; }
.code-art > span { border-radius: 8px; background: #f8f5ee; padding: 13px; font-size: 1.5rem; }
.code-art > b { font-size: 2.6rem; border-radius: 50%; padding: 10px 18px; background: var(--green); font-weight: 400; }
.code-art i { font-size: .75rem; }

/* Scrollytelling. Only ornament changes; every step is readable from the start. */
.flow-section { background: var(--ink); color: var(--paper); position: relative; }
.flow-sticky { padding-block: 3.25rem; }
.flow-heading { display: flex; gap: 2.5rem; justify-content: space-between; align-items: flex-end; }
.flow-heading h2 { font-size: clamp(2.3rem, 3.8vw, 3.7rem); }
.flow-heading em { color: var(--green); }
.flow-heading > p { color: #c9d0bf; font-size: 1rem; max-width: 320px; }
.flow-skip { letter-spacing: 0; font-size: .875rem; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid #778469; }
.flow-section .section-meta { margin-bottom: 2rem; color: #d3dac9; }
.example-tabs { display: flex; gap: 10px; margin-top: 2rem; flex-wrap: wrap; }
.example-tabs button { font-size: .9375rem; border: 1px solid #7b876e; border-radius: 30px; padding: .65rem 1.2rem; min-height: 44px; background: transparent; }
.example-tabs button[aria-selected='true'] { background: var(--green); color: var(--ink); border-color: var(--green); }
.example-tabs button:hover { border-color: var(--green); }
.example-panel-heading { font-size: 1.5rem; margin-top: 2.5rem; }
.js .example-panel-heading { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.flow-track { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2rem; position: relative; margin-top: 2.5rem; }
.flow-line { position: absolute; height: 1px; top: 74px; left: 25px; right: 16%; background: #738062; }
.flow-line > div { height: 2px; width: var(--flow-progress,0%); background: var(--green); box-shadow: 0 0 7px #c6f56b80; transition: width .15s; }
.flow-node { position: relative; }
.node-index { font-size: .75rem; color: #ced7c1; letter-spacing: .075em; }
.node-icon { height: 62px; width: 62px; display: grid; place-items: center; border: 1px solid #89977b; border-radius: 50%; font-size: 1.8rem; background: var(--ink); margin: 22px 0 24px; position: relative; transition: background .4s,color .4s,box-shadow .4s; }
.active .node-icon { background: var(--green); border-color: var(--green); color: var(--ink); box-shadow: 0 0 0 7px #c6f56b0a; }
.flow-node h4 { font-size: 1.3125rem; }
.flow-node p { font-size: 1rem; line-height: 1.65; color: #ced4c5; margin: .8rem 0 1rem; }
.node-chip { display: inline-block; border: 1px solid #6e7b60; border-radius: 20px; padding: .3rem .65rem; font-size: .75rem; color: #e0e6d8; }
.flow-footer { display: flex; justify-content: space-between; gap: 2rem; font-size: .75rem; letter-spacing: .06em; padding-top: 1.5rem; margin-top: 2.5rem; border-top: 1px solid #667057; color: #cad1bf; }
.flow-counter { color: var(--green); white-space: nowrap; }
@media(min-width: 1100px) and (min-height: 820px) {
  .js:not(.motion-paused) .flow-section.is-pinnable { height: 185vh; }
  .js:not(.motion-paused) .is-pinnable .flow-sticky { position: sticky; top: 88px; min-height: calc(100vh - 88px); display: flex; flex-direction: column; justify-content: center; }
}

/* The constellation is a decoration, not the only way to understand integrations. */
.connections { background: var(--sage); overflow: hidden; }
.connection-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.connection-layout p { color: #4d5743; max-width: 490px; margin-top: 1.5rem; }
.connection-layout .text-link { margin-top: 1.5rem; }
.orbit { aspect-ratio: 1; position: relative; width: 100%; max-width: 560px; display: grid; place-items: center; }
.orbit-ring { position: absolute; width: 66%; height: 66%; border: 1px solid #9aaa8b; border-radius: 50%; }
.ring-two { width: 95%; height: 95%; border-style: dashed; animation: orbit 100s linear infinite; }
.orbit-core { height: 132px; width: 132px; border-radius: 50%; background: var(--ink); color: var(--green); display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 2.5rem; line-height: 1; letter-spacing: -2px; box-shadow: 0 0 0 16px #cad5bc, 0 0 0 17px #adbf96; }
.orbit-core small { font-size: .5625rem; margin-top: 13px; letter-spacing: .09em; }
.satellite { position: absolute; display: flex; gap: 9px; align-items: center; background: #f5f4ec; border: 1px solid #bdc8b0; padding: 14px 17px; border-radius: 7px; font-size: 1.35rem; box-shadow: 0 8px 20px #3d55200a; }
.satellite b { font-size: .875rem; font-weight: 500; }
.sat-1 { top: 2%; left: 34%; }.sat-2 { right: -1%; top: 26%; }.sat-3 { right: 0; bottom: 26%; }.sat-4 { bottom: 2%; left: 34%; }.sat-5 { left: -3%; bottom: 25%; }.sat-6 { left: -3%; top: 25%; }
.tool-strip { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-top: 4rem; border-top: 1px solid #afbaa2; padding-top: 2rem; }
.tool-strip span { font-size: .6875rem; letter-spacing: .08em; }
.tool-strip b { font-size: 1.125rem; font-weight: 500; letter-spacing: -.04em; }
.process-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3rem; }
.process-grid article { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.process-grid article > span { font-size: .75rem; letter-spacing: .08em; color: #4c5940; }
.process-grid h3 { font-size: 1.75rem; margin-top: 1.5rem; }
.process-grid p { color: var(--muted); margin-top: 1rem; }
.pricing { background: var(--green); display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.price-intro h2 { margin: 1.5rem 0 2rem; }
.price-intro p { max-width: 490px; }
.cost-note { margin-top: 1.5rem; font-size: .9375rem; color: #374728; }
.price-card { border-left: 1px solid #8fb73f; padding-left: 4.5rem; }
.price { font-size: 8.5rem; letter-spacing: -.085em; line-height: 1; }
.price > span { font-size: .45em; vertical-align: top; display: inline-block; margin-top: .25em; letter-spacing: -.05em; }
.price small { font-size: 1.25rem; letter-spacing: 0; margin-left: 1rem; }
.price-card ul { list-style: none; margin: 2rem 0; padding: 0; font-size: 1rem; }
.price-card li { margin: .75rem 0; }
.price-card li::before { content: '✓'; margin-right: .8rem; }
.faq-section { display: grid; grid-template-columns: 1fr 1.25fr; gap: 4rem; }
.faq-heading h2 { font-size: clamp(2.3rem, 3.6vw, 3.6rem); margin-top: 1.5rem; }
.faq-heading p { color: var(--muted); margin-top: 1.5rem; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.4rem 0; cursor: pointer; font-size: 1.0625rem; line-height: 1.5; font-weight: 500; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span { font-size: 1.75rem; font-weight: 300; flex-shrink: 0; transition: transform .25s; }
.faq-list details[open] summary > span { transform: rotate(45deg); }
.faq-list details p { padding: 0 2rem 1.5rem 0; font-size: 1rem; color: var(--muted); line-height: 1.8; }
.contact { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
.contact .section-meta { color: #d0d8c4; position: relative; z-index: 1; }
.status-dot { background: var(--green); margin-right: .5rem; }
.contact h2 { font-size: clamp(3rem,7vw,6.8rem); position: relative; z-index: 1; }
.contact em { color: var(--green); }
.contact-bottom { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 3rem; position: relative; z-index: 1; }
.contact-bottom p { color: #d0d8c4; }
.email-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: .5rem; text-decoration: underline; text-underline-offset: 5px; overflow-wrap: anywhere; }
.contact-note { color: #c5cebb; font-size: 1rem; margin-top: 2rem; position: relative; z-index: 1; }
.contact-spark { position: absolute; top: 24%; right: 5%; color: #4e6038; font-size: 11rem; line-height: 1; transform: rotate(12deg); }
.site-footer { display: grid; grid-template-columns: 1.1fr 1fr .8fr; gap: 3rem; padding-block: 3.5rem 2rem; }
.footer-intro p { color: var(--muted); margin-top: 1.4rem; font-size: .9375rem; }
.footer-intro p:last-child { font-size: .8125rem; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.footer-links .eyebrow { margin: .6rem 0 .8rem; }
.footer-links > a { font-size: .9375rem; padding-block: .5rem; min-height: 44px; }
.footer-links > a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer-links .motion-toggle { margin-top: .5rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 2rem; border-top: 1px solid var(--line); padding-top: 1.5rem; grid-column: 1 / -1; font-size: .8125rem; color: var(--muted); }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }

/* Service pages: semantic documents, clear scope, unique useful content. */
.breadcrumbs { padding-top: 2rem; font-size: .875rem; color: var(--muted); }
.breadcrumbs ol { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.breadcrumbs li + li::before { content: '/'; margin-right: .75rem; }
.service-hero { padding-block: 3rem 4.5rem; }
.service-hero h1 { font-size: clamp(2.7rem,6.5vw,6.3rem); max-width: 1100px; margin: 1.5rem 0; }
.service-deck { font: italic clamp(1.8rem,3vw,2.8rem)/1.25 var(--serif); letter-spacing: -.04em; max-width: 900px; }
.service-lead { max-width: 760px; font-size: 1.1875rem; color: var(--muted); margin-top: 1.7rem; }
.service-hero-actions { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: 2rem; }
.service-hero-actions > span { font-size: .9375rem; color: var(--muted); }
.service-detail { background: var(--sage); }
.detail-intro { max-width: 850px; }
.detail-intro h2 { font-size: clamp(2rem,3.4vw,3rem); margin: 1.5rem 0; }
.detail-intro p { color: #4d5743; max-width: 760px; }
.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3rem 4rem; margin-top: 3rem; }
.detail-grid article { border-top: 1px solid #aab89a; padding-top: 1.5rem; }
.detail-grid h3 { font-size: 1.65rem; margin: .75rem 0; }
.detail-grid p { color: #4d5743; }
.detail-example { background: var(--ink); color: var(--paper); }
.detail-example em { color: var(--green); }
.detail-example .section-heading > p { color: #c9d2be; }
.detail-steps { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2rem; }
.detail-steps .node-icon { background: var(--green); color: var(--ink); margin-top: 0; }
.detail-steps h3 { font-size: 1.5rem; }
.detail-steps p { color: #ced4c5; margin-top: 1rem; font-size: 1rem; }
.detail-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; border-bottom: 1px solid var(--line); }
.detail-scope h2 { margin: 1.5rem 0; }
.detail-scope p { color: var(--muted); }
.scope-card { background: #e0e4d7; padding: 2.5rem; }
.scope-card h3 { font-size: 1.7rem; }
.scope-card ul { padding-left: 1.15rem; margin: 1.5rem 0; }
.scope-card li { margin-block: .9rem; }
.scope-card p { font-size: .9375rem; }
.related-services { padding-block: 0 4.5rem; }
.related-services h2 { font-size: 1.75rem; margin-bottom: 1.5rem; }
.related-services > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; }
.related-services a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--line); padding-block: 1rem; font-size: 1rem; }
.related-services a:hover { color: #3e5924; }
.about-page { padding-top: 2.5rem; }
.about-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7%; align-items: start; }
.about-art { aspect-ratio: 4/5; background: var(--sage); padding: 2.25rem; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.about-art b { font: clamp(6rem,15vw,14rem)/1 var(--serif); letter-spacing: -.08em; }
.about-art small { font-size: .75rem; letter-spacing: .08em; margin-top: 1.5rem; }
.about-art-star { position: absolute; right: 1rem; top: 1rem; color: #738a52; font-size: 11rem; line-height: 1; animation: orbit 80s linear infinite; }
.about-copy h1 { font-size: clamp(2.3rem,3.9vw,3.7rem); margin: 1.5rem 0 2rem; }
.about-copy p { color: var(--muted); margin-top: 1.25rem; }
.about-copy strong { color: var(--ink); }
.about-copy .text-link { margin-top: 1.5rem; }
.about-principles { background: var(--sage); }

/* Reveal ornament around already readable content. No opacity gating. */
.js .reveal { transform: translateY(24px); transition: transform .85s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { transform: none; }
.service-art::after { content: ''; position: absolute; inset: 0; background: #c7d2b8; transform: scaleX(0); transform-origin: right; transition: transform .9s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.js .service-row:not(.in) .service-art::after { transform: scaleX(1); }
.js .title-spark { animation: star-enter 1.2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes star-enter { from { transform: rotate(-80deg) scale(.5); } to { transform: rotate(0) scale(1); } }
@keyframes orbit { to { transform: rotate(360deg); } }
.motion-paused *,.motion-paused *::before,.motion-paused *::after { animation-play-state: paused !important; transition: none !important; }
.motion-paused .reveal { transform: none; }
.motion-paused .service-art::after { transform: scaleX(0) !important; }
.motion-paused .node-icon { background: var(--green); color: var(--ink); }
.motion-paused .flow-line > div { width: 100%; }

@media(max-width: 1100px) {
  .nav { gap: 1rem; }.nav-links { gap: 1rem; }.nav-links a { font-size: .875rem; }
  .hero-bottom { padding-left: 0; gap: 2rem; }.hero-copy { max-width: 520px; }.hero-copy p { font-size: 1.0625rem; }
  .service-row { gap: 1.25rem; grid-template-columns: 24px minmax(0,1fr) 30%; }.service-art { height: 190px; }.mini-mail { width: 190px; padding: 14px; }.mini-mail b { font-size: .875rem; }.steps-art > span { width: 190px; font-size: .75rem; }.chat-art { padding: 14px; font-size: .75rem; }.code-art { gap: 3px; }.code-art > span { padding: 7px; font-size: 1.2rem; }.code-art > b { padding: 8px 12px; font-size: 2rem; }.code-art i { font-size: .625rem; }
  .flow-heading { align-items: flex-start; }.flow-heading > p { max-width: 270px; }.flow-track { gap: 1.25rem; }.flow-node h4 { font-size: 1.1875rem; }.flow-node p { font-size: .9375rem; }
  .connection-layout { gap: 2.5rem; }.satellite { padding: 11px; }.satellite b { font-size: .8125rem; }.orbit-core { width: 112px; height: 112px; }
  .price-card { padding-left: 2.5rem; }.pricing { gap: 2.5rem; }.process-grid { gap: 2rem; }
  .section-heading { gap: 2rem; }.section-heading > p,.heading-copy { flex-basis: 300px; }
}
@media(max-width: 850px) {
  .nav { height: 80px; flex-wrap: wrap; }.logo { font-size: 2.2rem; }.nav-cta { margin-left: 0; font-size: .875rem; gap: 1rem; }
  .js .menu-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border: 0; background: none; font-size: .9375rem; margin-left: auto; padding: .5rem; }
  .nav-links { width: 100%; padding: 1.5rem var(--page-gutter); background: var(--paper); border-bottom: 1px solid var(--line); order: 3; }
  .js .nav-links { display: none; position: absolute; top: 79px; left: 0; right: 0; flex-direction: column; gap: .3rem; max-height: calc(100dvh - 80px); overflow-y: auto; }
  .js .nav-links.open { display: flex; }.nav-links a { font-size: 1rem; }.nav-links a::after { display: none; }
  html:not(.js) .nav { height: auto; padding-top: 1rem; position: relative; }html:not(.js) .nav-links { padding-inline: 0; flex-wrap: wrap; gap: 0 1.25rem; }
  .hero-top .eyebrow { font-size: .6875rem; }.hero h1 { margin-top: 2.5rem; }.title-line:nth-child(2) { padding-left: 0; }.hero-bottom { align-items: flex-start; }.hero-actions .button { font-size: .9375rem; padding-inline: 1.1rem; }.hero-actions .text-link { font-size: .875rem; }
  .hero-foot { flex-wrap: wrap; font-size: .8125rem; gap: .75rem 2rem; }
  .section-heading { display: block; }.section-heading > p,.heading-copy { max-width: 560px; margin-top: 1.5rem; }
  .service-row { grid-template-columns: 25px minmax(0,1fr) 30%; gap: 1rem; }.service-copy h3 { font-size: 1.65rem; }.service-copy p { font-size: 1rem; }.service-copy .service-example { font-size: .9375rem; }.service-art { height: 170px; }.mini-mail { width: 150px; padding: 12px; }.mini-mail b { font-size: .8125rem; }.mini-mail span,.mini-mail small { font-size: .625rem; }.steps-art > span { width: 150px; font-size: .625rem; padding: 10px; }.floating-badge { font-size: 1rem; padding: 8px 12px; }.chat-art { font-size: .625rem; padding: 10px; }.code-art i { display: none; }
  .flow-heading { display: block; }.flow-heading > p { max-width: none; margin-top: 1.5rem; }.flow-track { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; }.flow-line { display: none; }.flow-node p { font-size: 1rem; }.flow-node h4 { font-size: 1.3125rem; }
  .connection-layout { grid-template-columns: 1fr; }.connection-layout p { max-width: 620px; }.orbit { max-width: 500px; margin: 1rem auto 0; }.tool-strip { flex-wrap: wrap; justify-content: center; }.tool-strip > span { width: 100%; text-align: center; }
  .process-grid { gap: 1.5rem; }.process-grid h3 { font-size: 1.5rem; }.process-grid p { font-size: 1rem; }
  .faq-section { gap: 2rem; }.contact-bottom { align-items: flex-start; }.contact-bottom .button { flex-shrink: 0; }.site-footer { gap: 2rem; grid-template-columns: 1fr 1fr; }.footer-intro { grid-column: span 2; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }.footer-intro p { margin: 0; }.footer-bottom { flex-wrap: wrap; gap: .5rem 2rem; }.footer-bottom > span:nth-child(2) { display: none; }
  .detail-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem; }.detail-scope { gap: 2.5rem; }.scope-card { padding: 1.5rem; }.about-layout { grid-template-columns: .7fr 1fr; gap: 2rem; }.about-art { padding: 1.5rem; }.about-art-star { font-size: 7rem; }
}
@media(max-width: 600px) {
  body { font-size: 1rem; }html { scroll-padding-top: 6rem; }.section-shell { padding-block: 3.5rem; }
  .section-meta { font-size: .6875rem; gap: 1rem; margin-bottom: 2rem; letter-spacing: .055em; }.section-meta > span:last-child { text-align: right; max-width: 145px; }.eyebrow { font-size: .6875rem; }.section-heading { margin-bottom: 2rem; }h2 { font-size: clamp(2rem, 8.8vw, 3rem); }
  .hero { padding-top: 1.65rem; }.hero-top { gap: 1rem; align-items: flex-start; }.hero-top .eyebrow { max-width: 155px; font-size: .6875rem; }.availability { font-size: .75rem; gap: 6px; max-width: 145px; }.hero h1 { font-size: clamp(2.75rem,10.5vw,4rem); line-height: 1.06; margin: 2rem 0 1.5rem; }.title-spark { font-size: .52em; margin-left: 2%; }.hero-bottom { display: block; }.hero-copy p { font-size: 1rem; line-height: 1.7; }.hero-byline { font-size: .75rem; margin-top: .75rem; }.hero-actions { margin-top: 1.35rem; flex-direction: row; align-items: center; gap: 1rem; flex-wrap: wrap; }.hero-actions .button { padding: .8rem 1.15rem; min-height: 50px; gap: 1rem; }.hero-actions .text-link { font-size: .8125rem; min-height: 44px; gap: .5rem; }.hero-art { height: 255px; margin-top: .25rem; }.art-label { font-size: .625rem; }.label-left { bottom: 30px; }.label-right { top: 22px; }.art-motion { font-size: .75rem; min-height: 44px; padding-inline: .65rem; bottom: 18px; }.hero-foot { display: grid; gap: .65rem; padding-block: 1.2rem; font-size: .875rem; }.hero-foot span { display: flex; gap: .75rem; }.hero-foot b { min-width: 105px; }
  .manifesto { padding-bottom: 1.5rem; }.manifesto h2 { font-size: 2.4rem; line-height: 1.2; }.manifesto-bottom { gap: 1.5rem; margin-top: 2rem; align-items: flex-start; }.large-asterisk { font-size: 4rem; }.manifesto-bottom p { font-size: 1rem; }
  .service-row { grid-template-columns: 20px minmax(0,1fr); gap: 1rem; padding: 2rem 0; }.service-copy h3 { font-size: 1.6rem; }.service-art { grid-column: 2; height: 180px; margin-top: .5rem; }.mini-mail { width: 205px; padding: 16px; }.mini-mail b { font-size: 1rem; }.mini-mail small,.mini-mail span { font-size: .75rem; }.steps-art > span { width: 215px; padding: 10px 14px; font-size: .8125rem; }.chat-art { font-size: .8125rem; padding: 18px; }.code-art { gap: 16px; }.code-art > span { padding: 12px; font-size: 1.5rem; }.code-art > b { padding: 10px 16px; font-size: 2.4rem; }.service-copy .text-link { font-size: .9375rem; }
  .flow-sticky { padding-block: 3rem; }.flow-heading h2 { font-size: 2.2rem; }.flow-skip { font-size: .75rem; max-width: 145px; text-align: right; }.example-tabs { gap: 8px; margin-top: 1.5rem; }.example-tabs button { font-size: .8125rem; padding: .55rem .8rem; }.flow-track { grid-template-columns: 1fr; gap: 1.75rem; margin-top: 2rem; }.flow-node { padding-left: 70px; }.node-index { font-size: .6875rem; }.flow-node .node-icon { position: absolute; left: 0; top: 3px; margin: 0; width: 48px; height: 48px; font-size: 1.4rem; }.flow-node::before { content: ''; position: absolute; left: 24px; top: 58px; bottom: -16px; width: 1px; background: #6e7c60; }.flow-node:last-child::before { display: none; }.flow-node h4 { margin-top: .65rem; font-size: 1.25rem; }.flow-node p { margin-top: .65rem; line-height: 1.7; }.flow-footer { font-size: .6875rem; gap: 1rem; }
  .connection-layout { gap: 1.5rem; }.connection-layout p { margin-top: 1.25rem; }.orbit { max-width: 370px; margin: .5rem auto 0; }.orbit-core { width: 100px; height: 100px; font-size: 2rem; box-shadow: 0 0 0 10px #cad5bc,0 0 0 11px #adbf96; }.orbit-core small { font-size: .5rem; }.satellite { gap: 6px; padding: 9px; font-size: 1rem; }.satellite b { font-size: .75rem; }.sat-1,.sat-4 { left: 33%; }.sat-2,.sat-3 { right: 0; }.sat-5,.sat-6 { left: 0; }.tool-strip { margin-top: 2.5rem; gap: 1rem 1.5rem; }.tool-strip b { font-size: 1rem; }
  .process-grid { grid-template-columns: 1fr; gap: 2rem; }.process-grid h3 { font-size: 1.65rem; margin-top: 1rem; }.process-grid article > span { font-size: .6875rem; }
  .pricing { grid-template-columns: 1fr; gap: 2rem; }.price-card { border-left: 0; border-top: 1px solid #8fb73f; padding: 2rem 0 0; }.price { font-size: 7rem; }.price small { font-size: 1.25rem; }.price-intro h2 { margin-block: 1.25rem 1.5rem; }.cost-note { font-size: .9375rem; }.price-card .button { width: 100%; }
  .faq-section { grid-template-columns: 1fr; gap: 2rem; }.faq-heading h2 { font-size: 2.4rem; margin-top: 1.25rem; }.faq-list summary { font-size: 1rem; }.faq-list details p { padding-right: 0; }
  .contact h2 { font-size: clamp(2.5rem,10vw,3.7rem); }.contact-bottom { display: block; margin-top: 2rem; }.contact-bottom p br { display: none; }.contact-bottom .button { margin-top: 1.5rem; }.email-link { font-size: .9375rem; }.contact-spark { font-size: 7rem; right: -20px; top: 22%; opacity: .5; }.contact-note { font-size: 1rem; max-width: 300px; line-height: 1.8; }
  .site-footer { gap: 2rem 1.25rem; padding-bottom: 1rem; }.footer-intro { flex-wrap: wrap; justify-content: flex-start; gap: 1.5rem 2rem; }.footer-intro p:last-child { width: 100%; }.footer-links > a { font-size: .875rem; }.footer-links .eyebrow { font-size: .625rem; }.footer-links .motion-toggle { font-size: .75rem; padding-inline: .6rem; }.footer-bottom { font-size: .75rem; }
  .breadcrumbs { padding-top: 1rem; font-size: .8125rem; }.service-hero { padding-block: 2rem 3rem; }.service-hero h1 { font-size: 2.9rem; }.service-deck { font-size: 1.9rem; }.service-lead { font-size: 1.0625rem; }.service-hero-actions { gap: 1rem; }.service-hero-actions > span { font-size: .875rem; }.detail-intro h2 { font-size: 2rem; }.detail-grid { grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }.detail-steps { grid-template-columns: 1fr; gap: 2rem; }.detail-steps li { display: grid; grid-template-columns: 48px 1fr; gap: .5rem 1.25rem; }.detail-steps .node-icon { grid-row: 1 / 3; width: 48px; height: 48px; font-size: 1.2rem; margin: 0; }.detail-steps h3 { font-size: 1.5rem; }.detail-steps p { margin: 0; }.detail-scope { grid-template-columns: 1fr; gap: 2rem; }.scope-card { padding: 1.5rem; }.scope-card h3 { font-size: 1.5rem; }.related-services > div { grid-template-columns: 1fr; gap: .5rem; }.related-services { padding-bottom: 3rem; }.about-layout { grid-template-columns: 1fr; gap: 2rem; }.about-art { max-width: 380px; aspect-ratio: 1.3; width: 100%; }.about-art b { font-size: 9rem; }.about-copy h1 { font-size: 2.5rem; }
}
@media(max-width: 360px) {
  .nav { gap: .5rem; }.logo { font-size: 2rem; }.nav-cta { padding-inline: .7rem; gap: .5rem; font-size: .8125rem; }.js .menu-toggle { font-size: .875rem; padding-inline: .25rem; }
  .hero h1 { font-size: 2.55rem; }.title-spark { display: none; }.hero-actions { gap: .25rem; }.hero-top .eyebrow { max-width: 140px; }.availability { max-width: 120px; }.label-left { font-size: .5625rem; }.hero-foot { font-size: .8125rem; }.service-art { margin-left: -36px; }.satellite { padding: 7px; }.satellite b { font-size: .6875rem; }.satellite { font-size: .875rem; }.orbit-core { width: 85px; height: 85px; }.footer-links .eyebrow { letter-spacing: .02em; }.price small { margin-left: .5rem; }
}
@media(prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .js .reveal { transform: none; }.service-art::after { transform: scaleX(0) !important; }
  .js .flow-section { height: auto !important; }.js .flow-sticky { position: relative !important; top: auto; min-height: 0 !important; }
  .flow-line > div { width: 100%; }.node-icon { background: var(--green); color: var(--ink); }
}
@media print {
  .nav,.scroll-progress,.hero-art,.service-art,.orbit,.motion-toggle,.contact-spark,.example-tabs { display: none !important; }
  body { background: white; color: black; font-size: 11pt; }.section-shell { padding: 1.5rem 0; }.hero { padding: 0; }.hero h1 { font-size: 40pt; }.flow-section,.detail-example,.contact { color: black; background: white; height: auto !important; }.flow-sticky { position: static !important; min-height: 0 !important; }.reveal { transform: none !important; }.example-panel[hidden] { display: block !important; }.example-panel-heading { display: block !important; }.flow-node p,.contact p { color: black; }a { text-decoration: underline; }
}

/* The temporary rate is shown beside its standard-rate context. */
.price-promotion { margin-bottom: 1.25rem; }
.discount-badge { display: inline-block; padding: .4rem .8rem; border: 1px solid #607e36; border-radius: 24px; font-size: .875rem; line-height: 1.5; }
.standard-rate { margin-top: .85rem; font-size: 1rem; color: #374728; }
.standard-rate s { text-decoration-thickness: 1px; }

/* Edition 03 — a connected, multi-page studio. */
:root { --paper: #f7f5ef; --ink: #142e2a; --muted: #4c5b54; --green: #d7ff79; --sage: #e8eddf; --line: #bbc7b8; --peach: #f5cfb5; --lilac: #e0d9f1; --blue: #d2e3f2; --forest: #0e302b; }
body { background: var(--paper); }
.nav { border-bottom-color: #c6cec1; }
.logo-star { color: #466846; }
.nav-cta { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav-cta:hover { color: var(--ink); background: var(--green); }
.nav-links a[aria-current] { font-weight: 600; }
.nav-links a[aria-current]::after { background: #497641; height: 2px; }
.button { border: 0; font-family: inherit; cursor: pointer; }
.dark-button:hover { background: #305048; }
.closing { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 4rem; background: var(--green); }
.closing h2 { margin-top: 1.5rem; font-size: clamp(2.6rem,4.8vw,4.4rem); }
.closing-action { justify-self: end; }
.closing-action p { margin-bottom: 1.5rem; }
.closing-action > span { display: block; font-size: .8125rem; margin-top: 1rem; max-width: 380px; }
.site-footer { background: #f7f5ef; }

/* Home: a bold opening and a short path to the rest of the website. */
.home-hero { background: var(--forest); color: #f5f5e9; padding: 1.75rem var(--page-gutter) 0; overflow: hidden; position: relative; }
.home-kicker { display: flex; justify-content: space-between; align-items: center; gap: 2rem; font-size: .6875rem; letter-spacing: .075em; line-height: 1.6; color: #d2e0cb; position: relative; z-index: 2; }
.home-kicker > span:last-child { display: flex; gap: .6rem; align-items: center; font-size: .75rem; letter-spacing: 0; }
.home-kicker i { background: var(--green); display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.home-hero-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 0; align-items: center; min-height: 665px; }
.home-hero-copy { position: relative; z-index: 2; padding: 3rem 0 3.5rem; }
.home-hero-copy h1 { font-size: clamp(4rem,6.9vw,6.7rem); line-height: .99; letter-spacing: -.07em; margin-bottom: 1.75rem; }
.home-hero-copy h1 em { color: var(--green); font-size: 1.06em; }
.home-hero-copy > p { max-width: 490px; font-size: 1.0625rem; line-height: 1.75; color: #d6dfd2; }
.home-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 1.75rem; }
.home-actions .button { min-height: 54px; font-size: .9375rem; padding: .85rem 1.25rem; }
.hero-secondary { color: #e7eddf; font-size: .875rem; min-height: 44px; display: inline-flex; align-items: center; gap: 1rem; }
.hero-secondary:hover { text-decoration: underline; text-underline-offset: 5px; }
.home-hero :focus-visible { outline-color: var(--green); }
.sculpture { position: relative; min-width: 0; width: 116%; margin-left: -8%; aspect-ratio: 1; isolation: isolate; }
.sculpture::before { content: ''; position: absolute; inset: 12%; background: radial-gradient(ellipse,#77a48726,transparent 68%); border-radius: 50%; }
.sculpture #ribbon { position: absolute; inset: 0; width: 100%; height: 100%; }
.sculpture-fallback { position: absolute; inset: 12%; border: 1px solid #b9ed8d; border-radius: 40% 60% 55% 45%; box-shadow: inset 0 0 0 18px #c5ed7a22, inset 0 0 0 38px #93d6ba22,inset 0 0 0 58px #f6ba8b33; transform: rotate(-25deg); z-index: -1; }
.canvas-ready .sculpture-fallback { display: none; }
.art-tag { position: absolute; display: inline-flex; align-items: center; gap: .7rem; font-size: .75rem; border: 1px solid #bcd8a14d; background: #133a33; padding: .7rem .9rem; border-radius: 9px; color: #e7f0dd; z-index: 2; box-shadow: 0 10px 25px #071e2630; }
.art-tag b { display: grid; place-items: center; background: #d7ff79; color: #163b2d; font-size: 1.125rem; width: 27px; height: 27px; border-radius: 6px; font-weight: 400; }
.tag-email { top: 17%; left: 5%; transform: rotate(-7deg); }.tag-ai { top: 30%; right: 0; transform: rotate(6deg); }.tag-ai b { background: #f1c4a3; }.tag-crm { bottom: 17%; left: 15%; transform: rotate(-5deg); }.tag-crm b { background: #cbdcf4; }
.sculpture-caption { position: absolute; bottom: 8%; left: 12%; right: 12%; text-align: center; color: #c7d9bd; font-size: .625rem; letter-spacing: .14em; }
.sculpture .art-motion { bottom: -2%; right: 13%; font-size: .75rem; color: #d6e4cc; background: transparent; border-color: #789875; }
.sculpture .art-motion:hover { background: #254b3b; }
.home-proof { border-top: 1px solid #75956b66; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 80px; font-size: .8125rem; color: #c6d7bd; position: relative; z-index: 2; }
.home-proof b { font-weight: 500; color: #f1f5e7; }
.home-proof a { min-height: 44px; display: flex; align-items: center; gap: .4rem; }
.home-proof a:hover { color: var(--green); }
.home-services { padding-block: 5rem; }
.home-services .section-meta { margin-bottom: 2rem; }
.home-services .section-heading { margin-bottom: 2.5rem; }
.portal-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.portal-card { padding: 1.5rem; color: #18332b; display: flex; flex-direction: column; border-radius: 4px; position: relative; isolation: isolate; overflow: hidden; transition: transform .5s,box-shadow .5s; }
.portal-peach { background: var(--peach); }.portal-lilac { background: var(--lilac); }.portal-lime { background: #e0f0ae; }.portal-blue { background: var(--blue); }
.portal-card:hover { transform: translateY(-8px) !important; box-shadow: 0 14px 30px #203b1912; }
.portal-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .625rem; letter-spacing: .075em; }
.portal-top b { font-size: 1.45rem; font-weight: 400; }
.portal-glyph { font-size: 5rem; line-height: 1; margin: 1.5rem 0 1.75rem; align-self: center; position: relative; width: 115px; height: 115px; display: grid; place-items: center; border: 1px solid #31503255; border-radius: 50%; transition: transform .75s; }
.portal-glyph::before { content: ''; position: absolute; inset: -8px; border: 1px solid #31503230; border-radius: 50%; transform: scaleY(.5) rotate(35deg); }
.portal-card:hover .portal-glyph { transform: rotate(-12deg); }
.portal-card h3 { font-size: clamp(1.55rem,2vw,2rem); font-weight: 400; line-height: 1.2; letter-spacing: -.055em; }
.portal-card p { font-size: .9375rem; line-height: 1.7; margin: 1rem 0 1.5rem; color: #3b5147; }
.portal-link { margin-top: auto; font-size: .8125rem; font-weight: 500; border-top: 1px solid #34523b40; padding-top: 1rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.home-story { background: #e6ebe1; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.story-copy .eyebrow { margin-bottom: 1.5rem; }.story-copy h2 { font-size: clamp(2.5rem,4.3vw,4rem); }.story-copy p { color: var(--muted); margin: 1.5rem 0; max-width: 500px; }
.story-art { min-height: 330px; display: flex; align-items: flex-start; justify-content: space-between; padding: 2rem 1rem 0; position: relative; }
.story-node { display: grid; place-items: center; width: 82px; height: 82px; border: 1px solid #5b7664; border-radius: 50%; font-size: 2.5rem; background: var(--paper); position: relative; }
.story-node:nth-of-type(2) { background: var(--green); transform: translateY(65px); }
.story-node small { position: absolute; top: calc(100% + 14px); width: 130px; text-align: center; font: .625rem/1.4 var(--sans); letter-spacing: .04em; }
.story-line { position: absolute; left: 45px; right: 45px; top: 75px; height: 65px; border-bottom: 1px solid #6c9472; border-radius: 50%; transform: rotate(-8deg); }
.story-note { position: absolute; left: 1rem; bottom: 0; font-size: 1.6rem; line-height: 1.3; letter-spacing: -.04em; }
.story-note em { font-size: 1.15em; }

/* Distinct chapter openers, linked by one visual language. */
.chapter-hero { position: relative; display: grid; grid-template-columns: 1.65fr 1fr; gap: 3rem; align-items: center; padding-block: 4.25rem; overflow: hidden; }
.chapter-peach { background: #f5d6c2; }.chapter-lilac { background: #e0d9f1; }.chapter-blue { background: #d5e5f2; }.chapter-lime { background: #e1f0b3; }
.chapter-content { position: relative; z-index: 1; }
.chapter-content h1 { font-size: clamp(3rem,6vw,5.8rem); margin: 1.5rem 0; line-height: 1.06; }
.chapter-content p { color: #3e5248; font-size: 1.125rem; max-width: 620px; }
.chapter-art { aspect-ratio: 1; position: relative; display: grid; place-items: center; max-width: 350px; justify-self: center; width: 100%; }
.chapter-symbol { font-size: clamp(7rem,16vw,15rem); font-weight: 400; line-height: 1; color: #1f4236; transform: rotate(-12deg); position: relative; z-index: 1; }
.chapter-orbit { position: absolute; inset: 9%; border: 1px solid #3b5d4655; border-radius: 50%; transform: rotate(-35deg) scaleY(.68); }
.orbit-offset { transform: rotate(45deg) scaleY(.65); inset: 2%; }
.chapter-art small { position: absolute; bottom: 2%; font-size: .625rem; letter-spacing: .12em; color: #3c5347; }
.services-page .services { padding-block: 4rem; }.services-page .services .section-heading h2 { font-size: 2.8rem; }
.services-page .service-row:nth-child(1) .service-art { background: var(--peach); }.services-page .service-row:nth-child(2) .service-art { background: var(--lilac); }.services-page .service-row:nth-child(3) .service-art { background: #e0f0ae; }.services-page .service-row:nth-child(4) .service-art { background: var(--blue); }
.service-tone-peach { background: #f9e6d8; }.service-tone-lilac { background: #ede7f7; }.service-tone-lime { background: #eaf1d6; }.service-tone-blue { background: #e3edf7; }
.service-hero { margin-top: 1.5rem; }
.service-hero h1 { font-size: clamp(2.7rem,5.8vw,5.5rem); }
.service-detail { background: var(--paper); }
.detail-example,.flow-section { background: var(--forest); }
.flow-heading h2 { max-width: 750px; }
.workflow-page .process { background: #f5f1e9; }
.integrations-page .connections { background: var(--paper); }
.integration-directory { background: #e1eaf1; }
.integration-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; }
.integration-tile { border-top: 1px solid #94a9ad; padding-block: 1.5rem; }
.integration-tile h3 { font-size: 1.65rem; margin: 1rem 0; }.integration-tile p { font-size: 1rem; color: #405750; }
.integration-directory > .text-link { margin-top: 2rem; }
.pricing-page .pricing { padding-block: 5rem; background: #e1f0b3; }
.pricing-page .price-intro h1 { font-size: clamp(3.5rem,6vw,5.5rem); margin-block: 1.5rem; }
.pricing-page .price-card { padding-block: 1rem; }
.pricing-expectations { background: var(--paper); }
.pricing-page .faq-section { background: #efece3; }
.about-page-body .about-art { background: #e0d9f1; }
.about-page-body .about-art-star { color: #6e6290; }
.about-page-body .about-principles { background: #e4ebe2; }

/* Contact makes a real email draft, never claims to submit a non-existent form. */
.contact-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 5rem; align-items: start; }
.contact-intro h2 { margin: 1.5rem 0; font-size: clamp(2.4rem,3.7vw,3.7rem); }
.contact-intro > p { max-width: 400px; color: var(--muted); }
.direct-email { font-size: clamp(.9375rem,1.5vw,1.25rem); display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; margin-top: 1rem; border-bottom: 1px solid #7b9479; overflow-wrap: anywhere; }
.contact-rate { border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 2rem; }
.contact-rate > span { display: block; font-size: .6875rem; letter-spacing: .08em; }
.contact-rate > b { display: block; margin: 1rem 0; font-size: 3.5rem; letter-spacing: -.07em; line-height: 1; font-weight: 400; }
.contact-rate small { font-size: 1rem; letter-spacing: 0; }.contact-rate p { color: var(--muted); font-size: 1rem; max-width: 400px; }.contact-rate .text-link { margin-top: 1rem; }
.brief-card { padding: 2.5rem; background: #edf0e6; border: 1px solid #c3d0b5; border-radius: 6px; }
.brief-card h3 { font-size: 1.9rem; margin-bottom: 1rem; }.brief-card p { color: #495947; font-size: 1rem; }
.brief-card label { display: block; font-size: .9375rem; margin-top: 1.5rem; margin-bottom: .6rem; }.brief-card label span { font-size: .8125rem; color: #51634b; }
.brief-card input,.brief-card textarea { width: 100%; border: 1px solid #8a9d80; border-radius: 4px; background: #fafbf6; color: #21382b; font: 1rem/1.5 var(--sans); padding: .85rem 1rem; resize: vertical; }
.brief-card input::placeholder,.brief-card textarea::placeholder { color: #62705d; opacity: 1; }
.brief-card .button { margin-top: 1.5rem; }.brief-card .form-help { font-size: .8125rem; margin-top: 1rem; }
.brief-result { border-top: 1px solid #9dac90; padding-top: 1.5rem; margin-top: 1.5rem; }
.copy-brief { display: inline-block; background: transparent; border: 1px solid #657b56; border-radius: 30px; min-height: 44px; padding: .6rem 1rem; font-size: .9375rem; margin: 1rem 0 0 1rem; }
#copy-status { font-size: .875rem; margin-top: .5rem; }

/* Native cross-document transitions, progressively enhanced. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out .16s ease both; }
::view-transition-new(root) { animation: page-in .28s ease both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chapter-art .chapter-orbit { animation: chapter-orbit 18s ease-in-out infinite alternate; }
@keyframes chapter-orbit { from { transform: rotate(-35deg) scaleY(.65); } to { transform: rotate(45deg) scaleY(.85); } }
.chapter-art .orbit-offset { animation-delay: -9s; animation-direction: alternate-reverse; }
@media(min-width: 1700px) { .home-hero-grid { max-width: 1500px; margin-inline: auto; }.home-hero-copy h1 { font-size: 7.5rem; }.home-hero-grid { min-height: 730px; } }
@media(max-width: 1100px) {
 .home-hero-grid { min-height: 570px; }.home-hero-copy h1 { font-size: 6.7vw; }.home-hero-copy > p { max-width: 440px; font-size: 1rem; }.home-actions { gap: .75rem; }.home-proof { font-size: .75rem; }.sculpture { width: 118%; }.art-tag { font-size: .6875rem; padding: .6rem; }.art-tag b { width: 22px; height: 22px; }.portal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; }.portal-card { padding: 1.75rem; }.portal-glyph { margin-block: 1.2rem; }.portal-card h3 { font-size: 2rem; }.portal-card p { max-width: 300px; }.home-story { gap: 3rem; }.story-node { width: 68px; height: 68px; }.chapter-hero { grid-template-columns: 1.7fr 1fr; gap: 2rem; }.chapter-content h1 { font-size: 5.8vw; }.contact-layout { gap: 3rem; }.brief-card { padding: 2rem; }
}
@media(max-width: 850px) {
 .nav { gap: .8rem; }.home-hero-grid { min-height: 540px; }.home-hero-copy { padding-block: 2.75rem; }.home-hero-copy h1 { font-size: 6.8vw; }.home-hero-copy > p { font-size: 1rem; }.home-actions { flex-direction: column; align-items: flex-start; gap: .35rem; }.sculpture-caption { font-size: .5rem; left: 2%; right: 2%; }.sculpture .art-motion { font-size: .6875rem; bottom: -8%; }.art-tag { font-size: .625rem; }.tag-ai { right: 2%; }.tag-crm { left: 10%; bottom: 11%; }.home-proof { flex-wrap: wrap; gap: .7rem 1.5rem; padding-block: 1rem; }.home-story { grid-template-columns: 1fr; gap: 3rem; }.story-art { max-width: 480px; width: 100%; margin-inline: auto; order: 2; min-height: 330px; }.story-copy p { max-width: 620px; }.closing { gap: 2rem; }.chapter-content p { font-size: 1rem; }.chapter-hero { padding-block: 3rem; }.integration-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.contact-layout { grid-template-columns: 1fr; }.contact-intro > p { max-width: 600px; }.contact-rate { display: none; }.brief-card { max-width: 650px; width: 100%; }.closing-action > span { font-size: .75rem; }
}
@media(max-width: 600px) {
 .home-hero { padding-top: 1.3rem; }.home-kicker { align-items: flex-start; gap: 1rem; font-size: .625rem; }.home-kicker > span:first-child { max-width: 185px; }.home-kicker > span:last-child { font-size: .6875rem; max-width: 110px; align-items: flex-start; }.home-kicker i { margin-top: 5px; flex-shrink: 0; }.home-hero-grid { grid-template-columns: 1fr; min-height: auto; }.home-hero-copy { padding: 2.5rem 0 .5rem; }.home-hero-copy h1 { font-size: clamp(3.3rem,12.5vw,4.8rem); margin-bottom: 1.5rem; line-height: 1.02; }.home-hero-copy > p { font-size: 1rem; line-height: 1.75; max-width: 420px; }.home-actions { flex-direction: row; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1.5rem; }.home-actions .button { font-size: .9375rem; min-height: 50px; }.hero-secondary { font-size: .8125rem; }.sculpture { aspect-ratio: 1.12; width: 110%; margin: -5px 0 10px -5%; }.tag-email { top: 18%; left: 8%; }.tag-ai { top: 32%; right: 3%; }.tag-crm { bottom: 15%; left: 10%; }.art-tag { font-size: .6875rem; padding: .5rem .7rem; }.sculpture-caption { font-size: .5625rem; bottom: 5%; }.sculpture .art-motion { right: 3%; bottom: -5%; min-height: 44px; font-size: .625rem; padding-inline: .6rem; background: var(--forest); }.home-proof { display: grid; font-size: .8125rem; gap: .5rem; padding-block: 1.25rem; }.home-proof a { min-height: 35px; flex-wrap: wrap; }.home-services { padding-block: 3rem; }.home-services .section-meta { gap: .5rem; font-size: .625rem; }.home-services .section-meta .text-link { font-size: .8125rem; gap: .7rem; }.portal-grid { grid-template-columns: 1fr; gap: 1rem; }.portal-card { padding: 1.5rem; display: grid; grid-template-columns: 1fr 90px; gap: .75rem 1rem; }.portal-top { grid-column: 1/-1; font-size: .6875rem; }.portal-glyph { grid-column: 2; grid-row: 2; width: 80px; height: 80px; font-size: 3.3rem; margin: 0; justify-self: end; align-self: center; }.portal-card h3 { grid-column: 1; grid-row: 2; font-size: 1.9rem; }.portal-card p { grid-column: 1/-1; max-width: none; margin: .5rem 0; font-size: 1rem; }.portal-link { grid-column: 1/-1; font-size: .875rem; }.home-story { padding-block: 3rem; gap: 2.5rem; }.story-copy h2 { font-size: 2.55rem; }.story-node { width: 62px; height: 62px; font-size: 2rem; }.story-node small { font-size: .5625rem; width: 105px; }.story-art { padding-inline: .3rem; min-height: 300px; }.story-line { left: 30px; right: 30px; }.story-note { left: .3rem; font-size: 1.45rem; }.closing { grid-template-columns: 1fr; gap: 1.75rem; }.closing h2 { font-size: 2.7rem; }.closing-action { justify-self: start; }.closing-action p { font-size: 1rem; }.closing-action .button { font-size: .9375rem; gap: 1.5rem; }.closing-action > span { font-size: .8125rem; }.chapter-hero { grid-template-columns: 1fr; padding-block: 2.5rem; gap: 0; }.chapter-content h1 { font-size: clamp(2.7rem,11vw,3.8rem); margin-block: 1.25rem; }.chapter-content p { font-size: 1.0625rem; }.chapter-art { aspect-ratio: 2.2; max-width: 250px; margin-top: 1.5rem; justify-self: end; }.chapter-symbol { font-size: 6.5rem; }.chapter-art small { display: none; }.chapter-orbit { inset: 3% 15%; }.orbit-offset { inset: 0 5%; }.services-page .services { padding-block: 3rem; }.services-page .services .section-heading h2 { font-size: 2.25rem; }.service-hero { margin-top: 1rem; }.integration-grid { grid-template-columns: 1fr; gap: .5rem; }.integration-tile h3 { font-size: 1.65rem; }.pricing-page .pricing { padding-block: 3rem; }.pricing-page .price-intro h1 { font-size: 3.3rem; }.pricing-page .price-card { padding-top: 2rem; }.contact-layout { gap: 2rem; }.contact-intro h2 { font-size: 2.6rem; }.direct-email { font-size: .9375rem; }.brief-card { padding: 1.5rem; }.brief-card h3 { font-size: 1.6rem; }.brief-card .button { font-size: .9375rem; gap: 1rem; }.copy-brief { margin-left: 0; }.brief-card .form-help { font-size: .875rem; }
}
@media(max-width: 360px) { .home-hero-copy h1 { font-size: 3rem; }.home-kicker { font-size: .5625rem; }.home-kicker > span:first-child { max-width: 145px; }.portal-card { grid-template-columns: 1fr 65px; padding: 1.25rem; }.portal-glyph { width: 62px; height: 62px; font-size: 2.8rem; }.portal-card h3 { font-size: 1.65rem; }.home-proof { font-size: .75rem; }.brief-card { padding: 1.25rem; }.direct-email { font-size: .875rem; }.story-node { width: 52px; height: 52px; }.story-node small { font-size: .5rem; width: 88px; } }
@media(prefers-reduced-motion: reduce) { ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation: none !important; }.portal-card:hover { transform: none !important; } }
.motion-paused .portal-card:hover { transform: none !important; }
/* Final spacing and a matching no-JavaScript sculpture. */
.sculpture .art-motion { bottom: 1%; }
.sculpture-fallback { inset: 0; border: 0; border-radius: 0; box-shadow: none; transform: none; background: url('/assets/connection-sculpture.svg') center / contain no-repeat; }
.js .sculpture-fallback { background-image: none; }
.motion-paused::view-transition-old(root),.motion-paused::view-transition-new(root) { animation: none; }
@media(max-width:600px) { .sculpture-caption { display: none; }.sculpture .art-motion { bottom: 0; }.sculpture { margin-bottom: 20px; } }
/* Keep the homepage sculpture comfortably inside its own column. */
@media(min-width:601px){.home-hero-grid .sculpture{width:100%;margin-left:0;max-width:620px;justify-self:center}.home-hero-grid .sculpture #ribbon{inset:5%;width:90%;height:90%}.home-hero-grid .tag-email{left:3%}.home-hero-grid .tag-ai{right:0}.home-hero-grid .sculpture-caption{bottom:6%}}
@media(min-width:601px){.home-hero-grid .sculpture-caption{bottom:11%}}
/* Hero artwork: a living web of tools around one orchestration hub. */
.home-hero-grid .connection-web{width:108%;max-width:680px;margin-left:0;aspect-ratio:1;isolation:isolate}
.home-hero-grid .connection-web #ribbon{inset:0;width:100%;height:100%}
.connection-web::before{inset:15%;background:radial-gradient(ellipse,#83dfb512,transparent 70%)}
.network-core{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:16%;aspect-ratio:1;border-radius:24%;background:linear-gradient(140deg,#e6ff9b,#bbec64);box-shadow:0 0 45px #d7ff791c,inset 0 1px 0 #ffffff80;color:#14382b;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;z-index:2}
.network-core>span{font-size:clamp(2rem,3.5vw,3.2rem);line-height:1}.network-core small{font-size:.5rem;font-weight:600;letter-spacing:.15em}
.network-tool{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;padding:10px 13px 10px 9px;border:1px solid #a4d4b24a;background:linear-gradient(130deg,#1a453b,#102f2b);box-shadow:0 8px 28px #051e2b55,inset 0 1px 0 #e6ffe10c;border-radius:12px;color:#edf1e6;z-index:2;white-space:nowrap;font-size:.75rem}
.network-tool b{font-weight:400;display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:#d7ff79;color:#193c2e;font-size:1.3rem}.tool-inbox{left:19%;top:22%}.tool-ai{left:79%;top:18%}.tool-ai b{background:#f5cfb5}.tool-crm{left:87%;top:49%}.tool-crm b{background:#e0d9f1}.tool-reports{left:72%;top:75%}.tool-reports b{background:#d2e3f2}.tool-tasks{left:27%;top:77%}.tool-data{left:12%;top:48%}.tool-data b{background:#a9dbc5}
.network-caption{position:absolute;top:88%;width:100%;text-align:center;font-size:.5625rem;letter-spacing:.12em;color:#c7d9bd}.network-caption i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#d7ff79;vertical-align:middle;margin-right:7px}
.home-hero-grid .connection-web .art-motion{bottom:0;right:50%;transform:translateX(50%);white-space:nowrap;min-height:36px;padding:7px 12px;font-size:.6875rem}
@media(max-width:1100px){.network-tool{gap:6px;padding:7px;font-size:.625rem}.network-tool b{width:23px;height:23px;font-size:1.1rem}.network-core small{font-size:.4375rem}.network-caption{font-size:.4375rem;letter-spacing:.08em}}
@media(max-width:600px){.home-hero-grid .connection-web{width:100%;margin:22px 0 15px;aspect-ratio:1}.network-core>span{font-size:2rem}.network-core small{font-size:.4375rem}.network-tool{font-size:.625rem;border-radius:9px;padding:6px;gap:6px}.network-tool b{width:24px;height:24px;border-radius:6px}.network-caption{font-size:.4375rem;top:88%}.home-hero-grid .connection-web .art-motion{bottom:-4%;min-height:44px}.home-hero-grid .connection-web{margin-bottom:25px}}
.connection-web .sculpture-fallback{background-image:url('/assets/connection-web.svg')}.js .connection-web .sculpture-fallback{background-image:none}
@media(min-width:601px){.home-hero-grid .connection-web .art-motion{bottom:2%}}
/* Requested company marks, presented without an endorsement headline. */
.brand-strip{padding:28px var(--page-gutter);background:#f0f1ea;border-bottom:1px solid #142e2a16}
.brand-grid{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:36px}
.brand-mark{min-width:0;min-height:85px;display:flex;align-items:center;justify-content:center}
.brand-mark img{display:block;max-width:100%;width:200px;height:65px;object-fit:contain}.brand-bax img{width:125px;height:76px}.brand-light img{filter:brightness(0);opacity:.8;width:220px}
@media(max-width:700px){.brand-strip{padding-block:22px}.brand-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}.brand-mark{min-height:65px}.brand-mark img{height:48px}.brand-bax img{height:62px;width:102px}}
/* Put process advice and tailored solutions before the service catalogue. */
.advice-section{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,6vw,6rem);background:#e8ece4;padding-block:65px}
.advice-section h2{font-size:clamp(2.3rem,3.7vw,3.6rem);line-height:1.1;letter-spacing:-.045em;margin:20px 0}
.advice-section p{font-size:1rem;line-height:1.8;max-width:580px;color:#405349}
.advice-options{display:grid;gap:24px}.advice-options article{border-top:1px solid #142e2a30;padding-top:20px}.advice-options article>span{font-size:.65rem;letter-spacing:.09em}.advice-options h3{font-size:1.35rem;line-height:1.3;margin:13px 0 10px}
.home-hero-copy h1{font-size:clamp(3.5rem,6.1vw,6rem)}
.funnel-opening h1{font-size:clamp(3.5rem,5.1vw,5.4rem)}
@media(max-width:760px){.advice-section{grid-template-columns:1fr;gap:24px;padding-block:45px}.home-hero-copy h1{font-size:clamp(3rem,11vw,4.8rem)}}