/* Gil-Bar Proposal Engine - solid colour blocks v5 (8/6/2026). No gradients. Loaded after the base styles. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }
:root { --gb-red:#C0272D; --gb-red-d:#A81F25; --band-hero:#FCEFEF; --band-grey:#F4F6F8; --band-cream:#FAF6F1; --hair:#E9DEDE; --ink:#191b1f; }
body::before { background:none; animation:none; display:none; }
body:has(header) { padding-left:236px; }
html, body { overflow-x:hidden; }
header { position:fixed; top:0; left:0; bottom:0; width:236px; height:auto; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:16px; padding:22px 16px; background:var(--gb-red); border-bottom:0; border-right:0; backdrop-filter:none; z-index:40; box-shadow:none; }
header .logo { background:#fff; border-radius:12px; padding:12px 10px; display:block; box-shadow:none; }
header .logo img { height:46px; margin:0 auto; display:block; }
header nav { flex-direction:column; gap:3px; }
header nav a { position:relative; color:rgba(255,255,255,.86); font-size:14px; font-weight:600; padding:11px 14px 11px 18px; border-radius:10px; text-align:left; transition:background .18s ease, color .18s ease; }
header nav a:hover { background:rgba(0,0,0,.16); color:#fff; }
header nav a::after { content:""; position:absolute; left:6px; right:auto; top:9px; bottom:9px; width:3px; height:auto; border-radius:3px; background:#fff; transform:scaleY(0); transform-origin:center; transition:transform .22s cubic-bezier(.2,.7,.3,1); }
header nav a:hover::after { transform:scaleY(1); }
header::after { content:""; display:block; margin-top:auto; height:40px; background:url(https://gil-bar.com/wp-content/uploads/2024/09/AMBIENT_SELECTED_LOGO_WHITE-6.png) no-repeat center; background-size:136px auto; opacity:.92; }
body:has(.stats)::before, body:has(.getrow)::before { display:block; content:""; position:absolute; top:0; left:236px; right:0; z-index:-1; animation:none; background:var(--band-hero); }
body:has(.stats)::before { height:252px; }
body:has(.getrow)::before { height:206px; }
body:has(.stats) main, body:has(.getrow) main { display:flex; flex-direction:column; padding-top:52px; }
body:has(.stats) main > *, body:has(.getrow) main > * { min-width:0; }
body:has(.stats) .hero-logo { display:none; }
body:has(.stats) h1 { color:var(--ink); font-size:44px; letter-spacing:-1.3px; margin-bottom:12px; }
body:has(.getrow) h1 { color:var(--ink); font-size:38px; letter-spacing:-1.1px; }
h1 em { color:var(--gb-red); background:none; -webkit-text-fill-color:currentColor; }
body:has(.stats) .sub, body:has(.getrow) .sub { color:#7B7276; font-size:15.5px; max-width:600px; }
body:has(.stats) .stats { margin-bottom:26px; }
body:has(.stats) .stats div { border-right-color:rgba(192,39,45,.20); position:relative; transition:transform .26s cubic-bezier(.2,.7,.3,1); }
body:has(.stats) .stats b { color:var(--gb-red); font-size:30px; }
body:has(.stats) .stats span { color:#8A8085; }
body:has(.stats) .stats div::after { content:""; position:absolute; left:24px; right:24px; bottom:-9px; height:3px; border-radius:3px; background:var(--gb-red); transform:scaleX(0); transition:transform .34s cubic-bezier(.2,.7,.3,1); }
body:has(.stats) .stats div:hover { transform:translateY(-3px); }
body:has(.stats) .stats div:hover::after { transform:scaleX(1); }
body:has(.stats) .card { border-radius:20px; border:1px solid var(--hair); padding:32px; background:#fff; box-shadow:0 18px 44px rgba(60,25,27,.10); }
.card { transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s cubic-bezier(.2,.7,.3,1); }
.tiles { gap:18px; }
.drop { position:relative; border-style:solid; border-width:1.5px; border-color:var(--hair); border-radius:16px; padding:38px 22px 30px; background:#FDFAFA; transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s ease, border-color .18s ease, background .18s ease; }
.drop:hover { border-color:var(--gb-red); background:#fff; transform:translateY(-4px); box-shadow:0 16px 34px rgba(60,25,27,.12); }
.drop .d-icon { width:50px; height:50px; border-radius:14px; background:#F7E7E8; transition:transform .28s cubic-bezier(.2,.7,.3,1); }
.drop:hover .d-icon { transform:translateY(-2px) scale(1.10) rotate(-5deg); }
.drop .d-title { font-size:16px; }
.drop .d-req { display:none; }
.drop::before { position:absolute; top:12px; left:14px; font-family:Inter,sans-serif; font-size:9.5px; font-weight:800; letter-spacing:.9px; padding:3px 8px; border-radius:999px; }
.tiles label.drop:first-of-type::before { content:"REQUIRED"; background:var(--gb-red); color:#fff; }
.tiles label.drop:last-of-type::before { content:"RECOMMENDED"; background:#EDEFF2; color:#6A7481; }
.drop.has-file::before { content:"READY"; background:#2E7D43; color:#fff; }
.drop[style*="192, 39, 45"] { border-color:var(--gb-red); background:#fff; transform:translateY(-4px); animation:pulseRing 1.2s ease-out infinite; }
@keyframes pulseRing { from { box-shadow:0 0 0 0 rgba(192,39,45,.36); } to { box-shadow:0 0 0 16px rgba(192,39,45,0); } }
button#gen { position:relative; overflow:hidden; background:var(--gb-red); border-radius:12px; padding:18px 32px; font-size:16.5px; margin-top:20px; box-shadow:0 10px 24px rgba(192,39,45,.26); }
button#gen:hover:not(:disabled) { background:var(--gb-red-d); transform:translateY(-2px); box-shadow:0 16px 34px rgba(192,39,45,.34); }
button#gen:active:not(:disabled) { transform:translateY(0) scale(.995); }
button#gen:hover:not(:disabled) .arr { transform:translateX(8px); }
button#gen::after { content:""; position:absolute; top:0; bottom:0; left:-40%; width:34%; pointer-events:none; background:linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent); transform:skewX(-18deg); animation:sheen 3.6s ease-in-out infinite; }
button#gen:disabled::after { animation:none; opacity:0; }
@keyframes sheen { 0% { left:-40%; } 55% { left:120%; } 100% { left:120%; } }
.brands { order:1; margin:44px 0 0; padding:30px 0 34px; background:var(--band-grey); border:0; border-radius:0; box-shadow:0 0 0 100vmax var(--band-grey); clip-path:inset(0 -100vmax); }
.brands h3 { color:#6B7480; }
.how { order:2; margin:0; padding:40px 0 44px; background:var(--band-cream); box-shadow:0 0 0 100vmax var(--band-cream); clip-path:inset(0 -100vmax); }
.getrow { order:3; }
.drafts-note { order:4; margin:34px 0 44px; }
.logotile { border-color:#E6E9ED; transition:transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease, border-color .24s ease; }
.logotile:hover { transform:translateY(-4px) scale(1.05); border-color:rgba(192,39,45,.4); box-shadow:0 12px 26px rgba(60,25,27,.12); }
.how div { border-radius:14px; background:#fff; border:1px solid #F0E7DC; transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s ease; }
.how div:hover { transform:translateY(-5px); box-shadow:0 16px 36px rgba(60,25,27,.10); }
.how .n { box-shadow:none; transition:transform .26s cubic-bezier(.2,.7,.3,1); }
.how div:hover .n { transform:scale(1.14) rotate(-8deg); }
a.docshot:hover { transform:translateY(-8px) rotate(-.6deg); }
.docshot img { min-height:430px; background:#fff; }
.docshot .stamp { animation:stampPop 4.5s ease-in-out infinite; }
@keyframes stampPop { 0%, 82%, 100% { transform:rotate(6deg) scale(1); } 88% { transform:rotate(2deg) scale(1.16); } 94% { transform:rotate(6deg) scale(1); } }
body:has(.getrow) .getrow { margin-top:30px; }
footer.site { margin-top:0; }
footer.site .cols .about::before { content:""; display:block; width:158px; height:34px; margin:0 0 14px; background:url(https://gil-bar.com/wp-content/uploads/2024/09/AMBIENT_SELECTED_LOGO_WHITE-6.png) no-repeat left center; background-size:contain; opacity:.95; }
@supports (animation-timeline: view()) { .brands, .how, footer.site .cols { animation:riseIn linear both; animation-timeline:view(); animation-range: entry 0% entry 42%; } }
@keyframes riseIn { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
:focus-visible { outline:3px solid var(--gb-red); outline-offset:3px; border-radius:8px; }
@media (max-width: 900px) { body:has(header) { padding-left:0; } header { position:sticky; width:auto; bottom:auto; flex-direction:row; align-items:center; justify-content:space-between; padding:12px 16px; } header nav { flex-direction:row; } header::after { display:none; } header .logo img { height:34px; } body:has(.stats)::before, body:has(.getrow)::before { left:0; } }
/* v6 - all-white page, red rail stays (8/6/2026) */
body:has(.stats)::before, body:has(.getrow)::before { display:none; }
body:has(.stats) main, body:has(.getrow) main { padding-top:60px; }
body:has(.stats) .card { border-color:#ECEEF1; box-shadow:0 14px 38px rgba(25,27,31,.08); }
body:has(.stats) .stats div { border-right-color:#ECEEF1; }
.drop { background:#fff; border-color:#E4E7EB; }
.drop:hover { background:#fff; }
.brands { background:#fff; box-shadow:none; clip-path:none; border:0; border-top:1px solid #ECEEF1; border-bottom:1px solid #ECEEF1; border-radius:0; margin:46px 0 0; padding:32px 0 36px; }
.how { background:#fff; box-shadow:none; clip-path:none; padding:42px 0 46px; }
.how div { background:#fff; border:1px solid #ECEEF1; }
.how div:hover { background:#fff; }
.logotile { background:#fff; border-color:#ECEEF1; }
/* v7 - black rail with red accents (8/6/2026) */
header { background:#111315; border-right:1px solid #202327; }
header .logo { background:#fff; border-radius:12px; }
header nav { border-top:2px solid #C0272D; padding-top:16px; }
header nav a { color:#B4B9C0; }
header nav a:hover { background:rgba(192,39,45,.18); color:#fff; }
header nav a::after { background:#E0393F; }
header::after { border-top:1px solid rgba(255,255,255,.10); padding-top:18px; height:58px; opacity:.85; background-position:center bottom; }
/* v8 - cleaner, more professional (8/6/2026) */
header { padding:26px 18px; gap:22px; }
header .logo { background:transparent; box-shadow:none; padding:0 6px; border-radius:0; }
header .logo img { height:38px; filter:brightness(0) invert(1); opacity:.95; }
header nav { border-top:1px solid rgba(255,255,255,.09); padding-top:20px; gap:2px; }
header nav a { color:#9BA2AB; font-size:13.5px; font-weight:500; letter-spacing:.1px; padding:10px 14px 10px 16px; border-radius:8px; }
header nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
header nav a::after { background:#E0393F; left:5px; top:11px; bottom:11px; width:2px; }
header::after { border-top:1px solid rgba(255,255,255,.09); padding-top:20px; height:52px; opacity:.55; }
.logotile { border:0; background:transparent; box-shadow:none; height:56px; padding:6px 20px; border-radius:0; }
.logotile img { filter:grayscale(1); opacity:.5; transition:filter .25s ease, opacity .25s ease; max-height:34px; }
.logotile:hover { transform:none; box-shadow:none; border:0; }
.logotile:hover img { filter:none; opacity:1; }
.brands h3 { font-size:11px; letter-spacing:2px; color:#9AA0A6; }
.tiles label.drop:first-of-type::before { background:#fff; color:#C0272D; border:1px solid rgba(192,39,45,.35); letter-spacing:.7px; }
.tiles label.drop:last-of-type::before { background:#fff; color:#8A9099; border:1px solid #E4E7EB; letter-spacing:.7px; }
.drop.has-file::before { background:#fff; color:#2E7D43; border:1px solid rgba(46,125,67,.45); }
body:has(.stats) h1 { font-size:40px; letter-spacing:-1px; }
body:has(.stats) .sub, body:has(.getrow) .sub { color:#6E747C; font-size:15px; }
body:has(.stats) .stats b { font-size:27px; letter-spacing:-.5px; }
body:has(.stats) .stats span { font-size:10.5px; letter-spacing:1.3px; color:#9AA0A6; }
body:has(.stats) .card { border-radius:16px; border-color:#E8EBEF; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.07); }
.drop { border-radius:14px; border-color:#E4E7EB; }
.how div { border-radius:12px; border-color:#EDEFF2; }
button#gen { border-radius:10px; font-size:16px; box-shadow:0 6px 16px rgba(192,39,45,.22); }
button#gen:hover:not(:disabled) { box-shadow:0 10px 24px rgba(192,39,45,.28); }
button#gen::after { animation:none; opacity:0; }
button#gen:hover:not(:disabled)::after { animation:sheen 1.1s ease-out; }
/* v8.1 - logo wall legibility */
.logotile { height:62px; padding:6px 24px; }
.logotile img { filter:grayscale(1) contrast(1.15); opacity:.78; max-height:42px; max-width:132px; }
.logotile:hover img { filter:none; opacity:1; }
.brands { padding:36px 0 40px; }
/* v9 - lighter charcoal rail, red accents, bigger logo (8/6/2026) */
header { background:#1C2026; border-right:3px solid #C0272D; padding:30px 18px 24px; gap:20px; }
header .logo { padding:0 4px 18px; border-bottom:1px solid rgba(192,39,45,.55); }
header .logo img { height:54px; filter:brightness(0) invert(1); opacity:1; }
header nav { border-top:0; padding-top:6px; gap:3px; }
header nav a { color:#AFB6BF; font-size:14px; font-weight:600; padding:11px 14px 11px 17px; }
header nav a:hover { background:rgba(192,39,45,.22); color:#fff; }
header nav a::after { background:#F0575F; width:3px; left:5px; top:10px; bottom:10px; border-radius:3px; }
header::after { border-top:1px solid rgba(192,39,45,.45); padding-top:20px; margin-top:auto; height:54px; opacity:.9; }