/* Screenshot reference composition. Scoped to the portfolio calculator. */
.calc-reference { position: relative; background: #080c0c; padding: 3rem 0 2rem; overflow: clip; }
.calc-reference::before { content: ''; position: absolute; top: 3rem; right: max(0px,calc((100% - 1320px)/2)); width: 25rem; height: 34rem; background: linear-gradient(180deg,#080c0c00 45%,#080c0c),url('assets/desk.jpg') 80% center/cover; opacity: .7; pointer-events: none; }
.calc-reference>.container { position: relative; }
.calc-reference .calculator-layout { grid-template-columns: minmax(0,1.88fr) minmax(0,1fr); gap: 3rem; align-items: start; }
.calc-left { min-width: 0; }
.calc-intro { display: flex; align-items: flex-end; gap: 1.5rem; margin-bottom: 1.75rem; }
.calc-intro>div { flex: 1 0 52%; }
.calc-intro .eyebrow { font-size: .75rem; letter-spacing: .11em; color: #9c9f99; margin-bottom: .875rem; }
.calc-intro h2 { font-size: 2.25rem; line-height: 1.12; letter-spacing: -.04em; font-weight: 500; margin: 0; }
.calc-intro>p { font-size: .875rem; line-height: 1.6; color: #a7aaa4; margin-bottom: -.625rem; }
.calc-reference .calculator-form { gap: 1.5rem; }
.calc-reference fieldset { padding: 0; }
.calc-reference legend { display: flex; gap: 1.5rem; font-size: 1rem; font-weight: 600; margin-bottom: .875rem; line-height: 1.5; }
.calc-reference legend>span { font-size: .875rem; color: #d1d1c9; margin: 0; min-width: 1rem; }
.calc-reference .calc-types,.calc-reference .calc-volume,.calc-reference .calc-design,.calc-reference .calc-extras { margin-left: 2.5rem; width: calc(100% - 2.5rem); }
.calc-reference .calc-types { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.calc-reference .calc-types label { min-width: 0; min-height: 6.5rem; position: relative; display: flex; text-align: center; align-items: center; justify-content: center; padding: 1rem .5rem; background: #ffffff03; border: 1px solid #ffffff12; border-radius: .5rem; box-shadow: inset 0 1px 1px #ffffff04; }
.calc-reference .calc-types label>span { display: block; }
.calc-reference .calc-types input,.calc-reference .calc-design input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc-reference label:has(input:focus-visible) { outline: 2px solid #dedbd2; outline-offset: 4px; }
.calc-reference .calc-types label:has(:checked) { border-color: #9da29c; background: linear-gradient(130deg,#ffffff19,#ffffff08); box-shadow: inset 0 1px 2px #ffffff16; }
.calc-reference .calc-types b { font-size: .875rem; font-weight: 600; margin: 0 0 .375rem; color: #f0f0e9; }
.calc-reference .calc-types small { font-size: .75rem; line-height: 1.5; color: #afb2aa; }
.calc-reference .calc-range-heading { justify-content: flex-end; margin-top: -.75rem; }
.calc-reference #block-count { color: #c2c5bd; font-size: .875rem; }
.calc-reference #calc-blocks { appearance: none; -webkit-appearance: none; display: block; height: .5rem; border: 1px solid #7b8178; border-radius: 1rem; margin: .75rem 0 .5rem; background: linear-gradient(90deg,#eeede5 0%,#eeede5 var(--range-progress,26.32%),#363d37 var(--range-progress,26.32%),#101812 100%); }
.calc-reference #calc-blocks::-webkit-slider-thumb { appearance: none; width: 1.125rem; height: 1.125rem; border: 2px solid #f4eee0; border-radius: 50%; background: #eab976; box-shadow: 0 0 0 4px #eab9760d; cursor: grab; }
.calc-reference #calc-blocks::-moz-range-thumb { width: .875rem; height: .875rem; border: 2px solid #f4eee0; border-radius: 50%; background: #eab976; cursor: grab; }
.calc-ticks { display: flex; justify-content: space-between; font-size: .625rem; color: #959d92; }
.calc-reference .calc-help { font-size: .75rem; line-height: 1.6; margin-top: .875rem; color: #a9aea3; }
.calc-reference .calc-design { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.7fr); gap: 1rem; margin-top: 0; }
.calc-reference .calc-design label { position: relative; display: flex; align-items: center; gap: .875rem; padding: 1rem; min-height: 4.5rem; border: 1px solid #ffffff15; border-radius: .5rem; background: #ffffff04; }
.calc-reference .calc-design label:has(:checked) { border-color: #8d938a; background: #ffffff12; }
.design-switch { flex: none; display: block; height: 1.375rem; width: 2.25rem; border: 1px solid #b8bcb0; border-radius: 2rem; position: relative; }
.design-switch:after { content: ''; position: absolute; width: .9rem; height: .9rem; border-radius: 50%; background: #d6dbcd; top: .15rem; left: .2rem; transition: translate .2s ease; }
.calc-design input:checked+.design-switch:after { translate: .875rem 0; background: #fbfcf5; }
.calc-reference .calc-design b { display: block; font-size: .875rem; font-weight: 500; line-height: 1.4; }
.calc-reference .calc-design small { display: block; margin: .25rem 0 0; font-size: .75rem; color: #b0b6a8; white-space: normal; line-height: 1.4; }
.calc-reference .calc-design strong { font-size: .875rem; font-weight: 500; white-space: nowrap; margin-left: auto; }
.calc-reference .calc-extras { grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; }
.calc-reference .calc-extras label { display: block; padding: .75rem; border: 1px solid #ffffff14; border-radius: .375rem; background: #ffffff02; }
.calc-reference .calc-extras label:has(:checked) { border-color: #a4aa9c; background: #ffffff08; }
.extra-top { display: flex; gap: .5rem; align-items: flex-start; }
.calc-reference .extra-top input { margin: 0; width: 1rem; height: 1rem; accent-color: #e8ebe2; }
.calc-reference .extra-top b { font-size: .75rem; font-weight: 500; line-height: 1.4; }
.extra-price { display: flex; gap: .75rem; align-items: center; font-size: .75rem; margin-top: .625rem; color: #a8aea0; }
.extra-price i { font-style: normal; font-size: 1.125rem; line-height: 1; color: #c8d0bd; }
.calc-reference .calc-reset { margin-left: 2.5rem; font-size: .75rem; margin-top: -.5rem; color: #a9afa1; }
.calc-reference .calc-result { position: relative; top: auto; margin-top: 2.75rem; padding: 2rem; color: #eceee6; background: linear-gradient(130deg,#2b3332b8,#0c1412e6); border: 1px solid #ffffff12; border-radius: .875rem; box-shadow: 0 12px 50px #0003,inset 0 1px 1px #ffffff0a; backdrop-filter: blur(12px); }
.calc-result-title { font-size: 1rem; line-height: 1.5; color: #e6e8dd; }
.calc-project-chip { display: inline-flex; align-items: center; gap: .875rem; border: 1px solid #8d9385; border-radius: 2rem; padding: .25rem .65rem; font-size: .75rem; margin-top: .75rem; color: #e5e9da; }
.calc-project-chip:after { content: '⌄'; color: #b9c2ac; }
.calc-reference #calc-price { font-size: 2.25rem; line-height: 1.2; color: #f7f8f1; margin-top: 1.75rem; letter-spacing: -.045em; font-weight: 600; white-space: nowrap; overflow-wrap: normal; }
.calc-reference .calc-duration { display: flex; gap: .875rem; margin-top: 1.75rem; color: #cbd1c1; font-size: .875rem; line-height: 1.4; }
.calc-duration svg { width: 1.75rem; height: 1.75rem; flex: none; color: #b6bfa7; }
.calc-reference .calc-duration b { color: #e2e7d6; font-size: .875rem; font-weight: 400; }
.calc-included-list { display: grid; gap: .875rem; list-style: none; padding: 0; margin: 2rem 0 2.25rem; }
.calc-included-list li { position: relative; padding-left: 2rem; font-size: .875rem; color: #d8ddcf; line-height: 1.5; }
.calc-included-list li:before { content: '✓'; position: absolute; left: 0; top: .05rem; width: 1.375rem; height: 1.375rem; border: 1px solid #a9b29d; border-radius: 50%; text-align: center; font-size: 1rem; line-height: 1.25rem; }
.calc-reference .calc-result>.button.light { color: #242923; background: #f1eee8; border-color: #e3e3d7; min-height: 4rem; width: 100%; border-radius: .5rem; font-size: .875rem; }
.calc-reference .calc-disclaimer { margin: 1.5rem 0 0; color: #aab39e; font-size: .875rem; line-height: 1.6; max-width: 28ch; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width:1199.98px) { .calc-reference .calculator-layout { grid-template-columns: minmax(0,1.85fr) minmax(0,1fr); gap: 2rem; } .calc-intro { display: block; } .calc-intro h2 { font-size: 2rem; } .calc-intro>p { margin-top: 1rem; max-width: 45ch; } .calc-reference .calc-types { gap: .75rem; } .calc-reference .calc-types label { padding-inline: .375rem; } .calc-reference .calc-result { padding: 1.5rem; } .calc-reference #calc-price { font-size: 1.875rem; } .calc-reference .calc-design { grid-template-columns: 1fr; } .calc-reference .calc-extras { grid-template-columns: 1fr 1fr; } }
@media(max-width:991.98px) { .calc-reference .calculator-layout { grid-template-columns: 1fr; gap: 2rem; } .calc-intro { display: flex; align-items: flex-end; } .calc-intro>p { margin: 0; } .calc-reference .calc-result { margin-top: 0; max-width: none; } .calc-reference .calc-design { grid-template-columns: 1fr 1.7fr; } .calc-reference::before { top: auto; bottom: 0; height: 40rem; } }
@media(max-width:575.98px) { .calc-reference { padding-block: 3.5rem; } .calc-intro { display: block; } .calc-intro>p { margin-top: 1rem; } .calc-intro h2 { font-size: 1.875rem; } .calc-reference .calc-types { grid-template-columns: 1fr 1fr; } .calc-reference legend { gap: .875rem; font-size: 1rem; } .calc-reference .calc-types,.calc-reference .calc-volume,.calc-reference .calc-design,.calc-reference .calc-extras { margin-left: 0; width: 100%; } .calc-reference .calc-design { grid-template-columns: 1fr; } .calc-reference .calculator-form { gap: 1.75rem; } .calc-reference .calc-reset { margin-left: 0; } .calc-reference #calc-price { font-size: 2rem; } .calc-reference .calc-result { padding: 1.5rem; } .calc-reference .calc-design label { min-height: 4.5rem; } .calc-reference .calc-result>.button.light { min-height: 3.5rem; } }
/* Desktop proportions follow the 1080 px reference rather than stacking early. */
@media(min-width:992px) {
  .calc-reference { padding-top: 2.25rem; padding-bottom: 1.5rem; }
  .calc-reference .calculator-layout { grid-template-columns: minmax(0,1.88fr) minmax(0,1fr); gap: 2.25rem; }
  .calc-intro { position: relative; display: block; min-height: 6.25rem; margin-bottom: 1.25rem; }
  .calc-intro h2 { font-size: 1.875rem; }
  .calc-intro>p { position: absolute; left: 42%; top: 4rem; margin: 0; max-width: 58%; font-size: .75rem; line-height: 1.5; }
  .calc-reference .calculator-form { gap: 1.125rem; }
  .calc-reference legend { font-size: .875rem; margin-bottom: .625rem; }
  .calc-reference .calc-types { grid-template-columns: repeat(4,minmax(0,1fr)); gap: .875rem; }
  .calc-reference .calc-types label { min-height: 5rem; padding: .5rem; }
  .calc-reference .calc-types b { font-size: .8125rem; line-height: 1.4; }
  .calc-reference .calc-types small { font-size: .75rem; line-height: 1.4; }
  .calc-reference .calc-help { margin-top: .5rem; font-size: .75rem; }
  .calc-reference .calc-design { grid-template-columns: 1fr 1.7fr; }
  .calc-reference .calc-design label { min-height: 3.5rem; padding: .75rem; gap: .625rem; }
  .calc-reference .calc-design b { font-size: .75rem; }
  .calc-reference .calc-design small { font-size: .6875rem; }
  .calc-reference .calc-design strong { font-size: .75rem; }
  .calc-reference .calc-extras { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .calc-reference .calc-extras label { padding: .5rem; }
  .calc-reference .extra-top b { font-size: .6875rem; }
  .calc-reference .extra-price { margin-top: .5rem; font-size: .6875rem; }
  .calc-reference .calc-result { margin-top: 2rem; padding: 1.5rem; }
  .calc-result-title { font-size: .875rem; }
  .calc-reference #calc-price { font-size: 1.875rem; margin-top: 1.5rem; }
  .calc-reference .calc-duration { font-size: .75rem; margin-top: 1.5rem; }
  .calc-reference .calc-duration b { font-size: .75rem; }
  .calc-included-list { gap: .75rem; margin: 1.5rem 0 1.75rem; }
  .calc-included-list li { font-size: .75rem; padding-left: 1.75rem; }
  .calc-included-list li:before { width: 1.125rem; height: 1.125rem; font-size: .875rem; line-height: 1rem; }
  .calc-reference .calc-result>.button.light { min-height: 3.25rem; }
  .calc-reference .calc-disclaimer { font-size: .75rem; margin-top: 1.25rem; }
}
@media(min-width:1200px) {
  .calc-reference { padding-block: 3.5rem; }
  .calc-intro h2 { font-size: 2.25rem; }
  .calc-intro>p { font-size: .875rem; top: 4.5rem; }
  .calc-intro { margin-bottom: 2rem; }
  .calc-reference .calculator-form { gap: 1.5rem; }
  .calc-reference .calc-types label { min-height: 6rem; }
  .calc-reference .calc-types b,.calc-reference legend { font-size: 1rem; }
  .calc-reference .calc-extras b,.calc-reference .extra-price,.calc-reference .calc-design b,.calc-reference .calc-design small,.calc-reference .calc-design strong { font-size: .875rem; }
  .calc-reference .calc-types small { font-size: .875rem; }
  .calc-reference .calc-design label { min-height: 4.5rem; padding: 1rem; }
  .calc-reference .calc-extras label { padding: .75rem; }
  .calc-reference .calc-result { padding: 2rem; }
  .calc-reference #calc-price { font-size: 2.25rem; }
  .calc-reference .calc-duration,.calc-reference .calc-duration b,.calc-included-list li,.calc-reference .calc-disclaimer { font-size: .875rem; }
  .calc-included-list { margin-block: 2rem; }
  .calc-reference .calc-result>.button.light { min-height: 4rem; }
}
@media(min-width:992px) {
  .calc-reference>.container { width: auto; max-width: none; margin-left: max(4.375rem,calc((100% - 1320px)/2)); margin-right: max(2.25rem,calc((100% - 1320px)/2)); padding-inline: 0; }
  .calc-reference .calc-extras { grid-template-columns: 1.2fr .9fr 1fr 1.15fr; }
}
@media(min-width:992px) and (max-width:1199.98px) {
  .calc-reference legend { margin-bottom: .375rem; }
  .calc-reference .calc-types label { padding-inline: .25rem; }
  .calc-reference .calc-types b { font-size: .75rem; letter-spacing: -.035em; }
  .calc-reference .calc-design label { padding: .625rem; }
  .calc-reference .calc-help { margin-top: .25rem; }
  .calc-reference .calc-extras label { padding: .375rem; min-height: 3.75rem; }
  .calc-reference .extra-top { gap: .375rem; }
  .calc-reference .extra-price { margin-top: .375rem; }
  .calc-reference #calc-price { margin-top: 1.25rem; }
  .calc-reference .calc-duration { margin-top: 1.25rem; }
  .calc-reference .calc-included-list { gap: .5rem; margin: 1.25rem 0 1.5rem; }
  .calc-reference .calc-disclaimer { margin-top: 1rem; }
}
/* Illustrated calculator — final visual reference. */
.calc-visual { background: #080b0c; padding: 3.5rem 0 2rem; }
.calc-visual::before { inset: 0; width: auto; height: auto; opacity: 1; background: linear-gradient(90deg,#080b0cf5 0%,#080b0ce0 37%,#080b0c80 68%,#080b0c08 100%),url('assets/calculator-scene.jpg') right center/cover; }
.calc-visual>.container { width: auto; max-width: none; margin-left: max(5rem,calc((100% - 1600px)/2)); margin-right: max(5rem,calc((100% - 1360px)/2)); padding: 0; }
.calc-visual .calculator-layout { grid-template-columns: minmax(0,2.3fr) minmax(0,1fr); gap: 2.5rem; }
.calc-visual .calc-intro { position: relative; min-height: 8rem; margin-bottom: 2rem; }
.calc-visual .calc-intro h2 { font-size: 3rem; line-height: 1.02; letter-spacing: -.04em; font-weight: 600; }
.calc-visual .calc-intro>p { position: absolute; left: 40%; top: 2.75rem; max-width: 34%; font-size: .875rem; line-height: 1.7; margin: 0; }
.calc-header-actions { position: absolute; right: 0; top: 1rem; display: flex; gap: .625rem; }
.calc-pill { display: inline-flex; align-items: center; gap: .75rem; background: #10131366; border: 1px solid #d1c7b18a; border-radius: 2rem; padding: .75rem 1rem; font-size: .8125rem; color: #f3f0e8; white-space: nowrap; }
.calc-pill svg { width: 1rem; height: 1rem; }
.calc-visual .calculator-form { gap: 1.5rem; }
.calc-visual legend { position: relative; font-size: 1rem; gap: 1rem; margin: 0 0 .25rem; line-height: 1.5; }
.calc-visual legend>span { display: grid; place-items: center; height: 1.875rem; min-width: 2.25rem; border: 1px solid #aba99e; border-radius: 2rem; color: #e6e6dd; font-size: .8125rem; }
.calc-visual legend>i { font-size: .75rem; color: #8d928a; font-style: normal; margin-left: -.75rem; }
.calc-step-hint { font-size: .875rem; line-height: 1.6; color: #b4b5ae; margin: 0 0 .875rem 3.25rem; }
.calc-visual .calc-types,.calc-visual .calc-volume,.calc-visual .calc-design,.calc-visual .calc-extras { margin-left: 3.25rem; width: calc(100% - 3.25rem); }
.calc-visual .calc-types { grid-template-columns: repeat(4,minmax(0,1fr)); gap: .875rem; }
.calc-visual .calc-types label { position: relative; display: block; min-height: 11.5rem; padding: 1rem; overflow: hidden; text-align: left; background: linear-gradient(145deg,#151b1b9e,#0e111180); border: 1px solid #7d837459; border-radius: .875rem; }
.calc-visual .calc-types label:has(:checked),.calc-visual .calc-design label:has(:checked),.calc-visual .calc-extras label:has(:checked) { border-color: #e5d8bc; background: linear-gradient(135deg,#ffffff0d,#ffffff17); box-shadow: inset 0 0 0 1px #e5d8bc30; }
.type-radio { display: block; flex: none; position: absolute; top: 1rem; left: 1rem; width: 1.125rem; height: 1.125rem; border: 1px solid #a9b1a5; border-radius: 50%; }
input:checked+.type-radio { border-color: #e7e5d9; background: #e7e5d9; box-shadow: inset 0 0 0 5px #e7e5d9; }
input:checked+.type-radio:after { content: ''; position: absolute; width: .3rem; height: .3rem; top: .35rem; left: .35rem; border-radius: 50%; background: #1e2820; }
.calc-visual .calc-types label>.type-text { margin-left: 1.75rem; display: block; }
.calc-visual .calc-types b { font-size: .875rem; letter-spacing: -.02em; margin-bottom: .5rem; }
.calc-visual .calc-types small { font-size: .75rem; line-height: 1.5; color: #afb6ac; }
.type-picture { position: absolute; inset: 5.5rem -1.5rem -2rem 1.75rem; transform: rotate(-9deg); transform-origin: center; pointer-events: none; transition: transform .35s ease; }
@media(hover:hover) and (pointer:fine) { .calc-types label:hover .type-picture { transform: rotate(-6deg) translateY(-4px); } .calc-pill:hover { background: #ffffff14; } }
.type-art { height: 100%; min-height: 9rem; padding: .75rem; border: 1px solid #777a7077; border-radius: .375rem; overflow: hidden; background: #111716; color: #fff; box-shadow: 0 8px 20px #0007; }
.type-art small { display: block; font: .3125rem/1.4 Arial,sans-serif!important; letter-spacing: .06em; color: inherit!important; }
.type-art strong { display: block; font: 600 .875rem/1.05 Manrope,Arial,sans-serif; letter-spacing: -.04em; margin-top: .875rem; position: relative; z-index: 1; }
.type-art img { width: 100%; max-width: 100%; object-fit: cover; }
.art-landing { position: relative; }
.art-landing img { position: absolute; inset: 0; height: 100%; opacity: .65; }
.art-landing strong,.art-landing small { position: relative; z-index: 1; }
.art-business { position: relative; }
.art-business img { position: absolute; inset: 0; height: 100%; opacity: .6; }
.art-business strong,.art-business small { position: relative; z-index: 1; }
.art-business strong { font-size: .75rem; max-width: 70%; }
.art-catalog,.art-store { background: #eee9df; color: #222620; }
.art-catalog strong,.art-store strong { font-size: .625rem; }
.art-catalog>div { display: grid; grid-template-columns: repeat(3,1fr); gap: .25rem; margin-top: .625rem; }
.art-catalog img { height: 4rem; border-radius: .25rem; }
.art-store img { height: 5rem; width: 70%; margin: .5rem 0 0 auto; border-radius: .25rem; }
.art-store>span { position: absolute; left: .75rem; top: 4rem; font-size: .375rem; }
.calc-visual .calc-volume { display: grid; grid-template-columns: minmax(0,2.4fr) minmax(0,1fr); gap: 2rem; align-items: center; }
.volume-slider { position: relative; padding-top: 2rem; --range-progress: 36.84%; }
.calc-visual #block-count { position: absolute; top: .25rem; left: clamp(2rem,var(--range-progress),calc(100% - 2rem)); transform: translateX(-50%); padding: .1rem .5rem; border-radius: 1rem; color: #242722; background: #f5eddd; font-size: .75rem; line-height: 1.3; white-space: nowrap; }
.calc-visual #calc-blocks { height: .5rem; margin: 0 0 .625rem; }
.calc-visual #calc-blocks::-webkit-slider-thumb { width: 1.5rem; height: 1.5rem; background: #f1e2c1; box-shadow: 0 0 20px #e1bc6450; }
.calc-visual .calc-ticks { font-size: .75rem; }
.volume-card { display: flex; gap: 1rem; align-items: center; min-height: 6rem; padding: 1rem; border: 1px solid #a9ad9670; background: #151a19b8; border-radius: .75rem; }
.volume-card>svg { width: 3.25rem; height: 3.25rem; padding: .875rem; background: #ffffff08; border-radius: .75rem; color: #eee9dc; }
.volume-card b { font-size: 1rem; font-weight: 600; }
.volume-card small { display: block; margin-top: .5rem; font-size: .8125rem; line-height: 1.5; color: #aeb6a8; }
.calc-visual .calc-design-fieldset>.calc-step-hint { width: 29%; }
.calc-visual .calc-design { margin-left: 32%; width: 68%; margin-top: -3.75rem; grid-template-columns: 1fr 1.25fr; gap: 1rem; }
.calc-visual .calc-design label { min-height: 4.5rem; position: relative; padding: .875rem 1rem .875rem 2.75rem; gap: .75rem; border-radius: .75rem; background: #12181799; border-color: #8b918264; }
.calc-visual .calc-design .type-radio { width: 1rem; height: 1rem; left: .875rem; top: 1rem; }
.calc-design input:checked+.type-radio:after { top: .3rem; left: .3rem; width: .25rem; height: .25rem; }
.design-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border: 1px solid #ffffff0d; background: #11171480; border-radius: .625rem; }
.design-icon svg { width: 1.375rem; height: 1.375rem; }
.calc-visual .calc-design b { font-size: .875rem; }
.calc-visual .calc-design small { font-size: .75rem; line-height: 1.5; }
.calc-visual .calc-design strong { font-size: .75rem; color: #bfc7b3; }
.calc-visual .calc-extras { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; }
.calc-visual .calc-extras label { display: flex; gap: .75rem; align-items: center; padding: .75rem; border-radius: .5rem; min-height: 3.75rem; border-color: #939a8066; background: #111713c9; }
.calc-visual .calc-extras input { width: 1rem; height: 1rem; position: absolute; align-self: flex-start; margin: 0; accent-color: #f0e9d9; }
.extra-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; margin-left: 1.125rem; }
.extra-icon svg { width: 1.5rem; height: 1.5rem; }
.calc-visual .calc-extras b { font-size: .75rem; font-weight: 400; line-height: 1.3; }
.calc-visual .calc-extras small { margin: .375rem 0 0; font-size: .75rem; line-height: 1.3; color: #c0c5b7; }
.calc-visual .calc-reset { display: flex; gap: .75rem; margin-left: 0; align-items: center; font-size: .875rem; color: #b4baaa; }
.calc-reset svg { width: 1rem; height: 1rem; }
.calc-visual .calc-result { margin: -.875rem 0 0; padding: 1.75rem; border: 1px solid #c6bea361; border-radius: 1rem; background: linear-gradient(130deg,#171e1ce8,#0a1111eb); backdrop-filter: blur(14px); }
.result-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .25rem; background: #ffffff08; border-radius: .625rem; margin-bottom: 1.75rem; }
.result-tabs button { font-size: .8125rem; padding: .75rem .5rem; border: 0; background: none; color: #b9c1b4; border-radius: .5rem; white-space: nowrap; }
.result-tabs button[aria-selected=true] { background: #ffffff12; color: #f3f5eb; }
.calc-result-label { color: #c0c6b8; font-size: .875rem; margin-bottom: .75rem; }
.calc-visual #calc-price { font-size: 2.25rem; font-weight: 700; margin: 0; color: #fff7e6; letter-spacing: -.035em; }
.calc-visual .calc-duration { font-size: .875rem; margin-top: 1.5rem; gap: .75rem; }
.calc-visual .calc-duration b { font-size: .875rem; display: inline; font-weight: 400; }
.calc-visual .calc-duration svg { width: 1.25rem; height: 1.25rem; margin-top: .1rem; }
.calc-visual .calc-included-list { padding-top: 1.5rem; border-top: 1px solid #e0dfc629; margin: 1.5rem 0 2rem; gap: 1.125rem; }
.calc-visual .calc-included-list li { font-size: .875rem; line-height: 1.5; color: #dce1d2; padding-left: 2rem; }
.calc-visual .calc-included-list li:before { width: 1.375rem; height: 1.375rem; font-size: 1rem; line-height: 1.25rem; }
.calc-visual .calc-result>.button.light { min-height: 3.5rem; color: #111b13; background: #f4ecdc; border-color: #f4ecdc; font-weight: 600; }
.calc-visual .calc-disclaimer { font-size: .8125rem; line-height: 1.5; color: #a8b1a0; margin-top: 1.25rem; }
.result-tab-panel[hidden] { display: none; }
#included-panel { min-height: 25rem; }
#included-panel h3 { font-size: 1.5rem; margin: 1.75rem 0; }
.included-steps { margin: 0; padding-left: 1.25rem; display: grid; gap: 1.5rem; color: #e0e4d7; }
.included-steps b { display: block; font-size: .9375rem; }
.included-steps span { display: block; font-size: .875rem; color: #b2beaa; line-height: 1.6; margin-top: .5rem; }
.calc-photo-note { position: absolute; top: 3.5rem; right: -8.5rem; color: #171b12; font-family: 'Segoe Print',cursive; font-size: 1.125rem; line-height: 1.2; transform: rotate(-6deg); }
.calc-photo-note span { display: block; margin-top: .75rem; font-size: 2rem; }
@media(max-width:1599.98px) { .calc-photo-note { display: none; } .calc-visual .calc-intro h2 { font-size: 2.5rem; } .calc-header-actions { top: -.5rem; } .calc-visual .calc-intro>p { left: 43%; top: 2.5rem; max-width: 32%; } .calc-visual .calc-extras label { gap: .375rem; } .extra-icon { width: 1.5rem; margin-left: .875rem; } .calc-visual #calc-price { font-size: 2rem; } }
@media(max-width:1199.98px) { .calc-visual>.container { margin-inline: 3rem; } .calc-visual .calculator-layout { grid-template-columns: minmax(0,1.8fr) minmax(0,1fr); gap: 1.5rem; } .calc-visual .calc-intro h2 { font-size: 2.25rem; } .calc-header-actions { position: static; margin-top: 1.5rem; } .calc-visual .calc-intro>p { left: 48%; top: 2rem; max-width: 50%; } .calc-visual .calc-types { gap: .5rem; } .calc-visual .calc-types label { padding: .75rem .5rem; min-height: 10.5rem; } .calc-visual .type-radio { left: .625rem; top: .75rem; } .calc-visual .calc-types label>.type-text { margin-left: 1.625rem; } .calc-visual .calc-types b { font-size: .75rem; } .calc-visual .calc-types small { font-size: .6875rem; } .type-picture { left: 1rem; inset-block-start: 5rem; } .calc-visual .calc-volume { grid-template-columns: 1fr; gap: 1rem; } .volume-card { min-height: auto; } .volume-card small br { display: none; } .calc-visual .calc-design-fieldset>.calc-step-hint { width: auto; } .calc-visual .calc-design { margin: 0 0 0 3.25rem; width: calc(100% - 3.25rem); grid-template-columns: 1fr; } .calc-visual .calc-extras { grid-template-columns: 1fr 1fr; } .calc-visual .calc-result { padding: 1.25rem; } .result-tabs button { font-size: .75rem; } .calc-visual #calc-price { font-size: 1.75rem; } .calc-visual .calc-included-list li { font-size: .8125rem; } }
@media(max-width:991.98px) { .calc-visual .calculator-layout { grid-template-columns: 1fr; gap: 2.5rem; } .calc-visual .calc-intro>p { position: static; max-width: 100%; margin-top: 1.25rem; } .calc-visual .calc-intro { min-height: 0; } .calc-visual .calc-types { grid-template-columns: repeat(4,minmax(0,1fr)); } .calc-visual .calc-types b { font-size: .875rem; } .calc-visual .calc-types small { font-size: .75rem; } .calc-visual .calc-design { grid-template-columns: 1fr 1fr; } .calc-visual .calc-volume { grid-template-columns: minmax(0,2fr) minmax(0,1fr); } .calc-visual .calc-result { margin: 0; padding: 1.75rem; } .calc-visual::before { background-position: 80% center; opacity: .55; } }
@media(max-width:575.98px) { .calc-visual { padding-block: 3.5rem; } .calc-visual>.container { margin-inline: 1.25rem; } .calc-visual .calc-intro h2 { font-size: 2rem; } .calc-visual .calc-types,.calc-visual .calc-volume,.calc-visual .calc-design,.calc-visual .calc-extras { margin-left: 0; width: 100%; } .calc-visual .calc-types { grid-template-columns: 1fr 1fr; gap: .75rem; } .calc-visual .calc-types label { min-height: 11rem; } .calc-visual .calc-types small { font-size: .75rem; } .calc-step-hint { margin-left: 0; font-size: .875rem; } .calc-visual .calc-volume { grid-template-columns: 1fr; } .volume-card { display: none; } .calc-visual .calc-design { grid-template-columns: 1fr; } .calc-visual .calc-design .type-radio { top: .875rem; left: .75rem; } .calc-visual .calc-extras { grid-template-columns: 1fr; } .calc-visual .calc-extras label { padding: 1rem; } .calc-visual .calc-extras b,.calc-visual .calc-extras small { font-size: .875rem; } .calc-visual legend { font-size: 1rem; } .calc-visual legend>span { min-width: 2rem; } .calc-header-actions { gap: .5rem; flex-wrap: wrap; } .calc-pill { font-size: .75rem; padding-inline: .75rem; } .calc-visual::before { background-image: linear-gradient(#080b0ce8,#080b0ce8),url('assets/calculator-scene.jpg'); } .calc-visual .calc-result { padding: 1.25rem; } .calc-visual #calc-price { font-size: 2rem; } #included-panel { min-height: 25rem; } }
@media(prefers-reduced-motion:reduce) { .type-picture { transition: none; } }
@media(min-width:1200px) {
  .calc-visual { padding-bottom: 1rem; }
  .calc-visual .calc-intro { margin-bottom: 1.5rem; }
  .calc-visual .calc-step-hint { margin-bottom: .5rem; }
  .calc-visual .calc-types label { min-height: 11.25rem; }
  .calc-visual .calc-volume { position: relative; display: block; margin-top: -1rem; }
  .calc-visual .volume-slider { width: 70%; padding-top: 1rem; }
  .calc-visual .volume-card { position: absolute; right: 0; top: -4rem; width: 28%; }
  .calc-visual .calc-result { margin-top: -2rem; }
  .calc-visual .calc-included-list { gap: .875rem; margin-bottom: 1.5rem; }
  .calc-visual #calc-price { font-size: 2.5rem; }
}
.calc-visual .calc-pill { background: #090d0dbb; }
.calc-visual .calc-disclaimer { max-width: none; }
.calc-visual #block-count { top: -.25rem; }
@media(min-width:1200px) and (max-width:1599.98px) { .calc-visual .type-picture { top: 6.5rem; } .calc-visual .calc-types label { min-height: 12.5rem; } }
@media(max-width:575.98px) { .calc-visual .type-picture { top: 7rem; } .calc-visual .calc-types label { min-height: 12.5rem; } }