/* assets/v4/site.css: section and layout kit for the new kaizn.ai pages (decisions 5690, 5695, 5697). Load order: tokens.css, base.css, chrome.css, site.css (then proof.css and pricing.css only on a page that uses them).
   CLASSES
   .wrap            centered column, 1120 px max (base.css)
   .d               plain band: ground color with the subtle grid (base.css); .d.w the wash band; .d.bnd the Navy band
   .hd              section head: put .eyebrow, h2 and p.sub inside; .hd.mid centers it
   .pic             glass section over an approved picture with the flat 60 percent overlay in both themes; pick the picture with ONE modifier class below; put glass cards (.card.bevel.bx.glass) inside, never glass on glass
   .pic-NAME        thirteen pictures: canyon-overlook canyon-river-dawn city-grid-valley compass-meadow conference-hall dark-angular-ridges desert-mesas-wide desert-twin-buttes house-framing-mountains layered-peaks observatory-control-room river-valley-aerial tool-pegboard (light theme shows the daylight file, dark theme the dark file)
   .hero            add to .pic for the page opening: taller, h1 large, .lede paragraph, .acts button row
   .cols2           two columns that stack under 800 px; children are .card or plain text
   .cards           responsive grid of cards (3 across wide, 1 on phone); .cards.c2 two across, .cards.c4 four across
   .card            a glass card: use as <article class="card bevel bx glass">, h3 + p, optional .more link
   .cta-band        add to .pic: one centered glass .card.cta with h2, p and the main button
   .btn-main        main button, filled Orange-red (use with .bevel); .btn-glass secondary button (plain fill inside a card)
   .acts            row of buttons; .lede large intro paragraph; .more text link with the Orange-red underline
   Header and footer are rendered by chrome.js (header#site-header, footer#site-footer). Testimonial carousel: proof.css and proof.js. Pricing: pricing.css. */
