/* Eight independent compositions. Content remains in the CMS document. */
body{--line:color-mix(in srgb,var(--primary) 18%,transparent);--surface:#fff;--ink:#202823}
.site-header,.header{position:relative;z-index:2}
.site-header nav,.header nav{flex-wrap:wrap;justify-content:flex-end;row-gap:10px}
.hero-copy{min-width:0}.hero-media{min-width:0}.hero h1{overflow-wrap:break-word}
.hero-media img,.hero figure img{width:100%;object-fit:cover}
.services-grid,.process-grid,.packages-grid{min-width:0}
.packages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px}
.package-card{background:var(--surface);padding:30px;border:1px solid var(--line);border-radius:16px;min-width:0}
.package-card li{margin-bottom:10px}.package-card .button{margin-top:18px}
.contact-section form,.contact form{display:grid;gap:18px;max-width:680px}
.contact-section input:not([type=checkbox]),.contact-section textarea,.contact input:not([type=checkbox]),.contact textarea{display:block;width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--surface);color:inherit}
.contact-section label,.contact label{display:block;font-size:.93rem;font-weight:600}.contact-section textarea,.contact textarea{min-height:150px;resize:vertical}
.contact-section button,.contact button{border:0;cursor:pointer;font:inherit}.contact-section [type=checkbox],.contact [type=checkbox]{width:20px;height:20px;vertical-align:middle;margin-right:8px}
.contact-section fieldset,.contact fieldset{border:0;padding:0}.legal{overflow-wrap:anywhere}.legal p{white-space:pre-line}
.site-footer,.footer{align-items:flex-start}.site-footer nav,.footer nav{flex-wrap:wrap}.secondary-cta{display:inline-block;margin:18px 0 0 20px}
#demo iframe{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;max-width:100%}
/* Praxis: asymmetric editorial spread, calm margins, paired service essays. */
body[data-layout=editorial-split] .hero{grid-template-columns:1.3fr .85fr;gap:8%;padding-block:72px 100px}
body[data-layout=editorial-split] h1,body[data-layout=editorial-split] h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.045em}
body[data-layout=editorial-split] .hero h1{font-size:clamp(3rem,4.8vw,5.5rem)}
body[data-layout=editorial-split] .hero img{height:620px;border-radius:180px 180px 16px 16px}
body[data-layout=editorial-split] .image-note{left:-40px;bottom:65px;padding:28px;box-shadow:none;border:1px solid var(--line)}
body[data-layout=editorial-split] .cards,body[data-layout=editorial-split] .services-grid{grid-template-columns:1fr 1fr;gap:45px 70px}
body[data-layout=editorial-split] .cards article,body[data-layout=editorial-split] .service-card{padding-top:28px}
body[data-layout=editorial-split] .number{font-family:Georgia,serif;font-size:1.45rem;margin-bottom:15px}
body[data-layout=editorial-split] .offer{border:0;border-left:4px solid var(--primary);border-radius:0;background:#fff}
body[data-layout=editorial-split] .closing{border-radius:80px 12px 12px 12px;text-align:left}
body[data-layout=editorial-split] .closing h2,body[data-layout=editorial-split] .closing p{margin-left:0}
/* Salon: magazine masthead, large image alongside a vertically staggered title. */
body[data-layout=magazine] .header{border-bottom:1px solid var(--line);min-height:125px}
body[data-layout=magazine] .brand{font-family:Georgia,serif;font-size:1.8rem;font-weight:400}
body[data-layout=magazine] .hero{grid-template-columns:1fr 1.1fr;align-items:end;gap:4%;padding-top:35px}
body[data-layout=magazine] h1,body[data-layout=magazine] h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-.06em}
body[data-layout=magazine] .hero h1{font-size:clamp(3.4rem,6vw,6.8rem)}
body[data-layout=magazine] .hero-copy{padding-bottom:32px;padding-top:55px}
body[data-layout=magazine] .hero img{height:660px;border-radius:0}
body[data-layout=magazine] .image-note{left:auto;right:0;bottom:30px;border-radius:0;padding:22px 30px;max-width:220px}
body[data-layout=magazine] .ribbon{background:var(--primary);color:white;border:0}
body[data-layout=magazine] .cards,body[data-layout=magazine] .services-grid{grid-template-columns:1fr 1fr;gap:0}
body[data-layout=magazine] .service-card,body[data-layout=magazine] .cards article{padding:35px;border-bottom:1px solid var(--line)}
body[data-layout=magazine] .cards article:nth-child(odd){border-right:1px solid var(--line)}
body[data-layout=magazine] .process{background:#eee4dc}
body[data-layout=magazine] .button{border-radius:0}.closing{isolation:isolate}
body[data-layout=magazine] .closing{background:var(--primary);color:white;border-radius:0}
body[data-layout=magazine] .closing .eyebrow{color:#e6cee8}body[data-layout=magazine] .closing .button{background:#faf6ef;color:var(--primary)}
/* Telefon: compact dark product surface, wide statement, narrow image band. */
body[data-layout=dark-compact]{background:#111e27;color:#f6f5ee;--surface:#1a2b37;--line:#41505a}
body[data-layout=dark-compact] .wrap{max-width:1160px}
body[data-layout=dark-compact] .header{min-height:86px;border-bottom:1px solid var(--line)}
body[data-layout=dark-compact] .brand span,body[data-layout=dark-compact] .eyebrow,body[data-layout=dark-compact] .number{color:#efba78}
body[data-layout=dark-compact] .hero{grid-template-columns:1fr;gap:35px;padding:65px 0 50px}
body[data-layout=dark-compact] .hero-copy{max-width:920px}.hero-copy .button{max-width:100%}
body[data-layout=dark-compact] .hero h1{font-size:clamp(3rem,6vw,5.8rem);max-width:1000px}
body[data-layout=dark-compact] .hero .lead{max-width:760px}
body[data-layout=dark-compact] .hero img{height:240px;border-radius:10px;object-position:center 48%}
body[data-layout=dark-compact] .image-note{bottom:30px;left:auto;right:25px;color:#14232e}
body[data-layout=dark-compact] .lead,body[data-layout=dark-compact] .micro,body[data-layout=dark-compact] .cards p,body[data-layout=dark-compact] .steps p,body[data-layout=dark-compact] details p,body[data-layout=dark-compact] .footer small{color:#c4d0d7}
body[data-layout=dark-compact] .button{background:#efba78;color:#111e27;border-radius:7px}
body[data-layout=dark-compact] .section{padding-block:75px}
body[data-layout=dark-compact] .cards,body[data-layout=dark-compact] .services-grid{grid-template-columns:repeat(2,1fr);gap:15px}
body[data-layout=dark-compact] .cards article,body[data-layout=dark-compact] .service-card{background:#1a2b37;border:1px solid var(--line);padding:24px;border-radius:8px}
body[data-layout=dark-compact] .number{margin-bottom:16px}
body[data-layout=dark-compact] .offer,body[data-layout=dark-compact] .process{background:#192b36;border-color:var(--line)}
body[data-layout=dark-compact] .closing{background:#253d48;border-radius:10px;text-align:left;padding:45px}
body[data-layout=dark-compact] .closing p,body[data-layout=dark-compact] .closing h2{margin-left:0}
/* Chat: product frame, prominent live-demo area, conversational service cards. */
body[data-layout=interactive-product] .header{min-height:96px}
body[data-layout=interactive-product] .hero{grid-template-columns:1.05fr 1fr;gap:7%;padding-block:70px}
body[data-layout=interactive-product] .hero figure,body[data-layout=interactive-product] .hero-media{background:#fff;border:1px solid #cbdde7;border-radius:24px;padding:15px 15px 6px;box-shadow:0 22px 60px #16395213}
body[data-layout=interactive-product] .hero img{height:465px;border-radius:13px}
body[data-layout=interactive-product] .image-note{left:-22px;bottom:45px;border:1px solid #cbdde7;border-radius:20px 20px 20px 3px}
body[data-layout=interactive-product] .button{border-radius:100px}
body[data-layout=interactive-product] .cards,body[data-layout=interactive-product] .services-grid{grid-template-columns:1fr 1fr;gap:24px}
body[data-layout=interactive-product] .cards article,body[data-layout=interactive-product] .service-card{background:white;border:1px solid #d4e2e9;border-radius:24px 24px 24px 4px;padding:30px}
body[data-layout=interactive-product] .cards article:nth-child(even){border-radius:24px 24px 4px 24px;background:#e8f0f5}
body[data-layout=interactive-product] .number{border-radius:100px;display:inline-flex;padding:5px 11px;background:#e7f0f6;margin-bottom:20px}
body[data-layout=interactive-product] #demo{background:#e3eef5;padding:48px;border:1px solid #ccdee8;border-radius:28px;margin-block:40px 80px}
body[data-layout=interactive-product] #demo h2{max-width:700px}
body[data-layout=interactive-product] .process{background:#eaf1f5}
/* Termine: calendar-like service columns and a clear vertical scheduling sequence. */
body[data-layout=calendar] .header{border-bottom:1px solid var(--line)}
body[data-layout=calendar] .hero{grid-template-columns:1fr 1.15fr;gap:45px;align-items:start;padding-block:65px}
body[data-layout=calendar] .hero-copy{padding-top:35px}
body[data-layout=calendar] .hero img{height:530px;border:12px solid white;outline:1px solid #dddeee;border-radius:18px}
body[data-layout=calendar] .image-note{left:20px;bottom:40px;border-radius:12px;background:#fff}
body[data-layout=calendar] .services-grid,body[data-layout=calendar] .cards{gap:0;border:1px solid #d5d6e7;border-radius:14px;overflow:hidden}
body[data-layout=calendar] .cards article,body[data-layout=calendar] .service-card{border:0;border-right:1px solid #d5d6e7;padding:25px 20px;background:#fff}
body[data-layout=calendar] .cards article:last-child{border-right:0}
body[data-layout=calendar] .number{background:#efeffa;border-radius:9px;padding:10px;width:45px;text-align:center;font-size:1.1rem;margin-bottom:28px}
body[data-layout=calendar] .steps,body[data-layout=calendar] .process-grid{grid-template-columns:1fr;gap:0;max-width:900px}
body[data-layout=calendar] .steps article,body[data-layout=calendar] .process-step{display:grid;grid-template-columns:60px 1fr 1.6fr;gap:30px;align-items:start;border-bottom:1px solid #d5d6e7;padding:28px 0}
body[data-layout=calendar] .steps .number{margin:0}.process-step h3{margin-bottom:12px}
body[data-layout=calendar] .process{background:#eeedf7}
body[data-layout=calendar] .closing{border-radius:20px;border:1px solid #d5d6e7}
/* SEO: ordered audit rows, documented findings rather than invented metrics. */
body[data-layout=audit]{background:#f3f5f0}
body[data-layout=audit] .header{border-bottom:2px solid #173f35;min-height:90px}
body[data-layout=audit] .hero{grid-template-columns:.85fr 1.15fr;gap:6%;padding-block:70px}
body[data-layout=audit] .hero-copy{grid-column:2;grid-row:1}
body[data-layout=audit] .hero figure,body[data-layout=audit] .hero-media{grid-column:1;grid-row:1}
body[data-layout=audit] .hero img{height:500px;border-radius:8px;filter:saturate(.7)}
body[data-layout=audit] .image-note{left:15px;right:15px;bottom:30px;max-width:none;border:1px solid #bdd0c0;border-radius:6px;box-shadow:none}
body[data-layout=audit] .eyebrow,body[data-layout=audit] .number{font-family:ui-monospace,Consolas,monospace}
body[data-layout=audit] .services-grid,body[data-layout=audit] .cards{grid-template-columns:1fr;gap:0;border:1px solid #cdd8cc;background:#fff;border-radius:8px;overflow:hidden}
body[data-layout=audit] .cards article,body[data-layout=audit] .service-card{display:grid;grid-template-columns:45px 1fr 1.7fr;gap:25px;border:0;border-bottom:1px solid #dce4d8;padding:28px;align-items:start}
body[data-layout=audit] .cards article:last-child{border-bottom:0}
body[data-layout=audit] .number{margin-bottom:0;padding-top:3px}
body[data-layout=audit] .cards p{margin:0}
body[data-layout=audit] .offer{border-radius:6px;border-color:#cdd8cc}
body[data-layout=audit] .process{background:#e8ede4}
body[data-layout=audit] .closing{border-radius:7px;background:#173f35;color:white}
body[data-layout=audit] .closing .eyebrow{color:#b8d8b6}body[data-layout=audit] .closing .button{background:#e5eedb;color:#173f35}
body[data-layout=audit] .packages-grid .package-card{display:block}
/* Social: editorial board with separate planning cards and a three-column workflow. */
body[data-layout=editorial-board] .hero{grid-template-columns:1.2fr .8fr;gap:5%;padding-block:70px 90px}
body[data-layout=editorial-board] .hero h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(3.1rem,5.5vw,6rem)}
body[data-layout=editorial-board] .hero figure{transform:rotate(2deg);background:white;padding:12px 12px 30px;box-shadow:0 18px 40px #603d3514}
body[data-layout=editorial-board] .hero img{height:530px;border-radius:0}
body[data-layout=editorial-board] .image-note{left:-45px;bottom:20px;transform:rotate(-4deg);border-radius:2px;background:#f4e2c6;box-shadow:none}
body[data-layout=editorial-board] .cards,body[data-layout=editorial-board] .services-grid{grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
body[data-layout=editorial-board] .cards article,body[data-layout=editorial-board] .service-card{padding:25px 20px;border:1px solid #e3d4c7;border-top:5px solid #c9866d;border-radius:7px;background:#fffaf2;min-height:290px}
body[data-layout=editorial-board] .cards article:nth-child(even){margin-top:28px;background:#f3e8de;border-top-color:#896c60}
body[data-layout=editorial-board] .number{margin-bottom:18px}
body[data-layout=editorial-board] .steps,body[data-layout=editorial-board] .process-grid{gap:20px}
body[data-layout=editorial-board] .steps article,body[data-layout=editorial-board] .process-step{background:#fffaf4;padding:30px;border:1px solid #e0d3c8;border-radius:8px}
body[data-layout=editorial-board] .process{background:#ece0d4}
body[data-layout=editorial-board] .closing{border:1px solid #e0d3c8;border-radius:7px;background:#f0e3d5;text-align:left}
body[data-layout=editorial-board] .closing h2,body[data-layout=editorial-board] .closing p{margin-left:0}
/* Reels: high-contrast portfolio, oversized title and portrait-like hero frame. */
body[data-layout=portfolio]{background:#201b28;color:#f7f3f9;--surface:#302938;--line:#514657}
body[data-layout=portfolio] .header{min-height:100px;border-bottom:1px solid var(--line)}
body[data-layout=portfolio] .brand span,body[data-layout=portfolio] .eyebrow,body[data-layout=portfolio] .number{color:#c9afe2}
body[data-layout=portfolio] .hero{grid-template-columns:1.25fr .75fr;gap:7%;padding-block:55px 90px}
body[data-layout=portfolio] .hero h1{font-size:clamp(3.3rem,6vw,6.6rem);font-weight:550;letter-spacing:-.06em}
body[data-layout=portfolio] .hero img{height:640px;border-radius:32px;outline:1px solid #514657;outline-offset:10px}
body[data-layout=portfolio] .hero figure{padding:10px}
body[data-layout=portfolio] .image-note{left:-25px;bottom:45px;background:#e6d9ee;color:#302640;border-radius:8px}
body[data-layout=portfolio] .lead,body[data-layout=portfolio] .micro,body[data-layout=portfolio] .cards p,body[data-layout=portfolio] .steps p,body[data-layout=portfolio] details p,body[data-layout=portfolio] .footer small{color:#d3c8da}
body[data-layout=portfolio] .button{background:#d0b8e4;color:#201b28;border-radius:100px}
body[data-layout=portfolio] .cards,body[data-layout=portfolio] .services-grid{grid-template-columns:1fr 1fr;gap:35px}
body[data-layout=portfolio] .cards article,body[data-layout=portfolio] .service-card{background:#302938;border:1px solid #514657;padding:35px;border-radius:16px;min-height:245px}
body[data-layout=portfolio] .cards article:nth-child(2){margin-top:38px}body[data-layout=portfolio] .cards article:nth-child(3){margin-top:-38px}
body[data-layout=portfolio] .number{font-size:2rem;font-weight:350;margin-bottom:30px}
body[data-layout=portfolio] .process{background:#302938}
body[data-layout=portfolio] .offer{background:#302938;border-color:#514657}
body[data-layout=portfolio] .closing{background:#47384f;border-radius:32px}
body[data-layout=portfolio] .packages-grid .package-card{margin-top:0;min-height:0}
/* Responsive rules intentionally reset structural differences before text overflows. */
@media(max-width:1050px){
 .header{gap:18px}.header nav{gap:16px}.header nav a{font-size:.84rem}
 body[data-layout] .hero h1{font-size:clamp(2.6rem,5.6vw,4.4rem)}
 body[data-layout=editorial-board] .cards,body[data-layout=editorial-board] .services-grid{grid-template-columns:1fr 1fr}
 body[data-layout=calendar] .cards,body[data-layout=calendar] .services-grid{grid-template-columns:1fr 1fr}
 body[data-layout=calendar] .cards article{border-bottom:1px solid #d5d6e7}
 body[data-layout] .hero img{max-height:560px}
 body[data-layout=audit] .cards article,body[data-layout=audit] .service-card{grid-template-columns:35px 1fr}
 body[data-layout=audit] .cards article p,body[data-layout=audit] .service-card p{grid-column:2}
}
@media(max-width:720px){
 .header{padding-block:22px;min-height:0!important;flex-direction:column;align-items:flex-start}.header nav{justify-content:flex-start;gap:12px 17px;width:100%}.header nav a{font-size:.82rem}
 body[data-layout] .hero{grid-template-columns:1fr;gap:35px;padding:35px 0 55px}
 body[data-layout] .hero-copy{padding:0;grid-column:auto;grid-row:auto}
 body[data-layout] .hero figure,body[data-layout] .hero-media{grid-column:auto;grid-row:auto;margin:0;transform:none}
 body[data-layout] .hero h1{font-size:clamp(2.6rem,9.5vw,4rem)}
 body[data-layout] .hero img{height:390px;max-height:none}
 body[data-layout=dark-compact] .hero img{height:210px}
 body[data-layout=portfolio] .hero figure{max-width:460px;width:90%;margin-inline:auto}
 body[data-layout=portfolio] .hero img{height:450px}
 body[data-layout] .image-note{left:15px;right:auto;bottom:30px;max-width:235px;transform:none;padding:18px}
 body[data-layout] .cards,body[data-layout] .services-grid{grid-template-columns:1fr;gap:20px}
 body[data-layout] .cards article,body[data-layout] .service-card{margin-top:0;min-height:0}
 body[data-layout=calendar] .cards,body[data-layout=calendar] .services-grid{gap:0}
 body[data-layout=calendar] .cards article{border-right:0}
 body[data-layout=calendar] .steps article,body[data-layout=calendar] .process-step{grid-template-columns:45px 1fr;gap:18px}
 body[data-layout=calendar] .steps article p,body[data-layout=calendar] .process-step p{grid-column:2;margin-top:0}
 body[data-layout=magazine] .cards article:nth-child(odd){border-right:0}
 body[data-layout] .offer,body[data-layout] .steps,body[data-layout] .process-grid,body[data-layout] .faq{grid-template-columns:1fr}
 body[data-layout] .closing{padding:35px 23px;border-radius:16px}
 body[data-layout] .section{padding-block:60px}
 body[data-layout=interactive-product] #demo{padding:25px 18px;border-radius:18px}
 .secondary-cta{margin-left:0;display:block}.ribbon .wrap{flex-wrap:wrap}
 .footer{flex-direction:column}.footer nav{gap:15px}.contact h1{font-size:2.6rem}
}
.trap{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;pointer-events:none!important}
.contact-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;max-width:1200px}
.contact-section .consent{display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:.84rem;line-height:1.55}
.contact-section .consent input{flex:0 0 20px;margin:3px 0 0}
.contact-section form .button{justify-self:start}.contact-section input:focus,.contact-section textarea:focus{outline:3px solid #4786bd;outline-offset:3px}
.form-status{padding:18px 22px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:6px;background:var(--surface)}
body[data-layout] .cards.packages-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));border:0;overflow:visible;background:transparent;gap:24px}
body[data-layout] .cards.packages-grid .package-card{display:block;margin:0;min-height:0;border:1px solid var(--line);padding:30px;border-radius:16px;background:var(--surface)}
body[data-layout] .cards.packages-grid .package-card p{margin-bottom:20px}
body[data-layout=dark-compact] .contact-section a,body[data-layout=portfolio] .contact-section a{text-decoration-color:var(--accent)}
body[data-layout=dark-compact] .contact-section .button{color:#111e27}body[data-layout=portfolio] .contact-section .button{color:#201b28}
@media(max-width:720px){.contact-section{grid-template-columns:1fr;gap:35px}.contact-section form .button{justify-self:stretch;justify-content:center}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.hero-actions .text-link{font-size:.9rem}