/* Website adaptation of NATURA's approved 26-page portfolio.
   The original homepage stage/navigation remain in site.css. */
.portfolio{background:#080808;color:#f3f3f3;font-family:var(--font-sans);position:relative;isolation:isolate;padding:0;scroll-margin-top:70px}
.portfolio-index{max-width:1600px;margin:auto;padding:48px 3.75% 40px}
.portfolio-index__heading p{font-size:11px;letter-spacing:.08em;color:var(--natura-muted);margin:0 0 30px}
.portfolio-index__heading h2{font-size:clamp(38px,6vw,96px);font-weight:600;line-height:1;letter-spacing:-.035em;margin:0 0 26px}
.portfolio-index__heading>span{font-size:11px;letter-spacing:.09em;color:#bfbfbf}
.portfolio-index__links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;row-gap:0;margin-top:28px}
.portfolio-index__links a{display:flex;align-items:center;gap:16px;min-height:60px;padding:16px 0;border-top:1px solid #ffffff30;font-size:12px;line-height:1.5;color:#d5d5d5}
.portfolio-index__links a span{font-size:10px;color:#777;flex-shrink:0}
.portfolio-index__links a:hover{color:white}
.portfolio-project{scroll-margin-top:64px;max-width:1600px;margin:0 auto 64px}
.folio-spread{position:relative;overflow:hidden;color:#f3f3f3}
.folio-spread__canvas{position:relative;aspect-ratio:16/9;container-type:inline-size}
.folio-spread__images,.folio-spread__type{position:absolute;inset:0}
.folio-frame{position:absolute;display:block;overflow:hidden;margin:0;padding:0;background:#111;border:0;border-radius:0;color:inherit}
.folio-frame img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.folio-frame:focus-visible{outline:2px solid white;outline-offset:-4px;z-index:3}
.folio-spread__shade{position:absolute;inset:0;background:linear-gradient(180deg,#0009,transparent 42%,transparent 65%,#0009);pointer-events:none}
.folio-spread__type{pointer-events:none}
.folio-type{position:absolute;margin:0;padding:0;line-height:1;white-space:nowrap;font-weight:400;transform:translateY(-.82em)}
.folio-type--wordmark{font-weight:700}
.folio-film{position:absolute;right:3.75%;bottom:7.8%;color:#f3f3f3;font-size:clamp(11px,1.2vw,17px);padding:12px 0;border-bottom:1px solid #ffffff70;min-height:44px;display:flex;align-items:center;z-index:2}
.folio-spread__footer{position:absolute;left:3.75%;right:3.75%;bottom:3.5%;display:flex;justify-content:space-between;font-size:clamp(9px,.83vw,13px);color:#bfbfbf;pointer-events:none}
/* Keep portfolio content consistent with the studio deck, without restyling the film stage. */
html.has-cinema-preview .section{font-family:var(--font-sans)}
html.has-cinema-preview .studio .display{font-size:var(--natura-title);font-weight:400;letter-spacing:-.035em;line-height:1.12;max-width:24em}
html.has-cinema-preview .studio__intro{grid-template-columns:1fr;gap:48px}
html.has-cinema-preview .studio__copy{max-width:850px;font-size:clamp(15px,1.25vw,20px);line-height:1.65}
html.has-cinema-preview .studio__manifest{font-size:clamp(18px,1.5vw,24px);line-height:1.4;font-weight:400}
.studio__manifest span{display:none}
.studio__copy p{margin:0}
.studio-board{margin-top:60px}
html.has-cinema-preview .section__kicker{font-size:11px;font-weight:400;letter-spacing:.08em;color:var(--natura-muted)}
html.has-cinema-preview .display{font-weight:500;letter-spacing:-.025em}
.contact .display{display:block;font-family:var(--font-sans);font-size:var(--natura-title)!important;letter-spacing:-.035em!important;font-weight:400!important;line-height:1.12!important}
.contact .display span{display:inline}
.contact .display span+span:before{content:' '}
.contact .display span:last-child{display:block;font-size:clamp(12px,1vw,16px);font-weight:400;letter-spacing:.04em;margin-top:16px;line-height:1.4}
.contact .display span:last-child:before{content:none}
/* Preserve full portfolio geometry on desktop/tablet; reflow its layers on phones. */
@media(max-width:900px){
 .portfolio-index__links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .portfolio{scroll-margin-top:80px}
 .portfolio-index{padding:32px 20px 28px}
 .portfolio-index__heading p{font-size:10px;margin-bottom:24px}
 .portfolio-index__heading h2{font-size:clamp(28px,8vw,48px);letter-spacing:-.045em}
 .portfolio-index__heading>span{font-size:9px;line-height:1.7}
 .portfolio-index__links{margin-top:32px;column-gap:20px}
 .portfolio-index__links a{font-size:10px;gap:10px;min-height:58px}
 .portfolio-project{margin-bottom:36px;scroll-margin-top:80px}
 .folio-spread__canvas{aspect-ratio:auto;display:flex;flex-direction:column;padding:24px 20px;container-type:normal}
 .folio-spread__images,.folio-spread__type{position:relative;inset:auto}
 .folio-spread__type{order:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:24px}
 .folio-type{position:static!important;transform:none;white-space:normal;font-size:12px!important;letter-spacing:0!important;line-height:1.4}
 .folio-type--wordmark{font-size:10px!important;letter-spacing:5px!important;margin-right:auto}
 .folio-type--metadata{font-size:9px!important;color:#bfbfbf!important}
 .folio-type--project-title{width:100%;font-size:34px!important;letter-spacing:-.02em!important;margin-top:24px}
 .folio-type--body{font-size:12px!important}
 .folio-type--body:last-child{margin-left:auto;color:#bfbfbf!important}
 .folio-type--frame-title{font-size:26px!important;width:100%;margin-top:18px;letter-spacing:-.02em!important}
 .folio-type--body-small{font-size:10px!important;color:#bfbfbf!important}
 .folio-spread--hero .folio-type--metadata:nth-child(3){display:none}
 .folio-spread__images{order:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .folio-frame{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;aspect-ratio:auto}
 .folio-frame img{height:auto;object-fit:contain}
 .folio-frame--main{grid-column:1/-1}
 .folio-spread--hero .folio-spread__images{display:block;margin:0 -20px}
 .folio-spread__shade{display:none}
 .folio-film{order:2;position:static;align-self:flex-start;font-size:12px;margin-top:14px;padding:10px 0}
 .folio-spread__footer{position:static;order:3;font-size:9px;margin-top:24px}
 html.has-cinema-preview .studio .display{font-size:var(--natura-title);line-height:1.15}
 html.has-cinema-preview .studio__intro{gap:32px}

}
/* Image quality: keep the original UI geometry, remove most of the tonal veil. */
html.has-cinema-preview .work-cinema__veil{background:linear-gradient(180deg,rgba(0,0,0,.24),transparent 18%,transparent 62%,rgba(0,0,0,.38) 86%,#080808 100%)}
.work-cinema__film,.work-cinema__poster{filter:none}
.work-cinema__film.is-portrait,.work-cinema__poster.is-portrait{object-fit:contain;background:#080808}
.work-cinema__credit,.work-cinema__open,.work-cinema__edition{text-shadow:0 1px 12px #0008}
@media(max-width:760px){html.has-cinema-preview .nav-links{gap:14px}.folio-type--project-title{margin-top:22px}.folio-spread--hero .folio-type--metadata:nth-child(3){display:none}}
/* User refinement: full-width spreads, same mosaic enlarged as one unit. */
.portfolio-project{max-width:none}
.folio-spread--frames{background:var(--paper,#080808)!important}
html.has-cinema-preview.is-red-cursor-active .folio-viewer,html.has-cinema-preview.is-red-cursor-active .folio-viewer *{cursor:auto!important}
html.has-cinema-preview.is-red-cursor-active .folio-viewer button{cursor:pointer!important}
/* Continuous editorial flow: keep the artwork geometry, remove slide chrome. */
.portfolio,.portfolio-project,.folio-spread{background-color:#080808!important}
.portfolio-project{margin-bottom:0}
.folio-type--wordmark,.folio-type--metadata,.folio-spread__footer{display:none}
.folio-spread--frames{border:0;box-shadow:none}
.folio-spread--frames .folio-type--frame-title{font-weight:400}
.folio-spread--hero .folio-spread__shade{background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 40%,transparent 66%,#080808 100%)}
.folio-film{border:0;bottom:6%;color:#eee;letter-spacing:.025em;transition:opacity .2s}
.folio-film:hover{opacity:.65}
.portfolio-index__links a{border-color:#ffffff1c}
@media(max-width:760px){
 .folio-spread__canvas{padding-top:36px;padding-bottom:36px}
 .folio-type--project-title{margin-top:0}
 .folio-type--frame-title{margin-top:0}
 .folio-spread--hero .folio-film{margin-bottom:0}
}
/* Natural-height services, independent of the old expanding-card layout. */
html.has-cinema-preview .services{padding-top:48px;padding-bottom:48px;margin-top:0}
html.has-cinema-preview .services>.section__kicker{margin-bottom:24px}
.expertise{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:36px 48px;align-items:start}
.expertise__intro{grid-column:1/-1;display:block}
.expertise__intro h2{font-size:clamp(36px,4.6vw,68px);font-weight:500;line-height:1.15;letter-spacing:-.035em;margin:0}
.expertise__intro p{font-size:14px;line-height:1.8;color:#aaa;margin:0;max-width:680px}
.expertise__images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.expertise__images img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.expertise__list{display:grid;gap:22px;list-style:none;padding:0;margin:0}
.expertise__list li{min-width:0;margin:0;padding:0}
.expertise__list h3{display:flex;flex-direction:column;gap:7px;font-size:clamp(24px,2.4vw,38px);font-weight:400;line-height:1.2;letter-spacing:-.025em;margin:0}
.expertise__list small{font-size:10px;font-weight:400;line-height:1.4;letter-spacing:.07em;text-transform:uppercase;color:#999}
.expertise__list p{font-size:12px;line-height:1.6;color:#aaa;margin:10px 0 0}
@media(max-width:900px){
 .expertise{grid-template-columns:1fr;gap:28px}
 .expertise__intro{grid-template-columns:1fr;gap:18px}
 .expertise__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px}
}
@media(max-width:760px){
 html.has-cinema-preview .services{padding-top:30px;padding-bottom:30px}
 html.has-cinema-preview .services>.section__kicker{margin-bottom:18px}
 .expertise__intro h2{font-size:36px}
 .expertise__images{gap:10px}
 .expertise__list{gap:24px 16px}
 .expertise__list h3{font-size:25px}
 .expertise__list small{font-size:9px;letter-spacing:.02em}
 .expertise__list p{font-size:11px}
}

/* Keep the introduction near the clients; workspace images lead into workflow. */
html.has-cinema-preview .studio-space{min-height:0;padding-top:40px;padding-bottom:40px}
.studio-space .studio-board{margin-top:0}
@media(max-width:760px){html.has-cinema-preview .studio-space{padding-top:24px;padding-bottom:24px}}
/* Balance the service list against the full height of the image mosaic. */
@media(min-width:901px){
 .expertise__list{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
}

/* Quiet section labels follow the original website, not presentation sizing. */
.folio-spread--frames .folio-type--frame-title{font-family:var(--font-sans);font-size:11px!important;font-weight:400;letter-spacing:.08em!important;line-height:1.4;color:#aaa7a2!important}
.folio-spread--frames .folio-type--body-small{font-family:var(--font-sans);font-size:14px!important;font-weight:400;letter-spacing:0!important;line-height:1.6;color:#aaa!important}
.folio-film{font-family:var(--font-sans);font-size:12px;color:#aaa;letter-spacing:.02em}
.folio-film:hover{color:#eee;opacity:1}
@media(min-width:761px){
 .folio-spread--frames .folio-spread__type{inset:10% 2.7% auto;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
 .folio-spread--frames .folio-type--frame-title,.folio-spread--frames .folio-type--body-small{position:static!important;transform:none;white-space:normal;margin:0}
}
@media(max-width:760px){
 .folio-spread--frames .folio-spread__type{flex-direction:column;align-items:flex-start;gap:16px}
 .folio-spread--frames .folio-type--frame-title{width:auto}
 .folio-spread--frames .folio-type--body-small{font-size:12px!important}
}

/* Shared visual language taken from the original homepage film titles. */
:root{--natura-title:clamp(28px,3.35vw,54px);--natura-muted:#aaa7a2;--natura-secondary:#aaa}
.folio-cover-copy{position:absolute;top:12%;left:3.75%;right:3.75%;pointer-events:none;font-family:var(--font-sans);text-align:left;text-shadow:0 1px 12px #0005}
.folio-cover-copy h3{font-size:var(--natura-title);font-weight:400;line-height:1.12;letter-spacing:-.035em;margin:0 0 12px;max-width:24em;overflow-wrap:break-word}
.folio-cover-copy__client{font-size:11px;line-height:1.5;letter-spacing:.06em;color:#ccc;margin:0 0 18px}
.folio-cover-copy__category{font-size:12px;line-height:1.6;letter-spacing:.06em;color:#bfbfbf;margin:0}
html.has-cinema-preview .display{font-weight:400}
.expertise__list h3{font-family:var(--font-sans);font-weight:400;letter-spacing:-.035em}
.expertise__intro p,.folio-spread--frames .folio-type--body-small,.contact .display span:last-child{color:var(--natura-secondary)}
.workflow__heading{font-size:11px;line-height:1.5;letter-spacing:.08em;color:var(--natura-muted);margin-bottom:32px}
.workflow__heading span{font-size:11px;letter-spacing:.08em}
.workflow__step strong{font-size:clamp(17px,1.5vw,23px)}
.workflow__step small{color:var(--natura-muted);letter-spacing:.06em}
/* Unframed controls: retain generous hit areas and keyboard focus feedback. */
.work-cinema__open{gap:14px}
.work-cinema__open svg{border:0;border-radius:0;padding:10px;background:none!important;transition:transform .2s}
.work-cinema__open:hover svg{transform:translate(3px,-3px)}
.work-cinema__controls button{width:44px;height:44px;border:0;border-radius:0;background:none;opacity:.65;transition:opacity .2s}
.work-cinema__controls button:hover{background:none;opacity:1}
.folio-viewer button,.work-modal__actions .work-modal__close,.project-share__toggle{border:0;border-radius:0;background:transparent;color:#bbb;min-height:44px}
.folio-viewer button:hover,.work-modal__actions .work-modal__close:hover,.project-share__toggle:hover{color:#fff;background:transparent}
html.has-cinema-preview .back-to-top,.consult-trigger{border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;min-height:44px;color:#ccc;text-shadow:0 1px 6px #000}
html.has-cinema-preview .back-to-top:hover,.consult-trigger:hover,.consult-widget.is-open .consult-trigger{background:none;color:#fff;transform:none}
.back-to-top:after{display:none}
.workflow__number{border:0;border-radius:0;background:var(--paper);font-size:13px;width:44px;height:44px;margin-bottom:22px}
.workflow li:before{top:22px;background:#ffffff16}
html.has-cinema-preview .clients__panel,html.has-cinema-preview .client-list{border:0;box-shadow:none;background:none}
html.has-cinema-preview .client-name,html.has-cinema-preview .client-name.is-active{border:0;background:none;box-shadow:none;transform:none}
.client-name:before,.client-name:after{display:none}
.work-modal__panel:before,.work-modal__panel:after{display:none}
.work-cinema__controls button:focus-visible,.work-cinema__open:focus-visible,.consult-trigger:focus-visible,.back-to-top:focus-visible,.project-share__toggle:focus-visible{outline:1px solid #aaa;outline-offset:3px}
@media(max-width:760px){
 .folio-cover-copy{position:relative;inset:auto;order:0;margin-bottom:24px;text-shadow:none}
 .folio-cover-copy__client{font-size:10px;margin-bottom:12px}
 .folio-cover-copy__category{font-size:11px}
 .contact .display span:first-child{white-space:nowrap}
}
html.has-cinema-preview .studio__copy{text-align:left}
/* Keep the homepage filmstrip continuous within and between projects. */
.work-cinema__rail,.work-cinema__stills{gap:0}
.work-cinema__thumb-label{padding-inline:10px}

/* Compact and expanded touch layouts share the same content and reading order. */
@media(max-width:900px){
 .portfolio-index__links a{font-size:12px;min-height:60px}
 .folio-spread__canvas{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
 .expertise__list p{font-size:12px;line-height:1.7}
 .expertise__list small{font-size:10px;line-height:1.5}
 .workflow__step{min-height:136px;padding-bottom:12px}
 .workflow__step small{font-size:10px;letter-spacing:.04em}
 .workflow__step strong{white-space:normal}
 .folio-viewer img{touch-action:pan-y pinch-zoom}
 .consult-widget{right:max(16px,env(safe-area-inset-right));bottom:calc(64px + env(safe-area-inset-bottom))}
 html.has-cinema-preview .back-to-top{right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom))}
 .consult-panel__close{width:44px;height:44px}
 .consult-panel{max-height:calc(100dvh - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
}
@media(max-width:600px){
 html.has-cinema-preview .nav-links{justify-content:space-between;gap:8px;font-size:10px}
 .work-cinema__thumb-label{font-size:10px}
 .work-cinema__timeline-head{font-size:10px}
 .work-cinema__open{font-size:13px}
 .work-cinema__open svg{box-sizing:content-box}
 .work-cinema__continue{font-size:9px;gap:10px}
}
@media(max-width:760px) and (max-height:700px){
 .work-cinema{min-height:520px}
 .work-cinema__caption{bottom:calc(198px + var(--safe-bottom))}
 .work-cinema__credit h1{font-size:clamp(23px,6vw,30px)}
 .work-cinema__credit p{margin-bottom:8px}
 .work-cinema__caption{gap:8px}
}
@media(max-width:900px) and (orientation:landscape) and (max-height:500px){
 .work-cinema{min-height:460px}
 .work-cinema__caption{bottom:calc(174px + var(--safe-bottom))}
}
@media(hover:none),(pointer:coarse){
 .ambient-cursor-field,.hover-cursor,.work-hover-caption{display:none!important}
 .folio-frame,.theme-toggle,.work-cinema__controls button,.workflow__step,.client-name{-webkit-tap-highlight-color:transparent}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 .reveal{opacity:1!important;transform:none!important}
 .folio-frame,.theme-toggle,.work-cinema__controls button,.site-header,.studio-gallery__item{transition:none!important;animation:none!important}
}

/* A continuous photographic stage; safety insets belong to controls, not the image. */
.folio-viewer{position:fixed;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;outline:0;background:#080808;color:#eee;overflow:hidden;font-family:var(--font-sans);color-scheme:dark}
.folio-viewer::backdrop{background:#080808}
.folio-viewer__inner{position:relative;width:100%;height:100%;padding:0}
.folio-viewer img{display:block;width:100%;height:100%;padding:calc(58px + env(safe-area-inset-top)) 0 calc(60px + env(safe-area-inset-bottom));object-fit:contain;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.folio-viewer header{position:absolute;z-index:1;top:env(safe-area-inset-top);left:max(20px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));height:58px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0}
.folio-viewer h2{font-size:11px;font-weight:400;line-height:1.5;letter-spacing:.035em;color:#aaa;margin:0}
.folio-viewer button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:44px;min-height:44px;padding:0;border:0;background:none;color:#bcbcbc;cursor:pointer}
.folio-viewer button:hover{color:#fff;background:none}
.folio-viewer button:focus-visible{outline:1px solid #ccc;outline-offset:-4px}
.folio-viewer button:focus:not(:focus-visible){outline:none}
.folio-viewer footer{position:absolute;z-index:1;bottom:calc(6px + env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:center;gap:24px;padding:0;height:48px}
.folio-viewer footer span{min-width:48px;text-align:center;font-size:11px;font-variant-numeric:tabular-nums;color:#8c8c8c;letter-spacing:.06em}
@media(max-height:500px){
 .folio-viewer img{padding-top:calc(44px + env(safe-area-inset-top));padding-bottom:calc(44px + env(safe-area-inset-bottom))}
 .folio-viewer header{height:44px}
 .folio-viewer footer{bottom:env(safe-area-inset-bottom);height:44px}
}

/* Page previews and the selected full-resolution image share one stable stage. */
.folio-viewer__image{position:absolute;inset:0}
.folio-viewer__image img{position:absolute;inset:0}
.folio-viewer__full{opacity:0;transition:opacity .16s ease}
.folio-viewer__full.is-loaded{opacity:1}
@media(prefers-reduced-motion:reduce){.folio-viewer__full{transition:none}}

/* Size the visible logo mark, not transparent padding in the source file. */
html.has-cinema-preview .client-name .client-name__logo{display:flex;align-items:center;justify-content:center;opacity:1!important;transform:none!important;height:76px;min-height:76px}
html.has-cinema-preview .client-name .client-name__logo .client-name__mark{display:block;position:relative;overflow:hidden;max-width:210px;flex-shrink:0;transform:none!important;opacity:1!important}
html.has-cinema-preview .client-name .client-name__logo .client-name__mark img{position:absolute;display:block;max-width:none!important;max-height:none!important;object-fit:fill;filter:brightness(0) invert(1)!important;opacity:.78!important;transform:none!important;mix-blend-mode:normal;transition:none}
html.has-cinema-preview[data-theme="light"] .client-name .client-name__logo .client-name__mark img{filter:brightness(0)!important;opacity:.78!important}
@media(max-width:900px){html.has-cinema-preview .client-name .client-name__logo{height:58px;min-height:58px;width:100%}}

/* Let the source film retain its own light and color in both themes. */
html.has-cinema-preview .work-cinema__veil{display:none}
html.has-cinema-preview .client-name{flex-grow:1!important;opacity:1!important}
html.has-cinema-preview .client-name .client-name__logo{width:100%;max-width:184px;justify-self:center}