/* Readability, case studies and compact disclosures within the six original sections. */
.site-serene{--readable-copy:16px;--readable-small:13px}
.site-serene :is(.hero-description,.about-copy p:not(.lead),.service-content p,.section-heading>p,.benefits-comparison>p,.benefits-simulator>p){font-size:var(--readable-copy);line-height:1.75}
.site-serene :is(.hero-description,.about-copy p:not(.lead),.service-content p,.section-heading>p){color:#595959}
.site-serene .about-copy .lead{font-size:21px;line-height:1.55}
.site-serene .about-copy p{max-width:490px}
.site-serene .button{font-size:14px;min-height:54px}
.site-serene .text-link{font-size:14px;line-height:1.4;min-height:44px;align-items:center;padding:10px 0;margin-top:20px;gap:20px}
.site-serene .service-content .text-link{font-size:14px;min-height:44px;padding:10px 0}
.site-serene .tags span{font-size:12px;line-height:1.4}
.site-serene .desktop-nav{gap:22px;margin-left:10px}
.site-serene .desktop-nav a{font-size:13px;min-height:44px;display:flex;align-items:center}
.site-serene .service summary{min-height:76px}
.site-serene .project-caption p{font-size:13px;line-height:1.5;color:#595959}
.site-serene .project-caption>span{font-size:12px}
.site-serene .projects-disclaimer{font-size:13px;color:#595959;line-height:1.7;margin-top:22px}
/* An editorial sequence, not another grid of service cards. */
.process{margin-top:54px;padding-top:36px;border-top:1px solid var(--line)}
.process-heading{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:28px;align-items:start;margin-bottom:35px}
.process-heading>.eyebrow,.faq-intro>.eyebrow{font-size:10px;letter-spacing:1px;line-height:1.7;color:var(--blue)}
.process-heading h3,.faq h3{font-size:clamp(32px,3.3vw,48px);font-weight:500;line-height:1.08;letter-spacing:-.055em}
.process-heading>p,.faq-intro>p{font-size:15px;line-height:1.7;color:#595959;max-width:270px}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:0;list-style:none}
.process-steps li{border-top:1px solid var(--blue);padding-top:18px}
.process-number{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--lime);font-size:11px;color:var(--ink);margin-bottom:18px}
.process-step-title{font-size:18px;letter-spacing:-.5px;font-weight:500;margin-bottom:9px}
.process-steps p{font-size:15px;line-height:1.7;color:#595959;max-width:250px}
/* Three initial highlights; all remaining work stays accessible in native details. */
.site-serene .project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.site-serene .project-card{display:block;color:inherit;min-width:0;border-radius:6px;text-decoration:none}
.site-serene .project-card:focus-visible{outline:3px solid var(--blue);outline-offset:6px}
.site-serene .project-art.website-art{height:auto;min-height:0;aspect-ratio:1.3;border:1px solid rgb(10 10 10 / .08);border-radius:12px;background:#fff}
.site-serene .project-art.website-art>img{width:100%;height:calc(100% - 25px);object-fit:cover;object-position:top;transition:transform .6s}
.site-serene .project-card:hover .website-art>img{transform:scale(1.025)}
.site-serene .project-caption{align-items:start;padding:18px 0}
.site-serene .project-caption h3{font-size:22px;line-height:1.15}
.portfolio-more{margin-top:18px;border-top:1px solid #d2d2d2;border-bottom:1px solid #d2d2d2}
.portfolio-more>summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:68px;padding:12px 0;font-size:15px;font-weight:500;cursor:pointer;list-style:none}
.portfolio-more>summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.portfolio-disclosure{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--blue);font-size:23px;color:var(--blue);transition:transform .25s}
.portfolio-more[open]>summary .portfolio-disclosure{transform:rotate(45deg)}
.portfolio-more[open] .project-grid{padding:14px 0 24px}
.faq{margin-top:65px;padding-top:38px;border-top:1px solid #d2d2d2;display:grid;grid-template-columns:1fr 1.4fr;gap:70px;align-items:start}
.faq h3{margin-top:17px}
.faq-intro>p{margin-top:20px}
.faq-list details{border-bottom:1px solid #d2d2d2}
.faq-list details:first-child{border-top:1px solid #d2d2d2}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;font-size:17px;line-height:1.45;min-height:76px;padding:18px 0}
.faq summary>span{font-size:23px;color:var(--blue);transition:transform .2s}
.faq details[open] summary>span{transform:rotate(45deg)}
.faq details p{font-size:16px;line-height:1.75;color:#595959;padding:0 30px 22px 0}
/* Cases describe published content; no invented client metrics or quotations. */
.site-serene .project-dialog{width:min(1100px,94vw);border-radius:24px}
.site-serene .dialog-copy{padding:58px 32px 32px;min-width:0}
.site-serene .dialog-copy h2{font-size:clamp(28px,3.2vw,46px);line-height:1.1;letter-spacing:-1.5px;overflow-wrap:anywhere}
.site-serene .dialog-copy>p{font-size:15px;line-height:1.75;color:#595959}
.site-serene #project-dialog-category{font-size:13px;color:var(--blue)}
.site-serene .dialog-art{background:rgb(36 85 255 / .045);min-height:560px;display:grid;place-items:center;padding:24px}
.site-serene .dialog-art .project-art.website-art{width:100%;height:auto;min-height:0;border:1px solid rgb(36 85 255 / .12);border-radius:12px;aspect-ratio:auto;box-shadow:0 12px 30px rgb(10 10 10 / .08)}
.site-serene .dialog-art .website-art>img{height:auto;object-fit:contain}
.site-serene .dialog-copy .button{margin-top:18px;gap:18px;font-size:14px}
.site-serene .dialog-copy .text-link{width:max-content;max-width:100%}
.case-details{margin:24px 0 20px;border-top:1px solid var(--line)}
.case-details>div{padding-top:18px}
.case-details dt{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.case-details dd{margin:0;font-size:15px;line-height:1.65;color:#595959}
.case-features{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.case-features li{font-size:11px;line-height:1.5;padding:6px 10px;border:1px solid #d2d2d2;border-radius:99px}
.site-serene .dialog-close{width:44px;height:44px}
.site-serene :is(.contact-dialog>p,.contact-dialog label,.contact-dialog input,.contact-dialog textarea){font-size:16px;line-height:1.6}
.site-serene .contact-dialog{width:min(580px,94vw)}
.site-serene .contact-dialog .form-note{font-size:13px!important;line-height:1.7!important;color:#595959}
.site-serene .contact-inner>p{font-size:16px;line-height:1.75}
.contact-brief{display:block;margin:16px auto 0;padding:12px 4px;min-height:44px;max-width:100%;font-size:14px;line-height:1.5;color:#fff;background:none;position:relative;z-index:4;text-decoration:underline;text-decoration-color:rgb(255 255 255 / .4);text-underline-offset:5px}
.contact-brief:hover{color:var(--lime)}
.contact-brief:focus-visible{outline-color:#fff}
.site-serene .simulation-inputs label{font-size:13px;line-height:1.5}
.site-serene .simulation-inputs input{font-size:16px;min-height:46px}
.site-serene .simulation-tabs button{font-size:13px;min-height:44px}
.site-serene .scenario-chart figcaption,.site-serene .scenario-bar-label{font-size:13px}
.site-serene :is(.simulation-definition,.simulation-formula,.simulation-note){font-size:12px;line-height:1.7}
.site-serene .benefits-simulator>.simulation-note{font-size:12px}
.site-serene .simulation-result>span{font-size:14px;line-height:1.6}
.site-serene .simulation-reset{font-size:13px;min-height:44px;padding:12px 0}
.site-serene .comparison-head{font-size:13px}
.site-serene .comparison-row [role=cell]{font-size:14px;line-height:1.6}
.site-serene .comparison-row [role=cell]>span{font-size:13px;line-height:1.65}
.site-serene .footer-main>p{font-size:14px}
.site-serene .footer-links{font-size:14px;gap:0 22px}
.site-serene .footer-links a{min-height:44px;display:flex;align-items:center}
.site-serene .social-links{font-size:13px;line-height:1.5}
.site-serene .social-links a{min-height:44px;display:inline-flex;align-items:center}
.site-serene .footer-bottom{font-size:12px;line-height:1.6;gap:18px}
.site-serene .footer-bottom :is(button,a){font-size:12px;min-height:44px;display:inline-flex;align-items:center}
/* Tablet navigation stays within the capsule without squeezing its links. */
@media(max-width:1100px){.site-serene .desktop-nav{gap:15px}.site-serene .header-cta{gap:15px}}
@media(max-width:1000px){
 .process-heading{grid-template-columns:1fr 1.4fr}.process-heading>p{grid-column:2}
 .process-steps{grid-template-columns:repeat(2,1fr);gap:28px}
 .site-serene .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .faq{gap:32px}
}
@media(max-width:760px){
 .site-serene .hero-copy h1{font-size:clamp(44px,14.6vw,82px)}
 .site-serene :is(.hero-description,.about-copy p:not(.lead),.service-content p,.section-heading>p,.benefits-comparison>p,.benefits-simulator>p){font-size:15px;line-height:1.75}
 .site-serene .about-copy .lead{font-size:20px}
 .site-serene .hero-description br{display:none}
 .site-serene .hero-art{min-height:345px}
 .site-serene .button{font-size:14px;gap:18px;padding-left:20px}
 .site-serene .text-link,.site-serene .service-content .text-link{font-size:14px}
 .site-serene .service summary{padding:23px 0;grid-template-columns:18px minmax(0,1fr) 32px;gap:8px}
 .site-serene .service-title{font-size:17px;line-height:1.4;letter-spacing:-.5px}
 .site-serene .service-content{padding:0 0 22px 26px}
 .site-serene .tags{gap:5px}.site-serene .tags span{font-size:10px;padding:6px 8px}
 /* Reserve the left edge for the continuous mascot journey through the content. */
 .site-serene :is(.services,.benefits-inner,.projects){padding-left:52px}
 .process{margin-top:30px;padding-top:28px}
 .process-heading{display:block;margin-bottom:24px}
 .process-heading h3{font-size:34px;margin-top:14px}.process-heading>p{margin-top:16px;font-size:15px}
 .process-steps{gap:24px 18px}
 .process-step-title{font-size:16px;line-height:1.3}
 .process-steps p{font-size:14px;line-height:1.65}
 .process-number{margin-bottom:12px}
 .site-serene .project-grid{grid-template-columns:1fr;gap:18px}
 .site-serene .project-art.website-art{aspect-ratio:1.3}
 .site-serene .project-caption h3{font-size:22px}.site-serene .project-caption p{font-size:13px}
 .site-serene .project-caption>span{margin-left:10px}
 .portfolio-more>summary{font-size:14px;min-height:68px}
 .portfolio-disclosure{flex:none}
 .faq{display:block;margin-top:40px;padding-top:30px}
 .faq h3{font-size:36px}.faq-intro>p{font-size:15px;max-width:100%}
 .faq-list{margin-top:25px}
 .faq summary{font-size:16px;gap:12px;min-height:72px}
 .faq details p{font-size:15px;padding-right:0}
 .site-serene .benefits-simulator{padding:22px 16px}
 .site-serene .simulation-inputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
 .site-serene .simulation-inputs label{font-size:13px}
 .site-serene .simulation-inputs input{min-height:46px}
 .site-serene .benefits-comparison h3,.site-serene .benefits-simulator h3{font-size:28px}
 .site-serene .comparison-row{gap:14px}
 .site-serene .comparison-row [role=cell]{font-size:13px;line-height:1.65}
 .site-serene .comparison-row [role=cell]>span{font-size:12px}
 .site-serene .contact-inner>p{font-size:15px}
 .site-serene .contact-note{left:max(0px,calc(50% - 185px));font-size:10px;width:85px}
 .site-serene .footer-main{gap:22px}.site-serene .footer-main>p{font-size:12px}
 .site-serene .footer-links{font-size:14px;gap:0}
 .site-serene .social-links{font-size:12px;gap:0}
 .site-serene .footer-bottom{font-size:11px;gap:12px}
 .site-serene .footer-bottom :is(button,a){font-size:12px}
 .site-serene .project-dialog[open]{display:block}
 .site-serene .dialog-art{height:auto;min-height:0;padding:18px}.site-serene .dialog-art .project-art.website-art{height:auto;min-height:0}
 .site-serene .dialog-copy{padding:28px 22px}
 .site-serene .dialog-copy h2{font-size:32px}
 .site-serene .dialog-copy>p{font-size:15px}
 .site-serene .dialog-copy .button{gap:12px;font-size:13px}
 .site-serene .contact-dialog{padding:55px 22px 28px}
 .site-serene .contact-dialog h2{font-size:36px}
}
@media(prefers-reduced-motion:reduce){.site-serene .project-card:hover .website-art>img{transform:none}.portfolio-disclosure,.faq summary>span{transition:none}}
@media(forced-colors:active){.portfolio-disclosure{border-color:ButtonText;color:ButtonText}.process-number{border:1px solid ButtonText}.case-features li{border-color:CanvasText}}

.site-serene .project-view.glass-action{position:absolute;right:12px;bottom:12px}
.process-steps li{padding-top:0}
.process-steps summary{position:relative;list-style:none;min-height:105px;padding:18px 20px 18px 0;cursor:pointer}
.process-steps summary::-webkit-details-marker{display:none}
.process-step-title{display:block}
.process-steps .process-number{margin-bottom:12px}
.process-expand{position:absolute;right:0;top:22px;color:var(--blue);font-size:20px;transition:transform .2s}
.process-steps details[open] .process-expand{transform:rotate(45deg)}
.process-steps details p{padding-bottom:20px}
@media(max-width:760px){.site-serene .simulation-inputs label:first-child{grid-column:1/-1}.process-steps summary{min-height:100px}.process-step-title{font-size:16px;line-height:1.3}}

.site-serene .brand{min-height:44px}
@media(max-width:1000px){.site-serene .menu-toggle[aria-expanded="true"]>span:first-child{transform:translateY(3.5px) rotate(45deg)}.site-serene .menu-toggle[aria-expanded="true"]>span:last-child{transform:translateY(-3.5px) rotate(-45deg)}}