:root{
  --black:#202024;
  --cream:#fff4dc;
  --paper:#fffaf0;
  --coral:#ff5b43;
  --orange:#ff9f1c;
  --yellow:#ffd72e;
  --teal:#16b8bd;
  --blue:#2854b8;
  --violet:#7557d9;
  --pink:#ed4f8b;
  --muted:#5f5a52;
  --line:rgba(32,32,36,.2);
}

body{
  background:
    radial-gradient(circle at 7% 12%,rgba(255,215,46,.28),transparent 23%),
    radial-gradient(circle at 96% 45%,rgba(22,184,189,.16),transparent 26%),
    var(--cream);
  color:var(--black);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  z-index:-1;
  width:360px;
  height:72px;
  right:-95px;
  top:34vh;
  background:var(--coral);
  opacity:.08;
  transform:rotate(-13deg);
  clip-path:polygon(0 24%,100% 0,90% 78%,7% 100%);
}

header{
  position:fixed;
  padding:18px 4vw;
  background:rgba(255,244,220,.9);
  color:var(--black);
  border-bottom:1px solid rgba(32,32,36,.09);
  backdrop-filter:blur(16px);
}

.name{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--black);
}

.name::before{display:none}
.name img{
  width:42px;
  height:42px;
  object-fit:contain;
  border-radius:50%;
}

.name span{color:var(--coral)}
nav{font-weight:700}
nav a{position:relative}
nav a:hover{color:var(--coral)}
nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-7px;
  height:4px;
  background:var(--teal);
  transition:.25s;
  transform:rotate(-2deg);
}
nav a:hover::after{right:0}

