@font-face { font-family:ReferenceLekton; src:url('/assets/client-reference/fonts/lekton-regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:ReferenceLekton; src:url('/assets/client-reference/fonts/lekton-bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:ReferenceLekton; src:url('/assets/client-reference/fonts/lekton-italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; } html:has([data-reference-site]) { background:#111; overflow-x:visible; scroll-behavior:auto; scroll-padding:0; } body:has([data-reference-site]) { overflow-x:visible; } :where([data-reference-site]), :where([data-reference-site] *:not(svg, svg *)), :where([data-reference-site])::before, :where([data-reference-site])::after, :where([data-reference-site] *)::before, :where([data-reference-site] *)::after { all: revert; } :where([data-reference-site]) { display:block; min-height:100vh; background:#111; color:#171717; font:400 16px/normal ReferenceLekton,monospace; letter-spacing:normal; } :where([data-reference-site]){font-family:'ReferenceLekton',monospace;color:#171717;background:#111;--yellow:#ffc72c;--orange:#ff5a10;--line:#191919}:where([data-reference-site]) *{box-sizing:border-box}:where([data-reference-site]){margin:0}:where([data-reference-site]) button,:where([data-reference-site]) a{font:inherit}:where([data-reference-site]) button{cursor:pointer}:where([data-reference-site]) a{color:inherit;text-decoration:none}:where([data-reference-site]) .site{max-width:1180px;margin:auto;background:#fff;min-height:100vh;box-shadow:0 0 0 1px #111}:where([data-reference-site]) .top{height:86px;background:var(--yellow);border-bottom:2px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;gap:24px}:where([data-reference-site]) .brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:900;white-space:nowrap}:where([data-reference-site]) .brandmark{width:56px;height:50px;background:#ffe188;display:grid;place-items:center;border:1px solid #e7bc1d}:where([data-reference-site]) .brandmark svg{width:51px}:where([data-reference-site]) .nav{display:flex;align-items:center;gap:42px}:where([data-reference-site]) .nav a{display:grid;justify-items:center;gap:3px;min-width:55px;font-size:12px;font-weight:900}:where([data-reference-site]) .nav svg{width:33px;height:33px;fill:none;stroke:#141414;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}:where([data-reference-site]) .nav a.active{color:#a53b00}:where([data-reference-site]) .nav a.active svg{stroke:#a53b00}:where([data-reference-site]) .section{padding:32px 34px 58px}:where([data-reference-site]) .eyebrow{font:700 13px/1.4 'ReferenceLekton',monospace;letter-spacing:.03em;text-transform:uppercase}:where([data-reference-site]) .section h1,:where([data-reference-site]) .section h2{margin:10px 0 24px;text-transform:uppercase;line-height:1.04;font-weight:900;letter-spacing:-.025em}:where([data-reference-site]) .section h1{font-size:clamp(38px,5vw,62px)}:where([data-reference-site]) .section h2{font-size:clamp(27px,3vw,38px)}:where([data-reference-site]) .rule{border-top:2px solid var(--line)}:where([data-reference-site]) .page{display:none}:where([data-reference-site]) .page.active{display:block}:where([data-reference-site]) .intro{font-size:18px;line-height:1.5;max-width:680px;margin:0 0 34px}:where([data-reference-site]) .ticker{overflow:hidden;border-block:2px solid #171717;background:var(--yellow);white-space:nowrap;font-size:30px;font-weight:900;letter-spacing:.24em;padding:10px 0}:where([data-reference-site]) .ticker span{display:inline-block;animation:marquee 25s linear infinite}@keyframes marquee{to{transform:translateX(-50%)}}:where([data-reference-site]) .contact-shell{background:var(--orange);border:2px solid #111;border-radius:17px;padding:17px 20px}:where([data-reference-site]) .card{background:white;padding:18px 24px;max-width:88%;box-shadow:5px 5px #e7e7e7}:where([data-reference-site]) .card strong{font-size:32px;color:#3173a7;letter-spacing:.04em}:where([data-reference-site]) .card .red{height:6px;background:#ed2246;margin:7px 0 15px}:where([data-reference-site]) .contact-row{display:flex;gap:10px;margin-top:14px}:where([data-reference-site]) .contact-row span{background:var(--yellow);padding:8px;flex:1;font-size:12px;font-weight:bold;overflow-wrap:anywhere}:where([data-reference-site]) .contact-row b{display:block}:where([data-reference-site]) .home-panel{display:grid;grid-template-columns:38% 62%;min-height:340px;background:#151515;color:#fff}:where([data-reference-site]) .home-copy{padding:32px;display:flex;flex-direction:column}:where([data-reference-site]) .home-copy strong{font-size:clamp(38px,5vw,65px);line-height:1.04}:where([data-reference-site]) .home-copy small{margin-top:auto;color:#ffc72c;font:13px 'ReferenceLekton',monospace}:where([data-reference-site]) .home-panel img{width:100%;height:340px;object-fit:cover}:where([data-reference-site]) .home-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font:700 13px 'ReferenceLekton',monospace}:where([data-reference-site]) .inline-link{text-transform:uppercase;border-bottom:2px solid currentColor;padding-bottom:4px}:where([data-reference-site]) .product-stack{position:relative;height:280px;overflow:hidden;margin-top:15px}:where([data-reference-site]) .product-stack .tile{position:absolute;width:30%;height:190px;border-radius:12px;background:#ffe39a;top:35px}:where([data-reference-site]) .product-stack .tile:nth-child(1){left:0;background:#ffc72c;z-index:4}:where([data-reference-site]) .product-stack .tile:nth-child(2){left:23%;top:25px;background:#ffdc69;z-index:3}:where([data-reference-site]) .product-stack .tile:nth-child(3){left:47%;top:15px;background:#ffe39a;z-index:2}:where([data-reference-site]) .product-stack .tile:nth-child(4){left:70%;top:4px;background:#fff0be;z-index:1}:where([data-reference-site]) .product-stack img{height:100%;max-width:100%;object-fit:contain}:where([data-reference-site]) .shop-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 25px}:where([data-reference-site]) .shop-tabs button,:where([data-reference-site]) .archive-tabs button{border:1.5px solid #171717;background:white;padding:10px 16px;font-weight:900;text-transform:uppercase;font-size:13px}:where([data-reference-site]) .shop-tabs button.active,:where([data-reference-site]) .archive-tabs button.active{background:#171717;color:#fff}:where([data-reference-site]) .shop-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start}:where([data-reference-site]) .featured-product{background:#ffc72c;min-height:480px;position:relative;padding:24px;display:flex;align-items:center;justify-content:center}:where([data-reference-site]) .featured-product img{width:min(75%,360px);max-height:370px;object-fit:contain;mix-blend-mode:multiply}:where([data-reference-site]) .featured-product .index{position:absolute;top:22px;left:23px;font:700 13px 'ReferenceLekton',monospace}:where([data-reference-site]) .featured-product .corner{position:absolute;right:20px;bottom:17px;font-weight:900;font-size:38px}:where([data-reference-site]) .product-info{border-top:2px solid #171717;padding-top:16px}:where([data-reference-site]) .product-info h2{margin:0 0 16px;font-size:42px}:where([data-reference-site]) .product-info p{font-size:17px;line-height:1.5}:where([data-reference-site]) .product-info .status{background:#ffc72c;padding:9px 12px;display:inline-block;font:700 13px 'ReferenceLekton',monospace}:where([data-reference-site]) .product-list{margin-top:28px;border-top:2px solid #171717}:where([data-reference-site]) .product-line{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #171717;padding:17px 0;font-weight:900}:where([data-reference-site]) .product-line small{font:700 12px 'ReferenceLekton',monospace}:where([data-reference-site]) .archive-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:25px}:where([data-reference-site]) .archive-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}:where([data-reference-site]) .archive-card{position:relative;min-height:360px;background:#171717;color:#fff;display:flex;flex-direction:column;overflow:hidden}:where([data-reference-site]) .archive-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}:where([data-reference-site]) .archive-card.dark img{object-fit:contain;background:#ffbd45;opacity:1}:where([data-reference-site]) .archive-card:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#101010df)}:where([data-reference-site]) .archive-card .caption{position:relative;z-index:1;margin-top:auto;padding:22px}:where([data-reference-site]) .archive-card .caption small{font:700 13px 'ReferenceLekton',monospace;color:#ffc72c}:where([data-reference-site]) .archive-card .caption h2{font-size:37px;margin:8px 0}:where([data-reference-site]) .archive-card .caption p{margin:0;font-size:14px}:where([data-reference-site]) .archive-note{grid-column:1/-1;border:2px solid #171717;padding:20px;display:flex;justify-content:space-between;gap:20px;align-items:center}:where([data-reference-site]) .archive-note strong{font-size:22px}:where([data-reference-site]) .philosophy-lead{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:end;padding-bottom:32px}:where([data-reference-site]) .philosophy-lead p{font-size:20px;line-height:1.45;margin:0}:where([data-reference-site]) .pillars{display:grid;grid-template-columns:repeat(5,1fr);border-top:2px solid #171717;border-left:2px solid #171717}:where([data-reference-site]) .pillar{border-right:2px solid #171717;border-bottom:2px solid #171717;padding:21px 14px 26px;min-height:340px}:where([data-reference-site]) .symbol{width:94px;height:94px;border:3px solid #111;border-radius:50%;background:#ffc72c;display:grid;place-items:center;margin:0 auto 22px;box-shadow:7px 7px #ff5a10}:where([data-reference-site]) .symbol svg{width:62px;height:62px;fill:none;stroke:#111;stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}:where([data-reference-site]) .pillar .num{font:700 12px 'ReferenceLekton',monospace}:where([data-reference-site]) .pillar h2{font-size:18px;margin:11px 0}:where([data-reference-site]) .pillar p{font-size:15px;line-height:1.45;margin:0}:where([data-reference-site]) .trinity{display:grid;grid-template-columns:1fr 1fr;gap:36px;border-top:2px solid #171717;margin-top:48px;padding-top:26px}:where([data-reference-site]) .trinity h2{font-size:30px;margin:7px 0}:where([data-reference-site]) .trinity p{font-size:17px;line-height:1.5}:where([data-reference-site]) .trinity-points{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:7px}:where([data-reference-site]) .trinity-points span{background:#ffc72c;border:2px solid #171717;min-height:120px;display:grid;place-items:center;text-align:center;font-weight:900;text-transform:uppercase;padding:10px}:where([data-reference-site]) .footer{background:#ffc72c;border-top:2px solid #171717;padding:28px 34px;display:flex;justify-content:space-between;gap:25px;font:700 13px 'ReferenceLekton',monospace}:where([data-reference-site]) .footer a{text-decoration:underline}:where([data-reference-site]) .muted{color:#555}:where([data-reference-site]) .hidden{display:none!important}@media(max-width:780px){:where([data-reference-site]) .top{height:auto;padding:12px 18px;display:block}:where([data-reference-site]) .brand{font-size:17px}:where([data-reference-site]) .brandmark{width:40px;height:38px}:where([data-reference-site]) .nav{justify-content:space-between;gap:5px;margin-top:13px}:where([data-reference-site]) .nav svg{width:27px;height:27px}:where([data-reference-site]) .nav a{font-size:10px}:where([data-reference-site]) .section{padding:25px 18px 42px}:where([data-reference-site]) .card{max-width:100%;padding:15px}:where([data-reference-site]) .card strong{font-size:23px}:where([data-reference-site]) .contact-row{flex-direction:column}:where([data-reference-site]) .home-panel{grid-template-columns:1fr}:where([data-reference-site]) .home-copy{min-height:190px}:where([data-reference-site]) .home-panel img{height:240px}:where([data-reference-site]) .shop-layout,:where([data-reference-site]) .philosophy-lead,:where([data-reference-site]) .trinity{grid-template-columns:1fr}:where([data-reference-site]) .featured-product{min-height:360px}:where([data-reference-site]) .archive-grid{grid-template-columns:1fr}:where([data-reference-site]) .archive-card{min-height:310px}:where([data-reference-site]) .pillars{grid-template-columns:repeat(2,1fr)}:where([data-reference-site]) .pillar{min-height:300px}:where([data-reference-site]) .footer{display:block}:where([data-reference-site]) .footer p{margin:8px 0}}@media(max-width:430px){:where([data-reference-site]) .pillars{grid-template-columns:1fr}:where([data-reference-site]) .pillar{min-height:0;display:grid;grid-template-columns:100px 1fr;column-gap:16px}:where([data-reference-site]) .pillar .symbol{grid-row:1/4;margin:0;width:75px;height:75px}:where([data-reference-site]) .symbol svg{width:50px;height:50px}:where([data-reference-site]) .pillar h2{margin:4px 0}:where([data-reference-site]) .product-stack{height:180px}:where([data-reference-site]) .product-stack .tile{height:130px}:where([data-reference-site]) .trinity-points{grid-template-columns:1fr}:where([data-reference-site]) .trinity-points span{min-height:65px}} /* Shop and philosophy additions; the Home section is unchanged. */ :where([data-reference-site]) .shop-page{background:#fff}:where([data-reference-site]) .shop-head{display:flex;justify-content:space-between;align-items:end;gap:20px;border-top:2px solid #171717;padding:18px 0 24px}:where([data-reference-site]) .shop-head p{font-size:19px;line-height:1.35;margin:0}:where([data-reference-site]) .shop-head span{font:700 13px 'ReferenceLekton',monospace}:where([data-reference-site]) .shop-page .featured-product{background:#fff0b8;overflow:hidden;min-height:500px}:where([data-reference-site]) .shop-folder{position:absolute;width:56%;height:60%;border-radius:10px;background:#ffe092;box-shadow:8px 8px #1112}:where([data-reference-site]) .shop-folder:before{content:"";position:absolute;top:-15px;left:0;width:34%;height:20px;border-radius:9px 9px 0 0;background:inherit}:where([data-reference-site]) .folder-back{left:44%;top:16%;transform:rotate(3deg);background:#ffe9a4}:where([data-reference-site]) .folder-mid{left:26%;top:25%;transform:rotate(1deg);background:#ffdc66}:where([data-reference-site]) .folder-front{left:8%;top:35%;background:#ffc72c;display:grid;place-items:center;overflow:visible}:where([data-reference-site]) .folder-front img{width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply}:where([data-reference-site]) .shop-placeholder{border:2px solid #111;background:#ffe69c;min-height:330px;padding:30px;display:flex;flex-direction:column;justify-content:center}:where([data-reference-site]) .shop-placeholder h2{font-size:42px;margin:12px 0}:where([data-reference-site]) .shop-placeholder p{font-size:17px}:where([data-reference-site]) .shop-service{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:50px;border-top:2px solid #111;padding-top:25px}:where([data-reference-site]) .shop-service>div{border:2px solid #171717;padding:23px;background:#fff}:where([data-reference-site]) .shop-service h2{font-size:28px;margin:9px 0 15px}:where([data-reference-site]) .shop-service p{font-size:16px;line-height:1.5;margin:0}:where([data-reference-site]) .philosophy-page{background:#fff}:where([data-reference-site]) .philosophy-header{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;min-height:330px;border:2px solid #171717;margin:20px 0 44px;background:#ffc72c}:where([data-reference-site]) .philosophy-header-copy{padding:28px 30px;display:flex;flex-direction:column;justify-content:space-between}:where([data-reference-site]) .philosophy-header h1{font-size:clamp(35px,4.2vw,56px);max-width:730px;margin:0;line-height:1.02}:where([data-reference-site]) .philosophy-header-copy p{font:700 14px/1.7 'ReferenceLekton',monospace;margin:25px 0 0}:where([data-reference-site]) .header-emblems{background:#fff;display:grid;grid-template-columns:repeat(3,1fr);align-content:center;justify-items:center;gap:10px;padding:20px}:where([data-reference-site]) .header-emblems .pillar-emblem{width:90px;height:90px;border:0}:where([data-reference-site]) .philosophy-text{display:grid;grid-template-columns:.8fr 1.2fr;gap:35px;margin-bottom:45px}:where([data-reference-site]) .philosophy-text h2{font-size:clamp(30px,3.6vw,48px)}:where([data-reference-site]) .philosophy-text p{font-size:18px;line-height:1.55;margin:0 0 18px}:where([data-reference-site]) .official-pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:2px solid #171717;margin:16px 0 45px}:where([data-reference-site]) .pillar-link{padding:22px 14px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;border-right:2px solid #171717;transition:background .2s}:where([data-reference-site]) .pillar-link:last-child{border-right:0}:where([data-reference-site]) .pillar-link:hover,:where([data-reference-site]) .pillar-link:focus-visible{background:#ffc72c;outline-offset:-4px}:where([data-reference-site]) .pillar-emblem{display:block;flex:none;width:150px;height:150px;background-image:url('/assets/client-reference/official-pillars.png');background-repeat:no-repeat;background-size:300% 500%;background-position-x:0;mix-blend-mode:multiply}:where([data-reference-site]) .pillar-link .pillar-emblem{width:min(100%,150px);aspect-ratio:1;height:auto;margin:0 auto 16px}:where([data-reference-site]) .emblem-design{background-position-y:0}:where([data-reference-site]) .emblem-handmade{background-position-y:25%}:where([data-reference-site]) .emblem-funktionalitaet{background-position-y:50%}:where([data-reference-site]) .emblem-qualitaet{background-position-y:75%}:where([data-reference-site]) .emblem-nachhaltigkeit{background-position-y:100%}:where([data-reference-site]) .pillar-num{font:700 12px 'ReferenceLekton',monospace}:where([data-reference-site]) .pillar-link strong{font-size:clamp(14px,1.5vw,20px);margin:10px 0 6px;overflow-wrap:anywhere}:where([data-reference-site]) .pillar-link small{font-size:13px;line-height:1.35;min-height:36px}:where([data-reference-site]) .pillar-arrow{font:700 12px 'ReferenceLekton',monospace;margin-top:24px;border-bottom:1px solid #171717}:where([data-reference-site]) .pillar-detail{display:none;background:#fff;padding:32px 34px 65px;min-height:70vh}:where([data-reference-site]) .pillar-detail.active{display:block}:where([data-reference-site]) .back-link{display:inline-block;font:700 13px 'ReferenceLekton',monospace;border-bottom:1px solid #171717;padding-bottom:4px;margin-bottom:25px}:where([data-reference-site]) .detail-hero{background:#ffc72c;border:2px solid #171717;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:38px;min-height:260px}:where([data-reference-site]) .detail-hero h1{font-size:clamp(42px,7vw,86px);margin:10px 0;overflow-wrap:anywhere}:where([data-reference-site]) .detail-tag{text-transform:uppercase;font:700 15px 'ReferenceLekton',monospace}:where([data-reference-site]) .detail-hero .pillar-emblem{width:200px;height:200px}:where([data-reference-site]) .detail-copy{max-width:760px;margin:50px auto;font-size:22px;line-height:1.5}:where([data-reference-site]) .detail-copy p{margin:0 0 22px}:where([data-reference-site]) .detail-foot{border-top:2px solid #171717;padding-top:18px;display:flex;justify-content:space-between;gap:15px;font:700 13px 'ReferenceLekton',monospace}:where([data-reference-site]) .detail-foot a{text-decoration:underline}@media(max-width:780px){:where([data-reference-site]) .shop-service,:where([data-reference-site]) .philosophy-header,:where([data-reference-site]) .philosophy-text{grid-template-columns:1fr}:where([data-reference-site]) .philosophy-header{gap:0}:where([data-reference-site]) .header-emblems{grid-template-columns:repeat(5,1fr)}:where([data-reference-site]) .header-emblems .pillar-emblem{width:60px;height:60px}:where([data-reference-site]) .official-pillars{grid-template-columns:repeat(2,1fr)}:where([data-reference-site]) .pillar-link{border-bottom:2px solid #171717}:where([data-reference-site]) .pillar-link:nth-child(2n){border-right:0}:where([data-reference-site]) .pillar-link:last-child{border-bottom:0;border-right:2px solid #171717}:where([data-reference-site]) .detail-hero{padding:20px}:where([data-reference-site]) .detail-hero .pillar-emblem{width:100px;height:100px}:where([data-reference-site]) .pillar-detail{padding:25px 18px}:where([data-reference-site]) .detail-copy{font-size:18px}}@media(max-width:430px){:where([data-reference-site]) .official-pillars{grid-template-columns:1fr}:where([data-reference-site]) .pillar-link{border-right:0!important}:where([data-reference-site]) .pillar-link .pillar-emblem{width:125px}:where([data-reference-site]) .header-emblems .pillar-emblem{width:48px;height:48px}:where([data-reference-site]) .detail-hero{display:block}:where([data-reference-site]) .detail-hero .pillar-emblem{margin-left:auto}:where([data-reference-site]) .detail-foot{display:block}:where([data-reference-site]) .detail-foot a{display:block;margin-top:15px}} @font-face{font-family:"Phorfeit Slant BRK";src:url("/assets/client-reference/phorfeit-slant-brk.ttf") format("truetype");font-display:swap} :where([data-reference-site]) .top .brand-words{display:inline-flex;gap:.36em;align-items:baseline;font-family:"Phorfeit Slant BRK",Arial,Helvetica,sans-serif;font-weight:400;font-size:clamp(24px,3.2vw,38px);line-height:1;letter-spacing:0;white-space:nowrap} :where([data-reference-site]) .top .brand-perception{color:#fff;-webkit-text-stroke:1.5px #111;paint-order:stroke fill}:where([data-reference-site]) .top .brand-lab{color:transparent;-webkit-text-stroke:1.5px #111}:where([data-reference-site]) .top .brand-dot{color:transparent;display:inline-block;margin-left:.16em;transform:scale(1.35,1.45);transform-origin:35% 80%} @media(max-width:760px){:where([data-reference-site]) .top .brand-words{font-size:clamp(20px,6vw,25px);gap:.28em}:where([data-reference-site]) .top .brand-lab,:where([data-reference-site]) .top .brand-perception{-webkit-text-stroke-width:1.2px}} @font-face{font-family:BandPixel;src:url('/assets/client-reference/band-led.ttf') format('truetype');font-display:swap} :where([data-reference-site]) .ticker{--ticker-width:100vw;--ticker-gap:96px;position:relative;font-family:BandPixel,monospace;font-size:clamp(22px,3vw,30px);font-weight:400;letter-spacing:0;padding:12px 0;line-height:1.2} :where([data-reference-site]) .ticker .ticker-pass{position:relative;left:100%;display:inline-flex;align-items:center;gap:64px;width:max-content;animation:band-pass var(--ticker-duration,24s) linear infinite;will-change:transform} :where([data-reference-site]) .ticker .ticker-separator{display:block;width:68px;height:24px;animation:none;background:url('/assets/client-reference/insulation-pattern-yellow.svg') left center/12px 28px repeat-x;flex:none} @keyframes band-pass{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--ticker-width) - var(--ticker-gap)))}} @media(prefers-reduced-motion:reduce){:where([data-reference-site]) .ticker{white-space:normal;text-align:center}:where([data-reference-site]) .ticker .ticker-pass{left:0;width:auto;animation:none}:where([data-reference-site]) .ticker .ticker-separator{display:none}} :where([data-reference-site]) #home .ticker{background-color:var(--yellow);background-image:radial-gradient(circle,rgba(17,17,17,.13) .65px,transparent .85px);background-size:4px 4px;color:#111;font-family:BandPixel,monospace;min-height:48px;padding:10px 0;line-height:28px} :where([data-reference-site]) #home .ticker .ticker-pass{left:100%;display:inline-flex;align-items:center;gap:48px;min-width:0;width:max-content;font-family:BandPixel,monospace;font-size:clamp(22px,3vw,30px);font-weight:400;font-style:normal;letter-spacing:0;line-height:28px;animation:band-pass var(--ticker-duration,24s) linear infinite} :where([data-reference-site]) #home .ticker .ticker-separator{position:static;display:block;min-width:0;width:40px;height:20px;animation:none;line-height:1;background:repeating-conic-gradient(#111 0% 25%,transparent 0% 50%) 0 0/8px 8px;flex:none;opacity:.65} @media(prefers-reduced-motion:reduce){:where([data-reference-site]) #home .ticker{white-space:normal}:where([data-reference-site]) #home .ticker .ticker-pass{left:0;width:auto;animation:none}:where([data-reference-site]) #home .ticker .ticker-separator{display:none}} /* One cyclic phrase: the exiting fragment continues at the opposite edge. */ :where([data-reference-site]) #home .ticker{background-image:none;--ticker-slot:100vw} :where([data-reference-site]) #home .ticker .ticker-track{display:flex;width:max-content;animation:snake-band var(--ticker-duration,20s) linear infinite;will-change:transform} :where([data-reference-site]) #home .ticker .ticker-track .ticker-pass{position:static;left:auto;display:block;min-width:0;width:var(--ticker-slot);flex:0 0 var(--ticker-slot);animation:none;white-space:nowrap} @keyframes snake-band{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--ticker-slot)))}} @media(prefers-reduced-motion:reduce){:where([data-reference-site]) #home .ticker .ticker-track{animation:none;display:block;width:100%}:where([data-reference-site]) #home .ticker .ticker-track .ticker-pass{width:auto;white-space:normal}:where([data-reference-site]) #home .ticker .ticker-pass+ .ticker-pass{display:none}} :where([data-reference-site]){--yellow:#ffc72c!important;font-family:'ReferenceLekton',monospace!important} :where([data-reference-site]),:where([data-reference-site]) .site,:where([data-reference-site]) button,:where([data-reference-site]) a,:where([data-reference-site]) input,:where([data-reference-site]) textarea,:where([data-reference-site]) select{font-family:'ReferenceLekton',monospace} :where([data-reference-site]) .site{background:#fff} :where([data-reference-site]) .top{background:#ffc72c;height:auto;min-height:102px} :where([data-reference-site]) .top .brand-words{font-family:'Phorfeit Slant BRK',sans-serif!important} :where([data-reference-site]) .nav{gap:16px} :where([data-reference-site]) .nav a{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;min-width:0;font-size:15px;font-weight:700;padding:8px 1px} :where([data-reference-site]) .nav-label{display:inline-block}:where([data-reference-site]) .nav-icon{display:block;width:56px;height:56px;object-fit:cover;mix-blend-mode:multiply;border-radius:3px;transition:transform .18s} :where([data-reference-site]) .nav a:hover .nav-icon,:where([data-reference-site]) .nav a.active .nav-icon{transform:translateY(-3px) rotate(-3deg)} :where([data-reference-site]) .eyebrow,:where([data-reference-site]) .pillar-num,:where([data-reference-site]) .product-frame figcaption{font-family:'ReferenceLekton',monospace} :where([data-reference-site]) .section h1,:where([data-reference-site]) .section h2,:where([data-reference-site]) .product-info h2,:where([data-reference-site]) .philosophy-lines h2{font-family:'ReferenceLekton',monospace;font-weight:700} :where([data-reference-site]) .intro,:where([data-reference-site]) .philosophy-text p,:where([data-reference-site]) .product-info p,:where([data-reference-site]) .philosophy-extra p{font-family:'ReferenceLekton',monospace;font-size:clamp(17px,1.55vw,21px);line-height:1.45} :where([data-reference-site]) .status,:where([data-reference-site]) .view-label{font-style:italic} :where([data-reference-site]) #home .section:first-child{background:#ffc72c!important} :where([data-reference-site]) #home .product-stack{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;transform:none!important;padding:0;margin:18px 0 24px} :where([data-reference-site]) #home .product-stack .tile{position:relative!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;width:100%!important;height:245px!important;background:#f9f5e6;border:2px solid #111;overflow:hidden;box-shadow:none} :where([data-reference-site]) #home .product-stack .tile img{width:100%;height:100%;object-fit:contain} :where([data-reference-site]) #home .product-stack .tile:nth-child(2) img{object-fit:cover} :where([data-reference-site]) .view-label{position:absolute;bottom:0;left:0;right:0;background:#ffc72c;padding:5px 8px;border-top:2px solid #111;font-size:13px;font-weight:700;text-transform:uppercase} :where([data-reference-site]) #shop .shop-layout{grid-template-columns:1.35fr .85fr;align-items:start} :where([data-reference-site]) #shop .featured-product{min-height:0;height:auto;display:block;padding:12px;background:#f7f1e3} :where([data-reference-site]) .feature-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} :where([data-reference-site]) .product-frame{margin:0;background:white;border:1px solid #111;min-width:0} :where([data-reference-site]) .product-frame.lead{grid-column:span 2;grid-row:span 2} :where([data-reference-site]) .product-frame img{width:100%;height:170px;object-fit:contain;display:block} :where([data-reference-site]) .product-frame.lead img{height:390px;background:#ffc72c} :where([data-reference-site]) .product-frame:nth-child(2) img{object-fit:cover} :where([data-reference-site]) .product-frame figcaption{background:#ffc72c;border-top:1px solid #111;padding:6px 8px;font-size:12px;font-weight:700;text-transform:uppercase} :where([data-reference-site]) #shop .product-info h2{font-size:clamp(30px,3.2vw,48px);line-height:1} :where([data-reference-site]) #shop .shop-service{display:block;background:#ffc72c;padding:18px 24px;border:2px solid #111;margin-top:24px;font-style:italic} :where([data-reference-site]) #shop .shop-service p{margin:0} :where([data-reference-site]) #philosophie .philosophy-page{padding-bottom:25px} :where([data-reference-site]) #philosophie .philosophy-header{position:relative;background:#ffc72c;overflow:hidden;min-height:460px;display:grid;grid-template-columns:1fr .8fr;gap:12px} :where([data-reference-site]) #philosophie .philosophy-header-copy{position:relative;z-index:1;padding:28px} :where([data-reference-site]) #philosophie .philosophy-header-copy h1{font-size:clamp(66px,9vw,130px);line-height:.86;max-width:7ch;overflow-wrap:anywhere} :where([data-reference-site]) #philosophie .philosophy-header-copy p{font-style:italic;font-weight:700;max-width:40ch} :where([data-reference-site]) #philosophie .philosophy-header .header-emblems{display:none} :where([data-reference-site]) .philosophy-hero-media img{width:100%;height:100%;max-height:550px;object-fit:cover;object-position:50% 25%;display:block;filter:grayscale(.5)} :where([data-reference-site]) #philosophie .philosophy-text{padding:48px 0;margin:0;gap:55px} :where([data-reference-site]) .symbols-reference{margin:20px 0 25px;background:#f2f2f2;border:2px solid #111;text-align:center} :where([data-reference-site]) .symbols-reference img{display:block;width:100%;max-height:550px;object-fit:contain} :where([data-reference-site]) .symbols-reference figcaption{background:#ffc72c;border-top:2px solid #111;padding:10px;font-size:13px;font-weight:700} :where([data-reference-site]) #philosophie .official-pillars{grid-template-columns:repeat(5,1fr);margin-top:0} :where([data-reference-site]) #philosophie .pillar-link{background:white} :where([data-reference-site]) #philosophie .pillar-link:hover{background:#ffc72c} :where([data-reference-site]) .philosophy-extra{background:#fff} :where([data-reference-site]) .philosophy-extra h2{font-size:clamp(34px,4.5vw,64px);line-height:.95;margin:12px 0 24px} :where([data-reference-site]) .philosophy-place{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid #111;border-bottom:2px solid #111} :where([data-reference-site]) .philosophy-place>div:first-child{padding:42px 34px} :where([data-reference-site]) .place-art{background:#111;color:#ffc72c;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;padding:30px;font-size:clamp(26px,4vw,58px);font-weight:700;text-align:center} :where([data-reference-site]) .place-art b{color:white} :where([data-reference-site]) .philosophy-lines{padding:60px 34px;background:#ffc72c} :where([data-reference-site]) .philosophy-lines>div{border-top:2px solid #111;display:flex;justify-content:space-between;gap:14px;padding:12px 0;font-size:clamp(24px,3.5vw,44px);font-weight:700} :where([data-reference-site]) .philosophy-lines>div:last-child{border-bottom:2px solid #111} :where([data-reference-site]) .philosophy-lines small{font-size:15px;font-weight:400;font-style:italic;align-self:center;text-align:right} :where([data-reference-site]) .philosophy-outro{padding:65px 34px;background:#ef5a00;color:#111} :where([data-reference-site]) .philosophy-outro p{max-width:650px} :where([data-reference-site]) .philosophy-outro a{display:inline-block;background:#ffc72c;border:2px solid #111;padding:13px 18px;margin-top:20px;font-weight:700} :where([data-reference-site]) .footer-shell{background:#ffc72c;border-top:2px solid #111} :where([data-reference-site]) .footer-shell>img{display:block;width:100%;height:auto} :where([data-reference-site]) .footer-shell nav{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;padding:12px 20px;border-top:1px solid #111} :where([data-reference-site]) .footer-shell nav a{font-weight:700;text-decoration:underline} :where([data-reference-site]) .footer-legal{text-align:center;border-top:1px solid #111;padding:12px 20px;font-size:13px;font-weight:700} :where([data-reference-site]) .philosophy-footer{display:none} :where([data-reference-site]).philosophy-route .standard-footer{display:none} :where([data-reference-site]).philosophy-route .philosophy-footer{display:block} :where([data-reference-site]) .surf-pointer{display:none} @media(min-width:800px) and (pointer:fine){:where([data-reference-site]).cursor-art,:where([data-reference-site]).cursor-art *{cursor:none!important}:where([data-reference-site]) .surf-pointer{position:fixed;z-index:99999;width:104px;height:69.2px;pointer-events:none;transform:translate(-12px,-14px);background:url('surf-cursor-cutout.png') center/contain no-repeat}:where([data-reference-site]).cursor-art .surf-pointer.visible{display:block}} @media(max-width:950px){:where([data-reference-site]) .top{padding:12px 18px;flex-wrap:wrap}:where([data-reference-site]) .nav{gap:8px}:where([data-reference-site]) .nav a{font-size:13px}:where([data-reference-site]) .nav-icon{width:42px;height:42px}:where([data-reference-site]) #shop .shop-layout{grid-template-columns:1fr}:where([data-reference-site]) .product-frame.lead img{height:350px}} @media(max-width:780px){:where([data-reference-site]) .top{display:block}:where([data-reference-site]) .nav{justify-content:space-between}:where([data-reference-site]) .nav a{font-size:11px;gap:2px;flex-direction:column-reverse}:where([data-reference-site]) .nav-icon{width:46px;height:46px}:where([data-reference-site]) #home .product-stack{grid-template-columns:repeat(2,1fr)}:where([data-reference-site]) #home .product-stack .tile{height:220px!important}:where([data-reference-site]) #philosophie .philosophy-header{display:block;min-height:0}:where([data-reference-site]) #philosophie .philosophy-header-copy h1{font-size:clamp(58px,14vw,95px)}:where([data-reference-site]) .philosophy-hero-media img{height:380px}:where([data-reference-site]) .philosophy-place{grid-template-columns:1fr}:where([data-reference-site]) #philosophie .official-pillars{grid-template-columns:repeat(2,1fr)}:where([data-reference-site]) .philosophy-lines{padding:40px 18px}:where([data-reference-site]) .philosophy-outro{padding:45px 18px}} @media(max-width:500px){:where([data-reference-site]) .nav-icon{width:39px;height:39px}:where([data-reference-site]) .nav a{font-size:9px}:where([data-reference-site]) #home .product-stack .tile{height:175px!important}:where([data-reference-site]) .feature-gallery{grid-template-columns:repeat(2,1fr)}:where([data-reference-site]) .product-frame.lead{grid-row:span 1}:where([data-reference-site]) .product-frame.lead img{height:210px}:where([data-reference-site]) .product-frame img{height:155px}:where([data-reference-site]) .philosophy-lines>div{display:block}:where([data-reference-site]) .philosophy-lines small{display:block;text-align:left}} /* Perception Lab: accepted diagonal imagery and original product inventory. */ :where([data-reference-site]) #home .motion-wall{position:relative;min-height:600px;background:#fff;overflow:hidden;border-bottom:2px solid #171717;padding:48px 34px 70px} :where([data-reference-site]) .motion-wall-intro{position:relative;z-index:3;max-width:610px} :where([data-reference-site]) .motion-wall-intro h1{font-size:clamp(44px,6.8vw,84px);font-weight:700;line-height:.91;letter-spacing:-.045em;margin:18px 0 14px} :where([data-reference-site]) .motion-wall-intro p{font-style:italic;font-size:18px;margin:0} :where([data-reference-site]) .motion-wall-images{position:absolute;inset:0;pointer-events:none} :where([data-reference-site]) .motion-wall-images a{position:absolute;display:block;pointer-events:auto;width:38%;height:300px;background:#ffc72c;border:2px solid #111;box-shadow:13px 15px 0 #171717;transform:rotate(-7deg);overflow:hidden;animation:wall-drift 9s ease-in-out infinite alternate} :where([data-reference-site]) .motion-wall-images a:first-child{left:15%;bottom:-56px;z-index:1;transform:rotate(-8deg)} :where([data-reference-site]) .motion-wall-images a:last-child{right:6%;top:122px;z-index:2;transform:rotate(5deg);animation-delay:-4s} :where([data-reference-site]) .motion-wall-images img{width:100%;height:100%;object-fit:cover;display:block} :where([data-reference-site]) #home .info-section{position:relative;z-index:4;max-width:730px;margin:-48px 0 0 34px;padding:0 0 28px!important;background:transparent!important} :where([data-reference-site]) #home .info-section>.eyebrow,:where([data-reference-site]) #home .info-section>h2{display:none} :where([data-reference-site]) #home .contact-shell{border-radius:20px;box-shadow:10px 11px 0 #111} :where([data-reference-site]) #home .ticker{white-space:nowrap;overflow:hidden;background:#111;color:#ffc72c;border-block:2px solid #111;min-height:39px} :where([data-reference-site]) #home .ticker span{display:inline-block;min-width:200%;animation:ticker-flow 19s linear infinite;font-style:italic} @keyframes ticker-flow{from{transform:translateX(0)}to{transform:translateX(-50%)}} :where([data-reference-site]) .campaign-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} :where([data-reference-site]) .campaign-card{display:block;position:relative;height:365px;overflow:hidden;border:2px solid #111;background:#111;color:#fff} :where([data-reference-site]) .campaign-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s} :where([data-reference-site]) .campaign-card:hover img{transform:scale(1.035)} :where([data-reference-site]) .campaign-card:nth-child(2) img{object-position:50% 25%} :where([data-reference-site]) .campaign-card:after{content:"";position:absolute;inset:43% 0 0;background:linear-gradient(transparent,#111e)} :where([data-reference-site]) .campaign-card div{position:absolute;bottom:0;left:0;right:0;z-index:1;padding:20px;display:flex;flex-direction:column;gap:3px} :where([data-reference-site]) .campaign-card small{font-size:12px;font-weight:700;color:#ffc72c} :where([data-reference-site]) .campaign-card strong{font-size:clamp(29px,4vw,50px);line-height:1;font-weight:700} :where([data-reference-site]) .campaign-card span{font-size:12px;font-style:italic} :where([data-reference-site]) #home .section:last-child{background:#fff;padding-top:48px!important} :where([data-reference-site]) #home .collection-trail{position:relative;overflow:hidden;height:810px;background:#fff;border-top:2px solid #111;border-bottom:2px solid #111;margin:16px -34px 0} :where([data-reference-site]) .collection-card{position:absolute;display:block;width:25%;height:285px;background:#ffc72c;border:2px solid #111;border-radius:10px 10px 3px 3px;box-shadow:12px 13px #171717;transition:transform .24s,box-shadow .24s;animation:trail-drift 8s ease-in-out infinite alternate} :where([data-reference-site]) .collection-card:before{content:"";position:absolute;left:-2px;top:-22px;width:42%;height:22px;background:#ffc72c;border:2px solid #111;border-bottom:0;border-radius:11px 11px 0 0} :where([data-reference-site]) .collection-card img{position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:contain;background:#ffc72c} :where([data-reference-site]) .collection-card:nth-child(1){left:4%;bottom:8%;z-index:4;transform:rotate(-8deg)} :where([data-reference-site]) .collection-card:nth-child(2){left:28%;bottom:27%;z-index:3;transform:rotate(5deg);animation-delay:-2s} :where([data-reference-site]) .collection-card:nth-child(3){left:51%;bottom:47%;z-index:2;transform:rotate(-5deg);animation-delay:-4s} :where([data-reference-site]) .collection-card:nth-child(4){left:73%;bottom:65%;z-index:1;transform:rotate(7deg);animation-delay:-6s} :where([data-reference-site]) .collection-card:hover{z-index:5;transform:translateY(-17px) rotate(0deg);box-shadow:15px 19px #171717} @keyframes trail-drift{0%{translate:0 7px}100%{translate:0 -7px}} @keyframes wall-drift{0%{translate:-7px 8px}100%{translate:8px -8px}} :where([data-reference-site]) .trail-note{font-size:12px;letter-spacing:.03em;font-style:italic;padding:12px 0 4px} :where([data-reference-site]) .more-products{margin:32px 0 15px;border-top:2px solid #111;padding-top:20px} :where([data-reference-site]) .more-products>div{display:grid;grid-template-columns:44% 1fr;background:#ffc72c;border:2px solid #111;margin-top:12px} :where([data-reference-site]) .more-products img{width:100%;height:340px;object-fit:contain;display:block} :where([data-reference-site]) .more-products article{padding:26px;border-left:2px solid #111;align-self:center} :where([data-reference-site]) .more-products h2{font-size:clamp(27px,3.5vw,43px);line-height:1.02;margin:10px 0} :where([data-reference-site]) .more-products p{max-width:55ch;font-size:17px;line-height:1.4} :where([data-reference-site]) .more-products article span{display:inline-block;border:1px solid #111;padding:8px;font-size:12px;font-style:italic;font-weight:700} :where([data-reference-site]) .archive-card.object-card img{opacity:1;object-fit:cover} :where([data-reference-site]) .archive-card.object-card:first-of-type img{object-fit:contain;background:#ddd} @media(max-width:780px){:where([data-reference-site]) #home .motion-wall{min-height:530px;padding:26px 18px 55px}:where([data-reference-site]) .motion-wall-intro{max-width:70%}:where([data-reference-site]) .motion-wall-intro h1{font-size:clamp(43px,10vw,67px)}:where([data-reference-site]) .motion-wall-images a{width:54%;height:250px}:where([data-reference-site]) .motion-wall-images a:first-child{left:2%;bottom:-30px}:where([data-reference-site]) .motion-wall-images a:last-child{right:4%;top:172px}:where([data-reference-site]) #home .info-section{margin:-25px 18px 0;max-width:none}:where([data-reference-site]) .campaign-grid{gap:8px}:where([data-reference-site]) .campaign-card{height:300px}:where([data-reference-site]) .campaign-card div{padding:12px}:where([data-reference-site]) #home .collection-trail{height:690px;margin-left:-18px;margin-right:-18px}:where([data-reference-site]) .collection-card{width:34%;height:220px}:where([data-reference-site]) .collection-card:nth-child(1){left:2%;bottom:6%}:where([data-reference-site]) .collection-card:nth-child(2){left:22%;bottom:25%}:where([data-reference-site]) .collection-card:nth-child(3){left:45%;bottom:45%}:where([data-reference-site]) .collection-card:nth-child(4){left:68%;bottom:64%}} @media(max-width:540px){:where([data-reference-site]) .motion-wall-intro{max-width:100%}:where([data-reference-site]) .motion-wall-intro p{font-size:14px}:where([data-reference-site]) .motion-wall-images a{height:190px}:where([data-reference-site]) .motion-wall-images a:first-child{left:3%;bottom:15px}:where([data-reference-site]) .motion-wall-images a:last-child{right:3%;top:215px}:where([data-reference-site]) .campaign-grid{grid-template-columns:1fr}:where([data-reference-site]) .campaign-card{height:290px}:where([data-reference-site]) #home .collection-trail{height:670px}:where([data-reference-site]) .collection-card{width:49%;height:190px}:where([data-reference-site]) .collection-card:nth-child(1){left:2%;bottom:5%}:where([data-reference-site]) .collection-card:nth-child(2){left:38%;bottom:27%}:where([data-reference-site]) .collection-card:nth-child(3){left:8%;bottom:50%}:where([data-reference-site]) .collection-card:nth-child(4){left:47%;bottom:72%}:where([data-reference-site]) .more-products>div{grid-template-columns:1fr}:where([data-reference-site]) .more-products img{height:270px}:where([data-reference-site]) .more-products article{border-left:0;border-top:2px solid #111}} @media(prefers-reduced-motion:reduce){:where([data-reference-site]) .motion-wall-images a,:where([data-reference-site]) .collection-card,:where([data-reference-site]) #home .ticker span{animation:none!important}} :where([data-reference-site]) #philosophie .philosophy-hero-media img{filter:none} /* Header: the original earth/cloud mark, Phorfeit wordmark and freestanding supplied icons. */ :where([data-reference-site]) .top{height:122px;min-height:122px;align-items:center;background:#ffc72c;padding:8px 25px;gap:12px} :where([data-reference-site]) .top .brand{gap:8px;align-items:center;flex-shrink:0} :where([data-reference-site]) .top .brandmark{width:69px;height:55px;background:transparent;border:0;display:block} :where([data-reference-site]) .top .brandmark img{width:100%;height:100%;object-fit:contain;display:block} :where([data-reference-site]) .top .brand-words{font-family:'Phorfeit Slant BRK',sans-serif!important;font-size:clamp(21px,2.65vw,34px);gap:.2em;align-items:baseline;white-space:nowrap} :where([data-reference-site]) .top .brand-perception{color:#fff;-webkit-text-stroke:1.5px #111;paint-order:stroke fill} :where([data-reference-site]) .top .brand-lab{color:#ffc72c;-webkit-text-stroke:1.5px #111;paint-order:stroke fill} :where([data-reference-site]) .top .brand-dot{color:#ffc72c;margin-left:.27em;transform:scale(1.42,1.48);-webkit-text-stroke:1.5px #111} :where([data-reference-site]) .top .nav{display:flex;align-items:flex-end;justify-content:flex-end;gap:4px;margin:0;flex:1} :where([data-reference-site]) .top .nav a{display:flex;flex-direction:column-reverse;justify-content:flex-end;align-items:center;gap:0;width:135px;min-width:0;padding:2px 0 5px;text-align:center;color:#111} :where([data-reference-site]) .top .nav-icon{width:128px;height:86px;object-fit:contain;mix-blend-mode:normal;border-radius:0;filter:none;transition:transform .2s ease} :where([data-reference-site]) .top .nav-label{font-family:'ReferenceLekton',monospace;font-size:12px;line-height:1;font-weight:700;white-space:nowrap;margin-top:1px} :where([data-reference-site]) .top .nav a.active,:where([data-reference-site]) .top .nav a:hover{color:#111} :where([data-reference-site]) .top .nav a:hover .nav-icon,:where([data-reference-site]) .top .nav a.active .nav-icon{transform:translateY(-3px) rotate(-2deg)} /* Return Home to the accepted compact order: contact, ticker, one campaign window, product folders. */ :where([data-reference-site]) #home .info-section{position:static;max-width:none;margin:0!important;padding:24px 34px 28px!important;background:#ffc72c!important} :where([data-reference-site]) #home .info-section>.eyebrow,:where([data-reference-site]) #home .info-section>h2{display:block} :where([data-reference-site]) #home .info-section h2{margin:6px 0 14px} :where([data-reference-site]) #home .contact-shell{box-shadow:none} :where([data-reference-site]) #home .ticker{min-height:42px;background:#ffc72c;color:#111;border-top:2px solid #111;border-bottom:2px solid #111} :where([data-reference-site]) #home .ticker span{font-size:23px;font-weight:700;font-style:normal;line-height:40px;letter-spacing:.12em} :where([data-reference-site]) #home .section:nth-of-type(2){background:#fff} :where([data-reference-site]) .campaign-carousel{position:relative;height:360px;background:#111;border:2px solid #111;overflow:hidden} :where([data-reference-site]) .campaign-slides{height:100%;position:relative} :where([data-reference-site]) .campaign-slide{position:absolute;inset:0;display:grid;grid-template-columns:55% 45%;opacity:0;transition:opacity .65s ease;pointer-events:none} :where([data-reference-site]) .campaign-slide.is-current{opacity:1;pointer-events:auto;z-index:1} :where([data-reference-site]) .campaign-copy{background:#111;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:28px} :where([data-reference-site]) .campaign-copy strong{font-size:clamp(42px,5vw,68px);line-height:.94;font-weight:700} :where([data-reference-site]) .campaign-copy small{color:#ffc72c;font-size:13px;line-height:1.7;font-weight:700} :where([data-reference-site]) .campaign-image{background:#ffc72c;display:grid;place-items:center;min-width:0;min-height:0} :where([data-reference-site]) .campaign-image img{width:100%;height:100%;display:block;object-fit:contain;object-position:center} :where([data-reference-site]) .pixel-fade{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(circle,#fff 35%,transparent 40%) 0 0/8px 8px;mix-blend-mode:screen} :where([data-reference-site]) .pixel-fade.active{animation:pixel-pulse .9s ease-in-out both} @keyframes pixel-pulse{0%{opacity:0;background-size:18px 18px}48%{opacity:.6;background-size:6px 6px}100%{opacity:0;background-size:18px 18px}} :where([data-reference-site]) .campaign-next{position:absolute;z-index:4;right:16px;top:50%;transform:translateY(-50%);border:0;border-radius:50%;background:#fff;color:#111;font-size:32px;line-height:1;width:38px;height:38px;display:grid;place-items:center;cursor:pointer} :where([data-reference-site]) .campaign-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:13px;font-size:12px;font-weight:700} :where([data-reference-site]) .campaign-controls>div{display:flex;gap:5px} :where([data-reference-site]) .campaign-dot{border:0;border-radius:20px;width:33px;height:5px;background:#d2d2d2;padding:0;cursor:pointer} :where([data-reference-site]) .campaign-dot.active{background:#f36a18} :where([data-reference-site]) #home .section:last-child{padding-top:28px!important;background:#fff} :where([data-reference-site]) #home .collection-trail{height:430px;margin:8px -34px 0;background:#fff;border:0;overflow:hidden} :where([data-reference-site]) #home .collection-card{width:23%;height:215px;box-shadow:8px 9px #111;background:#ffc72c;border-radius:9px 9px 2px 2px;animation:none} :where([data-reference-site]) #home .collection-card img{object-fit:contain;object-position:center;background:#ffc72c} :where([data-reference-site]) #home .collection-card:nth-child(1){left:2%;bottom:8%;transform:rotate(-2deg);z-index:4} :where([data-reference-site]) #home .collection-card:nth-child(2){left:26%;bottom:19%;transform:rotate(2deg);z-index:3} :where([data-reference-site]) #home .collection-card:nth-child(3){left:50%;bottom:30%;transform:rotate(-2deg);z-index:2} :where([data-reference-site]) #home .collection-card:nth-child(4){left:74%;bottom:41%;transform:rotate(2deg);z-index:1} :where([data-reference-site]) #home .collection-card:hover{transform:translateY(-8px) rotate(0deg);z-index:5} :where([data-reference-site]) #home .trail-note{margin:0 0 20px;font-size:11px} /* The originals remain visible within their frames on every page. */ :where([data-reference-site]) #archiv .archive-card img{object-fit:contain!important;background:#ffc72c;opacity:1} :where([data-reference-site]) #philosophie .philosophy-hero-media img{object-fit:contain;max-height:550px;background:#fff} @media(max-width:1000px){:where([data-reference-site]) .top{padding:8px 16px}:where([data-reference-site]) .top .brand-words{font-size:25px}:where([data-reference-site]) .top .nav a{width:112px}:where([data-reference-site]) .top .nav-icon{width:110px;height:78px}} @media(max-width:780px){:where([data-reference-site]) .top{height:auto;min-height:0;display:block;padding:10px 15px 7px}:where([data-reference-site]) .top .brand{justify-content:center}:where([data-reference-site]) .top .brand-words{font-size:clamp(21px,5vw,29px)}:where([data-reference-site]) .top .brandmark{width:53px;height:42px}:where([data-reference-site]) .top .nav{justify-content:space-between;gap:2px;margin-top:6px}:where([data-reference-site]) .top .nav a{width:25%;padding:0 1px 5px;flex-direction:column-reverse}:where([data-reference-site]) .top .nav-icon{width:100%;height:63px}:where([data-reference-site]) .top .nav-label{font-size:10px}:where([data-reference-site]) #home .info-section{padding:18px 18px 25px!important}:where([data-reference-site]) .campaign-carousel{height:350px}:where([data-reference-site]) .campaign-slide{grid-template-columns:50% 50%}:where([data-reference-site]) .campaign-copy{padding:18px}:where([data-reference-site]) .campaign-copy strong{font-size:clamp(35px,7vw,56px)}:where([data-reference-site]) #home .collection-trail{height:350px;margin-left:-18px;margin-right:-18px}:where([data-reference-site]) #home .collection-card{width:27%;height:170px}:where([data-reference-site]) #home .collection-card:nth-child(1){left:1%;bottom:5%}:where([data-reference-site]) #home .collection-card:nth-child(2){left:24%;bottom:17%}:where([data-reference-site]) #home .collection-card:nth-child(3){left:47%;bottom:29%}:where([data-reference-site]) #home .collection-card:nth-child(4){left:70%;bottom:41%}} @media(max-width:520px){:where([data-reference-site]) .top .nav-icon{height:55px}:where([data-reference-site]) .top .nav-label{font-size:9px}:where([data-reference-site]) .campaign-carousel{height:390px}:where([data-reference-site]) .campaign-slide{grid-template-columns:1fr;grid-template-rows:43% 57%}:where([data-reference-site]) .campaign-copy{padding:14px}:where([data-reference-site]) .campaign-copy strong{font-size:36px}:where([data-reference-site]) .campaign-copy small{font-size:10px}:where([data-reference-site]) .campaign-controls{flex-wrap:wrap}:where([data-reference-site]) .campaign-controls>span{font-size:10px}:where([data-reference-site]) #home .collection-trail{height:365px}:where([data-reference-site]) #home .collection-card{width:38%;height:145px}:where([data-reference-site]) #home .collection-card:nth-child(1){left:0%;bottom:5%}:where([data-reference-site]) #home .collection-card:nth-child(2){left:28%;bottom:25%}:where([data-reference-site]) #home .collection-card:nth-child(3){left:51%;bottom:47%}:where([data-reference-site]) #home .collection-card:nth-child(4){left:62%;bottom:65%}} @media(prefers-reduced-motion:reduce){:where([data-reference-site]) .campaign-slide{transition:none}:where([data-reference-site]) .pixel-fade.active{animation:none}} :where([data-reference-site]) #philosophie [data-pillar-page="nachhaltigkeit"] .trinity{margin:24px 0 38px;max-width:none} :where([data-reference-site]) #philosophie [data-pillar-page="nachhaltigkeit"] .trinity-points span{font-weight:700} :where([data-reference-site]) #shop .product-frame:nth-child(2) img{object-fit:contain} /* Rückkehr zur ruhigeren Fassung: Logo und Menüsymbole stehen für sich. */ :where([data-reference-site]) .top{display:flex;flex-direction:column;align-items:stretch;gap:8px;height:auto;min-height:0;padding:13px 28px 12px;border-bottom:0} :where([data-reference-site]) .top .brand{align-self:center;gap:12px;align-items:flex-end} :where([data-reference-site]) .top .brandmark{width:112px;height:88px;transform:translateY(-4px)} :where([data-reference-site]) .top .brand-words{font-size:clamp(29px,3.5vw,44px)} :where([data-reference-site]) .top .nav{width:100%;flex:none;justify-content:space-around;align-items:flex-end;margin:2px 0 0} :where([data-reference-site]) .top .nav a{position:relative;flex:0 1 140px;isolation:isolate} :where([data-reference-site]) .top .nav-icon{max-width:100%;filter:drop-shadow(3px 5px 2px rgba(25,25,25,.23))} :where([data-reference-site]) .top .nav-label{color:#3173a7;font-size:13px;position:relative;z-index:2} :where([data-reference-site]) .top .nav a.active,:where([data-reference-site]) .top .nav a:hover{color:#3173a7} /* Die Kampagne zeigt das ganze Originalbild und läuft weiter mit Pixelübergang. */ :where([data-reference-site]) #home .campaign-carousel{height:auto;background:#ffc72c;border:0;overflow:hidden} :where([data-reference-site]) #home .campaign-slides{height:auto} :where([data-reference-site]) #home .campaign-slide{display:flex;flex-direction:column-reverse;position:absolute;inset:0} :where([data-reference-site]) #home .campaign-slide.is-current{position:relative;inset:auto} :where([data-reference-site]) #home .campaign-image{width:100%;height:auto;background:#ffc72c} :where([data-reference-site]) #home .campaign-image img{display:block;width:100%;height:auto;max-height:640px;object-fit:contain;background:#ffc72c} :where([data-reference-site]) #home .campaign-copy{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;min-height:78px;padding:13px 20px;background:#ffc72c;color:#171717} :where([data-reference-site]) #home .campaign-copy strong{font-size:clamp(27px,4vw,48px);line-height:1} :where([data-reference-site]) #home .campaign-copy small{color:#171717;text-align:right} :where([data-reference-site]) #home .campaign-next{background:#ffc72c;top:48%} /* Die ältere diagonale Karteikartenordnung lässt das vordere Bild größer wirken. */ :where([data-reference-site]) #home .collection-trail{height:440px;background:#fff;margin:8px -34px 0;touch-action:pan-y} :where([data-reference-site]) #home .collection-card,:where([data-reference-site]) #home .collection-card[data-slot]{width:var(--width);height:var(--height);left:var(--left);bottom:var(--bottom);top:auto;z-index:var(--layer);transform:rotate(var(--angle));border:2px solid #171717;box-shadow:7px 9px 0 rgba(23,23,23,.72);transition:left .45s,bottom .45s,width .45s,height .45s,transform .45s;animation:none} :where([data-reference-site]) #home .collection-card[data-slot="0"]{--left:3%;--bottom:7%;--width:34%;--height:275px;--layer:4;--angle:-2deg} :where([data-reference-site]) #home .collection-card[data-slot="1"]{--left:26%;--bottom:18%;--width:29%;--height:230px;--layer:3;--angle:2deg} :where([data-reference-site]) #home .collection-card[data-slot="2"]{--left:50%;--bottom:29%;--width:26%;--height:205px;--layer:2;--angle:-2deg} :where([data-reference-site]) #home .collection-card[data-slot="3"]{--left:73%;--bottom:40%;--width:23%;--height:185px;--layer:1;--angle:2deg} :where([data-reference-site]) #home .collection-card:hover,:where([data-reference-site]) #home .collection-card:focus-visible{transform:translateY(-8px) rotate(0deg)} :where([data-reference-site]) #home .collection-card img{width:100%;height:100%;object-fit:contain;padding:7px;background:#ffc72c} :where([data-reference-site]) .collection-controls{display:flex;justify-content:center;align-items:center;gap:13px;margin:10px 0 0} :where([data-reference-site]) .collection-controls button:not(.collection-dot){display:none} :where([data-reference-site]) .collection-progress{display:flex;align-items:center;gap:6px} :where([data-reference-site]) .collection-dot{width:8px;height:8px;border:0;border-radius:50%;background:#171717;opacity:.35;padding:0} :where([data-reference-site]) .collection-dot.active{width:23px;border-radius:8px;opacity:1;background:#3173a7} :where([data-reference-site]) .collection-position,:where([data-reference-site]) .collection-touch-hint{font-size:12px;font-weight:700} :where([data-reference-site]) #home .product-frame img,:where([data-reference-site]) #shop .product-frame img,:where([data-reference-site]) #archiv .archive-card img,:where([data-reference-site]) #philosophie .philosophy-hero-media img{object-fit:contain} /* Archiv bleibt eine Sammlung von geöffneten Originaldateien. */ :where([data-reference-site]) #archiv{background:#ffc72c} :where([data-reference-site]) #archiv .archive-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:41px 20px;margin-top:38px} :where([data-reference-site]) #archiv .archive-card{position:relative;display:flex;flex-direction:column;height:auto;min-height:0;background:#ffc72c;color:#171717;border:2px solid #171717;border-radius:10px 10px 3px 3px;overflow:visible;box-shadow:5px 7px 0 rgba(23,23,23,.15)} :where([data-reference-site]) #archiv .archive-card::before{content:"ARCHIVE / FILE";position:absolute;left:-2px;top:-25px;height:25px;width:53%;padding:4px 12px;font-size:12px;font-weight:700;background:#ffc72c;border:2px solid #171717;border-bottom:0;border-radius:10px 10px 0 0} :where([data-reference-site]) #archiv .archive-card::after{display:none} :where([data-reference-site]) #archiv .archive-card img{position:relative;inset:auto;display:block;width:100%;height:285px;opacity:1;background:#ffc72c;padding:12px} :where([data-reference-site]) #archiv .archive-card .caption{position:relative;margin:0;padding:17px;border-top:1px solid #171717;color:#171717} :where([data-reference-site]) #archiv .archive-card .caption small{color:#3173a7} :where([data-reference-site]) #archiv .archive-card .caption h2{font-size:30px;margin:8px 0} :where([data-reference-site]) #archiv .archive-card .caption p{font-size:16px;line-height:1.4} :where([data-reference-site]) .archive-open{margin:14px 0 0;padding:9px 12px;background:#ffc72c;border:1px solid #171717;color:#3173a7;font-weight:700} :where([data-reference-site]) .archive-dialog{width:min(900px,94vw);max-height:92vh;padding:20px;background:#ffc72c;color:#171717;border:2px solid #171717;font-family:'ReferenceLekton',monospace} :where([data-reference-site]) .archive-dialog::backdrop{background:rgba(23,23,23,.55)} :where([data-reference-site]) .archive-dialog img,:where([data-reference-site]) .archive-gallery img{display:block;width:100%;height:auto;max-height:75vh;object-fit:contain} :where([data-reference-site]) .archive-gallery{display:grid;gap:20px} :where([data-reference-site]) .archive-dialog button{padding:10px 15px;background:#ffc72c;border:1px solid #171717;font:700 14px 'ReferenceLekton',monospace} /* Kompakter gemeinsamer Footer mit der Dämmungswelle. */ :where([data-reference-site]) .unified-footer{background:#ffc72c;padding:0 20px;color:#171717;font-family:'ReferenceLekton',monospace} :where([data-reference-site]) .insulation-boundary{height:132px;margin:0 -20px;background:#ffc72c url('insulation-pattern-yellow.svg') left center/56px 132px repeat-x} :where([data-reference-site]) .footer-stage{padding:4px 0 10px;background:#ffc72c} :where([data-reference-site]) .footer-panel{display:grid;grid-template-columns:1.7fr repeat(4,1fr) 1.3fr;gap:16px;align-items:start;padding:24px 15px} :where([data-reference-site]) .footer-brand svg{display:block;width:115px;height:85px;margin-bottom:8px} :where([data-reference-site]) .footer-brand strong{display:block;font-size:24px;line-height:1.1} :where([data-reference-site]) .footer-brand p{font-size:13px;line-height:1.4;max-width:210px} :where([data-reference-site]) .footer-group h3{font-size:16px;margin:0 0 13px} :where([data-reference-site]) .footer-group a{display:block;font-size:14px;line-height:1.5;margin-bottom:8px} :where([data-reference-site]) .footer-group p{font-size:13px;line-height:1.5;margin:0 0 18px} :where([data-reference-site]) .unified-footer-legal{display:flex;justify-content:space-between;gap:20px;padding:16px 5px;font-size:11px;line-height:1.4} :where([data-reference-site]).philosophy-route .footer-stage{padding:90px 22px 25px;background:#077fac url('footer-pattern.svg') left top/20% auto repeat} :where([data-reference-site]).philosophy-route .footer-panel{background:rgba(255,255,255,.8);padding:22px} :where([data-reference-site]) .energy-original{display:block;width:100%;height:auto;object-fit:contain;margin:25px 0} :where([data-reference-site]) .energy-overview{padding:25px 30px;background:#ffc72c} :where([data-reference-site]) .energy-link{display:block;color:#3173a7;margin-top:12px;font-weight:700} :where([data-reference-site]) .top .brand-words,:where([data-reference-site]) .top .brand-words *{font-family:'Phorfeit Slant BRK',sans-serif!important;font-weight:400!important;font-style:normal;font-synthesis:none} @media(max-width:900px){:where([data-reference-site]) .footer-panel{grid-template-columns:repeat(3,1fr)}:where([data-reference-site]) .footer-brand{grid-column:1/-1}} @media(max-width:780px){:where([data-reference-site]) .top{padding:10px 15px 9px}:where([data-reference-site]) .top .brandmark{width:82px;height:66px}:where([data-reference-site]) .top .brand-words{font-size:clamp(25px,5vw,34px)}:where([data-reference-site]) .top .nav{margin-top:4px}:where([data-reference-site]) .top .nav a{flex-basis:25%;width:25%}:where([data-reference-site]) .top .nav-icon{height:64px}:where([data-reference-site]) .top .nav-label{font-size:11px}:where([data-reference-site]) #home .campaign-copy{min-height:70px;padding:10px 14px}:where([data-reference-site]) #home .campaign-copy strong{font-size:29px}:where([data-reference-site]) #home .collection-trail{height:350px;margin-left:-18px;margin-right:-18px}:where([data-reference-site]) #home .collection-card[data-slot="0"]{--width:43%;--height:235px;--left:1%;--bottom:6%}:where([data-reference-site]) #home .collection-card[data-slot="1"]{--width:35%;--height:190px;--left:25%;--bottom:18%}:where([data-reference-site]) #home .collection-card[data-slot="2"]{--width:30%;--height:170px;--left:49%;--bottom:30%}:where([data-reference-site]) #home .collection-card[data-slot="3"]{--width:27%;--height:150px;--left:69%;--bottom:42%}:where([data-reference-site]) .footer-panel{grid-template-columns:repeat(2,1fr)}:where([data-reference-site]) .unified-footer-legal{display:block}:where([data-reference-site]).philosophy-route .footer-stage{background-size:33.333% auto}} @media(max-width:520px){:where([data-reference-site]) .top .brandmark{width:69px;height:56px}:where([data-reference-site]) .top .brand-words{font-size:clamp(22px,5.5vw,29px)}:where([data-reference-site]) .top .nav-icon{height:55px}:where([data-reference-site]) .top .nav-label{font-size:10px}:where([data-reference-site]) #home .campaign-copy strong{font-size:24px}:where([data-reference-site]) #home .campaign-copy small{font-size:10px}:where([data-reference-site]) #home .collection-trail{height:340px}:where([data-reference-site]) #home .collection-card[data-slot="0"]{--width:53%;--height:195px;--left:1%;--bottom:5%}:where([data-reference-site]) #home .collection-card[data-slot="1"]{--width:43%;--height:165px;--left:27%;--bottom:20%}:where([data-reference-site]) #home .collection-card[data-slot="2"]{--width:37%;--height:145px;--left:50%;--bottom:35%}:where([data-reference-site]) #home .collection-card[data-slot="3"]{--width:33%;--height:125px;--left:65%;--bottom:50%}:where([data-reference-site]) #archiv .archive-grid{grid-template-columns:1fr}:where([data-reference-site]) .footer-panel{gap:16px}:where([data-reference-site]) .footer-brand svg{width:100px;height:75px}:where([data-reference-site]) .insulation-boundary{height:96px;background-size:41px 96px,100% 100%}} /* Kontakt als regionale Visitenkarte mit internationaler Zweitzeile und Info-Lasche. */ :where([data-reference-site]) #home .info-section{position:relative;overflow:visible} :where([data-reference-site]) #home .contact-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:5px 0 15px} :where([data-reference-site]) #home .contact-title h2{margin:0;font-size:clamp(29px,4vw,44px)} :where([data-reference-site]) #home .contact-title>span{font:700 12px/1.5 'ReferenceLekton',monospace;letter-spacing:.025em} :where([data-reference-site]) #home .contact-shell{position:relative;overflow:visible;padding:18px 92px 18px 18px;border-radius:18px} :where([data-reference-site]) #home .contact-shell .card{width:100%;max-width:none;min-height:180px;box-shadow:5px 5px #e7e7e7} :where([data-reference-site]) #home .contact-info-tab{position:absolute;right:40px;top:50%;transform:translateY(-50%);width:94px;height:135px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:2px solid #171717;border-right:0;border-radius:14px 0 0 14px;background:#ff5a10;color:#171717;box-shadow:-4px 5px 0 rgba(23,23,23,.18);z-index:2} :where([data-reference-site]) #home .contact-info-tab svg{width:60px;height:60px;display:block} :where([data-reference-site]) #home .contact-info-tab span{font:700 13px/1 'ReferenceLekton',monospace} :where([data-reference-site]) #home .contact-info-tab:hover,:where([data-reference-site]) #home .contact-info-tab:focus-visible{background:#ff752f;outline-offset:3px} @media(max-width:780px){:where([data-reference-site]) #home .contact-shell{padding:15px 58px 15px 15px}:where([data-reference-site]) #home .contact-info-tab{right:29px;width:72px;height:112px}:where([data-reference-site]) #home .contact-info-tab svg{width:46px;height:46px}} @media(max-width:520px){:where([data-reference-site]) #home .contact-title>span{font-size:11px}:where([data-reference-site]) #home .contact-shell{padding:12px 40px 12px 12px}:where([data-reference-site]) #home .contact-shell .card{padding:15px 12px}:where([data-reference-site]) #home .contact-info-tab{right:16px;width:51px;height:88px;border-radius:10px 0 0 10px}:where([data-reference-site]) #home .contact-info-tab svg{width:37px;height:37px}:where([data-reference-site]) #home .contact-info-tab span{font-size:10px}:where([data-reference-site]) #home .contact-row span{font-size:11px}} :where([data-reference-site]) .energy-logo-link{display:flex;align-items:center;gap:14px;width:max-content;max-width:100%;margin:22px 0;font-size:16px;font-weight:700} :where([data-reference-site]) .energy-logo-link:focus-visible{outline:3px solid #ff5a10;outline-offset:5px} :where([data-reference-site]) .energy-logo-photo{display:block;position:relative;width:150px;height:90px;overflow:hidden;background:#172e59;border:1px solid #172e59} :where([data-reference-site]) .more-products .energy-logo-photo img,:where([data-reference-site]) .energy-project-product .energy-logo-photo img{position:absolute!important;width:600px!important;max-width:none!important;height:600px!important;left:-218px;top:-168px;object-fit:fill!important;margin:0!important} :where([data-reference-site]) .energy-context{font-size:16px;line-height:1.5} :where([data-reference-site]) .energy-project-product{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;border-block:2px solid #171717;padding:25px 0;margin:30px 0} :where([data-reference-site]) .energy-project-product>a>img{display:block;width:100%;height:auto} :where([data-reference-site]) .energy-project-product h2{font-size:clamp(26px,4vw,40px);margin:12px 0} :where([data-reference-site]) .energy-project-product p{font-size:18px;line-height:1.5} :where([data-reference-site]) #energy-crewneck{scroll-margin-top:20px} @media(max-width:650px){:where([data-reference-site]) .energy-project-product{grid-template-columns:1fr}:where([data-reference-site]) .energy-logo-link{flex-wrap:wrap}} :where([data-reference-site]) .nrg-project-photo{width:min(100%,640px);margin:32px auto 42px} :where([data-reference-site]) .nrg-project-photo img{display:block;width:100%;height:auto;object-fit:contain} :where([data-reference-site]) .nrg-project-photo figcaption{padding:10px 0;border-bottom:1px solid #171717;font:700 13px/1.4 'ReferenceLekton',monospace} /* Larger label; smaller navigation. */ :where([data-reference-site]) .top{gap:3px;padding:17px 28px 10px} :where([data-reference-site]) .top .brand{gap:16px;align-items:center} :where([data-reference-site]) .top .brandmark{width:142px;height:110px;transform:none} :where([data-reference-site]) .top .brand-words{font-size:clamp(36px,4.7vw,60px)} :where([data-reference-site]) .top .nav{justify-content:center;gap:26px;margin-top:0} :where([data-reference-site]) .top .nav a{flex:0 1 96px;width:96px;padding:0 0 4px} :where([data-reference-site]) .top .nav-icon{width:88px;height:58px} :where([data-reference-site]) .top .nav-label{font-size:11px} :where([data-reference-site]) .top .nav a[data-route="home"]{flex-basis:118px;width:118px} :where([data-reference-site]) .top .nav a[data-route="home"] .nav-icon{width:116px;height:82px;margin-top:-20px} /* The live Homepage's diagonal, scroll-driven product presentation. */ :where([data-reference-site]) #home .section:last-child{background:#fff;padding-bottom:24px} :where([data-reference-site]) .collection-scroll-track{height:calc(1050px + 78svh);margin:8px -34px 0} :where([data-reference-site]) #home .collection-trail{position:sticky;top:10vh;height:78svh;min-height:460px;margin:0;background:#fff;overflow:hidden;perspective:2000px;perspective-origin:50% 50%;touch-action:pan-y} :where([data-reference-site]) .surfer-title{position:absolute;left:34px;top:9%;font-size:clamp(28px,4.2vw,58px);color:#171717;z-index:20;pointer-events:none;font-weight:700} :where([data-reference-site]) .surfer-title small{font-size:.42em;vertical-align:middle} :where([data-reference-site]) .surfer-hint{position:absolute;right:25px;bottom:20px;font-size:11px;letter-spacing:.14em;z-index:20} :where([data-reference-site]) #home .collection-card,:where([data-reference-site]) #home .collection-card[data-slot]{position:absolute;left:10%;top:20%;bottom:auto;width:min(320px,26vw,33svh);height:auto;aspect-ratio:.66;border:1px solid rgba(255,255,255,.22);border-radius:0;box-shadow:12px 18px 28px rgba(90,60,0,.18);background:#ffc72c;transform-style:preserve-3d;transform-origin:center center;transition:transform .15s linear;animation:none;display:flex;flex-direction:column;overflow:hidden;text-decoration:none} :where([data-reference-site]) #home .collection-card,:where([data-reference-site]) #home .collection-card[data-slot]{border:2px solid #171717;border-radius:8px 8px 2px 2px;overflow:visible} :where([data-reference-site]) #home .collection-card::before{content:"PR/O(B)JECT / FILE";position:absolute;display:flex;align-items:center;left:-2px;top:-23px;width:52%;height:22px;padding:0 9px;border:2px solid #171717;border-bottom:0;border-radius:8px 8px 0 0;background:#ffc72c;color:#3173a7;font:700 10px 'ReferenceLekton',monospace;white-space:nowrap} :where([data-reference-site]) #home .collection-card::after{display:none} :where([data-reference-site]) #home .collection-card img{height:64%;width:100%;padding:8px;object-fit:contain;flex:none;background:#ffc72c} :where([data-reference-site]) .surfer-caption{display:flex;flex-direction:column;gap:5px;padding:8px 13px 13px;color:#171717} :where([data-reference-site]) .surfer-caption small{font-size:9px;letter-spacing:.04em} :where([data-reference-site]) .surfer-caption strong{font-size:14px;line-height:1.1} :where([data-reference-site]) .surfer-caption>span{font-size:11px;margin-top:5px;text-decoration:underline} :where([data-reference-site]) #home .collection-card:focus-visible{outline:3px solid #3173a7;outline-offset:4px} :where([data-reference-site]) #home .collection-card[aria-current="true"]{box-shadow:16px 22px 30px rgba(23,23,23,.27)} @media(max-width:780px){:where([data-reference-site]) .top .brandmark{width:108px;height:85px}:where([data-reference-site]) .top .brand-words{font-size:clamp(30px,6vw,45px)}:where([data-reference-site]) .top .nav{gap:13px}:where([data-reference-site]) .top .nav a{flex:0 1 79px}:where([data-reference-site]) .top .nav-icon{width:70px;height:46px}:where([data-reference-site]) .top .nav a[data-route="home"]{flex-basis:94px;width:94px}:where([data-reference-site]) .top .nav a[data-route="home"] .nav-icon{width:92px;height:64px;margin-top:-16px}:where([data-reference-site]) .top .nav-label{font-size:10px}:where([data-reference-site]) .collection-scroll-track{margin-left:-18px;margin-right:-18px}:where([data-reference-site]) .surfer-title{left:18px}:where([data-reference-site]) #home .collection-trail{min-height:420px}:where([data-reference-site]) #home .collection-card,:where([data-reference-site]) #home .collection-card[data-slot]{left:22%;top:37%;width:clamp(180px,35vw,250px);height:auto}} @media(max-width:520px){:where([data-reference-site]) .top{padding:14px 12px 8px}:where([data-reference-site]) .top .brand{gap:9px}:where([data-reference-site]) .top .brandmark{width:85px;height:67px}:where([data-reference-site]) .top .brand-words{font-size:clamp(26px,6.7vw,35px)}:where([data-reference-site]) .top .nav-icon{width:57px;height:38px}:where([data-reference-site]) .top .nav a{flex-basis:65px}:where([data-reference-site]) .top .nav a[data-route="home"]{flex-basis:72px;width:72px}:where([data-reference-site]) .top .nav a[data-route="home"] .nav-icon{width:70px;height:52px;margin-top:-14px}:where([data-reference-site]) .top .nav{gap:8px}:where([data-reference-site]) .top .nav-label{font-size:9px}:where([data-reference-site]) #home .collection-card,:where([data-reference-site]) #home .collection-card[data-slot]{left:16%;width:190px}:where([data-reference-site]) .surfer-title{font-size:30px}:where([data-reference-site]) .surfer-hint{right:16px;font-size:9px}} @media(prefers-reduced-motion:reduce){:where([data-reference-site]) .collection-scroll-track{height:auto}:where([data-reference-site]) #home .collection-trail{position:relative;top:0;height:480px}:where([data-reference-site]) .collection-card{transition:none!important}} /* Compact menu sits below the wordmark, without changing the existing icon artwork. */ :where([data-reference-site]) .top .brandmark{width:156px;height:116px} :where([data-reference-site]) .top .brand-words{font-size:clamp(42px,5.2vw,66px)} :where([data-reference-site]) .top .nav{align-self:center;width:min(340px,100%);flex:none;justify-content:space-between;gap:8px;margin:0} :where([data-reference-site]) .top .nav a,:where([data-reference-site]) .top .nav a[data-route="home"]{flex:0 1 76px;width:76px;padding-bottom:2px} :where([data-reference-site]) .top .nav-icon,:where([data-reference-site]) .top .nav a[data-route="home"] .nav-icon{width:70px;height:48px;margin-top:0} :where([data-reference-site]) .top .nav a[data-route="home"] .nav-icon{width:78px;height:62px;object-fit:cover;object-position:center 69%;margin-top:-14px} :where([data-reference-site]) .top .nav-label{font-size:11px} @media(max-width:780px){:where([data-reference-site]) .top .brandmark{width:118px;height:89px}:where([data-reference-site]) .top .brand-words{font-size:clamp(34px,6.2vw,48px)}:where([data-reference-site]) .top .nav{width:min(310px,100%);margin:0;gap:4px}:where([data-reference-site]) .top .nav a,:where([data-reference-site]) .top .nav a[data-route="home"]{flex-basis:70px;width:70px}:where([data-reference-site]) .top .nav-icon{width:66px;height:45px}:where([data-reference-site]) .top .nav a[data-route="home"] .nav-icon{width:73px;height:58px;margin-top:-13px}:where([data-reference-site]) #home .collection-card,:where([data-reference-site]) #home .collection-card[data-slot]{left:10%;top:34%;width:min(210px,50vw,31svh)}} @media(max-width:520px){:where([data-reference-site]) .top .brandmark{width:95px;height:75px}:where([data-reference-site]) .top .brand-words{font-size:clamp(29px,7vw,39px)}:where([data-reference-site]) .top .nav{width:min(278px,100%);margin:0}:where([data-reference-site]) .top .nav a,:where([data-reference-site]) .top .nav a[data-route="home"]{flex-basis:62px;width:62px}:where([data-reference-site]) .top .nav-icon{width:58px;height:42px}:where([data-reference-site]) .top .nav a[data-route="home"] .nav-icon{width:66px;height:53px;margin-top:-11px}:where([data-reference-site]) .top .nav-label{font-size:10px}:where([data-reference-site]) #home .collection-card,:where([data-reference-site]) #home .collection-card[data-slot]{left:9%;top:34%;width:min(195px,50vw,31svh)}} /* White and yellow meet within the open insulation pattern. */ :where([data-reference-site]) .unified-footer,:where([data-reference-site]) .unified-footer .footer-stage{background-color:#ffc72c} :where([data-reference-site]) .insulation-boundary{background:#fff url('insulation-pattern.svg') left center/56px 132px repeat-x} /* Philosophy lines open the corresponding archive views. */ :where([data-reference-site]) #philosophie .philosophy-lines>a{border-top:2px solid #111;display:flex;justify-content:space-between;gap:14px;padding:12px 0;font-size:clamp(24px,3.5vw,44px);font-weight:700} :where([data-reference-site]) #philosophie .philosophy-lines>a:last-child{border-bottom:2px solid #111} :where([data-reference-site]) #philosophie .philosophy-lines>a:hover,:where([data-reference-site]) #philosophie .philosophy-lines>a:focus-visible{color:#3173a7} :where([data-reference-site]) .archive-line-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:-10px 0 22px} :where([data-reference-site]) .archive-line-tabs:empty{display:none} :where([data-reference-site]) .archive-line-tabs a{border:1.5px solid #171717;padding:10px 16px;font-size:13px;font-weight:900} :where([data-reference-site]) .archive-line-tabs a.active{background:#171717;color:#fff} :where([data-reference-site]) .archive-line-context{border-top:2px solid #171717;border-bottom:2px solid #171717;padding:13px 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;font-size:15px} :where([data-reference-site]) .archive-line-context strong{font-size:20px} :where([data-reference-site]) .archive-line-context a{margin-left:auto;color:#3173a7;text-decoration:underline;font-weight:700} @media(max-width:500px){:where([data-reference-site]) #philosophie .philosophy-lines>a{display:block}:where([data-reference-site]) #philosophie .philosophy-lines>a small{display:block;text-align:left}} /* A quiet mind-map connection in the spaces between the original five pills. */ :where([data-reference-site]) #philosophie .symbols-canvas{position:relative;width:min(100%,825px);margin:0 auto} :where([data-reference-site]) #philosophie .symbols-canvas img{width:100%;height:auto;max-height:none;display:block} :where([data-reference-site]) #philosophie .symbols-network{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible} :where([data-reference-site]) #philosophie .symbols-network .network-lines{fill:none;stroke:#171717;stroke-width:5;stroke-linecap:round;stroke-linejoin:round} :where([data-reference-site]) #philosophie .symbols-network .network-nodes{fill:#ffc72c;stroke:#171717;stroke-width:4} :where([data-reference-site]) #philosophie .pillar-link .pillar-emblem{background-position-x:15%} @media(max-width:520px){:where([data-reference-site]) .insulation-boundary{background-size:41px 96px}} /* Philosophy retains the original poster rapport instead of the white/yellow divider. */ :where([data-reference-site]).philosophy-route .insulation-boundary{display:none} :where([data-reference-site]).philosophy-route .footer-stage{box-sizing:border-box;background:#0879b8 url('philosophy-rapport-desktop.jpg') left top/100% auto repeat-y;padding:clamp(140px,25vw,350px) 22px 105px} :where([data-reference-site]).philosophy-route .footer-panel{background:rgba(255,255,255,.58);backdrop-filter:blur(8px) saturate(.78);-webkit-backdrop-filter:blur(8px) saturate(.78)} @media(max-width:650px){:where([data-reference-site]).philosophy-route .footer-stage{background-image:url('philosophy-rapport-mobile.jpg');padding:265px 11px 75px}} /* Archive stays yellow through the footer; Energy is one project folder. */ :where([data-reference-site]).archive-route .insulation-boundary{display:block;background:#ffc72c url('insulation-pattern-yellow.svg') left center/56px 132px repeat-x} :where([data-reference-site]).archive-route .unified-footer{background:#ffc72c} @media(max-width:520px){:where([data-reference-site]).archive-route .insulation-boundary{background-size:41px 96px}} :where([data-reference-site]) #archiv .archive-folder{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:355px;background:#fff;border:2px solid #171717;border-radius:8px 8px 2px 2px;box-shadow:8px 10px 0 rgba(23,23,23,.15);color:#171717;text-decoration:none} :where([data-reference-site]) #archiv .archive-folder::before{content:"PROJECT / FOLDER";position:absolute;left:-2px;top:-25px;height:25px;min-width:52%;padding:4px 12px;background:#fff;border:2px solid #171717;border-bottom:0;border-radius:8px 8px 0 0;font-size:12px;font-weight:700;color:#3173a7} :where([data-reference-site]) #archiv .archive-folder:focus-visible{outline:3px solid #3173a7;outline-offset:6px} :where([data-reference-site]) #archiv .energy-folder-mark{display:block;min-height:320px;background:#fff url('nrg-original-mark.png') center/88% auto no-repeat} :where([data-reference-site]) #archiv .energy-folder-copy{display:flex;flex-direction:column;gap:12px;justify-content:center;padding:22px} :where([data-reference-site]) #archiv .energy-folder-copy small{color:#3173a7;font-size:12px;font-weight:700} :where([data-reference-site]) #archiv .energy-folder-copy strong{font-size:clamp(28px,4vw,48px);line-height:1} :where([data-reference-site]) #archiv .energy-folder-copy span{font-size:16px} :where([data-reference-site]) #archiv .energy-folder-copy b{margin-top:15px;color:#3173a7;text-decoration:underline;font-size:13px} @media(max-width:650px){:where([data-reference-site]) #archiv .archive-folder{grid-template-columns:1fr}:where([data-reference-site]) #archiv .energy-folder-mark{min-height:210px;background-size:86% auto}:where([data-reference-site]) #archiv .energy-folder-copy{gap:8px}} /* Crisp, readable archive cards on the Home page; supplied photographs stay intact. */ :where([data-reference-site]) #home .collection-card,:where([data-reference-site]) #home .collection-card[data-slot]{background:#fff;border:1.5px solid #171717;border-radius:5px 5px 2px 2px;box-shadow:6px 9px 0 rgba(23,23,23,.18),13px 18px 24px rgba(23,23,23,.14);backface-visibility:hidden;-webkit-font-smoothing:antialiased} :where([data-reference-site]) #home .collection-card::before{background:#fff;border-width:1.5px;border-radius:5px 5px 0 0;color:#3173a7;font-size:10px;letter-spacing:.03em} :where([data-reference-site]) #home .collection-card img{height:64%;width:100%;padding:0;object-fit:contain;background:#ffc72c;image-rendering:auto} :where([data-reference-site]) #home .surfer-caption{flex:1;gap:5px;justify-content:center;padding:10px 13px;background:#fff;border-top:1px solid #171717} :where([data-reference-site]) #home .surfer-caption small{color:#3173a7;font-size:10px;line-height:1.2;font-weight:700} :where([data-reference-site]) #home .surfer-caption strong{font-size:clamp(15px,1.5vw,19px);line-height:1.07;letter-spacing:-.02em} :where([data-reference-site]) #home .surfer-caption>span{margin-top:3px;color:#3173a7;font-size:11px;font-weight:700} :where([data-reference-site]) #home .collection-card[aria-current="true"]{box-shadow:10px 14px 0 rgba(23,23,23,.16),21px 28px 36px rgba(23,23,23,.22)} /* Yellow file stack against the white collection room. */ :where([data-reference-site]) #home .collection-trail{background:#fff} :where([data-reference-site]) #home .collection-card,:where([data-reference-site]) #home .collection-card[data-slot]{left:30%;background:#ffc72c} :where([data-reference-site]) #home .collection-card::before{background:#ffc72c} :where([data-reference-site]) #home .surfer-caption{background:#ffc72c} @media(max-width:780px){:where([data-reference-site]) #home .collection-card,:where([data-reference-site]) #home .collection-card[data-slot]{left:20%}} @media(max-width:520px){:where([data-reference-site]) #home .collection-card,:where([data-reference-site]) #home .collection-card[data-slot]{left:18%}} /* A whole number of curves fills each footer boundary; both ends meet at the same point in the bend. */ :where([data-reference-site]):not(.philosophy-route):not(.order-route) .insulation-boundary{height:var(--order-pattern-height,132px);background-size:var(--order-pattern-width,56px) var(--order-pattern-height,132px);background-position:var(--order-pattern-offset,-14px) center} /* The Energy file alone carries the supplied NRG mark on its folder tab. */ :where([data-reference-site]) #home .collection-card.energy-file::before{display:none} :where([data-reference-site]) #home .collection-card .energy-file-head{position:absolute;z-index:2;left:-2px;top:-29px;display:flex;align-items:center;gap:5px;width:64%;height:29px;padding:2px 6px;background:#ffc72c;border:1.5px solid #171717;border-bottom:0;border-radius:5px 5px 0 0;color:#171717;font:700 10px 'ReferenceLekton',monospace;white-space:nowrap} :where([data-reference-site]) #home .collection-card .energy-file-head img{display:block;width:43px;height:22px;flex:none;padding:0;background:transparent;object-fit:contain} /* Larger, swipeable story files: the selected original photograph faces the viewer. */ :where([data-reference-site]) .collection-scroll-track{height:auto;margin-top:18px} :where([data-reference-site]) #home .collection-trail{position:relative;top:auto;height:min(760px,87svh);min-height:580px;touch-action:pan-y;perspective:2000px} :where([data-reference-site]) #home .collection-card,:where([data-reference-site]) #home .collection-card[data-slot]{left:31%;top:23%;width:min(430px,43vw,49svh);aspect-ratio:.68;transition:transform .42s cubic-bezier(.22,.7,.18,1),box-shadow .42s ease} :where([data-reference-site]) #home .collection-card img{height:73%;object-fit:contain} :where([data-reference-site]) #home .surfer-caption{padding:10px 15px} :where([data-reference-site]) #home .collection-card[aria-current="true"]{box-shadow:12px 17px 0 rgba(23,23,23,.15),24px 32px 40px rgba(23,23,23,.23)} :where([data-reference-site]) .surfer-hint{right:26px;bottom:22px} @media(max-width:780px){ :where([data-reference-site]) #home .collection-trail{height:88svh;min-height:560px} :where([data-reference-site]) #home .collection-card,:where([data-reference-site]) #home .collection-card[data-slot]{left:12%;top:24%;width:min(68vw,43svh,360px)} :where([data-reference-site]) #home .surfer-caption strong{font-size:17px} } @media(max-width:520px){ :where([data-reference-site]) #home .collection-trail{height:85svh;min-height:545px} :where([data-reference-site]) #home .collection-card,:where([data-reference-site]) #home .collection-card[data-slot]{left:10%;top:24%;width:min(68vw,41svh,320px)} :where([data-reference-site]) .surfer-title{top:5%;font-size:28px} :where([data-reference-site]) .surfer-hint{bottom:13px} } @media(prefers-reduced-motion:reduce){:where([data-reference-site]) #home .collection-card{transition:none!important}} /* One archive record with four original story photographs, browsable by touch. */ :where([data-reference-site]) #archiv .archive-story-card{grid-column:1/-1;min-height:0;background:#ffc72c;color:#171717;display:block;overflow:hidden} :where([data-reference-site]) #archiv .archive-story-card::after{display:none} :where([data-reference-site]) #archiv .archive-story-images{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;padding:20px;background:#fff} :where([data-reference-site]) #archiv .archive-story-images img{position:static;inset:auto;width:min(540px,82vw);height:390px;flex:none;object-fit:contain;opacity:1;background:#111;scroll-snap-align:center} :where([data-reference-site]) #archiv .archive-story-card .caption{margin:0;padding:20px 24px 24px} :where([data-reference-site]) #archiv .archive-story-card .caption small{color:#3173a7} :where([data-reference-site]) #archiv .archive-story-card .caption h2{font-size:clamp(27px,4vw,40px)} :where([data-reference-site]) #archiv .archive-story-card .caption p{max-width:620px} @media(max-width:650px){:where([data-reference-site]) #archiv .archive-story-images{gap:10px;padding:12px}:where([data-reference-site]) #archiv .archive-story-images img{width:84vw;height:310px}} /* Approved honeycomb view: shared cells connect the five pillars. */ :where([data-reference-site]) #philosophie .symbols-reference,:where([data-reference-site]) #philosophie .symbols-canvas{background:#fff} /* Personal signature replaces the former footer slogan on every route. */ :where([data-reference-site]) .unified-footer-legal{display:flex;align-items:flex-end;justify-content:space-between} :where([data-reference-site]) .footer-signature{display:block;width:82px;height:74px;object-fit:contain;flex:none;margin-left:auto} :where([data-reference-site]) #philosophie .design-slogan{font-weight:700} @media(max-width:650px){:where([data-reference-site]) .footer-signature{width:66px;height:60px}} :where([data-reference-site]) .order-preview{max-width:1250px;margin:auto;background:#ffc72c;padding-bottom:60px} :where([data-reference-site]) .order-notice{font-size:12px;line-height:1.5;margin:26px 0;color:#4a3b17} :where([data-reference-site]) .order-steps{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0} :where([data-reference-site]) .order-steps button,:where([data-reference-site]) .order-preview button,:where([data-reference-site]) .order-button{font:inherit;cursor:pointer;border:1px solid #171717;background:transparent;color:#171717;padding:12px 15px;text-decoration:none} :where([data-reference-site]) .order-steps button[aria-current="step"],:where([data-reference-site]) .order-preview .order-next,:where([data-reference-site]) .order-button{background:#171717;color:#ffc72c} :where([data-reference-site]) .order-preview button:disabled{opacity:.4;cursor:default} :where([data-reference-site]) .order-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:45px;align-items:start} :where([data-reference-site]) .order-preview h1{font-size:clamp(40px,7vw,84px);margin:20px 0 35px} :where([data-reference-site]) .order-preview h2{font-size:25px;margin:0 0 25px} :where([data-reference-site]) .order-item{display:grid;grid-template-columns:46% 1fr;gap:24px;padding:20px 0;border-top:1px solid #171717;border-bottom:1px solid #171717;margin-bottom:25px} :where([data-reference-site]) .order-photo{width:100%;height:260px;object-fit:contain} :where([data-reference-site]) .order-product-name{font-size:25px;margin:0 0 12px} :where([data-reference-site]) .order-preview label{display:flex;flex-direction:column;gap:8px;font-size:12px;margin:12px 0} :where([data-reference-site]) .order-preview input,:where([data-reference-site]) .order-preview select{width:100%;font:inherit;font-size:16px;min-height:44px;background:rgba(255,255,255,.45);border:1px solid #171717;padding:10px;color:#171717;border-radius:0} :where([data-reference-site]) .order-summary{border:1px solid #171717;padding:23px} :where([data-reference-site]) .order-summary dl{display:grid;grid-template-columns:1fr auto;gap:18px;font-size:14px;margin:0 0 28px} :where([data-reference-site]) .order-summary dd{margin:0;text-align:right} :where([data-reference-site]) .order-summary button{display:block;width:100%;margin-top:12px} :where([data-reference-site]) .order-fields{display:grid;grid-template-columns:1fr 1fr;gap:3px 20px}:where([data-reference-site]) .order-fields .wide{grid-column:1/-1} :where([data-reference-site]) .order-payment{margin:0;padding:18px;border:1px solid #171717} :where([data-reference-site]) .order-payment label{flex-direction:row;align-items:center;font-size:19px;padding:12px} :where([data-reference-site]) .order-payment input{width:20px;min-height:20px;accent-color:#171717} :where([data-reference-site]) .order-check{font-size:80px;margin-bottom:20px} :where([data-reference-site]) .order-main .order-button{display:inline-block;margin:20px 20px 20px 0} :where([data-reference-site]) .order-preview [hidden]{display:none!important} :where([data-reference-site]) .order-tracking-form{max-width:520px}:where([data-reference-site]) .order-tracking-status{margin-top:40px;max-width:760px} :where([data-reference-site]) .order-tracking-status ol{padding:0;list-style:none}:where([data-reference-site]) .order-tracking-status li{display:flex;gap:18px;justify-content:space-between;border-left:3px solid #171717;padding:18px 20px;margin:0 0 5px;background:rgba(255,255,255,.35)}:where([data-reference-site]) .order-tracking-status .pending{opacity:.45}:where([data-reference-site]) .order-tracking-status span{font-size:12px} :where([data-reference-site]) .preview-add{display:inline-block;border:1px solid #171717;padding:10px 14px;margin:15px 0;text-decoration:none;font-weight:700} @media(max-width:780px){:where([data-reference-site]) .order-layout{grid-template-columns:1fr;gap:30px}:where([data-reference-site]) .order-summary{max-width:none}:where([data-reference-site]) .order-steps button{font-size:12px;padding:10px}:where([data-reference-site]) .order-item{gap:15px}:where([data-reference-site]) .order-photo{height:220px}} @media(max-width:520px){:where([data-reference-site]) .order-item{grid-template-columns:1fr}:where([data-reference-site]) .order-photo{height:250px}:where([data-reference-site]) .order-fields{grid-template-columns:1fr}:where([data-reference-site]) .order-fields .wide{grid-column:auto}:where([data-reference-site]) .order-tracking-status li{flex-direction:column;gap:8px}} /* The order pages use the same line on solid yellow; edge cuts fall at the curve centres. */ :where([data-reference-site]).order-route .insulation-boundary{height:var(--order-pattern-height,132px);background-color:#ffc72c;background-image:url('insulation-pattern-yellow.svg');background-repeat:repeat-x;background-size:var(--order-pattern-width,56px) var(--order-pattern-height,132px);background-position:var(--order-pattern-offset,-14px) center} :where([data-reference-site]) .commerce-box,:where([data-reference-site]) .admin-body section{border:2px solid #171717;padding:24px;margin:24px 0;background:#ffc72c}:where([data-reference-site]) .commerce-box button,:where([data-reference-site]) .commerce-box select,:where([data-reference-site]) .commerce-box input,:where([data-reference-site]) .admin-body button,:where([data-reference-site]) .admin-body input,:where([data-reference-site]) .admin-body select,:where([data-reference-site]) .admin-body textarea{font:inherit;padding:10px;border:1px solid #171717;border-radius:0;background:white;color:#171717;max-width:100%}:where([data-reference-site]) .commerce-box button,:where([data-reference-site]) .admin-body button{cursor:pointer;font-weight:bold;background:#171717;color:#ffc72c}:where([data-reference-site]) .commerce-box button:disabled,:where([data-reference-site]) .admin-body button:disabled{opacity:.5;cursor:default}:where([data-reference-site]) .commerce-box label,:where([data-reference-site]) .admin-body label{display:block;margin:12px 0}:where([data-reference-site]) .commerce-box input:not([type=checkbox]),:where([data-reference-site]) .admin-body input:not([type=checkbox]),:where([data-reference-site]) .admin-body textarea{display:block;width:100%;box-sizing:border-box}:where([data-reference-site]) .commerce-box [hidden]{display:none!important}:where([data-reference-site]) .commerce-row{display:grid;grid-template-columns:80px 1fr auto;gap:16px;align-items:center;margin:16px 0}:where([data-reference-site]) .commerce-row img{width:80px;height:100px;object-fit:contain}:where([data-reference-site]) .commerce-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}:where([data-reference-site]) .commerce-wide{grid-column:1/-1}:where([data-reference-site]) .commerce-message{font-weight:bold;white-space:pre-wrap}:where([data-reference-site]) .commerce-tabs{display:flex;gap:12px;flex-wrap:wrap}:where([data-reference-site]) .commerce-buy{margin-top:24px}:where([data-reference-site]) .commerce-buy button{display:block;margin-top:12px}:where([data-reference-site]) .admin-body{font-family:ReferenceLekton,monospace;background:#fff;color:#171717;margin:0;padding:32px;max-width:1100px;margin:auto}:where([data-reference-site]) .admin-body header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}:where([data-reference-site]) .admin-body h1{font-size:30px}:where([data-reference-site]) .admin-body details{border-top:1px solid;padding:18px 0}:where([data-reference-site]) .admin-body summary{cursor:pointer;font-size:22px;font-weight:bold}:where([data-reference-site]) .admin-body table{width:100%;border-collapse:collapse}:where([data-reference-site]) .admin-body th,:where([data-reference-site]) .admin-body td{padding:8px;text-align:left}:where([data-reference-site]) .admin-body .variant input{min-width:0}:where([data-reference-site]) .admin-body .variant{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px}:where([data-reference-site]) .admin-body small{display:block}:where([data-reference-site]) .admin-body img{max-height:150px;max-width:200px;object-fit:contain}:where([data-reference-site]) .commerce-extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}:where([data-reference-site]) .commerce-extra img{width:100%;height:320px;object-fit:contain}:where([data-reference-site]) .commerce-extra article{border:2px solid;padding:20px;background:#ffc72c}:where([data-reference-site]) .commerce-box a,:where([data-reference-site]) .admin-body a{color:#1245df}:where([data-reference-site]) #wallet-pay{background:white;padding:12px;margin-top:20px} @media(max-width:600px){:where([data-reference-site]) .admin-body{padding:16px}:where([data-reference-site]) .commerce-fields{grid-template-columns:1fr}:where([data-reference-site]) .commerce-row{grid-template-columns:60px 1fr}:where([data-reference-site]) .commerce-row img{width:60px}:where([data-reference-site]) .commerce-row button{grid-column:2}:where([data-reference-site]) .commerce-box{padding:16px}:where([data-reference-site]) .admin-body .variant{grid-template-columns:1fr 1fr}:where([data-reference-site]) .admin-body h1{font-size:24px}} :where([data-reference-site]) #archiv .iam-folder{background:#ffc72c} :where([data-reference-site]) #archiv .iam-folder::before{content:'I AM. / PROJECT FILE';background:#ffc72c;color:#171717} :where([data-reference-site]) #archiv .iam-folder-mark{min-height:240px;align-self:center;background:#fff url('iam-logo-original.jpeg') center / 92% auto no-repeat;margin:22px} :where([data-reference-site]) #archiv .iam-file,:where([data-reference-site]) #archiv .living-file{background:#ffc72c;color:#171717;min-height:0;overflow:visible;border:2px solid #171717;padding:12px} :where([data-reference-site]) #archiv .iam-file::after,:where([data-reference-site]) #archiv .living-file::after{display:none} :where([data-reference-site]) #archiv .iam-file>img,:where([data-reference-site]) #archiv .living-file>img{position:static;inset:auto;display:block;width:100%;height:390px;object-fit:contain;opacity:1} :where([data-reference-site]) #archiv .iam-file .caption,:where([data-reference-site]) #archiv .living-file .caption{padding:16px 6px} :where([data-reference-site]) #archiv .iam-file .caption small,:where([data-reference-site]) #archiv .living-file .caption small{color:#171717} :where([data-reference-site]) #archiv .iam-file .caption h2,:where([data-reference-site]) #archiv .living-file .caption h2{font-size:clamp(24px,3vw,34px)} :where([data-reference-site]) #archiv .iam-file-head{position:absolute;z-index:3;left:-2px;top:-32px;width:140px;height:32px;border:2px solid #171717;border-bottom:0;border-radius:6px 6px 0 0;background:#fff url('iam-logo-original.jpeg') center / contain no-repeat} :where([data-reference-site]) #archiv .archive-grid{row-gap:50px} @media(max-width:650px){:where([data-reference-site]) #archiv .iam-folder-mark{min-height:150px;margin:18px}:where([data-reference-site]) #archiv .iam-file>img,:where([data-reference-site]) #archiv .living-file>img{height:340px}} /* One existing file tab per card, with its project mark inside. */ :where([data-reference-site]) #archiv .iam-file::before{content:""} :where([data-reference-site]) #archiv .iam-file-head{left:12px;top:-24px;width:116px;height:24px;border:0;border-radius:0;background:transparent url('iam-logo-clear.svg') center/contain no-repeat} :where([data-reference-site]) #archiv .iam-folder-mark{background-color:#ffc72c;background-image:url('iam-logo-clear.svg')} :where([data-reference-site]) #archiv .energy-original-file{padding:12px} :where([data-reference-site]) #archiv .energy-original-file::before{content:"ENERGY / NRG."} :where([data-reference-site]) #archiv .energy-original-file>img{height:390px;object-fit:contain} @media(max-width:650px){:where([data-reference-site]) #archiv .energy-original-file>img{height:340px}} :where([data-reference-site]) .no-face-original-mark{display:block;flex:0 1 230px;width:230px;height:76px;background:#fff url('no-face-logo-original.png') center / 100% auto no-repeat} :where([data-reference-site]) #philosophie .no-face-project-link{align-items:center} :where([data-reference-site]) .archive-line-context.no-face-line::before{content:'';display:block;flex-shrink:0;width:230px;height:76px;background:#fff url('no-face-logo-original.png') center / 100% auto no-repeat} @media(max-width:650px){:where([data-reference-site]) .no-face-original-mark{width:200px;height:66px}:where([data-reference-site]) .archive-line-context.no-face-line{flex-wrap:wrap}:where([data-reference-site]) .archive-line-context.no-face-line::before{width:200px;height:66px}} :where([data-reference-site]) #philosophie .energy-project-link,:where([data-reference-site]) #philosophie .iam-project-link{align-items:center;gap:18px} :where([data-reference-site]) .energy-project-mark{display:block;flex:0 1 150px;width:150px;height:76px;background:url('nrg-original-mark.png') center/contain no-repeat} :where([data-reference-site]) .iam-project-mark{display:block;flex:0 1 230px;width:230px;height:76px;background:url('iam-logo-clear.svg') center/contain no-repeat} @media(max-width:650px){:where([data-reference-site]) .energy-project-mark{width:120px;flex-basis:120px;height:66px}:where([data-reference-site]) .iam-project-mark{width:200px;height:66px}} @media (min-width:800px) and (pointer:fine) { body.reference-cursor-art, body.reference-cursor-art * { cursor:none !important; } }