/* 3.1 — charcoal canvas, silver lettering and layered graphite brushwork. */
:root {
  --black: #08090b; --cream: #efeee9; --paper: #16181b;
  --gold: #a9c7e0; --coral: #a9c7e0; --orange: #737a86;
  --yellow: #d8dce4; --teal: #8b9daf; --blue: #536173;
  --violet: #a9a4bd; --pink: #b2a9bd;
  --muted: #a8abb2; --line: rgba(230,233,240,.16);
}
body { background: #090a0c; color: var(--cream); }
body::before { display: none; }
header { z-index: 20; background: rgba(9,10,12,.88); border-bottom-color: rgba(238,240,244,.1); color: var(--cream); }
.name { color: #efeee9; font-weight: 600; letter-spacing: .16em; }
.name span { color: #a9c7e0; }
.name img { background: #eeefef; padding: 3px; border: 1px solid #b9bdc5; }
nav a { color: #c0c2c7; }
nav a:hover { color: #f5f5f1; }
nav a::after { height: 1px; background: #a9c7e0; transform: none; }
header::after { height: 2px; background: linear-gradient(90deg, #747985, #c9d5e0); }
section { border-bottom: 1px solid rgba(238,240,244,.075); }
.hero, .about, .practice, .videos, .films, .reel, .gallery, .contact {
  color: var(--cream);
  background-color: #0b0c0e;
  background-image: radial-gradient(ellipse at 75% 30%, #25272c 0, #121316 40%, #08090b 78%);
  background-repeat: no-repeat;
  background-size: cover;
}
.hero { min-height: 100svh; padding-bottom: 64px; border-bottom: 1px solid rgba(238,240,244,.1); border-image: none; }
.hero::before { width: 56vw; height: 38vh; min-width: 0; top: 13%; right: -7vw; background: url('film-negative.svg') center/100% 100% no-repeat; opacity: .24; clip-path: none; transform: rotate(-14deg); filter: drop-shadow(0 24px 20px #000); }
.hero::after { z-index: 1; background: linear-gradient(90deg, rgba(9,10,12,.55) 0, rgba(9,10,12,.2) 38%, transparent 62%); pointer-events: none; }
.hero-content { width: 58%; }
.hero h1 { color: #b4c8d9; line-height: 1.7; font-size: 11px; letter-spacing: .18em; max-width: 480px; }
.hero-title { font-size: clamp(3.9rem,8.1vw,8.4rem); line-height: .98; max-width: 810px; color: #efeee9; letter-spacing: -.06em; text-shadow: 0 1px 0 #8a8b8d, 0 3px 0 #47494f, 0 6px 0 #23252a, 0 20px 35px #000; }
.hero-title em { color: #b7d0e4; text-shadow: 0 1px 0 #60798f, 0 3px 0 #354555, 0 6px 0 #19212c, 0 20px 35px #000; }
.hero-foot { color: #d2d2d5; border-color: rgba(231,234,240,.22); gap: 20px; }
.hero-foot p { color: #afb2ba; font-size: .86rem; line-height: 1.75; }
.play { color: #dde2e8; }
.play i { border-color: rgba(224,234,244,.5); background: rgba(34,38,44,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 22px #050506; }
.play:hover i { color: #0c1015; background: #b7d0e4; border-color: #b7d0e4; }
.hero-portrait { right: 4vw; bottom: -18px; width: min(39vw,560px); height: 83vh; border-radius: 0; box-shadow: none; filter: saturate(.68) contrast(1.05) brightness(.88); mask-image: url('portrait-brush-mask.svg'); mask-size: 100% 100%; mask-repeat: no-repeat; }
.hero-paint { background: url('film-negative.svg') center/100% 100% no-repeat; clip-path: none; border-radius: 0; filter: drop-shadow(12px 25px 20px rgba(0,0,0,.8)); }
.paint-a { width: 58vw; height: 26vh; right: -9vw; top: 36%; opacity: .72; }
.paint-b { width: 48vw; height: 23vh; right: 0; bottom: 3%; opacity: .45; }
.paint-c { width: 28vw; height: 18vh; right: 32vw; top: 20%; opacity: .26; box-shadow: none; }
.section-no, .about .section-no { color: #a9adb6; }
.section-no[style] { color: #a9adb6 !important; }
.section-link, .art-kicker, .practice-number, .gallery .section-link { color: #a9c7e0; }
.section-link { letter-spacing: .05em; }
.about { background-image: radial-gradient(ellipse at 20% 55%, #28292e, #111214 48%, #090a0c 85%); }
.about::before { width: 58vw; height: 160px; left: -20vw; bottom: 55px; background: url('film-negative.svg') center/100% 100% no-repeat; clip-path: none; opacity: .18; transform: rotate(10deg); }
.about-art { border-radius: 5px; border: 1px solid rgba(226,233,242,.2); background: #16181d; }
.about-art.depth-card { box-shadow: 10px 12px 0 #1c1e23, 11px 13px 0 #484c54, 0 35px 55px #030405; }
.about-art img { filter: saturate(.7) contrast(1.04); }
.about-art::after { background: linear-gradient(0deg, rgba(7,8,10,.9), transparent 48%); }
.about-art figcaption { color: #f1f0ec; }
.about-text { color: #e5e4df; }
.about-text em { color: #b7d0e4; }
.about-small { color: #b9bcc3; line-height: 1.85; }
.practice { background-image: linear-gradient(125deg, #090a0c 10%, #23252a 60%, #0c0d10 100%); }
.practice::before { background: url('film-negative.svg') center/100% 100% no-repeat; width: 620px; height: 170px; right: -180px; top: 70px; clip-path: none; opacity: .18; }
.practice::after { background: url('film-negative.svg') center/100% 100% no-repeat; width: 560px; height: 145px; bottom: -20px; right: -90px; border-radius: 0; transform: rotate(-17deg); opacity: .16; }
.practice h2, .videos h2, .films h2, .gallery h2, .television h3, .reel h2, .contact h2 { color: #ecebe6; text-shadow: 0 2px 0 #34363c, 0 16px 30px rgba(0,0,0,.5); }
.practice-item { background: linear-gradient(145deg, #282b30, #131519 70%); background-size: cover; border: 1px solid rgba(234,239,246,.13); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 7px 0 #08090c, 0 30px 50px rgba(0,0,0,.6); }
.practice-item h3 { color: #e7e9ed; }
.practice-item p { color: #b8bdc6; line-height: 1.8; }
.practice-item strong { color: #dfe5eb; }
.practice-logo { border-radius: 5px; background: #e5e7eb; padding: 8px; filter: none; }
.whatsapp-cta, .whatsapp-main { color: #dae5ed; background: #222b34; border: 1px solid #586878; border-radius: 5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 5px 0 #090d12, 0 14px 28px rgba(0,0,0,.35); }
.whatsapp-cta:hover, .whatsapp-main:hover { color: #0b1118; background: #b7d0e4; border-color: #b7d0e4; }
.videos { background-image: radial-gradient(ellipse at 50% 60%, #282a2f, #0b0c0e 74%); }
.video-card { background: linear-gradient(145deg, #292c33, #121418); border: 1px solid #393d46; border-radius: 7px; box-shadow: 0 7px 0 #07080a, 0 22px 38px #030405; }
.video-thumb, .video-thumb::after { border-radius: 3px; }
.video-card span { color: #e5e7eb; }
.video-card small { color: #a7c4dc; }
.video-thumb::after { background: rgba(0,0,0,.2); }
.films { background-image: radial-gradient(ellipse at 80% 10%, #292b30, #0b0c0e 48%); }
.films::before { width: 65vw; height: 170px; left: -30vw; top: 42%; background: url('film-negative.svg') center/100% 100% no-repeat; clip-path: none; opacity: .17; }
.film-heading img { border-radius: 5px; border: 1px solid rgba(230,234,242,.2); filter: saturate(.72); }
.film-heading img.depth-card { box-shadow: 10px 12px 0 #202228, 11px 13px 0 #4b505b, 0 30px 45px #030405; }
.film-list, .film { border-color: rgba(224,229,239,.16); }
.film-title { color: #e2e4e9; }
.film-year, .film-role { color: #a7adb8; }
.film-arrow { color: #b7d0e4; }
.film:hover { color: #c2d9ed; background: rgba(186,204,224,.06); }
.film:hover .film-title { color: #c2d9ed; }
.serial-art { border-radius: 8px; border: 1px solid rgba(227,235,246,.13); background: linear-gradient(135deg, #30333a, #13151a 75%); background-size: cover; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 45px rgba(0,0,0,.65); }
.serial-art img { border-radius: 3px; filter: saturate(.72); }
.serial-art img.depth-card { box-shadow: 0 20px 35px #090a0c; }
.serial-art span { color: #dfe4eb; }
.television-note { color: #b4b9c2; }
.reel { background-image: radial-gradient(ellipse at 70% 50%, #2e3036, #090a0c 75%); }
.reel::before { width: 550px; height: 180px; right: -90px; top: 55px; background: url('film-negative.svg') center/100% 100% no-repeat; clip-path: none; opacity: .22; }
.reel-art { filter: saturate(.6) contrast(1.04) brightness(.86); mask-image: linear-gradient(90deg, #000 75%, transparent 100%); }
.reel p, .kicker { color: #b2c8db; }
.large-play { color: #dce4ed; border-color: #8b97a6; background: rgba(43,48,57,.65); }
.large-play:hover { color: #0c1218; background: #b7d0e4; border-color: #b7d0e4; }
.gallery { background-image: radial-gradient(ellipse at 35% 50%, #26282d, #0a0b0d 72%); }
.still { border-radius: 4px; border: 5px solid #2a2c31; background: #111215; box-shadow: 1px 1px 0 #535761, 7px 9px 0 #07080b, 0 24px 35px #040506; }
.still img { filter: saturate(.78); }
.still:hover img { filter: saturate(1); }
.depth-card.is-tilting { box-shadow: 0 9px 0 #08090c, 0 32px 48px rgba(0,0,0,.8); }
.contact { background-image: radial-gradient(ellipse at 60% 60%, #31333b, #111216 50%, #08090b 85%); }
.contact::before { width: 68vw; height: 26vh; right: -23vw; bottom: 12%; border-radius: 0; background: url('film-negative.svg') center/100% 100% no-repeat; opacity: .18; transform: rotate(-24deg); }
.contact::after { width: 470px; height: 150px; left: -220px; top: 24%; background: url('film-negative.svg') center/100% 100% no-repeat; clip-path: none; opacity: .2; }
.contact h2 em { color: #b7d0e4; }
.contact-bottom { border-top-color: rgba(226,233,243,.2); margin-top: 40px; }
.email { color: #bcc5d1; border-bottom-color: #7d8794; }
.social-links a { color: #d7dee8; border-color: rgba(211,224,238,.32); border-radius: 5px; background: rgba(38,43,51,.6); }
.social-links a:hover { color: #0b1118; background: #b7d0e4; }
footer { background: #07080a; color: #a8adb7; border-top: 1px solid rgba(230,233,240,.08); }
footer a { color: #b4c8d9; }
.media-modal { background: rgba(4,5,7,.96); }
.modal-close { background: #2a323c; border-color: #8596aa; color: #f0f2f5; }
.motion-control { color: #dce2e9; background: rgba(23,26,32,.96); border-color: #535c69; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px #000; }
.motion-control:hover { background: #343b45; }
.motion-control:focus-visible, a:focus-visible, .modal-close:focus-visible { outline-color: #b7d0e4; }
@media(max-width:700px) {
  .hero { min-height: 105svh; padding-top: 100px; padding-bottom: 20px; border-bottom: 1px solid rgba(238,240,244,.1); border-image: none; background-image: radial-gradient(ellipse at 80% 65%, #32353c, #101114 55%, #090a0c 90%); }
  .hero::before { width: 100vw; height: 28vh; top: 58%; right: -32vw; opacity: .23; }
  .hero::after { background: linear-gradient(0deg, rgba(8,9,11,.38), transparent 30%); }
  .hero-content { width: 100%; }
  .hero h1 { font-size: 9px; color: #b4c8d9; }
  .hero-title { font-size: clamp(3rem,12.5vw,4.6rem); margin-top: 14px; color: #efeee9; }
  .hero-title em { color: #b7d0e4; }
  .hero-foot { border-color: rgba(231,234,240,.22); color: #d2d2d5; gap: 12px; }
  .hero-foot p { color: #afb2ba; font-size: .76rem; line-height: 1.6; }
  .hero-foot .play i { border-color: #8b97a6; color: #e5edf5; }
  .hero-portrait { position: relative; top: auto; bottom: auto; right: auto; align-self: flex-end; height: auto; aspect-ratio: .58; width: min(80vw,360px); margin-top: 30px; border-radius: 0; object-fit: cover; object-position: center 18%; }
  .paint-a { width: 104vw; height: 23vh; top: 67%; right: -30vw; }
  .paint-b { width: 95vw; height: 20vh; right: -20vw; bottom: 0; }
  .paint-c { width: 60vw; height: 16vh; top: 52%; right: 27vw; }
  .about-art { border-radius: 5px; }
  .film-heading img { height: 500px; }
  .serial-art { border-radius: 5px; }
  .reel-art { mask-image: linear-gradient(0deg, transparent, #000 12%); }
  .still { border-radius: 3px; border-width: 3px; }
  .contact::before { width: 120vw; right: -65vw; opacity: .14; }
  .contact h2 { font-size: clamp(3rem,14vw,5.2rem); }
  .whatsapp-main { flex-wrap: wrap; gap: 4px; }
}