/* Viutify website / November 2026. Scoped to site pages, not shared decks.
   References: design.md, decks/boconcept/DESIGN.md, decks/kitchen-center/DESIGN.md.
   Neulis is not bundled: use the same honest system fallback as the decks. */
:root{--brand-primary:#39292b;--brand-white:#efece8;--brand-mist:#e2ddd6;--brand-accent:#6e6336;--brand-secondary:#6d5f61;--brand-pale:#e2ddd6;--brand-outline:#b3a9a3;--brand-mint:#d1d69a;--brand-body-font:'Neulis Sans','NeulisSans','Avenir Next','Segoe UI Variable',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--brand-display-font:var(--brand-body-font);--motion-ease:cubic-bezier(.23,1,.32,1);--ease:var(--motion-ease);--gutter:clamp(24px,5.4vw,104px);--control-boundary:#8d817b}
body{background:#efece8;color:#39292b}::selection{background:#d1d69a;color:#39292b}
body :is(h1,h2,h3){font-family:var(--brand-body-font);font-weight:500;letter-spacing:-.04em}
body :is(button,input,select,textarea,.caption,.small,.wow-note,.wow-enlarge span,.wow-film-toggle,.wow-viewer>button){font-family:var(--brand-body-font)}
h1,h2{line-height:1.05}h2{font-size:clamp(36px,4.4vw,68px)}
.section-space,.page-section{padding-block:clamp(64px,8vw,120px)}
.section-heading,.section-intro{gap:8%;margin-bottom:48px}
.site-header{max-width:none;background:#211719;color:#efece8;border-bottom:1px solid #efece82b;min-height:92px;padding-block:16px;gap:24px;position:relative;z-index:10}
.site-header .brand img{width:128px;height:auto;max-height:48px}.site-header nav{gap:22px}.site-header nav a,.header-access{font-weight:500;font-size:13px}
.site-header nav a:hover,.site-header nav a[aria-current=page],.site-header nav.language-switch a{color:#efece8}.site-header nav a[aria-current=page],.language-switch a[aria-current]{border-color:#d1d69a}.site-header nav a:hover,.header-access:hover{color:#d1d69a}
.site-header .menu-button{color:#efece8;border-color:#efece866;background:transparent}.scroll-progress{background:#d1d69a}
.button{background:#39292b;color:#efece8;border-color:#39292b;border-radius:0;font-weight:500;min-height:54px;padding:15px 22px}.button:hover{background:#211719;border-color:#211719;color:#fff}
.text-link{font-weight:500;border-color:#b3a9a3}.text-link:hover{color:#6e6336;border-color:#6e6336}
:focus-visible{outline:3px solid #6e6336;outline-offset:5px}.site-header :focus-visible,.hero-immersive :focus-visible,.site-footer :focus-visible,.integrations :focus-visible{outline-color:#d1d69a}
/* The full-bleed opening translates the photographic deck, without its slide lock. */
.hero.section-wrap{width:100%;max-width:none;padding:0;display:flex;flex-direction:column}
.hero-immersive{position:relative;isolation:isolate;min-height:clamp(620px,calc(100svh - 92px),840px);display:flex;align-items:center;background:#211719;color:#efece8;overflow:hidden}
.hero-immersive .hero-render{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:-2;border:0;background:#211719;display:block;transform:none!important;clip-path:none!important;opacity:1!important}
.hero-immersive .hero-render>img,.hero-immersive .hero-render>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-immersive::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(24,16,18,.85),rgba(24,16,18,.53) 48%,rgba(24,16,18,.12)),linear-gradient(0deg,rgba(24,16,18,.5),transparent 45%)}
.hero-immersive .hero-intro{display:block;width:100%;margin:0;padding:72px var(--gutter) 128px;pointer-events:none}
.hero-immersive h1{font-size:clamp(66px,7.4vw,112px);font-weight:500;line-height:1.01;letter-spacing:-.05em;max-width:12ch}
.hero-immersive .hero-offer{max-width:560px;padding-top:28px}.hero-immersive .category{font-size:15px;font-weight:500;color:#d1d69a;margin-bottom:12px}.hero-immersive .lead{font-size:clamp(18px,1.65vw,23px);line-height:1.5;margin-bottom:28px;color:#efece8}.hero-immersive a{pointer-events:auto}
.hero-immersive .button{background:#efece8;color:#39292b;border-color:#efece8}.hero-immersive .button:hover{background:#d1d69a;border-color:#d1d69a}
.hero-immersive .media-controls{position:absolute;bottom:18px;right:var(--gutter);width:min(440px,calc(100% - 2*var(--gutter)));background:#211719eb;border:1px solid #efece84d;z-index:3;min-height:52px}.hero-immersive .media-controls button{border-color:#efece855}.hero-immersive .media-controls input{accent-color:#d1d69a}
.hero-bottom{order:1;padding:22px var(--gutter);margin:0;background:#211719;color:#efece8;border-top:1px solid #efece833;border-bottom:0;gap:32px;min-height:94px}.hero-bottom p{color:#d1c7c4}.hero-bottom a{font-size:15px;font-weight:500;white-space:normal;display:flex;align-items:center;gap:14px;min-height:44px}.hero-bottom a:hover{color:#d1d69a}
.hero-proof{order:2;display:block;width:min(100% - 2*var(--gutter),1320px);margin:64px auto 0}
.hero-estimate{background:transparent;color:#39292b;padding:32px 0;border-top:1px solid #b3a9a3;border-bottom:1px solid #b3a9a3;display:grid;grid-template-columns:1fr 1fr 260px;gap:12px 40px;align-items:center}
.hero-estimate h2{font-size:clamp(28px,3vw,42px);margin:0;grid-column:1;grid-row:1/3}.hero-estimate>p{color:#6d5f61;font-size:15px}.hero-estimate .quote-key-facts{grid-column:2;font-size:16px;color:#39292b}.hero-estimate .hero-quote-link{grid-column:3;grid-row:1/4;margin:0;display:flex;align-items:center;gap:16px;color:#39292b}.hero-estimate .hero-quote-link img{width:80px!important;height:110px!important;object-fit:cover;object-position:top}.hero-estimate .hero-quote-link span{font-size:14px}.hero-estimate .estimate-note{grid-column:1/3;margin:8px 0 0;font-size:13px;max-width:none;color:#6d5f61}
/* Flat fields, fine rules and photographic scale replace paper and striped mats. */
.workflow-section::after,.pilot::after,.integrations::after,.site-footer::after,.hero-estimate::after{display:none}
.media-mat,.media-field--mat,.quote-flow-photo,.catalog-card{background:#e2ddd6;background-image:none;border:0;padding:16px}.catalogue .media-mat{padding:16px}
.page-hero figure:after{display:none}.page-hero{padding-block:clamp(54px,6vw,92px);gap:6%}.page-hero h1,.page-hero:not(.page-hero--wide) h1{font-size:clamp(48px,5.6vw,86px);font-weight:500;letter-spacing:-.045em}
.page-hero--wide h1{max-width:18ch}.page-hero--ink{background:#211719}.page-hero--ink h1 em{color:#d1d69a}
.page-section--ink,.integrations,.site-footer,.quote-flow,.estimate-board,.page-choice--ink{background:#211719;color:#efece8}.page-section--ink .section-copy h2{color:#efece8}.page-section--ink .text-link,.page-choice--ink .text-link{color:#efece8}.page-section--ink .route-steps span{color:#d1d69a}
.workflow-section,.pilot,.page-section--mist{background:#e2ddd6}.workflow h3,.route-steps h3,.info-row h3,.catalog-card h3,.quote-flow h3{font-family:var(--brand-body-font);font-weight:500;letter-spacing:-.035em}
.audience-grid{gap:40px}.audience-grid figure{aspect-ratio:1.4}.audience-grid figure img{width:100%;height:100%;object-fit:cover}.audience-copy{padding-top:28px}.audience-copy h3{font-size:clamp(30px,3.3vw,48px);line-height:1.08}.audience-copy p{color:#6d5f61}
.proof-tabs button[aria-selected=true]{color:#6e6336;border-color:#6e6336}.proof-tabs button[aria-selected=true] strong{font-weight:600}.proof-tabs button[aria-selected=true] span{color:#6e6336}.proof-tabs button:hover{background:#e2ddd6}
.site-footer img{height:auto}.site-footer .footer-top p{font-family:var(--brand-body-font);letter-spacing:-.04em}
body :is(.wow-viewer,#image-viewer,.quote-viewer){background:#efece8;color:#39292b}dialog::backdrop{background:#211719e8!important}
@media(min-width:901px) and (max-width:1200px){.site-header{gap:16px;padding-inline:24px}.site-header nav{gap:12px}.site-header .brand img{width:110px}.site-header nav a{font-size:12px}}
@media(max-width:900px){.site-header{min-height:80px}.site-header #main-nav{background:#211719;border-color:#efece833}.site-header #main-nav a{color:#efece8}.hero-immersive{min-height:650px}.hero-estimate{grid-template-columns:1fr 1fr;gap:22px}.hero-estimate h2{grid-row:auto}.hero-estimate .hero-quote-link{grid-column:2;grid-row:2/4}.hero-estimate .quote-key-facts{grid-column:1}.hero-estimate .estimate-note{grid-column:1}.hero-bottom{flex-wrap:wrap;gap:8px 24px}.hero-bottom p{flex-basis:100%}.hero-bottom a{flex:1}.section-heading,.section-intro{gap:24px}}
@media(max-width:700px){.hero-immersive{min-height:720px;min-height:max(690px,calc(100svh - 80px));align-items:flex-start}.hero-immersive .hero-intro{padding:62px var(--gutter) 140px}.hero-immersive h1{font-size:clamp(56px,12vw,78px)}.hero-immersive .hero-offer{padding-top:26px;max-width:36ch}.hero-immersive .lead{font-size:18px}.hero-immersive .hero-render>video,.hero-immersive .hero-render>img{object-position:58% center}.hero-immersive::after{background:linear-gradient(90deg,#181012dd,#18101270),linear-gradient(0deg,#18101266,transparent 70%)}.hero-immersive .media-controls{bottom:22px;right:24px}.hero-bottom{padding-block:20px;display:grid;gap:8px}.hero-bottom a{justify-content:space-between}.hero-proof{margin-top:40px}.hero-estimate{grid-template-columns:1fr;gap:16px;padding:28px 0}.hero-estimate h2,.hero-estimate .quote-key-facts,.hero-estimate .hero-quote-link,.hero-estimate .estimate-note{grid-column:1;grid-row:auto}.hero-estimate .hero-quote-link{justify-content:flex-start}.hero-estimate .hero-quote-link img{width:70px!important;height:95px!important}.hero-estimate .hero-quote-link span{max-width:22ch}.audience-grid{gap:48px}.section-heading,.section-intro{margin-bottom:30px}.page-hero h1,.page-hero:not(.page-hero--wide) h1{font-size:clamp(42px,10vw,64px)}.media-mat,.media-field--mat,.catalogue .media-mat{padding:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-immersive *{animation:none!important;transition:none!important}}
/* Keep transport above the photographic veil, so controls retain contrast. */
.hero-immersive .hero-render{z-index:0}
.hero-immersive .hero-render::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,rgba(24,16,18,.85),rgba(24,16,18,.53) 48%,rgba(24,16,18,.12)),linear-gradient(0deg,rgba(24,16,18,.5),transparent 45%)}
.hero-immersive::after{display:none}.hero-immersive .hero-intro{position:relative;z-index:2}.hero-immersive .media-controls{color:#efece8}
@media(max-width:700px){.hero-immersive .hero-render::after{background:linear-gradient(90deg,#181012dd,#18101270),linear-gradient(0deg,#18101266,transparent 70%)}}