/* Orange County website cost guide (oc_cost_guide.py), October 14, 2026: bespoke SVG drawings that draw, grow and
   move. The hero runs on load in CSS; the other sections start when cost-guide.js marks them .is-in. Hidden start
   states apply only under html.cg-js, so without JavaScript, and always with reduced motion, every drawing shows finished. */

.cg-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:end}
.cg-hero-art{margin:0}
.cg-art{display:block;width:100%;height:auto;overflow:visible}
@media(max-width:900px){.cg-hero-grid{grid-template-columns:1fr;gap:32px}}

/* Shared drawing vocabulary */
.cg-ink{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.cg-thin{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.cg-paper{fill:var(--paper)}
.cg-acid{fill:var(--acid)}
.cg-solid{fill:var(--ink)}
.cg-muted{fill:none;stroke:#bbbfb1;stroke-width:1.5;stroke-linecap:round}
.cg-dash{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:5 6}
.cg-price{font-family:var(--display);font-weight:820;letter-spacing:-.03em;fill:var(--ink)}
.cg-cap{font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;fill:var(--muted)}
.cg-small{font-size:13px;fill:var(--ink)}
.cg-tag{fill:var(--acid);stroke:var(--ink);stroke-width:1.5}

/* 1. Hero: five windows rise, frames draw, the growth line follows */
@media(prefers-reduced-motion:no-preference){
 .cg-hero-art .cg-base{stroke-dasharray:1;animation:cg-draw 1s var(--gx-ease) .1s both}
 .cg-win{transform-box:fill-box;transform-origin:50% 100%;animation:cg-rise .9s var(--gx-spring) both;animation-delay:calc(.25s + var(--i) * .14s)}
 .cg-win .cg-frame{stroke-dasharray:1;animation:cg-draw 1.1s var(--gx-ease) both;animation-delay:calc(.35s + var(--i) * .14s)}
 .cg-win .cg-fillin{animation:cg-fade .6s ease both;animation-delay:calc(1s + var(--i) * .14s)}
 .cg-win .cg-price{animation:cg-drop .7s var(--gx-spring) both;animation-delay:calc(1.1s + var(--i) * .14s)}
 .cg-hero-art .cg-climb{stroke-dasharray:1;animation:cg-draw 1.4s var(--gx-ease) 1.9s both}
 .cg-hero-art .cg-climb-head{animation:cg-fade .3s ease 3.2s both}
 .cg-caret{animation:cg-blink 1.1s steps(2,start) infinite 2s}
}
@keyframes cg-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes cg-rise{from{opacity:0;transform:translateY(28px) scaleY(.6)}to{opacity:1;transform:none}}
@keyframes cg-fade{from{opacity:0}to{opacity:1}}
@keyframes cg-drop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes cg-blink{to{visibility:hidden}}

/* 2. The price line: ranges grow from each firm's starting price */
.cg-chart-wrap{padding-block:24px 8px}
.cg-chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cg-chart{min-width:760px}
.cg-band{fill:var(--acid);opacity:.32}
.cg-row .cg-track{stroke:#18191718;stroke-width:1}
.cg-bar{fill:var(--acid);stroke:var(--ink);stroke-width:1.5}
.cg-dot{fill:var(--ink)}
.cg-row text{font-size:15px}
.cg-row .cg-firm{font-weight:700;fill:var(--ink)}
.cg-row .cg-val{fill:var(--muted);font-size:13px}
.cg-row:hover .cg-bar{fill:var(--ink)}
.cg-row:hover .cg-firm{text-decoration:underline}
.cg-median{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:6 6}
.cg-axis text{font-size:13px;fill:var(--muted)}
html.cg-js .cg-io:not(.is-in) .cg-bar{transform:scaleX(0)}
html.cg-js .cg-io:not(.is-in) .cg-dot{transform:scale(0)}
html.cg-js .cg-io:not(.is-in) .cg-row text,html.cg-js .cg-io:not(.is-in) .cg-band,html.cg-js .cg-io:not(.is-in) .cg-band-label,html.cg-js .cg-io:not(.is-in) .cg-median-label{opacity:0}
html.cg-js .cg-io:not(.is-in) .cg-median-line{stroke-dashoffset:1}
.cg-bar{transform-box:fill-box;transform-origin:0 50%;transition:transform 1s var(--gx-ease) calc(.15s + var(--i) * .07s),fill .3s}
.cg-dot{transform-box:fill-box;transform-origin:50% 50%;transition:transform .5s var(--gx-spring) calc(.05s + var(--i) * .07s)}
.cg-row text{transition:opacity .6s ease calc(.2s + var(--i) * .07s)}
.cg-band,.cg-band-label{transition:opacity 1s ease 1.2s}
.cg-median-line{stroke-dasharray:1;transition:stroke-dashoffset 1.2s var(--gx-ease) 1.3s}
.cg-median-label{transition:opacity .6s ease 2.1s}

/* 3. Staircase: steps build up, the endcap square hops to the top */
.cg-stairs{max-width:560px;margin-top:28px}
.cg-step{transform-box:fill-box;transform-origin:50% 100%;transition:transform .8s var(--gx-spring) calc(var(--i) * .12s)}
.cg-step-face{fill:var(--paper);stroke:var(--ink);stroke-width:2.5}
.cg-step text{font-family:var(--display)}
.cg-step .cg-step-price{font-weight:820;font-size:19px;letter-spacing:-.03em;fill:var(--ink)}
.cg-step .cg-step-name{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;fill:var(--muted)}
.cg-step .cg-step-n{font-size:11px;font-weight:700;fill:var(--ink)}
.cg-hopper{fill:var(--acid);stroke:var(--ink);stroke-width:2.5;transform:translate(424px,95px)}
.cg-ring{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:4 5}
html.cg-js .cg-io:not(.is-in) .cg-step{transform:scaleY(0)}
html.cg-js .cg-io:not(.is-in) .cg-hopper{transform:translate(4px,330px)}
html.cg-js .cg-io:not(.is-in) .cg-care{opacity:0}
.cg-care{transition:opacity .6s ease 2.6s}
@media(prefers-reduced-motion:no-preference){
 html.cg-js .cg-io.is-in .cg-hopper{animation:cg-hop 1.9s cubic-bezier(.45,0,.55,1) .75s both,cg-bob 2.4s ease-in-out 2.9s infinite}
}
@keyframes cg-hop{0.0%{transform:translate(4px,330px)} 12.5%{transform:translate(43px,214px)} 25.0%{transform:translate(82px,260px)} 37.5%{transform:translate(139px,159px)} 50.0%{transform:translate(196px,205px)} 62.5%{transform:translate(253px,104px)} 75.0%{transform:translate(310px,150px)} 87.5%{transform:translate(367px,49px)} 100%{transform:translate(424px,95px)}}
@keyframes cg-bob{0%,100%{transform:translate(424px,95px)}50%{transform:translate(424px,89px)}}

/* 4. Why quotes differ: six small drawings that loop while on screen */
.cg-drivers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.cg-drivers li{padding:28px 28px 32px 0;border-bottom:1px solid #18191726}
.cg-drivers li:not(:nth-child(3n)){padding-right:32px}
.cg-drivers svg{width:84px;height:84px;display:block;margin-bottom:18px;overflow:visible}
.cg-drivers h3{font-family:var(--display);font-size:clamp(20px,1.7vw,24px);font-weight:800;letter-spacing:-.03em;margin:0 0 8px}
.cg-drivers p{font-size:15px;line-height:1.6;color:var(--muted);margin:0;max-width:34ch}
@media(max-width:900px){.cg-drivers{grid-template-columns:repeat(2,minmax(0,1fr))}.cg-drivers li{padding-right:20px}}
@media(max-width:560px){.cg-drivers{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){
 .cg-io.is-in .cg-fan{animation:cg-fan 3.2s var(--gx-ease) infinite;animation-delay:calc(var(--i) * .18s)}
 .cg-io.is-in .cg-pen-line{stroke-dasharray:1;animation:cg-write 3s ease-in-out infinite}
 .cg-io.is-in .cg-pen{animation:cg-pen 3s ease-in-out infinite}
 .cg-io.is-in .cg-block-a{animation:cg-swap-a 4s var(--gx-ease) infinite}
 .cg-io.is-in .cg-block-b{animation:cg-swap-b 4s var(--gx-ease) infinite}
 .cg-io.is-in .cg-plug{animation:cg-plug 2.6s var(--gx-ease) infinite}
 .cg-io.is-in .cg-spark{animation:cg-spark 2.6s ease infinite}
 .cg-io.is-in .cg-lens{animation:cg-scan 3.6s ease-in-out infinite}
 .cg-io.is-in .cg-key{transform-box:view-box;transform-origin:30px 46px;animation:cg-turn 3s var(--gx-ease) infinite}
}
.cg-fan{transform-box:fill-box;transform-origin:0 100%}
@keyframes cg-fan{0%,15%{transform:none}45%,70%{transform:translate(calc(var(--i) * 7px),calc(var(--i) * -5px)) rotate(calc(var(--i) * 5deg))}100%{transform:none}}
@keyframes cg-write{0%{stroke-dashoffset:1}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes cg-pen{0%{transform:translate(0,0)}55%{transform:translate(38px,-2px)}80%{transform:translate(38px,-2px)}100%{transform:translate(0,0)}}
@keyframes cg-swap-a{0%,30%{transform:none}50%,80%{transform:translate(30px,0)}100%{transform:none}}
@keyframes cg-swap-b{0%,30%{transform:none}50%,80%{transform:translate(-30px,0)}100%{transform:none}}
@keyframes cg-plug{0%,20%{transform:translate(-12px,0)}45%,75%{transform:none}100%{transform:translate(-12px,0)}}
@keyframes cg-spark{0%,44%{opacity:0}50%,72%{opacity:1}80%,100%{opacity:0}}
@keyframes cg-scan{0%,100%{transform:translate(0,0)}25%{transform:translate(30px,0)}50%{transform:translate(30px,18px)}75%{transform:translate(0,18px)}}
@keyframes cg-turn{0%,30%{transform:none}50%,80%{transform:rotate(-38deg)}100%{transform:none}}

/* 5. The catch: the line drops, the $0 tag sways over the water */
.cg-catch-art{max-width:300px;margin-top:28px}
.cg-sway{transform-box:view-box;transform-origin:150px 0}
html.cg-js .cg-io:not(.is-in) .cg-line{stroke-dashoffset:1}
html.cg-js .cg-io:not(.is-in) .cg-sway{opacity:0;transform:translateY(-60px)}
.cg-line{stroke-dasharray:1;transition:stroke-dashoffset 1s var(--gx-ease) .1s}
.cg-sway{transition:opacity .4s ease .5s,transform 1s var(--gx-spring) .5s}
.cg-wave{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
@media(prefers-reduced-motion:no-preference){
 .cg-io.is-in .cg-swing{transform-box:view-box;transform-origin:150px 0;animation:cg-swing 4.8s ease-in-out 1.6s infinite}
 .cg-io.is-in .cg-wave{animation:cg-wave 3.2s linear infinite}
 .cg-io.is-in .cg-wave-2{animation-duration:4.4s;animation-direction:reverse}
}
@keyframes cg-swing{0%,100%{transform:rotate(0)}25%{transform:rotate(3.5deg)}75%{transform:rotate(-3.5deg)}}
@keyframes cg-wave{from{transform:translateX(0)}to{transform:translateX(-40px)}}

/* 6. Questions: checkboxes tick themselves */
.cg-asks{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.cg-asks li{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;padding:20px 0;border-bottom:1px solid #18191726}
.cg-asks svg{width:28px;height:28px;margin-top:2px;overflow:visible}
.cg-asks p{margin:0;font-size:17px;line-height:1.55}
.cg-box{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.cg-tick{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;transition:stroke-dashoffset .5s var(--gx-ease) calc(.25s + var(--i) * .18s)}
.cg-box-fill{fill:var(--acid);transform-box:fill-box;transform-origin:50% 50%;transition:transform .45s var(--gx-spring) calc(.2s + var(--i) * .18s)}
html.cg-js .cg-io:not(.is-in) .cg-tick{stroke-dashoffset:1}
html.cg-js .cg-io:not(.is-in) .cg-box-fill{transform:scale(0)}

/* Reduced motion: finished states, no transitions */
@media(prefers-reduced-motion:reduce){
 .cg-bar,.cg-dot,.cg-row text,.cg-band,.cg-median-line,.cg-step,.cg-care,.cg-line,.cg-sway,.cg-tick,.cg-box-fill{transition:none}
}