/* A roomier portfolio rhythm; business demos keep their own spacing. */
body:not([data-project]) .hero { min-height: 42rem; }
body:not([data-project]) .hero>.container { padding-top: 4.5rem; padding-bottom: 4rem; }
body:not([data-project]) .hero-stats { margin-top: 3rem; }
.services,.projects,.process,.contact { padding-block: 6rem; }
.services .section-heading,.projects .section-heading { margin-bottom: 2.75rem; }
.service-card { min-height: 20rem; padding: 1.5rem; }
.process h2 { margin-bottom: 3rem; }
.growth-section { padding: 6.5rem 0; }
.growth-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; margin-bottom: 3rem; }
.growth-heading h2,.faq-layout h2 { font-size: 2.5rem; line-height: 1.13; letter-spacing: -.04em; margin: .75rem 0 0; }
.growth-heading>p { max-width: 26rem; font-size: 1rem; line-height: 1.7; color: #bdbdbd; }
.growth-section .eyebrow { color: #b3b3b3; }
.growth-value,.growth-faq { background: #f1eee8; color: #1c1c1c; }
.growth-value .eyebrow,.growth-faq .eyebrow { color: #626262; }
.growth-value .growth-heading>p { color: #5c5c5c; }
.growth-benefits article { border-top: 1px solid #c7c7c7; padding: 1.75rem 0 0; height: 100%; }
.growth-number { display: block; font-size: .75rem; letter-spacing: .12em; color: #626262; margin-bottom: 2rem; }
.growth-benefits h3 { font-size: 1.25rem; line-height: 1.35; margin: 0 0 1rem; }
.growth-benefits p { color: #575757; font-size: 1rem; line-height: 1.7; max-width: 34ch; }
.growth-pricing { background: #151515; }
.pricing-card { padding: 2rem; display: flex; flex-direction: column; height: 100%; border: 1px solid #515151; border-radius: .75rem; background: #1b1b1b; }
.pricing-card.featured { background: #282828; border-color: #acacac; }
.pricing-label { color: #c6c6c6; font-size: .75rem; letter-spacing: .06em; min-height: 2.5rem; }
.pricing-card h3 { font-size: 1.625rem; margin: 1rem 0; line-height: 1.2; }
.pricing-card>p:not(.pricing-label) { color: #c6c6c6; font-size: 1rem; line-height: 1.65; }
.pricing-price { padding: 2rem 0 1.75rem; font-size: 1rem; white-space: nowrap; color: #f0f0f0; }
.pricing-price b { font-size: 2.25rem; font-weight: 500; letter-spacing: -.04em; }
.pricing-card ul { padding: 1.5rem 0 0; margin: 0 0 2rem; list-style: none; border-top: 1px solid #ffffff25; color: #dcdcdc; }
.pricing-card li { position: relative; padding-left: 1.25rem; margin-bottom: .875rem; font-size: .875rem; line-height: 1.6; }
.pricing-card li:before { content: '✓'; position: absolute; left: 0; color: #c6c6c6; }
.pricing-card>.button { margin-top: auto; width: 100%; white-space: normal; min-height: 3rem; }
.pricing-note { color: #bcbcbc; font-size: .875rem; margin-top: 1.75rem; max-width: 75ch; }
.growth-calculator { background: #0c0c0c; border-top: 1px solid #ffffff16; }
.calculator-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 3rem; align-items: start; }
.calculator-form { display: grid; gap: 2.25rem; }
.calculator-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.calculator-form legend { font-size: 1.125rem; padding: 0; margin-bottom: 1.25rem; font-weight: 600; }
.calculator-form legend>span { font-size: .875rem; font-weight: 400; color: #c2c2c2; margin-right: .875rem; }
.calc-types { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
.calc-types label,.calc-design label,.calc-extras label { cursor: pointer; }
.calc-types label { position: relative; display: flex; gap: .625rem; align-items: flex-start; background: #1b1b1b; border: 1px solid #5d5d5d; padding: 1.125rem; border-radius: .5rem; }
.calculator-form input[type=radio],.calculator-form input[type=checkbox] { accent-color: #d5d5d5; flex: none; width: 1.125rem; height: 1.125rem; margin: .15rem 0 0; }
.calc-types label:has(:checked) { background: #303030; border-color: #d0d0d0; }
.calc-types b { display: block; font-size: .875rem; margin-bottom: .5rem; }
.calc-types small { display: block; font-size: .75rem; color: #c9c9c9; line-height: 1.5; }
.calc-range-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 1rem; }
.calc-range-heading output { color: #dddddd; white-space: nowrap; }
#calc-blocks { width: 100%; margin: 1.5rem 0 .75rem; accent-color: #d5d5d5; cursor: pointer; }
.calc-help { font-size: .875rem; color: #bebebe; line-height: 1.6; }
.calc-design { display: grid; gap: 1rem; margin-top: 1.5rem; }
.calc-design label { display: flex; gap: .75rem; font-size: 1rem; }
.calc-design small { font-size: .875rem; color: #c1c1c1; margin-left: .375rem; white-space: nowrap; }
.calc-extras { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.calc-extras label { display: flex; gap: .875rem; padding: 1rem 0; border-bottom: 1px solid #4d4d4d; }
.calc-extras b { display: block; font-size: .875rem; font-weight: 500; }
.calc-extras small { display: block; font-size: .875rem; margin-top: .375rem; color: #c3c3c3; }
.calc-reset { border: 0; background: none; padding: 0; color: #cdcdcd; font-size: .875rem; text-decoration: underline; text-underline-offset: .3rem; justify-self: start; }
.calc-result { position: sticky; top: 2rem; padding: 2rem; background: #f1eee8; color: #212121; border-radius: .75rem; }
.calc-result .eyebrow { color: #606060; }
.calc-total>p:first-child { font-size: 1rem; margin: 1.75rem 0 .5rem; }
#calc-price { display: block; font-size: clamp(1.5rem,2.2vw,2rem); font-weight: 600; line-height: 1.2; letter-spacing: -.04em; overflow-wrap: anywhere; }
.calc-duration { font-size: .875rem; line-height: 1.6; color: #5d5d5d; margin-top: 1rem; }
.calc-duration b { display: block; font-weight: 500; color: #2c2c2c; }
.calc-breakdown { display: grid; gap: .625rem; margin-top: 1.75rem; padding-block: 1.5rem; border-block: 1px solid #cccccc; }
.calc-breakdown>div { display: flex; gap: 1rem; justify-content: space-between; font-size: .875rem; line-height: 1.5; }
.calc-breakdown>div>span:last-child { white-space: nowrap; }
.calc-included { font-size: .875rem; line-height: 1.65; color: #565656; margin: 1.25rem 0; }
.calc-result>.button.light { background: #303030; color: #f2f2f2; border-color: #303030; width: 100%; white-space: normal; min-height: 3rem; }
.calc-disclaimer { font-size: .75rem; line-height: 1.65; margin-top: 1rem; color: #5e5e5e; }
.growth-handoff { background: #202020; }
.handoff-grid article { display: flex; align-items: flex-start; gap: 1.5rem; padding: 2rem; border-top: 1px solid #616161; height: 100%; }
.handoff-grid article>span { font-size: 1rem; color: #cccccc; }
.handoff-grid h3 { font-size: 1.25rem; line-height: 1.35; margin: 0 0 1rem; }
.handoff-grid p { font-size: 1rem; line-height: 1.7; color: #c9c9c9; }
.growth-cta { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 2rem 0 0; margin-top: 2.75rem; border-top: 1px solid #616161; }
.growth-cta h3 { font-size: 1.5rem; margin-bottom: .75rem; }
.growth-cta p { color: #c9c9c9; font-size: 1rem; max-width: 44ch; }
.growth-cta>.button { flex-shrink: 0; }
.faq-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 5rem; }
.faq-intro { font-size: 1rem; line-height: 1.7; color: #5c5c5c; max-width: 31ch; margin: 1.5rem 0; }
.growth-faq .text-link { color: #444444; }
.faq-list details { border-bottom: 1px solid #c4c4c4; }
.faq-list details:first-child { border-top: 1px solid #c4c4c4; }
.faq-list summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding: 1.5rem 0; font-size: 1.0625rem; line-height: 1.5; cursor: pointer; list-style: none; font-weight: 600; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:after { content: '+'; font-size: 1.375rem; line-height: 1.2; color: #606060; flex: none; }
.faq-list details[open] summary:after { content: '−'; }
.faq-list details>p { font-size: 1rem; line-height: 1.75; color: #535353; padding: 0 2rem 1.75rem 0; }
.faq-list summary:focus-visible { outline: 2px solid #616161; outline-offset: 4px; }
@media(max-width:1199.98px) { .calculator-layout { gap: 2rem; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); } .calc-types { grid-template-columns: 1fr; } .calc-types label { padding: .875rem 1rem; } .calc-types label>span { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; } .calc-types b { margin: 0; } .faq-layout { gap: 3rem; } }
@media(max-width:991.98px) { .growth-section { padding-block: 5rem; } .growth-heading { gap: 2rem; } .growth-heading h2,.faq-layout h2 { font-size: 2.125rem; } .pricing-card { padding: 2rem; } .pricing-label { min-height: 0; } .calculator-layout { grid-template-columns: 1fr 1fr; gap: 1.5rem; } .calc-extras { grid-template-columns: 1fr; } .calc-result { padding: 1.5rem; } .faq-layout { grid-template-columns: 1fr; gap: 2.5rem; } .faq-intro { max-width: 55ch; } .handoff-grid article { padding-inline: 0; } }
@media(max-width:767.98px) { body:not([data-project]) .hero { min-height: auto; } body:not([data-project]) .hero>.container { padding-top: 3rem; padding-bottom: 3rem; } .services,.projects,.process,.contact,.growth-section { padding-block: 4rem; } .growth-heading { display: block; margin-bottom: 2.5rem; } .growth-heading>p { margin-top: 1.5rem; max-width: 100%; } .growth-heading h2,.faq-layout h2 { font-size: 2rem; } .growth-benefits article { padding-bottom: 1rem; } .growth-number { margin-bottom: 1.25rem; } .growth-benefits p { max-width: 100%; } .calculator-layout { grid-template-columns: 1fr; gap: 2.5rem; } .calc-types { grid-template-columns: 1fr; } .calc-result { position: static; padding: 1.5rem; } #calc-price { font-size: 2rem; } .growth-cta { align-items: flex-start; flex-direction: column; gap: 1.5rem; } .pricing-card { padding: 1.5rem; } .handoff-grid article { padding-block: 1.5rem; } .faq-list summary { font-size: 1rem; } .process h2 { margin-bottom: 2.5rem; } .hero-stats { gap: 1.5rem; } }
/* Interactive scenarios replace the long pricing and conditions sections. */
.growth-heading { margin-bottom: 2.5rem; }
.scenario-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-bottom: 1px solid #aaa8a1; }
.scenario-tabs button { display: flex; justify-content: space-between; gap: 1rem; text-align: left; background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 1.25rem 0; margin-right: 2rem; color: #5b5b57; font-size: 1rem; line-height: 1.5; }
.scenario-tabs button:last-child { margin-right: 0; }
.scenario-tabs button[aria-selected=true] { color: #151616; border-bottom-color: #151616; }
.scenario-tabs button>span { font-size: .75rem; margin-top: .25rem; }
.scenario-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); align-items: center; gap: 4rem; padding-top: 3rem; }
.scenario-format { color: #64635d; font-size: .75rem; letter-spacing: .08em; margin-bottom: 1rem; }
.scenario-copy h3 { font-size: 1.875rem; line-height: 1.2; letter-spacing: -.035em; margin-bottom: 1rem; }
.scenario-copy>p:not(.scenario-format) { color: #55564f; font-size: 1rem; line-height: 1.65; max-width: 37ch; }
.scenario-copy .text-link { display: inline-block; margin-top: 1.5rem; }
.scenario-flow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: .75rem; }
.scenario-flow>div { position: relative; min-height: 12rem; padding: 1.25rem; border: 1px solid #c1bfb7; border-radius: .625rem; background: #e8e5de; }
.scenario-flow>div:last-child { background: #181b1b; color: #f1eee8; border-color: #181b1b; }
.scenario-flow small { display: block; font-size: .625rem; letter-spacing: .06em; color: #61615b; white-space: nowrap; }
.scenario-flow>div:last-child small { color: #c3c0b8; }
.scenario-flow b { display: block; font-weight: 500; font-size: 1rem; margin-top: 1.5rem; }
.flow-lines { display: block; margin-top: 1.5rem; height: 1.75rem; background: repeating-linear-gradient(180deg,#b5b3ab 0px,#b5b3ab 2px,transparent 2px,transparent 9px); opacity: .65; width: 78%; }
.flow-dot { position: absolute; right: 1rem; bottom: 1rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid #92938c; border-radius: 50%; font-size: 1.25rem; }
.flow-arrow { color: #696a62; }
.calc-presets { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.75rem; }
.calc-presets button { border: 1px solid #656661; border-radius: 2rem; padding: .75rem 1.25rem; background: transparent; color: #cecec8; display: flex; gap: .75rem; font-size: .875rem; line-height: 1.5; }
.calc-presets button b { font-weight: 500; color: #f1eee8; }
.calc-presets button[aria-pressed=true] { background: #f1eee8; color: #1c1d1c; border-color: #f1eee8; }
.calc-presets button[aria-pressed=true] b { color: #1c1d1c; }
body:focus-visible,body :focus-visible { outline-color: #aaa59a; }
.growth-faq .text-link { margin-top: 1.75rem; display: inline-block; }
@media(max-width:1199.98px) { .scenario-panel { grid-template-columns: 1fr; gap: 2.5rem; } .scenario-copy>p:not(.scenario-format) { max-width: 60ch; } .scenario-flow { max-width: 48rem; } }
@media(max-width:767.98px) { .scenario-tabs { grid-template-columns: 1fr; border: 0; gap: .625rem; } .scenario-tabs button { margin: 0; padding: 1rem; border: 1px solid #aaa8a1; border-radius: .375rem; } .scenario-tabs button[aria-selected=true] { background: #1b1d1c; color: #f1eee8; border-color: #1b1d1c; } .scenario-panel { gap: 2rem; padding-top: 2rem; } .scenario-copy h3 { font-size: 1.625rem; } .scenario-flow { gap: .375rem; } .scenario-flow>div { padding: .75rem; min-height: 10rem; } .scenario-flow b { font-size: .875rem; overflow-wrap: anywhere; } .scenario-flow small { font-size: .5rem; } .flow-dot { height: 1.75rem; width: 1.75rem; right: .5rem; bottom: .75rem; } .calc-presets { display: grid; grid-template-columns: 1fr; } .calc-presets button { justify-content: space-between; border-radius: .5rem; } }
.scenario-flow small { font-size: .75rem; white-space: normal; }
@media(max-width:767.98px) {
  .scenario-flow { grid-template-columns: 1fr; gap: .5rem; }
  .scenario-flow>div { min-height: 6rem; padding: 1rem; }
  .scenario-flow b { margin-top: .5rem; font-size: 1rem; }
  .scenario-flow small { font-size: .75rem; }
  .flow-lines { display: none; }
  .flow-arrow { justify-self: center; rotate: 90deg; }
}
.calc-mobile-summary { display: none; }
@media(max-width:767.98px) {
  .calc-mobile-summary { display: flex; align-self: start; align-items: center; justify-content: space-between; gap: .75rem; position: sticky; top: .75rem; z-index: 10; padding: .875rem 1rem; border: 1px solid #b7b4aa; border-radius: .5rem; background: #f1eee8; color: #202221; box-shadow: 0 4px 20px #0004; }
  .calc-mobile-summary small { font-size: .75rem; color: #5d6058; display: block; }
  .calc-mobile-summary output { display: block; font-size: 1.125rem; line-height: 1.5; font-weight: 600; }
  .calc-mobile-summary>a { font-size: .875rem; padding-block: .5rem; white-space: nowrap; }
}
