/*
Theme Name: Cluparis
Description: Cluparis trimmer line brand homepage with labeled image slots.
Version: 1.0.0
Text Domain: cluparis
*/
:root{--orange:#ff710d;--ink:#242321;--gray:#d9d9d9}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;color:var(--ink);background:#fff;font-family:Arial,Helvetica,sans-serif}.site-shell{max-width:1440px;margin:auto}a{color:inherit}a:focus-visible{outline:3px solid var(--orange);outline-offset:6px}.skip-link{position:fixed;left:12px;top:-80px;z-index:10;background:white;padding:12px}.skip-link:focus{top:12px}.site-header{display:flex;align-items:center;justify-content:space-between;padding:30px 3%;gap:40px;background:#e1e4eb}.brand{font-family:Impact,'Arial Narrow',sans-serif;font-size:38px;letter-spacing:-1.4px;line-height:1;text-decoration:none;font-weight:900;white-space:nowrap}.brand sup{font-family:Arial,sans-serif;font-size:10px;vertical-align:top;letter-spacing:0}.brand img{display:block;width:180px;height:auto;max-height:60px;object-fit:contain}.site-header nav{display:flex;align-items:center;justify-content:space-between;gap:30px;width:70%;font-weight:800;font-size:12px;letter-spacing:.6px}.site-header nav a{text-decoration:none}.site-header nav a:hover{color:var(--orange)}.site-header nav span{cursor:default}.hero{background:#e1e4eb;padding-bottom:32px}.image-slot{position:relative;aspect-ratio:var(--ratio);min-width:0;overflow:hidden}.image-slot img{display:block;width:100%;height:100%;object-fit:contain}.placeholder{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:16px;text-align:center;color:#687078;background:repeating-linear-gradient(135deg,transparent,transparent 16px,#ffffff25 16px,#ffffff25 17px),#e9ebed;border:1px dashed #adb3b9}.placeholder strong{font-size:clamp(12px,1.3vw,18px);font-weight:500}.placeholder span{font-size:clamp(12px,1.3vw,18px);font-variant-numeric:tabular-nums}.placeholder small{font-size:clamp(10px,1vw,14px);overflow-wrap:anywhere}.placeholder .placeholder-mark{font-size:30px;color:var(--orange);font-weight:300}.hero .placeholder{border-width:0 0 1px;background-color:#e1e4eb}.hero h1{text-align:right;font-size:clamp(17px,2.3vw,31px);font-weight:500;letter-spacing:1px;padding:0 5%;margin:20px 0 0}.about{display:grid;grid-template-columns:23% 1fr;align-items:center;gap:24px;padding:55px 4%}.about-brand{text-align:center}.about-brand .brand{font-size:clamp(26px,4vw,56px)}.about-brand h2{font-size:24px;color:#929292;margin:14px 0}.about-copy{position:relative;padding-top:34px}.about-copy:before{content:'';position:absolute;top:0;right:0;width:68%;height:5px;background:linear-gradient(90deg,var(--orange) 55%,transparent)}.about-copy p{font-family:'Arial Narrow',Arial,sans-serif;font-size:clamp(15px,1.55vw,21px);line-height:1.5;margin:0;text-indent:1.25em}.lifestyle{display:grid;grid-template-columns:62% 38%;gap:0}.lifestyle .image-slot{height:100%;aspect-ratio:auto}.lifestyle .image-slot:first-child{aspect-ratio:1200/580}.lifestyle img{object-fit:cover}.lifestyle .image-slot:last-child img{object-fit:contain}.trimmer-section{padding:72px 5% 0}.lawn-banner{border-radius:40px;overflow:hidden;position:relative}.lawn-banner img{object-fit:cover}.lawn-banner h2{position:absolute;top:32%;left:0;width:100%;text-align:center;color:white;font-size:clamp(25px,4.5vw,60px);font-weight:900;letter-spacing:1px;margin:0;text-shadow:0 2px 8px #0005}.lawn-banner .placeholder{padding-bottom:12%;background-color:#aeb9a7}.lawn-banner .placeholder strong{margin-top:40px}.benefits-panel{position:relative;width:88%;margin:-9% auto 0;background:var(--gray);border-radius:40px;padding:26px 5% 25px}.benefits-panel h3{text-align:center;font-size:clamp(18px,2.5vw,34px);font-weight:500;margin:0 0 22px}.benefits-grid{display:grid;grid-template-columns:1fr 23% 1fr;align-items:center;gap:30px}.benefit-list{display:grid;gap:35px;font-size:clamp(12px,1.5vw,20px)}.benefit-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px}.icon{width:60px;height:60px;flex-shrink:0;color:var(--orange)}.benefit-list .icon{width:45px;height:45px}.benefits-grid .placeholder{padding:8px;gap:4px}.benefits-grid .placeholder strong{font-size:11px}.benefits-grid .placeholder small{font-size:9px}.heavy-duty{margin:42px 3% 0;padding:38px 3.5%;border-radius:50px;background:var(--gray);display:grid;grid-template-columns:1fr 1fr;gap:20px;overflow:hidden}.heavy-copy h2{font-size:clamp(26px,4.5vw,62px);line-height:1.16;letter-spacing:1px;font-weight:900;margin:0 0 25px}.heavy-copy .image-slot{max-width:88%}.weight-badge{display:inline-block;background:var(--orange);border-radius:30px;color:#fff;font-weight:800;font-size:24px;padding:6px 18px;margin-top:18px}.line-detail{align-self:center}.comparison{margin:40px 3% 0;display:grid;grid-template-columns:.9fr 1fr 1.08fr;gap:18px}.comparison-card{border:3px solid var(--orange);padding:22px 18px;color:var(--orange)}.comparison-card h3{font-size:clamp(20px,2.9vw,39px);line-height:1.3;letter-spacing:1px;margin:0 0 40px;font-weight:900}.comparison-card ul{padding:0;margin:0;list-style:none;display:grid;gap:25px}.comparison-card li{position:relative;padding-left:25px;font-size:clamp(15px,2vw,27px);line-height:1.25}.comparison-card li:before{content:'✓';position:absolute;left:0;color:#00ba3d;font-size:1.4em;font-weight:700;top:-.15em}.comparison-card.other{color:#929292;border-color:#aaa}.comparison-card.other li:before{content:'×';color:#eb1642}.values{position:relative;display:flex;justify-content:space-around;text-align:center;padding:55px 0 45px;margin:75px 3% 0;color:var(--orange)}.values:before,.values:after{content:'';position:absolute;height:5px;width:50%;background:linear-gradient(90deg,#39312e 60%,transparent)}.values:before{right:0;top:0}.values:after{bottom:0;left:0;transform:rotate(180deg)}.values>div{display:grid;justify-items:center;gap:20px;font-size:20px;letter-spacing:.5px}.values .icon{width:95px;height:95px}.safety{padding:70px 3% 100px}.safety>h2{text-align:center;font-size:clamp(29px,5vw,68px);line-height:1.18;font-weight:900;letter-spacing:.8px;margin:0 0 75px}.safety-card{display:flex;align-items:center;gap:45px;padding:24px 4%;background:var(--gray);border-radius:50px;margin-bottom:30px;min-height:175px}.safety-card>.icon{width:120px;height:120px}.safety-card>div{flex:1;text-align:center}.safety-card h3{color:var(--orange);font-size:clamp(21px,2.8vw,38px);font-weight:500;margin:0 0 14px}.safety-card p{font-size:clamp(16px,2.4vw,31px);line-height:1.3;margin:0}.safety-reverse{flex-direction:row-reverse}.safety-reverse p{text-align:left}.closing-image img{object-fit:cover}.content-page{min-height:70vh;padding:60px 5%}
@media(min-width:1441px){.site-header nav{font-size:14px}}
@media(max-width:760px){.site-header{padding:22px 4%;gap:20px;flex-wrap:wrap}.site-header .brand{font-size:30px}.site-header nav{width:100%;gap:12px;font-size:9px;letter-spacing:0}.hero{padding-bottom:22px}.hero h1{letter-spacing:0}.about{padding:36px 5%;grid-template-columns:1fr;gap:15px}.about-brand{display:flex;align-items:center;justify-content:center;gap:18px}.about-brand h2{font-size:16px}.about-copy{padding-top:24px}.about-copy p{line-height:1.6}.lifestyle{grid-template-columns:62% 38%}.lifestyle .placeholder{gap:5px;padding:8px}.lifestyle .placeholder-mark{display:none}.trimmer-section{padding-top:35px}.lawn-banner{border-radius:23px}.lawn-banner .placeholder strong{margin-top:16px}.lawn-banner h2{top:14%;font-size:clamp(23px,5vw,38px)}.lawn-banner .placeholder{padding-top:30px;padding-bottom:0}.lawn-banner .placeholder-mark{display:none}.benefits-panel{width:92%;border-radius:23px;padding:18px 4%;margin-top:-3%}.benefits-panel h3{margin-bottom:15px}.benefits-grid{gap:10px;grid-template-columns:1fr 25% 1fr}.benefit-list{gap:15px;font-size:11px}.benefit-list .icon{width:27px;height:27px}.benefit-list>div{gap:4px}.benefits-grid .placeholder-mark,.benefits-grid .placeholder strong{display:none}.benefits-grid .placeholder span{font-size:10px}.heavy-duty{margin-top:28px;border-radius:28px;padding:24px 4%;gap:12px}.heavy-copy h2{font-size:clamp(20px,4.6vw,34px);margin-bottom:15px}.weight-badge{font-size:14px;margin-top:12px;padding:5px 12px}.heavy-duty .placeholder{padding:8px;gap:4px}.heavy-duty .placeholder-mark{display:none}.comparison{gap:10px;margin-top:25px;grid-template-columns:1fr}.comparison-card{border-width:2px;padding:20px}.comparison-card h3{font-size:25px;margin-bottom:22px}.comparison-card h3 br{display:none}.comparison-card h3 br:after{content:' '}.comparison-card ul{gap:15px}.comparison-card li{font-size:17px}.values{margin-top:35px;padding:32px 0}.values .icon{width:58px;height:58px}.values>div{font-size:13px;gap:12px}.values:before,.values:after{height:3px}.safety{padding:45px 3% 50px}.safety>h2{font-size:clamp(26px,5.7vw,40px);margin-bottom:35px}.safety-card{gap:18px;padding:20px 5%;border-radius:26px;min-height:130px;margin-bottom:20px}.safety-card>.icon{width:58px;height:58px}.safety-card h3{font-size:21px;margin-bottom:10px}.safety-card p{font-size:15px}.desktop-break{display:none}.closing-image .placeholder{min-height:180px}}
.logo-note{display:block;font-family:Arial,sans-serif;letter-spacing:0;font-size:10px;font-weight:400;color:#687078;margin-top:8px}.about-brand .brand img{width:100%;max-width:240px;height:auto}.lawn-banner .placeholder{justify-content:flex-end;padding:0 12px 18%}.lawn-banner .placeholder-mark{display:none}.heavy-copy h2{font-size:clamp(26px,3.8vw,52px)}
@media(max-width:760px){.heavy-copy h2{font-size:clamp(20px,4.6vw,34px)}.lawn-banner .placeholder{padding:0 12px 7%;gap:3px}.lawn-banner .placeholder strong{font-size:11px;margin-top:0}.lawn-banner .placeholder span{font-size:11px}.lawn-banner .placeholder small{font-size:9px}.about-brand .brand img{max-width:140px}}
.lawn-banner .placeholder{align-items:flex-end;justify-content:flex-start;padding:18px 22px;gap:5px}.lawn-banner .placeholder strong{margin-top:0}.lawn-banner .placeholder strong,.lawn-banner .placeholder span,.lawn-banner .placeholder small{font-size:13px}
@media(max-width:760px){.lawn-banner .placeholder{align-items:center;justify-content:flex-end;padding:0 10px 16px;gap:2px}.lawn-banner .placeholder strong,.lawn-banner .placeholder span,.lawn-banner .placeholder small{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}