.c-ridgeline-roofing { --navy: #0F2742; --navy-2: #173A61; --orange: #FF7A1A; --orange-ink: #B34A00; --sand: #F5F1EA; background: #fff; color: #13202E; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.rr-wrap { max-width: 1160px; margin: 0 auto; padding: 0 22px; }
.rr-top { background: var(--navy); color: #fff; position: sticky; top: 29px; z-index: 50; }
.rr-nav { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.rr-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 20px; line-height: 1; }
.rr-logo small { display: block; font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; margin-top: 3px; }
.rr-nav nav { display: flex; gap: 22px; margin-left: auto; font-weight: 600; font-size: 15px; }
.rr-nav nav a { text-decoration: none; opacity: .9; }
.rr-call { background: var(--orange); color: #1B0C00; font-weight: 800; padding: 11px 18px; border-radius: 8px; text-decoration: none; }
.rr-hero { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 60%, #22507F 100%); color: #fff; padding: 64px 0 72px; position: relative; overflow: hidden; }
.rr-hero::after { content: ""; position: absolute; right: -120px; bottom: -60px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(255,122,26,.25), transparent 60%); pointer-events: none; }
.rr-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; position: relative; z-index: 1; }
.rr-kicker { color: #FFB27A; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; margin: 0 0 12px; }
.rr-hero h1 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.02; margin: 0 0 16px; letter-spacing: -.02em; }
.rr-lead { font-size: 19px; opacity: .92; max-width: 34ch; margin: 0 0 22px; }
.rr-badges { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rr-badges li { border: 1px solid rgba(255,255,255,.35); border-radius: 99px; padding: 6px 14px; font-size: 14px; font-weight: 600; }
.rr-estimate { background: #fff; color: #13202E; border-radius: 16px; padding: 24px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); }
.rr-progress { height: 6px; border-radius: 6px; background: #E6EAEF; margin-bottom: 16px; overflow: hidden; --p: 50%; }
.rr-progress span { display: block; height: 100%; width: var(--p); background: var(--orange); transition: width .3s ease; }
.rr-estimate fieldset { border: 0; margin: 0; padding: 0; }
.rr-estimate legend { font-weight: 800; font-size: 18px; margin-bottom: 14px; }
.rr-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.rr-choices label { border: 2px solid #DCE2E9; border-radius: 10px; padding: 12px; font-weight: 600; font-size: 15px; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.rr-choices label:has(input:checked) { border-color: var(--orange); background: #FFF4EB; }
.rr-field { display: grid; gap: 6px; font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.rr-field input { border: 2px solid #DCE2E9; border-radius: 10px; padding: 12px; font-size: 17px; }
.rr-btn { width: 100%; border: 0; background: var(--orange); color: #1B0C00; font-weight: 800; font-size: 17px; padding: 14px; border-radius: 10px; cursor: pointer; }
.rr-btn-ghost { background: #EEF1F5; color: #13202E; }
.rr-row { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.rr-section { padding: 72px 0; }
.rr-section h2 { font-size: clamp(28px, 3.2vw, 40px); margin: 0 0 24px; color: var(--navy); letter-spacing: -.01em; }
.rr-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rr-cards li { background: var(--sand); border-radius: 14px; padding: 22px; border-top: 4px solid var(--orange); }
.rr-cards h3 { margin: 0 0 8px; color: var(--navy); }
.rr-cards p { margin: 0; color: #43505E; font-size: 15.5px; }
.rr-dark { background: var(--navy); color: #fff; }
.rr-dark h2 { color: #fff; }
.rr-split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; }
.rr-acc details { border-bottom: 1px solid rgba(255,255,255,.18); padding: 14px 0; }
.rr-acc summary { font-weight: 700; cursor: pointer; font-size: 17px; }
.rr-acc p { margin: 8px 0 0; opacity: .85; }
.rr-chips { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.rr-chips li { background: #EEF2F7; color: var(--navy); font-weight: 700; padding: 8px 16px; border-radius: 99px; }
.rr-quote { background: var(--sand); border-radius: 16px; padding: 26px; max-width: 720px; }
.rr-quote blockquote { margin: 6px 0 10px; font-size: 20px; font-weight: 600; color: var(--navy); }
.rr-quote p { margin: 0; color: #56626E; }
.rr-foot { background: #0A1B2E; color: #AEB9C6; padding: 26px 0; font-size: 14px; }
@media (max-width: 860px) {
  .rr-nav nav { display: none; }
  .rr-hero-grid, .rr-split { grid-template-columns: 1fr; }
  .rr-cards { grid-template-columns: 1fr 1fr; }
  .rr-choices { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .rr-cards { grid-template-columns: 1fr; } .rr-call { padding: 10px 12px; font-size: 14px; } .rr-logo span { font-size: 17px; } }