.pic{position:relative;isolation:isolate;padding-block:clamp(56px,7vw,112px);color:var(--it2);background:var(--pic-l) center/cover no-repeat}
:root.dark .pic{background-image:var(--pic-d)}
.pic::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--ov) var(--str),transparent)}
/* decision 5794: 60 percent overlay only when the text sits on a glass panel; text directly on the picture gets 80 percent (.ov80) */
.pic.ov80{--str:80%}
/* decision 5812: in dark mode the 80 percent overlay goes to 85 percent */
:root.dark .pic.ov80{--str:85%}
/* plain sections: the standard ground with the subtle grid (48px cell), no picture; alternate with .pic sections so two pictures never touch (Josh, decision 5741) */
:root .pic.flat,:root.dark .pic.flat{background-color:var(--ground);background-image:linear-gradient(color-mix(in srgb,var(--h) var(--grid),transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--h) var(--grid),transparent) 1px,transparent 1px);background-size:48px 48px;background-position:0 0;background-repeat:repeat}
:root.dark .pic.flat{background-image:linear-gradient(color-mix(in srgb,var(--h) var(--grid-pic),transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--h) var(--grid-pic),transparent) 1px,transparent 1px)}
.pic.flat::before{display:none}
.pic .hd h1,.pic .hd h2{color:var(--it)}.pic .hd .sub,.pic .lede{color:var(--it2)}.pic .hd .eyebrow{color:var(--it3)}
.hd{margin-bottom:clamp(26px,3.4vw,44px)}.hd.mid{text-align:center}.hd.mid .sub{margin-inline:auto}
.hero{padding-block:clamp(72px,10vw,150px)}
.hero h1{max-width:18ch;font-size:clamp(2.3rem,3.6vw + 1rem,4.2rem);line-height:1.04;color:var(--it)}
.lede{max-width:40rem;margin-top:16px;font:500 clamp(1.1rem,.5vw + 1rem,1.3rem)/1.5 var(--fd);color:var(--tx)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:26px}
.cols2{display:grid;gap:clamp(18px,3vw,36px);grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.cards{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.cards,.cards.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.cols2,.cards,.cards.c2,.cards.c4{grid-template-columns:minmax(0,1fr)}}
.card{--cut:var(--bevel-lg);display:grid;gap:10px;align-content:start;padding:clamp(20px,2.4vw,30px);color:var(--tx)}
.card h3{color:var(--h)}.card p{font:500 1.125rem/1.5 var(--fd)}
.more{justify-self:start;display:inline-flex;align-items:center;min-height:44px;font:800 .95rem var(--fd);color:var(--h);text-decoration:underline 2px var(--ac);text-underline-offset:5px}
.more:hover{color:var(--ac)}
.btn-main,.btn-glass{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;font:800 1.05rem var(--fd);text-decoration:none;white-space:nowrap;--cut:var(--bevel-ctl)}
.btn-main{color:var(--white);background:linear-gradient(135deg,var(--cta-a),var(--cta-b));--band-color:var(--cta-a)}
.btn-main:hover{--band-color:var(--cta-a)}.btn-main:focus-visible{--band-color:var(--focus)}
.btn-glass{color:var(--h);background:var(--bar);--band-color:var(--chip)}
.cta-band .card.cta{max-width:44rem;margin-inline:auto;justify-items:center;text-align:center}
.cta-band .card.cta .acts{justify-content:center}
.card.cta h2{font-size:clamp(1.6rem,1.6vw + 1rem,2.4rem)}
a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.pic-canyon-overlook{--pic-l:url(/assets/imagery/backgrounds-v4/2026-10-30-canyon-overlook-day-v01.webp);--pic-d:url(/assets/imagery/backgrounds-v1/2026-10-30-canyon-overlook-v01.webp)}
.pic-canyon-river-dawn{--pic-l:url(/assets/imagery/backgrounds-v4/2026-10-30-canyon-river-dawn-day-v01.webp);--pic-d:url(/assets/imagery/backgrounds-v1/2026-10-30-canyon-river-dawn-v01.webp)}
.pic-city-grid-valley{--pic-l:url(/assets/imagery/backgrounds-v4/2026-10-30-city-grid-valley-day-v01.webp);--pic-d:url(/assets/imagery/backgrounds-v1/2026-10-30-city-grid-valley-v01.webp)}
.pic-compass-meadow{--pic-l:url(/assets/imagery/backgrounds-v4/2026-10-30-compass-meadow-day-v01.webp);--pic-d:url(/assets/imagery/backgrounds-v1/2026-10-30-compass-meadow-v01.webp)}
.pic-conference-hall{--pic-l:url(/assets/imagery/backgrounds-v4/2026-10-30-conference-hall-day-v01.webp);--pic-d:url(/assets/imagery/backgrounds-v1/2026-10-30-conference-hall-v01.webp)}
.pic-dark-angular-ridges{--pic-l:url(/assets/imagery/backgrounds-v4/2026-10-30-dark-angular-ridges-day-v01.webp);--pic-d:url(/assets/imagery/backgrounds-v1/2026-10-30-dark-angular-ridges-v01.webp)}
.pic-desert-mesas-wide{--pic-l:url(/assets/imagery/backgrounds-v4/2026-10-30-desert-mesas-wide-day-v01.webp);--pic-d:url(/assets/imagery/backgrounds-v1/2026-10-30-desert-mesas-wide-v01.webp)}
.pic-desert-twin-buttes{--pic-l:url(/assets/imagery/backgrounds-v4/2026-10-30-desert-twin-buttes-day-v01.webp);--pic-d:url(/assets/imagery/backgrounds-v1/2026-10-30-desert-twin-buttes-v01.webp)}
.pic-house-framing-mountains{--pic-l:url(/assets/imagery/backgrounds-v4/2026-10-30-house-framing-mountains-day-v01.webp);--pic-d:url(/assets/imagery/backgrounds-v1/2026-10-30-house-framing-mountains-v01.webp)}
.pic-layered-peaks{--pic-l:url(/assets/imagery/backgrounds-v4/2026-10-30-layered-peaks-day-v01.webp);--pic-d:url(/assets/imagery/backgrounds-v1/2026-10-30-layered-peaks-v01.webp)}
.pic-observatory-control-room{--pic-l:url(/assets/imagery/backgrounds-v4/2026-10-30-observatory-control-room-day-v01.webp);--pic-d:url(/assets/imagery/backgrounds-v2/2026-10-30-observatory-control-room-v02.webp)}
.pic-river-valley-aerial{--pic-l:url(/assets/imagery/backgrounds-v4/2026-10-30-river-valley-aerial-day-v01.webp);--pic-d:url(/assets/imagery/backgrounds-v1/2026-10-30-river-valley-aerial-v01.webp)}
.pic-tool-pegboard{--pic-l:url(/assets/imagery/backgrounds-v4/2026-10-30-tool-pegboard-day-v01.webp);--pic-d:url(/assets/imagery/backgrounds-v1/2026-10-30-tool-pegboard-v01.webp)}