/* Sandhan Design — dark editorial palette shared with the coaching site. */
:root{--forest:#22322a;--forest-mid:#e1c0a0;--terra:#e4b68f;--terra-light:#e4b68f;--paper:#151b18;--parchment:#151b18;--cream:#202a24;--ink:#f2eee5;--ink-mid:#c4cbbf;--ink-light:#b7c2b3;--sage:#c4cbbf;--gold:#e1c0a0;--danger:#ffb8aa;--danger-bg:#352723;--ok:#b9d7b3;--ok-bg:#233327;--action:#e4b68f;--shadow:0 14px 36px #00000026;color-scheme:dark}
body.design-dark{background:#151b18;background-image:none;color:#f2eee5}
body.design-dark::after{display:none}
body.design-dark h1,body.design-dark h2,body.design-dark h3{font-weight:400}
::selection{background:#e4b68f;color:#151b18}
.skip:focus{background:#e4b68f;color:#151b18}
body>header:not(.article-hero){height:78px;top:16px;border-radius:5px;border:1px solid #48574a;background:#202a24ed;box-shadow:0 12px 35px #00000024;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
header #navigation{gap:clamp(1rem,1.5vw,1.5rem)}
header #navigation a{font-size:1rem;letter-spacing:0;font-weight:500;color:#dce1d4}
header #navigation a:hover{color:#e4b68f}
header .menu{font-size:.95rem!important;color:#f2eee5}
.brand--sd>img{filter:brightness(0) saturate(100%) invert(94%) sepia(9%) saturate(288%) hue-rotate(347deg) brightness(101%) contrast(92%)}
body>nav{background:#202a24ed;border-color:#48574a}
body>nav .nav-back{font-size:.95rem;color:#c4cbbf}
body>nav>a:not(.brand--sd){font-size:.95rem!important;color:#e4b68f!important;border-color:#65715f!important}
.brand,.brand span,.eyebrow{color:#e4b68f}
.button,.top-cta,.btn-cta,.hero-form button{background:#e4b68f;color:#151b18;border-radius:3px;border-color:#e4b68f;font-size:.76rem;box-shadow:inset 0 1px 0 #ffffff30,0 5px 16px #00000020}
.button:hover,.top-cta:hover,.btn-cta:hover,.hero-form button:hover{background:#f1c7a4;color:#151b18;box-shadow:0 10px 25px #00000030}
.outline{background:transparent;color:#e4b68f;border-color:#e4b68f}
.plain-link{color:#e4b68f;border-color:#e4b68f}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:#e4b68f}
.hero,.hero.hero-reference{background:#151b18}
.hero.hero-reference{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;padding-top:64px;padding-bottom:72px}
.hero-reference h1{font-size:clamp(3rem,4.8vw,4.6rem);line-height:1.03;max-width:20ch;letter-spacing:-.035em}
.hero-reference .lead{font-size:1.1rem;line-height:1.75;max-width:53ch;color:#c4cbbf}
.hero h1 em{color:#e4b68f}.hero-trust,.secondary-audiences,.landing-facts,.table-hint{color:#c4cbbf}
.hero-project{max-width:360px;justify-self:end;padding-bottom:32px}
.project-desktop{background:#202a24;border-color:#5d6c60;border-radius:6px;box-shadow:0 20px 45px #00000030}
.project-browser{background:#263229;color:#d6ddce}.project-browser span:first-child{color:#b7c2b3}
.project-phone{border-color:#52634f;box-shadow:0 12px 28px #00000040}
.hero-project figcaption{font-size:.85rem}.hero-project figcaption span{font-size:.75rem;color:#c4cbbf}
.hero-project figcaption a{color:#e4b68f}
.problem,.filter,.seo-cta{background:#202b23;color:#f2eee5;border-color:#465448}
.problem::before{color:#f2eee509}
.dark,.recommended,.packages .recommended{background:#0f1812;color:#f2eee5}
.dark::before{display:none}
.services article{border-color:#465448;border-radius:6px;background:#202a24}
.services .service-wide{background:#2b3529}.services article:hover{background:#2b3529}
.services b{color:#e4b68f}.services p{color:#d3d9cc}
.packages article,.seo-card,.work-proof-card{background:#202a24;color:#f2eee5;border-color:#465448;border-radius:6px;box-shadow:0 12px 32px #00000020}
.packages .recommended{border-color:#9b856a}.packages .recommended::before{background:#e4b68f;color:#151b18}
.packages .recommended a,.packages a,.seo-card a{color:#e4b68f}
.packages .recommended .button{color:#151b18}
.about{background:#202b23}
.work-proof{background:#1b251e;color:#f2eee5}
.work-proof-type{color:#e4b68f}.work-proof-card a{color:#e4b68f}
.faq details{border-color:#465448}.faq details[open]{background:#202a24}
#ablauf .seo-steps li{border-color:#465448}#ablauf .seo-steps li::before{color:#e4b68f}
.seo-hero{border-color:#465448}.seo-related{background:#202a24;color:#f2eee5}.seo-related a{color:#e4b68f}
.case-details>div{border-color:#465448}.case-preview{max-width:700px}.case-preview img{border-color:#52634f}
.reference-example+.reference-example{border-color:#465448}
.contact-form{background:#202b23;color:#f2eee5;border-radius:6px;box-shadow:var(--shadow)}
.contact-form form,.hero-form,.check form{background:#17201a;color:#f2eee5;border:1px solid #465448;border-radius:5px;box-shadow:var(--shadow)}
.contact-form input,.contact-form textarea,.hero-form input,.check input{background:#202a24;border-color:#65715f;color:#f2eee5}
.contact-form input::placeholder,.contact-form textarea::placeholder,.check input::placeholder{color:#adb9a8}
.contact-form small,.hero-form small,.check small{color:#c4cbbf}
.consent input{accent-color:#e4b68f}
.check{background:#29352b;color:#f2eee5;border:1px solid #465448;border-radius:6px}
.check .eyebrow{color:#e4b68f}
.success{background:#233327;color:#d6ecd1}.error{background:#352723;color:#ffb8aa}
footer{background:#0f1511;color:#d3d9cc}footer a,footer p{color:#d3d9cc}
.article-hero,.cost-block,.cta-block,.article-cta{background:#202b23;color:#f2eee5;border-color:#465448}
.article-title,.article-wrap h2,.article-wrap h3,.faq-mini h2,.faq-q-mini,.author-name,.source-box h2,.cta-title{color:#f2eee5}
.article-wrap p,.article-wrap li,.author-bio{color:#c4cbbf}
.article-wrap strong{color:#f2eee5}.article-wrap a,.source-box a{color:#e4b68f}
.article-quick-answer,.author-box,.source-box{background:#202a24;border-color:#465448;border-radius:5px}
.source-box{border-left-width:1px}
.compare th{background:#263229;color:#f2eee5}.compare td{border-color:#465448}
.compare tbody tr:nth-child(even){background:#202a24}
.box-note{background:#202a24}.box-danger{background:#352723}.box-ok{background:#233327}
.box{border-color:#65715f}.box .box-title{color:#e4b68f}
.box-danger .box-title{color:#ffb8aa}.box-ok .box-title{color:#b9d7b3}
.cta-block h2,.article-cta h2{color:#f2eee5}
.article-wrap .btn-cta{color:#151b18}
.price-card .price-card-name,.price-card.featured .price-card-name{color:#f2eee5}
.article-meta,.cost-lbl{color:#c4cbbf}
.article-contact-form{background:#17201a!important;color:#f2eee5!important}
.article-contact-form input,.article-contact-form textarea{background:#202a24!important;color:#f2eee5!important;border-color:#65715f!important}
.article-contact-submit{background:#e4b68f!important;color:#151b18!important;font-size:.76rem!important}
.article-contact-error,.article-contact-error a{color:#ffb8aa!important}
.article-wrap p[style*="#7a7672"]{color:#b7c2b3!important}
.trust{--trust-gap:48px;display:block;overflow:hidden;padding:20px 0;background:#35402e;color:#f2eee5;border-color:#465448}
.trust-track{display:flex;gap:var(--trust-gap);width:max-content}
.trust-set{display:flex;align-items:center;gap:var(--trust-gap);flex:none;white-space:nowrap;font:400 clamp(1.4rem,2.2vw,2rem)/1.2 Cormorant,serif;letter-spacing:0;text-transform:none}
.trust span::before{content:'↗';font-family:DM,sans-serif;font-weight:600;font-size:1.3em;color:#e4b68f;margin-right:.7rem}
@media(prefers-reduced-motion:no-preference){
 .trust-track{animation:designBand 38s linear infinite}
 .hero-copy h1{animation:designTitle 1s cubic-bezier(.16,1,.3,1) both}
 @keyframes designBand{to{transform:translateX(calc(-50% - var(--trust-gap) * .5))}}
 @keyframes designTitle{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
}
@media(max-width:1180px){header #navigation{background:#202a24;border-color:#52634f;border-radius:6px}header #navigation a{font-size:1.1rem;padding:.8rem .6rem}}
@media(max-width:850px){.hero.hero-reference{grid-template-columns:1fr;gap:36px;padding:48px 24px}.hero-reference h1{font-size:clamp(2.8rem,7vw,4rem)}.hero-project{max-width:350px;justify-self:center;width:85%}.hero-reference .lead{font-size:1.05rem}.trust{--trust-gap:32px}body>header:not(.article-hero){top:10px;height:72px}.case-preview{max-width:560px}}
@media(max-width:500px){.hero.hero-reference{padding:36px 24px}.hero-reference h1{font-size:2.65rem}.hero-project{max-width:290px;width:90%;padding-bottom:16px}.hero-project figcaption{font-size:.8rem}.hero-project figcaption span{font-size:.7rem}.project-browser{font-size:.55rem}.hero-cta{font-size:.7rem}.hero-project .project-phone{bottom:4.5rem}.trust-set{font-size:1.5rem}.button{line-height:1.5}.article-title{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.trust-track,.hero-copy h1{animation:none!important}.trust-track{width:auto;display:block}.trust-set{white-space:normal;flex-wrap:wrap;gap:16px;padding:0 24px}.trust-set[aria-hidden=true]{display:none}}
@media(max-width:500px){body>header:not(.article-hero){padding-inline:12px}body>nav{padding:12px}.nav-brand.brand--sd>img{width:165px;height:50px}}

/* Contact channels and matching header/footer identity. */
.contact-channels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.contact-channels label,.contact-channels input{min-width:0;width:100%;box-sizing:border-box}
.article-contact-form{max-width:560px!important}
.site-footer{display:block;padding:48px max(24px,calc((100% - 1200px)/2));text-align:left}
.site-footer .footer-top{display:flex;align-items:center;gap:32px;padding-bottom:28px;border-bottom:1px solid #465448}
.site-footer .brand{flex-shrink:0}
.site-footer .brand img{width:224px;height:60px;object-fit:contain;filter:brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(230%) hue-rotate(345deg)}
.site-footer .footer-navigation{display:flex;position:static;flex-wrap:wrap;justify-content:flex-end;gap:12px 24px;margin:0 0 0 auto;padding:0;background:transparent;border:0;box-shadow:none;transform:none;visibility:visible;opacity:1;width:auto}
.site-footer .footer-navigation a{font:400 1rem/1.5 DM,sans-serif;letter-spacing:0;text-transform:none;color:#f2eee5;padding:4px 0}
.site-footer .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:24px}
.site-footer p{font:400 .82rem/1.6 DM,sans-serif;margin:0;color:#c4cbbf}
.site-footer .footer-links{display:flex;flex-wrap:wrap;gap:12px 22px}
.site-footer .footer-links a{font:400 .82rem/1.6 DM,sans-serif;letter-spacing:0;text-transform:none}
@media(max-width:850px){.site-footer .footer-top,.site-footer .footer-bottom{align-items:flex-start;flex-direction:column}.site-footer .footer-navigation{justify-content:flex-start;margin:0;gap:12px 22px}}
@media(max-width:600px){.contact-channels{grid-template-columns:1fr}.site-footer{padding:36px 24px}.site-footer .footer-navigation{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}.site-footer .footer-links{gap:12px 20px}}

/* Bring the homepage introduction and project preview together. */
@media(min-width:851px){
 .hero.hero-reference{width:100%;max-width:1160px;margin-inline:auto;box-sizing:border-box;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:32px;padding-inline:48px;justify-content:center}
 .hero-reference .hero-project{max-width:420px;justify-self:start}
}
@media(max-width:850px){.hero.hero-reference{gap:28px}}

/* Wider hero aligned with the navigation; clear problem framing. */
@media(min-width:851px){
 .hero.hero-reference{width:min(1340px,calc(100% - 2rem));max-width:none;margin-inline:auto;padding-inline:24px;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px}
 .hero-reference .hero-project{max-width:500px;justify-self:end}
}
.problem .problem-list-title{font:500 1.15rem/1.5 DM,sans-serif;color:#f2eee5;margin:28px 0 16px}
.problem .problem-list{list-style:none;padding:0;column-gap:28px}
.problem .problem-list li{position:relative;padding:0 0 0 30px;margin:0 0 18px;break-inside:avoid;line-height:1.65}
.problem-cross{position:absolute;left:0;top:-2px;color:#ffb8aa;font:400 1.7rem/1.3 DM,sans-serif}
.services .service-source{display:inline-block;margin-top:12px;color:#e4b68f;font-size:.75rem;line-height:1.6;text-underline-offset:3px}
.work-proof-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:850px){.work-proof-grid{grid-template-columns:1fr}}

/* Give the hero more horizontal and vertical breathing room. */
@media(min-width:851px){.hero.hero-reference{gap:80px;padding-top:96px;padding-bottom:104px}}
@media(max-width:850px){.hero.hero-reference{gap:40px;padding-top:64px;padding-bottom:72px}}

/* Headings enter visibly and respond to scrolling, without endless idle motion. */
.sd-heading-motion{overflow:clip;overflow-clip-margin:24px}
.sd-heading-enter,.sd-heading-scroll{display:block}
.sd-heading-scroll{transform:translate3d(0,0,0)}
.hero-copy h1.sd-heading-motion{animation:none}
.sd-heading-motion:focus-within .sd-heading-scroll{transform:none}
@media(prefers-reduced-motion:reduce){.sd-heading-enter,.sd-heading-scroll{transform:none!important;opacity:1!important}}