/* Brand site redesign 1102 (CoS 12:09 PM PT 11/2/2026). Staging only: Base links this sheet and sets body.rd only when
   ENVIRONMENT is not production. Every rule is scoped to body.rd. Palette: navy #14213D, off-white #F5F1EA, Valley Yellow
   #FFC857 (fill or text on navy only), terracotta ink #A84A32 buttons with white labels. Never text on #C4553A.
   Self-hosted Nunito subset (font-src 'self'); no inline styles, no third-party assets. */
@font-face{font-family:Nunito;src:url(/fonts/nunito-latin.woff2) format("woff2");font-weight:200 1000;font-display:swap}
.rd{--yel:#FFC857;--ink-btn:#A84A32;--font:Nunito,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:#F5F1EA;font-family:var(--font)}
.rd h1,.rd h2,.rd h3{font-family:var(--font);font-weight:900;letter-spacing:-.01em}
.rd h1{font-weight:1000}
/* Shell: white nav, yellow underline, pill active state, terracotta Sign in pill */
.rd .hdr,.rd.look-b .hdr{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:4px solid var(--yel)}
.rd .nav a,.rd.look-b .nav a{color:var(--navy);font-weight:800;border-radius:999px}
.rd .nav a:hover,.rd.look-b .nav a:hover{background:#FFF1CC;color:var(--navy)}
.rd .nav a[aria-current=page],.rd.look-b .nav a[aria-current=page]{background:var(--yel);color:var(--navy)}
.rd .nav a.acct-nav,.rd.look-b .nav a.acct-nav{background:var(--ink-btn);color:#fff}
.rd .nav a.acct-nav:hover,.rd.look-b .nav a.acct-nav:hover{background:#8F3E2A;color:#fff}
.rd.look-b .menu summary{color:var(--navy);border-color:var(--navy)}.rd.look-b .menu-bars,.rd.look-b .menu-bars::after{border-color:var(--navy)}
.rd.look-b .menu[open] summary{background:#FFF1CC}.rd.look-b .menu[open] .menu-bars::before,.rd.look-b .menu[open] .menu-bars::after{border-color:var(--navy)}
.rd.look-b .logo img{content:url(/roofzoo-lockup-light.svg?v=2)}
/* Buttons */
.rd .btn-primary{background:var(--ink-btn);color:#fff;border-radius:12px;font-weight:900}
.rd .btn-primary:hover{background:#8F3E2A;color:#fff}
.rd .btn{font-family:var(--font);font-weight:900}
.rd button[type=submit]:not(.btn-ghost){font-family:var(--font)}
/* Cards: white, 2px warm outline, 20px radius */
.rd .card,.rd .tile,.rd .calc,.rd .lead,.rd .afford-form{border:2px solid #E6DFD3;border-radius:20px}
.rd .card-media .badge,.rd .badge-status{background:var(--yel);color:var(--navy);font-weight:900;border-radius:999px}
.rd input:not([type=checkbox]):not([type=radio]),.rd select,.rd textarea{border:2px solid #D8CFC0;border-radius:12px;font-family:var(--font)}
.rd input:focus-visible,.rd select:focus-visible,.rd textarea:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.rd .chip,.rd .cmap-chip{border:2px solid var(--navy);border-radius:999px;font-weight:800}
/* Host band: one Zoo Crew host per page, decorative (alt=""), yellow speech bubble only with Legal-cleared lines */
.rd .rd-host{background:var(--navy);border-bottom:6px solid var(--yel);overflow:hidden}
.rd .rd-host-in{display:flex;align-items:flex-end;justify-content:flex-end;gap:14px;min-height:96px;padding-top:12px}
.rd .rd-host-img{width:110px;height:auto;display:block;margin-bottom:-6px}
.rd .rd-bubble{background:var(--yel);color:var(--navy);font-weight:900;font-size:16px;border-radius:18px;padding:10px 16px;margin:0 0 30px;position:relative;max-width:60ch}
.rd .rd-bubble::after{content:"";position:absolute;right:-8px;bottom:12px;border:8px solid transparent;border-left-color:var(--yel);border-right:0}
.rd.look-b .rd-host{display:none} /* home and city pages: the Bold Valley hero already carries the crew; host shown in .bv-city-hero */
.rd.rd-t7 .rd-host-in{min-height:64px}.rd.rd-t7 .rd-host-img{width:72px}
/* T7 text pages: navy title band on the page title, plain body */
.rd.rd-t7 main h1:first-of-type{background:var(--navy);color:#F5F1EA;box-shadow:0 0 0 100vmax var(--navy);clip-path:inset(0 -100vmax);padding:18px 0;margin-bottom:24px}
.rd.rd-t7 .rd-host{border-bottom:0}
/* T6 small card pages */
.rd.rd-t6 main>.section .wrap,.rd.rd-t6 main>section .wrap{max-width:640px}
/* Home hero line and claim band (yellow CTA band) */
.rd .rd-hero-line{font-size:19px;max-width:560px;margin:0 0 18px}
.rd .rd-band{background:var(--yel);color:var(--navy);padding:30px 0}
.rd .rd-band-in{display:flex;gap:20px;align-items:center}
.rd .rd-band img{width:110px;height:auto}.rd .rd-band h2{margin:0;font-size:26px}.rd .rd-band p{margin:4px 0 0}
.rd .rd-band .btn{margin-left:auto}
/* Footer: navy, AI line, license lines locked at 14px or more at every breakpoint (smallest type on the page is 13px) */
.rd .ftr{background:var(--navy)}
.rd .rd-ai{font-weight:800;color:var(--yel)}
.rd .ftr-lic,.rd .ftr-legal-line{font-size:max(14px,1em)!important;font-weight:700}
@media (max-width:600px){
  .rd .rd-host-in{min-height:72px}.rd .rd-host-img{width:78px}.rd .rd-bubble{font-size:15px;margin-bottom:22px}
  .rd .rd-band-in{flex-wrap:wrap}.rd .rd-band img{width:70px}.rd .rd-band h2{font-size:20px}.rd .rd-band .btn{margin-left:0;width:100%}
  .rd .ftr-lic,.rd .ftr-legal-line{font-size:max(14px,1em)!important}
}
@media (prefers-reduced-motion:reduce){.rd *{transition:none!important}}
/* Brand QA round 2 (11/2/2026). T2/T5 heroes: the host band and the page hero read as one navy block with the H1 inside it;
   no peach circles, no clip-art house (the host replaces it). Bold Valley (look-b) heroes keep their own styling. */
.rd:not(.look-b) main:has(.hero) .rd-host{border-bottom:0}
.rd:not(.look-b) main .hero{background:var(--navy);color:#F5F1EA;border-bottom:6px solid var(--yel);padding-top:8px}
.rd:not(.look-b) main .hero::before,.rd:not(.look-b) main .hero::after{display:none}
.rd:not(.look-b) main .hero .hero-aside{display:none}
.rd:not(.look-b) main .hero h1,.rd:not(.look-b) main .hero .hero-sub,.rd:not(.look-b) main .hero>.wrap>p,.rd:not(.look-b) main .hero .hero-text>p{color:#F5F1EA}
.rd:not(.look-b) main .hero .eyebrow{color:var(--yel)}
.rd:not(.look-b) main .hero>.wrap>p a:not(.btn),.rd:not(.look-b) main .hero .hero-text>p a:not(.btn){color:var(--yel)}
/* Pages without a .hero (cost to sell, Partner Agents): navy title band on the H1, like T7 */
.rd .sellcost>h1,.rd .pd>h1:first-child{background:var(--navy);color:#F5F1EA;box-shadow:0 0 0 100vmax var(--navy);clip-path:inset(0 -100vmax);padding:18px 0;margin-top:0;margin-bottom:24px}
.rd main:has(.sellcost) .rd-host,.rd main:has(.pd) .rd-host{border-bottom:0}
/* Ask RoofZoo: icon-only at every width under the redesign, and room under the page so it never covers content */
.rd .chat-fab{padding:6px}.rd .chat-fab-txt{display:none}
body.rd{padding-bottom:96px}
@media (max-width:600px){.rd main .wrap.pd,.rd main .wrap.sellcost{padding-left:18px;padding-right:18px}}
/* Brand QA round 3 (11/2/2026, CoS): Ask button never covers the last content. Button 44px + 12px margin + safe-area; body pad = button + margin + 20px gap + safe-area. */
.rd .chat-fab{padding:2px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}.rd .chat-fab img{width:40px;height:40px}
body.rd{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
/* CoS QA round 5 (11/2/2026): contrast to WCAG AA, no wording changes.
   /value: labels inside the white form card on a navy hero use navy ink (white-on-white before). */
.rd main .hero .acct-card,.rd main .hero .acct-card label{color:var(--navy)}
/* /afford and /mortgage-calculator hero cross-link: off-white lead text on navy; button gets a yellow fill with navy text (about 11:1). */
.rd main .hero .xlink-lead{color:#F5F1EA;font-size:16px;font-weight:700}
.rd main .hero .btn.xlink-btn{background:var(--yel);color:var(--navy);border-color:var(--yel)}
.rd main .hero .btn.xlink-btn:hover,.rd main .hero .btn.xlink-btn:focus-visible{background:#fff;border-color:#fff;color:var(--navy)}
/* City pages: the navy crumbs/head block is painted by border-image; add a matching background so the text sits on navy for every renderer. */
.look-b main>.wrap>.crumbs,.look-b main>.wrap>.page-head,.look-b main>.wrap>.city-actions{background-color:var(--navy)}
/* /privacy and other T7 host bands: the host was cropped at the bottom edge; show it whole. */
.rd.rd-t7 .rd-host-img{margin-bottom:0}
/* /search hero: terracotta text links on navy were 2.8:1; off-white on navy is AA. Filled buttons keep their own colors. */
.rd:not(.look-b) main .hero a:not(.btn-primary):not(.xlink-btn):not(.btn-ghost):not(.hero-map){color:#F5F1EA}