.intro-banner{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 5% 70%,#dcefeb 0,transparent 55%);margin:0 0 30px;padding:15px 34px 0;border-bottom:1px solid var(--line)}
.intro-masthead{font:900 clamp(38px,6.8vw,88px)/1.2 Lato,sans-serif;letter-spacing:-.055em;color:var(--mint);white-space:nowrap;text-align:center;opacity:.8;margin-bottom:4px}
.intro-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding:18px 14px 38px}
.intro-copy{position:relative;z-index:2;padding:10px 0}.intro-hello{display:inline-block;background:var(--lavender);color:var(--plum);padding:5px 15px;margin-bottom:20px;font-size:16px;transform:rotate(3deg)}
.intro-copy h1{font:400 clamp(34px,4.5vw,58px)/1.35 SiteHeadings,Tajawal,sans-serif;color:var(--plum);margin:0 0 20px}.intro-copy h1 em{color:var(--mauve);font-style:normal}.intro-copy p{max-width:370px;font-size:16px;line-height:1.9}.intro-actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:24px}.intro-actions .button{margin:0;border-radius:30px;background:var(--plum);border-color:var(--plum);padding:11px 23px}.intro-actions .button:hover{background:var(--mauve)}.intro-link{font-size:13px;padding:9px 0;border-bottom:1px solid var(--mint)}
.intro-scene{position:relative;max-width:370px;width:100%;justify-self:center;padding:0 22px 20px 7px}.intro-photo{position:relative;height:370px;border-radius:160px 160px 12px 12px;box-shadow:-14px 14px 0 #adc9dc;overflow:hidden;background:#b9b8d3}.intro-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}.intro-orbit{position:absolute;top:30px;left:-24px;width:89px;height:89px;border-radius:50%;background:var(--lavender);color:var(--plum);font:700 10px/1.65 Lato,sans-serif;display:grid;place-content:center;text-align:center;transform:rotate(-12deg)}.intro-star{position:absolute;right:-4px;bottom:56px;color:var(--mauve);font:70px/1 Lato,sans-serif}.intro-caption{position:absolute;bottom:3px;left:14px;background:var(--mint);box-shadow:3px 4px 0 var(--plum);padding:10px 15px;font:700 10px Lato,sans-serif;letter-spacing:.8px;transform:rotate(-4deg)}.intro-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-top:1px solid #d4e1dc;color:var(--muted);font-size:12px}.intro-bottom [lang=en]{font:10px Lato,sans-serif;letter-spacing:1px}.intro-bottom>span:nth-child(2){color:var(--mint)}
@media(max-width:1000px){.intro-banner{padding-inline:18px}.intro-grid{gap:25px;padding-inline:5px}.intro-photo{height:330px}.intro-orbit{left:-8px;width:75px;height:75px;font-size:9px}.intro-copy h1{font-size:43px}.intro-copy p{font-size:15px}.intro-actions{gap:12px}.intro-actions .button{padding:9px 17px}}
@media(max-width:760px){.intro-banner{padding:9px 15px 0}.intro-masthead{font-size:clamp(25px,6.5vw,46px);letter-spacing:-.05em}.intro-grid{grid-template-columns:1fr;gap:30px;padding:22px 0 27px}.intro-copy{padding:0;text-align:center}.intro-hello{font-size:14px;margin-bottom:15px}.intro-copy h1{font-size:39px;line-height:1.4;margin-bottom:16px}.intro-copy p{margin:auto;max-width:340px;font-size:14px}.intro-actions{justify-content:center;margin-top:20px}.intro-scene{max-width:280px;padding-right:18px}.intro-photo{height:300px}.intro-star{right:-3px;font-size:58px}.intro-orbit{left:-4px;top:25px}.intro-bottom{justify-content:center;flex-wrap:wrap;gap:6px 12px;font-size:11px}.intro-bottom [lang=en]{font-size:8px;letter-spacing:.6px}}

/* English hero typography, matching the portfolio. */
.intro-copy[lang=en]{font-family:Lato,sans-serif;text-align:left}.intro-copy[lang=en] h1{font-family:Lato,sans-serif;font-weight:900;font-size:clamp(32px,4.3vw,56px);line-height:1.12;letter-spacing:-.045em}.intro-copy[lang=en] p{font-size:15px;line-height:1.8}.intro-copy[lang=en] .intro-hello{font-size:13px;transform:rotate(-3deg)}.intro-copy[lang=en] .intro-actions{font-family:Lato,sans-serif}.intro-copy[lang=en] .button{font-size:13px}.intro-copy[lang=en] .intro-link{font-size:12px}
@media(max-width:1000px){.intro-copy[lang=en] h1{font-size:40px}}
@media(max-width:760px){.intro-copy[lang=en]{text-align:center}.intro-copy[lang=en] h1{font-size:clamp(30px,9vw,40px)}.intro-copy[lang=en] p{font-size:14px}}