:root { --ink:#090b11; --ink-2:#10131c; --paper:#f5f6f7; --mist:#b8c0ca; --line:rgba(245,246,247,.16); --accent:#3bd1ff; --display:"Space Grotesk",sans-serif; --body:"Manrope",sans-serif; color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; overflow-x:hidden; background:var(--ink); color:var(--paper); font-family:var(--body); font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; } button { font:inherit; } img { display:block; max-width:100%; } .content-width { width:min(100% - 48px, 1240px); margin-inline:auto; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:100; top:12px; left:12px; transform:translateY(-160%); background:var(--accent); color:var(--ink); padding:10px 14px; font-weight:800; }.skip-link:focus { transform:none; }
.cursor-glow { position:fixed; z-index:0; pointer-events:none; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle,rgba(59,209,255,.075),transparent 65%); transform:translate(-50%,-50%); transition:opacity .2s; }
.site-header { height:78px; padding:0 max(24px,calc((100vw - 1240px)/2)); position:fixed; z-index:20; top:0; left:0; right:0; display:flex; align-items:center; gap:32px; transition:background .3s,border-color .3s; border-bottom:1px solid transparent; }.site-header.is-scrolled { background:rgba(9,11,17,.84); backdrop-filter:blur(18px); border-color:var(--line); }.brand { width:94px; }.brand img,.site-footer img { width:100%; height:auto; }.desktop-nav { margin-left:auto; display:flex; gap:28px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#d2d7dd; }.desktop-nav a:hover,.site-footer a:hover { color:var(--accent); }.header-cta { border:1px solid var(--line); padding:9px 14px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; transition:.2s; }.header-cta:hover { border-color:var(--accent); color:var(--accent); }.menu-toggle,.mobile-nav { display:none; }
.hero { min-height:100svh; position:relative; display:grid; align-items:end; overflow:hidden; isolation:isolate; }.hero-image,.booking-portrait { position:absolute; inset:0; z-index:-3; background:center/cover no-repeat; }.hero-image { background-image:linear-gradient(90deg,#090b11 0%,rgba(9,11,17,.94) 23%,rgba(9,11,17,.28) 65%,rgba(9,11,17,.6)),url("fotos/ralzon-retrato-wide.png"); background-position:center; }.hero::after { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(0deg,#090b11 0%,transparent 26%); }.hero-noise { position:absolute; z-index:-1; inset:0; opacity:.16; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }.hero-content { padding:155px 0 160px; }.eyebrow,.section-label { margin:0 0 20px; color:var(--accent); font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }.hero h1 { margin:0; font:700 clamp(86px,16.2vw,226px)/.72 var(--display); letter-spacing:-.095em; max-width:900px; }.hero h1 em { color:transparent; font-style:normal; -webkit-text-stroke:1px rgba(245,246,247,.92); }.hero-intro { max-width:388px; margin:42px 0 30px; color:#d3d8df; font-size:clamp(16px,1.6vw,20px); }.hero-actions { display:flex; align-items:center; gap:25px; flex-wrap:wrap; }.button { display:inline-flex; align-items:center; gap:19px; padding:13px 18px; border:1px solid transparent; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; transition:transform .25s, background .25s, color .25s,border-color .25s; }.button:hover { transform:translateY(-3px); }.button-primary { background:var(--accent); color:var(--ink); }.button-primary:hover { background:#8ee8ff; }.button-outline { border-color:var(--line); }.button-outline:hover { border-color:var(--accent); color:var(--accent); }.text-link { display:inline-flex; align-items:center; gap:12px; padding-bottom:3px; border-bottom:1px solid var(--accent); color:var(--paper); font-size:12px; font-weight:800; letter-spacing:.055em; text-transform:uppercase; transition:color .2s; }.text-link:hover { color:var(--accent); }.hero-bottom { position:absolute; right:0; bottom:28px; display:flex; align-items:center; gap:12px; color:#d7dce1; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.hero-bottom i { width:4px; height:4px; border-radius:99px; background:var(--accent); }
.section { padding:clamp(82px,12vw,168px) 0; }.intro { position:relative; }.intro-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,.6fr); gap:clamp(30px,8vw,128px); align-items:end; }.display-text { margin:0; font:600 clamp(39px,5.35vw,82px)/.98 var(--display); letter-spacing:-.07em; }.intro-copy { color:var(--mist); }.intro-copy p { margin:0 0 28px; }
.about { background:#11141e; }.about-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(45px,9vw,150px); align-items:center; }.image-frame { position:relative; overflow:hidden; max-height:650px; }.image-frame::after { content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.2); mix-blend-mode:overlay; }.about-portrait img { width:100%; height:100%; object-fit:cover; }.about-content > p:not(.section-label) { color:var(--mist); max-width:590px; }.about-content .display-text { margin-bottom:32px; }.timeline { margin-top:clamp(70px,10vw,145px); display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); }.timeline-item { padding:20px 20px 0 0; min-height:150px; border-right:1px solid var(--line); }.timeline-item:not(:first-child) { padding-left:20px; }.timeline-item:last-child { border-right:0; }.timeline-item span { color:var(--accent); font:600 17px var(--display); letter-spacing:-.04em; }.timeline-item p { margin:10px 0; color:#c2c9d2; font-size:13px; line-height:1.55; }
.showcase { height:min(740px,84svh); position:relative; display:flex; align-items:end; overflow:hidden; }.showcase>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; }.showcase-gradient { position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,11,17,.9),rgba(9,11,17,.15) 72%),linear-gradient(0deg,rgba(9,11,17,.85),transparent 58%); }.showcase-content { position:relative; padding-bottom:72px; }.showcase h2 { max-width:690px; margin:0; font:600 clamp(40px,6vw,88px)/.95 var(--display); letter-spacing:-.07em; }.showcase p:not(.section-label) { max-width:350px; color:#e4e7eb; }
.section-heading { margin-bottom:56px; }.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid var(--line); background:var(--line); }.service-card { min-height:420px; padding:32px; background:var(--ink); transition:background .3s; }.service-card:hover { background:#111b27; }.service-number { color:var(--accent); font:500 13px var(--display); }.service-card h3 { margin:55px 0 13px; font:600 34px/1 var(--display); letter-spacing:-.06em; }.service-card p { max-width:335px; margin:0; color:var(--mist); font-size:14px; }.service-card ul { margin:32px 0 0; padding:0; list-style:none; color:#dbe1e8; font-size:12px; line-height:2.1; }.service-card li::before { content:"—"; color:var(--accent); margin-right:8px; }
.corporate-block { padding-top:0; }.corporate-grid { display:grid; grid-template-columns:1.2fr .8fr; min-height:610px; background:var(--ink-2); }.corporate-image { min-height:400px; overflow:hidden; }.corporate-image img { height:100%; width:100%; object-fit:cover; }.corporate-content { align-self:center; padding:clamp(35px,5vw,80px); }.corporate-content .display-text { margin-bottom:25px; }.corporate-content p:not(.section-label) { margin:0 0 31px; color:var(--mist); }
.music { display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(45px,9vw,145px); align-items:center; }.music-intro > p:not(.section-label) { max-width:500px; margin:29px 0; color:var(--mist); }.music-art { position:relative; min-height:590px; overflow:hidden; background:#0f1722; }.music-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,11,17,.75),transparent 62%),linear-gradient(0deg,rgba(9,11,17,.6),transparent 60%); }.music-art img { width:100%; height:100%; object-fit:cover; object-position:center; }.music-art span { position:absolute; z-index:1; bottom:30px; left:30px; color:white; font:500 clamp(50px,7vw,90px)/.78 var(--display); letter-spacing:-.1em; }.references { padding-top:0; }.references-title { max-width:1100px; margin:0; color:#ced4da; font:500 clamp(25px,3.2vw,51px)/1.18 var(--display); letter-spacing:-.055em; }
.gallery-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:47px; }.gallery-heading>p { max-width:370px; margin:0; color:var(--mist); font-size:14px; }.gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }.gallery-card { grid-column:span 4; position:relative; min-height:400px; margin:0; overflow:hidden; background:var(--ink-2); }.gallery-card-large { grid-column:span 8; }.gallery-card-wide { grid-column:span 8; }.gallery-open { display:block; width:100%; height:100%; position:absolute; inset:0; border:0; padding:0; background:none; cursor:zoom-in; }.gallery-open img { width:100%; height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.2,.7,.2,1); }.gallery-card:hover img { transform:scale(1.05); }.gallery-card::after { content:""; pointer-events:none; position:absolute; inset:0; background:linear-gradient(0deg,rgba(9,11,17,.8),transparent 42%); }.gallery-card figcaption { z-index:2; position:absolute; left:20px; right:20px; bottom:17px; display:flex; justify-content:space-between; align-items:center; color:#fff; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.gallery-card figcaption a { color:var(--accent); border-bottom:1px solid rgba(59,209,255,.55); }.gallery-card figcaption a:hover { color:white; }
.booking { min-height:680px; position:relative; display:flex; align-items:center; overflow:hidden; }.booking-portrait { z-index:-3; background-image:linear-gradient(90deg,#090b11 3%,rgba(9,11,17,.75) 38%,rgba(9,11,17,.15) 100%),url("fotos/ralzon-retrato-wide.png"); background-position:center; }.booking-overlay { position:absolute; inset:0; z-index:-2; background:linear-gradient(0deg,#090b11,transparent 56%); }.booking-content { padding-block:120px; }.booking h2 { max-width:790px; margin:0; font:600 clamp(53px,8vw,120px)/.9 var(--display); letter-spacing:-.085em; }.booking-content>p:not(.section-label) { max-width:470px; margin:29px 0 35px; color:#e0e5eb; }.booking-actions { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }.site-footer { min-height:150px; display:grid; grid-template-columns:80px 1fr auto; align-items:center; gap:35px; border-top:1px solid var(--line); }.site-footer div { display:flex; flex-wrap:wrap; gap:19px; color:#c5cbd3; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }.site-footer p { color:#8f98a5; font-size:11px; }
.lightbox { width:min(95vw,1200px); max-height:92svh; padding:0; overflow:visible; border:0; background:transparent; }.lightbox::backdrop { background:rgba(0,0,0,.9); backdrop-filter:blur(7px); }.lightbox img { max-height:86svh; max-width:100%; margin:auto; object-fit:contain; }.lightbox-close { position:absolute; top:-4px; right:-46px; height:36px; width:36px; border:1px solid var(--line); border-radius:50%; background:#11141e; color:white; font-size:26px; cursor:pointer; }.lightbox-download { position:absolute; right:0; bottom:-42px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--accent); }
.reveal { opacity:0; transform:translateY(28px); } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.001ms!important; transition-duration:.001ms!important; }.reveal { opacity:1; transform:none; } }
@media (max-width:800px) { .content-width { width:min(100% - 40px,1240px); }.cursor-glow { display:none; }.site-header { height:65px; padding:0 20px; }.brand { width:76px; }.desktop-nav,.header-cta { display:none; }.menu-toggle { display:grid; gap:5px; margin-left:auto; border:0; padding:8px 0 8px 8px; background:none; cursor:pointer; }.menu-toggle span:not(.sr-only) { display:block; width:24px; height:1px; background:var(--paper); transition:transform .2s; }.menu-toggle.is-open span:nth-child(2) { transform:translateY(3px) rotate(45deg); }.menu-toggle.is-open span:nth-child(3) { transform:translateY(-3px) rotate(-45deg); }.mobile-nav { position:absolute; top:64px; right:0; left:0; padding:17px 20px 22px; background:#10131c; border-bottom:1px solid var(--line); transform:translateY(-120%); opacity:0; visibility:hidden; transition:.25s; }.mobile-nav.is-open { transform:none; opacity:1; visibility:visible; }.mobile-nav a { display:block; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px; font-weight:700; }.hero-image { background-image:linear-gradient(0deg,#090b11 0%,rgba(9,11,17,.22) 72%),url("fotos/ralzon-retrato.png"); background-position:56% center; }.hero-content { padding:195px 0 135px; }.hero h1 { font-size:clamp(78px,24vw,142px); }.hero-intro { margin:30px 0 26px; max-width:300px; font-size:16px; }.hero-bottom { width:calc(100% - 40px); bottom:20px; overflow:hidden; white-space:nowrap; gap:10px; font-size:9px; }.section { padding:85px 0; }.intro-grid,.about-grid,.music,.corporate-grid { grid-template-columns:1fr; }.intro-grid { gap:25px; }.display-text { font-size:clamp(39px,11.8vw,64px); }.about-grid { gap:42px; }.about-portrait { height:440px; }.timeline { display:block; margin-top:64px; }.timeline-item,.timeline-item:not(:first-child) { display:grid; grid-template-columns:88px 1fr; gap:10px; min-height:auto; padding:17px 0; border-right:0; border-bottom:1px solid var(--line); }.timeline-item p { margin:0; }.showcase { height:580px; }.showcase>img { object-position:55% center; }.showcase-content { padding-bottom:42px; }.services-grid { grid-template-columns:1fr; }.service-card { min-height:0; padding:30px 25px; }.service-card h3 { margin-top:36px; }.corporate-block { padding-top:0; }.corporate-grid { min-height:0; }.corporate-image { height:390px; }.corporate-content { padding:51px 28px; }.music { gap:42px; }.music-art { min-height:450px; }.references { padding-top:0; }.gallery-heading { display:block; }.gallery-heading>p { margin-top:22px; }.gallery-grid { grid-template-columns:1fr 1fr; gap:10px; }.gallery-card,.gallery-card-large,.gallery-card-wide { grid-column:span 1; min-height:275px; }.gallery-card-large,.gallery-card-wide { grid-column:span 2; min-height:315px; }.gallery-card figcaption { left:13px; right:13px; bottom:12px; font-size:9px; }.booking { min-height:620px; }.booking-portrait { background-image:linear-gradient(0deg,#090b11 3%,rgba(9,11,17,.35) 76%),url("fotos/ralzon-retrato.png"); background-position:60% center; }.booking-content { padding-block:115px 70px; align-self:end; }.booking h2 { font-size:clamp(55px,15vw,90px); }.site-footer { min-height:200px; grid-template-columns:65px 1fr; gap:22px; padding-block:35px; }.site-footer p { grid-column:1/-1; margin:0; }.lightbox-close { top:-45px; right:0; } }

/* Press-kit content refinements */
.hero-main-logo { width:clamp(220px,25vw,350px); height:auto; margin:0; object-fit:cover; }
.about-kicker { color:var(--mist); max-width:440px; font-size:18px; }
.timeline { position:relative; gap:12px; border-top:0; }
.timeline::before { content:""; position:absolute; top:20px; left:0; right:0; height:1px; background:linear-gradient(90deg,var(--accent),rgba(59,209,255,.15)); }
.timeline-item,.timeline-item:not(:first-child) { position:relative; min-height:252px; padding:49px 18px 20px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(255,255,255,.04),transparent 55%); transition:transform .25s,border-color .25s,background .25s; }
.timeline-item:hover { z-index:1; transform:translateY(-7px); border-color:rgba(59,209,255,.62); background:#172431; }
.timeline-dot { position:absolute; top:14px; left:19px; width:13px; height:13px; border:3px solid #11141e; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(59,209,255,.13); }
.timeline-item .timeline-year { display:block; color:var(--accent); font:600 18px var(--display); letter-spacing:-.04em; }
.timeline-item h3 { margin:25px 0 9px; font:600 19px/1.1 var(--display); letter-spacing:-.045em; }.timeline-item p { margin:0; }.timeline-item em { color:#f4f6f9; }
.bios { display:grid; grid-template-columns:.43fr .57fr; gap:clamp(35px,8vw,105px); margin-top:52px; padding:39px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.bios-intro h3 { margin:0 0 15px; font:600 clamp(29px,3.1vw,46px)/1 var(--display); letter-spacing:-.06em; }.bios-intro p:not(.section-label) { max-width:330px; margin:0; color:var(--mist); font-size:14px; }.bio-accordion { display:grid; gap:8px; }.bio-accordion details { border:1px solid var(--line); background:rgba(4,7,12,.26); }.bio-accordion summary { position:relative; display:grid; grid-template-columns:1fr auto 25px; gap:18px; align-items:center; padding:19px 20px; cursor:pointer; list-style:none; }.bio-accordion summary::-webkit-details-marker { display:none; }.bio-accordion summary span { font:700 15px var(--display); }.bio-accordion summary small { color:#8f9aa6; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }.bio-accordion summary b { color:var(--accent); font-size:21px; font-weight:400; text-align:right; transition:transform .25s; }.bio-accordion details[open] summary { border-bottom:1px solid var(--line); }.bio-accordion details[open] summary b { transform:rotate(45deg); }.bio-panel { padding:21px 20px 20px; }.bio-copy { white-space:pre-line; color:#d7dde4; font-size:13px; line-height:1.75; }.copy-button { margin-top:19px; display:inline-flex; gap:9px; align-items:center; border:0; padding:0 0 4px; border-bottom:1px solid var(--accent); background:none; color:var(--accent); cursor:pointer; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.copy-button:hover { color:white; }.copy-button.is-copied { color:#9cffa3; border-color:#9cffa3; }.about-story { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(40px,9vw,150px); margin-top:48px; }.about-story p { margin:0; color:var(--mist); }
.services-lead { max-width:670px; margin:25px 0 0; color:var(--mist); font-size:17px; }.service-card { min-height:455px; }.corporate-grid { grid-template-columns:.8fr 1.2fr; }.corporate-image img { object-position:78% center; }.music-art { min-height:0; aspect-ratio:1; }.music-art::after,.music-art span { display:none; }
.about-bio-cta { margin-top:32px; }
@media (max-width:800px) { .hero-main-logo { width:190px; }.hero-content { padding-top:160px; }.timeline { display:grid; grid-template-columns:1fr; gap:8px; }.timeline::before { top:0; bottom:0; left:20px; right:auto; width:1px; height:auto; background:linear-gradient(var(--accent),rgba(59,209,255,.15)); }.timeline-item,.timeline-item:not(:first-child) { min-height:0; padding:20px 20px 22px 55px; }.timeline-dot { top:19px; left:14px; }.timeline-item h3 { margin:16px 0 8px; }.bios { grid-template-columns:1fr; gap:28px; margin-top:36px; padding:32px 0; }.bio-accordion summary { grid-template-columns:1fr 22px; gap:8px; }.bio-accordion summary small { grid-column:1; }.bio-accordion summary b { grid-column:2; grid-row:1 / span 2; }.about-story { grid-template-columns:1fr; gap:22px; margin-top:35px; }.showcase>img { object-position:70% center; }.corporate-image img { object-position:77% center; }.music-art { min-height:0; } }

/* Uniform press-photo thumbnails */
.gallery-grid { grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery-card,.gallery-card-large,.gallery-card-wide { grid-column:span 1; min-height:0; aspect-ratio:1; }
.gallery-card .gallery-open img { object-position:65% center; }
.gallery-card-logo .gallery-open { display:grid; place-items:center; padding:15%; background:#242021; }
.gallery-card-logo .gallery-open img { object-fit:contain; object-position:center; }
.gallery-card-logo-light .gallery-open { background:#f5f6f7; }
@media (max-width:800px) { .gallery-grid { grid-template-columns:repeat(2,1fr); gap:10px; }.gallery-card,.gallery-card-large,.gallery-card-wide { grid-column:span 1; min-height:0; aspect-ratio:1; } }

/* Vertical studio loop: intentionally smaller than its grid column. */
.about-studio-video { width:min(100%,355px); height:535px; margin:0 auto; align-self:center; background:#080a10; }
.about-studio-video video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.about-studio-video figcaption { position:absolute; z-index:1; inset:auto 0 0; margin:0; padding:42px 17px 15px; background:linear-gradient(transparent,rgba(8,10,16,.92)); color:#e5eaf0; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
@media (max-width:800px) { .about-studio-video { width:min(100%,315px); height:460px; } }