/* Workshop window concept. The opening stays dark in both content themes. */
:root{color-scheme:light;--bg:#f7f6f6;--panel:#fcfcfc;--ink:#32251d;--muted:#736154;--accent:#7b6866;--paper:#edeaea;--dark:#32251d;--line:#32251d26;--warm:#7b6866}

body{background:var(--bg);color:var(--ink);transition:background-color .25s,color .25s}.site-header{background:#483c3be8;color:#f6f3ed;min-height:88px;border-bottom:1px solid #ffffff20;padding:19px 3.4%;gap:24px}.identity{width:205px;align-items:flex-start}.identity img{width:205px;height:auto}.site-header nav{gap:22px;font-size:15px}.site-header .button{background:#f7f6f6;color:#32251d;padding:12px 18px;font-size:14px}.site-header nav{margin-left:auto}.glass-hero{height:calc(100svh - 88px);min-height:610px;max-height:1080px;position:relative;isolation:isolate;overflow:hidden;background:#241c17;color:#f6f3ed}.workshop-backdrop,.glass-shade,.glass-reflection{position:absolute;inset:0;pointer-events:none}.workshop-backdrop{inset:-20px;transform:translateY(var(--window-shift,0px)) scale(1.045);will-change:transform}.workshop-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:blur(2px) saturate(.7);opacity:0;transition:opacity 1.5s ease;transform:scale(1.035)}.workshop-image.is-active{opacity:1}.glass-shade{background:linear-gradient(180deg,#160d074d 0%,#160d0738 25%,#160d0766 70%,#160d07ce 100%)}.glass-reflection{z-index:1;background:linear-gradient(113deg,transparent 5%,#ffffff02 20%,#ffffff0a 20.2%,#ffffff02 27%,transparent 27.3%,transparent 75%,#ffffff07 75.3%,transparent 89%);box-shadow:inset 0 0 120px #1b100955;border:1px solid #ffffff0b}.glass-brand{position:absolute;z-index:2;left:50%;top:44%;transform:translate(-50%,-50%);width:min(680px,74vw);text-align:center;filter:drop-shadow(0 3px 3px #0003)}.glass-brand img{width:100%;height:auto}.glass-brand p{font-size:clamp(21px,2.4vw,32px);letter-spacing:-.035em;margin-top:20px;font-weight:700;color:#f6f3ed}.glass-bottom{position:absolute;z-index:3;bottom:37px;left:4%;right:4%;display:flex;justify-content:space-between;align-items:end;gap:35px}.glass-down{display:flex;align-items:center;gap:25px;font-size:16px;line-height:1.5}.glass-down span{width:45px;height:45px;display:grid;place-items:center;border:1px solid #ffffff60;border-radius:50%;font-size:23px;transition:transform .3s}.glass-down:hover span{transform:translateY(4px)}.workshop-picker{display:flex;gap:24px}.workshop-picker button{background:transparent;border:0;border-bottom:2px solid #ffffff30;color:#f6f3ed;padding:16px 0;font-size:15px;min-height:50px;transition:border-color .3s}.workshop-picker button[aria-pressed=true]{border-color:#f6f3ed}.workshop-picker button:hover{border-color:#7b6866}.craft-intro{padding:110px 0 100px;background:var(--bg)}.intro-kicker{font-size:18px;color:var(--muted);margin-bottom:30px}.craft-intro h1{font-size:clamp(43px,5.7vw,84px);line-height:1.07;letter-spacing:-.06em;max-width:1100px;margin:0}.craft-intro h1 span{color:var(--accent)}.intro-promise{font-size:clamp(28px,3.2vw,48px);line-height:1.25;letter-spacing:-.045em;color:var(--accent);margin:22px 0 40px;font-weight:700}.intro-bottom{display:flex;justify-content:space-between;align-items:center;gap:40px;border-top:1px solid var(--line);padding-top:32px}.intro-bottom p{margin:0;color:var(--muted);font-size:19px}.button{background:#7b6866;color:#f6f3ed}.button:hover{background:#655452}.light{background:var(--paper);color:var(--ink)}.light p{color:var(--muted)}.light em{color:var(--accent)}.card{border-color:var(--line)}.card .number,.steps .number,.icon{color:var(--accent)}.capability{background:var(--paper)}.checklist li:before{color:var(--accent)}.aftercare,.steps article{border-color:var(--line)}.aftercare,.steps p{color:var(--muted)}.feature-demo{background:#fcfcfc;color:#3c2a1e}.feature-demo .demo-explain,.feature-demo p{color:#736154}.feature-demo .button{color:#f6f3ed}.demo-tabs button{color:#3c2a1e}.demo-tabs button[aria-selected=true]{background:#3c2a1e;color:#fcfcfc}.gallery-item{color:#3c2a1e}.wire-preview{background:#fcfcfc;color:#3c2a1e}.light .wire-preview p{color:#3c2a1e}.wire-body h3{color:#3c2a1e}.wire-top{color:#3c2a1e}.before-inner p{color:#4b4b4b}.fake-button{color:#3c2a1e}.faq details{border-color:var(--line)}.contact{background:#7b6866;color:#f6f3ed}.contact em{color:#7b6866}.contact .text-link{color:#f6f3ed}footer{color:var(--muted)}.footer-claim{color:var(--ink)}dialog{background:var(--bg);color:var(--ink)}dialog .gallery-large{color:#3c2a1e}#cookie-bar{font-size:15px;max-width:890px}.range-labels{color:var(--ink)}.price-row{color:#3c2a1e}
@media(max-width:1250px){.site-header{gap:18px}.header-cta{display:none}.site-header nav{gap:20px}}
@media(max-width:800px){.site-header{min-height:78px;padding:16px 22px;gap:12px}.identity,.identity img{width:175px}.identity{margin-right:auto}.menu-toggle{order:3;min-height:44px;font-size:15px}.site-header nav{background:#483c3b}.glass-hero{height:calc(88svh - 78px);min-height:530px;max-height:850px}.glass-brand{width:min(620px,88vw);top:41%}.glass-brand p{margin-top:14px}.glass-bottom{left:24px;right:24px;bottom:24px;display:flex;flex-direction:column-reverse;align-items:stretch;gap:18px}.workshop-picker{justify-content:space-between;gap:14px}.workshop-picker button{font-size:14px;flex:1}.glass-down{justify-content:space-between;font-size:15px}.glass-down span{width:38px;height:38px}.craft-intro{padding:65px 0}.intro-kicker{font-size:16px;margin-bottom:24px}.intro-bottom{align-items:flex-start;flex-direction:column;gap:24px}.intro-bottom p{font-size:17px}.glass-shade{background:linear-gradient(180deg,#160d0740,#160d0755 50%,#160d07d9)}.workshop-backdrop{transform:scale(1.045);will-change:auto}}
@media(max-width:400px){.site-header{padding:14px 16px;gap:9px}.identity,.identity img{width:145px}.menu-toggle{padding:8px 10px;font-size:14px}.glass-hero{min-height:500px}.workshop-picker{gap:10px}.workshop-picker button{font-size:12px}.glass-bottom{left:18px;right:18px}.glass-brand{width:94vw}.craft-intro h1{font-size:40px}.intro-promise{font-size:28px}.glass-brand p{font-size:21px}}
@media(prefers-reduced-motion:reduce){.workshop-backdrop{transform:none;will-change:auto}.glass-brand{filter:none}.workshop-image{transition:none}}
/* Clip the decorative parallax without creating a nested scroll container. */
.glass-hero{overflow:clip}
/* Painted shop-window sign: sharp vinyl, displaced reflection, soft workshop. */
.identity,.identity img{width:135px}.identity img{height:66px;object-fit:contain}.site-header{padding-top:10px;padding-bottom:10px}.glass-brand{width:min(740px,77vw);top:46%;perspective:1200px;filter:none}.glass-brand .sign-front{position:relative;z-index:2;transform:rotate(-1.2deg);filter:drop-shadow(1px 2px 1px #2b180d26)}.sign-reflection{position:absolute;inset:0;opacity:.12;transform:translate(-22px,8px) rotate(-1.2deg);filter:blur(1.3px)}.workshop-image{filter:blur(5px) saturate(.68) sepia(.15)}.glass-shade{background:linear-gradient(180deg,#170e0733 0%,#170e0745 45%,#170e07bd 100%)}.glass-reflection{background:linear-gradient(111deg,transparent 10%,#fffaf00b 29%,transparent 30%,transparent 78%,#fffaf009 80%,transparent 94%);box-shadow:inset 0 0 100px #1e120644}.capability-copy{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:start}.capability-copy h2{margin:0}.capability-copy p{color:var(--muted);margin-bottom:0}.capability-copy .checklist{margin-top:0}.button{background:#7b6866}.button:hover{background:#655452}.contact{background:#7b6866}.contact em{color:#7b6866}.site-header nav{background-color:transparent}.workshop-picker button:hover{border-color:#7b6866}
@media(max-width:800px){.identity,.identity img{width:110px}.identity img{height:54px}.site-header{padding-top:9px;padding-bottom:9px}.site-header nav{background:#483c3b}.glass-brand{width:90vw;top:43%}.capability-copy{grid-template-columns:1fr;gap:25px}.sign-reflection{transform:translate(-12px,5px) rotate(-1.2deg)}}
@media(max-width:400px){.identity,.identity img{width:105px}.glass-brand{width:96vw}.workshop-image{filter:blur(3px) saturate(.68) sepia(.15)}}

/* Future showcase categories: no pretend links or unfinished mockups. */
.category-intro{max-width:650px;margin-bottom:38px;font-size:19px}.craft-categories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.craft-category{margin:0;min-width:0;border-bottom:1px solid var(--line);padding-bottom:21px}.craft-category img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:6px;filter:saturate(.7);margin-bottom:22px}.craft-category>div{display:flex;align-items:baseline;gap:13px}.craft-category span{color:var(--accent);font-size:16px}.craft-category h3{font-size:24px;margin:0}@media(max-width:1000px){.craft-categories{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 22px}}@media(max-width:480px){.craft-categories{grid-template-columns:1fr}.craft-category img{aspect-ratio:3/2}.craft-category h3{font-size:26px}}
/* Fullscreen opening: navigation overlays the image, next section starts below the viewport. */
.site-header{position:fixed;inset:0 0 auto;width:100%;z-index:20;background:#483c3bb3}
.glass-hero{width:100%;height:100vh;height:100svh;min-height:0;max-height:none}
.glass-brand{top:48%;width:min(740px,77vw,calc((100svh - 230px)*1.765))}
@supports(height:100dvh){.glass-hero{height:100dvh}.glass-brand{width:min(740px,77vw,calc((100dvh - 230px)*1.765))}}
@media(max-width:800px){.glass-hero{height:100vh;height:100svh;min-height:0;max-height:none}.glass-brand{top:45%;width:min(90vw,calc((100svh - 260px)*1.765))}@supports(height:100dvh){.glass-hero{height:100dvh}.glass-brand{width:min(90vw,calc((100dvh - 260px)*1.765))}}}
@media(max-height:520px) and (orientation:landscape){.glass-bottom{bottom:14px;flex-direction:row;align-items:center;gap:20px}.glass-down{font-size:13px}.glass-down span{width:30px;height:30px}.workshop-picker{gap:15px}.workshop-picker button{font-size:12px;padding:10px 0;min-height:36px}.glass-brand{top:52%;width:min(50vw,calc((100dvh - 145px)*1.765))}}

/* Each photograph has its own natural palette. No shared sepia wash. */
.workshop-backdrop{inset:0;transform:translateY(var(--window-shift,0px)) scale(1.015)}
.workshop-image,.workshop-image[data-scene]{filter:blur(2px);transform:scale(1.012)}
.glass-shade{background:linear-gradient(180deg,#08080835,#08080840 40%,#080808b0);transition:background .7s}
.glass-hero[data-workshop=salon] .glass-shade,.glass-hero[data-workshop=bakery] .glass-shade{background:linear-gradient(180deg,#08080840,#08080860 45%,#080808b0)}
.glass-reflection{box-shadow:none;background:linear-gradient(110deg,transparent 20%,#ffffff05 42%,transparent 43%)}
.glass-brand .sign-front{transform:perspective(1100px) rotateY(25deg) rotate(3deg)}
.sign-reflection{transform:translate(-17px,5px) perspective(1100px) rotateY(25deg) rotate(3deg);opacity:.09}
@media(max-width:800px){.workshop-backdrop{transform:none}.workshop-image{object-position:58% center}.glass-brand .sign-front{transform:perspective(750px) rotateY(25deg) rotate(3deg)}}

/* A single projective plane, calibrated to each photograph, for sign and reflection. */
.workshop-backdrop{inset:0;transform:none;will-change:auto}
.workshop-image,.workshop-image[data-scene]{transform:none;filter:blur(2px)}
.glass-brand{left:0;top:0;width:900px;height:510px;max-width:none;perspective:none;transform-origin:0 0}
.glass-brand .sign-front{transform:none;width:900px;height:510px}
.glass-brand .sign-reflection{transform:translate(-10px,2px);width:900px;height:510px;opacity:.08}

/* Offset secondary glass reflection, on the same plane as the vinyl. */
.glass-brand .sign-reflection{transform:translate(-32px,12px);opacity:.24;filter:blur(1.2px)}
.glass-brand .sign-front{filter:drop-shadow(2px 3px 2px #00000055)}

/* Close, faint secondary image from double glazing. */
.glass-brand .sign-reflection{transform:translate(-7px,2px);opacity:.10;filter:blur(.65px)}
.glass-brand .sign-front{filter:drop-shadow(1px 1px 1px #00000026)}

/* Light content with the accent specified by the user: RGB 123, 104, 102. */
:root{color-scheme:light;--accent:#7b6866;--warm:#7b6866}
.contact em{color:#fff7f5}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline-color:#7b6866}
#cookie-bar #cookie-close{background:#7b6866}
.workshop-picker button:hover{border-color:#fffaf0}

/* Clear benefit symbols and a stronger service action. */
.benefits .icon{display:flex;align-items:center;width:42px;height:42px;margin-bottom:28px;line-height:1}
.benefits .icon svg{display:block;width:38px;height:38px}
.benefits h3{min-height:2.24em}
.card .service-cta{margin-top:auto;font-size:17px;padding:15px 22px}
.steps h3{min-height:2.24em}
/* Navigation makes room for the content, returning when the visitor scrolls up. */
.site-header{transition:transform .32s cubic-bezier(.22,.61,.36,1),background-color .25s,min-height .25s,padding .25s;will-change:transform}
.site-header.is-scrolled{min-height:64px;padding-top:6px;padding-bottom:6px;background:#483c3bf2}
.site-header.is-scrolled .identity img{height:48px}
.site-header .identity img{transition:height .25s}
.site-header.header-hidden{transform:translateY(calc(-100% - 2px));pointer-events:none}
.site-header:focus-within{pointer-events:auto}
@media(max-width:800px){.site-header.is-scrolled{min-height:60px}.site-header.is-scrolled .identity img{height:44px}.card .service-cta{margin-top:12px}.benefits h3{min-height:2.24em}}
@media(prefers-reduced-motion:reduce){.site-header,.site-header .identity img{transition:none}}

/* All light surfaces are tints of RGB (123, 104, 102) mixed with white. */
:root{--bg:#f7f6f6;--panel:#fcfcfc;--paper:#edeaea;--line:#7b686633}
#cookie-bar{background:#f4f3f3;border-color:#7b686633}
