.page-mast { max-width: 100rem; margin: 0 auto; padding: 9rem 3rem 3rem; text-align: center; }
.page-mast h1 { margin-bottom: 1rem; font-size: var(--heading-main-size); }
.page-mast > p { max-width: 44rem; margin: 0 auto; color: var(--text-secondary); font-size: 1.05rem; }
.page-mast.gallery-mast { padding-bottom: 2rem; text-align: left; }
.page-mast.gallery-mast .rule { margin-left: 0; }
.empty-state { grid-column: 1 / -1; padding: 4rem 2rem; border: 1px solid var(--border-color); border-radius: 1rem; background: rgba(13,31,24,.68); text-align: center; }
.studio-kicker { margin: 0 0 .55rem; color: var(--accent-primary); font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.text-link { color: var(--accent-primary); font-weight: 600; }
.service-page,.catalog { max-width: 100rem; margin: 0 auto; padding: 0 3rem 6rem; }
.service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; }
.service-card { display: flex; overflow: hidden; min-width: 0; padding: 1.5rem; flex-direction: column; border: 1px solid var(--border-color); border-radius: 1rem; background: rgba(13,31,24,.7); backdrop-filter: blur(8px); }
.service-card:hover { border-color: var(--accent-primary); transform: translateY(-3px); }
.service-card-heading { display: flex; min-height: 4rem; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.service-card h2 { font-size: 1.35rem; }
.service-card p { flex: 1; color: var(--text-muted); }
.service-card > strong { margin-bottom: 1rem; color: var(--accent-primary); }
.service-card footer { display: flex; padding-top: 1rem; justify-content: flex-end; gap: .6rem; border-top: 1px solid var(--border-color); color: var(--accent-primary); font-weight: 600; }
.service-image { position: relative; overflow: hidden; aspect-ratio: 16/9; margin-bottom: 1rem; border-radius: .65rem; }
.service-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.service-image span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.25); color: white; opacity: 0; }
.service-card:hover .service-image img { transform: scale(1.05); }
.service-card:hover .service-image span { opacity: 1; }
.badge { display: inline-flex; flex: none; padding: .2rem .5rem; border-radius: 99px; font-size: .7rem; font-style: normal; }
.badge.discount { background: #f3c96c; color: #182016; }
.page-cta { max-width: 64rem; margin: 4rem auto 0; padding: 2.5rem; border: 1px solid var(--border-color); border-radius: 1rem; background: rgba(13,31,24,.3); text-align: center; }
.page-cta h2 { margin-bottom: .8rem; font-size: 2rem; }
.about-story,.contact-layout,.detail-page,.checkout-page { display: grid; max-width: 78rem; margin: auto; padding: 4.5rem 2rem 6rem; align-items: center; grid-template-columns: 1fr 1fr; gap: 4rem; }
.about-story h2,.contact-layout h2,.detail-page h1,.checkout-page h2,.client-dashboard h2 { font-size: clamp(2.15rem,4vw,3.4rem); }
.about-story p { color: var(--text-secondary); white-space: pre-line; }
.about-story img { width: 100%; height: 27rem; border-radius: 1rem; object-fit: cover; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.value-grid { display: grid; max-width: 69rem; margin: auto; padding: 0 2rem 6rem; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.value-grid article,.values article { padding: 2.2rem; border: 1px solid var(--border-color); border-radius: 1rem; background: rgba(13,31,24,.76); text-align: center; }
.value-grid h2,.values h2 { font-size: 2.1rem; }
.values { padding: 4.5rem 2rem; background: var(--bg-secondary); text-align: center; }
.values > div { display: grid; max-width: 78rem; margin: 2.2rem auto; grid-template-columns: repeat(4,1fr); gap: 1.2rem; }
.values h3 { color: var(--accent-primary); }
.testimonial-list { display: grid; max-width: 100rem; margin: auto; padding: 1rem 3rem 6rem; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.testimonial-list blockquote { display: flex; min-height: 22rem; margin: 0; padding: 1.5rem; flex-direction: column; border: 1px solid var(--border-color); border-radius: 1rem; background: var(--bg-primary); }
.testimonial-list .stars { margin-bottom: 1rem; }
.testimonial-list img { width: 3.5rem; height: 3.5rem; border: 2px solid var(--accent-primary); border-radius: 50%; object-fit: cover; }
.testimonial-list > blockquote > p { flex: 1; color: var(--text-secondary); font-style: italic; white-space: pre-line; }
.testimonial-list footer { display: flex; padding-top: 1rem; gap: 1rem; align-items: center; border-top: 1px solid var(--border-color); }
.testimonial-list cite { display: grid; color: var(--text-primary); font-style: normal; }
.testimonial-list cite small { color: var(--accent-primary); }
.round-icon { display: grid; width: 5rem; height: 5rem; margin: 0 auto 1.5rem; place-items: center; border-radius: 50%; background: linear-gradient(135deg,var(--accent-primary),#387953); color: var(--bg-primary); font-size: 2rem; font-weight: 700; }
.faq-page { max-width: 56rem; margin: auto; padding: 0 1.5rem 6rem; }
.faq-search { position: relative; margin-bottom: 2rem; }
.faq-search input { width: 100%; height: 3.5rem; padding: 0 3rem; border: 1px solid var(--border-color); border-radius: .75rem; background: var(--bg-secondary); color: var(--text-primary); font-size: 1rem; }
.faq-categories,.filter-pills,.blog-categories { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.faq-categories button,.filter-pills a,.blog-categories button { padding: .55rem 1rem; border: 1px solid var(--accent-primary); border-radius: .5rem; background: transparent; color: var(--accent-primary); cursor: pointer; }
.faq-categories button.active,.filter-pills a.active,.blog-categories button.active { background: var(--accent-primary); color: var(--bg-primary); }
.faq-list details { overflow: hidden; margin: .75rem 0; border: 1px solid var(--border-color); border-radius: .75rem; background: var(--bg-secondary); }
.faq-list summary { display: flex; padding: 1.3rem 1.5rem; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
.faq-list summary h3 { margin: 0; font-size: 1.05rem; }
.faq-list summary small { display: block; width: fit-content; margin-top: .5rem; padding: .12rem .45rem; border: 1px solid rgba(133,199,155,.3); border-radius: 99px; color: var(--accent-primary); }
.faq-list details > div { padding: 0 1.5rem 1.5rem; color: var(--text-secondary); }
.faq-cta { margin-top: 4rem; padding: 3rem; border-radius: 1rem; background: linear-gradient(135deg,#2f7d4b,#7dbf92); text-align: center; }
.faq-cta h2 { font-size: 2.3rem; }
.faq-cta p { color: var(--text-primary); }
.contact-layout { align-items: start; }
.contact-info-list { display: grid; gap: 1.5rem; }
.contact-info-item { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; }
.contact-info-item > span { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: .7rem; background: rgba(133,199,155,.1); color: var(--accent-primary); }
.contact-info-item h3 { margin: 0; color: var(--text-primary); }
.contact-info-item p { margin: .25rem 0 0; white-space: pre-line; }
.contact-layout aside { margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--border-color); border-radius: .8rem; background: rgba(13,31,24,.6); }
.contact-form { display: grid; padding: 2rem; gap: 1rem; border: 1px solid var(--border-color); border-radius: 1rem; background: var(--bg-secondary); }
.contact-form label { display: grid; gap: .4rem; color: var(--text-secondary); }
.contact-form input,.contact-form textarea,.contact-form select { width: 100%; padding: .7rem .8rem; border: 1px solid var(--border-color); border-radius: .55rem; background: var(--bg-primary); color: var(--text-primary); }
.contact-form output { min-height: 1.4rem; color: var(--accent-primary); }
.contact-types { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.contact-types label { display: flex; padding: .8rem; align-items: center; gap: .55rem; border: 1px solid var(--border-color); border-radius: .55rem; cursor: pointer; }
.contact-types input { width: auto; }
.blog-controls { max-width: 70rem; margin: 0 auto 2.5rem; }
.blog-search { position: relative; max-width: 48rem; margin: 0 auto 2rem; }
.blog-search input { width: 100%; height: 3.5rem; padding: 0 3rem; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); }
.blog-grid { display: grid; max-width: 88rem; margin: auto; padding: 0 3rem 6rem; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.blog-grid article { overflow: hidden; border: 1px solid var(--border-color); border-radius: 1rem; background: var(--bg-secondary); }
.blog-grid article > img { width: 100%; height: 15rem; object-fit: cover; }
.blog-grid article > div { padding: 1.5rem; }
.blog-grid h2 { font-size: 1.5rem; }
.blog-grid .post-categories { color: var(--accent-primary); font-size: .75rem; }
.long-form { max-width: 54rem; margin: auto; padding: 8rem 2rem 5rem; }
.long-form h1 { font-size: 3.4rem; }
.post-hero { margin: 1.5rem 0; }
.post-hero img,.post-content img { width: 100%; max-height: 35rem; border-radius: 1rem; object-fit: contain; }
.long-form > div { color: var(--text-secondary); }
.author-profile { max-width: 50rem; margin: auto; padding: 5rem 2rem; text-align: center; }
.author-profile img { width: 11rem; height: 11rem; border: 4px solid var(--accent-primary); border-radius: 50%; object-fit: cover; }
.detail-page { min-height: 48rem; padding-top: 10rem; }
.detail-image img { width: 100%; max-height: 43rem; border-radius: 1rem; background: var(--bg-secondary); object-fit: contain; }
.detail-copy { color: var(--text-secondary); white-space: pre-line; }
.detail-price { display: block; margin: 1.25rem 0; color: var(--accent-primary); font-size: 1.7rem; }
.detail-actions { display: flex; flex-wrap: wrap; margin-top: 1.25rem; gap: .75rem; }
.cart-page { display: grid; max-width: 72rem; margin: auto; padding: 1rem 2rem 6rem; grid-template-columns: 1fr 20rem; gap: 2.5rem; }
.cart-page [data-cart-items] article { display: flex; padding: 1.25rem 0; gap: 1.4rem; border-bottom: 1px solid var(--border-color); }
.cart-page article img { width: 7.5rem; height: 8rem; border-radius: .6rem; object-fit: cover; }
.cart-page article h2 { margin: 0; font-size: 1.5rem; }
.cart-page article button { margin-left: auto; border: 0; background: none; color: var(--accent-primary); }
.cart-page > aside,.checkout-page form,.checkout-page aside { height: max-content; padding: 1.6rem; border: 1px solid var(--border-color); border-radius: 1rem; background: var(--bg-secondary); }
.cart-page > aside > div,.checkout-page aside p { display: flex; justify-content: space-between; }
.cart-page > aside > a { display: flex; margin-top: 1rem; }
.checkout-page { align-items: start; }
.checkout-page label { display: block; margin: 1rem 0; }
.checkout-page input { display: block; width: 100%; height: 2.9rem; margin-top: .3rem; padding: 0 .75rem; border: 1px solid var(--border-color); border-radius: .6rem; background: var(--bg-primary); color: var(--text-primary); }
.field-pair { display: flex; gap: .75rem; }
.field-pair label { flex: 1; }
.client-dashboard { display: grid; max-width: 72rem; margin: auto; padding: 3rem 2rem 6rem; grid-template-columns: 14rem 1fr; gap: 2.2rem; }
.client-dashboard > nav { display: flex; padding-right: 1.25rem; flex-direction: column; border-right: 1px solid var(--border-color); }
.client-dashboard nav a { padding: .7rem; }
.client-dashboard nav a.active { color: var(--accent-primary); }
.client-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.client-stats article,.customer-records article { padding: 1.5rem; border: 1px solid var(--border-color); border-radius: .8rem; background: var(--bg-secondary); }
.client-stats strong,.client-stats span { display: block; }
.client-stats span { margin-top: .6rem; color: var(--text-muted); }
.purchase-list { max-width: 62rem; margin: auto; padding: 3rem 2rem 6rem; }
.purchase-list > article { display: flex; padding: 1.4rem; align-items: center; gap: 1.5rem; border-bottom: 1px solid var(--border-color); }
.purchase-list article > div { flex: 1; }
@media (max-width: 900px) { .service-grid,.testimonial-list,.blog-grid { grid-template-columns: repeat(2,1fr); } .about-story,.contact-layout,.detail-page,.checkout-page,.cart-page,.client-dashboard { grid-template-columns: 1fr; } .client-dashboard > nav { border-right: 0; border-bottom: 1px solid var(--border-color); } }
@media (max-width: 640px) { .page-mast { padding: 7rem 1.25rem 2rem; } .page-mast.gallery-mast { text-align: center; } .page-mast.gallery-mast .rule { margin-left: auto; } .service-page,.catalog { padding-right: 1rem; padding-left: 1rem; } .service-grid,.testimonial-list,.blog-grid,.value-grid,.values > div,.client-stats { grid-template-columns: 1fr; } .testimonial-list,.blog-grid { padding-right: 1rem; padding-left: 1rem; } .field-pair { display: block; } .contact-types { grid-template-columns: 1fr; } }