.hero{
  min-height:100vh;
  padding-top:150px;
  background:
    radial-gradient(circle at 88% 17%,rgba(255,255,255,.72),transparent 21%),
    radial-gradient(circle at 72% 76%,rgba(22,184,189,.25),transparent 26%),
    linear-gradient(118deg,#fff4dc 0 56%,#ffd859 56% 73%,#ff7054 73% 100%);
}

.hero::before{
  content:"";
  position:absolute;
  z-index:1;
  width:28vw;
  min-width:220px;
  height:74px;
  right:-40px;
  top:16%;
  background:var(--teal);
  opacity:.88;
  transform:rotate(-10deg);
  clip-path:polygon(0 20%,100% 0,92% 80%,7% 100%);
}

.hero::after{
  background:
    linear-gradient(90deg,rgba(255,244,220,.98) 0,rgba(255,244,220,.88) 43%,transparent 66%),
    linear-gradient(0deg,rgba(32,32,36,.08),transparent 35%);
}

.hero-content{z-index:3;width:58%}
.hero-portrait{
  position:absolute;
  z-index:2;
  right:5vw;
  bottom:0;
  width:min(36vw,520px);
  height:78vh;
  object-fit:cover;
  object-position:center 18%;
  border-radius:44% 56% 18% 18%/21% 29% 4% 4%;
  box-shadow:18px 18px 0 rgba(40,84,184,.2);
}
.hero-paint{position:absolute;z-index:1;pointer-events:none}
.paint-a{
  width:42vw;
  height:94px;
  right:-4vw;
  top:28%;
  background:#16b8bd;
  transform:rotate(-9deg);
  clip-path:polygon(0 22%,100% 0,92% 80%,7% 100%);
}
.paint-b{
  width:34vw;
  height:82px;
  right:8vw;
  bottom:12%;
  background:#7557d9;
  transform:rotate(8deg);
  clip-path:polygon(0 18%,100% 0,91% 84%,6% 100%);
}
.paint-c{
  width:190px;
  height:190px;
  right:30vw;
  top:19%;
  border-radius:48% 52% 62% 38%;
  background:#ff5b43;
  opacity:.75;
}
.hero h1{color:#d84431}
.hero-title{max-width:850px;color:var(--black)}
.hero-title em{color:#e44a34}
.hero-foot{border-color:rgba(32,32,36,.35);color:var(--black);max-width:760px}
.play i{border-color:var(--black)}
.play:hover i{background:var(--coral);border-color:var(--coral);color:#fff}
.kicker{color:#ffd72e}

section{position:relative}
.section-no{color:#625d54}
.section-link{color:#d94731;font-weight:700}

.about{
  grid-template-columns:130px minmax(300px,.8fr) minmax(360px,1.25fr);
  align-items:center;
  gap:45px;
  background:var(--cream);
  color:var(--black);
  overflow:hidden;
}

.about::before{
  content:"";
  position:absolute;
  width:220px;
  height:55px;
  left:-45px;
  bottom:65px;
  background:var(--coral);
  transform:rotate(12deg);
  clip-path:polygon(0 25%,100% 0,91% 78%,8% 100%);
}

.about-art{
  position:relative;
  margin:0;
  height:620px;
  overflow:hidden;
  border-radius:42% 58% 44% 56%/24% 31% 69% 76%;
  box-shadow:18px 20px 0 rgba(22,184,189,.24);
}

.about-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(14,14,17,.72),transparent 45%);
}

.about-art img{width:100%;height:100%;object-fit:cover}
.about-art figcaption{
  position:absolute;
  z-index:2;
  left:28px;
  bottom:28px;
  color:#fff;
  font:clamp(2rem,3vw,3.4rem)/.92 Prata,serif;
}
.about-text em{color:#df4934}
.about-small{color:#49453e}

.practice-logo{
  display:block;
  width:min(270px,62%);
  height:auto;
  margin:0 0 24px;
  filter:drop-shadow(0 10px 16px rgba(40,32,20,.12));
}
.practice-item strong{font-weight:850}
.whatsapp-cta{
  display:inline-flex;
  margin-top:22px;
  padding:14px 18px;
  border-radius:999px;
  background:#168b63;
  color:#fff;
  font-weight:800;
  line-height:1.35;
}
.whatsapp-cta:hover{background:#106f50}

.practice{
  color:var(--black);
  background:
    linear-gradient(112deg,transparent 0 67%,rgba(117,87,217,.13) 67% 100%),
    #ffe172;
  overflow:hidden;
}

.practice::before{
  content:"";
  position:absolute;
  width:420px;
  height:110px;
  right:-85px;
  top:68px;
  background:var(--coral);
  opacity:.95;
  transform:rotate(-7deg);
  clip-path:polygon(0 20%,100% 0,92% 82%,7% 100%);
}

.practice::after{
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  right:9%;
  bottom:-90px;
  background:var(--teal);
  border-radius:53% 47% 62% 38%;
  opacity:.7;
}

.practice h2,.practice-grid{position:relative;z-index:1}
.practice-item{
  background:rgba(255,250,240,.82);
  border:0;
  border-radius:28px;
  padding:34px;
  box-shadow:0 18px 40px rgba(76,55,5,.1);
}
.practice-item:nth-child(2){transform:translateY(30px)}
.practice-item p{color:#514a3d}
.practice-number{color:#d33f2d}

.videos{
  background:
    radial-gradient(circle at 90% 20%,rgba(237,79,139,.16),transparent 24%),
    var(--cream);
}
.videos h2{color:var(--black)}
.video-card{background:var(--paper);padding:10px 10px 18px;border-radius:24px;box-shadow:0 12px 26px rgba(67,44,13,.12)}
.video-card:nth-child(1){transform:rotate(-1deg)}
.video-card:nth-child(2){transform:translateY(24px) rotate(.7deg)}
.video-card:nth-child(3){transform:rotate(-.5deg)}
.video-thumb{border-radius:17px}
.video-thumb::after{border-radius:17px;background:rgba(0,0,0,.13)}
.video-card span,.video-card small{padding-left:7px;padding-right:7px}
.video-card small{color:#d74631}

.films{
  background:var(--paper);
  color:var(--black);
  overflow:hidden;
}
.films::before{
  content:"";
  position:absolute;
  z-index:0;
  width:300px;
  height:70px;
  left:-70px;
  top:38%;
  background:var(--orange);
  opacity:.18;
  transform:rotate(12deg);
  clip-path:polygon(0 25%,100% 0,91% 78%,8% 100%);
}
.films>*{position:relative;z-index:1}
.film-heading{
  display:grid;
  grid-template-columns:1fr minmax(300px,470px);
  align-items:end;
  gap:50px;
  margin-bottom:60px;
}
.film-heading img{
  width:100%;
  height:540px;
  object-fit:cover;
  object-position:center 24%;
  border-radius:30px;
  box-shadow:16px 16px 0 rgba(255,85,61,.22);
}
.art-kicker{
  display:block;
  margin-bottom:16px;
  color:#d64631;
  font:700 11px "DM Mono";
  letter-spacing:.16em;
  text-transform:uppercase;
}
.film-list{border-color:rgba(32,32,36,.2)}
.film{border-color:rgba(32,32,36,.18)}
.film:hover{color:#d94330;background:rgba(255,215,46,.16);padding-left:14px;padding-right:14px}
.film-year,.film-role{color:#6c665d}
.film-arrow{color:var(--black)}
.television{margin-top:120px}
.serial-art{
  display:grid;
  grid-template-columns:minmax(280px,430px) 1fr;
  align-items:center;
  gap:45px;
  margin:36px 0 60px;
  padding:28px;
  border-radius:32px;
  background:#45cbc6;
  overflow:hidden;
}
.serial-art img{width:100%;height:440px;object-fit:cover;border-radius:22px}
.serial-art span{font:clamp(2.8rem,6vw,6.5rem)/.88 Prata,serif;letter-spacing:-.06em}
.television-note{color:#5f5a52}

.reel{
  min-height:82vh;
  padding:0;
  display:grid;
  grid-template-columns:minmax(330px,.9fr) 1.1fr;
  align-items:stretch;
  background:#3156b6;
  color:#fff;
  overflow:hidden;
}
.reel::before{
  content:"";
  position:absolute;
  width:390px;
  height:85px;
  right:-70px;
  top:75px;
  background:var(--coral);
  transform:rotate(-11deg);
  clip-path:polygon(0 22%,100% 0,92% 82%,7% 100%);
}
.reel-art{width:100%;height:82vh;object-fit:cover}
.reel-content{
  position:relative;
  z-index:1;
  padding:70px 5vw;
  align-items:end;
}
.reel h2{color:#fff}
.reel p{font:italic clamp(1.2rem,2vw,2rem) Prata,serif;color:#ffd95a}
.large-play:hover{background:#ffd72e;border-color:#ffd72e;color:#202024}

.gallery{
  background:
    radial-gradient(circle at 8% 90%,rgba(255,85,61,.2),transparent 24%),
    var(--cream);
  color:var(--black);
}
.gallery .section-link{color:#d84430}
.stills{display:block;columns:3;column-gap:20px}
.still{
  display:block;
  width:100%;
  height:auto;
  margin:0 0 20px;
  break-inside:avoid;
  overflow:hidden;
  border-radius:26px;
  border:7px solid rgba(255,255,255,.86);
  box-shadow:0 12px 28px rgba(62,40,12,.13);
}
.still:nth-child(3n+1){transform:rotate(-.45deg)}
.still:nth-child(3n+2){transform:rotate(.4deg)}
.still img{display:block;width:100%;height:auto;filter:none}

.contact{
  min-height:72vh;
  background:
    radial-gradient(circle at 90% 12%,rgba(255,255,255,.35),transparent 23%),
    #ff714f;
  color:var(--black);
  overflow:hidden;
}
.contact::before{
  content:"";
  position:absolute;
  width:42vw;
  height:42vw;
  right:-13vw;
  bottom:-20vw;
  background:#42cbc5;
  border-radius:44% 56% 61% 39%;
}
.contact::after{
  content:"";
  position:absolute;
  width:360px;
  height:75px;
  left:-50px;
  top:24%;
  background:#ffd72e;
  transform:rotate(-9deg);
  clip-path:polygon(0 24%,100% 0,91% 78%,8% 100%);
}
.contact>*{position:relative;z-index:1}
.contact-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.whatsapp-main{
  display:inline-flex;
  padding:15px 20px;
  border:2px solid var(--black);
  border-radius:999px;
  background:#fff4dc;
  font-size:clamp(1rem,1.7vw,1.35rem);
}
.whatsapp-main:hover{background:var(--black);color:#fff}
.social-links a:hover{background:var(--black);color:#fff}

footer{background:var(--black);color:#fff;padding-top:24px;padding-bottom:24px}
footer a{color:#ffd72e}

.media-modal{background:rgba(20,18,16,.94)}
.modal-close{background:var(--coral);border-color:var(--coral)}

@media(max-width:900px){
  .about{grid-template-columns:90px 1fr}
  .about-art{grid-column:2;height:540px}
  .about-copy{grid-column:2}
  .film-heading{grid-template-columns:1fr minmax(250px,360px)}
  .serial-art{grid-template-columns:minmax(240px,330px) 1fr}
}

@media(max-width:700px){
  header{padding:13px 5vw}
  .name{font-size:.78rem;letter-spacing:.1em}
  .name img{width:38px;height:38px}
  nav{display:none}
  .hero{display:flex;flex-direction:column;min-height:auto;padding:105px 5vw 36px;align-items:stretch}
  .hero::before{top:46%;right:-105px;opacity:.42}
  .hero::after{background:linear-gradient(180deg,rgba(255,244,220,.92),rgba(255,244,220,.18) 58%,transparent)}
  .hero-content{order:1;width:100%}
  .hero h1{max-width:100%;font-size:10px;line-height:1.55}
  .hero-title{font-size:clamp(3rem,14vw,4.8rem);max-width:100%;margin:24px 0 18px;line-height:.9}
  .hero-foot{position:relative;left:auto;right:auto;bottom:auto;max-width:none;flex-direction:column;align-items:flex-start;gap:18px}
  .hero-portrait{order:2;position:relative;right:auto;bottom:auto;width:min(78vw,390px);height:auto;aspect-ratio:.68;margin:32px 0 0 auto;object-position:center 18%;border-radius:42% 58% 10% 10%/20% 28% 4% 4%}
  .paint-a{width:82vw;right:-26vw;top:57%;opacity:.35}
  .paint-b{width:72vw;right:-20vw;bottom:5%;opacity:.45}
  .paint-c{width:105px;height:105px;right:5vw;top:42%;opacity:.35}
  .practice h2,.videos h2,.films h2,.gallery h2{font-size:clamp(2.6rem,12vw,4.2rem)}
  .practice-item{padding:26px 22px}
  .practice-item h3{font-size:clamp(2rem,9vw,3.1rem)}
  .practice-logo{width:min(240px,74%);margin-bottom:20px}
  .whatsapp-cta{font-size:.86rem;padding:13px 15px}
  .about{display:grid;grid-template-columns:1fr;gap:24px}
  .about .section-no,.about-art,.about-copy{grid-column:1}
  .about-art{height:520px;border-radius:30px}
  .practice::before{opacity:.4}
  .practice-item:nth-child(2){transform:none}
  .video-card:nth-child(n){transform:none}
  .film-heading{grid-template-columns:1fr;gap:28px}
  .film-heading img{height:500px}
  .television{margin-top:85px}
  .serial-art{grid-template-columns:1fr;padding:16px;gap:24px}
  .serial-art img{height:450px}
  .serial-art span{padding:0 10px 15px}
  .reel{grid-template-columns:1fr;min-height:auto}
  .reel::before{display:none}
  .reel-art{height:auto;max-height:none;object-fit:contain}
  .reel-content{min-height:auto;padding:42px 5vw}
  .stills{columns:2;column-gap:9px}
  .still{margin-bottom:9px;border-width:4px;border-radius:15px}
  .still:nth-child(n){transform:none}
  .contact{min-height:auto}
  .contact h2{font-size:clamp(3rem,15vw,5.2rem)}
  .contact-actions{width:100%}
  .whatsapp-main{width:100%;justify-content:center;text-align:center}
  footer{flex-direction:column;gap:9px}
}