/* Homepage proportions from Alireza's October 4 layout reference.
   Scoped to the homepage so case-study typography and navigation stay shared. */
body[data-portfolio-page=home]{--home-pad:clamp(20px,2.6vw,40px);--home-section-gap:clamp(56px,7vw,104px)}
/* The live liquid identity opens the page, followed by Case Studies. */
body[data-portfolio-page=home] .portfolio-liquid-hero{position:relative;margin:0;padding:120px 0 64px;background:var(--page);color:var(--ink);overflow:hidden;isolation:isolate}
body[data-portfolio-page=home] .portfolio-liquid-hero .portfolio-footer-liquid-scene{height:900px;background:var(--page)}
body[data-portfolio-page=home] .portfolio-liquid-hero .portfolio-liquid-objects{top:0;height:900px}
body[data-portfolio-page=home] .portfolio-liquid-hero .portfolio-liquid-circles{bottom:24px;height:656px}
body[data-portfolio-page=home] .portfolio-liquid-hero .portfolio-footer-symbols{top:398px}
body[data-portfolio-page=home] .portfolio-liquid-hero .portfolio-liquid-contrast{mix-blend-mode:normal}
body[data-portfolio-page=home] .portfolio-liquid-hero .portfolio-footer-intro{top:0;filter:none}
body[data-portfolio-page=home] .portfolio-liquid-hero .portfolio-footer-ink{color:var(--ink)!important}
body[data-portfolio-page=home] .portfolio-liquid-hero h1.portfolio-footer-name{font-size:clamp(48px,7.2vw,112px)!important;line-height:1.1!important;letter-spacing:-.04em!important;font-weight:900!important;margin:0!important;filter:none;white-space:nowrap}
body[data-portfolio-page=home] .portfolio-liquid-hero p.portfolio-footer-role{font-size:20px!important;line-height:1.5!important;letter-spacing:0!important;margin:22px auto 0!important;filter:none}
body[data-portfolio-page=home] .portfolio-liquid-hero .portfolio-footer-bottom{max-width:1200px;text-align:center;margin:56px auto 0!important}
body[data-portfolio-page=home] .portfolio-liquid-hero p.portfolio-footer-copy{font-size:clamp(18px,1.75vw,25px)!important;line-height:1.5!important;letter-spacing:0!important;color:var(--ink);filter:none}
body[data-portfolio-page=home] #main .portfolio-case-previews{padding-top:48px}
body[data-portfolio-page=home] #main .portfolio-showcase{padding:var(--home-section-gap) var(--home-pad);color:var(--ink);background:var(--page)}
body[data-portfolio-page=home] #main .portfolio-showcase .portfolio-section-heading{justify-content:space-between;align-items:center;margin-bottom:32px}
body[data-portfolio-page=home] #main .portfolio-section-heading h2{font-size:clamp(32px,3.9vw,56px)!important;line-height:1.12!important;letter-spacing:-.025em!important;text-align:left;text-wrap:pretty}
body[data-portfolio-page=home] #main .portfolio-case-previews .portfolio-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 16px}
body[data-portfolio-page=home] #main .portfolio-preview-frame{aspect-ratio:16/9;border-radius:clamp(24px,4.2vw,64px)}
body[data-portfolio-page=home] #main .portfolio-preview-caption{padding:24px 0 0;gap:0}
body[data-portfolio-page=home] #main .portfolio-preview-caption h3{font-size:20px!important;line-height:1.2!important;letter-spacing:-.015em!important;margin:0 0 5px!important}
body[data-portfolio-page=home] #main .portfolio-preview-caption p{font-size:14px!important;line-height:1.4!important;color:var(--muted)}
body[data-portfolio-page=home] #main .portfolio-preview-caption>span{display:none}
body[data-portfolio-page=home] #main :is(.portfolio-identity,.portfolio-events) .portfolio-project-grid{gap:32px 16px}
body[data-portfolio-page=home] #main :is(.portfolio-identity,.portfolio-events) :is(.portfolio-project-tile-caption,.portfolio-tile-arrow){display:none}
body[data-portfolio-page=home] #main .portfolio-motion{padding-inline:0;--motion-pad:var(--home-pad)}
body[data-portfolio-page=home] #main .portfolio-motion .portfolio-section-heading{padding-inline:var(--home-pad);flex-direction:row}
body[data-portfolio-page=home] #main .portfolio-play-hint{font-size:10px;letter-spacing:.14em;line-height:1.4;padding:0;color:#367a46}
body[data-portfolio-page=home] #main .portfolio-motion-list{--film-height:clamp(280px,39vw,560px);gap:20px}
body[data-portfolio-page=home] #main .portfolio-motion .portfolio-film{border-radius:clamp(22px,2.1vw,32px)}
body[data-portfolio-page=home] #main .portfolio-motion .portfolio-project-tile-caption{display:none}
body[data-portfolio-page=home] #main .portfolio-motion .portfolio-film-external{opacity:0;visibility:hidden}
body[data-portfolio-page=home] #main .portfolio-motion .portfolio-film:focus-within .portfolio-film-external{opacity:1;visibility:visible}
body[data-portfolio-page=home] #main .portfolio-about{padding:clamp(64px,8vw,116px) clamp(24px,4vw,60px) 72px;background:var(--page);color:var(--ink)}
body[data-portfolio-page=home] #main .portfolio-about-intro{grid-template-columns:1fr 1fr;gap:16px 7vw}
body[data-portfolio-page=home] #main .portfolio-about-intro>.portfolio-eyebrow{grid-column:1;grid-row:1;margin:0!important;font-size:10px!important}
body[data-portfolio-page=home] #main .portfolio-about-intro>h2{grid-column:1;grid-row:2;align-self:start;font-size:clamp(32px,4vw,58px)!important;line-height:1.12!important;letter-spacing:-.025em!important;margin:0!important;text-wrap:pretty}
body[data-portfolio-page=home] #main .portfolio-about-story{grid-column:2;grid-row:1/3}
body[data-portfolio-page=home] #main .portfolio-about-story p{font-size:15px!important;line-height:1.6!important;letter-spacing:0!important;margin:0 0 20px!important;color:var(--muted)}
body[data-portfolio-page=home] #main .portfolio-about-story p:last-child{margin-bottom:0!important}
body[data-portfolio-page=home] #main .portfolio-services{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:56px;padding-top:56px}
body[data-portfolio-page=home] #main .portfolio-services article{padding:24px;border-radius:24px;background:var(--surface)}
body[data-portfolio-page=home] #main .portfolio-services article>span{font-size:11px;line-height:1.4}
body[data-portfolio-page=home] #main .portfolio-services h3{font-size:18px!important;line-height:1.25!important;letter-spacing:-.01em!important;margin:18px 0 12px!important}
body[data-portfolio-page=home] #main .portfolio-services p{font-size:14px!important;line-height:1.5!important;letter-spacing:0!important;margin:0!important;color:var(--muted)}
body[data-portfolio-page=home] #main .portfolio-liquid-panel{padding-top:120px;padding-bottom:48px}
body[data-portfolio-page=home] #main .portfolio-liquid-panel .portfolio-footer-intro{top:24px}
body[data-portfolio-page=home] #main .portfolio-liquid-panel p.portfolio-footer-name{font-size:clamp(36px,4.6vw,68px)!important;line-height:1.1!important}
body[data-portfolio-page=home] #main .portfolio-liquid-panel p.portfolio-footer-role{font-size:16px!important;line-height:1.5!important;margin:10px auto 0!important}
body[data-portfolio-page=home] #main .portfolio-liquid-panel .portfolio-footer-bottom{max-width:1000px;margin:56px auto 0!important}
body[data-portfolio-page=home] #main .portfolio-liquid-panel p.portfolio-footer-copy{font-size:18px!important;line-height:1.5!important;letter-spacing:0!important}
body[data-portfolio-page=home] #main .portfolio-liquid-panel .portfolio-footer-socials{margin-top:24px;gap:10px}
body[data-portfolio-page=home] #main .portfolio-liquid-panel .portfolio-footer-social{min-height:44px;padding:10px 16px;font-size:12px;gap:7px}
body[data-portfolio-page=home] #main .portfolio-liquid-panel .portfolio-footer-social svg{width:16px;height:16px}
body[data-portfolio-page=home] #main .portfolio-clients{padding:52px 0 48px}
body[data-portfolio-page=home] #main .portfolio-clients h2{font-size:16px!important;line-height:1.5!important;font-weight:400!important;margin:0 0 28px!important;color:var(--muted)}
body[data-portfolio-page=home] #main .portfolio-client{height:48px}
body[data-portfolio-page=home] #main .portfolio-client img{max-height:32px}
body[data-portfolio-page=home] #main .portfolio-logo-pause{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body[data-portfolio-page=home] #main .portfolio-logo-pause:focus-visible{position:static;width:auto;height:auto;min-height:44px;padding:10px 16px;margin:20px auto 0;clip-path:none;overflow:visible}
body[data-portfolio-page=home] #main .portfolio-simple-footer{padding:clamp(120px,19vw,280px) 0 100px}
body[data-portfolio-page=home] #main .portfolio-simple-footer .portfolio-footer-topline{display:none}
body[data-portfolio-page=home] #main .portfolio-footer-column h3{font-size:11px!important;letter-spacing:.08em!important;margin-bottom:20px!important}
body[data-portfolio-page=home] #main .portfolio-footer-column a{font-size:14px;min-height:30px;padding-block:4px}
body[data-portfolio-page=home] #main .portfolio-footer-column-explore a{font-size:20px;min-height:44px}
body[data-portfolio-page=home] #main .portfolio-footer-appearance{margin-top:64px;font-size:12px}
html[data-theme=dark] body[data-portfolio-page=home] #main .portfolio-play-hint{color:#8bdfa2}
@media(min-width:1069px){
 body[data-portfolio-page=home] #main :is(.portfolio-identity,.portfolio-events) .portfolio-project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:810px){
 body[data-portfolio-page=home] #main .portfolio-footer-liquid-scene{height:844px;background:var(--page)}
 body[data-portfolio-page=home] #main .portfolio-liquid-objects{top:0;height:844px}
 body[data-portfolio-page=home] #main .portfolio-liquid-circles{bottom:18px;height:656px}
 body[data-portfolio-page=home] #main .portfolio-footer-symbols{top:348px}
}
@media(max-width:1068px){
 body[data-portfolio-page=home] #main .portfolio-case-previews .portfolio-project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
 body[data-portfolio-page=home] #main .portfolio-responsive-gallery{padding-inline:0}
 body[data-portfolio-page=home] #main .portfolio-responsive-gallery .portfolio-section-heading{padding-inline:var(--gallery-pad)}
 body[data-portfolio-page=home] #main .portfolio-services{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:809px){
 body[data-portfolio-page=home] .portfolio-liquid-hero{padding-top:110px;padding-bottom:36px}
 body[data-portfolio-page=home] .portfolio-liquid-hero .portfolio-footer-liquid-scene{height:480px}
 body[data-portfolio-page=home] .portfolio-liquid-hero .portfolio-liquid-objects{top:0;height:480px}
 body[data-portfolio-page=home] .portfolio-liquid-hero .portfolio-liquid-circles{bottom:56px;height:256px}
 body[data-portfolio-page=home] .portfolio-liquid-hero .portfolio-footer-symbols{top:auto;bottom:137px}
 body[data-portfolio-page=home] .portfolio-liquid-hero .portfolio-footer-intro{top:16px;width:100%;max-width:100%;padding:0 24px}
 body[data-portfolio-page=home] .portfolio-liquid-hero h1.portfolio-footer-name{font-size:clamp(30px,8.5vw,48px)!important;white-space:normal;line-height:1.15!important}
 body[data-portfolio-page=home] .portfolio-liquid-hero p.portfolio-footer-role{font-size:16px!important;max-width:30ch;margin-top:12px!important}
 body[data-portfolio-page=home] .portfolio-liquid-hero .portfolio-footer-bottom{margin-top:24px!important}
 body[data-portfolio-page=home] .portfolio-liquid-hero p.portfolio-footer-copy{font-size:18px!important;line-height:1.6!important;max-width:34ch;margin:0 auto!important}
 body[data-portfolio-page=home] .portfolio-liquid-hero .portfolio-footer-copy>span{display:inline}
 body[data-portfolio-page=home] .portfolio-liquid-hero .portfolio-footer-copy>span:not(:last-child)::after{content:" "}
 body[data-portfolio-page=home] #main .portfolio-liquid-panel{padding-top:64px}
 body[data-portfolio-page=home] #main .portfolio-liquid-panel .portfolio-footer-intro{top:16px}
 body[data-portfolio-page=home] #main .portfolio-liquid-panel p.portfolio-footer-role{max-width:30ch}
 body[data-portfolio-page=home] #main .portfolio-simple-footer{padding-top:100px}
}
@media(max-width:734px){
 body[data-portfolio-page=home] #main .portfolio-about-intro{display:block}
 body[data-portfolio-page=home] #main .portfolio-about-intro>h2{margin:16px 0 28px!important}
 body[data-portfolio-page=home] #main .portfolio-about-story p{font-size:16px!important}
 body[data-portfolio-page=home] #main .portfolio-services{margin-top:32px;padding-top:32px;gap:16px}
 body[data-portfolio-page=home] #main .portfolio-services article{padding:22px}
 body[data-portfolio-page=home] #main .portfolio-services h3{font-size:17px!important}
 body[data-portfolio-page=home] #main .portfolio-liquid-panel p.portfolio-footer-copy{font-size:18px!important;line-height:1.6!important;max-width:34ch}
 body[data-portfolio-page=home] #main .portfolio-liquid-panel .portfolio-footer-bottom{margin-top:28px!important}
}
@media(max-width:600px){
 body[data-portfolio-page=home] #main .portfolio-case-previews .portfolio-project-grid{grid-template-columns:minmax(0,1fr)}
 body[data-portfolio-page=home] #main .portfolio-preview-caption{padding-top:18px}
 body[data-portfolio-page=home] #main .portfolio-showcase .portfolio-section-heading{margin-bottom:26px}
 body[data-portfolio-page=home] #main .portfolio-motion .portfolio-section-heading{gap:12px}
 body[data-portfolio-page=home] #main .portfolio-play-hint{font-size:9px}
 body[data-portfolio-page=home] #main .portfolio-motion-list{--film-height:320px;gap:16px}
 body[data-portfolio-page=home] #main .portfolio-services{grid-template-columns:1fr}
 body[data-portfolio-page=home] #main .portfolio-liquid-panel p.portfolio-footer-name{font-size:clamp(32px,8.5vw,48px)!important}
 body[data-portfolio-page=home] #main .portfolio-liquid-panel .portfolio-footer-social{font-size:13px}
 body[data-portfolio-page=home] #main .portfolio-simple-footer{padding-bottom:56px}
}

/* A consistent closing rhythm across About, clients and the sitemap. */
body[data-portfolio-page=home] #main .portfolio-about{padding-bottom:32px;margin-bottom:0}
body[data-portfolio-page=home] #main .portfolio-clients{padding:32px 0;margin:0;min-height:0;height:auto}
body[data-portfolio-page=home] #main .portfolio-simple-footer{padding:48px 0;margin-top:0;min-height:0}
@media(max-width:734px){
 body[data-portfolio-page=home] #main .portfolio-about{padding-bottom:24px}
 body[data-portfolio-page=home] #main .portfolio-clients{padding:24px 0}
 body[data-portfolio-page=home] #main .portfolio-simple-footer{padding:32px 0 40px}
}