/* Shared public-site shell and art collection, 2026-11-05. */
#main-nav{gap:clamp(10px,1.15vw,22px)}#main-nav a{white-space:nowrap}.site-footer .footer-grid{grid-template-columns:1.35fr 1fr 1.3fr 1fr}.site-footer .footer-section a{display:block;margin:10px 0}.art-hero{grid-template-columns:1.12fr .88fr}.art-hero figure{max-width:470px;justify-self:end}.art-hero img{aspect-ratio:2/3;object-fit:contain}.art-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.art-gallery figure:last-child{padding-top:0}.art-gallery img{aspect-ratio:2/3;object-fit:contain;height:auto;display:block}.art-gallery h3{font-size:25px;margin:12px 0}.art-gallery figcaption p{font-size:15px;line-height:1.8}.art-gallery .eyebrow{display:block;margin-top:20px;font-size:10px}.art-study{margin:25px 0 42px}.art-study img{display:block;width:100%;height:auto}.art-process{margin-top:30px}.additional-pricing .art-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.additional-pricing article{border-top:1px solid #bbc4bc;padding:24px 0}.additional-pricing h3{font-size:25px}.additional-pricing p{line-height:1.8}.service-additional .service-graphic{min-height:260px;background:#e7ece3;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px}.service-additional .graphic-number{position:static;font-size:92px;color:#c74730}
@media(min-width:901px) and (max-width:1250px){.site-header{gap:16px;padding-left:20px;padding-right:20px}.site-header .brand small{font-size:8px}#main-nav{gap:12px}#main-nav a{font-size:12px}.header-actions{gap:12px}.header-cta{padding:12px}}
@media(max-width:900px){.site-footer .footer-grid{grid-template-columns:1fr 1fr}.art-hero{grid-template-columns:1fr 1fr;gap:24px}.art-gallery{gap:18px}.art-gallery h3{font-size:21px}.additional-pricing .art-services{grid-template-columns:1fr}}
@media(max-width:650px){.art-hero{grid-template-columns:1fr}.art-hero figure{max-width:100%;justify-self:stretch}.art-gallery{grid-template-columns:1fr}.art-gallery figure{max-width:480px;margin:0 auto 25px}.art-hero img{aspect-ratio:2/3}.site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:24px}.site-footer .footer-identity{grid-column:1/-1}.art-main h1{font-size:clamp(42px,10vw,65px)}}

/* Compact footer rhythm: remove compounded margins and flex gaps. */
.site-footer .footer-grid{padding-block:30px;column-gap:32px;row-gap:24px;align-items:start}
.site-footer .footer-section{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px}
.site-footer .footer-section h2{margin:0 0 10px;padding:0;line-height:1.5}
.site-footer .footer-section a{display:block;margin:0;padding:5px 0;min-height:30px;line-height:1.5}
.site-footer .footer-bottom{padding-top:18px}.site-footer{padding-bottom:36px}
@media(pointer:coarse){.site-footer .footer-section a{min-height:44px;display:flex;align-items:center;padding:7px 0}}
@media(max-width:650px){.site-footer .footer-grid{padding-block:25px;column-gap:24px;row-gap:24px}.site-footer{padding-bottom:28px}}

.tableware-mockup{margin:30px 0 36px}.tableware-mockup img{width:100%;height:auto;display:block}.tableware-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.tableware-gallery figure{margin:0}.tableware-gallery img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#fff;border:1px solid #e1e4dc;padding:12px}.tableware-gallery h3{font-size:24px;margin:12px 0}.tableware-gallery figcaption p{font-size:14px;line-height:1.8}.tableware-gallery .eyebrow{display:block;margin-top:18px}.tableware-production{margin-top:38px;padding:28px;background:#e9ede5}.tableware-production h3{margin-bottom:14px}.tableware-production p{max-width:980px}.tableware-production a{margin-top:15px}@media(max-width:700px){.tableware-gallery{grid-template-columns:1fr}.tableware-gallery figure{margin-bottom:20px}.tableware-production{padding:22px}}

