.fence358 { --f358-green: #264b37; --f358-line: #d9e0da; background: #fff; }
.fence358 p { line-height: 1.65; }
.fence358 h1 { font-size: clamp(1.9rem,3.4vw,2.7rem); line-height: 1.12; }
.fence358 h2 { font-size: clamp(1.45rem,2.4vw,1.95rem); line-height: 1.2; }
.fence358 h3 { font-size: 1rem; line-height: 1.3; letter-spacing: -.015em; }
.fence358 .eyebrow { color: var(--f358-green); font-size: .78rem; }
.f358-intro { background: #f3f6f2; padding: 20px 0 30px; }
.f358-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .8rem; color: #5b6860; margin-bottom: 22px; }
.f358-crumbs a { text-underline-offset: 3px; }
.f358-intro-grid { display: grid; grid-template-columns: minmax(280px,.85fr) minmax(0,1.15fr); gap: 54px; align-items: center; }
.f358-gallery { max-width: 400px; width: 100%; margin-inline: auto; }
.f358-primary { margin: 0; padding: 12px; border: 1px solid var(--f358-line); background: white; }
.f358-primary > img { width: 100%; height: 300px; object-fit: contain; }
.f358-primary figcaption { font-size: .8rem; text-align: center; padding-top: 9px; color: #5b6860; }
.f358-thumbs { display: flex; gap: 9px; margin-top: 9px; }
.f358-thumbs button { width: 67px; height: 55px; padding: 3px; background: white; border: 1px solid var(--f358-line); cursor: pointer; }
.f358-thumbs button[aria-pressed=true] { border: 2px solid var(--f358-green); }
.f358-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.f358-summary > p:not(.eyebrow) { color: #52615a; }
.f358-summary .f358-lead { font-size: 1.08rem; margin-top: 16px; color: #263b30; }
.f358-keyfacts { display: grid; grid-template-columns: 1fr .8fr 1.3fr; border-block: 1px solid #cbd6cd; padding-block: 13px; gap: 16px; margin: 20px 0; }
.f358-keyfacts dt { font-size: .8rem; color: #5b6860; }
.f358-keyfacts dd { font-size: .9rem; font-weight: 750; margin: 4px 0 0; }
.f358-inline-link { font-size: .875rem; font-weight: 700; text-underline-offset: 4px; align-self: center; }
.fence358 .btn-dark { background: var(--f358-green); border-color: var(--f358-green); }
.f358-section-nav { border-bottom: 1px solid var(--f358-line); background: white; }
.f358-section-nav .wrap { display: flex; flex-wrap: wrap; gap: 8px 26px; padding-block: 13px; }
.f358-section-nav a { font-size: .875rem; text-decoration: none; padding-block: 5px; font-weight: 650; }
.f358-section-nav a:hover { color: var(--f358-green); text-decoration: underline; }
.f358-section { padding-block: 46px; scroll-margin-top: 80px; }
.f358-heading { max-width: 760px; margin-bottom: 26px; }
.f358-heading > p:last-child:not(.eyebrow) { color: #52615a; margin: 14px 0 0; }
.f358-heading .eyebrow { margin-bottom: 10px; }
.f358-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; color: #52615a; }
.f358-benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; border-top: 1px solid var(--f358-line); padding-top: 22px; margin-top: 12px; }
.f358-benefits span { font-size: .8rem; color: #697d6e; }
.f358-benefits h3 { margin: 9px 0; }
.f358-benefits p { font-size: .9rem; color: #52615a; margin-bottom: 0; }
.f358-tinted { background: #f3f6f2; }
.f358-spec-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 34px; align-items: start; }
.f358-diagram { margin: 0; padding: 22px; background: white; border: 1px solid var(--f358-line); }
.f358-diagram img { width: 100%; max-height: 380px; object-fit: contain; }
.f358-diagram figcaption { font-size: .8rem; color: #52615a; margin-top: 12px; text-align: center; }
.f358-spec-table { min-width: 0; font-size: .875rem; }
.f358-spec-table caption { text-align: left; font-size: .9rem; font-weight: 700; padding-bottom: 12px; }
.f358-spec-table th { text-transform: none; letter-spacing: 0; font-size: .875rem; }
.f358-spec-table tbody th { width: 31%; background: #fafcf9; }
.f358-small { font-size: .8rem; color: #52615a; margin-top: 12px; }
.f358-components { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.f358-components figure { margin: 0 0 15px; border: 1px solid var(--f358-line); background: #f8faf7; }
.f358-components img { width: 100%; height: 180px; object-fit: contain; }
.f358-components h3 { margin-bottom: 8px; }
.f358-components p { font-size: .9rem; color: #52615a; }
.f358-mounting { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 25px; margin-top: 10px; border-top: 1px solid var(--f358-line); }
.f358-mounting article { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: center; }
.f358-mounting img { width: 140px; height: 130px; object-fit: contain; }
.f358-mounting p { font-size: .9rem; color: #52615a; margin: 8px 0 0; }
.f358-dark { background: #153326; color: #fff; }
.f358-dark .eyebrow { color: #c7d9c7; }
.f358-finish-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.f358-finish-grid h2 { margin-bottom: 20px; }
.f358-finish-grid p { color: #cfdbd1; }
.f358-finish-list > div { border-bottom: 1px solid #496154; padding-bottom: 12px; margin-bottom: 14px; }
.f358-finish-list p { font-size: .9rem; margin: 7px 0 0; }
.f358-quality-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.f358-quality-grid article { border: 1px solid var(--f358-line); }
.f358-quality-grid img { width: 100%; height: 240px; object-fit: contain; background: #f3f6f2; }
.f358-quality-grid article > div { padding: 22px; }
.f358-quality-grid p { color: #52615a; font-size: .94rem; margin: 10px 0 0; }
.f358-application-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 55px; }
.f358-application-grid p { color: #52615a; }
.f358-enquiry { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; }
.f358-enquiry h2 { margin-bottom: 18px; }
.f358-enquiry ul { padding-left: 20px; color: #52615a; }
.f358-enquiry form { background: #f3f6f2; border: 1px solid var(--f358-line); padding: 24px; }
.f358-form-note { grid-column: 1/-1; font-size: .8rem; color: #52615a; margin: 0; }
.fence358 :focus-visible { outline: 2px solid #588266; outline-offset: 3px; }
@media(max-width:900px) {
 .f358-intro-grid { gap: 28px; grid-template-columns: .85fr 1.15fr; }
 .f358-primary > img { height: 255px; }
 .f358-keyfacts { grid-template-columns: 1fr 1fr; }
 .f358-keyfacts > div:last-child { grid-column: 1/-1; }
 .f358-components { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .f358-spec-grid { grid-template-columns: 1fr; }
 .f358-diagram { max-width: 470px; margin-inline: auto; }
 .f358-mounting article { grid-template-columns: 1fr; }
 .f358-finish-grid,.f358-enquiry { gap: 30px; }
}
@media(max-width:620px) {
 .f358-intro-grid,.f358-overview,.f358-benefits,.f358-mounting,.f358-finish-grid,.f358-quality-grid,.f358-application-grid,.f358-enquiry { grid-template-columns: 1fr; }
 .f358-summary { grid-row: 1; }
 .f358-summary h1 br { display: none; }
 .f358-gallery { max-width: 360px; }
 .f358-primary > img { height: 260px; }
 .f358-keyfacts { grid-template-columns: 1fr 1fr; }
 .f358-section { padding-block: 32px; }
 .f358-section-nav .wrap { gap: 4px 18px; }
 .f358-overview { gap: 0; }
 .f358-benefits { gap: 20px; }
 .f358-components { gap: 20px 14px; }
 .f358-components img { height: 140px; }
 .f358-mounting article { grid-template-columns: 110px 1fr; gap: 14px; }
 .f358-mounting img { width: 110px; height: 120px; }
 .f358-quality-grid img { height: 220px; }
 .f358-spec-table td,.f358-spec-table th { padding: 9px; overflow-wrap: anywhere; }
 .f358-application-grid { gap: 18px; }
 .f358-enquiry form { padding: 18px; }
}