html {scroll-behavior:smooth}
#ramon-site {position:relative;overflow:clip}
/* Let the viewport-wide hero extend beyond the centered portfolio column. */
#ramon-site #ramon-preview .phone {overflow:visible}
#ramon-site.hero-layout .site-header {position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100%,1200px);z-index:3;color:#fff}
#ramon-site.hero-layout .site-nav {position:absolute;top:92px;left:50%;transform:translateX(-50%);width:min(100%,1200px);z-index:3;border:0}
#ramon-site.hero-layout .site-nav button {color:#eee;text-shadow:0 1px 8px #000}
#ramon-site.hero-layout .site-nav button[aria-current=page] {color:#fff;border-color:#fff}
#ramon-site.hero-layout .site-theme {border-color:#ffffff70;background:#0003}
#ramon-site .immersive-hero {position:relative;width:100vw;margin-left:calc(50% - 50vw);height:100svh;min-height:540px;background:#101814;color:#fff;isolation:isolate}
#ramon-site .intro-video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;z-index:-2}
#ramon-site .hero-shade {position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 30%,transparent 55%,rgba(0,0,0,.35) 78%,var(--paper) 100%);pointer-events:none}
#ramon-site .hero-copy {position:absolute;left:max(30px,calc((100vw - 1140px)/2));bottom:120px}
#ramon-site .hero-copy p {font-size:11px;letter-spacing:2px;line-height:1.6;margin:0 0 18px}
#ramon-site .hero-copy h1 {font-size:clamp(54px,7vw,102px);line-height:.94;letter-spacing:-4px;margin:0;color:#fff;text-shadow:0 2px 25px #0003}
#ramon-site .hero-actions {position:absolute;bottom:40px;left:max(30px,calc((100vw - 1140px)/2));right:max(30px,calc((100vw - 1140px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px}
#ramon-site .gallery-jump {font-size:13px;color:#fff;display:inline-flex;gap:25px;align-items:center;min-height:44px}
#ramon-site .gallery-jump span {font-size:24px}
#ramon-site .intro-toggle {border:1px solid #ffffff65;background:#0003;color:#fff;border-radius:30px;font-size:12px;min-height:44px;padding:10px 18px}
#ramon-site .video-message {position:absolute;right:30px;bottom:90px;font-size:12px;max-width:260px;line-height:1.5;background:#181818d9;padding:12px;border-radius:8px}
#ramon-site #ramon-preview .filters {padding-top:24px;padding-bottom:22px;scroll-margin-top:0}
#ramon-site button:focus-visible,#ramon-site a:focus-visible {outline:2px solid currentColor;outline-offset:5px}
@media(max-width:649px){
 #ramon-site.hero-layout .site-nav {top:80px;gap:17px}
 #ramon-site .immersive-hero {min-height:520px}
 #ramon-site .hero-copy {left:20px;bottom:130px}
 #ramon-site .hero-copy h1 {font-size:clamp(56px,14vw,80px);letter-spacing:-2.8px}
 #ramon-site .hero-copy p {max-width:240px;font-size:10px;letter-spacing:1.5px}
 #ramon-site .hero-actions {left:20px;right:20px;bottom:38px}
 #ramon-site .video-message {left:20px;right:20px;bottom:90px;max-width:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}