/* Shared site header, extracted from style.css + internas.css by _test/build_header_css.py. Used by pages that do not load the full site CSS (planner). */
.site-header .wrap{max-width:var(--max);margin:auto;padding:0 5%}
.site-header .btn{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;background:var(--orange);color:var(--black);border:1px solid var(--orange);padding:16px 22px;min-height:48px;font-size:12px;font-weight:600;text-decoration:none}
.site-header a{text-decoration:none;color:inherit}
.site-header img{display:block}
.site-header .skip{position:absolute;left:10px;top:-100px;z-index:40;background:white;padding:10px}
.site-header .skip:focus{top:10px}
header.site-header{position:sticky;top:0;z-index:20;background:var(--white);border-bottom:1px solid var(--line)}
.site-header .head{display:flex;align-items:center;justify-content:space-between;gap:20px;height:88px}
.site-header .logo{width:213px}
.site-header .nav{display:flex;gap:22px;font-size:12px}
.site-header .phone{font-weight:600;font-size:14px;white-space:nowrap}
.site-header .phone small{display:block;font-size:9px;letter-spacing:.12em;font-weight:400}
.site-header .menu{display:none;background:white;border:1px solid var(--line);min-height:44px;padding:8px 14px}
@media(max-width:1000px){
.site-header .nav{gap:13px}
.site-header .logo{width:180px}
}
@media(max-width:760px){
.site-header .head{height:74px}
.site-header .logo{width:160px}
.site-header .menu{display:block}
.site-header .nav{display:none;position:absolute;top:74px;left:0;right:0;background:white;padding:24px;flex-direction:column;border-bottom:1px solid var(--line)}
.site-header .nav.open{display:flex}
.site-header .head{gap:12px}
}
header.site-header{background:linear-gradient(110deg,#050505 0%,#202020 65%,#3a3a39 100%);color:white;border-bottom:1px solid #ffffff25}
.site-header .head{height:104px}
.brand-lockup{display:flex;flex-direction:column;gap:7px;flex-shrink:0}
.brand-lockup .logo{width:230px}
.brand-lockup>span{font:10px var(--support);letter-spacing:.025em;padding-left:43px;color:white}
.site-header .phone small{color:#eee}
@media(max-width:1000px){
.brand-lockup .logo{width:190px}
.brand-lockup>span{padding-left:0;font-size:9px}
}
@media(max-width:760px){
.site-header .head{height:92px;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;align-content:center}
.brand-lockup{width:calc(100% - 78px);gap:5px}
.brand-lockup .logo{width:170px}
.brand-lockup>span{font-size:9px;white-space:nowrap}
.site-header .menu{background:transparent;color:white;border-color:#ffffff70;align-self:flex-start;font-size:11px;min-height:38px}
.site-header .nav{top:92px;background:#171717;color:white;border-color:#444}
}
header.site-header{isolation:isolate;background:rgba(28,29,28,.76);border-bottom:1px solid #ffffff25;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
header.site-header:before{content:'';position:absolute;inset:0;z-index:-2;background:url('assets/contact-countertop.webp') center 43%/cover;opacity:.26;filter:blur(3px);pointer-events:none}
header.site-header:after{content:'';position:absolute;inset:0;z-index:-1;background:rgba(23,24,23,.48);pointer-events:none}
.brand-lockup{gap:7px;width:258px}
.brand-lockup .logo{width:258px}
.brand-lockup>span{padding-left:49px;font-family:var(--font);font-size:8.5px;font-weight:400;letter-spacing:.065em;line-height:1.5;color:#f5f5f5;white-space:nowrap;text-shadow:0 1px 9px #ffffff25;transition:color .3s,text-shadow .3s}
.brand-lockup:hover>span{color:#fff;text-shadow:0 0 12px #ffffff70}
@media(max-width:1100px){
.brand-lockup{width:223px}
.brand-lockup .logo{width:223px}
.brand-lockup>span{padding-left:42px;font-size:7.3px}
.site-header .nav{gap:15px}
}
@media(max-width:760px){
.brand-lockup{width:calc(100% - 78px);gap:6px}
.brand-lockup .logo{width:213px;max-width:100%}
.brand-lockup>span{padding-left:40px;font-size:7px;letter-spacing:.025em}
.site-header .head{height:98px}
.site-header .nav{top:98px;background:rgba(32,33,32,.96)}
}
@media(max-width:360px){
.brand-lockup .logo{width:185px}
.brand-lockup>span{padding-left:35px;font-size:6px}
}
@media(prefers-reduced-motion:reduce){
.brand-lockup>span{transition:none}
}
.brand-lockup>span{padding-left:66px;font-size:8.5px;letter-spacing:.03em}
@media(min-width:761px) and (max-width:1100px){
.brand-lockup>span{padding-left:57px;font-size:7.3px}
}
@media(max-width:760px){
.brand-lockup>span{padding-left:55px;font-size:7px;letter-spacing:.005em}
}
@media(max-width:360px){
.brand-lockup>span{padding-left:47px;font-size:6px}
}
.site-header .nav{align-items: center; gap: 18px;}
.site-header .nav > a:not(.btn), .nav-group > summary{min-height: 44px; display: flex; align-items: center;}
.nav-group{position: relative;}
.nav-group > summary{cursor: pointer; list-style: none; gap: 8px;}
.nav-group > summary::-webkit-details-marker{display: none;}
.nav-group > summary::after{content: ''; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s;}
.nav-group[open] > summary::after{transform: rotate(225deg);}
.nav-panel{position: absolute; top: calc(100% + 12px); left: -22px; min-width: 245px; padding: 12px; background: #252725; color: white; border: 1px solid #ffffff45; box-shadow: var(--shadow);}
.nav-panel a{display: block; padding: 10px 12px; min-height: 44px; font-size: 12px;}
.nav-panel a:hover, .nav-panel a[aria-current='page']{background: #414240;}
.nav-panel a[aria-current='page']{box-shadow: inset 3px 0 var(--orange);}
.site-header .nav .btn{padding: 12px 17px; gap: 12px; white-space: nowrap;}
.site-header .phone{font-size: 13px;}
.site-header .phone small{font-size: 8px;}
.site-header .lang-switch{font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #fff; border: 1px solid #ffffff70; border-radius: 4px; padding: 6px 8px; line-height: 1; margin-left: 14px; text-decoration: none;}
.site-header .lang-switch:hover, .site-header .lang-switch:focus-visible{border-color: var(--orange); color: var(--orange);}
@media (min-width: 1101px) and (max-width: 1420px){
.site-header .head{gap: 14px;}
.site-header .nav{gap: 13px;}
.site-header .phone small{display: none;}
.site-header .lang-switch{margin-left: 4px;}
}
.site-header .menu{display: none; align-items: center; gap: 8px;}
.site-header .menu svg{width: 16px; height: 16px;}
.site-header :focus-visible{outline-color: white;}
.site-header .btn:focus-visible{outline-color: white;}
@media (max-width: 1100px){
.site-header .head{height: 98px; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; align-content: center;}
.site-header .brand-lockup{width: calc(100% - 92px); gap: 6px;}
.site-header .brand-lockup .logo{width: 213px; max-width: 100%;}
.site-header .brand-lockup > span{padding-left: 55px; font-size: 7px; letter-spacing: .005em;}
.site-header .menu{display: flex; align-self: flex-start; background: transparent; color: white; border-color: #ffffff70; font-size: 11px; min-height: 40px; padding: 8px 10px;}
.site-header .head > .phone{font-size: 10px; position: absolute; right: 5%; bottom: 9px;}
.site-header .head > .phone small{display: none;}
.site-header .lang-switch{position: absolute; left: 5%; bottom: 9px; margin: 0; font-size: 10px; padding: 5px 7px;}
.site-header .nav{display: none; position: absolute; top: 98px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #252725; padding: 18px 5% 24px; gap: 0; border-bottom: 1px solid #ffffff45; max-height: calc(100dvh - 170px); overflow-y: auto;}
.site-header .nav.open{display: flex;}
.site-header .nav > a:not(.btn), .nav-group > summary{font-size: 13px; min-height: 48px;}
.nav-group > summary{justify-content: space-between;}
.nav-group{border-bottom: 1px solid #ffffff35;}
.nav-panel{position: static; border: 0; border-left: 2px solid var(--orange); box-shadow: none; margin: 0 0 16px; padding: 0 0 0 8px;}
.site-header .nav .btn{align-self: flex-start; margin-top: 12px;}
}
@media (max-width: 360px){
.site-header .brand-lockup .logo{width: 185px;}
.site-header .brand-lockup > span{padding-left: 47px; font-size: 6px;}
}
.site-header .head{height: 114px; gap: 25px;}
.site-header .brand-v6, .brand-v6{display: flex; flex-direction: row; align-items: center; width: 292px; gap: 13px; flex-shrink: 0;}
.brand-v6 .brand-mark{width: 53px; height: 70px; object-fit: contain;}
.brand-v6 > .brand-type{display: flex; flex-direction: column; gap: 6px; padding: 0; width: 226px; white-space: normal;}
.site-header .brand-v6 > .brand-type{padding: 0;}
.brand-type > img{width: 100%; height: auto; object-fit: contain;}
.brand-v6 .brand-slogan{font-size: 10px; line-height: 1.55; font-weight: 500; letter-spacing: 1.45px; text-align: center; color: white; display: block;}
.site-header .brand-slogan{animation: craft-in 1.25s .15s both;}
.site-header .nav{gap: 16px;}
.site-header .nav .btn{padding: 12px 15px;}
.site-header .phone{font-size: 12px;}
.site-header .phone small{font-size: 7px;}
.site-header .nav .btn:after{content: ''; position: absolute; pointer-events: none; top: -80%; bottom: -80%; left: -80%; width: 30%; background: linear-gradient(90deg,transparent,#fff8,transparent); transform: rotate(22deg); transition: left .65s; z-index: -1;}
.site-header .nav .btn:hover:after{left: 150%;}
.site-header .signature .brand-v6{width: min(100%,292px);}
.site-header .signature .brand-v6 img{max-width: none; margin: 0;}
.site-header .signature .brand-v6 .brand-mark{width: 53px; height: 70px;}
.site-header .signature .brand-type{flex: 1; min-width: 0;}
.site-header .signature .brand-type > img{width: 100%; height: auto;}
@media (min-width:1101px) and (max-width:1240px){
.site-header .head{gap: 15px;}
.site-header .brand-v6{width: 255px; gap: 10px;}
.site-header .brand-type{width: 198px;}
.site-header .brand-mark{width: 47px; height: 63px;}
.site-header .nav{gap: 12px; font-size: 11px;}
.site-header .phone small{display: none;}
}
@media (max-width:1100px){
.site-header .head{height: 106px;}
.site-header .brand-v6{width: 270px; flex-direction: row; gap: 12px;}
.site-header .brand-type{width: 206px; padding: 0;}
.site-header .brand-mark{width: 49px; height: 65px;}
.site-header .brand-slogan{font-size: 9px; letter-spacing: 1.2px;}
.site-header .menu{align-self: center; margin-bottom: 12px;}
.site-header .nav{top: 106px;}
.site-header .signature .brand-v6{flex-direction: column; width: 220px;}
.site-header .signature .brand-type{width: 100%;}
}
@media (max-width:760px){
.site-header .head{height: 106px; gap: 8px;}
.site-header .brand-v6{width: 244px; gap: 10px;}
.site-header .brand-mark{width: 43px; height: 60px;}
.site-header .brand-type{width: 185px; gap: 5px; padding: 0;}
.site-header .brand-slogan{font-size: 8.5px; letter-spacing: 1px;}
.site-header .menu{padding: 8px; font-size: 10px;}
.site-header .head > .phone{bottom: 7px;}
.site-header .signature .brand-v6{flex-direction: row; width: 260px; gap: 12px;}
.site-header .signature .brand-type{width: 194px;}
}
@media (max-width:360px){
.site-header .brand-v6{width: 207px; gap: 8px;}
.site-header .brand-mark{width: 38px; height: 55px;}
.site-header .brand-type{width: 161px;}
.site-header .brand-slogan{font-size: 7.5px; letter-spacing: .65px;}
.site-header .menu svg{width: 13px;}
.site-header .menu{gap: 4px; padding: 7px;}
.site-header .signature .brand-v6{width: 235px;}
.site-header .signature .brand-v6 .brand-mark{width: 43px; height: 58px;}
.site-header .signature .brand-slogan{font-size: 8px; letter-spacing: .65px;}
.site-header .signature .brand-type{width: 175px;}
}
.brand-v6, .brand-v6 .brand-mark, .brand-v6 .brand-type, .brand-v6 .brand-type > img{animation: none!important; transform: none!important; transition: none; filter: none;}
.brand-v6 .brand-type{text-shadow: none;}
.brand-v6 .brand-slogan{animation: none; white-space: nowrap; font-size: 9.1px; line-height: 1.6; letter-spacing: .18px;}
.brand-slogan .slogan-letters{display: block; width: 100%; white-space: nowrap; text-shadow: 0 0 8px #fff6, 0 0 16px #ec6a0860;}
.site-header .slogan-letters{animation: slogan-type 2.8s steps(37,end) .3s both, slogan-glow 5s ease-in-out 3.1s infinite;}
@media (min-width:1101px) and (max-width:1240px){
.site-header .brand-slogan{font-size: 8px; letter-spacing: .1px;}
}
@media (max-width:1100px){
.site-header .brand-slogan{font-size: 8.3px; letter-spacing: .1px;}
}
@media (max-width:760px){
.site-header .brand-slogan{font-size: 7.5px; letter-spacing: .03px;}
.site-header .signature .brand-slogan{font-size: 7.8px; letter-spacing: .03px;}
}
@media (max-width:360px){
.site-header .brand-slogan{font-size: 6.6px; letter-spacing: 0;}
.site-header .signature .brand-slogan{font-size: 7px; letter-spacing: 0;}
}
@media (prefers-reduced-motion:reduce){
.site-header .slogan-letters{animation: none!important;}
}
@media(min-width:1101px){
.site-header .head{height:100px}
.site-header .nav{gap:26px}
}
.site-header .nav > a:not(.btn), .nav-group > summary{position:relative;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#f3f3f1;padding:4px 0}
.site-header .nav > a:not(.btn)::before, .nav-group > summary::before{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.site-header .nav > a:not(.btn):hover::before, .nav-group > summary:hover::before, .site-header .nav > a[aria-current=page]::before, .nav-group.is-current > summary::before, .nav-group[open] > summary::before{transform:scaleX(1)}
.nav-group > summary::after{width:0;height:0;border:4px solid transparent;border-top:5px solid currentColor;border-bottom:0;transform:translateY(1px);transition:transform .15s}
.nav-group[open] > summary::after{transform:translateY(-1px) rotate(180deg)}
.site-header .nav .btn{font-size:11px;letter-spacing:.06em;padding:13px 18px}
.site-header .phone{font-size:14px;font-weight:600;letter-spacing:.02em}
.site-header .phone small{font-size:8px;letter-spacing:.14em;font-weight:400;opacity:.85}
@media(max-width:1180px){
.site-header .nav{gap:16px}
.site-header .nav > a:not(.btn), .nav-group > summary{letter-spacing:.08em;font-size:10.5px}
}
@media(max-width:1100px){
.site-header .nav > a:not(.btn), .nav-group > summary{font-size:12px;letter-spacing:.12em;padding:8px 0}
.site-header .nav > a:not(.btn)::before, .nav-group > summary::before{display:none}
.site-header .nav > a[aria-current=page]:not(.btn), .nav-group.is-current > summary{color:var(--orange)}
}
.brand-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.brand-list li{background:white;border:1px solid var(--line);padding:22px 16px 18px;text-align:center;display:grid;gap:4px;min-height:96px;align-content:center}
.brand-list span{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.brand-list small{font-size:10px;letter-spacing:.06em;color:var(--graphite);text-transform:uppercase}
@media(max-width:1000px){
.brand-list{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
.brand-list{grid-template-columns:1fr 1fr;gap:10px}
.brand-list li{padding:16px 10px;min-height:80px}
.brand-list span{font-size:13px}
}
.brand-logos li{padding:14px 18px;min-height:90px}
.brand-logos img{width:100%;height:auto;max-height:62px;object-fit:contain;filter:grayscale(1);opacity:.85;transition:filter .2s,opacity .2s}
.brand-logos li:hover img{filter:none;opacity:1}
@media(max-width:760px){
header.site-header.site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(28,29,28,.94)}
}