html .graphic-creative{background-image:url('/assets/art/service-creative-20261105.webp')}
html .graphic-maintenance{background-image:url('/assets/art/service-maintenance-20261105.webp')}
html .graphic-education{background-image:url('/assets/art/service-education-20261105.webp')}
html .graphic-products{background-image:url('/assets/art/service-products-20261105.webp')}
.web-design-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:45px;align-items:center;padding-block:70px}.web-design-hero figure{margin:0}.web-design-hero img{width:100%;height:auto}.web-design-hero figcaption{font-size:10px;letter-spacing:.14em;margin-top:16px}.web-design-hero .lede{margin:26px 0;max-width:600px}.web-service-grid,.web-delivery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:45px}.web-service-grid article,.web-delivery-grid article,.web-flow article{border-top:1px solid #c9d0c7;padding-top:25px}.web-service-grid h3,.web-delivery-grid h3,.web-flow h3{margin:14px 0}.web-design-delivery{background:#e9ede5}.web-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:42px}.web-design-next{display:grid;grid-template-columns:1.3fr 1fr;gap:60px}.web-design-next p{margin-top:25px}.web-design-links{display:flex;flex-direction:column;justify-content:center;gap:14px}.web-design-links a{padding:16px 0;border-bottom:1px solid #c9d0c7}.website-design-main .mk-section{margin-top:85px}
@media(max-width:900px){html .site-header{height:auto;min-height:78px;flex-wrap:wrap;padding-block:14px;gap:14px}html .site-header #main-nav{display:none;order:4;flex-basis:100%;width:100%;padding:15px 0;justify-content:flex-start;flex-wrap:wrap;margin:0;gap:16px 22px;font-size:14px}html .site-header #main-nav.open{display:flex}html .site-header .menu{display:block;border:0;background:transparent;font-size:12px;margin-left:auto;padding:8px}html .site-header .header-cta{display:none}}
@media(max-width:800px){.web-design-hero,.web-design-next{grid-template-columns:1fr;gap:28px}.web-service-grid,.web-delivery-grid{grid-template-columns:1fr 1fr}.web-flow{grid-template-columns:1fr 1fr}.web-design-hero{padding-block:40px}.website-design-main .mk-section{margin-top:45px}}
@media(max-width:500px){.web-service-grid,.web-delivery-grid,.web-flow{grid-template-columns:1fr}.web-service-grid,.web-delivery-grid{gap:24px}.web-design-hero h1{font-size:42px}}

/* Desktop navigation: use the available row before switching to a disclosure. */
@media(min-width:901px){
 html body .site-header{height:84px;min-height:84px;flex-wrap:nowrap;padding:0 clamp(18px,2.2vw,38px);gap:clamp(12px,1.2vw,20px)}
 html body .site-header #main-nav,html body .site-header #main-nav.open{display:flex;order:0;flex:0 1 auto;flex-basis:auto;width:auto;margin:0 0 0 auto;padding:0;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:clamp(10px,1.1vw,18px);font-size:13px}
 html body .site-header #main-nav a{white-space:nowrap;flex-shrink:0}
 html body .site-header .brand{flex-shrink:0}
 html body .site-header .header-actions{flex-shrink:0;gap:12px}
 html body .site-header .menu{display:none}
 html body .site-header .header-cta{display:inline-block;padding:11px 14px}
}
@media(min-width:901px) and (max-width:1370px){
 html body .site-header #main-nav,html body .site-header #main-nav.open{font-size:12px;gap:12px}
 html body .site-header .header-cta{display:none}
}
/* A measured vertical rhythm, preserving shorter functional sections. */
body{--xin-section-space:clamp(48px,5vw,68px);--xin-intro-space:clamp(40px,4.2vw,58px)}
main>.section{padding-top:var(--xin-section-space);padding-bottom:var(--xin-section-space)}
main>.page-intro{padding-block:var(--xin-intro-space)}
main>.hero{padding-top:48px;padding-bottom:48px}
main>.web-design-hero{padding-block:var(--xin-intro-space)}
main>.pricing-hero{padding-top:var(--xin-intro-space);padding-bottom:44px}
main>.creative-strip{margin-block:28px;padding-block:32px}
main>.partner-band,main>.education-band{margin-block:32px;padding-block:26px}
main>.catalogue-section{padding-bottom:64px}
main>.price-directory,main>.values{padding-top:30px}
main>.website-plans{padding-top:44px}
main>.enquiry-layout{padding-top:25px}
main>.studio-gallery{padding-bottom:52px}
main>.payment-discovery{margin-top:20px;margin-bottom:28px}
.website-design-main>.mk-section{margin-top:48px;margin-bottom:48px}
.art-main>.art-hero{padding-top:48px}
.art-main>.art-section{padding-top:64px;padding-bottom:16px}
.art-main>.art-profile{margin-top:44px;padding:42px}
.art-main>.art-contact{margin-top:40px;padding-block:48px}
main>.client-guide-hero{padding:56px 0 42px}
main>.guide-group{padding-block:48px}
main>.guide-ready{margin-block:40px;padding:40px}
main>.partner-page{margin-block:44px}
main>.education-page{margin-top:40px;margin-bottom:48px}
main>.pay-hero{padding:56px 0 40px}
main.payment-page{padding-bottom:48px}
main>.support-layout{margin-bottom:60px}
.site-footer .footer-invite{padding-block:52px}
@media(max-width:700px){
 body{--xin-section-space:44px;--xin-intro-space:36px}
 main>.hero{padding-block:34px}
 main>.creative-strip{margin-block:24px;padding-block:26px}
 main>.partner-band,main>.education-band{margin-block:26px;padding-block:24px}
 main>.catalogue-section{padding-bottom:44px}
 main>.studio-gallery{padding-bottom:40px}
 .website-design-main>.mk-section{margin-block:32px}
 .art-main>.art-hero{padding-top:32px}
 .art-main>.art-section{padding-top:44px;padding-bottom:12px}
 .art-main>.art-profile{margin-top:32px;padding:28px}
 .art-main>.art-contact{margin-top:28px;padding-block:36px}
 main>.client-guide-hero{padding:36px 0 30px}
 main>.guide-group{padding-block:36px}
 main>.guide-ready{margin-block:30px;padding:28px}
 main>.partner-page{margin-block:32px}
 main>.education-page{margin-block:32px}
 main>.pay-hero{padding:36px 0 30px}
 main>.support-layout{margin-bottom:44px}
 .site-footer .footer-invite{padding-block:36px}
}

@media(min-width:901px) and (max-width:1100px){html body .site-header{padding-inline:16px;gap:10px}html body .site-header #main-nav,html body .site-header #main-nav.open{gap:9px;font-size:12px}html body .site-header .header-actions{gap:9px}html body .site-header .brand{font-size:20px}html body .site-header .brand small{font-size:6px}}