:root { --ink:#101417; --orange:#ff5b22; --cream:#f6f2e9; --paper:#fffdf8; --blue:#375eae; --line:rgba(16,20,23,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.site-header { height:76px; padding:0 clamp(22px,5vw,76px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:-.07em; }
.brand-mark { width:29px; height:29px; display:grid; place-items:center; color:white; background:var(--orange); font-family:Georgia,serif; font-size:20px; font-style:italic; border-radius:3px; }
nav { display:flex; gap:30px; font-size:13px; font-weight:700; } nav a:hover, footer a:hover { color:var(--orange); }
.header-contact { font-size:13px; font-weight:800; } .header-contact span { color:var(--orange); font-size:18px; margin-left:5px; }
.hero { min-height:650px; display:grid; grid-template-columns:1.08fr .92fr; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-copy { padding:clamp(70px,10vw,145px) clamp(22px,6vw,100px) 70px; }
.eyebrow,.section-kicker { font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.09em; font-weight:600; text-transform:uppercase; }
.eyebrow span { display:inline-block; height:8px; width:8px; background:var(--orange); border-radius:50%; margin-right:7px; }
h1,h2,h3,p { margin-top:0; } h1,h2 { letter-spacing:-.065em; line-height:.98; font-weight:800; } h1 { font-size:clamp(52px,6.6vw,104px); margin:25px 0 28px; } h2 { font-size:clamp(38px,4.5vw,66px); margin-bottom:25px; } h1 em,h2 em { font-family:Georgia,serif; font-weight:400; }
.hero-text { max-width:465px; color:#596064; font-size:17px; }
.hero-actions { display:flex; align-items:center; gap:24px; margin-top:36px; }.button { display:inline-flex; align-items:center; gap:15px; min-height:49px; padding:0 20px; font-size:13px; font-weight:800; }.button-primary { background:var(--orange); color:white; }.button-primary:hover { background:#e94b16; }.button-primary span { font-size:18px; }.button-quiet { border-bottom:1px solid var(--ink); padding:0 0 3px; min-height:0; }
.hero-art { position:relative; min-height:560px; overflow:hidden; background:var(--ink); }.grid-lines { position:absolute; inset:0; opacity:.25; background:linear-gradient(90deg,transparent 49.8%,#fff 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,#fff 50%,transparent 50.2%); background-size:78px 78px; }.sealant-tube { position:absolute; height:420px; width:190px; top:103px; left:36%; transform:rotate(27deg); filter:drop-shadow(28px 30px 18px rgba(0,0,0,.34)); }.tube-cap { height:66px; width:77px; margin:auto; background:repeating-linear-gradient(90deg,#cdccc7 0 5px,#eee 5px 9px); clip-path:polygon(21% 0,79% 0,100% 100%,0 100%); }.tube-label { height:188px; display:flex; flex-direction:column; justify-content:center; padding-left:25px; color:#111; background:#f5f1e7; border-top:9px solid var(--orange); }.tube-label b { font-size:31px; letter-spacing:-.1em; }.tube-label span { font-family:"DM Mono",monospace; font-size:8px; }.tube-body { height:170px; background:var(--orange); clip-path:polygon(0 0,100% 0,80% 100%,20% 100%); }.hero-tag { position:absolute; color:#fff; font-family:"DM Mono",monospace; line-height:1.25; letter-spacing:.03em; }.tag-one { top:75px; right:8%; font-size:11px; }.tag-two { left:11%; bottom:88px; font-size:48px; font-weight:800; letter-spacing:-.1em; }.tag-two small { display:block; font-size:10px; letter-spacing:.05em; font-weight:400; }.art-caption { position:absolute; right:-32px; bottom:31px; color:rgba(255,255,255,.65); font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.2em; transform:rotate(-90deg); }
.intro { display:grid; grid-template-columns:1fr 2fr; gap:35px; padding:clamp(65px,10vw,150px) clamp(22px,10vw,165px); }.intro>div p { max-width:570px; color:#596064; font-size:17px; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); background:var(--orange); color:#fff; padding:0 clamp(22px,6vw,100px); }.stats div { padding:32px 20px 37px; border-left:1px solid rgba(255,255,255,.35); }.stats div:last-child { border-right:1px solid rgba(255,255,255,.35); }.stats strong { font-size:46px; line-height:1; letter-spacing:-.08em; }.stats strong span { font-size:21px; }.stats p { margin:7px 0 0; font-family:"DM Mono",monospace; font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.products { padding:clamp(75px,9vw,130px) clamp(22px,6vw,100px); }.products-heading { display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:22px; align-items:end; }.products-heading h2 { margin:0; }.products-heading>p:last-child { margin:0 0 7px; font-size:14px; color:#596064; }.product-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:13px; margin-top:54px; }.product-card { min-height:280px; padding:20px; position:relative; display:flex; flex-direction:column; overflow:hidden; }.product-card:nth-child(1),.product-card:nth-child(2) { grid-column:span 3; }.product-card:nth-child(n+3) { grid-column:span 2; }.card-dark { color:white; background:var(--ink); }.card-orange { background:var(--orange); color:white; }.card-cream { background:#e7e0d1; }.card-blue { background:var(--blue); color:white; }.card-light { background:#dce3d8; }.card-number { font-family:"DM Mono",monospace; font-size:11px; }.product-card h3 { font-size:25px; letter-spacing:-.06em; margin:18px 0 7px; }.product-card p { font-size:13px; max-width:260px; margin:0; opacity:.8; }.card-arrow { position:absolute; right:18px; bottom:13px; font-size:25px; }.product-icon { margin-top:auto; height:78px; position:relative; opacity:.9; }.foam-icon i { position:absolute; width:52px; height:52px; border:1px solid currentColor; border-radius:50%; bottom:0; }.foam-icon i:nth-child(1){left:0}.foam-icon i:nth-child(2){left:35px;bottom:19px}.foam-icon i:nth-child(3){left:70px}.silicone-icon i { display:block; width:190px; height:38px; margin:24px auto 0; background:rgba(255,255,255,.85); border-radius:8px 8px 4px 4px; transform:rotate(-8deg); }.silicone-icon i:after { content:""; display:block; width:40px; height:48px; margin:auto; transform:translateY(-45px); background:#28251f; clip-path:polygon(35% 0,65% 0,100% 100%,0 100%); }.adhesive-icon i,.sealant-icon i { display:block; position:absolute; bottom:0; width:44px; height:77px; border:2px solid currentColor; }.adhesive-icon i:nth-child(1){left:27%;transform:rotate(21deg)}.adhesive-icon i:nth-child(2){left:49%;transform:rotate(-16deg);height:59px}.sealant-icon i:nth-child(1){left:27%;width:106px;height:38px;transform:rotate(-14deg);bottom:15px}.sealant-icon i:nth-child(2){left:53%;height:68px;transform:rotate(20deg)}.other-icon { display:flex; gap:12px; align-items:end; }.other-icon i { display:block; width:38px; height:38px; border-radius:50%; background:var(--orange); }.other-icon i:nth-child(2){height:58px;border-radius:6px}.other-icon i:nth-child(3){height:74px;width:20px;background:var(--blue); }
.strength { display:grid; grid-template-columns:1fr 1fr; background:var(--ink); color:white; }.strength-visual { min-height:640px; position:relative; background:var(--blue); overflow:hidden; padding:45px; }.strength-visual p { font-size:clamp(30px,3.5vw,52px); line-height:.92; font-weight:800; letter-spacing:-.08em; position:relative; z-index:2; }.strength-visual p span { font-family:Georgia,serif; font-weight:400; }.connection { position:absolute; border:1px solid rgba(255,255,255,.8); border-radius:50%; }.connection-a { height:310px;width:310px;bottom:-120px;left:-70px; }.connection-b { height:210px;width:210px;top:150px;right:-50px; }.connection-c { height:92px;width:92px;top:330px;left:47%;background:var(--orange);border:0; }.strength-copy { padding:clamp(70px,10vw,130px) clamp(28px,8vw,110px); }.strength-copy h2 { margin-top:26px; }.feature-list { margin-top:48px; }.feature-list>div { display:grid; grid-template-columns:40px 1fr; border-top:1px solid rgba(255,255,255,.24); padding:17px 0; }.feature-list span { font-family:"DM Mono",monospace; font-size:10px; color:var(--orange); }.feature-list p { margin:0; color:#abb1b5; font-size:13px; }.feature-list b { display:block; color:#fff; font-size:15px; margin-bottom:5px; }
.cta { text-align:center; padding:clamp(90px,12vw,175px) 22px; background:var(--cream); }.cta h2 { margin:25px 0; }.cta>p:not(.eyebrow) { max-width:500px; margin:0 auto 32px; color:#596064; }
footer { display:grid; grid-template-columns:1.4fr 1.25fr 1fr 1.2fr; gap:25px; padding:38px clamp(22px,6vw,100px); border-top:1px solid var(--line); font-size:12px; } footer p { margin:0; color:#596064; }.copyright { text-align:right; align-self:end; }
@media (max-width:760px) { .site-header { height:63px; }.site-header nav { display:none; }.header-contact { font-size:12px; }.hero,.strength { grid-template-columns:1fr; }.hero-copy { padding-top:78px; }.hero-art { min-height:430px; }.sealant-tube { height:330px; transform:rotate(27deg) scale(.79); top:23px; left:28%; }.tag-one { top:45px; }.intro,.products-heading { grid-template-columns:1fr; }.intro { gap:18px; }.stats { grid-template-columns:repeat(2,1fr); }.stats div:nth-child(3) { border-left:0; }.stats strong { font-size:38px; }.product-grid { grid-template-columns:1fr; }.product-card:nth-child(n) { grid-column:span 1; min-height:235px; }.strength-visual { min-height:390px; }.strength-copy { padding:70px 28px; } footer { grid-template-columns:1fr 1fr; }.copyright { text-align:left; grid-column:span 2; } }