/* Shared brand tokens. Home and services consume the same palette. */
body.studio-theme,body.services-slate{
 --brand-slate:#4f5264;
 --brand-ink:#40475a;
 --brand-muted:#646d80;
 --brand-paper:#faf8f3;
 --brand-white:#f7f7f9;
 --brand-soft-white:#d6d8e1;
 --brand-gold:#e4bf76;
 --brand-gold-bright:#ffcf70;
 --brand-gold-glow:#e4ad4355;
 --brand-light-line:#40475a18;
 --brand-dark-line:#ffffff18;
 --brand-button:linear-gradient(120deg,#f0c66b,#e1ae49);
 --studio-ink:var(--brand-ink);
 --studio-muted:var(--brand-muted);
 --studio-paper:var(--brand-paper);
 --studio-gold:var(--brand-gold);
 --studio-heading:var(--brand-white);
 --studio-heading-gold:var(--brand-gold);
 --gold:var(--brand-gold);
 --gold2:var(--brand-gold-bright);
}
/* Light chapters use slate for text and gold for symbols and emphasis. */
.studio-theme :is(#reviews,#why,#contact){color:var(--brand-ink)}
.studio-theme :is(#reviews,#why,#contact) .kicker{color:var(--brand-ink)}
.studio-theme :is(#reviews,#why,#contact) h2{color:var(--brand-ink)}
.studio-theme :is(#reviews,#why,#contact) h2 span{color:var(--brand-gold)}
.studio-theme #reviews :is(.selected-review-author,.selected-review-type,.selected-review-copy>a,.review-tab-name){color:var(--brand-ink)}
.studio-theme #reviews .selected-review-type svg{stroke:var(--brand-ink)}
.studio-theme #reviews .selected-review-copy blockquote:before{color:var(--brand-gold)}
.studio-theme #reviews :is(.selected-review-description p,.selected-review-description small,.review-demo-note){color:var(--brand-muted)}
.studio-theme #reviews .selected-review-copy>a{border-radius:8px;transition:color .2s,background .2s}
.studio-theme #reviews .selected-review-copy>a:hover{color:var(--brand-ink);background:#4f52640a}
.studio-theme #reviews .review-circle-arrow{color:var(--brand-ink);border-color:var(--brand-light-line)}
.studio-theme #reviews .review-circle-arrow:hover:not(:disabled){background:var(--brand-gold);color:var(--brand-ink)}
.studio-theme #reviews .review-project-tab:hover,.studio-theme #reviews .review-project-tab[aria-selected=true]{color:var(--brand-ink)}
.studio-theme #reviews :is(.selected-review-type,.selected-review-author){font-weight:600}
/* Benefit symbols match the round slate and gold hero symbols. */
.studio-theme #why .value-symbol{background:var(--brand-slate);color:var(--brand-gold)}
.studio-theme #why .value-symbol svg{stroke:var(--brand-gold)}
.studio-theme #why .value-card:hover .value-symbol{box-shadow:0 0 16px var(--brand-gold-glow)}
.studio-theme #why :is(.value-top>span,.value-outcome,.values-bottom a){color:var(--brand-ink)}
.studio-theme #why .value-mark{background:var(--brand-gold-bright)}
.studio-theme #why .value-outcome{border-color:var(--brand-light-line)}
.studio-theme #why .values-bottom a{border-color:var(--brand-gold);font-weight:600}
.studio-theme #why .values-bottom a:hover{color:var(--brand-ink);background:#4f526408}
.studio-theme #why .values-bottom a span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--brand-ink);background:var(--brand-gold)}
/* Calculator controls form a light surface, regardless of the section behind it. */
.studio-theme #prices .calc-controls{color:var(--brand-ink)}
.studio-theme #prices .calc-controls :is(.calc-field>span,.calc-extras legend,.calc-parameter>label,.calc-extras span){color:var(--brand-ink)}
.studio-theme #prices .calc-controls :is(.calc-help,.calc-field .calc-help){color:var(--brand-muted)}
.studio-theme #prices .calc-controls :is(.calc-extras b,input[type=number],.calc-pages b){color:var(--brand-ink)}
.studio-theme #prices .calc-extras label{background:#f0f1f5}
.studio-theme #prices .calc-extras label:hover,.studio-theme #prices .calc-extras label:has(input:checked){background:#4f526410}
.studio-theme #prices .calc-extras input{accent-color:var(--brand-slate)}
.studio-theme #prices .calc-range-controls input[type=range]{appearance:none;-webkit-appearance:none;height:8px;border-radius:20px;background:var(--brand-slate);accent-color:var(--brand-gold-bright)}
.studio-theme #prices .calc-range-controls input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:20px;background:var(--brand-slate)}
.studio-theme #prices .calc-range-controls input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;border:0;border-radius:50%;margin-top:-7px;background:var(--brand-gold-bright);box-shadow:0 0 0 4px #e4bf7620;transition:box-shadow .2s}
.studio-theme #prices .calc-range-controls input[type=range]::-moz-range-track{height:8px;border-radius:20px;background:var(--brand-slate)}
.studio-theme #prices .calc-range-controls input[type=range]::-moz-range-progress{height:8px;border-radius:20px;background:var(--brand-slate)}
.studio-theme #prices .calc-range-controls input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--brand-gold-bright);box-shadow:0 0 0 4px #e4bf7620}
.studio-theme #prices .calc-range-controls input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px #e4bf7630,0 0 14px var(--brand-gold-glow)}
.studio-theme #prices :is(.calc-result strong,.calc-breakdown b){color:var(--brand-gold-bright)}
.studio-theme #prices .calc-result :is(.calc-note,.calc-scope,small,.calc-breakdown li){color:var(--brand-soft-white)}
.studio-theme #prices .calc-result a,.studio-theme #contact form button,.studio-theme .hero .gold{background:var(--brand-button);color:var(--brand-ink)}
.studio-theme :is(#reviews,#why,#prices,#contact) a:focus-visible,.studio-theme #prices :is(input,select):focus-visible{outline:2px solid var(--brand-gold-bright);outline-offset:4px}
.studio-theme #works .real-project-caption small,.studio-theme #works .real-project-caption>span,.studio-theme #works .real-project-status{color:var(--brand-ink)}
.studio-theme #works .real-project-caption>span{background:var(--brand-gold)}
/* Services use these same tokens, rather than independent brown accents. */
.services-slate .tariff-heading .kicker{color:var(--brand-ink)}
.services-slate :is(.tariff-price,.tariff-actions summary,.tariff-card li:before,.extra-card strong,.extra-card a){color:var(--brand-ink)}
.services-slate .tariff-top svg,.services-slate .extra-card>svg{background:var(--brand-slate);stroke:var(--brand-gold)}
.services-slate .tariff-card:hover svg,.services-slate .extra-card:hover>svg{background:var(--brand-gold);stroke:var(--brand-ink)}
.services-slate .tariff-order,.services-slate .featured .tariff-order{color:var(--brand-ink)}
.services-slate .tariff-order{background:#4f526410}
.services-slate .tariff-section:nth-of-type(odd) :is(.kicker,.tariff-price,.tariff-actions summary,.tariff-card li:before){color:var(--brand-gold-bright)}
.services-slate .tariff-section:nth-of-type(odd) .tariff-top svg{background:#ffffff08;stroke:var(--brand-gold)}
.services-slate .tariff-section:nth-of-type(odd) .tariff-card:hover svg{background:var(--brand-gold);stroke:var(--brand-ink)}
/* Clear interaction states on service cards, including open details. */
.services-slate :is(.tariff-card,.extra-card){transition:background .2s,box-shadow .2s}
.services-slate :is(.tariff-card,.extra-card):is(:hover,:focus-within),.services-slate .tariff-card:has(details[open]){background:#edeef4;box-shadow:inset 0 3px 0 var(--brand-gold-bright),0 10px 28px #40475a22}
.services-slate .tariff-section:nth-of-type(odd) .tariff-card:is(:hover,:focus-within),.services-slate .tariff-section:nth-of-type(odd) .tariff-card:has(details[open]){background:#ffffff20;box-shadow:inset 0 3px 0 var(--brand-gold-bright),0 0 20px #e4ad4320}
.services-slate .tariff-card:has(details[open]) .tariff-top svg{background:var(--brand-gold-bright);stroke:var(--brand-ink)}
.services-slate .tariff-actions summary:hover,.services-slate .tariff-actions details[open] summary{font-weight:700;color:var(--brand-ink)}
.services-slate .tariff-section:nth-of-type(odd) .tariff-actions summary:hover,.services-slate .tariff-section:nth-of-type(odd) .tariff-actions details[open] summary{color:var(--brand-gold-bright)}
.services-slate .extra-card a:hover{background:var(--brand-gold);border-color:transparent;border-radius:8px}
.services-slate .pricing-nav a[aria-current=true]{background:var(--brand-gold-bright);color:var(--brand-ink);box-shadow:0 0 18px var(--brand-gold-glow)}
.services-slate .tariff-order:active{background:var(--brand-gold-bright)}
/* Gold device labels and plain text project links. */
.studio-theme #reviews .selected-review-type{color:var(--brand-gold-bright);background:transparent;border-radius:0;padding:0;width:fit-content}
.studio-theme #reviews .selected-review-type span{color:inherit}
.studio-theme #reviews .selected-review-type svg{stroke:var(--brand-gold-bright)}
.studio-theme #reviews .selected-review-copy>a{color:var(--brand-ink);background:transparent;border-radius:0;padding:10px 0;gap:20px;transition:color .2s}
.studio-theme #reviews .selected-review-copy>a:is(:hover,:focus-visible){color:#e58a24;background:transparent;box-shadow:none;text-shadow:none}
/* Portfolio highlights without moving either the card or the devices. */
.studio-theme #works .real-project{position:relative;transform:none;transition:background .3s,box-shadow .3s}
.studio-theme #works .real-project:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand-gold-bright);z-index:2;pointer-events:none;opacity:0;transition:opacity .3s}
.studio-theme #works .real-project:is(:hover,:focus-visible):before{opacity:1}
.studio-theme #works .real-project:is(:hover,:focus-visible){transform:none;background:#edeef4;box-shadow:0 10px 28px #40475a22}
.studio-theme #works .real-project .project-devices{transition:background .3s}
.studio-theme #works .real-project:is(:hover,:focus-visible) .project-devices{background:#edeef4}
.studio-theme #works .real-project .project-desktop,.studio-theme #works .real-project:hover .project-desktop{transform:perspective(900px) rotateY(-5deg)}
.studio-theme #works .real-project .project-mobile,.studio-theme #works .real-project:hover .project-mobile{transform:rotate(5deg)}
/* Raise the compact process strip by one tenth of its previous top gap. */
.studio-theme #steps{padding-top:0}


/* Promotion actions: a complete button, with centered text and arrow. */
.services-slate #promotion .extra-card>a{align-items:center;gap:16px;min-height:48px;box-sizing:border-box;padding:13px 18px;border:0;border-radius:8px;background:#4f52640c;color:var(--brand-ink);font-size:14px;font-weight:600;line-height:1.4;text-decoration:none;transition:background .2s,box-shadow .2s}
.services-slate #promotion .extra-card>a span{flex:none;font-size:19px;line-height:1}
.services-slate #promotion .extra-card>a:is(:hover,:focus-visible){background:var(--brand-button);color:var(--brand-ink);box-shadow:0 4px 14px #e4ad4326}
.services-slate #promotion .extra-card>a:focus-visible{outline:2px solid var(--brand-gold-bright);outline-offset:4px}