/* OCMB Digital 2027 PRO v2.10.0
 * Final content hierarchy: updates -> client paths -> brands -> roof system.
 * Every photography-led block takes its image from the Media Library. */

.ocmb-news-ribbon{position:relative;z-index:3;padding:0 0 10px;background:#fff}
.ocmb-news-ribbon .news-ticker{margin-top:0;border:1px solid #dfe8f0;border-radius:0 0 14px 14px;box-shadow:0 10px 24px rgba(7,42,77,.07)}
.ocmb-news-ribbon .news-ticker__label{background:var(--red);letter-spacing:.09em}
.start-section{padding-top:70px;padding-bottom:68px}

/* Brands are a useful proof point before the visitor chooses a material path. */
.brands-section{padding:68px 0 74px;background:linear-gradient(135deg,#f2f7fb 0%,#fff 58%,#f9fbfc 100%);border-top:1px solid #e1ebf2;border-bottom:1px solid #e1ebf2}
.brands-section .ribbon-head{margin-bottom:22px}
.brands-section .section-head h2{max-width:720px}
.brand-directory-line{align-items:center;gap:18px;margin-bottom:14px;padding:14px 17px;border:1px solid #d9e5ee;border-radius:12px;background:rgba(255,255,255,.86)}
.brand-directory-line p{max-width:760px;line-height:1.5}
.brand-directory-link{white-space:nowrap}
.brands-section .logo-ticker{border-color:#cfdde8;box-shadow:0 14px 28px rgba(8,42,71,.08)}
.brands-section .ticker-logo{width:210px;min-height:118px;padding:14px 16px;gap:8px;flex-direction:column;justify-content:center;text-decoration:none}
.brands-section .ticker-logo img{max-height:57px;max-width:145px}
.brands-section .ticker-logo__name{font-size:15px;line-height:1.15}
.brands-section .ticker-logo__meta{display:block;max-width:164px;color:#567083;font-size:9px;line-height:1.25;font-weight:850;letter-spacing:.045em;text-align:center;text-transform:uppercase}
.brands-section .ticker-logo__meta--official{color:#137046}
.brands-section .ticker-logo--official{background:#f6fbf8}

/* A large, photographic lead card makes the roof category easier to scan. */
.materials-section{padding:76px 0 82px;background:#fff}
.materials-section .section-head{margin-bottom:30px}
.materials-section .material-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.materials-section .material-card{grid-column:span 4;display:flex;min-height:260px;padding:0;overflow:hidden;border:1px solid #d8e3eb;border-radius:16px;background:#fff;box-shadow:0 11px 22px rgba(8,42,71,.05);text-decoration:none}
.materials-section .material-card:hover{transform:translateY(-4px);border-color:#9bbbd5;box-shadow:0 17px 30px rgba(8,42,71,.12)}
.materials-section .material-card__image{display:block;position:relative;flex:0 0 118px;overflow:hidden;margin:0;background:#e9f0f5}
.materials-section .material-card__image img{display:block;width:100%;height:100%;object-fit:cover}
.materials-section .material-card__body{position:relative;z-index:2;display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:22px 23px;color:var(--ink)}
.materials-section .material-card__body small{color:var(--blue);font-size:10px;font-weight:900;letter-spacing:.1em}
.materials-section .material-card__body h3{margin:15px 0 10px;color:var(--ink);font-size:25px;line-height:1.03;letter-spacing:-.035em}
.materials-section .material-card__body p{margin:0;color:#5a6a78;font-size:14px;line-height:1.55}
.materials-section .material-card__body b{margin-top:auto;padding-top:17px;color:var(--blue);font-size:13px}
.materials-section .material-card--lead{position:relative;grid-column:span 8;min-height:430px;display:block;border:0;background:#062e58;color:#fff}
.materials-section .material-card--lead:after{display:none}
.materials-section .material-card--lead .material-card__image{position:absolute;inset:0;width:auto;height:auto;min-height:0}
.materials-section .material-card--lead .material-card__image img{height:100%;opacity:.92}
.materials-section .material-card__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(3,25,47,.94) 0%,rgba(3,25,47,.72) 46%,rgba(3,25,47,.20) 100%)}
.materials-section .material-card--lead .material-card__body{min-height:430px;max-width:580px;padding:38px;color:#fff}
.materials-section .material-card--lead .material-card__body small,.materials-section .material-card--lead .material-card__body h3,.materials-section .material-card--lead .material-card__body p,.materials-section .material-card--lead .material-card__body b{color:#fff}
.materials-section .material-card--lead .material-card__body h3{font-size:clamp(34px,4vw,56px);line-height:.93}
.materials-section .material-card--lead .material-card__body p{max-width:480px;color:#e5eef6;font-size:16px}
.materials-section .material-card__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.materials-section .material-card__chips span{padding:6px 9px;border:1px solid rgba(255,255,255,.34);border-radius:999px;background:rgba(1,27,55,.25);color:#fff;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

/* Promotions are visually distinct and lead with an editable photograph of stock. */
.offers-section{padding:78px 0 82px;background:linear-gradient(135deg,#f7f3ef 0%,#fff 52%,#f6fafc 100%);border-top:1px solid #e6e5e0}
.offers-section .offers-head{margin-bottom:30px}
.offers-layout{display:grid;grid-template-columns:minmax(300px,.88fr) minmax(0,1.12fr);gap:16px;align-items:stretch}
.offers-feature{position:relative;isolation:isolate;display:flex;min-height:455px;overflow:hidden;border-radius:18px;background:#082d55;color:#fff;text-decoration:none;box-shadow:0 17px 32px rgba(5,31,56,.18)}
.offers-feature:hover{transform:translateY(-4px);box-shadow:0 24px 42px rgba(5,31,56,.24)}
.offers-feature__image{position:absolute;inset:0;z-index:-2;margin:0}
.offers-feature__image img{display:block;width:100%;height:100%;object-fit:cover}
.offers-feature__veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(2,25,48,.98) 0%,rgba(3,29,55,.68) 53%,rgba(3,29,55,.13) 100%)}
.offers-feature__body{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:13px;padding:31px}
.offers-feature__body small{color:#ffdc62;font-size:10px;font-weight:900;letter-spacing:.13em}
.offers-feature__body strong{max-width:490px;color:#fff;font-size:clamp(29px,3.1vw,43px);line-height:.98;letter-spacing:-.045em}
.offers-feature__body>span{max-width:470px;color:#e8eff4;font-size:15px;line-height:1.5}
.offers-feature__body b{margin-top:5px;color:#fff;font-size:14px}
.offer-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.offers-section .offer-card{display:flex;min-height:0;flex-direction:column;padding:17px;border:1px solid #d7e0e6;border-radius:15px;background:#fff;box-shadow:0 10px 20px rgba(8,42,71,.05)}
.offers-section .offer-card:hover{border-color:#c51e3c;box-shadow:0 15px 24px rgba(124,20,39,.12)}
.offers-section .offer-card__image{display:block;overflow:hidden;height:108px;margin:-17px -17px 14px;border-radius:14px 14px 0 0;background:#e7eef3}
.offers-section .offer-card__image img{display:block;width:100%;height:100%;object-fit:cover}
.offers-section .offer-card .availability{align-self:flex-start;margin:0 0 12px;padding:5px 7px;border-radius:999px;background:#f7e9ed;color:#a31531;font-size:8px;font-weight:900;letter-spacing:.06em}
.offers-section .offer-card h3{margin:0 0 9px;color:var(--ink);font-size:20px;line-height:1.03;letter-spacing:-.028em}
.offers-section .offer-card p{margin:0;color:#5c6c78;font-size:13px;line-height:1.48}
.offers-section .offer-status{margin-top:13px;color:#627687;font-size:11px;line-height:1.35}
.offers-section .offer-card>a:last-child{margin-top:auto;padding-top:16px;color:var(--red);font-size:12px;font-weight:900}
.offers-footer{display:flex;align-items:center;gap:16px;margin-top:24px;padding-top:20px;border-top:1px solid #d8e1e7}
.offers-footer span{color:#5f7180;font-size:13px}

@media (max-width:1080px){
 .materials-section .material-card{grid-column:span 6}
 .materials-section .material-card--lead{grid-column:1 / -1}
 .offers-layout{grid-template-columns:1fr}
 .offers-feature{min-height:390px}
}
@media (max-width:780px){
 .start-section,.brands-section,.materials-section,.offers-section{padding-top:52px;padding-bottom:56px}
 .brand-directory-line{align-items:flex-start;flex-direction:column}
 .brands-section .ticker-logo{width:172px;min-height:103px}
 .brands-section .ticker-logo img{max-width:120px;max-height:48px}
 .materials-section .material-grid{grid-template-columns:1fr}
 .materials-section .material-card,.materials-section .material-card--lead{grid-column:1 / -1}
 .materials-section .material-card--lead,.materials-section .material-card--lead .material-card__body{min-height:365px}
 .materials-section .material-card--lead .material-card__body{padding:28px}
 .materials-section .material-card--lead .material-card__body h3{font-size:38px}
 .offer-preview{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
 .ocmb-news-ribbon{padding-bottom:0}
 .ocmb-news-ribbon .news-ticker{border-radius:0}
 .ocmb-news-ribbon .news-ticker__label{max-width:112px;padding:0 11px;font-size:8px;line-height:1.2;white-space:normal}
 .ocmb-news-ribbon .news-ticker__track a,.ocmb-news-ribbon .news-ticker__track span{padding:0 15px;font-size:10px}
 .materials-section .material-card{min-height:0}
 .materials-section .material-card:not(.material-card--lead){flex-direction:column}
 .materials-section .material-card:not(.material-card--lead) .material-card__image{flex-basis:126px;height:126px}
 .materials-section .material-card__body{min-height:205px;padding:20px}
 .materials-section .material-card--lead,.materials-section .material-card--lead .material-card__body{min-height:350px}
 .materials-section .material-card--lead .material-card__body h3{font-size:34px}
 .materials-section .material-card--lead .material-card__body p{font-size:14px}
 .offers-feature{min-height:365px}
 .offers-feature__body{padding:24px}
 .offers-feature__body strong{font-size:31px}
 .offer-preview{grid-template-columns:1fr}
 .offers-section .offer-card__image{height:148px}
 .offers-footer{align-items:flex-start;flex-direction:column}
}