:root { --ink:#182023; --muted:#626c6f; --paper:#f2f1ed; --line:#d4d6d0; --yellow:#ffc400; --orange:#fa6429; --dark:#172022; --mono:"DM Mono",monospace; --sans:"Manrope",Arial,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); } a { color:inherit; text-decoration:none; } .topline { background:var(--dark); color:#c8cfca; display:flex; justify-content:space-between; padding:9px 4.5%; font:10px var(--mono); letter-spacing:.1em; }.site-header { height:86px; padding:0 4.5%; display:flex; align-items:center; gap:40px; background:#faf9f5; border-bottom:1px solid var(--line); }.brand { display:flex; align-items:center; font-size:12px; font-weight:800; letter-spacing:-.04em; line-height:1.03; min-width:178px; }.brand-mark { width:31px; height:31px; background:var(--yellow); display:inline-block; margin-right:11px; position:relative; }.brand-mark:after { content:""; position:absolute; inset:7px; border:2px solid var(--dark); border-left-width:6px; }.site-header nav { display:flex; gap:24px; font-size:13px; font-weight:700; flex:1; }.site-header nav a:hover, .text-link:hover { color:var(--orange); }.header-phone { font:12px var(--mono); white-space:nowrap; }.btn { display:inline-flex; align-items:center; justify-content:center; gap:20px; border:0; background:var(--yellow); color:var(--dark); padding:17px 21px; font:700 12px var(--sans); cursor:pointer; transition:transform .2s,background .2s; }.btn:hover { background:#ffd83d; transform:translateY(-2px); }.btn span { font-size:18px; }.btn-small { padding:12px 15px; white-space:nowrap; }.hero { height:min(720px,calc(100vh - 116px)); min-height:610px; position:relative; color:#fff; overflow:hidden; }.hero-image,.hero-overlay { position:absolute; inset:0; width:100%; height:100%; }.hero-image { object-fit:cover; }.hero-overlay { background:linear-gradient(90deg,rgba(10,15,15,.88) 0%,rgba(10,15,15,.6) 38%,rgba(10,15,15,.08) 78%),linear-gradient(0deg,rgba(10,15,15,.55),transparent 40%); }.hero-content { position:relative; z-index:1; width:min(650px,90%); padding:120px 0 0 10.5%; }.eyebrow { font:10px var(--mono); color:var(--yellow); letter-spacing:.13em; margin:0 0 22px; }.eyebrow.dark { color:var(--orange); }.hero h1 { font-size:clamp(50px,6.3vw,98px); line-height:.97; letter-spacing:-.075em; margin:0; }.hero h1 em { font-family:Georgia,serif; font-weight:400; }.hero-copy { max-width:470px; color:#d9dedc; font-size:16px; line-height:1.65; margin:30px 0; }.hero-actions { display:flex; align-items:center; gap:30px; }.text-link { font-size:13px; font-weight:700; }.text-link span { color:var(--yellow); margin-left:8px; }.hero-note { position:absolute; z-index:1; bottom:28px; right:4.5%; font:10px var(--mono); letter-spacing:.08em; }.pulse { display:inline-block; width:8px;height:8px;border-radius:50%;background:var(--yellow);margin-right:7px; }.section { padding:120px 8.5%; }.intro { display:grid; grid-template-columns:1.1fr .9fr; gap:10%; background:#faf9f5; }.intro h2,.section-heading h2,.process h2,.faq h2,.selector h2 { font-size:clamp(35px,4vw,61px); line-height:1.02; letter-spacing:-.065em; margin:0; }.lead { color:#4b5658; font-size:18px; line-height:1.65; margin:34px 0 0; }.protection { background:var(--paper); }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:55px; }.section-heading.wide > p { width:32%; color:var(--muted); font-size:15px; line-height:1.65; }.protection-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); }.protection-grid article { padding:28px 22px 15px 0; border-right:1px solid var(--line); min-height:205px; }.protection-grid article:not(:first-child) { padding-left:22px; }.protection-grid article:last-child { border:0; }.num { font:11px var(--mono); color:var(--orange); }.protection-grid h3,.product h3 { margin:35px 0 10px; font-size:19px; letter-spacing:-.04em; }.protection-grid p,.product p { margin:0; color:var(--muted); line-height:1.55; font-size:13px; }.catalog { background:#faf9f5; }.product-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); }.product { min-height:275px; padding:30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; }.product:nth-child(3n) { border-right:0; }.product:nth-last-child(-n+3) { border-bottom:0; }.product-icon { font-size:38px; color:var(--orange); font-family:Georgia,serif; height:48px; }.product h3 { margin:28px 0 9px; }.product a { margin-top:auto; color:var(--orange); font-size:12px; font-weight:800; }.product a span { margin-left:8px; }.product-dark { background:var(--dark); color:white; }.product-dark p { color:#d1d7d4; }.product-dark .product-icon,.product-dark a { color:var(--yellow); }.selector { padding:0; display:grid; grid-template-columns:1fr 1fr; background:var(--dark); color:#fff; }.selector-copy { padding:105px 17%; }.selector-copy > p:not(.eyebrow) { color:#cad1ce; line-height:1.65; font-size:16px; }.selector-steps { border-top:1px solid #4a5655; margin-top:40px; padding-top:18px; display:grid; gap:11px; color:var(--yellow); font:11px var(--mono); }.selector-steps b { color:#edf0ee; font:600 12px var(--sans); margin-left:12px; }.quote-form { padding:72px 12%; background:#e6e5df; color:var(--dark); display:grid; gap:16px; }.quote-form label { display:grid; gap:8px; font-size:11px; font-weight:800; }.quote-form input,.quote-form select,.quote-form textarea { width:100%; border:1px solid #c5c8c2; border-radius:0; background:#f8f7f2; padding:13px; font:13px var(--sans); color:var(--dark); }.quote-form textarea { resize:vertical; }.quote-form .btn { margin-top:7px; align-self:start; }.form-note { margin:0; color:var(--muted); font-size:11px; }.process { background:var(--paper); }.process ol { list-style:none; padding:0; margin:60px 0 0; border-top:1px solid var(--ink); }.process li { display:grid; grid-template-columns:13% 1fr; padding:27px 0; border-bottom:1px solid var(--line); }.process li>span { font:12px var(--mono); color:var(--orange); }.process h3 { font-size:19px; margin:0 0 7px; }.process p { margin:0; color:var(--muted); font-size:14px; }.faq { background:#faf9f5; display:grid; grid-template-columns:.8fr 1.2fr; gap:12%; }.faq-list { border-top:1px solid var(--ink); }.faq details { border-bottom:1px solid var(--line); padding:22px 0; }.faq summary { list-style:none; display:flex; justify-content:space-between; cursor:pointer; font-size:16px; font-weight:800; }.faq summary::-webkit-details-marker { display:none; }.faq summary span { color:var(--orange); font-size:22px; }.faq details[open] summary span { transform:rotate(45deg); }.faq details p { color:var(--muted); font-size:14px; line-height:1.6; max-width:600px; }.contact { display:flex; align-items:center; justify-content:space-between; gap:30px; background:var(--orange); padding:68px 8.5%; color:#fff; }.contact h2 { max-width:750px; font-size:clamp(32px,4vw,60px); letter-spacing:-.065em; line-height:1; margin:0; }.contact .eyebrow { color:#fff3d5; }.btn-light { background:#fff; }.btn-light:hover { background:#fff3d5; } footer { padding:50px 4.5%; background:var(--dark); color:#eff2ee; display:grid; grid-template-columns:1.3fr 1fr 1fr .7fr; gap:35px; align-items:start; font-size:12px; } .footer-brand .brand-mark:after { border-color:#172022; }.footer-contact { display:grid; gap:7px; font:12px var(--mono); } footer address { color:#c1cbc7; font-style:normal; line-height:1.55; } footer p { color:#9caaa4; margin:0; font:10px var(--mono); }
@media (max-width:900px) { .site-header { gap:15px; }.site-header nav { display:none; }.header-phone { margin-left:auto; }.intro,.faq,.selector { grid-template-columns:1fr; }.section { padding:80px 6%; }.selector-copy { padding:80px 10%; }.quote-form { padding:55px 10%; }.protection-grid { grid-template-columns:repeat(2,1fr); }.protection-grid article:nth-child(2) { border-right:0; }.protection-grid article:nth-child(3) { border-top:1px solid var(--line); padding-left:0; }.product-grid { grid-template-columns:repeat(2,1fr); }.product:nth-child(3n) { border-right:1px solid var(--line); }.product:nth-child(2n) { border-right:0; }.product:nth-last-child(-n+3) { border-bottom:1px solid var(--line); }.product:nth-last-child(-n+2) { border-bottom:0; } footer { grid-template-columns:1fr 1fr; } }
@media (max-width:590px) { .topline { padding:8px 6%; font-size:8px; }.site-header { height:68px; padding:0 6%; }.brand { font-size:10px; min-width:auto; }.brand-mark { width:25px;height:25px;margin-right:8px; }.brand-mark:after { inset:5px;border-left-width:5px; }.header-phone { display:none; }.btn-small { margin-left:auto; padding:10px 12px; font-size:10px; }.hero { min-height:620px; }.hero-content { padding:135px 0 0 7%; }.hero h1 { font-size:52px; }.hero-copy { font-size:14px; width:90%; }.hero-actions { flex-direction:column; align-items:start; gap:22px; }.hero-note { right:auto; left:7%; font-size:9px; }.intro { gap:12px; }.lead { margin-top:0; font-size:16px; }.section-heading { display:block; }.section-heading.wide > p { width:auto; margin-top:22px; }.protection-grid,.product-grid { grid-template-columns:1fr; }.protection-grid article,.protection-grid article:not(:first-child),.protection-grid article:nth-child(3) { padding:22px 0; border-right:0; border-bottom:1px solid var(--line); min-height:auto; }.protection-grid article:last-child { border-bottom:0; }.protection-grid h3 { margin:20px 0 8px; }.product,.product:nth-child(3n),.product:nth-child(2n) { border-right:0; border-bottom:1px solid var(--line); }.product:last-child { border-bottom:0; }.process li { grid-template-columns:58px 1fr; }.faq { gap:45px; }.contact { padding:52px 6%; align-items:start; flex-direction:column; }.contact h2 { font-size:39px; } footer { grid-template-columns:1fr; padding:42px 6%; gap:25px; } }
.guide{display:grid;grid-template-columns:.9fr 1.1fr;gap:12%;background:var(--paper);padding-top:94px;padding-bottom:94px}.guide h2,.industries h2{font-size:clamp(34px,3.8vw,58px);line-height:1.04;letter-spacing:-.06em;margin:0}.guide-copy{columns:2;column-gap:40px;color:#485255;font-size:15px;line-height:1.75}.guide-copy p{margin:0 0 20px;break-inside:avoid}.choice{background:#172022;color:#fff}.choice .section-heading{align-items:start}.choice .section-heading.wide>p{color:#c1cac5}.choice-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #52605d}.choice-grid article{padding:26px 20px 10px 0;border-right:1px solid #52605d;min-height:280px}.choice-grid article:not(:first-child){padding-left:20px}.choice-grid article:last-child{border-right:0}.choice-grid span{color:var(--yellow);font:11px var(--mono)}.choice-grid h3,.materials h3{font-size:18px;letter-spacing:-.04em;margin:33px 0 12px}.choice-grid p,.materials p{color:#c5ceca;font-size:14px;line-height:1.65;margin:0}.industries{background:var(--orange);color:#fff;display:grid;grid-template-columns:.9fr 1.1fr;gap:12%}.industries .eyebrow{color:#fff3d5}.industries-copy{font-size:15px;line-height:1.72}.industries-copy p{margin:0 0 20px}.industries-copy strong{color:#fff9e9}.industries .text-link{color:#fff;display:inline-block;margin-top:8px}.industries .text-link span{color:#fff4c9}.materials{background:#e6e5df}.materials-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}.materials-grid>div{padding:28px 23px 0 0;border-right:1px solid #bfc2ba;min-height:220px}.materials-grid>div:not(:first-child){padding-left:23px}.materials-grid>div:last-child{border-right:0}.materials h3{margin-top:0}.materials p{color:#536062}
@media (max-width:900px){.guide,.industries{grid-template-columns:1fr}.guide-copy{columns:1}.choice-grid{grid-template-columns:repeat(2,1fr)}.choice-grid article:nth-child(2){border-right:0}.choice-grid article:nth-child(3){border-top:1px solid #52605d;padding-left:0}}
@media (max-width:590px){.choice-grid,.materials-grid{grid-template-columns:1fr}.choice-grid article,.choice-grid article:not(:first-child),.choice-grid article:nth-child(3){padding:22px 0;border-right:0;border-bottom:1px solid #52605d;min-height:auto}.choice-grid article:last-child{border-bottom:0}.materials-grid>div,.materials-grid>div:not(:first-child){padding:22px 0;border-right:0;border-bottom:1px solid #bfc2ba;min-height:auto}.materials-grid>div:last-child{border-bottom:0}.industries{gap:30px}}
