/* Shared visual language: fine grid lines, quiet surfaces and separated service cards. */
:root{--design-line:#dce0e7;--design-paper:#f7f8fa;--design-radius:14px;--design-gap:24px;--design-shadow:0 5px 20px #17203305}
/* Keep navigation familiar and copy readable; use the new treatment around content. */
.service-page .hero,.company-page .company-hero,.maintenance-page .custom-hero{background:#fbfbfd;border-bottom:1px solid var(--design-line)}
.site-hero-copy{min-width:0}
.site-hero-art{display:none}
.service-page .hero-heading .eyebrow,.company-page .company-hero .hero-heading .eyebrow,.maintenance-page .hero-heading .eyebrow,.work-index-intro>.eyebrow,.case-intro>.eyebrow,.resource-index-hero>.eyebrow{display:flex;align-items:center;gap:12px}
.service-page .hero-heading .eyebrow:before,.company-page .company-hero .hero-heading .eyebrow:before,.maintenance-page .hero-heading .eyebrow:before,.work-index-intro>.eyebrow:before,.case-intro>.eyebrow:before,.resource-index-hero>.eyebrow:before{content:'';display:block;width:22px;height:2px;flex-shrink:0;background:var(--accent)}
.service-page .hero-summary,.maintenance-page .hero-summary{max-width:760px}
.service-page .service-summary-list{gap:var(--design-gap)}
.service-page .service-summary-list>li{border-radius:var(--design-radius);box-shadow:var(--design-shadow)}
/* The service identity stays in its cards and badges, with neutral section framing. */
.service-page .problems:before{inset:0;width:auto;height:auto;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background-image:linear-gradient(#ffffff30 1px,transparent 1px),linear-gradient(90deg,#ffffff30 1px,transparent 1px);background-size:72px 72px;opacity:.3;-webkit-mask-image:linear-gradient(to right,transparent 35%,#000);mask-image:linear-gradient(to right,transparent 35%,#000)}
.service-page .problems:after,.service-page .process:after,.company-page .process:after{content:none}
.service-page .design-section,.service-page .example-stage,.service-page .launch-pricing,.service-page .sales-pricing,.service-page .custom-choice{background:var(--design-paper);border-block:1px solid #e6e8ed}
.service-page #main .included-grid,.contact-page #main .included-grid{gap:1px;background:var(--design-line);border:1px solid var(--design-line)}
.service-page #main .included-grid>article,.contact-page #main .included-grid>article{padding:28px;background:#fff;border:0;min-width:0}
.service-page #main .included-grid h3,.contact-page #main .included-grid h3{margin-bottom:12px}
.service-page #main .included-grid p,.contact-page #main .included-grid p{max-width:100%}
.service-page #main .included-grid .number{display:block;width:fit-content;max-width:100%;min-height:34px;padding:7px 10px;margin-bottom:20px;background:var(--service-tone);border:1px solid var(--service-line);font-size:.75rem;line-height:1.5;letter-spacing:0;text-align:left;white-space:normal;overflow-wrap:break-word}
/* Numbered process panels keep the text together in a clear grid. */
.service-page .process,.company-page .process{border-block:1px solid #e6e8ed;background:var(--design-paper)}
.service-page .launch-process,.company-page .process-grid{gap:1px;border:1px solid var(--design-line);background:var(--design-line)}
.service-page .launch-process>article,.company-page .process-grid>article{padding:28px;background:#fff;border:0;min-width:0}
.service-page #main .launch-process .number{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:22px;background:var(--service-tone);border:1px solid var(--service-line);font-family:'Wix Madefor Text',Arial,sans-serif;font-size:.875rem;font-weight:500;line-height:1.3;letter-spacing:0}
.company-page .process-grid .number{padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--design-line);display:block;font-size:.8125rem;line-height:1.5;letter-spacing:.035em}
.service-page .extras{box-shadow:var(--design-shadow);border-radius:var(--design-radius)}
.service-page .price-cards,.service-page .fit-grid,.service-page .sales-choice-grid{gap:var(--design-gap);border:0}
.service-page .price-cards>article,.service-page .fit-grid>article,.service-page .sales-choice-grid>article,.service-page .custom-price-card{border-radius:var(--design-radius);box-shadow:var(--design-shadow)}
.service-page .fit-grid>article+article,.service-page .sales-choice-grid>article+article{border:1px solid var(--offer-line,var(--service-line))}
.service-page .price-cards>article+article{border:1px solid var(--service-line)}
.service-page .price-cards>article.managed{border-color:var(--ink)}
.service-page .example-guide,.service-page .sales-example-guide{border-radius:0;box-shadow:none;border-color:var(--design-line);background:#fff}
.service-page .example-guide>div+div,.service-page .sales-example-guide>div+div{border-color:var(--design-line)}
.service-page .device-preview,.service-page .example-browser{box-shadow:0 12px 32px #1720330d;border-radius:var(--design-radius)}
.service-page .device-preview{background:#fff}
/* About and contact: personal content in the same carefully framed surfaces. */
.company-page .company-profile-card{background:#fff;border-color:var(--design-line);border-radius:var(--design-radius);box-shadow:var(--design-shadow)}
.company-page .company-profile-card>img{border-radius:10px}
.company-page .company-services,.company-page .contact-options{gap:var(--design-gap)}
.company-page .company-services>a,.company-page .contact-options>a{border-radius:var(--design-radius);box-shadow:var(--design-shadow)}
.company-page .contact-options>a{background:#fff;border-color:var(--design-line)}
.company-page .contact-options .number{display:block;width:100%;border-bottom:1px solid var(--design-line);padding-bottom:16px;min-height:0;font-size:.6875rem;line-height:1.5}
.company-page .brief-section{background:var(--design-paper);border-color:var(--design-line)}
.company-page .project-brief{border-color:var(--design-line);border-radius:var(--design-radius);box-shadow:var(--design-shadow)}
.company-page .project-brief input,.company-page .project-brief select,.company-page .project-brief textarea{border-radius:8px;background:#fcfcfe}
/* Support plan terms and allowances stay exactly as agreed. */
.maintenance-page .maintenance-plans{background:var(--design-paper);border-color:var(--design-line)}
.maintenance-page .maintenance-grid{gap:var(--design-gap)}
.maintenance-page .maintenance-card{border-radius:var(--design-radius);box-shadow:var(--design-shadow)}
.maintenance-page .information-panel{background:var(--design-paper);border-color:var(--design-line);border-radius:var(--design-radius);box-shadow:none}
/* Real client work remains on white within its device frame. */
.work-index .work-index-projects{display:grid;gap:var(--design-gap)}
.work-index .work-feature{gap:0;border:1px solid var(--design-line);border-radius:var(--design-radius);padding:0;overflow:hidden;background:#fff}
.work-index #main .work-feature-visual{display:flex;align-items:center;height:100%;padding:0;border-radius:0;border-right:1px solid var(--design-line);background:#fff}
.work-index .work-feature-copy{max-width:none;padding:30px}
.work-index .work-feature:last-child{padding-bottom:0}
.case-page{--case-cool:#f7f8fa;--case-warm:#f8f7f4;--case-divider:#e4e7ed}
.case-page .case-hero-stage,.case-page .site-mockup,.case-page .hg-brand-showcase{background:#fff}
.case-page #main .case-facts{gap:0;padding:0;border:1px solid var(--design-line);background:#fff}
.case-page #main .case-facts>div{padding:22px 24px}
.case-page #main .case-facts>div+div{border-left:1px solid var(--design-line)}
.case-page .case-deliverables{gap:1px;border:1px solid var(--design-line);background:var(--design-line)}
.case-page .case-deliverables>div{padding:24px;border:0;background:#fff}
.case-page .case-client-context{border-color:var(--design-line)}
.case-page .editorial-page-image{border-color:var(--design-line);border-radius:8px;box-shadow:var(--design-shadow)}
/* Resources keep their original sharp imagery and comfortable reading column. */
.resource-page .resource-featured-card,.resource-page .resource-card{border-color:var(--design-line);border-radius:var(--design-radius);box-shadow:var(--design-shadow)}
.resource-page .resource-featured-card{background:#fff}
.resource-page .resource-card-grid{gap:var(--design-gap)}
.resource-page .resource-section-title{border-bottom:1px solid var(--design-line);padding-bottom:20px}
.resource-page .article-cover img{border:1px solid var(--design-line);border-radius:var(--design-radius)}
.resource-page .article-takeaway,.resource-page .article-example,.resource-page .article-check,.resource-page .article-project-link{border-radius:var(--design-radius);border-color:var(--design-line);box-shadow:none}
.resource-page .resource-help{border-top:1px solid var(--design-line)}
.legal-page .legal-hero,.legal-page .legal-content section{border-color:var(--design-line)}
.legal-page .legal-toc{padding:22px;border:1px solid var(--design-line);border-radius:10px;background:#fafbfd}
/* The same understated footer on every page. */
footer.site-footer{background:#fbfbfd;border-color:var(--design-line)}
.site-footer .footer-bottom{border-color:var(--design-line)}
@media(min-width:1101px){
 .custom-studio .hero-heading:has(>.site-hero-copy){display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,.75fr);gap:clamp(40px,4.5vw,70px);align-items:center}
 .custom-studio .hero-heading>.site-hero-copy{max-width:none}
 .site-hero-art{display:block;justify-self:end;width:100%;max-width:280px;padding:7px;background:#fff;border:1px solid #e2e5ec;box-shadow:0 16px 40px #2732470b,0 3px 8px #27324706;transform:rotate(2deg)}
 .site-hero-art img{display:block;width:100%;height:auto}
 .custom-studio .site-hero-copy .hero-summary{margin-top:28px}
}
@media(max-width:1100px){
 .service-page #main .included-grid>article,.contact-page #main .included-grid>article,.service-page .launch-process>article,.company-page .process-grid>article{padding:24px}
 .work-index .work-feature-copy{padding:26px}
}
@media(max-width:700px){
 :root{--design-gap:20px}
 .service-page .hero-heading .eyebrow,.company-page .company-hero .hero-heading .eyebrow,.maintenance-page .hero-heading .eyebrow,.work-index-intro>.eyebrow,.case-intro>.eyebrow,.resource-index-hero>.eyebrow{gap:10px}
 .service-page .hero-heading .eyebrow:before,.company-page .company-hero .hero-heading .eyebrow:before,.maintenance-page .hero-heading .eyebrow:before,.work-index-intro>.eyebrow:before,.case-intro>.eyebrow:before,.resource-index-hero>.eyebrow:before{width:18px}
 .service-page #main .included-grid>article,.contact-page #main .included-grid>article,.service-page .launch-process>article,.company-page .process-grid>article{padding:24px}
 .service-page #main .launch-process .number{font-size:.8125rem;width:36px;height:36px;margin-bottom:20px}
 .about-page #main .process-grid .number{font-size:.75rem;line-height:1.5;letter-spacing:.045em;border-bottom:0;padding-bottom:0}
 .company-page .company-services>a,.company-page .contact-options>a{padding:26px 24px}
 .company-page .project-brief{padding:28px 24px}
 .work-index #main .work-feature-visual{border-right:0;border-bottom:1px solid var(--design-line)}
 .work-index .work-feature-copy{padding:24px}
 .case-page #main .case-facts{display:block;margin-top:28px}
 .case-page #main .case-facts>div{padding:16px;gap:18px;border:0}
 .case-page #main .case-facts>div+div{border-left:0;border-top:1px solid var(--design-line)}
 .case-page #main .case-facts>div:last-child{border-bottom:0}
 .case-page .case-deliverables>div{padding:22px}
 .legal-page .legal-toc{padding:20px}
 .resource-page .resource-section-title{padding-bottom:18px}
}
@media(max-width:600px){.case-page .case-deliverables{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.site-hero-art{transform:none}}