/* Sage craft refresh: readable editorial type, clear surfaces, immediate feedback.
   Informed by the supplied Design Engineering and Mobile Native skills. */
:root{--paper:#0b1812;--soft:#12251a;--ink:#f3f4ee;--muted:#b8c5b9;--line:#304437;--ease-out:cubic-bezier(.23,1,.32,1)}
html{-webkit-text-size-adjust:100%;scroll-padding-top:130px}
body,.service-directory,.services-section{background:var(--paper)}
.container{width:calc(100% - 96px);max-width:1280px}
h1,h2,h3{text-wrap:balance}h2{font-size:clamp(2.25rem,4.2vw,3.75rem);letter-spacing:-.04em;line-height:1.12}
p{text-wrap:pretty}.eyebrow{font-size:.75rem;letter-spacing:.12em}
.announcement{background:#0b1812;font-size:.75rem;letter-spacing:.025em;padding-block:9px}
.site-header,.site-header.has-scrolled{background:#0b1812ed;backdrop-filter:blur(16px);border-bottom:1px solid #b9cfaa18}
.site-header nav a,.header-phone{font-size:.875rem}.site-header nav a{letter-spacing:0}.header-phone strong{font-weight:500}
.mobile-nav:not([hidden]){background:#0b1812;border-color:var(--line)}
.button{border-radius:12px;font-size:.9375rem;min-height:48px;padding:13px 21px;transition:background-color 160ms ease,color 160ms ease,transform 140ms var(--ease-out)}
button,a,[role=button]{touch-action:manipulation}button,[role=button]{user-select:none;-webkit-user-select:none}
.button:active,.icon-button:active,.filter:active{transform:scale(.97)}
.text-button,.text-link{font-size:.9375rem}.icon-button{min-width:44px;min-height:44px}
input,select,textarea{font-size:1rem}.field input,.field select,.field textarea{min-height:48px}
/* The original film provides the composition; copy never competes with the pages. */
.hero.hero-booklet{position:relative;isolation:isolate;display:block;overflow:hidden;padding:0;min-height:680px;margin:20px 24px 28px;border-radius:24px;background:#293d2f}
.hero-booklet .hero-media{position:absolute;inset:0;z-index:0;pointer-events:none;mask-image:none}
.hero-booklet .hero-media video,.hero-booklet .hero-poster img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-booklet .hero-shade{z-index:1;pointer-events:none;background:linear-gradient(90deg,#0f211bee 0%,#14281ddb 31%,#15271c45 57%,transparent 74%)}
.hero-booklet .hero-inner{position:relative;z-index:2;min-height:680px;padding-block:70px 140px;display:flex;align-items:center}
.hero-booklet .hero-copy{position:relative;z-index:2;max-width:540px}
/* display:contents on phones removes the parent box: lift each text/control box too. */
.hero-booklet .hero-copy>*{position:relative;z-index:2}
.hero-booklet .eyebrow{color:#e3edcf;font-size:.75rem;letter-spacing:.1em}
.hero-booklet h1{font-size:clamp(3.5rem,5.7vw,5.4rem);font-weight:400;letter-spacing:-.05em;line-height:1.05;margin:26px 0}
.hero-booklet h1 em{display:block;color:var(--lime);margin-top:7px;font-family:Georgia,serif;font-weight:400}
.hero-booklet .hero-copy>p{max-width:410px;font-size:1.0625rem;line-height:1.7;color:#e0e7da}
.hero-booklet .hero-actions{margin-top:28px;gap:20px;flex-wrap:wrap}
.hero-booklet .hero-note{display:block;color:#d0ddc6;font-size:.8125rem;line-height:1.7;margin-top:23px;max-width:380px}
.booklet-caption{z-index:2;position:absolute;bottom:26px;left:0;right:0;display:flex;align-items:end;justify-content:space-between;gap:24px;border-top:1px solid #d4e5c731;padding-top:20px}
.booklet-caption p{font-size:.875rem;color:#e2eadb;line-height:1.6}.booklet-caption p>span{display:block;font-size:.75rem;letter-spacing:.11em;color:var(--lime);margin-bottom:5px}
.booklet-caption .film-project{background:#13291ec9;border-color:#d9e5c355;border-radius:12px;font-size:.875rem;letter-spacing:0;padding:12px 18px}
.hero-booklet .hero-media:has(video.is-playing) .hero-poster{visibility:hidden}
/* A quieter, more legible catalogue with an intentional spacing rhythm. */
.directory-heading,.section-top{gap:60px}.directory-heading h2,.section-top h2,.community-editions h2,.faq h2,.home-contact h2{font-size:clamp(2.4rem,4.2vw,3.75rem);line-height:1.12}
.service-directory{padding-block:80px}.directory-heading{margin-bottom:48px}
.service-directory-grid{gap:40px}.directory-label{padding-bottom:16px}.directory-label h3{font-size:.875rem}.service-directory-group>a{border-top:1px solid var(--line);padding:19px 0}.service-directory-group strong{font-weight:500}.service-directory-group small{font-size:.875rem;margin-top:6px}
.collection{padding-top:78px;border-top:1px solid var(--line)}.search-form{border-radius:16px;background:#102018}.search-form input{font-size:1rem}.search-form .button{border-radius:10px}
.filter{border-radius:9px;font-size:.875rem;min-height:44px}.filter.active{background:var(--lime);color:#173c2d;border-color:var(--lime)}.sort-label select{background:var(--paper);font-size:.875rem}
.collection-meta{font-size:.8125rem;line-height:1.5}.design-grid{gap:44px 28px}.card-art,.website-card .card-art{border-radius:16px;background:#17291e;border:1px solid #b9cfaa20}
.card-info{padding:20px 2px 0}.card-kicker{font-size:.75rem;letter-spacing:.08em;color:#bdcdb5}.card-heading h3{font-size:1.7rem;line-height:1.2}.card-info>p{line-height:1.65;font-size:1rem;margin-block:12px 19px}
.card-bottom{border-top:1px solid var(--line);padding-top:16px;gap:12px}.card-bottom strong{font-size:1.125rem;font-weight:500}.card-bottom .text-button{font-size:.875rem;min-height:44px}.price-note{font-size:.8125rem}.website-count{font-size:.75rem}.view-cue{border-radius:50%}
.custom-strip{background:#14281c;border:1px solid #3e5540;border-radius:20px;padding:30px;gap:24px;margin-block:55px 0}.custom-strip h3{font-size:1.65rem;line-height:1.25}.custom-strip p{font-size:1rem;line-height:1.65}
.home-work{padding-top:86px}.client-project{gap:50px}.project-art,.concept-art,.page-preview,.case-lead-art{border-radius:18px}.project-copy h2{font-size:clamp(2.5rem,4vw,3.8rem)}.work-badge{font-size:.75rem}
.community-editions{padding-block:86px;gap:65px}.community-details{padding:30px;border-left:1px solid var(--line)}.community-details h3{font-size:1.75rem}.community-editions .fine-print{font-size:.875rem}
.process{border-top:1px solid var(--line);padding-block:70px 85px}.process-grid{gap:40px;margin-top:42px}.process-grid article{position:relative}.step-number{font-size:.875rem;margin-bottom:22px}.process-grid h3{font-weight:500}
.faq{padding-block:60px 80px;border-top:1px solid var(--line);gap:65px}.faq summary{line-height:1.5}.home-contact{padding-block:70px 80px;border-top:1px solid var(--line);gap:65px}.contact-panel{background:#14281c;border-radius:18px;padding:30px}.contact-context-links{display:flex;flex-wrap:wrap;gap:12px 20px}
.website-care{gap:60px}.care-plan{border-radius:18px}.care-plan-top,.care-small{font-size:.875rem!important}
.service-card-grid{gap:44px 30px}.service-card>img,.service-visual,.seo-report-image{border-radius:18px}.service-card h2{font-size:1.85rem}.service-card>div{padding-top:20px}.service-detail-hero{gap:55px}.service-price{border-top:1px solid var(--line);margin-top:26px}.service-copy-grid{border-top:1px solid var(--line)}.service-final,.work-cta{background:#14281c;padding:32px;border:1px solid var(--line);border-radius:18px}
.service-page h1,.work-page h1,.contact-page-hero h1{font-size:clamp(2.8rem,5.8vw,5.25rem);line-height:1.1}
.service-seo-copy p,.legal-copy p{max-width:72ch}.footer .legal-links{font-size:.875rem}.footer-contact{font-size:.875rem}
/* Interaction layers stay compact and anchored, without making enquiry slower. */
dialog{border-radius:20px}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}.quote-dialog,.assistant-panel{overscroll-behavior:contain}.preview-info h2,.quote-main h2{letter-spacing:-.035em}.assistant-panel{transform-origin:bottom right}
@media(min-width:1200px){.design-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card-heading h3{font-size:1.6rem}.card-bottom{align-items:start}.card-bottom .price-note{max-width:170px}}
@media(max-width:1199px){.site-header nav a,.header-phone{font-size:.875rem}.hero-booklet .hero-copy{max-width:470px}.hero-booklet h1{font-size:clamp(3.5rem,6.8vw,4.8rem)}.hero-booklet .hero-inner{min-height:680px}.hero-booklet .hero-copy>p{max-width:350px}.booklet-caption{bottom:24px}.container{width:calc(100% - 64px)}}
@media(max-width:759px){
 .container{width:calc(100% - 40px)}.announcement{font-size:.75rem;line-height:1.5;letter-spacing:0}.announcement>span:last-child{display:none}
 .hero.hero-booklet{margin:12px 12px 24px;min-height:0;border-radius:20px;background:#293d2f;display:flex;flex-direction:column}
 .hero-booklet .hero-inner{min-height:0;padding:35px 0 0;display:block;width:calc(100% - 36px);order:0}
 .hero-booklet .hero-copy{max-width:none}.hero-booklet .eyebrow{font-size:.75rem;letter-spacing:.07em}
 .hero-booklet h1{font-size:clamp(2.7rem,10vw,4.5rem);line-height:1.06;letter-spacing:-.045em;margin:22px 0}
 .hero-booklet .hero-copy>p{max-width:42ch;font-size:1rem;line-height:1.65}.hero-booklet .hero-actions{gap:10px 18px;margin-top:24px}.hero-booklet .hero-actions .button{font-size:.875rem;padding:13px 16px}.hero-booklet .text-button{font-size:.875rem;min-height:44px}.hero-booklet .hero-note{font-size:.8125rem;margin-top:16px;max-width:100%}
 .hero-booklet .hero-shade{display:none}.hero-booklet .hero-media{position:relative;inset:auto;z-index:0;order:1;aspect-ratio:688/640;margin-top:0}
 .hero-booklet .hero-media video,.hero-booklet .hero-poster img{object-fit:contain;object-position:center}
 .booklet-caption{position:relative;inset:auto;order:2;width:calc(100% - 36px);padding:18px 0 22px;gap:14px;flex-wrap:wrap}.booklet-caption .film-project{min-height:44px}.booklet-caption p{font-size:.8125rem}
 .directory-heading,.section-top{gap:24px}.directory-heading h2,.section-top h2,.community-editions h2,.faq h2,.home-contact h2{font-size:clamp(2.15rem,8vw,3rem);line-height:1.15}
 .service-directory{padding-block:35px 48px}.service-directory-grid{gap:32px}.directory-label h3{font-size:.875rem}.service-directory-group>a{padding-block:16px}.service-directory-group small{font-size:.875rem}
 .collection{padding-top:48px}.collection-meta{font-size:.75rem;flex-wrap:wrap;gap:8px}.collection-meta>span:last-child{max-width:none}.filters{gap:5px}.filter{font-size:.875rem;padding-inline:13px}.search-form input::placeholder{font-size:1rem}.search-form input{min-width:0}.search-form .button{padding-inline:13px}
 .design-grid,.service-card-grid{grid-template-columns:1fr;gap:36px}.card-heading h3{font-size:1.8rem}.card-info{padding-top:18px}.card-kicker{font-size:.75rem}.card-bottom .text-button{margin-left:auto}.card-bottom .price-note{max-width:200px}
 .custom-strip{grid-template-columns:1fr;padding:24px 20px;gap:16px;margin-top:40px}.custom-strip .asterisk{display:none}.custom-strip .button{grid-column:1;justify-self:start;white-space:normal;text-align:center;min-width:0}.custom-strip h3{font-size:1.6rem}
 .home-work{padding-top:55px}.client-project{gap:0}.community-editions{padding-block:60px;gap:30px}.community-details{padding:24px 0 0;border-left:0;border-top:1px solid var(--line)}
 .process{padding-block:48px 55px}.process-grid{gap:30px;margin-top:30px}.faq{padding-block:45px 55px}.home-contact{padding-block:50px 60px;gap:24px}.contact-panel{padding:24px 20px}.contact-number{overflow-wrap:anywhere}.contact-email{overflow-wrap:anywhere}.website-care{gap:28px}
 .service-detail-hero{gap:30px}.service-page h1,.work-page h1,.contact-page-hero h1{font-size:clamp(2.5rem,9vw,3.5rem)}.service-final,.work-cta{padding:26px 22px;gap:24px}.service-final .button,.work-cta .button{white-space:normal}
 .quote-dialog{border-radius:0;max-height:100dvh}.quote-action{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}.mobile-dock{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.field input,.field select,.field textarea,.assistant-form input{font-size:1rem}
}
@media(hover:none),(pointer:coarse){.button:hover,.design-card:hover,.card-art:hover img{transform:none}.button.dark:hover,.button.light:hover{background:var(--lime)}.filter:hover:not(.active){background:transparent;color:var(--muted)}}
@media(prefers-reduced-motion:reduce){.button,.icon-button,.filter{transition:color 120ms ease,background-color 120ms ease}.button:active,.icon-button:active,.filter:active{transform:none}}
@media(prefers-reduced-transparency:reduce){.site-header,.site-header.has-scrolled{background:#0b1812;backdrop-filter:none}}
/* On phones the visual follows the headline, before the supporting paragraph. */
@media(max-width:759px){
 .hero-booklet .hero-inner,.hero-booklet .hero-copy{display:contents}
 .hero-booklet .hero-copy>.eyebrow{order:0;margin:30px 18px 0}
 .hero-booklet h1{order:1;margin:20px 18px 0}
 .hero-booklet .hero-media{order:2;margin-block:8px 16px}
 .hero-booklet .hero-copy>p{order:3;margin:0 18px;max-width:none}
 .hero-booklet .hero-actions{order:4;margin:24px 18px 0}
 .hero-booklet .hero-note{order:5;margin:16px 18px 22px}
 .booklet-caption{order:6}
 .sage-assistant{overscroll-behavior:contain;transform-origin:bottom right}
}
@media(max-width:759px){
 .hero-booklet .hero-actions{order:2;margin-block:22px 6px}
 .hero-booklet .hero-media{order:3}
 .hero-booklet .hero-copy>p{order:4}
}
/* Keep example names readable instead of splitting words in narrow thumbnails. */
@media(max-width:479px){
 .preview-directions{grid-template-columns:minmax(0,1fr);gap:8px}
 .preview-directions button{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:10px;padding:8px}
 .preview-directions button[aria-pressed=true]{padding:7px}
 .preview-directions img{width:64px;height:auto}
 .preview-directions span{padding:0;font-size:.8125rem;overflow-wrap:normal;word-break:normal}
}
/* Allow service text to reflow at enlarged text sizes on narrow phones. */
.service-directory-group,.service-directory-group>a>span:first-child{min-width:0;overflow-wrap:anywhere}
@media(max-width:759px){.service-directory-grid{grid-template-columns:minmax(0,1fr)}}
.service-guide-link{display:flex;justify-content:space-between;gap:24px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:36px;align-items:center}
.service-guide-link>span{font-size:.6875rem;letter-spacing:.1em;color:var(--muted);flex-shrink:0}.service-guide-link>a{color:var(--lime);font-size:1rem;min-height:44px;display:inline-flex;align-items:center;gap:20px}.service-guide-link>a:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:759px){.service-guide-link{flex-direction:column;align-items:start;gap:8px}.service-guide-link>a{font-size:.9375rem}}