/* Home hero: interior design CAD drawing that draws itself (2026-10-23, v2). Black, white lines, drafting grid. */
.rg-hero { position: relative; background-color: #222; color: #fff; min-height: calc(100vh - 98px); display: flex; align-items: center; justify-content: center; padding: 56px 20px 40px; overflow: hidden;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
                    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-position: center center; }
.rg-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, #222 85%); pointer-events: none; }
.rg-hero-inner { position: relative; width: 100%; max-width: min(1180px, max(720px, calc((100vh - 400px) * 2.33))); text-align: center; }
.rg-hero h1 { margin: 0; font: 300 clamp(22px, 3.2vw, 44px)/1.2 Poppins, sans-serif; letter-spacing: .34em; text-transform: uppercase; color: #fff; padding-left: .34em; opacity: 0; animation: rg-title 1.6s cubic-bezier(.2,.7,.2,1) .2s forwards; }
.rg-hero h1 small { display: block; margin-top: 12px; font-size: clamp(10px, 1vw, 13px); font-weight: 400; letter-spacing: .5em; color: rgba(255,255,255,.6); }
.rg-cad { display: block; width: 100%; height: auto; margin: 22px auto 0; overflow: visible; font-family: Poppins, sans-serif; }
.rg-cad .ln { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 1.15; stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rg-draw var(--t, 1.2s) cubic-bezier(.5,0,.3,1) forwards; animation-delay: var(--d); }
.rg-cad .heavy { stroke-width: 2; }
.rg-cad .thin { stroke: rgba(255,255,255,.55); stroke-width: .8; }
.rg-cad .faint { stroke: rgba(255,255,255,.28); stroke-width: .8; }
.rg-cad .hidden-l { stroke: rgba(255,255,255,.38); stroke-width: .8; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; animation: rg-fade .8s ease forwards; animation-delay: var(--d); }
.rg-cad .dash { stroke-dasharray: 6 5; }
.rg-cad .center { stroke-dasharray: 18 4 2 4; }
.rg-cad .dash, .rg-cad .center { stroke-dashoffset: 0; opacity: 0; animation: rg-fade 1s ease forwards; animation-delay: var(--d); }
.rg-cad text { fill: rgba(255,255,255,.75); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: 0; animation: rg-fade .9s ease forwards; animation-delay: var(--d); }
.rg-cad text.dim { font-size: 12px; letter-spacing: .08em; fill: rgba(255,255,255,.85); }
.rg-cad text.tb { font-size: 9px; letter-spacing: .14em; fill: rgba(255,255,255,.6); }
.rg-cad text.tb-b { font-size: 11px; letter-spacing: .18em; fill: #fff; }
.rg-cad .tag { fill: #222; stroke: rgba(255,255,255,.85); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; animation: rg-fade .6s ease forwards; animation-delay: var(--d); }
.rg-cad .glass { fill: rgba(255,255,255,.035); stroke: none; opacity: 0; animation: rg-fade 1.5s ease forwards; animation-delay: var(--d); }
.rg-cta { display: inline-block; margin-top: 22px; font: 500 13px/1 Poppins, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.55); padding: 14px 24px; opacity: 0; animation: rg-fade 1s ease 6.4s forwards; transition: background .25s, color .25s; }
.rg-cta:hover, .rg-cta:focus { color: #000; background: #fff; text-decoration: none; }
@keyframes rg-draw { to { stroke-dashoffset: 0; } }
@keyframes rg-fade { to { opacity: 1; } }
@keyframes rg-title { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; letter-spacing: .34em; } }
@media (max-width: 767.98px) {
  .rg-hero { min-height: 0; padding: 44px 12px 56px; background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px; }
  .rg-hero h1 { letter-spacing: .22em; padding-left: .22em; } .rg-hero h1 small { letter-spacing: .32em; }
  @keyframes rg-title { from { opacity: 0; letter-spacing: .4em; } to { opacity: 1; letter-spacing: .22em; } }
  .rg-cad { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .rg-hero h1, .rg-cad .ln, .rg-cad .dash, .rg-cad .center, .rg-cad .hidden-l, .rg-cad text, .rg-cad .tag, .rg-cad .glass, .rg-cta { animation: none; opacity: 1; stroke-dashoffset: 0; }
}