/* Preview-only art directions. Existing content, routes and interactions are shared. */
html:is([data-theme=precision],[data-theme=atelier],[data-theme=nocturne],[data-theme=mineral]){--body-font:'Manrope','Segoe UI',sans-serif;--display-font:var(--body-font);--on-dark:#ccd5df;--image-paper:#eef0f1;--action-text:#fff}
html[data-theme=precision]{--paper:#f0f4f7;--surface:#fff;--soft:#e0e8f0;--ink:#132b42;--muted:#4f6579;--accent:#155d9d;--header:#fff;--headtext:#132b42;--line:#c5d3df;--light:#155d9d;--panel:#163b5c;--panel-text:#f4f8fb}
html[data-theme=atelier]{--paper:#f4f0e8;--surface:#fffcf5;--soft:#e9e1d3;--ink:#342e2b;--muted:#716357;--accent:#745542;--header:#342e2b;--headtext:#faf3e7;--line:#cec3b3;--light:#e4cbaa;--panel:#473d35;--panel-text:#fbf6eb;--display-font:'Cormorant Garamond',Georgia,serif;--on-dark:#ded1bf;--image-paper:#eae3d8}
html[data-theme=nocturne]{--paper:#111724;--surface:#1b2537;--soft:#202d44;--ink:#edf3ff;--muted:#b0bfd5;--accent:#b0c7ff;--header:#1b2537;--headtext:#edf3ff;--line:#3a4b67;--light:#b0c7ff;--panel:#253653;--panel-text:#edf3ff;--on-dark:#bdcbe2;--image-paper:#e2e7ed;--action-text:#182741}
html[data-theme=mineral]{--paper:#eaece1;--surface:#f6f7f0;--soft:#d9ddc9;--ink:#30392b;--muted:#606a54;--accent:#536339;--header:#303b2c;--headtext:#f5f7e8;--line:#bdc5ac;--light:#d5dfae;--panel:#d9ddc9;--panel-text:#30392b;--display-font:'Montserrat','Segoe UI',sans-serif;--on-dark:#d0d9c1;--image-paper:#e5e8dc}
html:is([data-theme=precision],[data-theme=atelier],[data-theme=nocturne],[data-theme=mineral]) body{font-family:var(--body-font)}
html:is([data-theme=precision],[data-theme=atelier],[data-theme=nocturne],[data-theme=mineral]) :is(h1,h2,h3){font-family:var(--display-font)}
html:is([data-theme=precision],[data-theme=atelier],[data-theme=nocturne],[data-theme=mineral]) .button{color:var(--action-text)}
html:is([data-theme=precision],[data-theme=atelier],[data-theme=nocturne],[data-theme=mineral]) .header-cta{color:var(--header);background:var(--light)}
html:is([data-theme=precision],[data-theme=atelier],[data-theme=nocturne],[data-theme=mineral]) .hero-feature{background:var(--panel);color:var(--panel-text)}
html:is([data-theme=precision],[data-theme=atelier],[data-theme=nocturne],[data-theme=mineral]) .hero-product{background:var(--image-paper)}
html:is([data-theme=precision],[data-theme=atelier],[data-theme=nocturne],[data-theme=mineral]) :is(.feature-caption p,.footer-grid p,.footer-bottom,.video-wrap p){color:var(--on-dark)}
html:is([data-theme=precision],[data-theme=atelier],[data-theme=nocturne],[data-theme=mineral]) .product-card>figure{background:var(--image-paper)}
html:is([data-theme=precision],[data-theme=atelier],[data-theme=nocturne],[data-theme=mineral]) .no-photo{color:var(--muted)}
html:is([data-theme=precision],[data-theme=atelier],[data-theme=nocturne],[data-theme=mineral]) .lightbox::backdrop{background:#17233366}
/* 04: compact masthead, technical ruled grid, clean blue type. */
html[data-theme=precision] .header{border-bottom:1px solid var(--line);box-shadow:0 5px 22px #203f5510}
html[data-theme=precision] .header-inner{min-height:110px;flex-wrap:wrap;gap:0 35px;padding-top:18px;padding-bottom:14px}
html[data-theme=precision] .brand{font-size:22px;letter-spacing:.035em}
html[data-theme=precision] .header nav{font-size:14px;gap:24px}
html[data-theme=precision] .header .brand svg{stroke:var(--accent)}
html[data-theme=precision] .header-cta{color:#fff;background:var(--accent);border-radius:0;min-height:44px}
html[data-theme=precision] .hero{gap:50px;grid-template-columns:1.05fr 1fr;background-image:linear-gradient(90deg,#1c537608 1px,transparent 1px);background-size:80px 100%}
html[data-theme=precision] .hero h1{font-size:clamp(42px,4.1vw,64px);font-weight:700;letter-spacing:-.055em}
html[data-theme=precision] .eyebrow{font-family:Consolas,monospace;letter-spacing:.07em;color:var(--accent)}
html[data-theme=precision] .hero-feature{border-radius:2px;border:1px solid #8ba6bf;box-shadow:14px 14px 0 #d7e2ec}
html[data-theme=precision] .hero-product{height:340px}
html[data-theme=precision] .feature-caption>span:first-child,html[data-theme=precision] .feature-caption .text-link{color:#c6e3ff}
html[data-theme=precision] .category-card{border-radius:0;border-top:3px solid var(--accent)}
html[data-theme=precision] .button{border-radius:0}
html[data-theme=precision] footer,html[data-theme=precision] .video-wrap{background:#163b5c;color:#f4f8fb}
html[data-theme=precision] footer .brand svg{stroke:#c6e3ff}
/* 05: editorial typography, airy cream, floating dark masthead. */
html[data-theme=atelier] .header{top:14px;width:calc(100% - 48px);max-width:1392px;margin:14px auto 0;border-radius:14px;box-shadow:0 10px 30px #31261b14}
html[data-theme=atelier] .header-inner{min-height:84px;padding-inline:30px}
html[data-theme=atelier] .brand{letter-spacing:.13em;font-size:18px}
html[data-theme=atelier] .header nav{font-size:14px;gap:23px}
html[data-theme=atelier] .button{border-radius:30px}
html[data-theme=atelier] .hero{grid-template-columns:1.12fr .88fr;gap:60px;padding-top:65px;padding-bottom:65px}
html[data-theme=atelier] .hero h1{font-size:clamp(56px,5.5vw,84px);font-weight:500;line-height:.99;letter-spacing:-.035em}
html[data-theme=atelier] .hero h1 em{font-style:italic}
html[data-theme=atelier] .hero-copy>p{font-size:19px;max-width:520px}
html[data-theme=atelier] .hero-feature{border-radius:110px 110px 8px 8px;box-shadow:0 14px 40px #46332213}
html[data-theme=atelier] .feature-head{padding:25px 45px 18px;justify-content:center;gap:28px}
html[data-theme=atelier] .hero-product{height:345px;background:#eae3d8}
html[data-theme=atelier] .feature-caption h2{font-size:37px}
html[data-theme=atelier] .category-card{border-radius:8px;background:transparent;border-width:0 0 1px;padding:25px 16px}
html[data-theme=atelier] .category-card h3{font-size:34px}
html[data-theme=atelier] .signal-strip{background:transparent}
html[data-theme=atelier] .section-heading h2{font-size:clamp(42px,4vw,60px)}
/* Atelier refinement: softer controls, consistent cards, restrained motion. */
html[data-theme=atelier] :is(.button,.menu-toggle,.chips a,.chips button){border-radius:999px;transition:background-color .22s,color .22s,border-color .22s,box-shadow .22s,transform .22s}
html[data-theme=atelier] .button{padding:15px 27px;box-shadow:0 5px 16px #4d392313}
html[data-theme=atelier] .menu-toggle{padding:10px 20px;min-height:46px;border-color:#dcc7ac66;background:#ffffff06;font-size:15px}
html[data-theme=atelier] .menu-toggle[aria-expanded=true]{background:#e4cbaa;color:#342e2b;border-color:#e4cbaa}
html[data-theme=atelier] .chips{gap:10px 12px}
html[data-theme=atelier] .chips a,html[data-theme=atelier] .chips button{padding:11px 20px;line-height:1.5;min-height:46px}
html[data-theme=atelier] .chips [aria-current]{box-shadow:0 5px 14px #63473219}
html[data-theme=atelier] .filter-bar{border-radius:22px;padding:24px;border:1px solid #cec3b370}
html[data-theme=atelier] :is(.filter-bar input,.filter-bar select,.request-form input,.request-form textarea){border-radius:14px;transition:border-color .2s,box-shadow .2s}
html[data-theme=atelier] :is(.filter-bar input,.filter-bar select,.request-form input,.request-form textarea):focus-visible{outline:2px solid #74554280;outline-offset:3px}
html[data-theme=atelier] .product-card{border-radius:22px;border-color:#cec3b3c0;box-shadow:0 5px 18px #44332005;transition:transform .25s,box-shadow .25s,border-color .25s}
html[data-theme=atelier] .product-content{padding:27px}
html[data-theme=atelier] .product-content h3{font-size:32px;line-height:1.1}
html[data-theme=atelier] :is(.note-box,.contact-panel,.video-wrap){border-radius:22px}
html[data-theme=atelier] .zoom{border-radius:22px;overflow:hidden}
html[data-theme=atelier] .header{transition:box-shadow .25s;border:1px solid #ffffff12}
html[data-theme=atelier] #mobile-menu{padding:4px 18px 18px;gap:5px;max-height:calc(100dvh - 105px);overflow:auto;overscroll-behavior:contain}
html[data-theme=atelier] #mobile-menu.is-animating{overflow:hidden}
html[data-theme=atelier] #mobile-menu a{padding:10px 16px;border-radius:13px;font-size:16px;border:0;transition:background-color .2s,color .2s;line-height:1.6}
html[data-theme=atelier] #mobile-menu a[aria-current]{background:#ffffff12;color:#f4dfc1}
html[data-theme=atelier] .header :focus-visible{outline-color:#e4cbaa}
@media(hover:hover){html[data-theme=atelier] .chips a:hover{background:#e9e1d3;border-color:#a58d74;transform:translateY(-1px)}html[data-theme=atelier] .chips a[aria-current]:hover{background:#654734;color:#fff}html[data-theme=atelier] .product-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px #44332010;border-color:#ad947a}html[data-theme=atelier] #mobile-menu a:hover{background:#ffffff15}html[data-theme=atelier] .menu-toggle:hover{border-color:#e4cbaa}}
@media(prefers-reduced-motion:reduce){html[data-theme=atelier] :is(.button,.menu-toggle,.chips a,.chips button,.product-card,.header,#mobile-menu a){transition:none!important;transform:none!important}}
/* Independent type comparison for the selected Atelier direction. */
html[data-theme=atelier][data-type=manrope]{--display-font:'Manrope','Segoe UI',sans-serif}
html[data-theme=atelier][data-type=montserrat]{--display-font:'Montserrat','Segoe UI',sans-serif;--body-font:'Montserrat','Segoe UI',sans-serif}
html[data-theme=atelier]:is([data-type=manrope],[data-type=montserrat]) .hero h1{font-size:clamp(40px,4.1vw,64px);font-weight:500;line-height:1.12;letter-spacing:-.045em}
html[data-theme=atelier]:is([data-type=manrope],[data-type=montserrat]) .hero h1 em{font-style:normal}
html[data-theme=atelier]:is([data-type=manrope],[data-type=montserrat]) .page-intro h1{font-size:clamp(38px,4.2vw,62px);font-weight:500;line-height:1.15}
html[data-theme=atelier]:is([data-type=manrope],[data-type=montserrat]) .product-content h3{font-size:26px;line-height:1.2;font-weight:600}
html[data-theme=atelier]:is([data-type=manrope],[data-type=montserrat]) .feature-caption h2{font-size:29px;line-height:1.15}
html[data-theme=atelier]:is([data-type=manrope],[data-type=montserrat]) .category-card h3{font-size:27px;line-height:1.2}
.font-preview{display:none;margin-top:16px;border-bottom:1px solid #40536a;padding-bottom:16px;font-family:'Manrope','Segoe UI',sans-serif}
html[data-theme=atelier] .font-preview{display:grid;gap:8px}
.font-preview label{font-weight:600}.font-preview select{width:100%;min-height:44px;border:1px solid #718198;border-radius:10px;background:#f2f4f6;color:#172433;padding:8px 10px;font-size:13px}.font-preview small{font-size:11px;color:#cad4e1}
@media(max-width:800px){html[data-theme=atelier]:is([data-type=manrope],[data-type=montserrat]) .hero h1{font-size:clamp(34px,6.7vw,52px)}html[data-theme=atelier][data-type=montserrat] .brand{font-size:17px}}
/* 06: dark technology, light accents, glass-like elevated header. */
html[data-theme=nocturne] body{background:radial-gradient(ellipse at 80% 15%,#263655 0,transparent 42%),var(--paper)}
html[data-theme=nocturne] .header{top:16px;max-width:1320px;width:calc(100% - 48px);margin:16px auto 0;background:#1b2537ef;border:1px solid #455677;border-radius:20px;box-shadow:0 14px 40px #0003;backdrop-filter:blur(14px)}
html[data-theme=nocturne] .header-inner{padding-inline:30px;min-height:86px;gap:26px}
html[data-theme=nocturne] .header nav{font-size:14px;gap:22px}
html[data-theme=nocturne] .brand{font-size:19px}
html[data-theme=nocturne] .button{border-radius:9px}
html[data-theme=nocturne] .hero{gap:65px;padding-top:64px;padding-bottom:64px}
html[data-theme=nocturne] .hero h1{font-weight:500;letter-spacing:-.065em;font-size:clamp(44px,4.2vw,66px)}
html[data-theme=nocturne] .hero-feature{border:1px solid #536584;border-radius:20px;box-shadow:0 22px 60px #0003;transform:rotate(1deg)}
html[data-theme=nocturne] .hero-product{background:#e2e7ed}
html[data-theme=nocturne] .category-card,html[data-theme=nocturne] .product-card{border-radius:14px}
html[data-theme=nocturne] .category-image{background:var(--image-paper);border-radius:10px;padding:10px}
html[data-theme=nocturne] .signal-strip{background:#1a2536}
html[data-theme=nocturne] .chips [aria-current],html[data-theme=nocturne] .chips [aria-pressed=true]{color:#182741}
html[data-theme=nocturne] .video-wrap .chips button[aria-pressed=true]{color:#182741}
/* 07: architectural mineral green, reversed hero, crisp geometric type. */
html[data-theme=mineral] .header{border-top:5px solid #a9b581;border-bottom:1px solid #536339}
html[data-theme=mineral] .header-inner{min-height:110px}
html[data-theme=mineral] .brand{font-family:'Montserrat',sans-serif;font-size:20px;letter-spacing:.025em}
html[data-theme=mineral] .header nav{font-size:14px;gap:20px}
html[data-theme=mineral] .header-cta{border-radius:0;box-shadow:4px 4px 0 #6b7a4e}
html[data-theme=mineral] .hero{grid-template-columns:.88fr 1.12fr;gap:65px}
html[data-theme=mineral] .hero-feature{order:-1;border:1px solid #abb798;border-radius:0;min-height:540px}
html[data-theme=mineral] .hero h1{font-size:clamp(40px,3.6vw,58px);font-weight:500;line-height:1.12;letter-spacing:-.05em}
html[data-theme=mineral] .hero-copy>p{font-size:19px}
html[data-theme=mineral] .hero-product{height:290px}
html[data-theme=mineral] .feature-head{border-color:var(--line)}
html[data-theme=mineral] .feature-caption>span:first-child,html[data-theme=mineral] .feature-caption .text-link{color:var(--accent)}
html[data-theme=mineral] .feature-caption p{color:var(--muted)}
html[data-theme=mineral] .feature-caption h2{font-size:25px}
html[data-theme=mineral] .category-card{border-radius:0;background:transparent;border-width:0 0 1px;border-bottom:3px solid var(--line)}
html[data-theme=mineral] .button,html[data-theme=mineral] .product-card{border-radius:0}
html[data-theme=mineral] .signal-strip{background:var(--header);color:var(--headtext)}
/* Comparison tool: deliberately separate from the publishable UI. */
.design-switch{background:#172433;color:#f4f7fb;border-color:#40536a;max-width:calc(100vw - 28px);padding:12px 18px}
.design-switch[open]{width:500px;max-height:80dvh;overflow:auto}
.design-switch summary{font-family:'Manrope','Segoe UI',sans-serif;font-weight:600}
.design-switch p{color:#c9d4e0;margin-top:12px}
.design-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.design-options button{min-width:0}.design-options button>span:last-child{min-width:0;overflow-wrap:anywhere}
html[data-theme=precision] .video-wrap .chips button[aria-pressed=true]{background:#c6e3ff;color:#163b5c}
.design-options button{display:flex;align-items:flex-start;gap:9px;margin:0;padding:13px 9px;line-height:1.45;border-color:#40536a}
.design-options button:hover{border-color:#b2c8e5}
.design-options button[aria-pressed=true]{background:#314861;border-color:#b2c8e5}
.design-options strong{display:block;font-size:13px;font-weight:600}
.design-options small{display:block;font-size:11px;color:#cad4e1;margin-top:4px;line-height:1.5}
.design-dot{width:15px;height:15px;border-radius:50%;flex-shrink:0;margin-top:3px;border:1px solid #ffffff88;background:#ad4318}
.dot-precision{background:#155d9d}.dot-atelier{background:#dfc5a5}.dot-nocturne{background:#9cb6f9}.dot-mineral{background:#95a873}.dot-navy{background:#4c6f96}.dot-graphite-light{background:#afb6bb}.dot-sand{background:#c9ae81}
@media(max-width:1150px){html:is([data-theme=atelier],[data-theme=nocturne]) .header-inner{padding-inline:22px;gap:15px}html:is([data-theme=atelier],[data-theme=nocturne]) .header nav{gap:17px}html[data-theme=atelier] .hero{gap:35px}html[data-theme=mineral] .hero{gap:35px}}
@media(max-width:800px){html:is([data-theme=precision],[data-theme=atelier],[data-theme=nocturne],[data-theme=mineral]) .hero{grid-template-columns:1fr;padding-block:35px;gap:35px}html:is([data-theme=precision],[data-theme=mineral]) .header-inner{min-height:82px;padding-block:12px;flex-wrap:nowrap}html:is([data-theme=atelier],[data-theme=nocturne]) .header{width:calc(100% - 24px);top:8px;margin-top:8px;border-radius:12px}html:is([data-theme=atelier],[data-theme=nocturne]) .header-inner{min-height:74px;padding-inline:18px}html[data-theme=atelier] .hero h1{font-size:clamp(49px,8.5vw,72px)}html:is([data-theme=precision],[data-theme=nocturne],[data-theme=mineral]) .hero h1{font-size:clamp(36px,6.7vw,56px)}html[data-theme=mineral] .hero-feature{order:0}html[data-theme=nocturne] .hero-feature{transform:none}html[data-theme=precision] .hero-feature{box-shadow:7px 7px 0 #d7e2ec}.design-switch[open]{max-height:65dvh}.design-switch .design-options{grid-template-columns:1fr 1fr}html[data-theme=precision] .menu-toggle{color:var(--ink);border-color:var(--line)}}
@media(max-width:450px){.design-switch{right:10px;bottom:10px}.design-switch[open]{width:calc(100vw - 20px)}.design-options button{padding:10px 7px;gap:6px}.design-options strong{font-size:12px}.design-options small{font-size:10px}html[data-theme=atelier] .hero-feature{border-radius:60px 60px 8px 8px}html[data-theme=atelier] .feature-head{padding-inline:24px}html:is([data-theme=precision],[data-theme=atelier],[data-theme=nocturne],[data-theme=mineral]) .hero-product{height:280px}}