/* Colors & Finishes. Loaded before density.css, which can override shared classes but not cf-* rules. */
.cf-hero,.cf-match,.cf-wraps,.cf-finishes,.cf-cta{--cf-navy:#102447;--cf-blue:#0094d9;--cf-sky:#7fd8ff;--cf-spectrum:url("/media/colors-finishes/color-warp.jpg")}

/* Hero */
.cf-hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(900px 480px at 88% 18%,#1f5a93 0%,rgba(31,90,147,0) 62%),radial-gradient(700px 420px at 0% 100%,#0a3a6b 0%,rgba(10,58,107,0) 60%),linear-gradient(135deg,#0a1a36,#102447 58%,#0d2f5b)}
.cf-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--cf-spectrum) center/100% 100% no-repeat}
.cf-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center;min-height:560px;padding-top:54px;padding-bottom:64px}
.cf-hero h1{color:#fff;font-size:clamp(44px,6vw,82px);line-height:1.02;max-width:none}
.cf-hero .back-link{color:#bfe9ff}
.cf-hero .eyebrow{color:var(--cf-sky)}
.cf-tagline{margin:22px 0 0;font:700 clamp(22px,2.6vw,34px)/1.2 var(--font-display);color:var(--cf-sky);letter-spacing:-.02em}
.cf-lead{margin:20px 0 0;max-width:560px;font-size:18px;line-height:1.65;color:#d6e6f1}
.cf-hero .button-on-dark{border-color:#fff;color:#fff}
.cf-hero .button-on-dark:hover{background:#fff;color:var(--cf-navy)}

/* Hero swatch collage: real wrap photography, tilted like samples on a desk. */
.cf-collage{position:relative;height:470px}
.cf-tile{position:absolute;margin:0;border:7px solid #fff;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 26px 55px rgba(3,10,25,.5);transition:transform .35s ease}
.cf-tile img{display:block;width:100%;height:100%;object-fit:cover}
.cf-tile figcaption{position:absolute;left:10px;bottom:10px;background:var(--cf-navy);color:#fff;border-radius:999px;padding:3px 11px;font:700 12px/1.5 var(--font-display);letter-spacing:.04em}
.cf-tile-w34{left:2%;top:3%;width:46%;aspect-ratio:1;transform:rotate(-6deg);z-index:2}
.cf-tile-w1{right:1%;top:0;width:43%;aspect-ratio:1;transform:rotate(5deg);z-index:1}
.cf-tile-w12{left:25%;top:33%;width:48%;aspect-ratio:1;transform:rotate(2deg);z-index:4}
.cf-tile-w35{right:3%;bottom:1%;width:38%;aspect-ratio:1;transform:rotate(-4deg);z-index:3}
.cf-tile-w10{left:0;bottom:3%;width:33%;aspect-ratio:1;transform:rotate(7deg);z-index:3}
.cf-collage:hover .cf-tile{transform:rotate(0)}

/* Color matching */
.cf-match{padding:84px 0 72px;background:#fff}
.cf-match-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.cf-match-head h2{font-size:clamp(32px,4vw,54px)}
.cf-match-head>p{margin:0;font-size:18px;line-height:1.7;color:#35506a}
.cf-spectrum{position:relative;margin:44px 0 30px;border-radius:20px;overflow:hidden;box-shadow:0 18px 44px rgba(16,36,71,.22)}
.cf-spectrum img{display:block;width:100%;height:clamp(64px,9vw,104px);object-fit:cover}
.cf-spectrum figcaption{position:absolute;left:66%;top:0;bottom:0;display:flex;align-items:center;transform:translateX(-50%);border-left:2px solid rgba(255,255,255,.9);padding-left:0}
.cf-spectrum figcaption span{margin-left:14px;background:#fff;color:var(--cf-navy);border-radius:999px;padding:8px 16px;font:700 14px/1.2 var(--font-display);white-space:nowrap;box-shadow:0 8px 22px rgba(3,10,25,.3)}
.cf-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cf-stat{position:relative;background:#f5f9fc;border-radius:16px;padding:26px 22px 24px;overflow:hidden}
.cf-stat:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--stat,#0094d9)}
.cf-stat strong{display:block;font:700 clamp(28px,3vw,42px)/1.05 var(--font-display);color:var(--cf-navy);letter-spacing:-.03em;overflow-wrap:anywhere}
.cf-stat span{display:block;margin-top:10px;color:#52697b;font-size:15px;line-height:1.4}
.cf-stat-red{--stat:#e5383b}.cf-stat-amber{--stat:#f5a300}.cf-stat-green{--stat:#2fb344}.cf-stat-blue{--stat:#0094d9}
.cf-stat-sherwin strong{font-size:clamp(22px,2.2vw,30px)}

/* Wraps */
.cf-wraps{padding:84px 0;background:linear-gradient(180deg,#f7f3ed,#efe8de)}
.cf-wraps-head{max-width:860px}
.cf-wraps-head h2{font-size:clamp(32px,4vw,54px)}
.cf-wraps-head p:not(.eyebrow){margin:22px 0 0;font-size:18px;line-height:1.7;color:#3d4e5e}
.cf-callout{margin:34px 0 0;padding:22px 28px;border-radius:16px;background:linear-gradient(120deg,#102447,#0d3a6d);color:#fff;font:700 clamp(18px,2vw,24px)/1.35 var(--font-display);letter-spacing:-.01em;box-shadow:0 16px 38px rgba(16,36,71,.25);border-left:8px solid var(--cf-blue)}
.cf-stock-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:58px 0 22px;padding-bottom:14px;border-bottom:2px solid rgba(16,36,71,.14)}
.cf-stock-head h3{font-size:clamp(21px,2.2vw,28px)}
.cf-stock-head span{flex:0 0 auto;font:700 13px/1 var(--font-display);text-transform:uppercase;letter-spacing:.09em;color:#6a5b48}
.cf-wrap-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.cf-wrap{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(16,36,71,.08),0 12px 30px rgba(74,52,24,.12);transition:transform .25s ease,box-shadow .25s ease}
.cf-wrap:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(16,36,71,.1),0 24px 44px rgba(74,52,24,.22)}
.cf-wrap-image{position:relative;overflow:hidden;background:#e7ddd0}
.cf-wrap-image img{display:block;width:100%;aspect-ratio:1;object-fit:cover;transition:transform .5s ease}
.cf-wrap:hover .cf-wrap-image img{transform:scale(1.07)}
.cf-code{position:absolute;left:12px;top:12px;background:var(--cf-navy);color:#fff;border-radius:999px;padding:4px 12px;font:700 13px/1.4 var(--font-display);letter-spacing:.04em;box-shadow:0 4px 12px rgba(3,10,25,.35)}
.cf-wrap-body{padding:16px 16px 18px}
.cf-wrap-body h4{margin:0;font:700 17px/1.25 var(--font-display);color:var(--cf-navy);letter-spacing:-.01em}
.cf-app{display:inline-block;margin-top:10px;padding:4px 11px;border-radius:999px;background:#eee7dc;color:#5d4a33;font-size:13px;font-weight:700;line-height:1.4}
.cf-app-exterior{background:#d9f0fb;color:#0a5f8a}

/* Finishes */
.cf-finishes{padding:84px 0;background:linear-gradient(160deg,#0a1a36,#102447 60%,#0d2f5b);color:#e6f0f7}
.cf-finishes-head h2{color:#fff;font-size:clamp(32px,4vw,54px)}
.cf-finishes .eyebrow{color:var(--cf-sky)}
.cf-finish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px}
.cf-finish{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:20px;overflow:hidden}
.cf-finish-head{display:flex;align-items:flex-end;min-height:170px;padding:24px 26px}
.cf-finish-head h3{color:#fff;font-size:clamp(28px,3vw,38px);text-shadow:0 2px 14px rgba(0,0,0,.4)}
.cf-finish-vinyl .cf-finish-head{background:linear-gradient(135deg,#ffffff 0%,#d6e3ec 52%,#f2f7fa 100%)}
.cf-finish-vinyl .cf-finish-head h3{color:var(--cf-navy);text-shadow:none}
.cf-finish-aluminum .cf-finish-head{background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 2px,rgba(255,255,255,0) 2px 6px),linear-gradient(135deg,#e3e9ed 0%,#8797a3 42%,#f0f4f6 58%,#76889a 100%)}
.cf-finish-aluminum .cf-finish-head h3{color:var(--cf-navy);text-shadow:0 1px 0 rgba(255,255,255,.55)}
.cf-finish-wood .cf-finish-head{background:linear-gradient(0deg,rgba(16,36,71,.72),rgba(16,36,71,.05) 70%),url("/media/colors-finishes/W12.jpg") center/cover}
.cf-finish ul{list-style:none;margin:0;padding:0}
.cf-finish li{padding:18px 26px;border-top:1px solid rgba(255,255,255,.13)}
.cf-opt-label{display:block;margin-bottom:5px;font:700 12px/1.3 var(--font-display);text-transform:uppercase;letter-spacing:.1em;color:var(--cf-sky)}
.cf-opt-text{display:block;font-size:17px;line-height:1.5;color:#fff}
.cf-opt-label:only-child{margin:0;font-size:17px;text-transform:none;letter-spacing:0;color:#fff}

/* Call to action */
.cf-cta{position:relative;padding:64px 0;color:#fff;background:linear-gradient(115deg,#0094d9,#0b6fb1 55%,#102447)}
.cf-cta:before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--cf-spectrum) center/100% 100% no-repeat}
.cf-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}
.cf-cta h2{color:#fff;font-size:clamp(30px,3.6vw,48px)}
.cf-cta p{margin:14px 0 0;max-width:640px;font-size:19px;line-height:1.6;color:#e7f5fc}
.cf-button-light{flex:0 0 auto;background:#fff;border-color:#fff;color:var(--cf-navy);padding:17px 30px;font-size:17px;box-shadow:0 12px 28px rgba(3,10,25,.28)}
.cf-button-light:hover{background:#102447;border-color:#102447;color:#fff}

@media(max-width:1100px){
  .cf-wrap-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cf-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .cf-hero-grid{grid-template-columns:1fr;gap:34px;min-height:0;padding-top:44px;padding-bottom:58px}
  .cf-collage{height:380px;max-width:520px;width:100%;margin:0 auto}
  .cf-match-head{grid-template-columns:1fr;gap:20px}
  .cf-wrap-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cf-finish-grid{grid-template-columns:1fr}
  .cf-finish-head{min-height:130px}
}
@media(max-width:730px){
  .cf-match,.cf-wraps,.cf-finishes{padding:54px 0}
  .cf-cta{padding:50px 0}
  .cf-cta-inner{align-items:flex-start;flex-direction:column;gap:26px}
  .cf-button-light{width:100%}
  .cf-spectrum{margin:32px 0 24px}
  .cf-spectrum figcaption{left:50%}
  .cf-spectrum figcaption span{font-size:12px;padding:6px 12px}
  .cf-callout{padding:18px 20px}
  .cf-stock-head{margin-top:42px;flex-direction:column;align-items:flex-start;gap:8px}
}
@media(max-width:560px){
  .cf-collage{height:320px}
  .cf-wrap-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .cf-wrap-body{padding:12px 12px 14px}
  .cf-wrap-body h4{font-size:15px}
  .cf-code{left:8px;top:8px;padding:3px 9px;font-size:12px}
  .cf-stats{grid-template-columns:1fr}
  .cf-tile{border-width:5px;border-radius:12px}
}
@media(prefers-reduced-motion:reduce){
  .cf-tile,.cf-wrap,.cf-wrap-image img{transition:none}
  .cf-wrap:hover{transform:none}
  .cf-wrap:hover .cf-wrap-image img{transform:none}
}