/* ========================================================================== Indore — homepage Figma: Rqwo562WA6jYmkKiR121n2, frame 42:33 "Homepage (pass 4, Dragan edit)" Reference frame 1440 wide, content column 1360 (40px margins). Vertical rhythm below is taken from the frame's own y offsets. Loads AFTER css/base.css, which carries everything this page shares with the rest of the site: the faces, the tokens, the reset, .wrap, the display type classes, .capsule / .btn / .opill, .nav, .snav, .mc, the footer and the reduced-motion block. What is left here is the homepage's nine sections and nothing else. ========================================================================== */ /* ---------- homepage override ---------- The capsule is tight below 400px and its label gives up tracking to fit. base.css holds the shared step (12px / .13em from 899px down); this last squeeze is the homepage's own, because the sign-in page's eyebrow uses the same .cap and has room for it. */ @media (max-width:399px){ .cap{font-size:12px;letter-spacing:.08em} } /* ========================================================================== 01 — Hero (42:34) 1440 x 900 ========================================================================== */ /* ---- the address bar ---- 100svh is the height of the screen WITH the browser's address bar showing. Sizing the hero to it means that the moment the bar slides away the screen is taller than the hero and the white intro section below shows at the bottom — a strip that appears and vanishes as the bar comes and goes. So the hero is sized to the LARGE viewport instead: the tallest the screen ever gets, so the photograph covers it in both states and nothing can peek in underneath. The cost is that with the bar showing, the last (100lvh - 100svh) of the hero sits below the fold — which is where the bottom block lives. It is lifted by exactly that difference, so it comes to rest its usual distance above the SMALL viewport's bottom edge and is visible either way. This is deliberately NOT scoped to phones. A tablet in landscape is wide enough for the 900-up layout and still has a collapsing toolbar, so it had the defect too. On a desktop browser the two units are equal, the difference is exactly zero, and both expressions resolve to the values they have always had — which is why widening this costs nothing. lvh and svh are both static: neither changes during a scroll, so this resolves once at layout and never animates. That is the whole point. The first declaration of each pair is the fallback for a browser that has neither unit. */ .hero{position:relative;background:var(--ink);overflow:hidden; min-height:100vh;min-height:100lvh} /* The video is the hero's ground. It crops exactly as the photograph it replaced — same object-fit, same object-position — and the poster is laid out by those same two properties, so the still and the first video frame sit in identical positions and the handover is invisible. The ink ground is there for the instant before the poster decodes. */ .hero__video{position:absolute;inset:0;width:100%;height:100%;max-width:none; object-fit:cover;object-position:50% 50%;background:var(--ink)} /* still in use: the fallback inside the